├── README.md ├── assets ├── apple.png ├── banner-1.png ├── banner-10.png ├── banner-2.png ├── banner-3.png ├── banner-4.png ├── banner-5.png ├── banner-6.png ├── banner-7.png ├── banner-8.png ├── banner-9.png ├── download.png ├── google.png ├── header-bg.png ├── header.png ├── location.png ├── range-1.jpg ├── range-2.jpg ├── range-3.jpg ├── range-4.jpg ├── select-1.png ├── select-2.png ├── select-3.png ├── select-4.png ├── select-5.png ├── select-bg.png ├── story-1.jpg ├── story-2.jpg └── story-3.jpg ├── index.html ├── main.js └── styles.css /README.md: -------------------------------------------------------------------------------- 1 | # Rental_07-09-24 2 | In this step-by-step guide, you'll learn how to create a sleek, professional, and fully responsive car rental website from scratch. 3 | -------------------------------------------------------------------------------- /assets/apple.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDesignMastery/Rental_07-09-24/4a2c7e490e70ed128ac853be1f1e3b1b1d49b40e/assets/apple.png -------------------------------------------------------------------------------- /assets/banner-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDesignMastery/Rental_07-09-24/4a2c7e490e70ed128ac853be1f1e3b1b1d49b40e/assets/banner-1.png -------------------------------------------------------------------------------- /assets/banner-10.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDesignMastery/Rental_07-09-24/4a2c7e490e70ed128ac853be1f1e3b1b1d49b40e/assets/banner-10.png -------------------------------------------------------------------------------- /assets/banner-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDesignMastery/Rental_07-09-24/4a2c7e490e70ed128ac853be1f1e3b1b1d49b40e/assets/banner-2.png -------------------------------------------------------------------------------- /assets/banner-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDesignMastery/Rental_07-09-24/4a2c7e490e70ed128ac853be1f1e3b1b1d49b40e/assets/banner-3.png -------------------------------------------------------------------------------- /assets/banner-4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDesignMastery/Rental_07-09-24/4a2c7e490e70ed128ac853be1f1e3b1b1d49b40e/assets/banner-4.png -------------------------------------------------------------------------------- /assets/banner-5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDesignMastery/Rental_07-09-24/4a2c7e490e70ed128ac853be1f1e3b1b1d49b40e/assets/banner-5.png -------------------------------------------------------------------------------- /assets/banner-6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDesignMastery/Rental_07-09-24/4a2c7e490e70ed128ac853be1f1e3b1b1d49b40e/assets/banner-6.png -------------------------------------------------------------------------------- /assets/banner-7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDesignMastery/Rental_07-09-24/4a2c7e490e70ed128ac853be1f1e3b1b1d49b40e/assets/banner-7.png -------------------------------------------------------------------------------- /assets/banner-8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDesignMastery/Rental_07-09-24/4a2c7e490e70ed128ac853be1f1e3b1b1d49b40e/assets/banner-8.png -------------------------------------------------------------------------------- /assets/banner-9.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDesignMastery/Rental_07-09-24/4a2c7e490e70ed128ac853be1f1e3b1b1d49b40e/assets/banner-9.png -------------------------------------------------------------------------------- /assets/download.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDesignMastery/Rental_07-09-24/4a2c7e490e70ed128ac853be1f1e3b1b1d49b40e/assets/download.png -------------------------------------------------------------------------------- /assets/google.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDesignMastery/Rental_07-09-24/4a2c7e490e70ed128ac853be1f1e3b1b1d49b40e/assets/google.png -------------------------------------------------------------------------------- /assets/header-bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDesignMastery/Rental_07-09-24/4a2c7e490e70ed128ac853be1f1e3b1b1d49b40e/assets/header-bg.png -------------------------------------------------------------------------------- /assets/header.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDesignMastery/Rental_07-09-24/4a2c7e490e70ed128ac853be1f1e3b1b1d49b40e/assets/header.png -------------------------------------------------------------------------------- /assets/location.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDesignMastery/Rental_07-09-24/4a2c7e490e70ed128ac853be1f1e3b1b1d49b40e/assets/location.png -------------------------------------------------------------------------------- /assets/range-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDesignMastery/Rental_07-09-24/4a2c7e490e70ed128ac853be1f1e3b1b1d49b40e/assets/range-1.jpg -------------------------------------------------------------------------------- /assets/range-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDesignMastery/Rental_07-09-24/4a2c7e490e70ed128ac853be1f1e3b1b1d49b40e/assets/range-2.jpg -------------------------------------------------------------------------------- /assets/range-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDesignMastery/Rental_07-09-24/4a2c7e490e70ed128ac853be1f1e3b1b1d49b40e/assets/range-3.jpg -------------------------------------------------------------------------------- /assets/range-4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDesignMastery/Rental_07-09-24/4a2c7e490e70ed128ac853be1f1e3b1b1d49b40e/assets/range-4.jpg -------------------------------------------------------------------------------- /assets/select-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDesignMastery/Rental_07-09-24/4a2c7e490e70ed128ac853be1f1e3b1b1d49b40e/assets/select-1.png -------------------------------------------------------------------------------- /assets/select-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDesignMastery/Rental_07-09-24/4a2c7e490e70ed128ac853be1f1e3b1b1d49b40e/assets/select-2.png -------------------------------------------------------------------------------- /assets/select-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDesignMastery/Rental_07-09-24/4a2c7e490e70ed128ac853be1f1e3b1b1d49b40e/assets/select-3.png -------------------------------------------------------------------------------- /assets/select-4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDesignMastery/Rental_07-09-24/4a2c7e490e70ed128ac853be1f1e3b1b1d49b40e/assets/select-4.png -------------------------------------------------------------------------------- /assets/select-5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDesignMastery/Rental_07-09-24/4a2c7e490e70ed128ac853be1f1e3b1b1d49b40e/assets/select-5.png -------------------------------------------------------------------------------- /assets/select-bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDesignMastery/Rental_07-09-24/4a2c7e490e70ed128ac853be1f1e3b1b1d49b40e/assets/select-bg.png -------------------------------------------------------------------------------- /assets/story-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDesignMastery/Rental_07-09-24/4a2c7e490e70ed128ac853be1f1e3b1b1d49b40e/assets/story-1.jpg -------------------------------------------------------------------------------- /assets/story-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDesignMastery/Rental_07-09-24/4a2c7e490e70ed128ac853be1f1e3b1b1d49b40e/assets/story-2.jpg -------------------------------------------------------------------------------- /assets/story-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDesignMastery/Rental_07-09-24/4a2c7e490e70ed128ac853be1f1e3b1b1d49b40e/assets/story-3.jpg -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 10 | 14 | 15 | Web Design Mastery | RENTAL 16 | 17 | 18 |
19 | 38 |
39 |

