<!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/animate.css/3.7.2/animate.min.css">
<link rel="stylesheet" href="style.css">
<title>My Website</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Humnst777 BlkCn BT' 'Courier New', Courier, monospace;
}
header{
background: linear-gradient(to right, rgba(52, 229, 250,0.7), rgba(240, 250, 52,0.7)), url('4\ girls\ dancing.jpg') no-repeat center;
background-size: cover;
background-attachment: fixed;
height: 60vh;
}
/*top navigation*/
.top-nav{
display: flex;
justify-content: space-between;
}
.logo p{
letter-spacing: 5px;
color: white;
font-weight: bold;
margin: 5px 0 0 50px;
font-size: 30px;
}
.top-links{
margin: 5px 50px 0 0;
}
.top-links a{
text-decoration: none;
color: white;
padding-right: 20px;
font-size: 13px;
letter-spacing: 3px;
}
#active{
color:rgb(52, 229, 250);
}
/*header information*/
.header-info{
text-align: center;
color: white;
margin-top: 100px;
}
.header-info h1{
font-size: 60px;
text-shadow: 1px 1px 1px black;
margin: 10px 0 30px 0;
font-family: 'Love Letters';
}
.header-info a{
text-decoration: none;
text-transform: uppercase;
background-color: rgb(52, 229, 250);
color: white;
border-radius: 50px;
padding: 15px;
transition: 0.9s;
}
.header-info a:hover{
background-color: rgb(240, 250, 52);
color: black;
box-shadow: 1px 1px 1px black;
}
.border-bottom:after{
content: "";
border-bottom: 1px solid rgb(52, 229, 250);
display: block;
margin: 0 auto;
padding-top: 8px;
width: 5%;
}
/*main section*/
main{
display: flex;
justify-content: space-between;
margin-top: 20px;
}
.main-info{
margin-left: 50px;
width: 50%;
}
.main-info h2{
color: rgb(240, 250, 52);
}
.main-info p{
text-align: justify;
margin: 10px 0 20px 5px;
}
.main-info a{
background-color:rgb(52, 229, 250);
text-decoration: none;
color: white;
border-radius: 30px;
padding: 10px;
transition: 0.7s;
}
.main-info a:hover{
background-color: rgb(240, 250, 52);
color: black;
box-shadow: 1px 1px 1px black;
}
.main-img img{
width: 500px;
height: 250px;
margin-right: 50px;
}
/*footer section*/
footer{
width: 100%;
height: 200px;
margin: 60px 0 0 0;
padding: 20px 0;
background-color: #f8fafa;
}
.footer-info{
float: left;
margin-left: 50px;
}
.footer-info p{
color: gray;
}
.footer-info a{
text-decoration: none;
color: black;
}
.footer-info a:hover{
color: gray;
text-decoration: underline;
}
.footer-links{
float: right;
display: flex;
margin-right: 50px;
}
.footer-links ul{
list-style: none;
margin: 30px 30px 0 0;
}
.footer-links li{
margin: 10px 0;
}
.footer-links li a{
text-decoration: none;
color: gray;
}
.footer-links li a:hover{
color: black;
text-decoration: underline;
}
.footer-links li h1{
color: rgb(240, 250, 52);
}
</style>
</head>
<body>
<header>
<div class="top-nav">
<div class="logo">
<p>LOGO</p>
</div>
<nav class="top-links">
<a href="#" id="active">Home</a>
<a href="#">Portfolio</a>
<a href="#">Services</a>
<a href="#">Blog</a>
<a href="#">Contact</a>
</nav>
</div>
<div class="header-info">
<p>dress how you like to be addressed
<div class="border-bottom"></div>
</p>
<h1>Style Is Everything</h1>
<a href="#">SHOP NOW</a>
</div>
</header>
<!--main section-->
<main>
<div class="main-info">
<h2>Know Our Top <strong>Brands</strong><br> around the world!</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere architecto cum nemo expedita obcaecati explicabo, vel illo optio alias excepturi labore dolorum omnis in quaerat ipsum quasi, beatae impedit, nihil quae? Ducimus ipsa doloribus porro aperiam minima et ipsum qui deleniti assumenda, quam voluptates facere animi repudiandae culpa suscipit odio maiores voluptatem! Omnis explicabo possimus accusamus deleniti. Culpa illo, consequatur quidem totam placeat dicta commodi itaque adipisci eos quis! Rerum. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo laborum eos minima eaque eum accusantium corrupti corporis est officiis veniam! Ipsa nesciunt sed incidunt cum laborum animi aliquid rerum reiciendis? </p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex quibusdam odit minima quo inventore, aperiam, facere, soluta labore recusandae eum eius eos amet maiores libero distinctio illum nostrum repellat. Explicabo, labore debitis? Expedita nulla porro suscipit officia ex delectus modi architecto voluptate maiores voluptas optio, ad, aperiam ratione perspiciatis obcaecati.</p>
<a href="#">Read More</a>
</div>
<div class="main-img">
<img src="sneaker png.png" alt="this is an image">
</div>
</main>
<!--footer section-->
<footer>
<div class="footer-info">
<p>© 2021. All rights reserved <br>
<a href="#">Privacy Policay</a>| <a href="#">Terms and Conditions</a></p>
</div>
<nav class="footer-links">
<ul class="first-link">
<li><h1>Company</h1></li>
<li><a href="#">India</a></li>
<li><a href="#">Austilia</a></li>
<li><a href="#">Canada</a></li>
<li><a href="#">England</a></li>
</ul>
<ul class="second-link">
<li><h1>Products</h1></li>
<li><a href="#">Tommy Hilfigure</a></li>
<li><a href="#">Levi's</a></li>
<li><a href="#">Adidas</a></li>
<li><a href="#">Ralf Lauren</a></li>
</ul>
<ul class="third-link">
<li><h1>Branches</h1></li>
<li><a href="#">First Aid</a></li>
<li><a href="#">Education</a></li>
<li><a href="#">Livelyhood Support</a></li>
<li><a href="#">Health</a></li>
</ul>
</nav>
</footer>
</body>
</html>
Comments
Post a Comment