Hey guys how are you all Today in this post I am going to give you the source code of my Landing Page website which I created on my YouTube channel Code And Man.
Here is the link to the playlist : Landing Page
and Here is the source code of that :
Index.html:
<!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">
<title>Landing Page - Code And Man</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<nav>
<div class="left">
<h2 class="logo">CodeAndMan Coding Classes</h2>
<p>Learn to code for free!</p>
</div>
<div class="right">
<a href="#">Home</a>
<a href="#services">Services</a>
<a href="#pricing">Pricing</a>
<a href="#onevone">1 v 1 classes</a>
</div>
</nav>
<div class="headersection"><h1>CodeAndMan Coding Classes</h1>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Facere, iste. ipsum dolor sit amet, consectetur adipisicing elit. Unde minima, nemo explicabo odio quas blanditiis! Totam illum voluptates eligendi</p>
<div class="buttons">
<button>Book Your Trial</button>
<button>View Pricing</button>
</div>
</div>
</header>
<h1 class="heading">Our Services</h1>
<section id="services" class="services">
<div class="card" id="card">
<img src="https://images.pexels.com/photos/1708912/pexels-photo-1708912.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" alt="classroom">
<h1>Interactive Classrooms</h1>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Facere, iste. ipsum dolor, sit amet consectetur adipisicing elit. Veniam, fugit.</p>
</div>
<div class="card" id="card">
<img src="https://images.pexels.com/photos/7447192/pexels-photo-7447192.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" alt="classroom">
<h1>1 on 1 teaching</h1>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Facere, iste. ipsum dolor, sit amet consectetur adipisicing elit. Veniam, fugit.</p>
</div>
<div class="card" id="card">
<img src="https://images.pexels.com/photos/5905893/pexels-photo-5905893.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" alt="classroom">
<h1>Smart Classrooms</h1>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Facere, iste. ipsum dolor, sit amet consectetur adipisicing elit. Veniam, fugit.</p>
</div>
</section>
<h1 class="heading">Our Pricing</h1>
<section id="pricing" class="pricing">
<div class="pricing_card">
<h3>Basic</h3>
<h1>10$</h1>
<p id="p1">per month</p>
<div class="shape"></div>
<!-- ----------------------------------- -->
<p class="para2">Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic facere in repellat doloribus nobis odio blanditiis quidem? Voluptatem, fuga aut</p>
<button>Select plan</button>
</div>
<div class="pricing_card">
<h3>Premium</h3>
<h1>50$</h1>
<p id="p1">per month</p>
<div class="shape"></div>
<!-- ----------------------------------- -->
<p class="para2">Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic facere in repellat doloribus nobis odio blanditiis quidem? Voluptatem, fuga aut</p>
<button>Select plan</button>
</div>
<div class="pricing_card">
<h3>Business</h3>
<h1>150$</h1>
<p id="p1">per month</p>
<div class="shape"></div>
<!-- ----------------------------------- -->
<p class="para2">Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic facere in repellat doloribus nobis odio blanditiis quidem? Voluptatem, fuga aut</p>
<button>Select plan</button>
</div>
</section>
<h1 class="heading">
1 v 1 classes form
</h1>
<section id="onevone" class="onevone">
<form>
<input type="text" placeholder="Enter Your Name">
<input type="number" placeholder="Enter Your Number">
<input type="email" placeholder="Enter Parent's Email">
<input type="eamil"placeholder="Enter child's email (if any)">
<textarea placeholder="Enter Data about your child" cols="30" rows="10"></textarea>
<div class="buttons">
<input type="submit" value="Send">
<input type="reset" value="Reset"></div>
</form>
</section>
<footer>
copyright © codeandmancodingclasses.com
</footer>
</body>
</html>
Style.css
*{
margin:0;
padding:0;
box-sizing: border-box;
font-family:Arial, Helvetica, sans-serif;
}
header{
height: 100vh;
width:100%;
}
nav{
display: flex;
align-items: center;
justify-content: space-around;
height:10vh;
background-color: rgb(230 230 230 / 33%);
}
nav .right{
width:70%;
display: flex;
align-items: center;
justify-content: space-around;
}
nav a{
text-decoration: none;
text-transform: capitalize;
color:black;
}
.headersection{
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
height:90vh;
background-image: url('https://images.pexels.com/photos/4050291/pexels-photo-4050291.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2');
background-size: cover;
}
.headersection h1{
color: red;
}
.headersection p {
width:70%;
color:tomato;
text-align: center;
}
.buttons button{
padding:5px;
border:1px solid tomato;
background-color: rgba(18, 17, 17, 0.336);
}
.buttons button:hover{
background-color: rgba(52, 48, 48, 0.628);
cursor: pointer;
}
.services{
display: flex;
height: 80vh;
}
h1.heading{
border-bottom:3px solid tomato;
margin-bottom: 7px;
text-align: center;
}
.card{
border:0.5px solid rgb(44, 38, 38);
text-align: center;
display:flex;
align-items: center;
justify-self: center;
flex-direction: column;
height:81%;
margin:0 3px;
}
.card:hover{
transition: all 0.3s ease-in-out;
box-shadow: 3px 3px 3px 1px grey;
margin-bottom: 3px;
}
.card img{
width:100%;
}
.pricing{
height:70vh;
display: flex;
align-items: center;
justify-content: space-around;
}
.pricing_card{
background-image:linear-gradient(30deg,purple 10%,aqua 80%);
display: flex;
flex-direction: column;
height: 89%;
border:1px solid purple;
text-align: center;
margin:0px 3px;
}
.shape{
background-color: white;
height: 70%;
width: 100%;
border-radius: 50%;
}
.para2{
margin-top:30vh;
}
.pricing_card button{
width:50%;
padding:3px 5px;
margin:auto;
background-image: linear-gradient(10deg, aqua 10%, rgb(13, 255, 178) 90%);
}
.onevone{
height: 100vh;
background:url("https://images.pexels.com/photos/7190886/pexels-photo-7190886.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2");
background-size: cover;
background-position: left;
background-repeat: no-repeat;
}
.onevone form{
height: 100%;
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
}
.onevone form input{
outline:none;
border:none;
border-bottom:3px solid purple;
background:none;
margin: 5px 0;
color:white;
}
.onevone form textarea{
outline:none;
color:white;
border:3px solid purple;
box-shadow: 9px 4px 19px 4px grey;
background:none;
}
.onevone form textarea::placeholder{
font-weight: bold;
}
.onevone form .buttons input{
background: orangered;
cursor:pointer;
padding:3px;
font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
border:none;
margin: 4px;
}
footer {
text-align: center;
font-family: 'Courier New', Courier, monospace;
font-weight: bold;
color:white;
background:black;
text-shadow: 4px 9px 2px 1px white;
}
So this was the source code so I hope that you liked this playlist and this post.
Thank You.
Comments
Post a Comment