├── assets ├── about-1.jpg ├── about-2.jpg ├── about-3.jpg ├── header.png ├── intro-1.png ├── intro-2.png ├── intro-3.png ├── client-1.jpg ├── client-2.jpg ├── client-3.jpg ├── client-4.jpg ├── client-5.jpg ├── header-bg.png ├── intro-1-bg.png ├── intro-2-bg.png ├── intro-3-bg.png ├── product-1.jpg ├── product-2.jpg ├── product-3.jpg ├── service-1.png ├── service-2.png ├── service-3.png ├── service-4.png ├── service-5.png ├── about-1-icon.png ├── about-2-icon.png ├── about-3-icon.png ├── instagram-1.jpg ├── instagram-2.jpg ├── instagram-3.jpg └── instagram-4.jpg ├── README.md ├── main.js ├── index.html └── styles.css /assets/about-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDesignMastery/Pet_Place_26-10-24/HEAD/assets/about-1.jpg -------------------------------------------------------------------------------- /assets/about-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDesignMastery/Pet_Place_26-10-24/HEAD/assets/about-2.jpg -------------------------------------------------------------------------------- /assets/about-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDesignMastery/Pet_Place_26-10-24/HEAD/assets/about-3.jpg -------------------------------------------------------------------------------- /assets/header.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDesignMastery/Pet_Place_26-10-24/HEAD/assets/header.png -------------------------------------------------------------------------------- /assets/intro-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDesignMastery/Pet_Place_26-10-24/HEAD/assets/intro-1.png -------------------------------------------------------------------------------- /assets/intro-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDesignMastery/Pet_Place_26-10-24/HEAD/assets/intro-2.png -------------------------------------------------------------------------------- /assets/intro-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDesignMastery/Pet_Place_26-10-24/HEAD/assets/intro-3.png -------------------------------------------------------------------------------- /assets/client-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDesignMastery/Pet_Place_26-10-24/HEAD/assets/client-1.jpg -------------------------------------------------------------------------------- /assets/client-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDesignMastery/Pet_Place_26-10-24/HEAD/assets/client-2.jpg -------------------------------------------------------------------------------- /assets/client-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDesignMastery/Pet_Place_26-10-24/HEAD/assets/client-3.jpg -------------------------------------------------------------------------------- /assets/client-4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDesignMastery/Pet_Place_26-10-24/HEAD/assets/client-4.jpg -------------------------------------------------------------------------------- /assets/client-5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDesignMastery/Pet_Place_26-10-24/HEAD/assets/client-5.jpg -------------------------------------------------------------------------------- /assets/header-bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDesignMastery/Pet_Place_26-10-24/HEAD/assets/header-bg.png -------------------------------------------------------------------------------- /assets/intro-1-bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDesignMastery/Pet_Place_26-10-24/HEAD/assets/intro-1-bg.png -------------------------------------------------------------------------------- /assets/intro-2-bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDesignMastery/Pet_Place_26-10-24/HEAD/assets/intro-2-bg.png -------------------------------------------------------------------------------- /assets/intro-3-bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDesignMastery/Pet_Place_26-10-24/HEAD/assets/intro-3-bg.png -------------------------------------------------------------------------------- /assets/product-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDesignMastery/Pet_Place_26-10-24/HEAD/assets/product-1.jpg -------------------------------------------------------------------------------- /assets/product-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDesignMastery/Pet_Place_26-10-24/HEAD/assets/product-2.jpg -------------------------------------------------------------------------------- /assets/product-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDesignMastery/Pet_Place_26-10-24/HEAD/assets/product-3.jpg -------------------------------------------------------------------------------- /assets/service-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDesignMastery/Pet_Place_26-10-24/HEAD/assets/service-1.png -------------------------------------------------------------------------------- /assets/service-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDesignMastery/Pet_Place_26-10-24/HEAD/assets/service-2.png -------------------------------------------------------------------------------- /assets/service-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDesignMastery/Pet_Place_26-10-24/HEAD/assets/service-3.png -------------------------------------------------------------------------------- /assets/service-4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDesignMastery/Pet_Place_26-10-24/HEAD/assets/service-4.png -------------------------------------------------------------------------------- /assets/service-5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDesignMastery/Pet_Place_26-10-24/HEAD/assets/service-5.png -------------------------------------------------------------------------------- /assets/about-1-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDesignMastery/Pet_Place_26-10-24/HEAD/assets/about-1-icon.png -------------------------------------------------------------------------------- /assets/about-2-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDesignMastery/Pet_Place_26-10-24/HEAD/assets/about-2-icon.png -------------------------------------------------------------------------------- /assets/about-3-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDesignMastery/Pet_Place_26-10-24/HEAD/assets/about-3-icon.png -------------------------------------------------------------------------------- /assets/instagram-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDesignMastery/Pet_Place_26-10-24/HEAD/assets/instagram-1.jpg -------------------------------------------------------------------------------- /assets/instagram-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDesignMastery/Pet_Place_26-10-24/HEAD/assets/instagram-2.jpg -------------------------------------------------------------------------------- /assets/instagram-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDesignMastery/Pet_Place_26-10-24/HEAD/assets/instagram-3.jpg -------------------------------------------------------------------------------- /assets/instagram-4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDesignMastery/Pet_Place_26-10-24/HEAD/assets/instagram-4.jpg -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Pet_Place_26-10-24 2 | Learn how to build a fully responsive pet store website from scratch using HTML, CSS, and JavaScript! 3 | -------------------------------------------------------------------------------- /main.js: -------------------------------------------------------------------------------- 1 | const menuBtn = document.getElementById("menu-btn"); 2 | const navLinks = document.getElementById("nav-links"); 3 | const menuBtnIcon = menuBtn.querySelector("i"); 4 | 5 | menuBtn.addEventListener("click", (e) => { 6 | navLinks.classList.toggle("open"); 7 | 8 | const isOpen = navLinks.classList.contains("open"); 9 | menuBtnIcon.setAttribute("class", isOpen ? "ri-close-line" : "ri-menu-line"); 10 | }); 11 | 12 | navLinks.addEventListener("click", (e) => { 13 | navLinks.classList.remove("open"); 14 | menuBtnIcon.setAttribute("class", "ri-menu-line"); 15 | }); 16 | 17 | const scrollRevealOption = { 18 | distance: "50px", 19 | origin: "bottom", 20 | duration: 1000, 21 | }; 22 | 23 | ScrollReveal().reveal(".header__content h4", { 24 | ...scrollRevealOption, 25 | }); 26 | ScrollReveal().reveal(".header__content h1", { 27 | ...scrollRevealOption, 28 | delay: 500, 29 | }); 30 | ScrollReveal().reveal(".header__content h2", { 31 | ...scrollRevealOption, 32 | delay: 1000, 33 | }); 34 | ScrollReveal().reveal(".header__content p", { 35 | ...scrollRevealOption, 36 | delay: 1500, 37 | }); 38 | ScrollReveal().reveal(".header__btn", { 39 | ...scrollRevealOption, 40 | delay: 2000, 41 | }); 42 | 43 | ScrollReveal().reveal(".intro__card", { 44 | ...scrollRevealOption, 45 | interval: 500, 46 | }); 47 | 48 | ScrollReveal().reveal( 49 | ".about__row:nth-child(3) .about__image img, .about__row:nth-child(5) .about__image img", 50 | { 51 | ...scrollRevealOption, 52 | origin: "left", 53 | } 54 | ); 55 | ScrollReveal().reveal(".about__row:nth-child(4) .about__image img", { 56 | ...scrollRevealOption, 57 | origin: "right", 58 | }); 59 | ScrollReveal().reveal(".about__content span", { 60 | ...scrollRevealOption, 61 | delay: 500, 62 | }); 63 | ScrollReveal().reveal(".about__content h4", { 64 | ...scrollRevealOption, 65 | delay: 1000, 66 | }); 67 | ScrollReveal().reveal(".about__content p", { 68 | ...scrollRevealOption, 69 | delay: 1500, 70 | }); 71 | 72 | ScrollReveal().reveal(".product__card", { 73 | ...scrollRevealOption, 74 | interval: 500, 75 | }); 76 | 77 | ScrollReveal().reveal(".service__card", { 78 | duration: 1000, 79 | interval: 500, 80 | }); 81 | 82 | const swiper = new Swiper(".swiper", { 83 | slidesPerView: 3, 84 | spaceBetween: 20, 85 | loop: true, 86 | }); 87 | 88 | ScrollReveal().reveal(".instagram__grid img", { 89 | duration: 1000, 90 | interval: 500, 91 | }); 92 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 10 | 14 | 15 | Web Design Mastery | Pet Place 16 | 17 | 18 | 35 |
36 |
37 |
38 |

