<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!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.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="Style css Create Website Layout/style.css">
<title>Create Website Layout</title>
</head>
<body>
<header>
<a href="https://www.fiverr.com/share/4r7Bwx">
<nav id="menu">
<ul>
<li><a href="https://www.fiverr.com/share/4r7Bwx">Home</a></li>
<li><a href="https://www.fiverr.com/share/4r7Bwx">About Us</a></li>
<li><a href="https://www.fiverr.com/share/4r7Bwx">Contact Us</a></li>
</ul>
</nav>
<div id="logo">
<a href="https://www.fiverr.com/share/4r7Bwx">QUICK DEBUG</a>
</div>
<nav id="social-links"> <ul>
<li><a href="https://www.fiverr.com/share/4r7Bwx" class="fa fa-facebook"></a></li>
<li><a href="https://www.fiverr.com/share/4r7Bwx" class="fa fa-twitter"></a></li>
<li><a href="https://www.fiverr.com/share/4r7Bwx" class="fa fa-youtube"></a></li>
</ul></nav></a>
</header>
<a href="https://www.fiverr.com/share/4r7Bwx">
<div id="main">
<aside class="">
<ul>
<li><a href="https://www.fiverr.com/share/4r7Bwx">Some Links</a></li>
<li><a href="https://www.fiverr.com/share/4r7Bwx">Some Links</a></li>
<li><a href="https://www.fiverr.com/share/4r7Bwx">Some Links</a></li>
<li><a href="https://www.fiverr.com/share/4r7Bwx">Some Links</a></li>
<li><a href="https://www.fiverr.com/share/4r7Bwx">Some Links</a></li>
</ul>
<img src="image/53.jpg" alt="">
</aside>
<a href="https://www.fiverr.com/share/4r7Bwx"><article>
<h2>Welocome to my Website</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ea expedita dolores dignissimos earum distinctio inventore optio, fugit mollitia consectetur maxime nihil debitis deserunt quae doloribus, esse, numquam consequuntur velit quidem delectus natus! Similique obcaecati doloribus hic sint dolores cupiditate, asperiores nihil dolorem tempora amet neque velit, quia dolore assumenda perspiciatis.</p>
<h2>Our Service</h2>
<div class="services-container">
<div class="service-box">
<div class="service-img">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSNKeQyOMN28w-hhsEH7JK119_VawTrTp_Cj3LVS8QsckIY4nmbCzjdP_YMr3AEu6tOqkw&usqp=CAU" alt="">
</div>
<div class="service-title">
<h2>Web Desginer</h2>
</div>
<div class="service-desc">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Animi, quas quia? Eveniet quis rem necessitatibus cumque animi quae! Eveniet nemo non doloremque labore.
</div>
<div class="call-to-action">
<a href="https://www.fiverr.com/share/4r7Bwx">Read More</a>
</div>
</div>
<div class="service-box">
<div class="service-img">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Image_created_with_a_mobile_phone.png/1200px-Image_created_with_a_mobile_phone.png" alt="">
</div>
<div class="service-title">
<h2>IT-Service</h2>
</div>
<div class="service-desc">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Animi, quas quia? Eveniet quis rem necessitatibus cumque animi quae! Eveniet nemo non doloremque labore.
</div>
<div class="call-to-action">
<a href="https://www.fiverr.com/share/4r7Bwx">Read More</a>
</div>
</div>
<div class="service-box">
<div class="service-img">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTgX1VbJ4qMsV_yYtFL3VRcgn1kKsFLgtI6VLnxS116I_FYLc6oqmUtEUNZFmyFlgbc4ZI&usqp=CAU" alt="">
</div>
<div class="service-title">
<h2>Web Devvolpment</h2>
</div>
<div class="service-desc">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Animi, quas quia? Eveniet quis rem necessitatibus cumque animi quae! Eveniet nemo non doloremque labore.
</div>
<div class="call-to-action">
<a href="https://www.fiverr.com/share/4r7Bwx">Read More</a>
</div>
</div>
</a>
</article>
</div></a>
<footer>
made by mohsin
</footer>
</body>
</html>
*{
box-sizing: border-box;
}
body{
font-family: Arial, Helvetica, sans-serif;
display: flex;
flex-direction: column;
margin: 0;
}
a{
text-decoration: none;
}
header{
background: rgb(14, 13, 13);
display: flex;
align-items: center;
padding: 0;
}
header ul{
list-style: none;
display: flex;
padding: 0;
margin: 0;
}
header a{
color: white;
}
#logo{
margin: 0 auto;
font-size: 30px;
}
#menu li{
padding:25px;
}
#social-links li{
padding: 10px;
}
#main{
display: flex;
}
article{
padding: 20px;
}
aside{
flex: 0 0 30vh;
background: rgb(59, 61, 61);
text-decoration: none;
}
aside ul{
list-style: none;
padding: 0;
}
aside ul a{
padding: 10px;
color: white;
display: block;
box-shadow: 3px 3px 5px rgb(179, 72, 72);
}
aside img{
width: 100%;
}
.call-to-action{
align-self: flex-start;
margin: auto;
}
.call-to-action a{
background: rgb(59, 61, 61);
color: white;
padding: 3px 7px;
}
.services-container{
display: flex;
justify-content: space-between;
}
.service-box{
box-shadow: 3px 3px 5px rgb(179, 72, 72);
flex-basis: 32%;
max-width: 370px;
padding: 10px;
}
.service-box img{
width: 100%;
}
footer{
background: yellow;
text-align: center;
}
