Full Tutorial


Part 1


Part 2


Part 3


Part 4
    





Source Code

HTML Code 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>The Pet  Fest</title>
<link rel="stylesheet" type="text/css" href="style.css">

<!-- google fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,600;1,700;1,800&display=swap" rel="stylesheet">

<!-- font awesome cdn -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous">

</head>
<body>
<header>
<nav>
<div class="logo">
<img src="images/logo.png"><h1>The Pet Fest</h1>
</div>
<div class="nav-links">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Shop</a></li>
</ul>
</div>
<div class="nav-icons">
<i class="fas fa-user-circle"></i>
<i class="fas fa-shopping-cart"></i>
</div>
</nav>

<div class="banner">
<div class="leftSide">
<h1>We are a pet care brand that cares for pet</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>

<button class="primary-btn">Know More >></button>
</div>
<div class="rightSide">
<img src="images/pic1.png">
</div>
</div>
</header>

<section class="about">
<div class="leftSide">
<h1>How our Subscription <br>plans work?</h1>
<p>Lorem ipsum dolor sit amet, consectetur <br> adipisicing consectetur adipisicing elit,<br> sed do eiusmod
tempor.</p>
<button class="primary-btn">Get Started >></button>
</div>
<div class="rightSide">
<img src="images/pic2.gif">
</div>
</section>

<section class="process">
<div class="box">
<span class="bullet">1</span>
<h2>Tell us about your pup</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="box">
<span class="bullet">2</span>
<h2>Get your starter box</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="box">
<span class="bullet">3</span>
<h2>Receive regular, reliable deliveries</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</section>

<section class="top-seller">
<center><h1>Our Top Sellers</h1></center>
<div>
<div class="product product1">
<img src="images/product1.png">
<h2>Organic Chicken Brown Rice</h2>
<button>Shop Now</button>
</div>

<div class="product product2">
<img src="images/product2.png">
<h2>Grain-Free Organic Bundle</h2>
<button>Shop Now</button>
</div>

<div class="product product3">
<img src="images/product3.png">
<h2>Grain-Friendly
Salmon Bundle</h2>
<button>Shop Now</button>
</div>
</div>
</section>


<section class="benefits">
<center><h1>All you require is Pet Fest's<br> pet food.</h1>
<p>Lorem ipsum dolor sit amet, consectetur <br>adipisicing elit, sed do eiusmod.</p></center>

<div>
<div class="box">
<img src="https://img.icons8.com/external-semi-solid-chattapat-/512/000000/external-nutrition-healthcare-semi-solid-chattapat-.png"/>
<h2>Nutritionally Complete</h2>
<p>Lorem ipsum dolor sit amet, consectetur.</p>
</div>

<div class="box">
<img src="https://img.icons8.com/ios-glyphs/512/000000/manager--v1.png"/>
<h2>Made By Experts</h2>
<p>Lorem ipsum dolor sit amet, consectetur.</p>
</div>

<div class="box">
<img src="https://img.icons8.com/pastel-glyph/512/000000/like--v1.png"/>
<h2>Loved By Pets</h2>
<p>Lorem ipsum dolor sit amet, consectetur.</p>
</div>

<div class="box">
<img src="https://img.icons8.com/external-vitaliy-gorbachev-fill-vitaly-gorbachev/512/000000/external-earth-mother-earth-day-vitaliy-gorbachev-fill-vitaly-gorbachev.png"/>
<h2>Easy On The Planet</h2>
<p>Lorem ipsum dolor sit amet, consectetur.</p>
</div>
</div>
</section>

<section class="testimonial">
<center><h1>What Our Clients Say?</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod.</p></center>

<div>
<div class="review">
<img src="images/client1.jpeg">
<div class="details">
<h2>Bruce C. Page</h2>
<span><h3>Web Developer</h3></span>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.</p>
<button>View More</button>
</div>
</div>

