Taking contents from separate HTML templates and using them on another
Question
Looking for some tips. I have two HTML templates that I am using. The first is my standard one used across the board, the second has a portfolio page with elements in which I am wanting to use in my standard template. I want to keep the header and footer the same, but have content from the second template. How can this be achievable?
I have taken the root folder from the second template, and made a copy, and pasted it within the root folder of my standard template. I copied the html to link to the stylesheets from the second template, and pasted it in to the standard template, but the content still isn't showing. Here's what I have:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!-- Page Title -->
<title>Not Found - Alioth</title>
<!--/ Page Title -->
<meta name="author" content="Pe Themes">
<meta name="description" content="Creative Portfolio & Agency Template">
<meta name="keywords" content="portfolio, agency, personal, creative">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<!-- Portfolio Template Stylesheets (what you can see is I linked them within the template folder I pasted in to the main root folder) -->
<link href="Portfolio/css/reset.css" rel="stylesheet" >
<link href="Portfolio/includes/fontawesome/icons.css" rel="stylesheet" >
<link href="Portfolio/js/locomotive-scroll/locomotive-scroll.css" rel="stylesheet" >
<link href="Portfolio/js/magnific-popup/magnific-popup.css" rel="stylesheet" >
<link href="Portfolio/js/flexslider/flexslider.css" rel="stylesheet" >
<link href="Portfolio/js/swiper/swiper.css" rel="stylesheet" >
<link href="Portfolio/js/plyr/plyr.css" rel="stylesheet" >
<link href="Portfolio/css/styles.css" rel="stylesheet" >
<!-- End Stylesheets -->
<!-- Standard Template Stylesheets --!>
<link href="css/plugins.css" rel="stylesheet">
<link href="style.css" rel="stylesheet">
<!-- Favicons -->
<link rel="shortcut icon" href="img/favicon.png" />
<link rel="apple-touch-icon" href="img/favicon.png" />
<!--/ Favicons -->
So far, nothing has been thrown off. But my content simply isn't showing. Any tips??
Here is the code I'm trying to migrate over to the standard template.
<!-- Begin Main -->
<div class="portfolio pixi" data-displacement-image="portfolio/images/nm-04.jpg">
<div class="projects-container">
<div class="wrapper">
<article data-year="2021">
<a href="project-sample-1.html">Audi RS7</a>
<div class="image-text">
<a href="project-sample-1.html">Audi RS7</a>
</div>
<div class="images">
<img src="images/project-1-6.jpg" alt="">
<img src="images/project-1-3.jpg" alt="">
<img src="images/project-1-4.jpg" alt="">
</div>
<div class="mobile">
<a href="project-sample-1.html">
<span>Audi RS7</span>
<img src="images/project-1-3.jpg" alt="">
</a>
</div>
</article>
<article data-year="2021">
<a href="project-sample-4.html">Zero Motors</a>
<div class="image-text">
<a href="project-sample-4.html">Zero Motors</a>
</div>
<div class="images">
<img src="images/project-4-2.jpg" alt="">
<img src="images/project-4-3.jpg" alt="">
<img src="images/project-4-1.jpg" alt="">
<img src="images/project-4-4.jpg" alt="">
</div>
<div class="mobile">
<a href="project-sample-4.html">
<span>Zero Motors</span>
<img src="images/project-4-1.jpg" alt="">
</a>
</div>
</article>
<article data-year="2021">
<a href="project-sample-2.html">Swiss Alps</a>
<div class="image-text">
<a href="project-sample-2.html">Swiss Alps</a>
</div>
<div class="images">
<img src="images/project-3-2.jpg" alt="">
<img src="images/project-3-4.jpg" alt="">
<img src="images/project-3-1.jpg" alt="">
<img src="images/project-3-5.jpg" alt="">
<img src="images/project-3-6.jpg" alt="">
</div>
<div class="mobile">
<a href="project-sample-2.html">
<span>Swiss Alps</span>
<img src="images/project-3-1.jpg" alt="">
</a>
</div>
</article>
<article data-year="2020">
<a href="project-sample-5.html">Wildlings</a>
<div class="image-text">
<a href="project-sample-5.html">Wildlings</a>
</div>
<div class="images">
<img src="images/project-5-3.jpg" alt="">
<img src="images/project-5-1.jpg" alt="">
<img src="images/project-5-4.jpg" alt="">
<img src="images/project-5-5.jpg" alt="">
<img src="images/project-5-6.jpg" alt="">
</div>
<div class="mobile">
<a href="project-sample-5.html">
<span>Wildlings</span>
<img src="images/project-5-1.jpg" alt="">
</a>
</div>
</article>
<article data-year="2020">
<a href="project-sample-6.html">Dubai</a>
<div class="image-text">
<a href="project-sample-6.html">Dubai</a>
</div>
<div class="images">
<img src="images/project-6-1.jpg" alt="">
<img src="images/project-6-3.jpg" alt="">
<img src="images/project-6-5.jpg" alt="">
<img src="images/project-6-6.jpg" alt="">
</div>
<div class="mobile">
<a href="project-sample-6.html">
<span>Dubai</span>
<img src="images/project-6-1.jpg" alt="">
</a>
</div>
</article>
<article data-year="2021">
<a href="project-sample-3.html">Audi A3</a>
<div class="image-text">
<a href="project-sample-3.html">Audi A3</a>
</div>
<div class="images">
<img src="images/project-2-1.jpg" alt="">
<img src="images/project-2-2.jpg" alt="">
<img src="images/project-2-7.jpg" alt="">
</div>
<div class="mobile">
<a href="project-sample-3.html">
<span>Audi A3</span>
<img src="images/project-2-1.jpg" alt="">
</a>
</div>
</article>
<article data-year="2020">
<a href="project-sample-3.html">New York</a>
<div class="image-text">
<a href="project-sample-3.html">New York</a>
</div>
<div class="images">
<img src="images/project-6-13.jpg" alt="">
<img src="images/strips-9.jpg" alt="">
<img src="images/full-10.jpg" alt="">
</div>
<div class="mobile">
<a href="project-sample-3.html">
<span>New York</span>
<img src="images/full-10.jpg" alt="">
</a>
</div>
</article>
<article data-year="2019">
<a href="project-sample-6.html">Last Summer</a>
<div class="image-text">
<a href="project-sample-6.html">Last Summer</a>
</div>
<div class="images">
<img src="images/full-11.jpg" alt="">
<img src="images/grid-3.jpg" alt="">
<img src="images/full-3.jpg" alt="">
</div>
<div class="mobile">
<a href="project-sample-6.html">
<span>Last Summer</span>
<img src="images/full-11.jpg" alt="">
</a>
</div>
</article>
<article data-year="2021">
<a href="project-sample-1.html">Iceland</a>
<div class="image-text">
<a href="project-sample-1.html">Iceland</a>
</div>
<div class="images">
<img src="images/full-8.jpg" alt="">
<img src="images/full-6.jpg" alt="">
<img src="images/grid-11.jpg" alt="">
</div>
<div class="mobile">
<a href="project-sample-1.html">
<span>Iceland</span>
<img src="images/full-8.jpg" alt="">
</a>
</div>
</article>
</div>
</div>
</div>
<!-- End Main -->
1 answers
solution1
0 2022-01-11 22:18:43
I am not sure I understand your question, but I think a better option is to copy the required code from the second template and treat it like new in the fresh template, that way, you can apply your CSS stylings, without referring to the previous template.
it should be a standalone template without referring to the first
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Importing contents from 1 html to another html file
Taking Values from HTML and returning another
How to separate one DIV from another in HTML?
HTML : Separate Sidebar and contents page
Compiling Angular components separate and using them together in an HTML page
Remove comments from HTML templates using Maven
Django templates. I get in my mail parameters, how can I send them to another html with include?
How to change the content of a div on one html page with the contents of a div from another page using javascript?
Replacing contents of html page using another html page
Change contents of one HTML page from another HTML page
Related Tags