Welcome

39 |

Pet
Doctor

40 |

We love pets like you do :)

41 |

42 | From routine check-ups to specialized treatments, we're here to 43 | ensure your pets lead happy, healthy lives. 44 |

45 |
46 | 50 |
51 |
52 |
53 | header-bg 58 | header 59 |
60 |
61 |
62 |
63 | 64 |
65 |

Intro

66 |

Get to know us more

67 |
68 |
69 |
70 | intro 71 |
72 |

Pet Experts

73 |

74 | Meet our team of skilled veterinarians, dedicated to your pet's 75 | well-being. 76 |

77 | Read More 78 |
79 |
80 |
81 | intro 82 |
83 |

Vet Services

84 |

85 | Offering a wide range of veterinary services to keep your pets 86 | healthy and happy. 87 |

88 | Read More 89 |
90 |
91 |
92 | intro 93 |
94 |

Contact Us

95 |

96 | Reach out to us for any inquiries or schedule an appointment for 97 | your pet's care. 98 |

99 | Read More 100 |
101 |
102 |
103 | 104 |
105 |

About Us

106 |

What we can do for you

107 |
108 |
109 | about 110 |
111 |
112 | about-icon 113 |

Let us help you with your pet health

114 |

115 | Our expert veterinarians are here to provide comprehensive care and 116 | guidance to ensure your pet stays in perfect health. 117 |

