Scribd
Upload
24 views6 pages

Kal

The document is an HTML page for a pet grooming company website. It includes sections for navigation, services offered, a gallery of pets, and a contact form. The navigation menu includes dropdowns for additional pages. Images and descriptions of pets and products are displayed.

Uploaded by

Gemechis Gurmesa
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
24 views6 pages

Kal

The document is an HTML page for a pet grooming company website. It includes sections for navigation, services offered, a gallery of pets, and a contact form. The navigation menu includes dropdowns for additional pages. Images and descriptions of pets and products are displayed.

Uploaded by

Gemechis Gurmesa
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 6

<!

DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/6.5.1/css/all.min.css">
<link rel="stylesheet" href="n.css">

</head>
<body>
<div class="menu-bar">
<h1 class="logo">Kal <span>Grooming</span></h1>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li>
<a href="#">Pages <i class="fas fa-caret-down"></i> </a>
<div class="dropdown-menu">
<ul>
<li><a href="#">pricing</a></li>
<li><a href="#">portfolio</a></li>
<li>
<a href="#">Breeds <i class="fas fa-caret-down"></i></a>
<div class=" sub">
<ul>
<li><a href="#"> Retriever</a></li>
<li><a href="#">Husky</a></li>
<li><a href="#">Shepherd</a></li>
</ul>
</div>
</li>
<li><a href="#">contact</a></li>
</ul>

</div>
</li>
<li><a href="#gallary">Gallery </a></li>
<li><a href="#">FAQ </a></li>
</ul>
<div class="body">
<div class="box">
<form action="form"><br>
<label for="fname"></label><br>
<input type="text" placeholder="Your Name" required><br><br>
<label for="email"></label>
<input type="email" placeholder="Your Email" required><br><br>
<label for="pss"></label>
<input type="password" placeholder="password"required><br><br>
<label for="phone"></label>
<input type="number" placeholder="phone" min="0" required><br><br>
<button>Buy Now</button>
</form>
</div>
<div class="pet">
<h1 >Grooming & Pet <br> <span>Suplies</span></h1>
<p>From luxurious grooming products to stylish pet accessories, we
curate a selection of items that prioritize both functionality and fashion. Whether
you have a playful pup, a curious cat, or any other beloved pet, we have everything
you need to pamper them in style.

Discover our range of grooming essentials designed to keep your


pet's coat shiny, healthy, and free from tangles. Explore our collection of high-
quality shampoos, conditioners, brushes, and more, all formulated with the finest
ingredients to ensure your pet's comfort and well-being.</p><br>
</div>
</div>

<div class="our "> OUR <span> Grooming</span></div>


<div id="gallary">
<div class="im-container">
<div>
<img src="im/cat2.jpg" alt="">
<img src="im/01-domestic-cat-history_square.jpg" alt="">
<img src="im/puppy-love.jpg" alt="">
<img src="im/cat5.jpg" alt="">
</div>
<div class="image1">
<img src="im/cc1.jpg" alt="">
<img src="im/dds (2).jpg" alt="">
<img src="im/dog (2).jpg" alt="">
<img src="im/Dogs-Furry-Kids.webp" alt="">
</div>
</div>
</div>

</body>
</html>

* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: sans-serif;
}

body {
font-family: sans-serif;
background-image: url(im/web\ back\ 2d.jpg);
background-color: bisque;
background-repeat: no-repeat;
background-size:cover;
color: rgb(255, 255, 255);
height: 500px;

.menu-bar {
background-color: rgba(139, 118, 74, 0.568);
height: 80px;
width: 100%;
padding: 0.5%;

.logo {
color: white;
font-size: 30px;
position: absolute;
margin: 20px;
}

.logo span {
color: rgb(255, 174, 0);
}

.menu-bar ul {
list-style: none;
margin-top: 20px;
}
.menu-bar ul li {
padding: 20px;
position: relative;
display: inline;
left: 50%;

}
.menu-bar ul li a {
text-decoration: none;
color: white;
font-size: 20px;
padding: 20px ;
}

.menu-bar ul li a:hover {
color: rgb(233, 199, 9);

.dropdown-menu {
display: none;
position: absolute;
top: 100%;
left: 0;
background-color: rgba(85, 82, 78, 0.562);

}
.menu-bar ul li:hover .dropdown-menu {
display: block;

.dropdown-menu ul li {

padding: 10px;
}

.sub {
display: none;
position: absolute;
top: 0;
left: 100%;
background-color: rgba(85, 77, 68, 0.562);
}

.dropdown-menu ul li:hover .sub {


display: block;

.sub ul {
list-style: none;
}
img{
max-width: 400px;
height: auto;
box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.164);
transition:1s ;
}
img:hover {
transform:scale(1.1);
z-index : 2;
}
#gallary{
display: flex;
gap: 10px;
position: absolute;
left: 10%;
margin-top: -600px;
overflow: hidden;
}

#gallary img{
width: 3000px;
height: 250px;
padding: 10px;

}
.im-container img{
border-radius: 20px;
}
.our{
color: rgb(61, 61, 71);
font-weight: 900;
font-size: 40px;
font-family: sans-serif;
margin-top: 30%;
text-align: center;
}
.our span{
font-weight: 100;

p{
text-align: center;
}
.our p{
margin-top: -70;
}
.body{
align-items: center;
margin-top: 20%;
display: flex;
}
input{
width: 300px;
padding: 10px;
border-radius: 10px;
background: transparent;
color: white;
backdrop-filter: BLUR(10px);
}
button{
width: 220px;
padding: 10px;
border-radius: 10px;
margin-left: 40px;
background-color: rgb(212, 201, 103);
color: white;
}
button:hover{
background-color: rgb(56, 72, 216);
}

.box{
padding: 200px;
margin-top: -250px;

}
.pet h1{
margin-top: -200px;
text-align: center;
}
.pet span{
color: rgb(251, 255, 15);
}
::placeholder{
color: white;
}

You might also like