-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
190 lines (167 loc) · 7.48 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
<!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">
<link href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.2.1/css/fontawesome.min.css"
rel="stylesheet">
<link rel="stylesheet" href="petscss/styles.css">
<title>Pet Store</title>
</head>
<body>
<section id="header">
<nav>
<a href="index.html"><img src="media/logo1.png"></a>
<div class="nav-links" id="navLinks">
<ion-icon name="close-outline" onclick="hideMenu()"></ion-icon>
<ul>
<li><a href="index.html">HOME</a></li>
<li><a href="#footer">ABOUT US</a></li>
<li><a href="#services">SERVICES</a></li>
<li><a href="#testimonials">TESTIMONIALS</a></li>
<li><a href="#cta">CONTACT</a></li>
</ul>
</div>
<ion-icon name="grid-outline" onclick="showMenu()"></ion-icon>
</nav>
<div class="text-box">
<h1>JOHNSON'S PET STORE</h1>
<p>"For pets and their people!" is the company motto at Paws and Tails. The ideal company to contact for
your pet's grooming and other needs is Paws and Tails. We are familiar with your pets and know what is
best for them. We also recognize the feelings associated with each fur baby that enters our care and
work to provide them with nothing less than the finest. Visit us today and let your pets experience the
best care that can be provided to them. Choose from a wide variety of services and return home with a
fur baby smiling the widest smile.</p>
<a href="login.html" class="hbtn">Get Started</a>
</div>
</section>
<!--Services-->
<section id="services">
<h1>Services We Offer</h1>
<p>Accessibility so easy even your dog can use it.</p>
<div class="row">
<div class="serv-col">
<h3>Pet Boarding</h3>
<p>Our pet boarding facility welcomes your pet in safety and comfort while you're away.
</p>
</div>
<div class="serv-col">
<h3>Day Care</h3>
<p>Our pet daycare cancels out boredom and relieves separation anxiety.
</p>
</div>
<div class="serv-col">
<h3>Pet's Day Out</h3>
<p>Join us for a Pets' Day Out (PDO)! Say hello to the adorable animals looking for fur-ever homes at
the adoption drive.
</p>
</div>
</div>
<div class="row">
<div class="serv-col">
<h3>Pet Pool Sessions</h3>
<p>Dogs generally love rivers, lakes, the sea and swimming pools for the same reasons we do, give them a
chnace to witness it for themselves.
</p>
</div>
<div class="serv-col">
<h3>Pet Grooming</h3>
<p>Pet grooming involves shaving, clipping, or trimming the coat when necessary. Depending on the breed
we assign special groomers.
</p>
</div>
<div class="serv-col">
<h3>Pet Sitting</h3>
<p>Leave your fur babies under the care of professional and loving caretakers. Give them an experience
of lifetime.
</p>
</div>
</div>
</section>
<!--Features-->
<section id="facilities">
<h1>Our Features</h1>
<p>Animals love us, you'll love us too.</p>
<div class="row">
<div class="faci-col">
<img src="media/garden.webp" alt="pet-friendly">
<div class="layer">
<h3>Exceptionally Friendly Ambience</h3>
</div>
</div>
<div class="faci-col">
<img src="media/cat.jpg" alt="cost">
<div class="layer">
<h3>Cost Effective and Flexible Timings</h3>
</div>
</div>
<div class="faci-col">
<img src="media/cnd.jpg" alt="customer">
<div class="layer">
<h3>Customer Satisfaction and Elite Professionals</h3>
</div>
</div>
</div>
</section>
<!--Testimonials-->
<section id="testimonials">
<h1>See what our clients say</h1>
<p>Reviews so good, you'll have no doubts</p>
<div class="row">
<div class="test-col">
<img src="media/per1.jpg" alt="pet-friendly">
<div>
<p>This is the best pet shop around. Good knowledgeable proprietors and great products. If they
don't have what you're looking for, ask and they may be able to get it. If your pet has special
dietary needs, Jen can and will help.</p>
<h3>Rohit Johnson</h3>
</div>
</div>
<div class="test-col">
<img src="media/per2.jpg" alt="cost">
<div>
<p>Friendly staff, huge variety of food treats and toys. Also you can meet Peaches the bird wo may
even talk to you. Everyone should check it out!</p>
<h3>Kimberly Ammermann</h3>
</div>
</div>
</div>
</section>
<!--Cta-->
<section id="cta">
<h1>Avail Our Various Services<br>From Your Abode's Comfort</h1>
<br>
<a href="serform.html" class="hbtn">Contact Us</a>
</section>
<!--Footer-->
<section id="footer">
<h4>About Us</h4>
<p>The Johnson's Pet Store is your one-stop online pet supply store, where you can find high-quality
pet supplies, which helps your pet at every life-stage. We will help you choose the most appropriate
dog food, supplements, treats, toys, dog accessories. Not only that but also for cats, rabbits, hamsters,
turtles, birds & aquatic animals. At Johnson's we believe in a safe and happy world where pets get their
way every day. This means enabling your pet to live life to its fullest.</p>
<div class="icons">
<ion-icon name="logo-facebook"></ion-icon>
<ion-icon name="logo-twitter"></ion-icon>
<ion-icon name="logo-instagram"></ion-icon>
<ion-icon name="logo-whatsapp"></ion-icon>
</div>
<p>Made with <ion-icon name="heart-outline"></ion-icon> by Ritika Bhardwaj</p>
</section>
<!--Icons-->
<script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
<!--JavaScript-->
<script>
var navLinks = document.getElementById("navLinks");
function showMenu() {
navLinks.style.right = "0";
}
function hideMenu() {
navLinks.style.right = "-200px";
}
</script>
</body>
</html>