<div class="review">
<img src="images/client2.jpg">
<div class="details">
<h2>David Hall</h2>
<span><h3>Web Designer</h3></span>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.</p>
<button>View More</button>
</div>
</div>
</div>
</section>

<footer>
<div class="top-bar">
<div><img src="images/logo.png"><h1>The Pet Fest</h1></div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna.</p>
</div>
<div class="middle-bar">
<div class="bar1">
<h2>Subscribe To My Newsletter</h2>
<p>Lorem ipsum dolor sit amet, consectetur.</p>

<input type="email" placeholder="Email Address">
<button>Subscribe</button>
</div>
<div class="bar2">
<ul>
<li><h2>Top Categories</h2></li>
<li>Dog</li>
<li>Cat</li>
<li>Horse</li>
<li>Bird</li>
<li>Homeopathi</li>
</ul>
</div>
<div class="bar3">
<ul>
<li><h2>Food</h2></li>
<li>Grade Fresh</li>
<li>Dried Raw</li>
<li>The Pantry</li>
<li>Small Revirew</li>
<li>Cat Nutrition</li>
</ul>
</div>
<div class="bar4">
<ul>
<li><h2>Learn</h2></li>
<li>FAQs</li>
<li>Blog</li>
<li>About Us</li>
<li>Contact</li>
</ul>
</div>
<div class="bar5">
<h2>Utility Pages</h2>
<div class="email info">
<i class="far fa-envelope"></i>
<span><h3>Email</h3><p>xyz@gmail.com</p></span>
</div>
<div class="call info">
<i class="fas fa-phone-alt"></i>
<span><h3>Call</h3><p>000-000-0000</p></span>
</div>
<div class="chat info">
<i class="far fa-comment-dots"></i>
<span><h3>Chat</h3><p>Open Live Chat</p></span>
</div>
</div>
</div>
<div class="bottom-bar">
<div class="copyright">&copy; 2022 thepetfest</div>
<div class="social-icons">
<i class="fab fa-facebook"></i>
<i class="fab fa-twitter"></i>
<i class="fab fa-linkedin"></i>
</div>
</div>
</footer>

</body>
</html>


CSS Code 

*{
margin: 0;
padding: 0;
font-family: 'Be Vietnam Pro', sans-serif;
}

.primary-btn{
padding: 10px 20px;
border: 2px solid #555;
background: transparent;
border-radius: 30px;
font-size: 20px;
font-weight: 500;
transition: 0.5s;
}

.primary-btn:hover{
background: black;
color: white;
}

nav{
display: flex;
flex-direction: row;
align-items: center;
padding: 20px 2cm;
justify-content: space-around;
}

nav .logo{
align-items: center;
display: flex;
flex-basis: 30%;
}

nav .logo img{
width: 2.0cm;
margin-right: 15px;
}

nav .logo h1{
font-size: 0.8cm;
}

nav .nav-links{
flex-basis: 40%;
text-align: center;
padding-left: 1cm;
}

nav .nav-links ul{
display: flex;
list-style: none;
}

nav .nav-links ul li a{
color: black;
text-decoration: none;
margin-right: 25px;
font-size: 20px;
}

nav .nav-links ul li a:hover{
color: grey;
}

nav .nav-icons{
flex-basis: 30%;
text-align: center;
}

nav .nav-icons i{
font-size: 30px;
margin-right: 20px;
padding: 10px;
transition: 0.5s;
}

.nav-icons i:hover{
background: lightgray;
border-radius: 5px;
}

.banner{
display: flex;
flex-direction: row;
padding: 20px 2cm;
align-items: center;
background: navajowhite;
}

.banner .leftSide{
width: 50%;
}

.banner .leftSide h1{
font-size: 1.4cm;
margin-bottom: 1cm;
}

.banner .leftSide p{
margin-bottom: 1cm;
}

.banner .leftSide button{
padding: 15px 25px;
background: black;
color: white;
font-weight: 700;
border: none;
transition: 0.5s;
text-transform: uppercase;
border-radius: 5px;
}