PREMIUM CAR RENTAL

40 |
41 |
42 | 43 | 49 |
50 |
51 | 52 | 58 |
59 |
60 | 61 | 67 |
68 | 71 |
72 | header 73 |
74 | 75 | 76 | 77 |
78 | 79 |
80 |

WIDE RANGE OF VEHICLES

81 |
82 |
83 | range 84 |
85 |

CARS

86 | 87 |
88 |
89 |
90 | range 91 |
92 |

SUVS

93 | 94 |
95 |
96 |
97 | range 98 |
99 |

VANS

100 | 101 |
102 |
103 |
104 | range 105 |
106 |

ELECTRIC

107 | 108 |
109 |
110 |
111 |
112 | 113 |
114 |
115 | location 116 |
117 |
118 |

FIND CAR IN YOUR LOCATIONS

119 |

120 | Discover the perfect vehicle tailored to your needs, wherever you are. 121 | Our 'Find Car in Your Locations' feature allows you to effortlessly 122 | search and select from our premium fleet available near you. Whether 123 | you're looking for a luxury sedan, a spacious SUV, or a sporty 124 | convertible, our easy-to-use tool ensures you find the ideal car for 125 | your journey. Simply enter your location, and let us connect you with 126 | top-tier vehicles ready for rental. 127 |

128 |
129 | 130 |
131 |
132 |
133 | 134 |
135 |

PICK YOUR DREAM CAR TODAY

136 | 137 |
138 | 139 |
140 | 141 |
142 |
143 | select 144 |
145 |
146 | 147 |

200 km/h

148 |
149 |
150 | 151 |

6 speed

152 |
153 |
154 | 155 |

5 seats

156 |
157 |
158 | 159 |

15 milage

160 |
161 |
162 |
163 |
164 |
165 |
166 | select 167 |
168 |
169 | 170 |

215 km/h

171 |
172 |
173 | 174 |

6 speed

175 |
176 |
177 | 178 |

5 seats

179 |
180 |
181 | 182 |

16 milage

