-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
167 lines (154 loc) · 7.49 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
<!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">
<title>Arlo's Doggy Daycare</title>
<!--Bootstrap-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<!--Font Awesome-->
<script src="https://kit.fontawesome.com/354a8e8d80.js" crossorigin="anonymous"></script>
<!--Google Fonts-->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300&family=Ubuntu:ital@1&family=Varela+Round&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
<!--styleSheet-->
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header id="Home">
<nav>
<span class="logo">Arlo's Doggy Daycare</span>
<button class="hamburger" id="hamburger">
<i class="fas fa-bars"></i>
</button>
<ul class="nav-ul">
<li class="nav-item"><a href="#Home" class="nav-link"><i class="fa-solid fa-house-chimney"></i> Home</a></li>
<li class="nav-item"><a href="#About" class="nav-link"><i class="fa-solid fa-paw"></i> About</a></li>
<li class="nav-item"><a href="#Services" class="nav-link"><i class="fa-solid fa-dog"></i> Services</a></li>
<li class="nav-item"><a href="#Contact" class="nav-link"><i class="fa-solid fa-address-card"></i> Contact</a></li>
</ul>
</nav>
<main class="main mainHide">
<h1>Welcome to,<br> Arlo's Doggy Daycare </h1>
<p>Where we take care of your pet like family!</p>
</main>
</header>
<div class="firstContainer">
<section id="About">
<h2>About Us</h2>
<p>Here at Arlo's Doggy Daycare we treat your fur child like a new additon to the family! No Kennels! Your pup will have their own private suite.</p>
<p>We go out for 2-3 long walks per day. Play fetch and give lots of belly rubs. We even send you daily photos and videos of your fur-babies exploring on hikes and making new friends!</p>
<button class="btn">Book Now</button>
</section>
<section class="about-us-img-sec">
<img src="about-us.jpg" class="aboutUsImg">
</section>
</div>
<div class="secondConatiner">
<section class="playTime">
<h2>Play Time</h2>
<p>Fun times playing and walking with new fur friends</p>
</section>
<section class="playTime-images-grid">
<section><img src="playtime2.jpg" class="picspPlayTime"></section>
<section><img src="playtime3.jpg" class="picspPlayTime"></section>
<section><img src="playtime7.jpg" class="picspPlayTime"></section>
</section>
</div>
<!-- SERVICES SECTION-->
<div class="thirdContainer">
<section id="Services">
<h2>Services</h2>
<p>Rates for dog boarding and daycare are all-inclusive of a full day of activities including leash-free play and nature walks. When it comes time to rest, each dog has their own private suite. </p>
</section>
<!-- DAYCARE SECTION-->
<section class="daycare-sec">
<img src="igloo2.png" class="daycare-image">
<section class="daycare-paragraph">
<i class="fa-solid fa-dog doggy"></i>
<h2>DAYCARE</h2>
<p>
Your dog will love playing all day with furry friends! Lorem ipsum is filler text to take up space dolor sit amet, consectetur adipisicing elit. Dignissimos obis consectetur adipisicing elit. provident assumenda blanditiis! Sit cupiditate error similique.
</p>
<a href="#" class="btn">LEARN MORE</a>
</section>
</section>
<div class="clearfix"></div>
<!--BOARDING SECTION-->
<section class="boarding-sec">
<img src="playtime4.jpg" class="boarding-image">
<section class="boarding-paragraph">
<i class="fa-solid fa-bed"></i>
<h2>
BOARDING
</h2>
<p>
The perfect home away from home for your dog when they need a sleepover. Lorem ipsum is filler text to take up space dolor sit amet, consectetur adipisicing elit. Dignissimos obis provident assumenda blanditiis! Sit cupiditate error similique.
</p>
<a href="#" class="btn">LEARN MORE</a>
</section>
</section>
<div class="clearfix"></div>
</div>
<section class="client-reviews">
<h3>Pup Reviews</h3>
<section class="clients">
<section class="clients-container">
<img src="jasper.jpeg" alt="client photo of Jasper" class="client-photo">
<p class="review">
Jasper had an amazing time at Arlo's Doggy Daycare, he was very happy and excited to play with the other dogs and got lots of belly rubs.
</p>
<span> ~ Jasper</span>
</section>
<section class="clients-container">
<img src="boomer.webp" alt="client photo of Boomer" class="client-photo"/>
<p class="review">
I received a lot of updates and pictures of Boomer while he was at Arlo's Doggy Daycare. I felt secured and relieved to know that Boomer was in great hands.</p>
<span> ~ Boomer</span>
</section>
<section class="clients-container">
<img src="kimik.jpeg" alt="client photo of Kimik" class="client-photo"/>
<p class="review">
Arlo's Doggy Daycare took great care of my dog Kimik. I received a lot of updates and pictures throughout the boarding services.
</p>
<span> ~ Kimik</span>
</section>
</section>
</section>
<div class="fourthContainer" id="Contact">
<form action="/" class="decor">
<div class="form-left-decoration"></div>
<div class="form-right-decoration"></div>
<div class="circle"></div>
<div class="form-inner">
<h1>Contact Us</h1>
<input type="text" placeholder="Name">
<input type="email" placeholder="Email">
<textarea placeholder="Message..." rows="5"></textarea>
<button class="submit-btn" type="submit" href="/">Submit</button>
</div>
</form>
</div>
<footer>
<p class="footer-logo">Arlo's Doggy Daycare</p>
<address>
LOCATION:<br>
514 Alrington Avenue<br>
Doggywood, CA<br>
+555 125-9874
</address>
<section class="socials">
<img src="icon-facebook.svg" />
<img src="icon-instagram.svg" />
<img src="icon-twitter.svg" />
</section>
</footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<script src="script.js"></script>
</body>
</html>