I hope you all feel well.
So I have written my HTML code but I forgot to add <!DOCTYPE html> at the beginning of the document and my code was working so fine, but when I went back to add it (the <!DOCTYPE html> ) the header background color disappeared and I don't know why and I tried to get it back but it still dispeared, does anyone know tell what is th problem please?
.HeaderContainer {
background-position: center;
position: fixed;
text-align: right;
width: 100%;
height: 150px;
padding: 20px;
}
.background {
background: url(annie-spratt-qyAka7W5uMY-unsplash.jpg);
height: 100vh;
background-size: cover;
bacground-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
position: relative;
filter: brightness(70%);
min-width: 100%;
max-width: 100%;
/* background-size: 1920px 2400px;*/
}
.list {
list-style: none;
margin-top: 30px;
position: absolute;
color: white;
top: 0px;
left: 50%;
}
.list .link {
color: white;
text-decoration: none;
padding: 20px 20px;
font-size: 30px;
text-align: center;
}
.list .link:hover {
background-color: white;
border-radius: 7px;
color: black;
font-weight: bold;
}
.dropDownList {
float: right;
paddin: 20px;
margin: 0;
}
.dropDownListButton {
color: white;
text-decoration: none;
padding: 12px 12px;
font-size: 30px;
text-align: right;
display: inline;
}
.dropDownList:hover .dropDownListButton {
background-color: white;
border-radius: 7px;
color: black;
}
.dropDownListContent {
display: none;
position: relative;
background-color: #F8C471;
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
}
.dropDownListContent .links {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropDownList:hover .dropDownListContent {
display: block;
}
.links:hover {
text-decoration: underline;
font-weight: bold;
} <header>
<div class = "headerContainer" id = "myHeader">
<div class ="list" id = "myList"> <!-- To list the top-bar links -->
<a class = "link" href = "#" id = "home">Home</a>
<div class = "dropDownList">
<div class = "dropDownListButton"> Menu1 <i class="fa fa-caret-down"></i> </div>
<div class = "dropDownListContent">
<a href = "#" class = "links"> item1</a>
<a href = "#" class = "links"> item2 </a>
<a href = "#" class = "links"> item3 </a>
</div>
</div>
<div class = "dropDownList">
<div class = "dropDownListButton"> Menu2 <i class="fa fa-caret-down"></i> </div>
<div class = "dropDownListContent">
<a href = "#" class = "links"> Item1 </a>
</div>
</div>
<div class = "dropDownList">
<div class = "dropDownListButton"> Menu3 <i class="fa fa-caret-down"></i> </div>
<div class = "dropDownListContent">
<a href = "#" class = "links"> item1 </a>
</div>
</div>
</div>
<a href =
</div>
Aucun commentaire:
Enregistrer un commentaire