Following is the HTML code for that Landing Page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Landing Page</title>
</head>
<body>
<header class="head">
<a href="#">Home</a>
<a href="#freeBook">Demo Book</a>
<a href="#contact">Contact</a>
<a href="#">Disclaimer</a>
</header>
<section class="product">
<div class="col-wrapper">
<div class="product-col">
<img src="https://images-na.ssl-images-amazon.com/images/I/41WIbflfG2L._SX323_BO1,204,203,200_.jpg" alt="">
</div>
<div class="product-col">
<h1 class="book-heading">The Power of Now</h1>
<br>
<h4>Description:</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi rem officia debitis optio blanditiis odit ratione a ut dolorem quidem delectus quibusdam perspiciatis repudiandae quod eius repellat, ipsa, minima labore est perferendis! Earum fuga temporibus voluptate? Rerum consectetur est eum quis asperiores modi ea. A corrupti tempora ullam eos possimus doloremque optio at vitae officia?</p>
<br>
<h4>Pages:</h4>
<p>250 pages</p>
<br>
<h4>Price:</h4>
<p>10$</p>
<input type="number" name="" id="" value="1">
<input class="cartBtn" type="submit" value="Add to Cart">
</div>
</div>
</section>
<section class="free" id="freeBook">
<div class="col-wrapper1">
<div class="col-free">
<h1 class="free-heading">Want to check DEMO of this Book?</h1>
<p class="free-para">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam quidem ipsam dolorum. Eaque dolorum, exercitationem, unde consectetur minima quasi tempore adipisci mollitia similique neque, odit rem illo voluptatibus esse sed!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat consequatur excepturi, molestiae sit ratione aut sunt quas eveniet, ex natus perferendis a facilis nisi, velit quibusdam, alias placeat beatae unde.</p>
</div>
<div class="col-free">
<input type="text" placeholder="Full Name" name="" id="">
<br>
<input type="email" name="" placeholder="Email" id="">
<br>
<input type="submit" value="Download Now" class="downBtn">
</div>
</div>
</section>
<div id="contact" class="contact-form">
<h1 class="contact-heading">Contact Us</h1>
<form method="POST" class="contact" netlify>
<input type="text" placeholder="Full Name" name="" id="">
<br>
<input type="email" placeholder="Email" name="" id="">
<br>
<br>
<textarea name="" id="" cols="30" rows="10" placeholder="Enter Your Message" class="textarea"></textarea>
<br>
<input type="submit" class="msgBtn" value="Send Message">
</div>
<div class="footer">
<div class="copyright">Copyright © 2012-2020</div>
<div class='credits'>Designed By: <a href="#">Ha Rajpoot</a></div>
</div>
</body>
</html>
Following is CSS code for that Landing Page:
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
/*
==============
HEADER
==============
*/
header{
background-color: rgb(37, 36, 36);
height: 50px;
text-align: center;
}
header a{
color: white;
text-decoration: none;
font-size: 22px;
margin: 28px;
display: inline-block;
margin-top: 5px;
transition: 0.1s linear;
padding: 5px;
}
header a:hover{
border-bottom: 3px solid white;
}
/*
==============
HERO SECTION
==============
*/
.product{
width: 100%;
height: 650px;
background-color: hsl(0, 0%, 95%);
padding-bottom: 100px;
text-align: center;
}
.col-wrapper{
width: 90%;
margin: auto;
padding-top: 50px;
}
.product-col{
width: 50%;
float: left;
padding: 10px 30px 10px 30px;
}
.product-col img{
width: 330px;
max-width: 100%;
margin-left: -80px;
transition: 0.1s ease all;
}
.product-col img:hover{
width: 335px;
height: 515px;
}
.book-heading{
font-size: 35px;
letter-spacing: 2px;
word-spacing: 3px;
text-shadow: 2px 2px 5px;
}
h4{
font-size: 22px;
}
p{
font-size: 18px;
word-spacing: 4px;
letter-spacing: 1px;
}
input, textarea{
margin-top: 50px;
padding: 12px 22px;
font-size: 15px;
}
.cartBtn{
color: rgb(37, 36, 36);
border: 0.5px solid rgb(37, 36, 36);
border-radius: 10px;
cursor: pointer;
margin-left: 20px;
transition: 0.4s linear;
}
.cartBtn:hover{
background-color: rgb(37, 36, 36);
color: white;
}
/*
==================
FREE EBOOK SECTION
==================
*/
.free{
width: 100%;
height: 395px;
background-color: rgb(37, 36, 36);
padding-bottom: 100px;
text-align: center;
color: white;
}
.col-free{
width: 50%;
float: left;
margin-top: 26px;
padding: 26px 30px;
}
.free-heading{
padding: 20px;
font-size: 35px;
letter-spacing: 2px;
}
.free-para{
word-spacing: 4px;
letter-spacing: 1px;
}
.downBtn{
color: rgb(37, 36, 36);
border: 0.5px solid rgb(37, 36, 36);
border-radius: 10px;
cursor: pointer;
margin-left: 20px;
transition: 0.4s linear;
}
.downBtn:hover{
background-color: rgb(37, 36, 36);
color: white;
border: 1px solid white;
}
/*
==============
CONTACT FORM
==============
*/
.textarea{
margin: 50px 0px 0px;
height: 250px;
width: 241px;
}
.contact-form{
background-color: hsl(0, 0%, 95%);
text-align: center;
}
.msgBtn{
margin-bottom: 20px;
border-radius: 10px;
transition: 0.4s linear;
}
.msgBtn:hover{
background-color: rgb(37, 36, 36);
color: white;
}
/*
==============
FOOTER
==============
*/
.credits{
margin: 0;
float: right;
}
.copyright{
float: left;
}
.footer{
padding: 20px;
height: 50px;
font-size: 17px;
color: white;
background-color: rgb(37, 36, 36);
}
.credits a{
text-decoration: none;
color: white;
}
.contact-heading{
font-size: 35px;
letter-spacing: 2px;
word-spacing: 3px;
text-shadow: 2px 2px 5px;
padding: 30px;
}
Comments
Post a Comment