118 |
119 |
120 |
121 |
122 | about 123 |
124 |
125 | about-icon 126 |

Caring personal will take care of your pet

127 |

128 | Your pet will be in good hands with our compassionate and 129 | well-trained staff, who treat every pet like family. 130 |

131 |
132 |
133 |
134 |
135 | about 136 |
137 |
138 | about-icon 139 |

Let us groom your precious and loved pet

140 |

141 | From bathing to styling, we offer professional grooming services to 142 | keep your pet looking and feeling their best. 143 |

144 |
145 |
146 |
147 | 148 |
149 |
150 |

Products

151 |

Featured pet products

152 |
153 |
154 | product 155 |

Dog Trash Bag

156 |

157 | Convenient and eco-friendly trash bags for easy pet waste 158 | disposal. 159 |

160 |

$29.00 USD

161 |
162 |
163 | product 164 |

Pet Accessories

165 |

166 | Explore our range of stylish and functional accessories for your 167 | furry friends. 168 |

169 |

$49.00 USD

170 |
171 |
172 | product 173 |

Dog Food

174 |

175 | Nutritious and delicious dog food to keep your pet healthy and 176 | happy. 177 |

178 |

$79.00 USD

179 |
180 |
181 |
182 |
183 | 184 |
185 |

Services

186 |

What we can do for you

187 |
188 |
189 |
190 | service 191 |
192 |

Emergency Care

193 |
194 |
195 |
196 | service 197 |
198 |

Vaccination Services

199 |
200 |
201 |
202 | service 203 |
204 |

Nutrition Counseling

205 |
206 |
207 |
208 | service 209 |
210 |

Behavioral Consultation

211 |
212 |
213 |
214 | service 215 |
216 |

Pet Boarding Services

217 |
218 |
219 |
220 | 221 |
222 |
223 |

Testimonials

224 |

What people say about us

225 | 226 |
227 | 228 |
229 | 230 |
231 |
232 |
233 | client 234 |
235 |