.banner .rightSide{
padding-left: 1cm;
}

.banner .rightSide img{
transition: 0.5s;
}

.banner .rightSide img:hover{
filter: drop-shadow(10px 10px 15px grey);
}

/*----------------------*/

.about{
margin-top: 50px;
display: flex;
flex-direction: row;
align-items: center;
padding: 20px 4cm;

}

.about .leftSide{
width: 50%;
}

.about .leftSide h1{
font-size: 1cm;
margin-bottom: 0.5cm;
}

.about .leftSide p{
font-size: 15px;
color: grey;
}

.about .leftSide button{
margin-top: 0.8cm;
}

.about .rightSide img{
width: 10cm;
border-radius: 50%;
}

.process{
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px 4cm;

}

.process .box{
padding: 30px;
width: 7cm;
border-radius: 5px;
height: 7cm;
margin: 20px;
transition: 1s;
}

.process .box:hover{
box-shadow: 10px 7px 12px grey;
}

.process .box:hover .bullet{
background: black;
transition: 1s;
color: white;
font-weight: 700;
}

.process .box .bullet{
border-radius: 50%;
border: 1px solid black;
color: black;
font-size: 0.8cm;
padding: 15px 25px;
border-bottom: 20px;
text-align: left;
}

.process .box h2{
margin-top: 20px;
margin-bottom: 20px;
}

.process .box p{
color: grey;
}

.top-seller>div{
display: flex;
flex-direction: row;
align-items: center;
padding: 20px 4cm;
justify-content: space-between;

}

.top-seller h1{
font-size: 1cm;
margin-bottom: 0.5cm;
}

.top-seller .product{
width: 6cm; 
height: 10cm;
padding: 25px;
border-radius: 10px;
background:  red;
}

.top-seller .product img{
width: 6cm;
text-align: center;
margin: auto;
}

.top-seller .product h2{
font-size: 0.7cm;
text-align: center;
margin-bottom: 0.3cm;
margin-top: 15px;
}

.top-seller .product button{
padding: 8px 25px;
background: white;
text-transform: capitalize;
color: black;
font-weight: 600;
border: none;
font-size: 20px;
border-radius: 5px;
text-align: center;
margin: auto;
position: relative;
left: 50%;
transform: translateX(-50%);
transition: 0.5s;
}

.top-seller .product button:hover{
background: black;
color: white;
}

.top-seller .product1{
background: #db8edb;
}

.top-seller .product2{
background: lightpink;
}

.top-seller .product3{
background: lightblue;
}

/*-------------------------------*/

.benefits{
padding: 20px 4cm;
margin-top: 3cm;
}

.benefits h1{
font-size: 1cm;
margin-bottom: 20px;
}

.benefits p{
font-size: 15px;
color: grey;
width: 8cm;
}

.benefits>div{
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
margin-top: 1cm;
}

.benefits .box{
padding: 20px;
border: 1px solid grey;
border-radius: 7px;
width: 5cm;
overflow: hidden;
height: 7cm;
text-align: center;
transition: 0.5s;
}

.benefits .box img{
width: 3CM;
padding: 10PX;
border-radius: 7px;
border: 1px solid grey;
margin-bottom: 15px;
}

.benefits .box p{
width: auto;
margin-top: 10px;
}

.benefits .box:hover{
background: black;
cursor: pointer;
color: white;
border: 1px solid black;
}

.benefits .box:hover img{
border: 1px solid black;
background: white;
}

/*--------------------------*/

.testimonial h1{
font-size: 1cm;
text-align: center;
margin-top: 3cm;
}

.testimonial p{
color: grey;
}

.testimonial>div{
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 4cm;
margin-top: 1cm;
}

.testimonial .review{
display: flex;
width: 10cm;
padding: 0.5cm;
cursor: pointer;
border-radius: 5px;
background: #d3d3d34a;
}

