HTML CODE
_____________________
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>HTML</title>
<!-- HTML -->
<!-- Custom Styles -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="navbar">
<img src="/Img/light-3.png" class="logo">
<nav>
<ul>
<li><a href=""></a>Home</li>
<li><a href=""></a>Contact</li>
<li><a href=""></a>About us</li>
<li><a href=""></a>previous police</li>
</ul>
</nav>
<img src="/Img/images.png" class="cart">
</div>
<div class="content">
<a href="" class="bt">Content 2023</a>
<h1>welcom this<br> page</h1>
<p>this page is created by alfitaah mohamuud hassa</p>
</div>
<img src="/Img/depositphotos_241764168-stock-photo-muslim-girl-praying-reeading-quran.jpg" class="feu">
</div>
</body>
</html>
CSS CODE
_________________
body {
font-size: 15pt;
}
.container{
height:100vh;
width:auto;
background-image:url("/Img/website-background-templates.jpg");
background-repeat:repeat;
background-position:center;
background-size:cover;
padding-left:5%;
padding-right:5%;
position:relative;
box-sizing:border-box;
}
.navbar{
height:15vh;
width:100%;
align-items:center;
display:flex;
margin:auto;
}
.logo{
width:160px;
}
.cart {
width:40px;
}
nav{
flex:1;
padding-left:60px;
}
nav ul li {
display:inline-block;
margin:0px 30px;
list-style:none;
font-size:18px;
}
nav ul li a {
text-decoration:none;
color:green;
}
.content h1{
font-size:60px;
font-weight:200;
margin-top:24px;
margin-bottom:15px;
color:#232d60;
}
.content p{
font-size: 20px;
color:#6a7199;
}
.content{
margin-left:10%;
margin-top: 10%;
}
.content .bt{
display:inline-block;
background-color:linear-gradient(45deg, #87adfe, #ff77cd );
border-radius:6px;
padding:10px 20px;
}
.feu{
height:80%;
position: absolute;
bottom:0px;
right:30px;
border-radius: 6px;
width:auto;
}
