Index

<!
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>Complete Responsive Pet Food Website Design Tutorial</title>


<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/5.15.4/css/all.min.css">


<link rel="stylesheet" href="css/style.css">
</head>
<body>

<header class="header">
<a href="#" class="logo"> <i class="fas fa-paw"></i> shop </a>
<nav class="navbar">
<a href="#home">home</a>
<a href="#about">about</a>
<a href="#shop">shop</a>
<a href="#services">services</a>
<a href="#plan">plan</a>
<a href="#contact">contact</a>
</nav>
<div class="icons">
<div class="fas fa-bars" id="menu-btn"></div>
<a href="#" class="fas fa-shopping-cart"></a>
<div class="fas fa-user" id="login-btn"></div>
</div>
<form action="" class="login-form">

<h3>sign in</h3>
<input type="email" name="" placeholder="enter your email" id=""
class="box">
<input type="password" name="" placeholder="enter your password" id=""
class="box">
<div class="remember">
<input type="checkbox" name="" id="remember-me">
<label for="remember-me">remember me</label>
</div>
<input type="submit" value="sign in" class="btn">
<div class="links">
<a href="#">forget password</a>
<a href="#">sign up</a>
</div>
</form>
</header>



<section class="home" id="home">
<div class="content">
<h3> <span>hi</span> welcome to our pet shop </h3>
<a href="#" class="btn">shop now</a>
</div>
<img src="image/bottom_wave.png" class="wave" alt="">
</section>


<section class="about" id="about">
<div class="image">
<img src="image/about_img.png" alt="">
</div>
<h3>premium <span>pet food</span> manufacturer</h3>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptatum
sint, dolore perspiciatis iure consequuntur eligendi quaerat vitae shaikh anas.</p>
<a href="#" class="btn">read more</a>
</div>
</section>


<div class="dog-food">
<div class="image">
<img src="image/dog_food.png" alt="">
</div>
<h3> <span>air dried</span> dog food </h3>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Fugiat iure
illo, repudiandae rem porro sunt.</p>
<div class="amount">$15.00 - $30.00</div>
<a href="#"> <img src="image/shop_now_dog.png" alt=""> </a>
</div>
</div>
<div class="cat-food">
<h3> <span>air dried</span> cat food </h3>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Fugiat iure
illo, repudiandae rem porro sunt.</p>
<div class="amount">$15.00 - $30.00</div>
<a href="#"> <img src="image/shop_now_cat.png" alt=""> </a>
</div>
<div class="image">
<img src="image/cat_food.png" alt="">
</div>
</div>


<section class="shop" id="shop">
<h1 class="heading"> our <span> products </span> </h1>
<div class="box-container">
<div class="box">
<div class="icons">
<a href="#" class="fas fa-heart"></a>
<a href="#" class="fas fa-eye"></a>
</div>
<div class="image">
<img src="image/product_01.jpg" alt="">
</div>
<h3>air-dried food</h3>
<div class="amount"> $15.00 - $30.00 </div>
</div>
</div>
<div class="box">
<div class="icons">
</div>
<div class="image">
</div>
</div>
</div>
<div class="box">
<div class="icons">
</div>
<div class="image">
</div>
</div>
</div>
<div class="box">
<div class="icons">
</div>
<div class="image">
</div>
</div>
</div>
<div class="box">
<div class="icons">
</div>
<div class="image">
</div>
</div>
</div>
<div class="box">
<div class="icons">
</div>
<div class="image">
</div>
</div>
</div>
</div>
</section>



<section class="services" id="services">
<h1 class="heading"> our <span>services</span> </h1>
<div class="box">
<i class="fas fa-dog"></i>
<h3>dog boarding</h3>
</div>
<div class="box">
<i class="fas fa-cat"></i>
<h3>cat boarding</h3>
</div>
<div class="box">
<i class="fas fa-bath"></i>
<h3>spa & grooming</h3>
</div>
<div class="box">
<i class="fas fa-drumstick-bite"></i>
<h3>healthy meal</h3>
</div>
<div class="box">
<i class="fas fa-baseball-ball"></i>
<h3>activity exercise</h3>
</div>
<div class="box">
<i class="fas fa-heartbeat"></i>
<h3>health care</h3>
</div>
</div>
</section>


<section class="plan" id="plan">
<h1 class="heading"> choose a <span>plan</span> </h1>
<div class="box">
<h3 class="title">pet care</h3>
<h3 class="day"> 1 day </h3>
<i class="fas fa-bicycle icon"></i>
<div class="list">
<p> pet room <span class="fas fa-check"></span> </p>
<p> pet grooming <span class="fas fa-check"></span> </p>
<p> pet exercise <span class="fas fa-check"></span> </p>
<p> pet meals <span class="fas fa-check"></span> </p>
</div>
<div class="amount"><span>$</span>50</div>
<a href="#" class="btn"> choose plan </a>
</div>
<div class="box">
<h3 class="day"> 10 days </h3>
<i class="fas fa-motorcycle icon"></i>
<div class="list">
</div>
</div>
<div class="box">
<h3 class="day"> 30 days </h3>
<i class="fas fa-car-side icon"></i>
<div class="list">
</div>
</div>
</div>
</section>

<section class="contact" id="contact">
<div class="image">
<img src="image/contact_img.png" alt="">
</div>
<form action="">
<h3>contact us</h3>
<input type="text" placeholder="your name" class="box">
<input type="email" placeholder="your email" class="box">
<input type="tumber" placeholder="your number" class="box">
<textarea name="" placeholder="your message" id="" cols="30"
rows="10"></textarea>
<input type="submit" value="send message" class="btn">
</form>
</section>
<section class="footer">
<img src="image/top_wave.png" alt="">
<div class="share">
<a href="#" class="btn"> <i class="fab fa-facebook-f"></i> facebook </a>
<a href="#" class="btn"> <i class="fab fa-twitter"></i> twitter </a>
<a href="#" class="btn"> <i class="fab fa-instagram"></i> instagram </a>
<a href="#" class="btn"> <i class="fab fa-linkedin"></i> linkedin </a>
<a href="#" class="btn"> <i class="fab fa-pinterest"></i> pinterest </a>
</div>
<div class="credit"> created by <span> mr. web designer </span> | all rights
reserved! </div>
</section>


<script src="js/script.js"></script>
</body>
</html>

Index

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Index

Uploaded by

Copyright:

Available Formats

<!

<a href="#" class="logo"> <i class="fas fa-paw"></i> shop </a>

<form action="" class="login-form">

<section class="home" id="home">

<img src="image/bottom_wave.png" class="wave" alt="">

<section class="about" id="about">

<section class="shop" id="shop">

<h1 class="heading"> our <span> products </span> </h1>

<h1 class="heading"> our <span>services</span> </h1>

<section class="plan" id="plan">

<h1 class="heading"> choose a <span>plan</span> </h1>

<section class="contact" id="contact">

<img src="image/top_wave.png" alt="">

You might also like