HTML:
<div class="header">
<div class="logo">
<img src="jpg/480px-EA_Sports_monochrome_logo.svg.png" alt="">
</div>
<div class="navbar">
<ul>
<li><a href="#">Tournaments</a></li>
<li><a href="#">Match Centre</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Watch on Fifa</a></li>
<li><a href="#">Play</a></li>
</ul>
</div>
</div>
<div class="body">
<div class="kupa">
<img src="jpg/Fifa-World-Cup-Qatar-2022-4K-Ultra-HD-Mobile-Wallpaper.jpg" alt="">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Dolores debitis quos sint dolor ducimus repudiandae ab impedit,
unde tempora numquam velit,</p>
</div>
</div>
<div class="foot">
<img src="jpg/gm9343.jpg" alt="">
<div class="yazi">
<img src="jpg/r1117117_1296x729_16-9.jpg" alt="">
<p>
Kylian Mbappé Lottin (born 20 December 1998) is a French professional footballer who plays as a forward for Ligue 1 club Paris Saint-Germain and captains the France national team. Regarded as one of the best players in the world, he is known for his dribbling, speed, and finishing.Born in Paris and raised in nearby Bondy, Mbappé began his senior club career in 2015 with Monaco, where he won the Ligue 1 title in the 2016–17 season. In 2017, aged 18, Mbappé signed for Paris Saint-Germain on an eventual permanent transfer worth €180 million, making him the second-most-expensive player and most expensive teenage player of all time.With PSG, he has won five Ligue 1 titles and three Coupes de France, including a domestic quadruple in the 2019–20 season, while also leading the club to its first ever UEFA Champions League final in 2020. He is the club's all-time top goalscorer and ranks third all time in assists. He is the eighth-highest goalscorer in Ligue 1 history.
</p>
</div>
</div>
CSS
.body{
background-image: url(jpg/20563751.jpg);
background-repeat: no-repeat;
background-size: cover;
height: 100%;
width: 100;
}
.logo img{
height: 120px;
width: 150px;
display: inline-block;
position: absolute;
left: 10px;
}
.navbar {
position: fixed;
top: 0;
display: inline-block;
box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
height: 120px;
width: 100%;
text-align: center;
}
.navbar ul li{
display: inline-block;
border: 1px solid #808497;
margin-right: 60px;
margin-top: 25px;
padding: 20px;
box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset, rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset, rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
border-radius:30px ;
background-color: #AFB3C1;
transition: all 500ms;
}
.navbar ul li a{
}
.navbar ul li:hover{
background-color:#808497 ;
border-color: #808497;
box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;
}
.navbar ul li a{
color: white;
}
.kupa{
box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
position: relative;
top: 120px;
left: 10px;
height: 520px;
width: 200px;
border: 1px solid black;
background-color: #547234;
transition: box-shadow 500ms;
}
.kupa:hover{
box-shadow: rgba(0, 0, 0, 0.56) 0px 22px 70px 4px;
}
.kupa img{
display: inline-block;
top: 200px;
height: 400px;
width: 200px;
}
.kupa p{
display: inline-block;
}
.foot img{
width: 100%;
height: 100vh;
background-size: cover;
}
.yazi{
bottom: 500px;
left: 230px;
display: inline-block;
position: relative;
height: 500px;
width: 800px;
box-shadow: rgba(0, 0, 0, 0.2) 0px 60px 40px -7px;
}
.yazi p{
background-color: #9D8D8D;
}
.yazi img{
background-image: url(jpg/r1117117_1296x729_16-9.jpg);
display: inline-block;
position: relative;
left: 150px;
height: 310px;
width: 505px;
}