183 |
184 |
185 |
186 |
187 |
188 |
189 | select 190 |
191 |
192 | 193 |

306 km/h

194 |
195 |
196 | 197 |

6 speed

198 |
199 |
200 | 201 |

5 seats

202 |
203 |
204 | 205 |

12 milage

206 |
207 |
208 |
209 |
210 |
211 |
212 | select 213 |
214 |
215 | 216 |

350 km/h

217 |
218 |
219 | 220 |

6 speed

221 |
222 |
223 | 224 |

2 seats

225 |
226 |
227 | 228 |

08 milage

229 |
230 |
231 |
232 |
233 |
234 |
235 | select 236 |
237 |
238 | 239 |

254 km/h

240 |
241 |
242 | 243 |

6 speed

244 |
245 |
246 | 247 |

5 seats

248 |
249 |
250 | 251 |

10 milage

252 |
253 |
254 |
255 |
256 |
257 |
258 |
259 |
260 | 261 |
225 /day
262 |
263 |
264 | 265 | 266 |
267 |
268 |
269 | 270 |
271 |

STORIES BEHIND THE WHEEL

272 |
273 |
274 |
275 | 12 276 |
277 |

January

278 |

2024

279 |
280 |
281 |

Adventures on the Open Road

282 |

283 | Join us as we dive into the exhilarating stories of travelers who 284 | embarked on unforgettable journeys with PREMIUM CAR RENTAL. 285 |

286 | story 287 |
288 |
289 |
290 | 04 291 |
292 |

March

293 |

2024

294 |
295 |
296 |

Luxury and Comfort: Experiences

297 |

298 | In this series, we highlight the luxurious touches, unparalleled 299 | comfort, and exceptional service that make every ride. 300 |

301 | story 302 |
303 |
304 |
305 | 18 306 |
307 |

June

308 |

2024

309 |
310 |
311 |

Cars that Adapt to Your Lifestyle

312 |

313 | Read about how our versatile vehicles have seamlessly integrated 314 | into the lives of professionals and families alike. 315 |

316 | story 317 |
318 |
319 |
320 | 321 | 335 | 336 |
337 |
338 |
339 |

PREMIUM CAR RENTAL

340 |
341 | 342 | apple 343 | 344 | 345 | google 346 | 347 |
348 |
349 |
350 | download 351 |
352 |
353 |
354 | 355 |
356 |
357 |

Stay up to date on all the latest news.

