<!doctype html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="lib/script.js"></script>
</head>
<body>
<header>
<div class="container">
<div class="header-inner">
<img class="ice" src="https://coffeebros.com/cdn/shop/articles/latte-vs-flat-white-all-differences-explained.jpg?v=1676581028">
<nav>
<p>Товар</p>
<p>Наявність</p>
<p>Ціна</p>
</nav>
<div class="aloha">
<div class="one">
<img src="https://store-images.s-microsoft.com/image/apps.43327.13510798887167234.cadff69d-8229-427b-a7da-21dbaf80bd81.79b8f512-1b22-45d6-9495-881485e3a87e">
</div>
<div class="two">
<img src="https://store-images.s-microsoft.com/image/apps.55245.13537716651231321.3067a421-6c2f-48a9-b77c-1e38e19146e6.10e2aa49-52ca-4e79-9a61-b6422978afb9">
</div>
<div class="three">
<img src="https://store-images.s-microsoft.com/image/apps.8453.13655054093851568.4a371b72-2ce8-4bdb-9d83-be49894d3fa0.7f3687b9-847d-4f86-bb5c-c73259e2b38e?h=210">
</div>
</div>
</div>
</div>
</header>
<div class="intro">
<div class="container">
<div class="intro-inner">
<h1>Muffin</h1>
<div class="mainbutton">
</div>
</div>
</div>
</body>
</html>
// Add your code here
h1, h2, h3, h4, h5, h6, p{
margin: 0 0 0 0;
}
header{
width: 100%;
height: 200px;
background-color: burlywood;
}
.container{
max-width:1200px;
margin: 0 auto;
}
.header-inner{
display: flex;
}
.ice{
height: 200px;
width: 250px;
}
nav{
width: 100%;
justify-content: space-around;
display: flex;
align-items: center;
font-size: 25px;
}
img{
width: 50px;
height: 50px;
}
.aloha{
justify-content: space-between;
}
.one{
margin-top: 10px;
}
.two{
margin-top:10px;
}
.three{
margin-top: 10px;
}
.back{
height: 800px;
width: 100%;
background-color: whitesmoke;
}
.intro{
width: 100%;
height: 800px;
background-image:url(https://brn.pancoffee.ru/wp-content/uploads/2021/05/Coffee_Texture_Grain_557803_3840x2400-scaled.jpg);
background-size: cover;
}
h1{
font-size: 100px;
color:rgb(218, 172, 99);
text-align: center;
padding:350px;
text-shadow:20px 20px 20px black;
}
.mainbutton{
width
}