We Keep Coding

Unable to get my html after EJS to display when the file is rendered

Hello Im not the best when it comes to using ejs so apologies if this is a stupid question. Im having a really difficult time figuring out why the html after my EJS data is not displaying, once I start my server. Im not sure if missing something after the ejs or if im completly using it incorrectly, Any help would be much appreciated.
Below you can find my code
<!-- Movie Section -->
<section class="movie-section-container">
<div class="category-banner">
<h1 class="category-name">POPULAR</h1>
</div>
<div class="movies-container">
<% movieData.items.forEach(movie=> {%>
<div class="movie-card-filter">
<div class="movie-card">
<span class="rating">
<%=movie.imDbRating%><i class="fa-solid fa-star"></i>
</span>
<div class="poster-container">
<img src=<%=movie.image%> alt=<%=movie.fullTitle%>>
</div>
<div class="movie-info">
<h5 class="movie-name">
<%=movie.title%>
</h5>
<div class="details">
<div class="year-date">
<span><span class="year">
<%=movie.year%>
</span>.<span class="runtime">127 min</span></span>
</div>
<div class="platform">
<span>Movie</span>
</div>
</div>
</div>
</div>
</div>
<%})%>
<!-- Movie Info Overlay -->
<section class="movie-overlay">
<div class="movie-details-container">
<div class="details-btns">
OFFICIAL PAGE
<button class="close-btn">
<i class="fa-solid fa-circle-xmark"></i>
</button>
</div>
<div class="movie-details">
<div class="movie-poster">
<img src="https://image.tmdb.org/t/p/w500/AeyiuQUUs78bPkz18FY3AzNFF8b.jpg"
alt="movie-poster">
</div>
<div class="info">
<h2 class="movie-info-name">Fullmetal Alchemist: The Final Alchemy</h2>
<h4 class="movie-info-release-date">Release date: 2022-06-24</h4>
<div class="movie-info-ratings">
<span>rating: 6.3 <i class="fa-solid fa-star"></i></span>
<span class="movie-info-votes">all votes: 109</span>
</div>
<div class="movie-info-genre">Action</div>
<div class="movie-info-plot">
<h4>Plot: The Elric brothers' long and winding journey comes to a close in
this epic finale,
where they must face off against an unworldly, nationwide threat.</h4>
</div>
</div>
</div>
<div class="trailer">
<div class="line"></div>
<h3 class="trailer-title">Trailer:</h3>
<iframe src="https://www.youtube.com/embed/cqj4u6eyDq8" title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen></iframe>

Ended up using a partial to fill in the rest of the information and this worked out for me, I'm not sure if this is the best practice but this was all that I was finding as a solution.

I see the code is not full. if your header and footer is in other file then add this to this file..
<%- include("header") -%> // it should contain content upper part.
<%- include("footer") -%> // it should contain content lower part.
if your code in partials then follow this one:
<%- include("partials/header") -%> // it should contain content upper part.
<%- include("partials/footer") -%> // it should contain content lower part.

Button on HTML page doesn't work

Hello I have an HTML page. I use the button to navigate on this page. But in the 2 section where there are slides, the button doesn't work.
I try to solve it for hour, but I don't understand the problem. You can find the site here.
And you can find the JSFiddle here.
Here there are the part html:
<div class="section" id="section5">
<div class="slide" id="slide1">
<div class="intro">
<h1>#your Led Solution 1 of 2</h1>
<br><br>
<p>Use an ILS LED Flasher Unit, connecting an ILS booster for each LED indicator lamp in the circuit</p>
<img src="http://i.imgur.com/DQ2i9iz.png" class="imgProduct" alt="ILS LED Flasher Unit and ILS booster" style="height:350px;">
<div id="type2">
<div class="btn-5" width="50px">→ VIEW PRODUCT</div>
<br><br>
</div>
<br>
</div>
<div class="btn-5-previous" width="50px">↩ PREVIOUS</div>
<div class="btn-5-top" width="10px">↑</div>
</div>
<div class="slide" id="slide2">
<div class="intro">
<h1>#your Led Solution 2 of 2</h1>
<br><br>
<p>Use an ILS LED Flasher Unit & LED indicator lamps with integrated pulse</p>
<img src="http://www.autoelettric.com/images/stories/virtuemart/product/ils-led-flasher-2022H4ILS.png" class="imgProduct" alt="ILS LED Flasher Unit & LED indicator lamps" style="height:350px;">
<div id="type2">
<div class="btn-5" width="50px">→ VIEW PRODUCT</div>
<br><br>
</div>
<br>
</div>
<div class="btn-5-previous" width="50px">↩ PREVIOUS</div>
<div class="btn-5-top" width="10px">↑</div>
</div>
<div class="btn-5-previous" width="50px">↩ PREVIOUS</div>
<div class="btn-5-top" width="10px">↑</div>
</div>

