Load another HTML file to index.html using JavaScript without adding it to index.html and make index neater 🚀
See for example below is the we have to add in index.html
<section id="portfolio">
<div class="row section-intro">
<div class="col-twelve">
<h5>Portfolio</h5>
<h1>Check Out Some of My Works.</h1>
<p class="lead">Lorem ipsum Do commodo in proident enim in dolor cupidatat adipisicing dolore officia nisi aliqua incididunt Ut veniam lorem ipsum Consectetur ut in in eu do.</p>
</div>
</div> <!-- /section-intro-->
<div class="row portfolio-content">
<div class="col-twelve">
<!-- portfolio-wrapper -->
<div id="folio-wrapper" class="block-1-2 block-mob-full stack">
<div class="bgrid folio-item">
<div class="item-wrap">
<img src="images/portfolio/liberty.jpg" alt="Liberty">
<a href="#modal-01" class="overlay">
<div class="folio-item-table">
<div class="folio-item-cell">
<h3 class="folio-title">Liberty</h3>
<span class="folio-types">
Graphic Design
</span>
</div>
</div>
</a>
</div>
</div> <!-- /folio-item -->
<div class="bgrid folio-item">
<div class="item-wrap">
<img src="images/portfolio/shutterbug.jpg" alt="Shutterbug">
<a href="#modal-02" class="overlay">
<div class="folio-item-table">
<div class="folio-item-cell">
<h3 class="folio-title">Shutterbug</h3>
<span class="folio-types">
Web Design
</span>
</div>
</div>
</a>
</div>
</div> <!-- /folio-item -->
<div class="bgrid folio-item">
<div class="item-wrap">
<img src="images/portfolio/clouds.jpg"alt="Clouds">
<a href="#modal-03" class="overlay">
<div class="folio-item-table">
<div class="folio-item-cell">
<h3 class="folio-title">Clouds</h3>
<span class="folio-types">
Web Design
</span>
</div>
</div>
</a>
</div>
</div> <!-- /folio-item -->
<div class="bgrid folio-item">
<div class="item-wrap">
<img src="images/portfolio/beetle.jpg" alt="Beetle">
<a href="#modal-04" class="overlay">
<div class="folio-item-table">
<div class="folio-item-cell">
<h3 class="folio-title">Beetle</h3>
<span class="folio-types">
Branding
</span>
</div>
</div>
</a>
</div>
</div> <!-- /folio-item -->
<div class="bgrid folio-item">
<div class="item-wrap">
<img src="images/portfolio/lighthouse.jpg" alt="Lighthouse">
<a href="#modal-05" class="overlay">
<div class="folio-item-table">
<div class="folio-item-cell">
<h3 class="folio-title">Lighthouse</h3>
<span class="folio-types">
Web Development
</span>
</div>
</div>
</a>
</div>
</div> <!-- /folio-item -->
<div class="bgrid folio-item">
<div class="item-wrap">
<img src="images/portfolio/salad.jpg" alt="Salad">
<a href="#modal-06" class="overlay">
<div class="folio-item-table">
<div class="folio-item-cell">
<h3 class="folio-title">Salad</h3>
<span class="folio-types">
Branding
</span>
</div>
</div>
</a>
</div>
</div> <!-- /folio-item -->
<!-- modal popups - begin
============================================================= -->
<div id="modal-01" class="popup-modal slider mfp-hide">
<div class="media">
<img src="images/portfolio/modals/m-liberty.jpg" alt="" />
</div>
<div class="description-box">
<h4>Liberty</h4>
<p>Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit.</p>
<div class="categories">Web Development</div>
</div>
<div class="link-box">
<a href="http://www.behance.net">Details</a>
<a href="#" class="popup-modal-dismiss">Close</a>
</div>
</div> <!-- /modal-01 -->
<div id="modal-02" class="popup-modal slider mfp-hide">
<div class="media">
<img src="images/portfolio/modals/m-shutterbug.jpg" alt="" />
</div>
<div class="description-box">
<h4>Shutterbug</h4>
<p>Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit.</p>
<div class="categories">Web Design</div>
</div>
<div class="link-box">
<a href="http://www.behance.net">Details</a>
<a href="#" class="popup-modal-dismiss">Close</a>
</div>
</div> <!-- /modal-02 -->
<div id="modal-03" class="popup-modal slider mfp-hide">
<div class="media">
<img src="images/portfolio/modals/m-clouds.jpg" alt="" />
</div>
<div class="description-box">
<h4>Clouds</h4>
<p>Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit.</p>
<div class="categories">Web Design</div>
</div>
<div class="link-box">
<a href="http://www.behance.net">Details</a>
<a href="#" class="popup-modal-dismiss">Close</a>
</div>
</div> <!-- /modal-03 -->
<div id="modal-04" class="popup-modal slider mfp-hide">
<div class="media">
<img src="images/portfolio/modals/m-beetle.jpg" alt="" />
</div>
<div class="description-box">
<h4>Beetle</h4>
<p>Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit.</p>
<div class="categories">Branding</div>
</div>
<div class="link-box">
<a href="http://www.behance.net">Details</a>
<a href="#" class="popup-modal-dismiss">Close</a>
</div>
</div> <!-- /modal-04 -->
<div id="modal-05" class="popup-modal slider mfp-hide">
<div class="media">
<img src="images/portfolio/modals/m-lighthouse.jpg" alt="" />
</div>
<div class="description-box">
<h4>Lighthouse</h4>
<p>Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit.</p>
<div class="categories">Web Development</div>
</div>
<div class="link-box">
<a href="http://www.behance.net">Details</a>
<a href="#" class="popup-modal-dismiss">Close</a>
</div>
</div> <!-- /modal-05 -->
<div id="modal-06" class="popup-modal slider mfp-hide">
<div class="media">
<img src="images/portfolio/modals/m-salad.jpg" alt="" />
</div>
<div class="description-box">
<h4>Salad</h4>
<p>Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit.</p>
<div class="categories">Branding</div>
</div>
<div class="link-box">
<a href="http://www.behance.net">Details</a>
<a href="#" class="popup-modal-dismiss">Close</a>
</div>
</div> <!-- /modal-06 -->
<!-- modal popups - end
============================================================= -->
</div> <!-- /portfolio-wrapper -->
</div> <!-- /twelve -->
</div> <!-- /portfolio-content -->
</section>
This will make your index.html longer and bulky (You may be get confused with codes) instead you can make a separate file portfolio.html and load the content on index.html using JavaScript.
So, you can keep and edit your files separately without getting confused. 🤔
So Below is the example code
<!-- Portfolio Section
================================================== -->
<section id="portfolio"></section>
<script>
fetch('portfolio.html')
.then(response => response.text())
.then(data => document.getElementById('portfolio').innerHTML = data);
</script>
<!-- /portfolio -->
Load all data in the section tag same as previous one, but it's make your codes(index.html here) separate and neater than previous.
Top comments (0)