I am new to the world of HTML and CSS!
My goal is as follows:
https://i.stack.imgur.com/hmLNS.png
This is my progress so far:
https://i.stack.imgur.com/rav8P.png
I am also looking to have the header fill the entire browser window and remain fixed, with a sticky navigation bar below. However, I have encountered an issue where the navigation bar refuses to settle under the header. Here is the code snippet I have been working on after watching some tutorials:
/* Styles for the page */
* {
margin: 0px;
box-sizing: border-box;
}
/* Font styling */
* {
font-family: 'Candara', sans-serif;
letter-spacing: 1px;
}
body {
height: 100%;
background-image: linear-gradient(to bottom right, #98c9cd 3%, #e6c3c1 60%, #e4989e 100%);
margin: 0;
}
.topheader {
width: 100%;
height: 35px;
font-size: 15px;
text-transform: uppercase;
text-align: center;
padding: 20px;
}
.container{
width: 80%;
margin: 0 auto;
clear: both;
}
header {
background:rgba(255,255,255,0);
position:fixed;
left:0;
top:0;
transition:background 0.5s ease;
}
.logo {
float: left;
padding: 10px 0;
}
nav {
float: right;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
You can find the full code below:
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<title>IA2</title>
<header>
<p id="topheader" style="background-color: #AEBC77;">For announcement posts</h1>
</header>
<body>
<div class="container">
<img src="finallogo.png" alt="logo" class="logo" width="8%" height="16%">
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Shop</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact us</a></li>
</ul>
</nav>
</header>
</div>
</body>
</html>