.fp-slides has z-index: 1; which place it on the top of back-to-button, so either remove z-index value of .fp-slides or add z-index to back-to-top button.
Also there is another set of #ExactPower and #SafeConversion buttons inside .fp-slides .slides.

Single page links are not working in wordpress website

I am getting something weird issue with my website. I have add some links to my website home page to another page. Something like this
www.fsfsdafsdafdsafsadf/#pro1
www.fsfsdafsdafdsafsadf/#pro2
www.fsfsdafsdafdsafsadf/#pro3
www.fsfsdafsdafdsafsadf/#pro4
Now when I click on any link it will send me to div pro1 on any of the link I click.. Please check the html also for that page
<!-- section 1 image-->
<div id="pro2" name="pro2">
<div class="inner-image-width">
<div class="inner-left">
<div class="titleinner">Unlimited possibilities </div>
Some text
</div>
<div class="inner-right">
<img width="500" height="325" src="http://fsfsdafsdafdsafsadf/wp-content/uploads/2016/06/product1.jpg" alt="product image1">
</div>
</div>
</div>
<!-- section 1 no image-->
<div id="pro1" name="pro1">
<div class="inner-image-width">
<div ><div class="titleinner">Boost in revenue </div>
Some text
<!-- section 2 image-->
<div id="p5">
<div class="inner-image-width">
<div class="inner-left">
<div class="titleinner">Improved customer experience </div>
Some text</div>
<div class="inner-right"><img width="500" height="325" src="http://fsfsdafsdafdsafsadf/wp-content/uploads/2016/07/product4.jpg" alt="product image1"></div>
</div>
</div>
<!-- section 2 no image-->
<div class="inner-image-width">
<div>
<div class="titleinner">Confidence in security </div>
Some text</div>
</div>
<!-- section 3 image-->
<div class="inner-image-width">
<div class="inner-left">
<img width="500" height="325" src="http://fsfsdafsdafdsafsadf/wp-content/uploads/2016/07/product3.jpg" alt="product image1">
</div>
<div class="inner-right"><div class="titleinner">Happier staff </div>
Some text</div>
</div>
<!-- section 3 no image-->
<div class="inner-image-width">
<div><div class="titleinner">Optimized marketing campaigns </div>
Some text
</div>
</div>
<!-- section 4 image-->
<div id="pro3" name="pro3" onlclick="window.location.hash = '#pro3'";>
<div class="inner-image-width">
<div class="inner-left">
<div class="titleinner">Secure payments </div>
Some text</div>
<div class="inner-right"><img width="500" height="325" src="http://fsfsdafsdafdsafsadf/wp-content/uploads/2016/07/product6.jpg" alt="product image1"></div>
</div>
</div>
<!-- section 4 no image-->
<div id="pro4" name="pro4">
<div class="inner-image-width">
<div><div class="titleinner">Fun entertainment </div>
Some text</div>
</div>
</div>
<!-- section 5 image-->
<div id="pro6" name="pro6">
<div class="inner-image-width">
<div class="inner-left">
<img width="500" height="325" src="http://fsfsdafsdafdsafsadf/wp-content/uploads/2016/07/product5.jpg" alt="product image1">
</div>
<div class="inner-right"><div class="titleinner">Reduced operating costs </div>
Some text</div>
</div>
</div>
<!-- section 5 no image-->
<div class="inner-image-width">
<div>
<div class="titleinner">Immediate improvements </div>
Some text</div>
</div>
<!-- section 6 image-->
<div class="inner-image-width">
<div class="inner-left">
<div class="titleinner">Increased brand loyalty </div>
Some text</div>
<div class="inner-right"><img width="500" height="325" src="http://fsfsdafsdafdsafsadf/wp-content/uploads/2016/07/product2.jpg" alt="product image1"></div>
</div>
<!-- section 6 no image-->
<div class="inner-image-width">
<div><div class="titleinner">Minimal risk </div>
Some text</div>
</div>
<div style="font-size:24px;">Contact us Some text</div>
I try every solution of stackoverflow but nothing work. Can anybody please help me this

You just use this:
Pro 1

