Hello developers! Are you looking to create a stunning, responsive website for a pet care service? In this step-by-step tutorial, we will walk you through the process of building a complete responsive website using HTML and CSS. You will learn how to create a beautiful and functional website for a pet care service called “Bow Wow.”
Table of Contents:
- Setup and Basic Structure
- Creating the Navbar
- Designing the Home Section
- Building the Booking Section
- Designing the Services Section
- Creating the About Section
- Implementing the Pricing Section
- Developing the Contact Section
- Building the Footer
- Making the Website Responsive
Let’s dive into each step:
1. Setup and Basic Structure
- Create a new HTML file and name it
index.html. - Set up the basic HTML structure with
<!DOCTYPE html>,<html>,<head>, and<body>. - Include the necessary meta tags, CSS files, and external fonts.
- Create a title for the website, and add the navigation bar and section placeholders.
<!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>Bow Wow | Pet Care Services</title>
<link rel="stylesheet" href="styles.css">
<link rel="icon" href="paw-print-.png">
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Calligraffitti&family=Damion&family=Permanent+Marker&family=Poppins:wght@400;600&display=swap" rel="stylesheet">
</head>
<body>
<!-- Body content -->
</body>
</html>
2. Creating the Navbar
- Build the navigation bar (
<div class="navbar">) using HTML and CSS. - Add the website logo and navigation links.
- Implement a responsive menu toggle for mobile devices using JavaScript.
<div class="navbar">
<nav>
<p class="logo">BOW WOW</p>
<ul class="nav-list">
<li><a href="#">Home</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#about">About</a></li>
<li><a href="#pricing">Price</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#booking" class="btn">Get a quote</a></li>
</ul>
<div class="toggle"></div>
</nav>
</div>
3. Designing the Home Section
- Create the home section (
<section class="home">) with a background image. - Add headings, text, and buttons to promote your pet care services.
<section class="home">
<h3 class="white">Best Pet Services</h3>
<h1 class="white"> keep your pet happy</h1>
<h5 class="white">Lorem ipsum dolor sit amet consectetur adipisicing elit.</h5>
<div class="home-buttons">
<a href="#" class="btn">Book Now</a>
<a href="#" class="btn">Learn More</a>
</div>
</section>
4. Building the Booking Section
- Create the booking section (
<section class="booking">). - Build a booking form with input fields for name, email, date, time, and service selection.
- Include a “Book Now” button and a section to display additional details.
<section class="booking" id="booking">
<form action="" class="booking-form">
<input type="text" placeholder="Your Name">
<input type="email" placeholder="Your Email">
<input type="text" placeholder="Reservation Date">
<input type="text" placeholder="Reservation Time">
<select name="" id="">
<option value="">Selevt A Service</option>
<option value="">Service 1</option>
<option value="">Service 2</option>
<option value="">Service 3</option>
</select>
<a href="#" class="btn-big">Book Now</a>
</form>
<div class="details-container">
<h3>Going for vacation?</h3>
<h2>Book For Your Pet</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam ipsam ex facilis? Consectetur repellendus animi nulla.</p>
<div class="features">
<div class="feature">
<div class="title">
<div class="img-box-small">
<img src="first-aid-kit.svg" alt="">
</div>
<h4>Safety First</h4>
</div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit, pariatur? Soluta, possimus facilis?</p>
</div>
<div class="feature">
<div class="title">
<div class="img-box-small">
<img src="play.svg" alt="">
</div>
<h4>Spacious Play Yards</h4>
</div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit, pariatur? Soluta, possimus facilis?</p>
</div>
<div class="feature">
<div class="title">
<div class="img-box-small">
<img src="certificate.svg" alt="">
</div>
<h4>Monitor Your Pets</h4>
</div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit, pariatur? Soluta, possimus facilis?</p>
</div>
<div class="feature">
<div class="title">
<div class="img-box-small">
<img src="home.svg" alt="">
</div>
<h4>All-In-One Pricing</h4>
</div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit, pariatur? Soluta, possimus facilis?</p>
</div>
</div>
</div>
</section>
5. Designing the Services Section
- Create the services section (
<section class="services">). - Design a grid layout to display various pet care services.
- Add service titles, descriptions, and icons.
<section class="services" id="services">
<h3>Dog services that</h3>
<h2>Put Your Pet First</h2>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Fugit, magnam consectetur sapiente earum minima eligendi, possimus sit est dignissimos beatae id dicta dolorum tenetur illo!</p>
<div class="service-container">
<div class="service">
<div class="img-box">
<img src="pet-boarding.svg" alt="">
</div>
<h4>Pet Boarding</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae, esse.</p>
</div>
<div class="service">
<div class="img-box">
<img src="feeding.svg" alt="">
</div>
<h4>Pet Feeding</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae, esse.</p>
</div>
<div class="service">
<div class="img-box">
<img src="training.svg" alt="">
</div>
<h4>Pet Training</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae, esse.</p>
</div>
<div class="service">
<div class="img-box">
<img src="treatment.svg" alt="">
</div>
<h4>Pet Treatment</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae, esse.</p>
</div>
</div>
</section>
6. Creating the About Section
- Create the about section (
<section class="about">) with two columns. - Add information about your pet care service and its benefits.
- Highlight key features using checkmark icons.
<section class="about" id="about">
<div class="details-container">
<h3>About us</h3>
<h2>Boarding and Daycare</h2>
<h5>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aspernatur doloribus repudiandae ducimus sed?</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est tempora iusto eligendi voluptatum delectus praesentium et. Adipisci fugiat architecto, soluta repellat iure exercitationem quasi et?</p>
<div class="about-points">
<div class="about-point">
<i class="fas fa-check-double black"></i>
<h4>Best in Industry</h4>
</div>
<div class="about-point">
<i class="fas fa-check-double black"></i>
<h4>Emergency Services</h4>
</div>
<div class="about-point">
<i class="fas fa-check-double black"></i>
<h4>24/7 Customer Support</h4>
</div>
</div>
<a href="#" class="btn">Learn More</a>
</div>
<div class="image-container">
<img src="about-img3.jpg" alt="">
</div>
</section>
7. Implementing the Pricing Section
- Create the pricing section (
<section class="pricing">). - Design pricing cards with details of different service plans.
- Include buttons for users to sign up for each plan.
<section class="pricing" id="pricing">
<h3>Pricing plan</h3>
<h2>Choose The Best Price</h2>
<div class="prices">
<div class="price">
<div class="price-type">
<h4>Basic</h4>
<p>$<span>49</span>/Mo</p>
</div>
<div class="spec">
<i class="fas fa-check"></i>
<p>Feeding</p>
</div>
<div class="spec">
<i class="fas fa-check"></i>
<p>Boarding</p>
</div>
<div class="spec">
<i class="fas fa-times"></i>
<p>Training</p>
</div>
<div class="spec">
<i class="fas fa-times"></i>
<p>Veterinary Medicine</p>
</div>
<a href="#" class="btn-big">Sign-up Now</a>
</div>
<div class="price">
<div class="price-type">
<h4>Standard</h4>
<p>$<span>99</span>/Mo</p>
</div>
<div class="spec">
<i class="fas fa-check"></i>
<p>Feeding</p>
</div>
<div class="spec">
<i class="fas fa-check"></i>
<p>Boarding</p>
</div>
<div class="spec">
<i class="fas fa-check"></i>
<p>Training</p>
</div>
<div class="spec">
<i class="fas fa-times"></i>
<p>Veterinary Medicine</p>
</div>
<a href="#" class="btn-big">Sign-up Now</a>
</div>
<div class="price">
<div class="price-type">
<h4>Premium</h4>
<p>$<span>149</span>/Mo</p>
</div>
<div class="spec">
<i class="fas fa-check"></i>
<p>Feeding</p>
</div>
<div class="spec">
<i class="fas fa-check"></i>
<p>Boarding</p>
</div>
<div class="spec">
<i class="fas fa-check"></i>
<p>Training</p>
</div>
<div class="spec">
<i class="fas fa-check"></i>
<p>Veterinary Medicine</p>
</div>
<a href="#" class="btn-big">Sign-up Now</a>
</div>
</div>
</section>
8. Developing the Contact Section
- Create the contact section (
<section class="contact">). - Display contact information, including address, phone number, and email.
- Add social media icons and popular links.
- Implement a newsletter subscription form.
<section class="contact" id="contact">
<div class="description">
<p class="logo">BOW WOW</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti officia laudantium veniam hic est accusamus alias provident aspernatur eum illum?</p>
</div>
<div class="get-in-touch">
<h4>Get In Touch</h4>
<div class="get-in-touch-field">
<i class="fas fa-map-marker-alt"></i>
<p>123 Street, New York, USA</p>
</div>
<div class="get-in-touch-field">
<i class="fas fa-phone-alt"></i>
<p>+012 345 67890</p>
</div>
<div class="get-in-touch-field">
<i class="fas fa-envelope"></i>
<p>info@example.com</p>
</div>
<div class="social-media">
<div class="social-icon">
<i class="fab fa-twitter"></i>
</div>
<div class="social-icon">
<i class="fab fa-facebook-f"></i>
</div>
<div class="social-icon">
<i class="fab fa-linkedin-in"></i>
</div>
<div class="social-icon">
<i class="fab fa-instagram"></i>
</div>
</div>
</div>
<div class="popular-links">
<h4>Popular Links</h4>
<a href="#"><i class="fas fa-chevron-right"></i> Pet Services</a>
<a href="#"><i class="fas fa-chevron-right"></i> Pet Training</a>
<a href="#"><i class="fas fa-chevron-right"></i> Pet Medicine</a>
<a href="#"><i class="fas fa-chevron-right"></i> Pet Feeding</a>
<a href="#"><i class="fas fa-chevron-right"></i> Pet Boarding</a>
</div>
<div class="newsletter">
<h4>Newsletter</h4>
<form action="" class="newsletter">
<input type="text" placeholder="Your Name">
<input type="email" placeholder="Your Email">
<a href="#" class="btn-big">Submit Now</a>
</form>
</div>
</section>
9. Building the Footer
- Design a footer section (
<footer>) with copyright information. - Include links to privacy, terms, FAQs, and help pages.
<footer>
<div class="copyright-info">
<p>© iMe Creative. All Rights Reserved.</p>
</div>
<div class="footer-links">
<a href="#">Privacy</a>
<a href="#">Terms</a>
<a href="#">FAQs</a>
<a href="#">Help</a>
</div>
</footer>
10. Adding Interactivity with JavaScript
To make our website even more engaging, we can add some interactivity using JavaScript. In this step, we’ll add a simple JavaScript function to toggle the mobile menu:
<script>
const navBar = document.querySelector('.navbar');
const toggleBtn = document.querySelector('.toggle');
toggleBtn.onclick = function() {
toggleBtn.classList.toggle('active');
navBar.classList.toggle('active');
}
document.querySelector('.nav-list').onclick = function() {
toggleBtn.classList.toggle('active');
navBar.classList.toggle('active');
}
</script>
11. Making the Website Responsive
Implement responsive design using media queries. – Adjust the layout, font sizes, and spacing for various screen sizes. – Test your website on different devices and browsers to ensure responsiveness.
@media(max-width:1050px) {
nav ul li {
margin-left: 30px;
}
section {
padding: 80px 50px;
}
form.booking-form {
padding: 90px 30px;
}
.price {
width: 250px;
}
}
@media(max-width:900px) {
.booking {
grid-template-columns: 1fr;
}
form.booking-form {
justify-self: center;
grid-area: 2 / 1 / 3 / 2;
}
.details-container {
padding: 0;
padding-bottom: 20px;
}
.service-container {
grid-template-columns: repeat(2, 1fr);
}
.about {
grid-template-columns: 1fr;
}
.image-container {
height: 800px;
}
.about .details-container {
padding: 0;
padding-bottom: 20px;
}
.prices {
grid-template-columns: 1fr;
row-gap: 40px;
}
.price {
width: 400px;
}
.contact {
grid-template-columns: 1fr 1fr;
}
.copyright-info p {
font-size: 14px;
}
.footer-links a {
font-size: 14px;
margin: 5px;
}
.navbar ul {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.9);
backdrop-filter: blur(2px);
flex-direction: column;
justify-content: center;
z-index: 5;
transform: translateY(-100%);
transition: 0.5s;
opacity: 0;
visibility: hidden;
}
.navbar ul li:last-child {
display: none;
}
.navbar ul li {
margin-left: 0;
}
.navbar ul li a {
display: block;
font-size: 25px;
color: #fff;
padding: 15px;
}
.toggle {
position: fixed;
top: 8px;
right: 10%;
width: 45px;
height: 45px;
cursor: pointer;
background: #a51d37 url(menu.svg);
background-size: 30px;
background-repeat: no-repeat;
background-position: center;
z-index: 6;
}
.toggle.active {
background: #a51d37 url(close.svg);
background-size: 25px;
background-repeat: no-repeat;
background-position: center;
}
.navbar.active ul {
transform: translateY(0);
opacity: 1;
visibility: visible;
}
}
@media(max-width:620px) {
section {
padding: 80px 20px;
}
.features {
grid-template-columns: 1fr;
}
.service-container {
grid-template-columns: 1fr;
}
.contact {
grid-template-columns: 1fr;
}
footer {
flex-direction: column;
}
}
@media(max-width:460px) {
.price {
width: 300px;
}
.home-buttons .btn {
margin: 0 5px;
}
h1 {
font-size: 40px;
}
h3 {
font-size: 25px;
}
}
Conclusion: Congratulations! You’ve successfully built a responsive website for Bow Wow Pet Care Services using HTML and CSS. This step-by-step guide has helped you create a visually appealing and functional website to promote your pet care services. You’ve learned how to structure your HTML, style it with CSS, and make it responsive. You’ve also added a touch of interactivity with JavaScript.
Feel free to expand on this project by adding more features, improving the design, or integrating with backend technologies for real functionality. Happy coding!
Here is the Full Code of HTML & CSS
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>Bow Wow | Pet Care Services</title>
<link rel="stylesheet" href="styles.css">
<link rel="icon" href="paw-print-.png">
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Calligraffitti&family=Damion&family=Permanent+Marker&family=Poppins:wght@400;600&display=swap" rel="stylesheet">
</head>
<body>
<div class="navbar">
<nav>
<p class="logo">BOW WOW</p>
<ul class="nav-list">
<li><a href="#">Home</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#about">About</a></li>
<li><a href="#pricing">Price</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#booking" class="btn">Get a quote</a></li>
</ul>
<div class="toggle"></div>
</nav>
</div>
<section class="home">
<h3 class="white">Best Pet Services</h3>
<h1 class="white"> keep your pet happy</h1>
<h5 class="white">Lorem ipsum dolor sit amet consectetur adipisicing elit.</h5>
<div class="home-buttons">
<a href="#" class="btn">Book Now</a>
<a href="#" class="btn">Learn More</a>
</div>
</section>
<section class="booking" id="booking">
<form action="" class="booking-form">
<input type="text" placeholder="Your Name">
<input type="email" placeholder="Your Email">
<input type="text" placeholder="Reservation Date">
<input type="text" placeholder="Reservation Time">
<select name="" id="">
<option value="">Selevt A Service</option>
<option value="">Service 1</option>
<option value="">Service 2</option>
<option value="">Service 3</option>
</select>
<a href="#" class="btn-big">Book Now</a>
</form>
<div class="details-container">
<h3>Going for vacation?</h3>
<h2>Book For Your Pet</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam ipsam ex facilis? Consectetur repellendus animi nulla.</p>
<div class="features">
<div class="feature">
<div class="title">
<div class="img-box-small">
<img src="first-aid-kit.svg" alt="">
</div>
<h4>Safety First</h4>
</div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit, pariatur? Soluta, possimus facilis?</p>
</div>
<div class="feature">
<div class="title">
<div class="img-box-small">
<img src="play.svg" alt="">
</div>
<h4>Spacious Play Yards</h4>
</div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit, pariatur? Soluta, possimus facilis?</p>
</div>
<div class="feature">
<div class="title">
<div class="img-box-small">
<img src="certificate.svg" alt="">
</div>
<h4>Monitor Your Pets</h4>
</div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit, pariatur? Soluta, possimus facilis?</p>
</div>
<div class="feature">
<div class="title">
<div class="img-box-small">
<img src="home.svg" alt="">
</div>
<h4>All-In-One Pricing</h4>
</div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit, pariatur? Soluta, possimus facilis?</p>
</div>
</div>
</div>
</section>
<section class="services" id="services">
<h3>Dog services that</h3>
<h2>Put Your Pet First</h2>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Fugit, magnam consectetur sapiente earum minima eligendi, possimus sit est dignissimos beatae id dicta dolorum tenetur illo!</p>
<div class="service-container">
<div class="service">
<div class="img-box">
<img src="pet-boarding.svg" alt="">
</div>
<h4>Pet Boarding</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae, esse.</p>
</div>
<div class="service">
<div class="img-box">
<img src="feeding.svg" alt="">
</div>
<h4>Pet Feeding</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae, esse.</p>
</div>
<div class="service">
<div class="img-box">
<img src="training.svg" alt="">
</div>
<h4>Pet Training</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae, esse.</p>
</div>
<div class="service">
<div class="img-box">
<img src="treatment.svg" alt="">
</div>
<h4>Pet Treatment</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae, esse.</p>
</div>
</div>
</section>
<section class="about" id="about">
<div class="details-container">
<h3>About us</h3>
<h2>Boarding and Daycare</h2>
<h5>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aspernatur doloribus repudiandae ducimus sed?</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est tempora iusto eligendi voluptatum delectus praesentium et. Adipisci fugiat architecto, soluta repellat iure exercitationem quasi et?</p>
<div class="about-points">
<div class="about-point">
<i class="fas fa-check-double black"></i>
<h4>Best in Industry</h4>
</div>
<div class="about-point">
<i class="fas fa-check-double black"></i>
<h4>Emergency Services</h4>
</div>
<div class="about-point">
<i class="fas fa-check-double black"></i>
<h4>24/7 Customer Support</h4>
</div>
</div>
<a href="#" class="btn">Learn More</a>
</div>
<div class="image-container">
<img src="about-img3.jpg" alt="">
</div>
</section>
<section class="pricing" id="pricing">
<h3>Pricing plan</h3>
<h2>Choose The Best Price</h2>
<div class="prices">
<div class="price">
<div class="price-type">
<h4>Basic</h4>
<p>$<span>49</span>/Mo</p>
</div>
<div class="spec">
<i class="fas fa-check"></i>
<p>Feeding</p>
</div>
<div class="spec">
<i class="fas fa-check"></i>
<p>Boarding</p>
</div>
<div class="spec">
<i class="fas fa-times"></i>
<p>Training</p>
</div>
<div class="spec">
<i class="fas fa-times"></i>
<p>Veterinary Medicine</p>
</div>
<a href="#" class="btn-big">Sign-up Now</a>
</div>
<div class="price">
<div class="price-type">
<h4>Standard</h4>
<p>$<span>99</span>/Mo</p>
</div>
<div class="spec">
<i class="fas fa-check"></i>
<p>Feeding</p>
</div>
<div class="spec">
<i class="fas fa-check"></i>
<p>Boarding</p>
</div>
<div class="spec">
<i class="fas fa-check"></i>
<p>Training</p>
</div>
<div class="spec">
<i class="fas fa-times"></i>
<p>Veterinary Medicine</p>
</div>
<a href="#" class="btn-big">Sign-up Now</a>
</div>
<div class="price">
<div class="price-type">
<h4>Premium</h4>
<p>$<span>149</span>/Mo</p>
</div>
<div class="spec">
<i class="fas fa-check"></i>
<p>Feeding</p>
</div>
<div class="spec">
<i class="fas fa-check"></i>
<p>Boarding</p>
</div>
<div class="spec">
<i class="fas fa-check"></i>
<p>Training</p>
</div>
<div class="spec">
<i class="fas fa-check"></i>
<p>Veterinary Medicine</p>
</div>
<a href="#" class="btn-big">Sign-up Now</a>
</div>
</div>
</section>
<section class="contact" id="contact">
<div class="description">
<p class="logo">BOW WOW</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti officia laudantium veniam hic est accusamus alias provident aspernatur eum illum?</p>
</div>
<div class="get-in-touch">
<h4>Get In Touch</h4>
<div class="get-in-touch-field">
<i class="fas fa-map-marker-alt"></i>
<p>123 Street, New York, USA</p>
</div>
<div class="get-in-touch-field">
<i class="fas fa-phone-alt"></i>
<p>+012 345 67890</p>
</div>
<div class="get-in-touch-field">
<i class="fas fa-envelope"></i>
<p>info@example.com</p>
</div>
<div class="social-media">
<div class="social-icon">
<i class="fab fa-twitter"></i>
</div>
<div class="social-icon">
<i class="fab fa-facebook-f"></i>
</div>
<div class="social-icon">
<i class="fab fa-linkedin-in"></i>
</div>
<div class="social-icon">
<i class="fab fa-instagram"></i>
</div>
</div>
</div>
<div class="popular-links">
<h4>Popular Links</h4>
<a href="#"><i class="fas fa-chevron-right"></i> Pet Services</a>
<a href="#"><i class="fas fa-chevron-right"></i> Pet Training</a>
<a href="#"><i class="fas fa-chevron-right"></i> Pet Medicine</a>
<a href="#"><i class="fas fa-chevron-right"></i> Pet Feeding</a>
<a href="#"><i class="fas fa-chevron-right"></i> Pet Boarding</a>
</div>
<div class="newsletter">
<h4>Newsletter</h4>
<form action="" class="newsletter">
<input type="text" placeholder="Your Name">
<input type="email" placeholder="Your Email">
<a href="#" class="btn-big">Submit Now</a>
</form>
</div>
</section>
<footer>
<div class="copyright-info">
<p>© iMe Creative. All Rights Reserved.</p>
</div>
<div class="footer-links">
<a href="#">Privacy</a>
<a href="#">Terms</a>
<a href="#">FAQs</a>
<a href="#">Help</a>
</div>
</footer>
<script>
const navBar = document.querySelector('.navbar');
const toggleBtn = document.querySelector('.toggle');
toggleBtn.onclick = function() {
toggleBtn.classList.toggle('active');
navBar.classList.toggle('active');
}
document.querySelector('.nav-list').onclick = function() {
toggleBtn.classList.toggle('active');
navBar.classList.toggle('active');
}
</script>
</body>
</html>
CSS
* {
margin: 0;
padding: 0;
box-sizing: border-box;
scroll-behavior: smooth;
}
a {
text-decoration: none;
font-size: 16px;
font-family: 'Poppins', sans-serif;
color: #333;
}
li {
list-style: none;
}
h1 {
font-family: 'Permanent Marker', cursive;
font-size: 60px;
text-align: center;
}
h2 {
font-family: 'Permanent Marker', cursive;
font-size: 50px;
color: #333;
margin-bottom: 30px;
line-height: 50px;
}
h3 {
font-family: 'Calligraffitti', cursive;
font-size: 40px;
color: #a51d37;
}
h4 {
font-family: 'Poppins', sans-serif;
color: #a51d37;
font-size: 20px;
}
h5 {
font-family: 'Poppins', sans-serif;
font-size: 20px;
color: #333;
}
p {
font-family: 'Poppins', sans-serif;
color: #555;
}
.btn {
display: inline-block;
white-space: nowrap;
background: #a51d37;
padding: 5px 10px;
color: #fff;
font-family: 'Poppins', sans-serif;
font-size: 20px;
font-weight: normal;
}
.btn:hover {
background: crimson;
}
.white {
color: #fff;
}
section {
padding: 80px 100px;
}
/* navbar starts here */
.navbar {
display: flex;
justify-content: center;
align-items: center;
background: #fff;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.4);
height: 60px;
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 1;
}
nav {
display: flex;
align-items: center;
width: 90%;
}
nav ul {
flex: 5;
display: flex;
justify-content: flex-end;
align-items: center;
}
nav ul li {
margin-left: 50px;
}
nav ul li a {
font-weight: 600;
}
nav ul li a:hover {
color: #a51d37;
}
nav ul li:last-child:hover a {
color: #fff;
}
.logo {
flex: 1;
font-family: 'Damion', cursive;
font-size: 40px;
color: #a51d37;
white-space: nowrap;
}
/* home starts here */
.home {
height: 100vh;
background: url(bg1.jpg);
background-position: center;
background-size: cover;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.home h5 {
text-align: center;
}
.home-buttons {
margin-top: 30px;
}
.home-buttons .btn {
padding: 10px 20px;
margin: 0 20px;
}
/* booking starts here */
.booking {
min-height: 500px;
display: grid;
grid-template-columns: 2fr 3fr;
padding-top: 0;
padding-bottom: 0;
}
form.booking-form {
background: #a51d37;
max-width: 450px;
min-height: 550px;
font-family: 'Poppins', sans-serif;
padding: 90px 40px;
}
input,
select {
width: 100%;
height: 50px;
background: #fff;
border: none;
outline: none;
margin-bottom: 15px;
padding: 0 15px;
font-size: 16px;
}
input::placeholder,
select,
option {
font-size: 16px;
color: #666;
}
.btn-big {
display: block;
padding: 13px 10px;
text-align: center;
background: #333;
color: #fff;
}
.btn-big:hover {
background: #222;
}
.details-container {
padding: 30px 0 30px 30px;
}
.details-container h3 {
margin-top: 40px;
}
.img-box-small {
position: relative;
width: 30px;
height: 30px;
margin-right: 10px;
}
img {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
object-fit: cover;
}
.features {
display: grid;
grid-template-columns: 1fr 1fr;
margin-top: 20px;
grid-gap: 20px;
}
.title {
display: flex;
align-items: center;
white-space: nowrap;
margin-bottom: 10px;
}
/* services starts here */
.services {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
background: #f1f1f1;
}
.service-container {
margin: 20px 0;
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 20px;
}
.service {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.img-box {
position: relative;
height: 100px;
width: 100px;
}
/* about starts here */
.about {
display: grid;
grid-template-columns: 3fr 2fr;
}
.about .details-container {
padding: 0 30px 30px 0;
}
.about h5 {
margin-bottom: 20px;
}
.about-points {
margin: 5px 0;
}
.about-point {
display: flex;
align-items: center;
}
.about-point i {
color: #333;
margin-right: 10px;
font-size: 20px;
}
.about .btn {
margin-top: 15px;
}
.image-container {
position: relative;
width: 100%;
min-height: 500px;
}
/* price starts here */
.pricing {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
background: #f1f1f1;
}
.prices {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 20px;
}
.price {
width: 300px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.5);
}
.price-type {
height: 200px;
background: green;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.prices .price:nth-child(1) .price-type {
background: url(basic.jpg);
background-position: center;
background-size: cover;
}
.prices .price:nth-child(2) .price-type {
background: url(standard.jpg);
background-position: center;
background-size: cover;
}
.prices .price:nth-child(3) .price-type {
background: url(premium.jpg);
background-position: center;
background-size: cover;
}
.price-type h4 {
font-size: 25px;
}
.price-type p {
color: #fff;
}
.price-type p span {
font-size: 50px;
font-weight: 600;
}
.spec {
display: flex;
align-items: center;
justify-content: center;
height: 50px;
}
.spec i {
font-size: 20px;
margin-right: 10px;
}
.spec i.fa-check {
color: green;
}
.spec i.fa-times {
color: red;
}
.price .btn-big {
background: #a51d37;
}
.price .btn-big:hover {
background: crimson;
}
/* contact starts here */
.contact {
display: grid;
grid-template-columns: 1.5fr 1fr 1fr 1.5fr;
grid-gap: 30px;
padding: 60px 30px;
background: #181818;
}
.contact p,
.contact a {
color: #fff;
}
.contact .logo,
.contact h4 {
color: #a51d37;
font-size: 20px;
margin-bottom: 10px;
white-space: nowrap;
}
.get-in-touch-field {
display: flex;
align-items: center;
margin-bottom: 15px;
white-space: nowrap;
}
.get-in-touch-field i {
font-size: 20px;
color: #fff;
margin-right: 10px;
}
.social-media {
display: flex;
}
.social-icon {
height: 40px;
width: 40px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
border: 1px solid #fff;
color: #fff;
margin-right: 10px;
}
.social-icon:hover {
background: #a51d37;
}
.popular-links {
display: flex;
flex-direction: column;
}
.popular-links a {
margin-bottom: 10px;
}
.popular-links a:hover {
color: #a51d37;
}
form.newsletter input {
height: 40px;
}
form.newsletter .btn-big {
padding: 8px 10px;
}
form.newsletter .btn-big:hover {
background: #a51d37;
}
/* footer starts here */
footer {
background: #111;
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px 50px;
}
.copyright-info p {
color: #fff;
}
.footer-links a {
color: #fff;
margin: 0 10px;
}
.footer-links a:hover {
color: #a51d37;
}
/* responsive starts here */
@media(max-width:1050px) {
nav ul li {
margin-left: 30px;
}
section {
padding: 80px 50px;
}
form.booking-form {
padding: 90px 30px;
}
.price {
width: 250px;
}
}
@media(max-width:900px) {
.booking {
grid-template-columns: 1fr;
}
form.booking-form {
justify-self: center;
grid-area: 2 / 1 / 3 / 2;
}
.details-container {
padding: 0;
padding-bottom: 20px;
}
.service-container {
grid-template-columns: repeat(2, 1fr);
}
.about {
grid-template-columns: 1fr;
}
.image-container {
height: 800px;
}
.about .details-container {
padding: 0;
padding-bottom: 20px;
}
.prices {
grid-template-columns: 1fr;
row-gap: 40px;
}
.price {
width: 400px;
}
.contact {
grid-template-columns: 1fr 1fr;
}
.copyright-info p {
font-size: 14px;
}
.footer-links a {
font-size: 14px;
margin: 5px;
}
.navbar ul {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.9);
backdrop-filter: blur(2px);
flex-direction: column;
justify-content: center;
z-index: 5;
transform: translateY(-100%);
transition: 0.5s;
opacity: 0;
visibility: hidden;
}
.navbar ul li:last-child {
display: none;
}
.navbar ul li {
margin-left: 0;
}
.navbar ul li a {
display: block;
font-size: 25px;
color: #fff;
padding: 15px;
}
.toggle {
position: fixed;
top: 8px;
right: 10%;
width: 45px;
height: 45px;
cursor: pointer;
background: #a51d37 url(menu.svg);
background-size: 30px;
background-repeat: no-repeat;
background-position: center;
z-index: 6;
}
.toggle.active {
background: #a51d37 url(close.svg);
background-size: 25px;
background-repeat: no-repeat;
background-position: center;
}
.navbar.active ul {
transform: translateY(0);
opacity: 1;
visibility: visible;
}
}
@media(max-width:620px) {
section {
padding: 80px 20px;
}
.features {
grid-template-columns: 1fr;
}
.service-container {
grid-template-columns: 1fr;
}
.contact {
grid-template-columns: 1fr;
}
footer {
flex-direction: column;
}
}
@media(max-width:460px) {
.price {
width: 300px;
}
.home-buttons .btn {
margin: 0 5px;
}
h1 {
font-size: 40px;
}
h3 {
font-size: 25px;
}
}
Video Tutorial
Don’t forget to Subscribe to our YouTube Channel for more
Many thanks.
An intriguing discussion is definitely worth comment. I do think
that you need to publish more on this subject, it may not be a taboo matter but generally people do not speak about these subjects.
To the next! Many thanks!!
Thanks, can, I too can help you something?
Yes… Likely… The easier, the better… All ingenious is simple.
You are not right. I am assured. I can prove it. Write to me in PM, we will talk.
It is remarkable, very amusing opinion
I can suggest to visit to you a site on which there are many articles on a theme interesting you.
I with you completely agree.
Completely I share your opinion. In it something is also to me this idea is pleasant, I completely with you agree.
You are so awesome! I don’t think I’ve read a
single thing like this before. So nice to discover someone with
a few original thoughts on this issue. Really..
thank you for starting this up. This site is something that is
required on the internet, someone with a little originality!
Howdy! I understand this is kind of off-topic but I needed to ask.
Does running a well-established blog such as yours
take a large amount of work? I’m completely new to running a blog but I do write in my diary daily.
I’d like to start a blog so I can easily share my personal experience
and feelings online. Please let me know if you
have any kind of recommendations or tips for brand new aspiring
blog owners. Appreciate it!
I am truly grateful to the owner of this site who has shared this great article
at here.
That is a really good tip especially to those new to the blogosphere.
Brief but very precise info… Thank you for sharing this one.
A must read article!
I’m gone to tell my little brother, that he should
also go to see this web site on regular basis to take updated from hottest reports.
Excellent goods from you, man. I’ve understand your stuff previous to and you’re just extremely wonderful.
I actually like what you have acquired here, really like what
you’re stating and the way in which you say it. You make it entertaining and you still take care
of to keep it smart. I can’t wait to read much more from you.
This is really a wonderful website.
Its like you read my mind! You appear to know so much about
this, like you wrote the book in it or something.
I think that you can do with some pics to drive the message home a bit,
but instead of that, this is excellent blog. A great read.
I’ll certainly be back.
In it something is. I will know, I thank for the information.
Some truly nice stuff on this site, I enjoy it.