• About
  • Contact Us
  • Privacy & policy
  • Term & Conditions
iMe creative
  • BLOGS
  • HTML & CSS
  • Tailwind CSS
No Result
View All Result
  • BLOGS
  • HTML & CSS
  • Tailwind CSS
No Result
View All Result
iMe creative
No Result
View All Result

How to Create a Completed Responsive website using HTML & CSS

Sinthu by Sinthu
September 7, 2023
in HTML & CSS
18
How to Create a Completed Responsive website using HTML & CSS

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:
  1. Setup and Basic Structure
  2. Creating the Navbar
  3. Designing the Home Section
  4. Building the Booking Section
  5. Designing the Services Section
  6. Creating the About Section
  7. Implementing the Pricing Section
  8. Developing the Contact Section
  9. Building the Footer
  10. 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.
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<!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>
<!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>
<!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.
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<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>
<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>
<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.
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<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="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="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.
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<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="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="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.
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<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="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="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.
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<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="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="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.
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<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="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="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.
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<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>
<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>
<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.
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<footer>
<div class="copyright-info">
<p>&copy; 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>
<footer> <div class="copyright-info"> <p>&copy; 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>
<footer>
        <div class="copyright-info">
            <p>&copy; 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:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<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>
<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>
    <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.

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
@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;
}
}
@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; } }
@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
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<!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>&copy; 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>
<!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>&copy; 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>
<!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>&copy; 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
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
* {
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;
}
}
* { 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; } }
* {
    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

Subscribe to iMe Creative

Download complete source code and images
Previous Post

How to create dark login and registration form using only HTML and CSS

Next Post

How to Create a Complete Responsive Personal Portfolio Website using HTML AND CSS

Sinthu

Sinthu

Next Post
How to Create a Complete Responsive Personal Portfolio Website using HTML AND CSS

How to Create a Complete Responsive Personal Portfolio Website using HTML AND CSS

Comments 18

  1. avenue17 says:
    2 years ago

    Many thanks.

    Reply
  2. http://tridemedia.com/ says:
    2 years ago

    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!!

    Reply
  3. avenue17 says:
    1 year ago

    Thanks, can, I too can help you something?

    Reply
  4. avenue17 says:
    1 year ago

    Yes… Likely… The easier, the better… All ingenious is simple.

    Reply
  5. novopet says:
    1 year ago

    You are not right. I am assured. I can prove it. Write to me in PM, we will talk.

    Reply
  6. novopet says:
    1 year ago

    It is remarkable, very amusing opinion

    Reply
  7. continent telecom says:
    1 year ago

    I can suggest to visit to you a site on which there are many articles on a theme interesting you.

    Reply
  8. european sailing says:
    1 year ago

    I with you completely agree.

    Reply
  9. virtual local numbers says:
    1 year ago

    Completely I share your opinion. In it something is also to me this idea is pleasant, I completely with you agree.

    Reply
  10. Lilla says:
    1 year ago

    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!

    Reply
  11. wiki-aero.win says:
    1 year ago

    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!

    Reply
  12. Lottie says:
    1 year ago

    I am truly grateful to the owner of this site who has shared this great article
    at here.

    Reply
  13. www.tumblr.com says:
    1 year ago

    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!

    Reply
  14. https://wiki-tonic.win/ says:
    1 year ago

    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.

    Reply
  15. Brandi says:
    1 year ago

    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.

    Reply
  16. Lynne says:
    1 year ago

    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.

    Reply
  17. avenue17 says:
    1 year ago

    In it something is. I will know, I thank for the information.

    Reply
  18. smortergiremal says:
    1 year ago

    Some truly nice stuff on this site, I enjoy it.

    Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Connect with us

Popular post

website like youtube

How to create Website like YouTube

June 20, 2023
How to Create Responsive Admin Dashboard using HTML, CSS and JS

How to Create Responsive Admin Dashboard using HTML, CSS and JS

June 20, 2023
How To Create Responsive Admin Dashboard Using HTML, CSS & JS For Hospital Management System

How To Create Responsive Admin Dashboard Using HTML, CSS & JS For Hospital Management System

June 20, 2023
responsive admin dashboard

How to create Responsive Admin Dashboard using HTML and CSS

June 20, 2023

Recent

The Rise of AI-Powered Search Engines: How They’re Changing the Game in 2025

The Rise of AI-Powered Search Engines: How They’re Changing the Game in 2025

April 4, 2025
AI-Powered Search: The Future of Information Retrieval

AI-Powered Search: The Future of Information Retrieval

April 2, 2025
AI-Powered Code Generation: Is This the Future of Software Development?

AI-Powered Code Generation: Is This the Future of Software Development?

April 1, 2025

ime creative

Welcome to imecreative.com, a website dedicated to the world of web designing and development. We are a team of passionate professionals with years of experience in this field, committed to sharing our knowledge and expertise with our readers.

Browse by Category

  • BLOGS
  • HTML & CSS
  • INTERVIEW QUESTIONS
  • Next Js
  • Tailwind CSS
  • Uncategorized
The Rise of AI-Powered Search Engines: How They’re Changing the Game in 2025

The Rise of AI-Powered Search Engines: How They’re Changing the Game in 2025

April 4, 2025
AI-Powered Search: The Future of Information Retrieval

AI-Powered Search: The Future of Information Retrieval

April 2, 2025
AI-Powered Code Generation: Is This the Future of Software Development?

AI-Powered Code Generation: Is This the Future of Software Development?

April 1, 2025
  • About
  • Contact Us
  • Privacy & policy
  • Term & Conditions

© 2023 ime creative

No Result
View All Result
  • Home 1
  • BLOGS
  • HTML & CSS
  • Tailwind CSS
  • About
  • Contact Us
  • Privacy & policy

© 2023 ime creative