Sarah Johnson

236 |
Graphic Designer
237 |
238 |
239 |

240 | The care my dog received at Pet Doctor was exceptional. The 241 | vets were attentive cared about my dog's well-being. 242 |

243 |
244 |
245 |
246 |
247 |
248 | client 249 |
250 |

Michael Adams

251 |
Software Engineer
252 |
253 |
254 |

255 | Pet Doctor saved my cat during an emergency! Their quick 256 | response and expertise made all the difference. 257 |

258 |
259 |
260 |
261 |
262 |
263 | client 264 |
265 |

Emily Martinez

266 |
Teacher
267 |
268 |
269 |

270 | I trust Pet Doctor with all my pets. Their team is 271 | professional, and they always go the extra mile for their 272 | patients. 273 |

274 |
275 |
276 |
277 |
278 |
279 | client 280 |
281 |

Jason Lee

282 |
Marketing Specialist
283 |
284 |
285 |

286 | The grooming services at Pet Doctor are fantastic! My pup 287 | always comes back looking fresh and happy. 288 |

289 |
290 |
291 |
292 |
293 |
294 | client 295 |
296 |

David Thompson

297 |
Accountant
298 |
299 |
300 |

301 | I've never seen a team so dedicated to animals. Pet Doctor is 302 | my go-to clinic for all pet-related issues. 303 |

304 |
305 |
306 |
307 |
308 |
309 |
310 | 311 |
312 |

FOLLOW

313 |

Instagram

