I need some help. I'm doing a project and I am currently stuck in this part. I decided to create a separate header for my file. Both the header and the main page had its css embedded in its tag. I've done this before but I didn't encounter the same problem. The problem is that whenever I tried embedding the header, whether be it using jQuery's load function or using PHP include, for some reason the CSS of the header.html is the one being read. As if like the CSS of the mainpage doesnt even exist. I also tried putting the CSS onto a separate CSS file on both of the files but didn't do anything.
For example, if I load them up using jQuery, if I uncomment the background: orange on the header, that would be what the mainpage would follow.
This is the header.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="header.css">
<style>
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap');
body {
margin: 0;
padding: 0;
/* background: orange; */
}
.header-body {
font-family: 'Roboto', sans-serif;
background: black;
color: white;
padding: .5em 1em;
}
#search-field {
width: 70%;
border-radius: 1em;
font-size: 1.2rem;
text-align: center;
outline: none;
}
#search-button {
outline: none;
border: none;
background: transparent;
color: black;
padding: .2em .6em;
transform: translate(-3em, -.125em);
}
#menu-button-container {
display: flex;
justify-content: end;
align-items: center;
}
#menu-button {
font-size: 2.3rem;
cursor: pointer;
}
.header-body h1 {
font-size: 1.3rem;
padding: .5em 0 0 0;
}
.header-body h1 span {
color: #4DBAE6;
}
.side-bar {
background: #C4C4C4;
position: absolute;
top: 0;
right: 0;
height: 100%;
width: 12em;
z-index: -1;
display: none;
}
ul {
padding: 8em 0 0 0;
list-style: none;
text-indent: 2em;
}
li {
background: #A4A4A4;
margin: .3em 0;
display: flex;
align-items: center;
}
li:hover {
cursor: pointer;
}
li:hover .vert {
background: white;
}
.vert {
padding: 1.3em 0;
height: auto;
width: .3em;
background: #4DBAE6;
}
hr {
width: 80%;
border: 1px solid #4DBAE6;
background: #4DBAE6;
}
.sidebar-buttons {
font-size: 1rem;
display: flex;
align-items: center;
flex-direction: column;
}
.sidebar-buttons button {
width: 5em;
border-radius: 1em;
outline: none;
border: 3px solid #4DBAE6;
margin: .5em;
color: white;
background: #4DBAE6;
}
#sign-up-button {
background: white;
color: black;
border: 3px solid white;
}
@media(min-width: 1024px) {
#menu-button {
display: none;
}
.side-bar {
display: block;
background: none;
width: auto;
display: flex;
z-index: 0;
height: auto;
font-size: 1.3rem;
top: .8em;
padding: .5em 1em 0 0;
}
.header-body h1 {
font-size: 2rem;
}
#search-field {
width: 90%;
margin-top: .5em;
}
form {
position: relative;
}
#search-button {
top: .9em;
right: 0;
position: absolute;
}
ul {
padding: 0;
display: flex;
text-indent: 0;
width: auto;
}
li {
background: none;
color: white;
margin: 0;
margin: 0 .6em;
}
.vert {
display: none;
}
hr {
display: none;
}
.sidebar-buttons {
flex-direction: row;
transform: translateY(-.3em);
margin: 0 0 0 1em;
}
.sidebar-buttons button {
margin: .1em;
border-radius: .5em;
}
}
@media(min-width: 1920px) {
.header-body h1 {
font-size: 2.5rem;
}
#search-button {
right: 0;
font-size: 1.3rem;
}
#search-field {
font-size: 1.8rem;
}
ul {
font-size: 1.8rem;
}
.sidebar-buttons button {
font-size: 1.3rem;
transform: translateY(-.3em);
}
}
</style>
</head>
<body>
<div class="header-body">
<div class="row">
<div class="col-12 col-sm-6 col-md-4">
<form action="#">
<input type="text" name="search-field" id="search-field">
<button type="submit" id="search-button"><i class="fa fa-search"></i></button>
</form>
</div>
<div class="col-8 col-sm-4 order-sm-first col-md">
<h1>FORMAL<span>-ine</span></h1>
</div>
<div class="col-4 col-sm-2 order-sm-last col-md-5" id="menu-button-container">
<span class="material-icons" id="menu-button">
menu
</span>
</div>
</div>
</div>
<div class="side-bar">
<ul>
<li>
<div class="vert"></div>Home</li>
<li>
<div class="vert"></div>About Us</li>
<li>
<div class="vert"></div>FAQs</li>
</ul>
<hr>
<div class="sidebar-buttons">
<button>Log In</button>
<button id="sign-up-button">Sign Up</button>
</div>
</div>
<script>
$(document).ready(function() {
$("#menu-button").click(function() {
$(".side-bar").animate({
width: 'toggle'
}, 350);
});
})
</script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>Here is the main page.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FORMAL-ine</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<style>
body{
background: #171717;
color: white;
}
.carousel-item {
height: 50%;
min-height: 300px;
background: no-repeat scroll center scroll;
-webkit-background-size: cover;
background-size: cover;
}
.container-fluid div{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.row{
margin: 2em 0;
}
.row div{
margin: .5em 0;
overflow: hidden;
}
.container-fluid img{
height: 250px;
width: 350px;
background: black;
}
.shopping-button{
margin: .5em auto;
background: #4DBAE6;
outline: none;
border: 1px solid #4DBAE6;
border-radius: 1em;
display: flex;
padding: .5em 1.5em;
align-items: center;
justify-content: center;
color: white;
}
.shopping-button span{
color: black;
}
.container-fluid p{
text-align: justify;
text-indent: 2em;
}
.container-fluid h4{
margin: .2em 0;
}
@media(min-width: 768px){
.container-fluid div{
display: flex;
flex-direction: row;
}
.container-fluid .content{
display: block;
text-align: center;
}
}
@media(min-width: 1024px){
body{
padding: .5em 5em;
}
.container-fluid{
margin: 3em 0;
}
.container-fluid img{
height: 350px;
width: 400px;
}
#mainpage-carousel{
width: 80vw;
margin: 2em auto;
}
.content{
width: 75%;
}
.row{
margin: -1em 1em;
}
}
@media(min-width: 1920px){
.container-fluid{
padding: 4em 11em;
margin: 0 0 6em 0;
}
.container-fluid img{
height: 650px;
width: 800px;
}
.content h4{
font-size: 2rem;
}
.content p{
font-size: 1.5rem;
}
.row{
margin: -1em 0;
}
.shopping-button{
padding: 1em 3em;
font-size: 1.3rem;
font-weight: 500;
}
}
</style>
</head>
<body>
<script>
$(function(){
$("#header").load("includes/header.html");
});
</script>
<div id="mainpage-carousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="images/main page images/sample.jpg" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="images/main page images/sample.jpg" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="images/main page images/sample.jpg" alt="Third slide">
</div>
</div>
</div>
<button class="shopping-button">
<span class="material-icons">
local_offer
</span>
Shop Now
</button>
<div class="container-fluid">
<div class="row">
<div class="col-12 order-1 col-md-6">
<img src="#" alt="">
</div>
<div class="col-12 order-2 col-md-6">
<div class="content">
<h4>Luxury</h4>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Laborum, labore minus. Natus debitis voluptatibus laborum, non vero dolorum blanditiis sit aliquam soluta excepturi, explicabo hic minus vitae, quidem possimus laboriosam!</p>
</div>
</div>
</div>
<div class="row">
<div class="col-12 order-2 col-md-6 order-md-1">
<div class="content">
<h4>Delicacy</h4>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Laborum, labore minus. Natus debitis voluptatibus laborum, non vero dolorum blanditiis sit aliquam soluta excepturi, explicabo hic minus vitae, quidem possimus laboriosam!</p>
</div>
</div>
<div class="col-12 order-1 col-md-6 order-md-2">
<img src="#" alt="">
</div>
</div>
<div class="row">
<div class="col-12 order-1 col-md-6">
<img src="#" alt="">
</div>
<div class="col-12 order-2 col-md-6">
<div class="content">
<h4>Simplicity</h4>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Laborum, labore minus. Natus debitis voluptatibus laborum, non vero dolorum blanditiis sit aliquam soluta excepturi, explicabo hic minus vitae, quidem possimus laboriosam!</p>
</div>
</div>
</div>
<div class="row">
<div class="col-12 order-2 col-md-6 order-md-1">
<div class="content">
<h4>Pure</h4>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Laborum, labore minus. Natus debitis voluptatibus laborum, non vero dolorum blanditiis sit aliquam soluta excepturi, explicabo hic minus vitae, quidem possimus laboriosam!</p>
</div>
</div>
<div class="col-12 order-1 col-md-6 order-md-2">
<img src="#" alt="">
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>Any help is greatly appreciated, I've done this before but never encountered this problem.
header.html
Main Page