.testimonial .review .details{
display: flex;
flex-direction: column;
justify-content: space-around;
}

.testimonial .review img{
width: 5cm;
max-height: 5cm;
margin-right: 30px;
border-radius: 5px;
}

.testimonial .review h2{
color: 20px;
}

.testimonial .review h3{
color: grey;
font-size: 16px;
}

.testimonial .review p{
color: grey;
font-size: 13px;
}

.testimonial .review button{
background: none;
border: none;
color: red;
text-align: left;
text-transform: uppercase;
font-weight: 500;
cursor: pointer;
transition: 0.5s;
}
.testimonial .review button:hover{
color: black;
}

/*------------------------------*/

footer{
padding: 1cm 4cm;
background: #555;
color: white;
display: flex;
flex-direction: column;
}

footer .top-bar{
display: flex;
flex-direction: row;
align-items: center;
padding-bottom: 30px;
border-bottom: 1px solid grey;
justify-content: space-between;
}

footer .top-bar div{
display: flex;
flex-direction: row;
flex-basis: 50%;
align-items: center;
}

footer .top-bar div h1{
font-size: 0.8cm;
}

footer .top-bar img{
width: 2cm;
border-radius: 50%;
margin-right: 20px;
}

footer .top-bar p{
flex-basis: 50%;
}

footer .middle-bar{
display: flex;
flex-direction: row;
align-items: flex-start;
justify-content: space-between;
padding-bottom: 10px;
border-bottom: 1px solid grey;
}

footer .middle-bar h2{
font-size: 25px;
margin-top: 25px;
}

footer .middle-bar ul li{
list-style: none;
}

footer .middle-bar .bar1{
flex-basis: 20%;
}

footer .middle-bar .bar1 p{
margin-top: 5px;
margin-bottom: 10px;
}

footer .middle-bar .bar1 input{
background: black;
color: grey;
outline:  none;
font-size: 17px;
border: none;
padding: 5px 10px;
margin-top: 10px;
}

footer .middle-bar .bar1 BUTTON{
border-radius: 1cm;
background: white;
color: black;
padding: 8px 25px;
font-size: 17px;
border: none;
margin-top: 10px;
transition: 0.5s;
}


footer .middle-bar .bar1 BUTTON:hover{
color: white;
background: black;
}

footer .middle-bar p{
color: grey;
}

footer .middle-bar .bar2 ul li, footer .middle-bar .bar3 ul li, footer .middle-bar .bar4 ul li{
text-align: left;
color: grey;
margin-bottom: 10px;
transition: 0.3s;
cursor: pointer;
}

footer .middle-bar .bar2 ul li:hover, footer .middle-bar .bar3 ul li:hover, footer .middle-bar .bar4 ul li:hover{
color: white;
font-weight: 500;
}

footer .middle-bar .bar2 ul li h2, footer .middle-bar .bar3 ul li h2, footer .middle-bar .bar4 ul li h2{
color: white;
margin-bottom: 10px;
}

footer .middle-bar .bar5 h2{
margin-bottom: 15px;
}

footer .middle-bar .bar5 .info{
padding: 15px 15px;
background: #6e6e9794;
margin-bottom: 5px;
border-radius: 7px;
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 10px;
transition: 0.5s;
cursor: pointer;
}

footer .middle-bar .bar5 .info:hover{
background: white;
color: black;
}

footer .middle-bar .bar5 .info:hover p{
color: grey;
}

footer .middle-bar .bar5 .info i{
padding: 7px;
border-radius: 50%;
background: navajowhite;
color: black;
margin-right: 5px;
}

footer .middle-bar .bar5 .info p{
color: white;
}

footer .bottom-bar{
display: flex;
align-items: center;
justify-content: space-between;
}

footer .bottom-bar .social-icons i{
font-size: 0.7cm;
margin-right: 10px;
margin-top: 5px;
}



Subscribe To Our Channel For More Amazing Coding Content:-  CodeWikis