314 |
315 | instagram 316 | instagram 317 | instagram 318 | instagram 319 |
320 |
321 | 322 | 392 | 393 | 394 | 395 | 396 | 397 | 398 | -------------------------------------------------------------------------------- /styles.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"); 2 | 3 | :root { 4 | --primary-color: #dcd7f8; 5 | --text-dark: #3f3b57; 6 | --text-light: #908ca3; 7 | --white: #ffffff; 8 | --max-width: 1200px; 9 | } 10 | 11 | * { 12 | padding: 0; 13 | margin: 0; 14 | box-sizing: border-box; 15 | } 16 | 17 | .section__container { 18 | max-width: var(--max-width); 19 | padding: 5rem 1rem; 20 | margin: auto; 21 | } 22 | 23 | .section__subheader { 24 | font-size: 1.2rem; 25 | font-weight: 500; 26 | color: var(--text-light); 27 | text-align: center; 28 | } 29 | 30 | .section__header { 31 | font-size: 2.5rem; 32 | font-weight: 500; 33 | color: var(--text-dark); 34 | text-align: center; 35 | line-height: 3.5rem; 36 | } 37 | 38 | img { 39 | display: flex; 40 | width: 100%; 41 | } 42 | 43 | a { 44 | text-decoration: none; 45 | transition: 0.3s; 46 | } 47 | 48 | ul { 49 | list-style: none; 50 | } 51 | 52 | html, 53 | body { 54 | scroll-behavior: smooth; 55 | } 56 | 57 | body { 58 | font-family: "Poppins", sans-serif; 59 | } 60 | 61 | nav { 62 | position: fixed; 63 | isolation: isolate; 64 | width: 100%; 65 | z-index: 9; 66 | } 67 | 68 | .nav__header { 69 | padding: 1rem; 70 | width: 100%; 71 | display: flex; 72 | align-items: center; 73 | justify-content: space-between; 74 | background-color: var(--white); 75 | } 76 | 77 | .nav__logo a { 78 | font-size: 1.2rem; 79 | font-weight: 700; 80 | color: var(--text-dark); 81 | } 82 | 83 | .nav__menu__btn { 84 | font-size: 1.5rem; 85 | color: var(--text-dark); 86 | cursor: pointer; 87 | } 88 | 89 | .nav__links { 90 | position: absolute; 91 | bottom: 0; 92 | left: 0; 93 | width: 100%; 94 | padding: 2rem; 95 | display: flex; 96 | align-items: center; 97 | justify-content: center; 98 | flex-direction: column; 99 | gap: 2rem; 100 | background-color: var(--white); 101 | transition: transform 0.5s; 102 | z-index: -1; 103 | } 104 | 105 | .nav__links.open { 106 | transform: translateY(100%); 107 | } 108 | 109 | .nav__links a { 110 | font-weight: 500; 111 | color: var(--text-dark); 112 | } 113 | 114 | .nav__links a:hover { 115 | color: var(--primary-color); 116 | } 117 | 118 | header { 119 | padding-top: 5rem; 120 | position: relative; 121 | isolation: isolate; 122 | background-color: var(--primary-color); 123 | } 124 | 125 | .header__bottom { 126 | position: absolute; 127 | bottom: 0; 128 | left: 0; 129 | width: 100%; 130 | height: 3rem; 131 | background-color: var(--white); 132 | z-index: -1; 133 | } 134 | 135 | .header__container { 136 | padding-block: 2rem 0; 137 | display: grid; 138 | gap: 2rem; 139 | } 140 | 141 | .header__content h4 { 142 | max-width: fit-content; 143 | margin-inline: auto; 144 | margin-bottom: 1rem; 145 | padding: 5px 15px; 146 | font-size: 1rem; 147 | font-weight: 600; 148 | color: var(--text-dark); 149 | background-color: rgba(0, 0, 0, 0.1); 150 | border-radius: 5rem; 151 | } 152 | 153 | .header__content h1 { 154 | margin-bottom: 1rem; 155 | font-size: 3.5rem; 156 | font-weight: 700; 157 | line-height: 4.5rem; 158 | color: var(--text-dark); 159 | text-align: center; 160 | } 161 | 162 | .header__content h1 span { 163 | font-size: 5rem; 164 | } 165 | 166 | .header__content h2 { 167 | margin-bottom: 1rem; 168 | font-size: 1.2rem; 169 | font-weight: 600; 170 | color: var(--text-dark); 171 | text-align: center; 172 | } 173 | 174 | .header__content p { 175 | margin-bottom: 2rem; 176 | color: var(--text-light); 177 | text-align: center; 178 | } 179 | 180 | .header__btn button { 181 | padding-block: 0.5rem; 182 | padding-inline: 1.5rem 0.5rem; 183 | margin-inline: auto; 184 | outline: none; 185 | border: none; 186 | display: flex; 187 | align-items: center; 188 | gap: 10px; 189 | font-size: 1rem; 190 | color: var(--text-dark); 191 | background-color: rgba(0, 0, 0, 0.1); 192 | border-radius: 5rem; 193 | transition: 0.3s; 194 | cursor: pointer; 195 | } 196 | 197 | .header__btn button span { 198 | padding: 5px 7px; 199 | font-size: 1.5rem; 200 | background-color: rgba(0, 0, 0, 0.1); 201 | border-radius: 100%; 202 | } 203 | 204 | .header__btn button:hover { 205 | color: var(--white); 206 | background-color: rgba(0, 0, 0, 0.4); 207 | } 208 | 209 | .header__btn button:hover span { 210 | background-color: rgba(0, 0, 0, 0.4); 211 | } 212 | 213 | .header__image { 214 | position: relative; 215 | isolation: isolate; 216 | } 217 | 218 | .header__image img { 219 | max-width: 400px; 220 | margin-inline: auto; 221 | } 222 | 223 | img.header__image-bg { 224 | position: absolute; 225 | top: 50%; 226 | left: 0; 227 | transform: translateY(-50%); 228 | max-width: 300px !important; 229 | z-index: -1; 230 | } 231 | 232 | .intro__grid { 233 | margin-top: 4rem; 234 | display: grid; 235 | gap: 2rem; 236 | } 237 | 238 | .intro__card { 239 | text-align: center; 240 | } 241 | 242 | .intro__card div { 243 | max-width: fit-content; 244 | margin-inline: auto; 245 | margin-bottom: 1rem; 246 | padding: 2rem; 247 | background-position: center center; 248 | background-repeat: no-repeat; 249 | background-size: contain; 250 | } 251 | 252 | .intro__card:nth-child(1) div { 253 | background-image: url("assets/intro-1-bg.png"); 254 | } 255 | 256 | .intro__card:nth-child(2) div { 257 | background-image: url("assets/intro-2-bg.png"); 258 | } 259 | 260 | .intro__card:nth-child(3) div { 261 | background-image: url("assets/intro-3-bg.png"); 262 | } 263 | 264 | .intro__card div img { 265 | width: unset; 266 | height: 75px; 267 | } 268 | 269 | .intro__card h4 { 270 | margin-bottom: 0.5rem; 271 | font-size: 1.2rem; 272 | font-weight: 600; 273 | color: var(--text-dark); 274 | } 275 | 276 | .intro__card p { 277 | margin-bottom: 2rem; 278 | color: var(--text-light); 279 | } 280 | 281 | .intro__card a { 282 | display: inline-block; 283 | padding: 0.5rem 2rem; 284 | border: 2px solid; 285 | border-radius: 5rem; 286 | transition: 0.3s; 287 | } 288 | 289 | .intro__card:nth-child(1) a { 290 | color: #ffc737; 291 | border-color: #ffc737; 292 | } 293 | 294 | .intro__card:nth-child(1) a:hover { 295 | color: var(--white); 296 | background-color: #ffc737; 297 | } 298 | 299 | .intro__card:nth-child(2) a { 300 | color: #257ae7; 301 | border-color: #257ae7; 302 | } 303 | 304 | .intro__card:nth-child(2) a:hover { 305 | color: var(--white); 306 | background-color: #257ae7; 307 | } 308 | 309 | .intro__card:nth-child(3) a { 310 | color: #cba9b6; 311 | border-color: #cba9b6; 312 | } 313 | 314 | .intro__card:nth-child(3) a:hover { 315 | color: var(--white); 316 | background-color: #cba9b6; 317 | } 318 | 319 | .about__row { 320 | margin-top: 2rem; 321 | display: flex; 322 | gap: 2rem; 323 | flex-direction: column; 324 | overflow: hidden; 325 | } 326 | 327 | .about__row:nth-child(3) { 328 | margin-top: 4rem; 329 | } 330 | 331 | .about__image { 332 | flex: 1; 333 | max-width: 400px; 334 | margin-inline: auto; 335 | } 336 | 337 | .about__content { 338 | flex: 1; 339 | text-align: center; 340 | } 341 | 342 | .about__content span { 343 | margin-inline: auto; 344 | margin-bottom: 1rem; 345 | width: 80px; 346 | aspect-ratio: 1; 347 | display: flex; 348 | align-items: center; 349 | justify-content: center; 350 | border-radius: 100%; 351 | } 352 | 353 | .about__content span img { 354 | max-width: 40px; 355 | } 356 | 357 | .about__row:nth-child(3) .about__content span { 358 | background-color: #fdf2d9; 359 | } 360 | 361 | .about__row:nth-child(4) .about__content span { 362 | background-color: #e8f7fe; 363 | } 364 | 365 | .about__row:nth-child(5) .about__content span { 366 | background-color: #fbebf1; 367 | } 368 | 369 | .about__content h4 { 370 | max-width: 450px; 371 | margin-inline: auto; 372 | margin-bottom: 1rem; 373 | font-size: 2rem; 374 | font-weight: 500; 375 | color: var(--text-dark); 376 | line-height: 3rem; 377 | } 378 | 379 | .about__content p { 380 | max-width: 450px; 381 | margin-inline: auto; 382 | color: var(--text-light); 383 | } 384 | 385 | .product { 386 | position: relative; 387 | isolation: isolate; 388 | } 389 | 390 | .product::before { 391 | position: absolute; 392 | content: ""; 393 | top: 0; 394 | left: 0; 395 | width: 100%; 396 | height: 65%; 397 | background-color: #fdf2d9; 398 | z-index: -1; 399 | } 400 | 401 | .product__grid { 402 | margin-top: 4rem; 403 | display: grid; 404 | gap: 2rem; 405 | } 406 | 407 | .product__card h4 { 408 | margin-block: 1rem 5px; 409 | font-size: 1.2rem; 410 | font-weight: 500; 411 | color: var(--text-dark); 412 | } 413 | 414 | .product__card p { 415 | margin-bottom: 1rem; 416 | color: var(--text-light); 417 | } 418 | 419 | .product__card h3 { 420 | font-size: 1.2rem; 421 | font-weight: 600; 422 | color: var(--text-dark); 423 | } 424 | 425 | .service__flex { 426 | margin-top: 4rem; 427 | display: flex; 428 | align-items: center; 429 | justify-content: space-around; 430 | gap: 2rem; 431 | flex-wrap: wrap; 432 | } 433 | 434 | .service__card div { 435 | margin-bottom: 2rem; 436 | margin-inline: auto; 437 | width: 120px; 438 | aspect-ratio: 1; 439 | display: flex; 440 | align-items: center; 441 | justify-content: center; 442 | background-color: #dff3fd; 443 | border-radius: 100%; 444 | } 445 | 446 | .service__card img { 447 | max-width: 45px; 448 | } 449 | 450 | .service__card p { 451 | font-weight: 500; 452 | color: var(--text-light); 453 | } 454 | 455 | .client { 456 | background-color: var(--primary-color); 457 | } 458 | 459 | .swiper { 460 | margin-top: 4rem; 461 | width: 100%; 462 | } 463 | 464 | .swiper-slide { 465 | min-width: 375px; 466 | } 467 | 468 | .client__card { 469 | padding: 1.5rem; 470 | background-color: var(--white); 471 | border-radius: 1rem; 472 | transition: 0.3s; 473 | } 474 | 475 | .client__details { 476 | margin-bottom: 1rem; 477 | display: flex; 478 | align-items: center; 479 | gap: 1rem; 480 | } 481 | 482 | .client__details img { 483 | max-width: 50px; 484 | border-radius: 100%; 485 | } 486 | 487 | .client__details h4 { 488 | font-size: 1.1rem; 489 | font-weight: 600; 490 | color: var(--text-dark); 491 | } 492 | 493 | .client__details h5 { 494 | font-weight: 500; 495 | color: var(--text-light); 496 | } 497 | 498 | .client__card p { 499 | color: var(--text-dark); 500 | } 501 | 502 | .instagram__container p { 503 | max-width: fit-content; 504 | margin-bottom: 1rem; 505 | padding: 6px 20px; 506 | font-size: 1rem; 507 | font-weight: 600; 508 | color: var(--text-dark); 509 | background-color: #e6e3fa; 510 | border-radius: 5rem; 511 | } 512 | 513 | .instagram__container .section__header { 514 | padding-bottom: 1rem; 515 | text-align: left; 516 | border-bottom: 1px solid var(--text-light); 517 | } 518 | 519 | .instagram__grid { 520 | margin-top: 2rem; 521 | display: grid; 522 | grid-template-columns: repeat(2, 1fr); 523 | } 524 | 525 | .footer__container { 526 | display: grid; 527 | gap: 4rem 2rem; 528 | } 529 | 530 | .footer__logo a { 531 | font-size: 1.75rem; 532 | font-weight: 700; 533 | color: var(--text-dark); 534 | } 535 | 536 | .footer__col h4 { 537 | margin-bottom: 1rem; 538 | font-size: 1.2rem; 539 | font-weight: 600; 540 | color: var(--text-dark); 541 | } 542 | 543 | .footer__links { 544 | display: grid; 545 | gap: 1rem; 546 | } 547 | 548 | .footer__links a { 549 | font-weight: 500; 550 | color: var(--text-dark); 551 | } 552 | 553 | .footer__links a:hover { 554 | color: var(--primary-color); 555 | } 556 | 557 | .footer__col p { 558 | margin-bottom: 1rem; 559 | color: var(--text-dark); 560 | } 561 | 562 | .footer__col form { 563 | width: 100%; 564 | display: flex; 565 | align-items: center; 566 | border: 2px solid var(--primary-color); 567 | border-radius: 5rem; 568 | } 569 | 570 | .footer__col form input { 571 | padding-inline: 0.5rem; 572 | width: 100%; 573 | outline: none; 574 | border: none; 575 | font-size: 1rem; 576 | color: var(--text-dark); 577 | background-color: transparent; 578 | } 579 | 580 | .footer__col form button { 581 | padding: 0.25rem 1.5rem; 582 | outline: none; 583 | border: none; 584 | color: var(--text-dark); 585 | font-size: 2rem; 586 | background-color: var(--primary-color); 587 | border-radius: 5rem; 588 | cursor: pointer; 589 | } 590 | 591 | .footer__socials { 592 | display: flex; 593 | align-items: center; 594 | flex-wrap: wrap; 595 | gap: 0.5rem; 596 | } 597 | 598 | .footer__socials a { 599 | display: inline-block; 600 | padding: 5px 8px; 601 | font-size: 1.125rem; 602 | color: var(--text-dark); 603 | background-color: var(--primary-color); 604 | border-radius: 100%; 605 | } 606 | 607 | .footer__bar { 608 | padding: 1rem; 609 | font-size: 0.9rem; 610 | color: var(--text-light); 611 | text-align: center; 612 | } 613 | 614 | @media (width > 540px) { 615 | .header__content h1 { 616 | font-size: 4.5rem; 617 | line-height: 5rem; 618 | } 619 | 620 | .header__content h1 span { 621 | font-size: 6rem; 622 | } 623 | 624 | .intro__grid { 625 | grid-template-columns: repeat(2, 1fr); 626 | } 627 | 628 | .product__grid { 629 | grid-template-columns: repeat(2, 1fr); 630 | } 631 | 632 | .instagram__grid { 633 | grid-template-columns: repeat(4, 1fr); 634 | } 635 | 636 | .footer__container { 637 | grid-template-columns: repeat(2, 1fr); 638 | } 639 | } 640 | 641 | @media (width > 768px) { 642 | nav { 643 | position: static; 644 | padding: 2rem 1rem; 645 | max-width: var(--max-width); 646 | margin-inline: auto; 647 | display: flex; 648 | align-items: center; 649 | justify-content: space-between; 650 | gap: 2rem; 651 | } 652 | 653 | .nav__header { 654 | padding: 0; 655 | background-color: transparent; 656 | } 657 | 658 | .nav__logo a { 659 | font-size: 1.5rem; 660 | } 661 | 662 | .nav__menu__btn { 663 | display: none; 664 | } 665 | 666 | .nav__links { 667 | position: static; 668 | padding: 0; 669 | flex-direction: row; 670 | justify-content: flex-end; 671 | background-color: transparent; 672 | transform: none; 673 | } 674 | 675 | header { 676 | padding-top: 0; 677 | } 678 | 679 | .header__container { 680 | grid-template-columns: repeat(2, 1fr); 681 | align-items: center; 682 | } 683 | 684 | .header__content { 685 | grid-area: 1/2/2/3; 686 | } 687 | 688 | .header__content :is(h4, .header__btn button) { 689 | margin-inline-start: unset; 690 | } 691 | 692 | .header__content :is(h1, h2) { 693 | text-align: left; 694 | } 695 | 696 | .header__content p { 697 | max-width: 400px; 698 | text-align: left; 699 | } 700 | 701 | .header__image img { 702 | max-width: 500px; 703 | } 704 | 705 | .intro__grid { 706 | grid-template-columns: repeat(3, 1fr); 707 | } 708 | 709 | .about__row { 710 | flex-direction: row; 711 | align-items: center; 712 | } 713 | 714 | .about__row:nth-child(4) { 715 | flex-direction: row-reverse; 716 | } 717 | 718 | .about__image { 719 | max-width: unset; 720 | margin-inline: auto; 721 | } 722 | 723 | .about__content { 724 | text-align: left; 725 | } 726 | 727 | .product__grid { 728 | grid-template-columns: repeat(3, 1fr); 729 | } 730 | 731 | .footer__container { 732 | grid-template-columns: repeat(4, 1fr); 733 | } 734 | } 735 | --------------------------------------------------------------------------------