358 |
359 | 360 | 363 |
364 |
365 |
366 | 367 | 414 | 415 | 416 | 417 | 418 | 419 | 420 | -------------------------------------------------------------------------------- /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 | origin: "bottom", 19 | distance: "50px", 20 | duration: 1000, 21 | }; 22 | 23 | ScrollReveal().reveal(".header__container h1", { 24 | ...scrollRevealOption, 25 | }); 26 | ScrollReveal().reveal(".header__container form", { 27 | ...scrollRevealOption, 28 | delay: 500, 29 | }); 30 | ScrollReveal().reveal(".header__container img", { 31 | ...scrollRevealOption, 32 | delay: 1000, 33 | }); 34 | 35 | ScrollReveal().reveal(".range__card", { 36 | duration: 1000, 37 | interval: 500, 38 | }); 39 | 40 | ScrollReveal().reveal(".location__image img", { 41 | ...scrollRevealOption, 42 | origin: "right", 43 | }); 44 | ScrollReveal().reveal(".location__content .section__header", { 45 | ...scrollRevealOption, 46 | delay: 500, 47 | }); 48 | ScrollReveal().reveal(".location__content p", { 49 | ...scrollRevealOption, 50 | delay: 1000, 51 | }); 52 | ScrollReveal().reveal(".location__content .location__btn", { 53 | ...scrollRevealOption, 54 | delay: 1500, 55 | }); 56 | 57 | const selectCards = document.querySelectorAll(".select__card"); 58 | selectCards[0].classList.add("show__info"); 59 | 60 | const price = ["225", "455", "275", "625", "395"]; 61 | 62 | const priceEl = document.getElementById("select-price"); 63 | 64 | function updateSwiperImage(eventName, args) { 65 | if (eventName === "slideChangeTransitionStart") { 66 | const index = args && args[0].realIndex; 67 | priceEl.innerText = price[index]; 68 | selectCards.forEach((item) => { 69 | item.classList.remove("show__info"); 70 | }); 71 | selectCards[index].classList.add("show__info"); 72 | } 73 | } 74 | 75 | const swiper = new Swiper(".swiper", { 76 | loop: true, 77 | effect: "coverflow", 78 | grabCursor: true, 79 | centeredSlides: true, 80 | slidesPerView: "auto", 81 | coverflowEffect: { 82 | rotate: 0, 83 | depth: 500, 84 | modifier: 1, 85 | scale: 0.75, 86 | slideShadows: false, 87 | stretch: -100, 88 | }, 89 | 90 | onAny(event, ...args) { 91 | updateSwiperImage(event, args); 92 | }, 93 | }); 94 | 95 | ScrollReveal().reveal(".story__card", { 96 | ...scrollRevealOption, 97 | interval: 500, 98 | }); 99 | 100 | const banner = document.querySelector(".banner__wrapper"); 101 | 102 | const bannerContent = Array.from(banner.children); 103 | 104 | bannerContent.forEach((item) => { 105 | const duplicateNode = item.cloneNode(true); 106 | duplicateNode.setAttribute("aria-hidden", true); 107 | banner.appendChild(duplicateNode); 108 | }); 109 | 110 | ScrollReveal().reveal(".download__image img", { 111 | ...scrollRevealOption, 112 | origin: "right", 113 | }); 114 | ScrollReveal().reveal(".download__content .section__header", { 115 | ...scrollRevealOption, 116 | delay: 500, 117 | }); 118 | ScrollReveal().reveal(".download__links", { 119 | ...scrollRevealOption, 120 | delay: 1000, 121 | }); 122 | -------------------------------------------------------------------------------- /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&family=Syncopate:wght@400;700&display=swap"); 2 | 3 | :root { 4 | --primary-color: #f5b754; 5 | --primary-color-dark: #d6a04a; 6 | --text-dark: #15191d; 7 | --text-light: #737373; 8 | --extra-light: #e5e5e5; 9 | --white: #ffffff; 10 | --max-width: 1200px; 11 | --header-font: "Syncopate", sans-serif; 12 | } 13 | 14 | * { 15 | padding: 0; 16 | margin: 0; 17 | box-sizing: border-box; 18 | } 19 | 20 | .section__container { 21 | max-width: var(--max-width); 22 | margin: auto; 23 | padding: 5rem 1rem; 24 | } 25 | 26 | .section__header { 27 | font-size: 3.25rem; 28 | font-weight: 700; 29 | font-family: var(--header-font); 30 | color: var(--text-dark); 31 | letter-spacing: -5px; 32 | line-height: 4.25rem; 33 | } 34 | 35 | .btn { 36 | padding: 1rem 1.5rem; 37 | outline: none; 38 | border: none; 39 | font-size: 1rem; 40 | color: var(--white); 41 | background-color: var(--text-dark); 42 | border-radius: 10px; 43 | transition: 0.3s; 44 | cursor: pointer; 45 | } 46 | 47 | .btn:hover { 48 | color: var(--text-dark); 49 | background-color: var(--primary-color); 50 | } 51 | 52 | img { 53 | display: flex; 54 | width: 100%; 55 | } 56 | 57 | a { 58 | text-decoration: none; 59 | transition: 0.3s; 60 | } 61 | 62 | ul { 63 | list-style: none; 64 | } 65 | 66 | html, 67 | body { 68 | scroll-behavior: smooth; 69 | } 70 | 71 | body { 72 | font-family: "Poppins", sans-serif; 73 | } 74 | 75 | header { 76 | position: relative; 77 | background-image: url("assets/header-bg.png"); 78 | background-position: center center; 79 | background-size: cover; 80 | background-repeat: no-repeat; 81 | } 82 | 83 | nav { 84 | position: fixed; 85 | isolation: isolate; 86 | width: 100%; 87 | z-index: 9; 88 | } 89 | 90 | .nav__header { 91 | padding: 1rem; 92 | width: 100%; 93 | display: flex; 94 | align-items: center; 95 | justify-content: space-between; 96 | background-color: var(--primary-color); 97 | } 98 | 99 | .nav__logo a { 100 | font-size: 1.5rem; 101 | font-weight: 700; 102 | font-family: var(--header-font); 103 | color: var(--white); 104 | letter-spacing: -2px; 105 | } 106 | 107 | .nav__menu__btn { 108 | font-size: 1.5rem; 109 | color: var(--white); 110 | cursor: pointer; 111 | } 112 | 113 | .nav__links { 114 | position: absolute; 115 | bottom: 0; 116 | left: 0; 117 | width: 100%; 118 | padding: 2rem; 119 | display: flex; 120 | align-items: center; 121 | justify-content: center; 122 | flex-direction: column; 123 | gap: 2rem; 124 | background-color: var(--primary-color); 125 | transition: transform 0.5s; 126 | z-index: -1; 127 | } 128 | 129 | .nav__links.open { 130 | transform: translateY(100%); 131 | } 132 | 133 | .nav__links a { 134 | font-weight: 500; 135 | color: var(--white); 136 | } 137 | 138 | .nav__links a:hover { 139 | color: var(--text-dark); 140 | } 141 | 142 | .nav__btn { 143 | display: none; 144 | } 145 | 146 | .header__container { 147 | position: relative; 148 | isolation: isolate; 149 | overflow: hidden; 150 | padding: 5rem 1rem; 151 | } 152 | 153 | .header__container h1 { 154 | max-width: 750px; 155 | margin-inline: auto; 156 | margin-bottom: 2rem; 157 | font-size: 4.5rem; 158 | font-weight: 700; 159 | font-family: var(--header-font); 160 | color: var(--text-dark); 161 | letter-spacing: -5px; 162 | line-height: 5rem; 163 | text-align: center; 164 | } 165 | 166 | .header__container form { 167 | max-width: 800px; 168 | margin-inline: auto; 169 | margin-bottom: 4rem; 170 | padding: 1rem; 171 | display: flex; 172 | align-items: center; 173 | justify-content: center; 174 | flex-wrap: wrap; 175 | gap: 1rem; 176 | background-color: var(--white); 177 | box-shadow: 5px 10px 20px rgba(0, 0, 0, 0.1); 178 | } 179 | 180 | .header__container .input__group { 181 | flex: 1 0 170px; 182 | display: grid; 183 | gap: 10px; 184 | } 185 | 186 | .header__container label { 187 | font-size: 0.9rem; 188 | font-weight: 600; 189 | color: var(--text-dark); 190 | } 191 | 192 | .header__container input { 193 | width: 100%; 194 | outline: none; 195 | border: none; 196 | font-size: 1.2rem; 197 | color: var(--text-light); 198 | } 199 | 200 | .header__container input::placeholder { 201 | color: var(--text-light); 202 | } 203 | 204 | .header__container .btn { 205 | padding: 15px 17px; 206 | font-size: 1.5rem; 207 | } 208 | 209 | .header__container img { 210 | max-width: 1050px; 211 | margin-inline: auto; 212 | filter: drop-shadow(5px 20px 20px rgba(0, 0, 0, 0.5)); 213 | } 214 | 215 | .header__container::before { 216 | position: absolute; 217 | content: ""; 218 | left: 0; 219 | bottom: 0; 220 | width: 100vw; 221 | height: 50%; 222 | background-color: var(--primary-color); 223 | transform: translateY(50%) skewY(-4deg); 224 | z-index: -1; 225 | } 226 | 227 | .scroll__down { 228 | position: absolute; 229 | bottom: 0; 230 | left: 50%; 231 | transform: translate(-50%, 50%); 232 | font-size: 1.5rem; 233 | padding: 8px 5px; 234 | color: var(--text-dark); 235 | background-color: var(--primary-color); 236 | border-radius: 2rem; 237 | border: 8px solid var(--white); 238 | } 239 | 240 | .range__container .section__header { 241 | max-width: 700px; 242 | margin-inline: auto; 243 | margin-bottom: 4rem; 244 | text-align: center; 245 | } 246 | 247 | .range__grid { 248 | display: grid; 249 | gap: 1rem; 250 | } 251 | 252 | .range__card { 253 | position: relative; 254 | isolation: isolate; 255 | max-width: 600px; 256 | margin-inline: auto; 257 | border-radius: 1.5rem; 258 | overflow: hidden; 259 | box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.2); 260 | } 261 | 262 | .range__card img { 263 | transition: 0.3s; 264 | } 265 | 266 | .range__card:hover img { 267 | transform: scale(1.1); 268 | } 269 | 270 | .range__details { 271 | position: absolute; 272 | inset: 0; 273 | padding: 2rem; 274 | background-image: linear-gradient( 275 | to bottom right, 276 | rgba(0, 0, 0, 1), 277 | rgba(0, 0, 0, 0.1) 50%, 278 | rgba(0, 0, 0, 0.75) 279 | ); 280 | } 281 | 282 | .range__details h4 { 283 | margin-bottom: 1rem; 284 | font-size: 3rem; 285 | font-weight: 600; 286 | font-family: var(--header-font); 287 | color: var(--white); 288 | } 289 | 290 | .range__details a { 291 | display: inline-block; 292 | padding: 0px 6px; 293 | font-size: 1.5rem; 294 | color: var(--white); 295 | border: 2px solid var(--white); 296 | border-radius: 100%; 297 | } 298 | 299 | .range__details a:hover { 300 | color: var(--primary-color); 301 | border-color: var(--primary-color); 302 | } 303 | 304 | .location__container { 305 | display: grid; 306 | gap: 2rem 0; 307 | overflow: hidden; 308 | } 309 | 310 | .location__image img { 311 | max-width: 500px; 312 | margin-inline: auto; 313 | padding-inline: 1rem; 314 | } 315 | 316 | .location__content .section__header { 317 | margin-bottom: 2rem; 318 | } 319 | 320 | .location__content p { 321 | margin-bottom: 2rem; 322 | color: var(--text-light); 323 | } 324 | 325 | .select__container { 326 | padding-top: 5rem; 327 | margin-bottom: 5rem; 328 | background-image: url("assets/select-bg.png"); 329 | background-position: top center; 330 | background-size: cover; 331 | background-repeat: no-repeat; 332 | } 333 | 334 | .select__container .section__header { 335 | max-width: 600px; 336 | margin-inline: auto; 337 | margin-bottom: 4rem; 338 | text-align: center; 339 | } 340 | 341 | .swiper { 342 | width: 100%; 343 | } 344 | 345 | .swiper-slide { 346 | max-width: 900px; 347 | } 348 | 349 | .select__card img { 350 | max-width: 800px; 351 | margin-inline: auto; 352 | margin-bottom: 2rem; 353 | filter: drop-shadow(0px 20px 20px rgba(0, 0, 0, 0.5)); 354 | } 355 | 356 | .select__info { 357 | max-width: 600px; 358 | margin-inline: auto; 359 | display: none; 360 | align-items: center; 361 | justify-content: space-around; 362 | gap: 2rem; 363 | } 364 | 365 | .select__card.show__info .select__info { 366 | display: flex; 367 | } 368 | 369 | .select__info__card { 370 | text-align: center; 371 | } 372 | 373 | .select__info__card > span { 374 | display: inline-block; 375 | margin-bottom: 1rem; 376 | padding: 5px 15px; 377 | font-size: 2.5rem; 378 | color: var(--text-dark); 379 | background-color: var(--white); 380 | border-radius: 100%; 381 | box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.1); 382 | } 383 | 384 | .select__info__card h4 { 385 | font-size: 1.25rem; 386 | font-weight: 600; 387 | font-family: var(--header-font); 388 | color: var(--text-dark); 389 | } 390 | 391 | .select__info__card h4 span { 392 | font-size: 0.8rem; 393 | color: var(--text-light); 394 | } 395 | 396 | .select__form { 397 | max-width: 750px; 398 | margin-inline: auto; 399 | padding: 1.5rem 2rem; 400 | display: flex; 401 | align-items: center; 402 | justify-content: center; 403 | gap: 2rem; 404 | flex-wrap: wrap; 405 | background-color: var(--white); 406 | transform: translateY(50%); 407 | box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.1); 408 | } 409 | 410 | .select__price { 411 | display: flex; 412 | align-items: center; 413 | gap: 2rem; 414 | font-family: var(--header-font); 415 | font-weight: 600; 416 | color: var(--text-light); 417 | } 418 | 419 | .select__price span { 420 | font-size: 3rem; 421 | line-height: 3rem; 422 | color: var(--text-dark); 423 | } 424 | 425 | .select__price span:not(#select-price) { 426 | font-weight: 400; 427 | } 428 | 429 | .select__btns { 430 | display: flex; 431 | align-items: center; 432 | justify-content: center; 433 | gap: 5px; 434 | } 435 | 436 | .select__btns .btn { 437 | min-width: 135px; 438 | } 439 | 440 | .select__btns .btn:nth-child(2) { 441 | color: var(--white); 442 | background-color: var(--primary-color); 443 | } 444 | 445 | .story__container .section__header { 446 | max-width: 600px; 447 | margin-inline: auto; 448 | margin-bottom: 4rem; 449 | text-align: center; 450 | } 451 | 452 | .story__grid { 453 | display: grid; 454 | gap: 4rem 1rem; 455 | } 456 | 457 | .story__date { 458 | margin-bottom: 2rem; 459 | padding-bottom: 1rem; 460 | display: flex; 461 | align-items: center; 462 | gap: 10px; 463 | border-bottom: 2px solid var(--text-light); 464 | } 465 | 466 | .story__date span { 467 | padding-right: 10px; 468 | font-size: 3rem; 469 | font-weight: 500; 470 | line-height: 2.5rem; 471 | border-right: 2px solid var(--text-light); 472 | } 473 | 474 | .story__date div p { 475 | margin-bottom: 0; 476 | font-weight: 500; 477 | color: var(--text-light); 478 | } 479 | 480 | .story__card h4 { 481 | margin-bottom: 1rem; 482 | font-size: 1.5rem; 483 | font-family: var(--header-font); 484 | font-weight: 700; 485 | letter-spacing: -2px; 486 | line-height: 2rem; 487 | color: var(--text-dark); 488 | } 489 | 490 | .story__card p { 491 | margin-bottom: 2rem; 492 | color: var(--text-light); 493 | } 494 | 495 | .banner__container { 496 | padding-block: 5rem; 497 | overflow: hidden; 498 | } 499 | 500 | .banner__wrapper { 501 | width: max-content; 502 | display: flex; 503 | align-items: center; 504 | gap: 8rem; 505 | 506 | animation: scroll 45s linear infinite; 507 | } 508 | 509 | .banner__wrapper img { 510 | height: 100px; 511 | } 512 | 513 | @keyframes scroll { 514 | to { 515 | transform: translateX(calc(-50% - 4rem)); 516 | } 517 | } 518 | 519 | .download { 520 | position: relative; 521 | isolation: isolate; 522 | padding-inline: 1rem; 523 | overflow: hidden; 524 | } 525 | 526 | .download::before { 527 | position: absolute; 528 | content: ""; 529 | bottom: 0; 530 | left: 0; 531 | width: 100%; 532 | height: calc(50% - 5rem); 533 | background-color: var(--text-dark); 534 | z-index: -1; 535 | } 536 | 537 | .download__container { 538 | padding: 0 1rem; 539 | display: grid; 540 | background-color: var(--primary-color); 541 | border-radius: 1rem; 542 | } 543 | 544 | .download__content { 545 | padding-block: 5rem; 546 | } 547 | 548 | .download__content .section__header { 549 | margin-bottom: 2rem; 550 | text-align: center; 551 | } 552 | 553 | .download__links { 554 | display: flex; 555 | align-items: center; 556 | justify-content: center; 557 | gap: 1rem; 558 | } 559 | 560 | .download__links img { 561 | max-width: 150px; 562 | } 563 | 564 | .download__image { 565 | display: none; 566 | } 567 | 568 | .news { 569 | background-color: var(--text-dark); 570 | } 571 | 572 | .news__container { 573 | padding-bottom: 0; 574 | display: grid; 575 | gap: 2rem; 576 | } 577 | 578 | .news__container .section__header { 579 | font-size: 2.5rem; 580 | line-height: 3.25rem; 581 | letter-spacing: -2px; 582 | color: var(--white); 583 | text-align: center; 584 | } 585 | 586 | .news__container form { 587 | width: 100%; 588 | max-width: 450px; 589 | margin-inline: auto; 590 | display: flex; 591 | align-items: center; 592 | gap: 1rem; 593 | } 594 | 595 | .news__container input { 596 | width: 100%; 597 | outline: none; 598 | border: none; 599 | padding: 0.75rem 0; 600 | font-size: 1rem; 601 | color: var(--white); 602 | background-color: transparent; 603 | border-bottom: 2px solid var(--text-light); 604 | } 605 | 606 | .news__container .btn { 607 | padding: 10p 12px; 608 | font-size: 1.5rem; 609 | background-color: var(--primary-color); 610 | } 611 | 612 | footer { 613 | background-color: var(--text-dark); 614 | } 615 | 616 | .footer__container { 617 | display: grid; 618 | gap: 4rem 2rem; 619 | border-bottom: 1px solid var(--text-light); 620 | } 621 | 622 | .footer__col h4 { 623 | margin-bottom: 2rem; 624 | font-size: 1.2rem; 625 | font-family: var(--header-font); 626 | color: var(--white); 627 | } 628 | 629 | .footer__links { 630 | display: grid; 631 | gap: 1rem; 632 | } 633 | 634 | .footer__links a { 635 | color: var(--text-light); 636 | } 637 | 638 | .footer__links a:hover { 639 | color: var(--white); 640 | } 641 | 642 | .footer__socials { 643 | display: flex; 644 | align-items: center; 645 | flex-wrap: wrap; 646 | gap: 1rem; 647 | } 648 | 649 | .footer__socials a { 650 | padding: 8px 12px; 651 | font-size: 1.25rem; 652 | color: var(--text-light); 653 | border: 2px solid var(--text-light); 654 | border-radius: 100%; 655 | } 656 | 657 | .footer__socials a:hover { 658 | color: var(--primary-color); 659 | border-color: var(--primary-color); 660 | } 661 | 662 | .footer__bar { 663 | padding: 1rem; 664 | font-size: 0.9rem; 665 | color: var(--text-light); 666 | text-align: center; 667 | } 668 | 669 | @media (width > 540px) { 670 | .story__grid { 671 | grid-template-columns: repeat(2, 1fr); 672 | } 673 | 674 | .footer__container { 675 | grid-template-columns: repeat(2, 1fr); 676 | } 677 | } 678 | 679 | @media (width > 768px) { 680 | nav { 681 | position: static; 682 | padding: 2rem 1rem 0; 683 | max-width: var(--max-width); 684 | margin-inline: auto; 685 | display: flex; 686 | align-items: center; 687 | justify-content: space-between; 688 | gap: 2rem; 689 | } 690 | 691 | .nav__header { 692 | flex: 1; 693 | padding: 0; 694 | background-color: transparent; 695 | } 696 | 697 | .nav__logo a { 698 | color: var(--text-dark); 699 | } 700 | 701 | .nav__menu__btn { 702 | display: none; 703 | } 704 | 705 | .nav__links { 706 | position: static; 707 | padding: 0; 708 | width: fit-content; 709 | flex-direction: row; 710 | background-color: transparent; 711 | transform: none; 712 | } 713 | 714 | .nav__links a { 715 | color: var(--text-dark); 716 | } 717 | 718 | .nav__links a:hover { 719 | color: var(--primary-color); 720 | } 721 | 722 | .nav__btn { 723 | display: flex; 724 | flex: 1; 725 | align-items: center; 726 | justify-content: flex-end; 727 | } 728 | 729 | .nav__btn .btn { 730 | color: var(--text-dark); 731 | background-color: var(--primary-color); 732 | } 733 | 734 | .range__grid { 735 | grid-template-columns: repeat(2, 1fr); 736 | } 737 | 738 | .location__container { 739 | grid-template-columns: repeat(2, 1fr); 740 | align-items: center; 741 | } 742 | 743 | .location__image { 744 | grid-area: 1/2/2/3; 745 | } 746 | 747 | .select__form { 748 | justify-content: space-between; 749 | } 750 | 751 | .story__grid { 752 | grid-template-columns: repeat(3, 1fr); 753 | } 754 | 755 | .download__container { 756 | margin-top: 10rem; 757 | grid-template-columns: repeat(2, 1fr); 758 | align-items: center; 759 | } 760 | 761 | .download__content { 762 | max-width: 500px; 763 | margin-left: auto; 764 | } 765 | 766 | .download__content .section__header { 767 | text-align: left; 768 | } 769 | 770 | .download__links { 771 | justify-content: flex-start; 772 | } 773 | 774 | .download__image { 775 | display: flex; 776 | position: relative; 777 | isolation: isolate; 778 | height: 100%; 779 | } 780 | 781 | .download__image img { 782 | display: block; 783 | position: absolute; 784 | bottom: 0; 785 | left: 50%; 786 | transform: translateX(-50%); 787 | max-width: 400px; 788 | } 789 | 790 | .news__container { 791 | grid-template-columns: repeat(2, 1fr); 792 | align-items: center; 793 | } 794 | 795 | .news__container .section__header { 796 | text-align: left; 797 | } 798 | 799 | .news__container form { 800 | margin-inline-end: unset; 801 | } 802 | 803 | .footer__container { 804 | grid-template-columns: repeat(4, 1fr); 805 | } 806 | } 807 | 808 | @media (width > 1024px) { 809 | .range__grid { 810 | gap: 1.5rem; 811 | } 812 | 813 | .range__details { 814 | padding: 4rem; 815 | } 816 | 817 | .story__grid { 818 | padding: 1.5rem; 819 | } 820 | } 821 | --------------------------------------------------------------------------------