Because you are using bookmarks(#hushtag) in your URL.
Check out HTML Links - Create a Bookmark
HTML bookmarks are used to allow readers to jump to specific parts of
a Web page.
Bookmarks are practical if your website has long pages.
To make a bookmark, you must first create the bookmark, and then add a
link to it.
When the link is clicked, the page will scroll to the location with
the bookmark.
In your case,
www.fsfsdafsdafdsafsadf/#pro1 -> click this link will jump to div #pro1
www.fsfsdafsdafdsafsadf/#pro2 -> click this link will jump to div #pro2
www.fsfsdafsdafdsafsadf/#pro3 -> click this link will jump to div #pro3
www.fsfsdafsdafdsafsadf/#pro4 -> click this link will jump to div #pro4
Basically, your URL bookmarks(#hushtag) works fine.
If you want to link to another page, just avoid using hashtag, maybe like this:
www.fsfsdafsdafdsafsadf/pro1.php -> click this will link to 'pro1.php'
like this:
link text
link text

Prevent animation on every row

I'm working on this code example of collapsible text.
jsfiddle Link
HTML:
<div class="container faq_wrapper">
<div class="row">
<div class="span10 offset1">
<p>
</p>
<div class="faq-all-actions">
<a class="faq-expand">Expand All</a> | <a class="faq-collapse">Collapse All</a></div>
</div>
</div>
<div class="row">
<div class="span10 offset1">
<div class="question-wrapper">
<div class="arrows">
</div>
<div class="big-q">
Q</div>
<div class="question">
<div class="arrow" ></div><h6><font size="6">Can I try the software before I buy it?</font></h6></div>
<div class="answer-wrapper">
<div class="big-a">
A</div>
<div class="answer">
Yes! Simply download a free trial and you'll have instant access to all features for 30 days, absolutely free. We don't require your credit card details or any commitment.</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="span10 offset1">
<div class="question-wrapper">
<div class="arrows">
</div>
<div class="big-q">
Q</div>
<div class="question">
<div class="arrow" ></div><h6><font size="6">Can I try the software before I buy it?</font></h6></div>
<div class="answer-wrapper">
<div class="big-a">
A</div>
<div class="answer">
Yes! Simply download a free trial and you'll have instant access to all features for 30 days, absolutely free. We don't require your credit card details or any commitment.</div>
</div>
</div>
</div>
</div>
</div>
JavaScript:
$(document)
.on('click','.row .question-wrapper',function(){
$(this).find('.answer-wrapper').slideToggle();
$('.arrow').toggleClass('down');
})
.on('click','.faq-expand',function(){
$('.answer-wrapper').slideDown();
$('.arrow').addClass('down');
})
.on('click','.faq-collapse',function(){
$('.answer-wrapper').slideUp();
$('.arrow').removeClass('down');
})
There is a issue with the code when i expand the first row. When I click on one row arrow animation is activated also on all rows. How I can prevent this?

Because you use this:
$('.arrow').toggleClass('down');
This will toggle the class for all elements with arrow class
You want to limit it to the question being clicked on
$(this).find(".arrow").toggleClass('down');
//or
$(".arrow",this).toggleClass('down');
Updated Fiddle

Foundation Framework Orbit not animating between slides properly

I have tried to use the foundation framework with the orbit sliders and when I test it on the browser, the slider performs the transitions, however the animations are not being performed and simply fades from 1 section to another.
Only when I try to resize the window, it works as expected.
After further inspection, apparently when the slider attempts to change using 'horizontal-push' the variable this.outerWIdth for the orbit-slide div is 1 instead of the actual width of the div.
Here is my markup for the features slider which I am using orbit for.
<div id="features-wrap" class="wrapper">
<!-- Insert Features Here -->
<div id="features-gutter" class="row">
<section id="features" class="row">
<div id="welcome">
<div class="eight columns">
<h4>Welcome</h4>
<p>Hello.</p>
</div>
<div class="four columns">
<img src="img/content/promo1.jpg" alt="Promo Image 1" width="320" height="220">
</div>
</div>
<div id="decorated">
<div class="eight columns">
<h4>Decorated Apparel</h4>
<p>Some Text</p>
</div>
<div class="four columns">
<img src="img/content/promo2.jpg" alt="Promo Image 1" width="320" height="220">
</div>
</div>
<div id="promotional">
<div class="eight columns">
<h4>Protional Products</h4>
<p>Some Text</p>
</div>
<div class="four columns">
<img src="img/content/promo3.jpg" alt="Promo Image 1" width="320" height="220">
</div>
</div>
</section>
</div>
<!-- End Insert Features Here -->
</div>
end of code
Here is also the Javascript I am calling.
var featuresSlider = $('#features');
featuresSlider.orbit({fluid: '2x1', animationSpeed: 650, animation: 'horizontal-push' });
Is there anything I am doing with the code or is it really a bug with the current script for orbit?
Thanks.

found the answer. I in order for the slider to get the right outerWidth I had to go to the div that initializes the sliders and overide the width that is set by the plugin in the css file. For example:
If features controls my orbit slider, then i need to do this:
#features {
width: <set the width here> !important;
<any other styles here>
}
Thanks