the product section is on the back of navigation tag, it should be below the image content
HTML:
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Coffee_Shop</title>
<link rel="stylesheet" href="coffeeshop.css">
</head>
<body>
<div class="container">
<header class="coffee-header">
<!-- logo and text div -->
<div class="div-logo">
<img src="coffee-logo.png">
<span class="logo-text">Coffee Shop</span>
</div>
<!-- navigation div -->
<div>
<nav class="coffee-nav">
<a href="#"> Home </a>
<a href="#"> Product </a>
<a href="#"> Price </a>
<a href="#"> About </a>
</nav>
</div>
</header>
<!-- site content -->
<div class="site-content">
<div class="image-content">
<h1 class="quote"> "Coffee pee loo frannndsssss" </h1>
</div>
</div>
<!-- cards -->
<div class="card-list">
<h1 id="product"> Products </h1>
<div class="card">
<img src="coffeecards/mocha-image.png" alt="mocha">
<h2>Mocha</h2>
<h3>₹ 250</h3>
<img src="coffeecards/latte-image.png" alt="latte">
<h2>Latte</h2>
<h3>₹ 250</h3>
<img src="coffeecards/cappuccino-image.png" alt="cappuccino">
<h2>Cappuccino</h2>
<h3>₹ 250</h3>
<img src="coffeecards/americano-image.png" alt="americano">
<h2>Americano</h2>
<h3>₹ 250</h3>
</div>
</div>
</div>
</body>
CSS:
body{
margin: 0px;
}
.coffee-header{
position: fixed;
left: 0px;
right: 0px;
height: 100px;
width: 100%;
background-color: #c56529;
}
.div-logo{
height: 100%;
text-align: center;
margin: 10px;
float: left;
}
.logo-text{
display: block;
font-family: Helvetica;
font-weight: bold;
color: white;
}
.coffee-nav{
float: right;
height: 100%;
}
.coffee-nav a{
color: white;
font-size: 15px;
font-weight: 700;
font-family: Helvetica;
padding-right: 20px;
padding-top: 12%;
display: inline-block;
}
.site-content{
position: absolute;
top: 78px;
width: 100%;
}
.image-content{
background-image: url("background-image.png");
height: 700px;
width: 100%;
text-align: center;
}
.quote{
color: aliceblue;
font-family: Helvetica;
position: relative;
top: 10%;
}
.card-list{
width: 100%;
}
#product{
text-align: center;
}