Loading
.
.
.
We use cookies to personalize ads and analyze traffic. By continuing to browse the site, you agree to our Privacy Policy. You can also choose to reject cookies.
The content on this website, including videos and code examples, is for educational purposes only. All demonstrations and designs are fictional and created to illustrate coding techniques. Any resemblance to existing websites or brands is purely coincidental.
The creators and administrators of this website do not claim ownership or affiliation with any existing websites or companies. Users are encouraged to use the information responsibly for learning purposes. Liability for any misuse of the content provided is not accepted.
Below is the html code for this video.
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Pawfect Wellness Nurturing Your Pet's Health</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
</head>
<body>
<section class="container-fluid bg-body-tertiary">
<div class="container">
<nav class="navbar navbar-expand-lg bg-body-tertiary">
<div class="container-fluid">
<a href="#" class="navbar-brand">PawfectWellness</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarContent" aria-controls="navbarContent" aria-expanded="false"
aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse" id="navbarContent">
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
<li class="nav-item"><a href="#" class="nav-link">Mission</a></li>
<li class="nav-item"><a href="#" class="nav-link mx-lg-5">About</a></li>
<li class="nav-item"><a href="#" class="nav-link">Contact</a></li>
</ul>
</div>
</div>
</nav>
</div>
<div class="container py-5">
<div class="row">
<div class="col-12 col-sm-12 col-md-6 col-lg-6 my-4 d-flex flex-column justify-content-center">
<p>Health</p>
<h1>Pet Health Care's Gateway to Medical Wellness
<a href="#" class="btn btn-limegreen ms-3 bx-shdw-25">Contact Us</a>
</h1>
</div>
<div class="col-12 col-sm-12 col-md-6 col-lg-6 my-4 d-flex justify-content-center align-items-center">
<div class="card w-75 bx-shdw-75 border-0">
<img src="https://images.unsplash.com/photo-1628714957003-3ebd3e2f3fa9?q=80&w=2944&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
alt="img 1" class="w-100 rounded">
</div>
</div>
</div>
</div>
</section>
<section class="container-fluid bg-body-tertiary py-5">
<div class="container">
<div class="position-relative bx-shdw-50 rounded p-0 mh-90v">
<p class="text-center z-1 position-relative pt-5">Mission</p>
<h2 class="text-center z-1 position-relative">Your Pet Deserves the Care</h2>
<p class="text-center z-1 position-relative w-75 mx-auto">Lorem ipsum dolor sit amet consectetur
adipisicing elit. Quidem omnis eum aspernatur vel. Laudantium iste eum aspernatur quidem,
dignissimos voluptas impedit neque, saepe maiores, praesentium dolorum a provident obcaecati
aliquid.</p>
<img src="https://images.unsplash.com/photo-1669822293732-35a36081ac02?q=80&w=2825&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
alt="img 2" class="w-100 rounded h-100 position-absolute top-0">
</div>
</div>
</section>
<section class="container-fluid bg-body-tertiary py-5">
<div class="container">
<div class="row">
<div class="col-12 col-sm-12 col-md-6 col-lg-6 my-4 d-flex flex-column justify-content-center">
<p>Health</p>
<h1>Pawfect Wellness Nurturing Your Pet's Health & Comprehensive Guide to their Wellbeing</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto nemo perferendis recusandae
aut debitis! Quod, quas. Officia nam exercitationem, nobis aperiam laudantium, temporibus
perspiciatis beatae officiis aliquam esse iste repudiandae. Lorem ipsum dolor sit amet
consectetur, adipisicing elit. Nobis explicabo commodi quod maxime fugiat culpa, nemo,
laudantium necessitatibus vitae esse nihil velit dignissimos, reiciendis obcaecati consectetur
quia ipsam dolorum non.</p>
</div>
<div
class="col-12 col-sm-12 col-md-6 col-lg-6 my-4 d-flex flex-column justify-content-center align-items-center">
<div class="container-fluid">
<div class="row">
<div class="col-12 col-sm-12 col-md-12 col-lg-12 my-4">
<div class="card w-100 bx-shdw-75 border-0">
<img src="https://images.unsplash.com/photo-1508109742312-c7d531211d11?q=80&w=2940&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
alt="img 3" class="w-100 rounded mh-50v">
</div>
</div>
<div class="col-6 col-sm-6 col-md-6 col-lg-6 my-4">
<div class="card w-100 bx-shdw-75 border-0">
<img src="https://images.unsplash.com/photo-1599133706573-497a555c8074?q=80&w=2942&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
alt="img 4" class="w-100 rounded">
</div>
</div>
<div class="col-6 col-sm-6 col-md-6 col-lg-6 my-4">
<div class="card w-100 bx-shdw-75 border-0">
<img src="https://images.unsplash.com/photo-1642394178560-f5f79aa657b9?q=80&w=2940&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
alt="img 5" class="w-100 rounded">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="container-fluid bg-body-tertiary py-5">
<div class="container">
<p class="text-center">Services</p>
<h2 class="text-center">We are here for your pet's support</h2>
<p class="text-center w-50 mx-auto">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consequatur
consectetur fugiat delectus et fugit quia veritatis velit possimus iste cumque soluta in dolores
aperiam, illo sunt minus maxime! Placeat, eos!</p>
<div class="row">
<div class="col-12 col-sm-12 col-md-4 col-lg-4 my-4">
<div class="card border-0 bx-shdw-25">
<div class="card-body text-center">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c0/Dog_Paw_Print.png/971px-Dog_Paw_Print.png"
alt="img 6" class="w-50 mb-4">
<h3>Pet Needs</h3>
<p>We can take care of your pet</p>
</div>
</div>
</div>
<div class="col-12 col-sm-12 col-md-4 col-lg-4 my-4">
<div class="card border-0 bx-shdw-25">
<div class="card-body text-center">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c0/Dog_Paw_Print.png/971px-Dog_Paw_Print.png"
alt="img 7" class="w-50 mb-4">
<h3>Pet Food</h3>
<p>We can take care of your pet</p>
</div>
</div>
</div>
<div class="col-12 col-sm-12 col-md-4 col-lg-4 my-4">
<div class="card border-0 bx-shdw-25">
<div class="card-body text-center">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c0/Dog_Paw_Print.png/971px-Dog_Paw_Print.png"
alt="img 8" class="w-50 mb-4">
<h3>Pet Health</h3>
<p>We can take care of your pet</p>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="container-fluid bg-body-tertiary py-5">
<div class="container">
<h2>Contact Us</h2>
<div class="row">
<div class="col-12 col-sm-12 col-md-6 col-lg-6 my-4 d-flex justify-content-center align-items-center">
<div class="card border-0 bx-shdw-50">
<img src="https://images.unsplash.com/photo-1691789035817-628d724cbcab?q=80&w=2818&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
alt="img 9" class="h-100 w-100 rounded">
</div>
</div>
<div
class="col-12 col-sm-12 col-md-6 col-lg-6 my-4 d-flex flex-column justify-content-center align-items-center">
<form method="post" class="contact-form">
<div class="mb-5">
<input type="text" class="form-control p-3 bx-shdw-25 border-0 rounded-extra"
placeholder="Name">
</div>
<div class="mb-5">
<input type="email" class="form-control p-3 bx-shdw-25 border-0 rounded-extra"
placeholder="Email">
</div>
<div class="mb-5">
<textarea class="form-control p-3 bx-shdw-25 border-0 rounded-extra" placeholder="Message"
rows="7"></textarea>
</div>
<input type="submit" value="Submit" class="btn btn-limegreen bx-shdw-25 d-block w-100 py-2">
</form>
</div>
</div>
</div>
</section>
<section class="container-fluid bg-dark text-light py-5">
<div class="container">
<div class="row">
<div class="col-12 col-sm-12 col-md-4 col-lg-4 my-4">
<h2>PawfectWellness</h2>
</div>
<div class="col-12 col-sm-12 col-md-8 col-lg-8 my-4">
<div class="row">
<div class="col">
<h4>Contact</h4>
<ul class="list-group list-group-flush">
<li class="list-group-item bg-transparent px-0 border-0">
<a href="#" class="link-secondary link-underline link-underline-opacity-0">Contact
Us</a>
</li>
<li class="list-group-item bg-transparent px-0 border-0">
<a href="#" class="link-secondary link-underline link-underline-opacity-0">Store</a>
</li>
<li class="list-group-item bg-transparent px-0 border-0">
<a href="#"
class="link-secondary link-underline link-underline-opacity-0">Location</a>
</li>
</ul>
</div>
<div class="col">
<h4>Support</h4>
<ul class="list-group list-group-flush">
<li class="list-group-item bg-transparent px-0 border-0">
<a href="#" class="link-secondary link-underline link-underline-opacity-0">Help
Center</a>
</li>
<li class="list-group-item bg-transparent px-0 border-0">
<a href="#" class="link-secondary link-underline link-underline-opacity-0">Support
Info</a>
</li>
<li class="list-group-item bg-transparent px-0 border-0">
<a href="#" class="link-secondary link-underline link-underline-opacity-0">Contact
Areas</a>
</li>
</ul>
</div>
<div class="col">
<h4>About</h4>
<ul class="list-group list-group-flush">
<li class="list-group-item bg-transparent px-0 border-0">
<a href="#" class="link-secondary link-underline link-underline-opacity-0">About</a>
</li>
<li class="list-group-item bg-transparent px-0 border-0">
<a href="#"
class="link-secondary link-underline link-underline-opacity-0">Information</a>
</li>
<li class="list-group-item bg-transparent px-0 border-0">
<a href="#" class="link-secondary link-underline link-underline-opacity-0">Meet
Us</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<p class="text-center mb-0 mt-4">Copyright © 2024 PawfectWellness. All rights reserved.</p>
</div>
</section>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
crossorigin="anonymous"></script>
</body>
</html>Below is the css code for this video.
style.css
* {
margin: 0;
padding: 0;
transition: all 0.5s ease;
}
body {
height: 100vh;
width: 100%;
}
.bg-body-tertiary {
background-color: #eeeeee;
}
.btn-limegreen {
background-color: #dbff00;
color: #000000;
border-radius: 16px;
}
.btn-limegreen:hover {
background-color: #77861d;
color: #ffffff;
}
.bx-shdw-25 {
box-shadow: 8px 8px 32px #00000040;
}
.bx-shdw-50 {
box-shadow: 8px 8px 32px #00000080;
}
.bx-shdw-75 {
box-shadow: 8px 8px 32px #000000bf;
}
.rounded-extra {
border-radius: 16px;
}
.mh-50v {
max-height: 50vh;
}
.mh-90v {
min-height: 90vh;
}
form.contact-form {
width: 100%;
}
.form-control:focus {
border-color: #a1b814;
box-shadow: 0 0 0 0.25rem #a1b81440;
}
.bg-dark {
background-color: #000000 !important;
}
.bg-transparent {
background-color: transparent;
}Thanks for visiting