├── README.md
├── assets
    ├── css
    │   └── style.css
    ├── images
    │   ├── blog-1.jpg
    │   ├── blog-2.jpg
    │   ├── blog-3.jpg
    │   ├── blog-4.jpg
    │   ├── blog-5.jpg
    │   ├── car-1.jpg
    │   ├── car-2.jpg
    │   ├── car-3.jpg
    │   ├── car-4.jpg
    │   ├── car-5.jpg
    │   ├── car-6.jpg
    │   ├── hero-banner.jpg
    │   └── logo.svg
    └── js
    │   └── script.js
├── favicon.svg
├── index.html
├── index.txt
├── readme-images
    ├── desktop.png
    └── project-logo.png
└── style-guide.md


/README.md:
--------------------------------------------------------------------------------
 1 | <div align="center">
 2 |   
 3 |   ![GitHub repo size](https://img.shields.io/github/repo-size/codewithsadee/ridex)
 4 |   ![GitHub stars](https://img.shields.io/github/stars/codewithsadee/ridex?style=social)
 5 |   ![GitHub forks](https://img.shields.io/github/forks/codewithsadee/ridex?style=social)
 6 | [![Twitter Follow](https://img.shields.io/twitter/follow/codewithsadee_?style=social)](https://twitter.com/intent/follow?screen_name=codewithsadee_)
 7 |   [![YouTube Video Views](https://img.shields.io/youtube/views/DJAK-KODM5E?style=social)](https://youtu.be/DJAK-KODM5E)
 8 | 
 9 |   <br />
10 |   <br />
11 |   
12 |   <img src="./readme-images/project-logo.png" />
13 | 
14 |   <h2 align="center">Ridex - Car rent website</h2>
15 | 
16 |   Ridex is fully responsive car rental website, <br />Responsive for all devices, built using HTML, CSS, and JavaScript.
17 | 
18 |   <a href="https://codewithsadee.github.io/ridex/"><strong>➥ Live Demo</strong></a>
19 | 
20 | </div>
21 | 
22 | <br />
23 | 
24 | ### Demo Screeshots
25 | 
26 | ![Ridex Desktop Demo](./readme-images/desktop.png "Desktop Demo")
27 | 
28 | ### Prerequisites
29 | 
30 | Before you begin, ensure you have met the following requirements:
31 | 
32 | * [Git](https://git-scm.com/downloads "Download Git") must be installed on your operating system.
33 | 
34 | ### Run Locally
35 | 
36 | To run **Ridex** locally, run this command on your git bash:
37 | 
38 | Linux and macOS:
39 | 
40 | ```bash
41 | sudo git clone https://github.com/codewithsadee/ridex.git
42 | ```
43 | 
44 | Windows:
45 | 
46 | ```bash
47 | git clone https://github.com/codewithsadee/ridex.git
48 | ```
49 | 
50 | ### Contact
51 | 
52 | If you want to contact with me you can reach me at [Twitter](https://www.twitter.com/codewithsadee).
53 | 
54 | ### License
55 | 
56 | This project is **free to use** and does not contains any license.
57 | 


--------------------------------------------------------------------------------
/assets/css/style.css:
--------------------------------------------------------------------------------
   1 | /*-----------------------------------*\
   2 |   #style.css
   3 | \*-----------------------------------*/
   4 | 
   5 | /**
   6 |  * copyright 2022 codewithsadee
   7 |  */
   8 | 
   9 | 
  10 | 
  11 | 
  12 | 
  13 | /*-----------------------------------*\
  14 |   #CUSTOM PROPERTY
  15 | \*-----------------------------------*/
  16 | 
  17 | :root {
  18 | 
  19 |   /**
  20 |    * colors
  21 |    */
  22 | 
  23 |   --pale-purple-pantone: hsl(262, 63%, 92%);
  24 |   --medium-sea-green: hsl(152, 63%, 43%);
  25 |   --lavender-blush: hsl(336, 35%, 92%);
  26 |   --carolina-blue: hsl(204, 91%, 53%);
  27 |   --columbia-blue: hsl(204, 92%, 90%);
  28 |   --alice-blue-1: hsl(216, 38%, 95%);
  29 |   --alice-blue-2: hsl(216, 75%, 97%);
  30 |   --alice-blue-3: hsl(216, 38%, 95%);
  31 |   --alice-blue-4: hsl(217, 33%, 92%);
  32 |   --independence: hsl(219, 21%, 39%);
  33 |   --deep-cerise: hsl(329, 63%, 52%);
  34 |   --eerie-black: hsl(210, 11%, 15%);
  35 |   --space-cadet: hsl(240, 22%, 25%);
  36 |   --blue-jeans: hsl(204, 80%, 63%);
  37 |   --slate-blue: hsl(262, 60%, 57%);
  38 |   --beau-blue: hsl(208, 86%, 92%);
  39 |   --honey-dew: hsl(152, 48%, 89%);
  40 |   --mimi-pink: hsl(329, 63%, 90%);
  41 |   --red-salsa: hsl(0, 79%, 63%);
  42 |   --sapphire: hsl(211, 100%, 35%);
  43 |   --manatee: hsl(219, 14%, 60%);
  44 |   --white: hsl(0, 0%, 100%);
  45 | 
  46 |   --gradient: linear-gradient(to top, var(--alice-blue-2), var(--alice-blue-3));
  47 | 
  48 |   /**
  49 |    * typography
  50 |    */
  51 | 
  52 |   --ff-nunito: 'Nunito', sans-serif;
  53 |   --ff-open-sans: 'Open Sans', sans-serif;
  54 | 
  55 |   --fs-1: 2.125rem;
  56 |   --fs-2: 1.875rem;
  57 |   --fs-3: 1.5rem;
  58 |   --fs-4: 1.375rem;
  59 |   --fs-5: 1.125rem;
  60 |   --fs-6: 0.875rem;
  61 |   --fs-7: 0.625rem;
  62 | 
  63 |   --fw-400: 400;
  64 |   --fw-600: 600;
  65 | 
  66 |   /**
  67 |    * transition
  68 |    */
  69 | 
  70 |   --transition: 0.5s ease;
  71 | 
  72 |   /**
  73 |    * spacing
  74 |    */
  75 | 
  76 |   --section-padding: 50px;
  77 | 
  78 |   /**
  79 |    * radius
  80 |    */
  81 | 
  82 |   --radius-10: 10px;
  83 |   --radius-14: 14px;
  84 |   --radius-18: 18px;
  85 | 
  86 |   /**
  87 |    * shadow
  88 |    */
  89 | 
  90 |   --shadow-1: 3px 3px 9px hsla(240, 14%, 69%, 0.2);
  91 |   --shadow-2: 3px 3px 9px hsla(204, 92%, 59%, 0.3);
  92 | 
  93 | }
  94 | 
  95 | 
  96 | 
  97 | 
  98 | 
  99 | /*-----------------------------------*\
 100 |   #RESET
 101 | \*-----------------------------------*/
 102 | 
 103 | *, *::before, *::after {
 104 |   margin: 0;
 105 |   padding: 0;
 106 |   box-sizing: border-box;
 107 | }
 108 | 
 109 | li { list-style: none; }
 110 | 
 111 | a { text-decoration: none; }
 112 | 
 113 | a,
 114 | img,
 115 | span,
 116 | label,
 117 | input,
 118 | button,
 119 | ion-icon { display: block; }
 120 | 
 121 | button,
 122 | input {
 123 |   background: none;
 124 |   border: none;
 125 |   font: inherit;
 126 | }
 127 | 
 128 | button { cursor: pointer; }
 129 | 
 130 | input { width: 100%; }
 131 | 
 132 | ion-icon { pointer-events: none; }
 133 | 
 134 | html {
 135 |   font-family: var(--ff-open-sans);
 136 |   color: var(--eerie-black);
 137 |   font-size: 1rem;
 138 |   line-height: 1.5;
 139 |   scroll-behavior: smooth;
 140 | }
 141 | 
 142 | body {
 143 |   background: var(--alice-blue-1);
 144 |   overflow-x: hidden;
 145 | }
 146 | 
 147 | ::-webkit-scrollbar {
 148 |   width: 15px;
 149 |   height: 10px;
 150 | }
 151 | 
 152 | ::-webkit-scrollbar-track { background: var(--white); }
 153 | 
 154 | ::-webkit-scrollbar-thumb {
 155 |   background: hsla(219, 14%, 60%, 0.3);
 156 |   border: 2px solid var(--white);
 157 | }
 158 | 
 159 | ::-webkit-scrollbar-thumb:hover { background: hsla(219, 14%, 60%, 0.5); }
 160 | 
 161 | 
 162 | 
 163 | 
 164 | 
 165 | /*-----------------------------------*\
 166 |   #REUSED STYLE
 167 | \*-----------------------------------*/
 168 | 
 169 | .container { padding-inline: 15px; }
 170 | 
 171 | button, a { transition: var(--transition); }
 172 | 
 173 | .btn {
 174 |   position: relative;
 175 |   background: var(--background, var(--carolina-blue));
 176 |   color: var(--color, var(--white));
 177 |   min-width: var(--width, 40px);
 178 |   min-height: var(--height, 40px);
 179 |   padding: 5px;
 180 |   display: grid;
 181 |   place-items: center;
 182 |   border-radius: var(--radius-14);
 183 |   font-family: var(--ff-nunito);
 184 |   font-size: var(--fs-6);
 185 |   font-weight: var(--fw-600);
 186 |   overflow: hidden;
 187 | }
 188 | 
 189 | .btn ion-icon {
 190 |   font-size: 22px;
 191 |   --ionicon-stroke-width: 40px;
 192 | }
 193 | 
 194 | .btn::before {
 195 |   content: "";
 196 |   position: absolute;
 197 |   inset: 0;
 198 |   background: linear-gradient(to right, hsla(0, 0%, 100%, 0.4), transparent);
 199 |   opacity: 0;
 200 |   pointer-events: none;
 201 |   transition: var(--transition);
 202 | }
 203 | 
 204 | .btn:is(:hover, :focus) { box-shadow: var(--shadow-2); }
 205 | 
 206 | .btn:is(:hover, :focus)::before { opacity: 1; }
 207 | 
 208 | .section { padding-block: var(--section-padding); }
 209 | 
 210 | .h1,
 211 | .h2,
 212 | .h3 {
 213 |   color: var(--space-cadet);
 214 |   font-family: var(--ff-nunito);
 215 |   line-height: 1.4;
 216 | }
 217 | 
 218 | .h1 {
 219 |   font-size: var(--fs-1);
 220 |   text-transform: uppercase;
 221 | }
 222 | 
 223 | .h2,
 224 | .h3 { font-weight: var(--fw-400); }
 225 | 
 226 | .h2 { font-size: var(--fs-2); }
 227 | 
 228 | .h3 { font-size: var(--fs-4); }
 229 | 
 230 | .w-100 { width: 100%; }
 231 | 
 232 | 
 233 | 
 234 | 
 235 | 
 236 | /*-----------------------------------*\
 237 |   #HEADER
 238 | \*-----------------------------------*/
 239 | 
 240 | .header-contact { display: none; }
 241 | 
 242 | .header {
 243 |   background: var(--alice-blue-1);
 244 |   position: fixed;
 245 |   top: 0;
 246 |   left: 0;
 247 |   width: 100%;
 248 |   transition: var(--transition);
 249 |   z-index: 4;
 250 | }
 251 | 
 252 | .header.active { box-shadow: var(--shadow-1); }
 253 | 
 254 | .header .container {
 255 |   height: 70px;
 256 |   display: flex;
 257 |   justify-content: space-between;
 258 |   align-items: center;
 259 | }
 260 | 
 261 | .header-actions {
 262 |   display: flex;
 263 |   align-items: center;
 264 |   gap: 20px;
 265 | }
 266 | 
 267 | .header-actions .btn span { display: none; }
 268 | 
 269 | .user-btn {
 270 |   --color: var(--independence);
 271 |   --background: var(--white);
 272 |   --shadow-2: var(--shadow-1);
 273 |   box-shadow: var(--shadow-1);
 274 | }
 275 | 
 276 | .nav-toggle-btn span {
 277 |   background: var(--independence);
 278 |   width: 22px;
 279 |   height: 2px;
 280 |   border-radius: 2px;
 281 |   margin-block: 8px;
 282 |   transform-origin: right;
 283 |   transition: var(--transition);
 284 | }
 285 | 
 286 | .nav-toggle-btn span.two { transform: scaleX(0.7); }
 287 | 
 288 | .nav-toggle-btn span.three { transform: scaleX(0.4); }
 289 | 
 290 | .nav-toggle-btn:is(:hover, :focus) span { background: var(--carolina-blue); }
 291 | 
 292 | .nav-toggle-btn.active span {
 293 |   transform: scaleX(1);
 294 |   background: var(--carolina-blue);
 295 | }
 296 | 
 297 | .navbar {
 298 |   background: var(--alice-blue-1);
 299 |   position: fixed;
 300 |   top: 70px;
 301 |   bottom: 0;
 302 |   right: -260px;
 303 |   max-width: 260px;
 304 |   width: 100%;
 305 |   padding: 20px 25px;
 306 |   border: 1px solid var(--white);
 307 |   box-shadow: var(--shadow-1);
 308 |   visibility: hidden;
 309 |   transition: 0.25s cubic-bezier(0.51, 0.03, 0.64, 0.28);
 310 | }
 311 | 
 312 | .navbar.active {
 313 |   visibility: visible;
 314 |   transform: translateX(-100%);
 315 |   transition: 0.5s cubic-bezier(0.33, 0.85, 0.56, 1.02);
 316 | }
 317 | 
 318 | .navbar-link {
 319 |   color: var(--independence);
 320 |   font-family: var(--ff-nunito);
 321 |   font-size: var(--fs-6);
 322 |   padding-block: 5px;
 323 |   margin-bottom: 15px;
 324 | }
 325 | 
 326 | .navbar-link:is(:hover, :focus) { color: var(--carolina-blue); }
 327 | 
 328 | .overlay {
 329 |   position: fixed;
 330 |   top: 70px;
 331 |   background: hsl(216, 38%, 95%);
 332 |   left: 0;
 333 |   right: 0;
 334 |   bottom: 0;
 335 |   opacity: 0;
 336 |   pointer-events: none;
 337 |   transition: var(--transition);
 338 | }
 339 | 
 340 | .overlay.active {
 341 |   opacity: 0.7;
 342 |   pointer-events: all;
 343 | }
 344 | 
 345 | 
 346 | 
 347 | 
 348 | 
 349 | /*-----------------------------------*\
 350 |   #HERO
 351 | \*-----------------------------------*/
 352 | 
 353 | .hero { padding-top: 120px; }
 354 | 
 355 | .hero-title {
 356 |   max-width: 20ch;
 357 |   margin-bottom: 15px;
 358 | }
 359 | 
 360 | .hero-text {
 361 |   color: var(--independence);
 362 |   line-height: 1.8;
 363 |   margin-bottom: 30px;
 364 | }
 365 | 
 366 | .hero-banner { display: none; }
 367 | 
 368 | .hero-form {
 369 |   background: var(--gradient);
 370 |   border: 1px solid var(--white);
 371 |   box-shadow: var(--shadow-1);
 372 |   border-radius: var(--radius-18);
 373 |   font-family: var(--ff-nunito);
 374 | }
 375 | 
 376 | .input-wrapper { padding: 15px 20px; }
 377 | 
 378 | .input-wrapper:not(:last-of-type) { border-bottom: 1px solid hsla(0, 0%, 0%, 0.08); }
 379 | 
 380 | .input-label {
 381 |   color: var(--manatee);
 382 |   font-size: var(--fs-6);
 383 |   margin-bottom: 10px;
 384 | }
 385 | 
 386 | .input-field {
 387 |   color: var(--space-cadet);
 388 |   outline: 2px solid transparent;
 389 |   outline-offset: 5px;
 390 |   border-radius: 4px;
 391 |   transition: var(--transition);
 392 | }
 393 | 
 394 | .input-field:focus { outline-color: var(--carolina-blue); }
 395 | 
 396 | .input-field::placeholder { color: var(--independence); }
 397 | 
 398 | .hero-form .btn {
 399 |   --width: calc(100% - 40px);
 400 |   --height: 50px;
 401 |   margin: 20px;
 402 |   text-transform: uppercase;
 403 | }
 404 | 
 405 | 
 406 | 
 407 | 
 408 | 
 409 | /*-----------------------------------*\
 410 |   #FEATURED CAR
 411 | \*-----------------------------------*/
 412 | 
 413 | .featured-car .title-wrapper {
 414 |   display: flex;
 415 |   flex-wrap: wrap;
 416 |   justify-content: space-between;
 417 |   align-items: center;
 418 |   gap: 10px 15px;
 419 |   margin-bottom: 30px;
 420 | }
 421 | 
 422 | .featured-car-link {
 423 |   display: flex;
 424 |   align-items: center;
 425 |   gap: 5px;
 426 |   color: var(--independence);
 427 |   font-size: var(--fs-6);
 428 | }
 429 | 
 430 | .featured-car-link span { transition: var(--transition); }
 431 | 
 432 | .featured-car-link:is(:hover, :focus) span { color: var(--space-cadet); }
 433 | 
 434 | .featured-car-link ion-icon {
 435 |   margin-top: 3px;
 436 |   transition: var(--transition);
 437 | }
 438 | 
 439 | .featured-car-link:is(:hover, :focus) ion-icon { color: var(--carolina-blue); }
 440 | 
 441 | .featured-car-list {
 442 |   display: grid;
 443 |   grid-template-columns: minmax(0, 1fr);
 444 |   gap: 30px;
 445 | }
 446 | 
 447 | .featured-car-card {
 448 |   background: var(--gradient);
 449 |   border: 1px solid var(--white);
 450 |   border-radius: var(--radius-18);
 451 |   padding: 10px;
 452 |   box-shadow: var(--shadow-1);
 453 | }
 454 | 
 455 | .featured-car-card .card-banner {
 456 |   background: hsla(0, 0%, 0%, 0.2);
 457 |   aspect-ratio: 3 / 2;
 458 |   border-radius: var(--radius-18);
 459 |   overflow: hidden;
 460 | }
 461 | 
 462 | .featured-car-card .card-banner > img {
 463 |   height: 100%;
 464 |   object-fit: cover;
 465 | }
 466 | 
 467 | .featured-car-card .card-content { padding: 20px 10px 10px; }
 468 | 
 469 | .featured-car-card .card-title-wrapper {
 470 |   display: flex;
 471 |   justify-content: space-between;
 472 |   align-items: center;
 473 |   gap: 5px;
 474 |   margin-bottom: 15px;
 475 | }
 476 | 
 477 | .featured-car-card .card-title { width: calc(100% - 60px); }
 478 | 
 479 | .featured-car-card .card-title > a {
 480 |   color: inherit;
 481 |   width: 100%;
 482 |   white-space: nowrap;
 483 |   overflow: hidden;
 484 |   text-overflow: ellipsis;
 485 | }
 486 | 
 487 | .featured-car-card .card-title > a:is(:hover, :focus) { color: var(--carolina-blue); }
 488 | 
 489 | .featured-car-card .year {
 490 |   font-family: var(--ff-nunito);
 491 |   font-size: var(--fs-6);
 492 |   font-weight: var(--fw-600);
 493 |   padding: 3px 12px;
 494 |   border: 2px dashed hsla(204, 91%, 53%, 0.4);
 495 |   border-radius: var(--radius-14);
 496 | }
 497 | 
 498 | .featured-car-card .card-list {
 499 |   display: grid;
 500 |   grid-template-columns: 1fr;
 501 |   gap: 15px;
 502 |   padding-bottom: 15px;
 503 |   border-bottom: 1px solid hsla(0, 0%, 0%, 0.1);
 504 |   margin-bottom: 15px;
 505 | }
 506 | 
 507 | .featured-car-card .card-list-item {
 508 |   display: flex;
 509 |   align-items: center;
 510 |   gap: 8px;
 511 | }
 512 | 
 513 | .featured-car-card .card-list-item ion-icon {
 514 |   font-size: 20px;
 515 |   color: var(--carolina-blue);
 516 |   --ionicon-stroke-width: 38px;
 517 | }
 518 | 
 519 | .featured-car-card .card-item-text {
 520 |   color: var(--independence);
 521 |   font-size: var(--fs-6);
 522 | }
 523 | 
 524 | .featured-car-card .card-price-wrapper {
 525 |   display: flex;
 526 |   flex-wrap: wrap;
 527 |   justify-content: space-between;
 528 |   align-items: center;
 529 |   gap: 15px;
 530 | }
 531 | 
 532 | .featured-car-card .card-price {
 533 |   font-family: var(--ff-nunito);
 534 |   font-size: var(--fs-6);
 535 |   color: var(--space-cadet);
 536 | }
 537 | 
 538 | .featured-car-card .card-price strong {
 539 |   font-size: var(--fs-3);
 540 |   font-weight: var(--fw-400);
 541 | }
 542 | 
 543 | .featured-car-card .btn:last-child {
 544 |   --height: 36px;
 545 |   min-width: 100%;
 546 | }
 547 | 
 548 | .featured-car-card .fav-btn {
 549 |   --background: var(--beau-blue);
 550 |   --color: var(--blue-jeans);
 551 |   --height: 36px;
 552 |   --width: 36px;
 553 |   --shadow-2: none;
 554 | }
 555 | 
 556 | .featured-car-card .fav-btn ion-icon { font-size: 18px; }
 557 | 
 558 | .featured-car-card .fav-btn:is(:hover, :focus) {
 559 |   --background: var(--lavender-blush);
 560 |   --color: var(--red-salsa);
 561 | }
 562 | 
 563 | 
 564 | 
 565 | 
 566 | 
 567 | /*-----------------------------------*\
 568 |   #GET START
 569 | \*-----------------------------------*/
 570 | 
 571 | .get-start .section-title { margin-bottom: 25px; }
 572 | 
 573 | .get-start-list {
 574 |   display: grid;
 575 |   gap: 20px;
 576 | }
 577 | 
 578 | .get-start-card {
 579 |   background: var(--white);
 580 |   padding: 20px;
 581 |   border-radius: var(--radius-18);
 582 |   border: 1px solid var(--white);
 583 |   transition: var(--transition);
 584 | }
 585 | 
 586 | .get-start-card:hover {
 587 |   background: var(--alice-blue-2);
 588 |   box-shadow: var(--shadow-1);
 589 | }
 590 | 
 591 | .get-start-card .card-icon {
 592 |   background: var(--icon-card-bg, var(--columnia-blue));
 593 |   color: var(--icon-card-color, var(--carolina-blue));
 594 |   height: 50px;
 595 |   width: 50px;
 596 |   display: grid;
 597 |   place-items: center;
 598 |   border-radius: var(--radius-14);
 599 |   margin-bottom: 20px;
 600 | }
 601 | 
 602 | .get-start-card .card-icon ion-icon {
 603 |   font-size: 26px;
 604 |   --ionicon-stroke-width: 45px;
 605 | }
 606 | 
 607 | .get-start-card .icon-1 {
 608 |   --icon-card-bg: var(--mimi-pink);
 609 |   --icon-card-color: var(--deep-cerise);
 610 | }
 611 | 
 612 | .get-start-card .icon-2 {
 613 |   --icon-card-bg: var(--columbia-blue);
 614 |   --icon-card-color: var(--carolina-blue);
 615 | }
 616 | 
 617 | .get-start-card .icon-3 {
 618 |   --icon-card-bg: var(--honey-dew);
 619 |   --icon-card-color: var(--medium-sea-green);
 620 | }
 621 | 
 622 | .get-start-card .icon-4 {
 623 |   --icon-card-bg: var(--pale-purple-pantone);
 624 |   --icon-card-color: var(--slate-blue);
 625 | }
 626 | 
 627 | .get-start-card .card-title {
 628 |   color: var(--space-cadet);
 629 |   font-family: var(--ff-nunito);
 630 |   font-weight: var(--fw-400);
 631 |   margin-bottom: 15px;
 632 | }
 633 | 
 634 | .get-start-card .card-text { color: var(--independence); }
 635 | 
 636 | .get-start-card .card-link {
 637 |   position: relative;
 638 |   color: var(--carolina-blue);
 639 |   width: max-content;
 640 | }
 641 | 
 642 | .get-start-card .card-link::before {
 643 |   content: "";
 644 |   position: absolute;
 645 |   bottom: 0;
 646 |   left: 0;
 647 |   width: 0;
 648 |   height: 2px;
 649 |   background: var(--carolina-blue);
 650 |   transition: var(--transition);
 651 | }
 652 | 
 653 | .get-start-card .card-link:is(:hover, :focus)::before { width: 100%; }
 654 | 
 655 | 
 656 | 
 657 | 
 658 | 
 659 | /*-----------------------------------*\
 660 |   #BLOG
 661 | \*-----------------------------------*/
 662 | 
 663 | .blog .section-title { margin-bottom: 30px; }
 664 | 
 665 | .blog-card {
 666 |   background: var(--alice-blue-2);
 667 |   border-radius: var(--radius-18);
 668 |   border: 1px solid var(--white);
 669 |   box-shadow: var(--shadow-1);
 670 |   overflow: hidden;
 671 | }
 672 | 
 673 | .blog-card .card-banner {
 674 |   aspect-ratio: 3 / 2;
 675 |   position: relative;
 676 |   overflow: hidden;
 677 | }
 678 | 
 679 | .blog-card .card-banner a:first-child { height: 100%; }
 680 | 
 681 | .blog-card .card-banner img {
 682 |   height: 100%;
 683 |   object-fit: cover;
 684 | }
 685 | 
 686 | .blog-card .card-badge {
 687 |   position: absolute;
 688 |   bottom: 20px;
 689 |   left: 20px;
 690 |   --height: 30px;
 691 |   --width: 92px;
 692 | }
 693 | 
 694 | .blog-card .card-content { padding: 20px; }
 695 | 
 696 | .blog-card .card-title { margin-bottom: 20px; }
 697 | 
 698 | .blog-card .card-title > a { color: inherit; }
 699 | 
 700 | .blog-card .card-title > a:is(:hover, :focus) { color: var(--carolina-blue); }
 701 | 
 702 | .blog-card .card-meta {
 703 |   display: flex;
 704 |   justify-content: space-between;
 705 |   align-items: center;
 706 | }
 707 | 
 708 | .blog-card :is(.publish-date, .comments) {
 709 |   display: flex;
 710 |   align-items: center;
 711 |   gap: 5px;
 712 |   font-size: var(--fs-6);
 713 |   color: var(--independence);
 714 | }
 715 | 
 716 | .blog-card :is(.publish-date, .comments) ion-icon {
 717 |   font-size: 15px;
 718 |   --ionicon-stroke-width: 50px;
 719 | }
 720 | 
 721 | .blog .has-scrollbar {
 722 |   display: flex;
 723 |   gap: 20px;
 724 |   scroll-snap-type: inline mandatory;
 725 |   overflow-x: auto;
 726 |   padding-bottom: 20px;
 727 | }
 728 | 
 729 | .blog .has-scrollbar > li {
 730 |   flex-shrink: 0;
 731 |   max-width: 330px;
 732 |   width: 100%;
 733 |   scroll-snap-align: start;
 734 | }
 735 | 
 736 | .has-scrollbar::-webkit-scrollbar-track {
 737 |   background: var(--alice-blue-1);
 738 |   outline: 2px solid var(--carolina-blue);
 739 |   border-radius: 10px;
 740 | }
 741 | 
 742 | .has-scrollbar::-webkit-scrollbar-thumb {
 743 |   border-color: var(--alice-blue-1);
 744 |   background: var(--carolina-blue);
 745 |   border-radius: 10px;
 746 | }
 747 | 
 748 | .has-scrollbar::-webkit-scrollbar-button { width: calc(25% - 40px); }
 749 | 
 750 | 
 751 | 
 752 | 
 753 | 
 754 | /*-----------------------------------*\
 755 |   #FOOTER
 756 | \*-----------------------------------*/
 757 | 
 758 | .footer {
 759 |   background: var(--alice-blue-4);
 760 |   color: var(--independence);
 761 | }
 762 | 
 763 | .footer a { color: inherit; }
 764 | 
 765 | .footer-top {
 766 |   padding-block: 60px;
 767 |   display: flex;
 768 |   flex-wrap: wrap;
 769 |   justify-content: space-between;
 770 |   align-items: flex-start;
 771 |   row-gap: 50px;
 772 | }
 773 | 
 774 | .footer-top .logo { margin-bottom: 20px; }
 775 | 
 776 | .footer-text {
 777 |   font-size: var(--fs-6);
 778 |   line-height: 1.8;
 779 | }
 780 | 
 781 | .footer-list { font-family: var(--ff-nunito); }
 782 | 
 783 | .footer-list:not(:last-of-type) { width: 50%; }
 784 | 
 785 | .footer-list:last-of-type {
 786 |   width: 100%;
 787 |   column-count: 2;
 788 | }
 789 | 
 790 | .footer-list-title {
 791 |   color: var(--space-cadet);
 792 |   font-weight: var(--fw-600);
 793 |   margin-bottom: 8px;
 794 | }
 795 | 
 796 | .footer-link {
 797 |   font-size: var(--fs-6);
 798 |   padding-block: 6px;
 799 | }
 800 | 
 801 | .footer-link:is(:hover, :focus) { color: var(--carolina-blue); }
 802 | 
 803 | .footer-list:last-child > li:first-child { column-span: all; }
 804 | 
 805 | .footer-bottom {
 806 |   background: var(--gradient);
 807 |   border: 1px solid var(--white);
 808 |   border-radius: var(--radius-18) var(--radius-18) 0 0;
 809 |   padding: 20px;
 810 | }
 811 | 
 812 | .social-list {
 813 |   display: flex;
 814 |   align-items: center;
 815 |   gap: 20px;
 816 |   margin-bottom: 20px;
 817 | }
 818 | 
 819 | .social-link { font-size: 20px; }
 820 | 
 821 | .social-link ion-icon { --ionicon-stroke-width: 40px; }
 822 | 
 823 | .social-link:is(:hover, :focus) { color: var(--carolina-blue); }
 824 | 
 825 | .copyright { font-size: var(--fs-6); }
 826 | 
 827 | .copyright > a { display: inline-block; }
 828 | 
 829 | .copyright > a:is(:hover, :focus) { color: var(--carolina-blue); }
 830 | 
 831 | 
 832 | 
 833 | 
 834 | 
 835 | /*-----------------------------------*\
 836 |   #MEDIA QUERIES
 837 | \*-----------------------------------*/
 838 | 
 839 | /**
 840 |  * responsive for large than 350px screen
 841 |  */
 842 | 
 843 | @media (min-width: 350px) {
 844 | 
 845 |   /**
 846 |    * FEATURED CAR
 847 |    */
 848 | 
 849 |   .featured-car-card .card-list { grid-template-columns: 1fr 1fr; }
 850 | 
 851 |   .featured-car-card .card-price { margin-right: auto; }
 852 | 
 853 |   .featured-car-card .btn:last-child {
 854 |     min-width: max-content;
 855 |     padding-inline: 15px;
 856 |   }
 857 | 
 858 | }
 859 | 
 860 | 
 861 | 
 862 | 
 863 | 
 864 | /**
 865 |  * responsive for large than 580px screen
 866 |  */
 867 | 
 868 | @media (min-width: 580px) {
 869 | 
 870 |   /**
 871 |    * REUSED STYLE
 872 |    */
 873 | 
 874 |   .container {
 875 |     max-width: 540px;
 876 |     margin-inline: auto;
 877 |   }
 878 | 
 879 | 
 880 | 
 881 |   /**
 882 |    * HEADER
 883 |    */
 884 | 
 885 |   .header-actions .btn span {
 886 |     display: block;
 887 |     font-weight: var(--fw-400);
 888 |     padding-inline: 15px;
 889 |   }
 890 | 
 891 |   .header-actions .btn:first-of-type ion-icon { display: none; }
 892 | 
 893 | }
 894 | 
 895 | 
 896 | 
 897 | 
 898 | 
 899 | /**
 900 |  * responsive for large than 768px screen
 901 |  */
 902 | 
 903 | @media (min-width: 768px) {
 904 | 
 905 |   /**
 906 |    * CUSTOM PROPERTY
 907 |    */
 908 | 
 909 |   :root {
 910 | 
 911 |     /**
 912 |      * typography
 913 |      */
 914 | 
 915 |     --fs-1: 2.625rem;
 916 | 
 917 |   }
 918 | 
 919 | 
 920 | 
 921 |   /**
 922 |    * REUSED STYLE
 923 |    */
 924 | 
 925 |   .container { max-width: 720px; }
 926 | 
 927 | 
 928 | 
 929 |   /**
 930 |    * HEADER
 931 |    */
 932 | 
 933 |   .header-actions { gap: 30px; }
 934 | 
 935 |   .header-contact {
 936 |     display: block;
 937 |     text-align: center;
 938 |   }
 939 | 
 940 |   .header-contact .contact-link {
 941 |     color: var(--space-cadet);
 942 |     font-family: var(--ff-nunito);
 943 |     font-size: var(--fs-5);
 944 |     line-height: 1.3;
 945 |   }
 946 | 
 947 |   .header-contact .contact-link:is(:hover, :focus) { color: var(--carolina-blue); }
 948 | 
 949 |   .header-contact .contact-time {
 950 |     color: var(--independence);
 951 |     font-size: var(--fs-7);
 952 |   }
 953 | 
 954 | 
 955 | 
 956 |   /**
 957 |    * HERO
 958 |    */
 959 | 
 960 |   .hero {
 961 |     position: relative;
 962 |     min-height: 85vh;
 963 |     display: flex;
 964 |     align-items: center;
 965 |     z-index: 1;
 966 |   }
 967 | 
 968 |   .hero-form {
 969 |     display: grid;
 970 |     grid-template-columns: 1fr 1fr 1fr 0.8fr;
 971 |   }
 972 | 
 973 |   .input-wrapper:not(:last-of-type) {
 974 |     border-bottom: none;
 975 |     border-right: 1px solid hsla(0, 0%, 0%, 0.08);
 976 |   }
 977 | 
 978 |   .input-label {
 979 |     white-space: nowrap;
 980 |     overflow: hidden;
 981 |     text-overflow: ellipsis;
 982 |   }
 983 | 
 984 |   .hero-banner {
 985 |     display: block;
 986 |     background: url("../images/hero-banner.jpg") no-repeat;
 987 |     background-size: cover;
 988 |     background-position: left;
 989 |     position: absolute;
 990 |     top: 100px;
 991 |     bottom: 50px;
 992 |     left: 65%;
 993 |     width: 500px;
 994 |     border-radius: 30px;
 995 |     z-index: -1;
 996 |   }
 997 | 
 998 | 
 999 | 
1000 |   /**
1001 |    * FEATURED CAR
1002 |    */
1003 | 
1004 |   .featured-car-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
1005 | 
1006 | 
1007 | 
1008 |   /**
1009 |    * GET START
1010 |    */
1011 | 
1012 |   .get-start-list { grid-template-columns: 1fr 1fr; }
1013 | 
1014 | 
1015 | 
1016 |   /**
1017 |    * FOOTER
1018 |    */
1019 | 
1020 |   .footer-brand { width: 100%; }
1021 | 
1022 |   .footer-text { max-width: 400px; }
1023 | 
1024 |   .footer-bottom {
1025 |     display: flex;
1026 |     flex-direction: row-reverse;
1027 |     justify-content: space-between;
1028 |     align-items: center;
1029 |     padding-block: 30px;
1030 |     box-shadow: var(--shadow-1);
1031 |   }
1032 | 
1033 |   .social-list { margin-bottom: 0; }
1034 | 
1035 | }
1036 | 
1037 | 
1038 | 
1039 | 
1040 | 
1041 | /**
1042 |  * responsive for large than 992px screen
1043 |  */
1044 | 
1045 | @media (min-width: 992px) {
1046 | 
1047 |   /**
1048 |    * REUSED STYLE
1049 |    */
1050 | 
1051 |   .container { max-width: 960px; }
1052 | 
1053 | 
1054 | 
1055 |   /**
1056 |    * HERO
1057 |    */
1058 | 
1059 |   .hero .container { width: 100%; }
1060 | 
1061 | 
1062 | 
1063 |   /**
1064 |    * BLOG
1065 |    */
1066 | 
1067 |   .blog .has-scrollbar { padding-bottom: 50px; }
1068 | 
1069 |   .blog .has-scrollbar > li { max-width: 450px; }
1070 | 
1071 | 
1072 | 
1073 |   /**
1074 |    * FOOTER
1075 |    */
1076 | 
1077 |   .footer-list:not(:last-of-type) { width: 25%; }
1078 | 
1079 |   .footer-list:last-of-type { width: 50%; }
1080 | 
1081 | }
1082 | 
1083 | 
1084 | 
1085 | 
1086 | 
1087 | /**
1088 |  * responsive for large than 1200px screen
1089 |  */
1090 | 
1091 | @media (min-width: 1200px) {
1092 | 
1093 |   /**
1094 |    * CUSTOM PROPERTY
1095 |    */
1096 | 
1097 |   :root {
1098 | 
1099 |     /**
1100 |      * typography
1101 |      */
1102 | 
1103 |     --fs-1: 2.875rem;
1104 |     --fs-2: 2rem;
1105 | 
1106 |   }
1107 | 
1108 | 
1109 | 
1110 |   /**
1111 |    * REUSED STYLE
1112 |    */
1113 | 
1114 |   .container { max-width: 1170px; }
1115 | 
1116 | 
1117 | 
1118 | 
1119 |   /**
1120 |    * HEADER
1121 |    */
1122 | 
1123 |   .overlay,
1124 |   .nav-toggle-btn { display: none; }
1125 | 
1126 |   .navbar,
1127 |   .navbar.active { all: unset; }
1128 | 
1129 |   .navbar-link {
1130 |     margin-bottom: 0;
1131 |     font-weight: var(--fw-600);
1132 |   }
1133 | 
1134 |   .navbar-list {
1135 |     display: flex;
1136 |     gap: 50px;
1137 |   }
1138 | 
1139 | 
1140 | 
1141 |   /**
1142 |    * HERO
1143 |    */
1144 | 
1145 |   .hero { min-height: 100vh; }
1146 | 
1147 |   .hero-banner {
1148 |     left: auto;
1149 |     right: 50px;
1150 |     width: 630px;
1151 |   }
1152 | 
1153 |   .hero-form { max-width: 900px; }
1154 | 
1155 |   .hero-form .btn {
1156 |     --width: calc(100% - 40px);
1157 |     --height: 50px;
1158 |     margin: 20px;
1159 |     text-transform: uppercase;
1160 |   }
1161 | 
1162 | 
1163 | 
1164 |   /**
1165 |    * FEATURED CAR 
1166 |    */
1167 | 
1168 |   .featured-car-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
1169 | 
1170 | 
1171 | 
1172 |   /**
1173 |    * GET START
1174 |    */
1175 | 
1176 |   .get-start-list { grid-template-columns: repeat(4, 1fr); }
1177 | 
1178 | 
1179 | 
1180 |   /**
1181 |    * BLOG
1182 |    */
1183 | 
1184 |   .blog .has-scrollbar > li {
1185 |     max-width: 340px;
1186 |     scroll-snap-align: center;
1187 |   }
1188 | 
1189 | 
1190 | 
1191 |   /**
1192 |    * FOOTER
1193 |    */
1194 | 
1195 |   .footer-brand { width: 33.33%; }
1196 | 
1197 |   .footer-text { max-width: 35ch; }
1198 | 
1199 |   .footer-list:not(:last-of-type) { width: 16.66%; }
1200 | 
1201 |   .footer-list:last-of-type { width: 33.33%; }
1202 | 
1203 | }


--------------------------------------------------------------------------------
/assets/images/blog-1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codewithsadee/ridex/473d9444c36dd45066d737a2eb14252713f6a38b/assets/images/blog-1.jpg


--------------------------------------------------------------------------------
/assets/images/blog-2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codewithsadee/ridex/473d9444c36dd45066d737a2eb14252713f6a38b/assets/images/blog-2.jpg


--------------------------------------------------------------------------------
/assets/images/blog-3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codewithsadee/ridex/473d9444c36dd45066d737a2eb14252713f6a38b/assets/images/blog-3.jpg


--------------------------------------------------------------------------------
/assets/images/blog-4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codewithsadee/ridex/473d9444c36dd45066d737a2eb14252713f6a38b/assets/images/blog-4.jpg


--------------------------------------------------------------------------------
/assets/images/blog-5.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codewithsadee/ridex/473d9444c36dd45066d737a2eb14252713f6a38b/assets/images/blog-5.jpg


--------------------------------------------------------------------------------
/assets/images/car-1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codewithsadee/ridex/473d9444c36dd45066d737a2eb14252713f6a38b/assets/images/car-1.jpg


--------------------------------------------------------------------------------
/assets/images/car-2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codewithsadee/ridex/473d9444c36dd45066d737a2eb14252713f6a38b/assets/images/car-2.jpg


--------------------------------------------------------------------------------
/assets/images/car-3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codewithsadee/ridex/473d9444c36dd45066d737a2eb14252713f6a38b/assets/images/car-3.jpg


--------------------------------------------------------------------------------
/assets/images/car-4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codewithsadee/ridex/473d9444c36dd45066d737a2eb14252713f6a38b/assets/images/car-4.jpg


--------------------------------------------------------------------------------
/assets/images/car-5.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codewithsadee/ridex/473d9444c36dd45066d737a2eb14252713f6a38b/assets/images/car-5.jpg


--------------------------------------------------------------------------------
/assets/images/car-6.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codewithsadee/ridex/473d9444c36dd45066d737a2eb14252713f6a38b/assets/images/car-6.jpg


--------------------------------------------------------------------------------
/assets/images/hero-banner.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codewithsadee/ridex/473d9444c36dd45066d737a2eb14252713f6a38b/assets/images/hero-banner.jpg


--------------------------------------------------------------------------------
/assets/images/logo.svg:
--------------------------------------------------------------------------------
 1 | <svg width="70" height="21" viewBox="0 0 70 21" fill="none" xmlns="http://www.w3.org/2000/svg">
 2 | <g clip-path="url(#clip0_1_2)">
 3 | <path d="M1.752 20.196C0.781333 20.196 0.296 19.7013 0.296 18.712V1.744C0.296 0.754666 0.790667 0.259999 1.78 0.259999H8.472C10.6 0.259999 12.2427 0.773332 13.4 1.8C14.5573 2.808 15.136 4.22667 15.136 6.056C15.136 7.53067 14.744 8.744 13.96 9.696C13.176 10.6293 12.0653 11.2547 10.628 11.572C11.524 11.8707 12.28 12.5893 12.896 13.728L15.304 18.208C15.584 18.712 15.64 19.1693 15.472 19.58C15.304 19.9907 14.9213 20.196 14.324 20.196C13.9133 20.196 13.5773 20.112 13.316 19.944C13.0547 19.776 12.8307 19.5053 12.644 19.132L9.704 13.7C9.312 12.972 8.85467 12.4867 8.332 12.244C7.828 11.9827 7.17467 11.852 6.372 11.852H3.208V18.712C3.208 19.7013 2.72267 20.196 1.752 20.196ZM3.208 9.668H7.996C10.8707 9.668 12.308 8.48267 12.308 6.112C12.308 3.76 10.8707 2.584 7.996 2.584H3.208V9.668ZM20.3372 3.284C19.7772 3.284 19.3386 3.144 19.0212 2.864C18.7226 2.584 18.5732 2.192 18.5732 1.688C18.5732 0.623999 19.1612 0.0919993 20.3372 0.0919993C21.5132 0.0919993 22.1012 0.623999 22.1012 1.688C22.1012 2.752 21.5132 3.284 20.3372 3.284ZM20.3372 20.168C19.4039 20.168 18.9372 19.6547 18.9372 18.628V7.708C18.9372 6.7 19.4039 6.196 20.3372 6.196C21.2892 6.196 21.7652 6.7 21.7652 7.708V18.628C21.7652 19.6547 21.2892 20.168 20.3372 20.168ZM30.9538 20.252C29.7591 20.252 28.7045 19.972 27.7898 19.412C26.8938 18.8333 26.1938 18.012 25.6898 16.948C25.1858 15.884 24.9338 14.624 24.9338 13.168C24.9338 11.712 25.1858 10.4613 25.6898 9.416C26.1938 8.352 26.8938 7.53067 27.7898 6.952C28.6858 6.37333 29.7405 6.084 30.9538 6.084C31.9805 6.084 32.8951 6.308 33.6978 6.756C34.5005 7.204 35.0978 7.81067 35.4898 8.576V1.492C35.4898 0.54 35.9565 0.0639997 36.8898 0.0639997C37.8418 0.0639997 38.3178 0.54 38.3178 1.492V18.768C38.3178 19.72 37.8511 20.196 36.9178 20.196C35.9845 20.196 35.5178 19.72 35.5178 18.768V17.704C35.1071 18.488 34.5005 19.1133 33.6978 19.58C32.8951 20.028 31.9805 20.252 30.9538 20.252ZM31.6818 18.068C32.8391 18.068 33.7725 17.648 34.4818 16.808C35.1911 15.968 35.5458 14.7547 35.5458 13.168C35.5458 11.5813 35.1911 10.3773 34.4818 9.556C33.7725 8.716 32.8391 8.296 31.6818 8.296C30.5058 8.296 29.5631 8.716 28.8538 9.556C28.1445 10.3773 27.7898 11.5813 27.7898 13.168C27.7898 14.7547 28.1445 15.968 28.8538 16.808C29.5631 17.648 30.5058 18.068 31.6818 18.068ZM48.7008 20.252C46.4608 20.252 44.6968 19.6267 43.4088 18.376C42.1208 17.1067 41.4768 15.38 41.4768 13.196C41.4768 11.796 41.7568 10.564 42.3168 9.5C42.8954 8.41733 43.6888 7.57733 44.6968 6.98C45.7048 6.38267 46.8621 6.084 48.1688 6.084C50.0541 6.084 51.5381 6.69067 52.6208 7.904C53.7034 9.09867 54.2448 10.7507 54.2448 12.86C54.2448 13.4947 53.8714 13.812 53.1248 13.812H44.2208C44.4261 16.6493 45.9288 18.068 48.7288 18.068C49.2888 18.068 49.8768 18.0027 50.4928 17.872C51.1088 17.7227 51.7061 17.4613 52.2848 17.088C52.6768 16.864 53.0128 16.7893 53.2928 16.864C53.5914 16.92 53.8061 17.0787 53.9368 17.34C54.0674 17.5827 54.0861 17.8627 53.9928 18.18C53.9181 18.4787 53.7034 18.74 53.3488 18.964C52.7141 19.3933 51.9674 19.72 51.1088 19.944C50.2688 20.1493 49.4661 20.252 48.7008 20.252ZM48.2808 8.072C47.1048 8.072 46.1714 8.436 45.4808 9.164C44.7901 9.892 44.3701 10.8627 44.2208 12.076H51.8648C51.8088 10.8067 51.4728 9.82667 50.8568 9.136C50.2408 8.42667 49.3821 8.072 48.2808 8.072ZM57.6945 20.168C57.1905 20.168 56.8265 19.9627 56.6025 19.552C56.3971 19.1413 56.4998 18.6747 56.9105 18.152L61.1105 12.944L57.2185 8.128C56.7891 7.624 56.6865 7.16667 56.9105 6.756C57.1345 6.34533 57.4891 6.14 57.9745 6.14C58.3291 6.14 58.6185 6.20533 58.8425 6.336C59.0851 6.448 59.3091 6.644 59.5145 6.924L62.7345 11.012L65.9825 6.924C66.1878 6.644 66.4025 6.448 66.6265 6.336C66.8505 6.20533 67.1398 6.14 67.4945 6.14C67.9798 6.14 68.3345 6.34533 68.5585 6.756C68.7825 7.16667 68.6798 7.63333 68.2505 8.156L64.3585 12.972L68.5585 18.152C68.9691 18.656 69.0625 19.1227 68.8385 19.552C68.6331 19.9627 68.2785 20.168 67.7745 20.168C67.1585 20.168 66.6451 19.9067 66.2345 19.384L62.7065 14.96L59.2065 19.384C59.0011 19.6453 58.7865 19.8413 58.5625 19.972C58.3385 20.1027 58.0491 20.168 57.6945 20.168Z" fill="#33334F"/>
 4 | </g>
 5 | <defs>
 6 | <clipPath id="clip0_1_2">
 7 | <rect width="70" height="21" fill="white"/>
 8 | </clipPath>
 9 | </defs>
10 | </svg>
11 | 


--------------------------------------------------------------------------------
/assets/js/script.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | /**
 4 |  * navbar toggle
 5 |  */
 6 | 
 7 | const overlay = document.querySelector("[data-overlay]");
 8 | const navbar = document.querySelector("[data-navbar]");
 9 | const navToggleBtn = document.querySelector("[data-nav-toggle-btn]");
10 | const navbarLinks = document.querySelectorAll("[data-nav-link]");
11 | 
12 | const navToggleFunc = function () {
13 |   navToggleBtn.classList.toggle("active");
14 |   navbar.classList.toggle("active");
15 |   overlay.classList.toggle("active");
16 | }
17 | 
18 | navToggleBtn.addEventListener("click", navToggleFunc);
19 | overlay.addEventListener("click", navToggleFunc);
20 | 
21 | for (let i = 0; i < navbarLinks.length; i++) {
22 |   navbarLinks[i].addEventListener("click", navToggleFunc);
23 | }
24 | 
25 | 
26 | 
27 | /**
28 |  * header active on scroll
29 |  */
30 | 
31 | const header = document.querySelector("[data-header]");
32 | 
33 | window.addEventListener("scroll", function () {
34 |   window.scrollY >= 10 ? header.classList.add("active")
35 |     : header.classList.remove("active");
36 | });


--------------------------------------------------------------------------------
/favicon.svg:
--------------------------------------------------------------------------------
 1 | <svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
 2 | <g clip-path="url(#clip0_3_2)">
 3 | <rect width="36" height="36" rx="8" fill="#33334F"/>
 4 | <path d="M12.752 28.196C11.7813 28.196 11.296 27.7013 11.296 26.712V9.744C11.296 8.75467 11.7907 8.26 12.78 8.26H19.472C21.6 8.26 23.2427 8.77333 24.4 9.8C25.5573 10.808 26.136 12.2267 26.136 14.056C26.136 15.5307 25.744 16.744 24.96 17.696C24.176 18.6293 23.0653 19.2547 21.628 19.572C22.524 19.8707 23.28 20.5893 23.896 21.728L26.304 26.208C26.584 26.712 26.64 27.1693 26.472 27.58C26.304 27.9907 25.9213 28.196 25.324 28.196C24.9133 28.196 24.5773 28.112 24.316 27.944C24.0547 27.776 23.8307 27.5053 23.644 27.132L20.704 21.7C20.312 20.972 19.8547 20.4867 19.332 20.244C18.828 19.9827 18.1747 19.852 17.372 19.852H14.208V26.712C14.208 27.7013 13.7227 28.196 12.752 28.196ZM14.208 17.668H18.996C21.8707 17.668 23.308 16.4827 23.308 14.112C23.308 11.76 21.8707 10.584 18.996 10.584H14.208V17.668Z" fill="white"/>
 5 | </g>
 6 | <defs>
 7 | <clipPath id="clip0_3_2">
 8 | <rect width="36" height="36" rx="8" fill="white"/>
 9 | </clipPath>
10 | </defs>
11 | </svg>
12 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
   1 | <!DOCTYPE html>
   2 | <html lang="en">
   3 | 
   4 | <head>
   5 |   <meta charset="UTF-8">
   6 |   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   7 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   8 |   <title>Ridex - Rent your favourite car</title>
   9 | 
  10 |   <!-- 
  11 |     - favicon
  12 |   -->
  13 |   <link rel="shortcut icon" href="./favicon.svg" type="image/svg+xml">
  14 | 
  15 |   <!-- 
  16 |     - custom css link
  17 |   -->
  18 |   <link rel="stylesheet" href="./assets/css/style.css">
  19 | 
  20 |   <!-- 
  21 |     - google font link
  22 |   -->
  23 |   <link rel="preconnect" href="https://fonts.googleapis.com">
  24 |   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  25 |   <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600&family=Open+Sans&display=swap"
  26 |     rel="stylesheet">
  27 | </head>
  28 | 
  29 | <body>
  30 | 
  31 |   <!-- 
  32 |     - #HEADER
  33 |   -->
  34 | 
  35 |   <header class="header" data-header>
  36 |     <div class="container">
  37 | 
  38 |       <div class="overlay" data-overlay></div>
  39 | 
  40 |       <a href="#" class="logo">
  41 |         <img src="./assets/images/logo.svg" alt="Ridex logo">
  42 |       </a>
  43 | 
  44 |       <nav class="navbar" data-navbar>
  45 |         <ul class="navbar-list">
  46 | 
  47 |           <li>
  48 |             <a href="#home" class="navbar-link" data-nav-link>Home</a>
  49 |           </li>
  50 | 
  51 |           <li>
  52 |             <a href="#featured-car" class="navbar-link" data-nav-link>Explore cars</a>
  53 |           </li>
  54 | 
  55 |           <li>
  56 |             <a href="#" class="navbar-link" data-nav-link>About us</a>
  57 |           </li>
  58 | 
  59 |           <li>
  60 |             <a href="#blog" class="navbar-link" data-nav-link>Blog</a>
  61 |           </li>
  62 | 
  63 |         </ul>
  64 |       </nav>
  65 | 
  66 |       <div class="header-actions">
  67 | 
  68 |         <div class="header-contact">
  69 |           <a href="tel:88002345678" class="contact-link">8 800 234 56 78</a>
  70 | 
  71 |           <span class="contact-time">Mon - Sat: 9:00 am - 6:00 pm</span>
  72 |         </div>
  73 | 
  74 |         <a href="#featured-car" class="btn" aria-labelledby="aria-label-txt">
  75 |           <ion-icon name="car-outline"></ion-icon>
  76 | 
  77 |           <span id="aria-label-txt">Explore cars</span>
  78 |         </a>
  79 | 
  80 |         <a href="#" class="btn user-btn" aria-label="Profile">
  81 |           <ion-icon name="person-outline"></ion-icon>
  82 |         </a>
  83 | 
  84 |         <button class="nav-toggle-btn" data-nav-toggle-btn aria-label="Toggle Menu">
  85 |           <span class="one"></span>
  86 |           <span class="two"></span>
  87 |           <span class="three"></span>
  88 |         </button>
  89 | 
  90 |       </div>
  91 | 
  92 |     </div>
  93 |   </header>
  94 | 
  95 | 
  96 | 
  97 | 
  98 | 
  99 |   <main>
 100 |     <article>
 101 | 
 102 |       <!-- 
 103 |         - #HERO
 104 |       -->
 105 | 
 106 |       <section class="section hero" id="home">
 107 |         <div class="container">
 108 | 
 109 |           <div class="hero-content">
 110 |             <h2 class="h1 hero-title">The easy way to takeover a lease</h2>
 111 | 
 112 |             <p class="hero-text">
 113 |               Live in New York, New Jerset and Connecticut!
 114 |             </p>
 115 |           </div>
 116 | 
 117 |           <div class="hero-banner"></div>
 118 | 
 119 |           <form action="" class="hero-form">
 120 | 
 121 |             <div class="input-wrapper">
 122 |               <label for="input-1" class="input-label">Car, model, or brand</label>
 123 | 
 124 |               <input type="text" name="car-model" id="input-1" class="input-field"
 125 |                 placeholder="What car are you looking?">
 126 |             </div>
 127 | 
 128 |             <div class="input-wrapper">
 129 |               <label for="input-2" class="input-label">Max. monthly payment</label>
 130 | 
 131 |               <input type="text" name="monthly-pay" id="input-2" class="input-field" placeholder="Add an amount in $">
 132 |             </div>
 133 | 
 134 |             <div class="input-wrapper">
 135 |               <label for="input-3" class="input-label">Make Year</label>
 136 | 
 137 |               <input type="text" name="year" id="input-3" class="input-field" placeholder="Add a minimal make year">
 138 |             </div>
 139 | 
 140 |             <button type="submit" class="btn">Search</button>
 141 | 
 142 |           </form>
 143 | 
 144 |         </div>
 145 |       </section>
 146 | 
 147 | 
 148 | 
 149 | 
 150 | 
 151 |       <!-- 
 152 |         - #FEATURED CAR
 153 |       -->
 154 | 
 155 |       <section class="section featured-car" id="featured-car">
 156 |         <div class="container">
 157 | 
 158 |           <div class="title-wrapper">
 159 |             <h2 class="h2 section-title">Featured cars</h2>
 160 | 
 161 |             <a href="#" class="featured-car-link">
 162 |               <span>View more</span>
 163 | 
 164 |               <ion-icon name="arrow-forward-outline"></ion-icon>
 165 |             </a>
 166 |           </div>
 167 | 
 168 |           <ul class="featured-car-list">
 169 | 
 170 |             <li>
 171 |               <div class="featured-car-card">
 172 | 
 173 |                 <figure class="card-banner">
 174 |                   <img src="./assets/images/car-1.jpg" alt="Toyota RAV4 2021" loading="lazy" width="440" height="300"
 175 |                     class="w-100">
 176 |                 </figure>
 177 | 
 178 |                 <div class="card-content">
 179 | 
 180 |                   <div class="card-title-wrapper">
 181 |                     <h3 class="h3 card-title">
 182 |                       <a href="#">Toyota RAV4</a>
 183 |                     </h3>
 184 | 
 185 |                     <data class="year" value="2021">2021</data>
 186 |                   </div>
 187 | 
 188 |                   <ul class="card-list">
 189 | 
 190 |                     <li class="card-list-item">
 191 |                       <ion-icon name="people-outline"></ion-icon>
 192 | 
 193 |                       <span class="card-item-text">4 People</span>
 194 |                     </li>
 195 | 
 196 |                     <li class="card-list-item">
 197 |                       <ion-icon name="flash-outline"></ion-icon>
 198 | 
 199 |                       <span class="card-item-text">Hybrid</span>
 200 |                     </li>
 201 | 
 202 |                     <li class="card-list-item">
 203 |                       <ion-icon name="speedometer-outline"></ion-icon>
 204 | 
 205 |                       <span class="card-item-text">6.1km / 1-litre</span>
 206 |                     </li>
 207 | 
 208 |                     <li class="card-list-item">
 209 |                       <ion-icon name="hardware-chip-outline"></ion-icon>
 210 | 
 211 |                       <span class="card-item-text">Automatic</span>
 212 |                     </li>
 213 | 
 214 |                   </ul>
 215 | 
 216 |                   <div class="card-price-wrapper">
 217 | 
 218 |                     <p class="card-price">
 219 |                       <strong>$440</strong> / month
 220 |                     </p>
 221 | 
 222 |                     <button class="btn fav-btn" aria-label="Add to favourite list">
 223 |                       <ion-icon name="heart-outline"></ion-icon>
 224 |                     </button>
 225 | 
 226 |                     <button class="btn">Rent now</button>
 227 | 
 228 |                   </div>
 229 | 
 230 |                 </div>
 231 | 
 232 |               </div>
 233 |             </li>
 234 | 
 235 |             <li>
 236 |               <div class="featured-car-card">
 237 | 
 238 |                 <figure class="card-banner">
 239 |                   <img src="./assets/images/car-2.jpg" alt="BMW 3 Series 2019" loading="lazy" width="440" height="300"
 240 |                     class="w-100">
 241 |                 </figure>
 242 | 
 243 |                 <div class="card-content">
 244 | 
 245 |                   <div class="card-title-wrapper">
 246 |                     <h3 class="h3 card-title">
 247 |                       <a href="#">BMW 3 Series</a>
 248 |                     </h3>
 249 | 
 250 |                     <data class="year" value="2019">2019</data>
 251 |                   </div>
 252 | 
 253 |                   <ul class="card-list">
 254 | 
 255 |                     <li class="card-list-item">
 256 |                       <ion-icon name="people-outline"></ion-icon>
 257 | 
 258 |                       <span class="card-item-text">4 People</span>
 259 |                     </li>
 260 | 
 261 |                     <li class="card-list-item">
 262 |                       <ion-icon name="flash-outline"></ion-icon>
 263 | 
 264 |                       <span class="card-item-text">Gasoline</span>
 265 |                     </li>
 266 | 
 267 |                     <li class="card-list-item">
 268 |                       <ion-icon name="speedometer-outline"></ion-icon>
 269 | 
 270 |                       <span class="card-item-text">8.2km / 1-litre</span>
 271 |                     </li>
 272 | 
 273 |                     <li class="card-list-item">
 274 |                       <ion-icon name="hardware-chip-outline"></ion-icon>
 275 | 
 276 |                       <span class="card-item-text">Automatic</span>
 277 |                     </li>
 278 | 
 279 |                   </ul>
 280 | 
 281 |                   <div class="card-price-wrapper">
 282 | 
 283 |                     <p class="card-price">
 284 |                       <strong>$350</strong> / month
 285 |                     </p>
 286 | 
 287 |                     <button class="btn fav-btn" aria-label="Add to favourite list">
 288 |                       <ion-icon name="heart-outline"></ion-icon>
 289 |                     </button>
 290 | 
 291 |                     <button class="btn">Rent now</button>
 292 | 
 293 |                   </div>
 294 | 
 295 |                 </div>
 296 | 
 297 |               </div>
 298 |             </li>
 299 | 
 300 |             <li>
 301 |               <div class="featured-car-card">
 302 | 
 303 |                 <figure class="card-banner">
 304 |                   <img src="./assets/images/car-3.jpg" alt="Volkswagen T-Cross 2020" loading="lazy" width="440"
 305 |                     height="300" class="w-100">
 306 |                 </figure>
 307 | 
 308 |                 <div class="card-content">
 309 | 
 310 |                   <div class="card-title-wrapper">
 311 |                     <h3 class="h3 card-title">
 312 |                       <a href="#">Volkswagen T-Cross</a>
 313 |                     </h3>
 314 | 
 315 |                     <data class="year" value="2020">2020</data>
 316 |                   </div>
 317 | 
 318 |                   <ul class="card-list">
 319 | 
 320 |                     <li class="card-list-item">
 321 |                       <ion-icon name="people-outline"></ion-icon>
 322 | 
 323 |                       <span class="card-item-text">4 People</span>
 324 |                     </li>
 325 | 
 326 |                     <li class="card-list-item">
 327 |                       <ion-icon name="flash-outline"></ion-icon>
 328 | 
 329 |                       <span class="card-item-text">Gasoline</span>
 330 |                     </li>
 331 | 
 332 |                     <li class="card-list-item">
 333 |                       <ion-icon name="speedometer-outline"></ion-icon>
 334 | 
 335 |                       <span class="card-item-text">5.3km / 1-litre</span>
 336 |                     </li>
 337 | 
 338 |                     <li class="card-list-item">
 339 |                       <ion-icon name="hardware-chip-outline"></ion-icon>
 340 | 
 341 |                       <span class="card-item-text">Automatic</span>
 342 |                     </li>
 343 | 
 344 |                   </ul>
 345 | 
 346 |                   <div class="card-price-wrapper">
 347 | 
 348 |                     <p class="card-price">
 349 |                       <strong>$400</strong> / month
 350 |                     </p>
 351 | 
 352 |                     <button class="btn fav-btn" aria-label="Add to favourite list">
 353 |                       <ion-icon name="heart-outline"></ion-icon>
 354 |                     </button>
 355 | 
 356 |                     <button class="btn">Rent now</button>
 357 | 
 358 |                   </div>
 359 | 
 360 |                 </div>
 361 | 
 362 |               </div>
 363 |             </li>
 364 | 
 365 |             <li>
 366 |               <div class="featured-car-card">
 367 | 
 368 |                 <figure class="card-banner">
 369 |                   <img src="./assets/images/car-4.jpg" alt="Cadillac Escalade 2020" loading="lazy" width="440"
 370 |                     height="300" class="w-100">
 371 |                 </figure>
 372 | 
 373 |                 <div class="card-content">
 374 | 
 375 |                   <div class="card-title-wrapper">
 376 |                     <h3 class="h3 card-title">
 377 |                       <a href="#">Cadillac Escalade</a>
 378 |                     </h3>
 379 | 
 380 |                     <data class="year" value="2020">2020</data>
 381 |                   </div>
 382 | 
 383 |                   <ul class="card-list">
 384 | 
 385 |                     <li class="card-list-item">
 386 |                       <ion-icon name="people-outline"></ion-icon>
 387 | 
 388 |                       <span class="card-item-text">4 People</span>
 389 |                     </li>
 390 | 
 391 |                     <li class="card-list-item">
 392 |                       <ion-icon name="flash-outline"></ion-icon>
 393 | 
 394 |                       <span class="card-item-text">Gasoline</span>
 395 |                     </li>
 396 | 
 397 |                     <li class="card-list-item">
 398 |                       <ion-icon name="speedometer-outline"></ion-icon>
 399 | 
 400 |                       <span class="card-item-text">7.7km / 1-litre</span>
 401 |                     </li>
 402 | 
 403 |                     <li class="card-list-item">
 404 |                       <ion-icon name="hardware-chip-outline"></ion-icon>
 405 | 
 406 |                       <span class="card-item-text">Automatic</span>
 407 |                     </li>
 408 | 
 409 |                   </ul>
 410 | 
 411 |                   <div class="card-price-wrapper">
 412 | 
 413 |                     <p class="card-price">
 414 |                       <strong>$620</strong> / month
 415 |                     </p>
 416 | 
 417 |                     <button class="btn fav-btn" aria-label="Add to favourite list">
 418 |                       <ion-icon name="heart-outline"></ion-icon>
 419 |                     </button>
 420 | 
 421 |                     <button class="btn">Rent now</button>
 422 | 
 423 |                   </div>
 424 | 
 425 |                 </div>
 426 | 
 427 |               </div>
 428 |             </li>
 429 | 
 430 |             <li>
 431 |               <div class="featured-car-card">
 432 | 
 433 |                 <figure class="card-banner">
 434 |                   <img src="./assets/images/car-5.jpg" alt="BMW 4 Series GTI 2021" loading="lazy" width="440"
 435 |                     height="300" class="w-100">
 436 |                 </figure>
 437 | 
 438 |                 <div class="card-content">
 439 | 
 440 |                   <div class="card-title-wrapper">
 441 |                     <h3 class="h3 card-title">
 442 |                       <a href="#">BMW 4 Series GTI</a>
 443 |                     </h3>
 444 | 
 445 |                     <data class="year" value="2021">2021</data>
 446 |                   </div>
 447 | 
 448 |                   <ul class="card-list">
 449 | 
 450 |                     <li class="card-list-item">
 451 |                       <ion-icon name="people-outline"></ion-icon>
 452 | 
 453 |                       <span class="card-item-text">4 People</span>
 454 |                     </li>
 455 | 
 456 |                     <li class="card-list-item">
 457 |                       <ion-icon name="flash-outline"></ion-icon>
 458 | 
 459 |                       <span class="card-item-text">Gasoline</span>
 460 |                     </li>
 461 | 
 462 |                     <li class="card-list-item">
 463 |                       <ion-icon name="speedometer-outline"></ion-icon>
 464 | 
 465 |                       <span class="card-item-text">7.6km / 1-litre</span>
 466 |                     </li>
 467 | 
 468 |                     <li class="card-list-item">
 469 |                       <ion-icon name="hardware-chip-outline"></ion-icon>
 470 | 
 471 |                       <span class="card-item-text">Automatic</span>
 472 |                     </li>
 473 | 
 474 |                   </ul>
 475 | 
 476 |                   <div class="card-price-wrapper">
 477 | 
 478 |                     <p class="card-price">
 479 |                       <strong>$530</strong> / month
 480 |                     </p>
 481 | 
 482 |                     <button class="btn fav-btn" aria-label="Add to favourite list">
 483 |                       <ion-icon name="heart-outline"></ion-icon>
 484 |                     </button>
 485 | 
 486 |                     <button class="btn">Rent now</button>
 487 | 
 488 |                   </div>
 489 | 
 490 |                 </div>
 491 | 
 492 |               </div>
 493 |             </li>
 494 | 
 495 |             <li>
 496 |               <div class="featured-car-card">
 497 | 
 498 |                 <figure class="card-banner">
 499 |                   <img src="./assets/images/car-6.jpg" alt="BMW 4 Series 2019" loading="lazy" width="440" height="300"
 500 |                     class="w-100">
 501 |                 </figure>
 502 | 
 503 |                 <div class="card-content">
 504 | 
 505 |                   <div class="card-title-wrapper">
 506 |                     <h3 class="h3 card-title">
 507 |                       <a href="#">BMW 4 Series</a>
 508 |                     </h3>
 509 | 
 510 |                     <data class="year" value="2019">2019</data>
 511 |                   </div>
 512 | 
 513 |                   <ul class="card-list">
 514 | 
 515 |                     <li class="card-list-item">
 516 |                       <ion-icon name="people-outline"></ion-icon>
 517 | 
 518 |                       <span class="card-item-text">4 People</span>
 519 |                     </li>
 520 | 
 521 |                     <li class="card-list-item">
 522 |                       <ion-icon name="flash-outline"></ion-icon>
 523 | 
 524 |                       <span class="card-item-text">Gasoline</span>
 525 |                     </li>
 526 | 
 527 |                     <li class="card-list-item">
 528 |                       <ion-icon name="speedometer-outline"></ion-icon>
 529 | 
 530 |                       <span class="card-item-text">7.2km / 1-litre</span>
 531 |                     </li>
 532 | 
 533 |                     <li class="card-list-item">
 534 |                       <ion-icon name="hardware-chip-outline"></ion-icon>
 535 | 
 536 |                       <span class="card-item-text">Automatic</span>
 537 |                     </li>
 538 | 
 539 |                   </ul>
 540 | 
 541 |                   <div class="card-price-wrapper">
 542 | 
 543 |                     <p class="card-price">
 544 |                       <strong>$490</strong> / month
 545 |                     </p>
 546 | 
 547 |                     <button class="btn fav-btn" aria-label="Add to favourite list">
 548 |                       <ion-icon name="heart-outline"></ion-icon>
 549 |                     </button>
 550 | 
 551 |                     <button class="btn">Rent now</button>
 552 | 
 553 |                   </div>
 554 | 
 555 |                 </div>
 556 | 
 557 |               </div>
 558 |             </li>
 559 | 
 560 |           </ul>
 561 | 
 562 |         </div>
 563 |       </section>
 564 | 
 565 | 
 566 | 
 567 | 
 568 | 
 569 |       <!-- 
 570 |         - #GET START
 571 |       -->
 572 | 
 573 |       <section class="section get-start">
 574 |         <div class="container">
 575 | 
 576 |           <h2 class="h2 section-title">Get started with 4 simple steps</h2>
 577 | 
 578 |           <ul class="get-start-list">
 579 | 
 580 |             <li>
 581 |               <div class="get-start-card">
 582 | 
 583 |                 <div class="card-icon icon-1">
 584 |                   <ion-icon name="person-add-outline"></ion-icon>
 585 |                 </div>
 586 | 
 587 |                 <h3 class="card-title">Create a profile</h3>
 588 | 
 589 |                 <p class="card-text">
 590 |                   If you are going to use a passage of Lorem Ipsum, you need to be sure.
 591 |                 </p>
 592 | 
 593 |                 <a href="#" class="card-link">Get started</a>
 594 | 
 595 |               </div>
 596 |             </li>
 597 | 
 598 |             <li>
 599 |               <div class="get-start-card">
 600 | 
 601 |                 <div class="card-icon icon-2">
 602 |                   <ion-icon name="car-outline"></ion-icon>
 603 |                 </div>
 604 | 
 605 |                 <h3 class="card-title">Tell us what car you want</h3>
 606 | 
 607 |                 <p class="card-text">
 608 |                   Various versions have evolved over the years, sometimes by accident, sometimes on purpose
 609 |                 </p>
 610 | 
 611 |               </div>
 612 |             </li>
 613 | 
 614 |             <li>
 615 |               <div class="get-start-card">
 616 | 
 617 |                 <div class="card-icon icon-3">
 618 |                   <ion-icon name="person-outline"></ion-icon>
 619 |                 </div>
 620 | 
 621 |                 <h3 class="card-title">Match with seller</h3>
 622 | 
 623 |                 <p class="card-text">
 624 |                   It to make a type specimen book. It has survived not only five centuries, but also the leap into
 625 |                   electronic
 626 |                 </p>
 627 | 
 628 |               </div>
 629 |             </li>
 630 | 
 631 |             <li>
 632 |               <div class="get-start-card">
 633 | 
 634 |                 <div class="card-icon icon-4">
 635 |                   <ion-icon name="card-outline"></ion-icon>
 636 |                 </div>
 637 | 
 638 |                 <h3 class="card-title">Make a deal</h3>
 639 | 
 640 |                 <p class="card-text">
 641 |                   There are many variations of passages of Lorem available, but the majority have suffered alteration
 642 |                 </p>
 643 | 
 644 |               </div>
 645 |             </li>
 646 | 
 647 |           </ul>
 648 | 
 649 |         </div>
 650 |       </section>
 651 | 
 652 | 
 653 | 
 654 | 
 655 | 
 656 |       <!-- 
 657 |         - #BLOG
 658 |       -->
 659 | 
 660 |       <section class="section blog" id="blog">
 661 |         <div class="container">
 662 | 
 663 |           <h2 class="h2 section-title">Our Blog</h2>
 664 | 
 665 |           <ul class="blog-list has-scrollbar">
 666 | 
 667 |             <li>
 668 |               <div class="blog-card">
 669 | 
 670 |                 <figure class="card-banner">
 671 | 
 672 |                   <a href="#">
 673 |                     <img src="./assets/images/blog-1.jpg" alt="Opening of new offices of the company" loading="lazy"
 674 |                       class="w-100">
 675 |                   </a>
 676 | 
 677 |                   <a href="#" class="btn card-badge">Company</a>
 678 | 
 679 |                 </figure>
 680 | 
 681 |                 <div class="card-content">
 682 | 
 683 |                   <h3 class="h3 card-title">
 684 |                     <a href="#">Opening of new offices of the company</a>
 685 |                   </h3>
 686 | 
 687 |                   <div class="card-meta">
 688 | 
 689 |                     <div class="publish-date">
 690 |                       <ion-icon name="time-outline"></ion-icon>
 691 | 
 692 |                       <time datetime="2022-01-14">January 14, 2022</time>
 693 |                     </div>
 694 | 
 695 |                     <div class="comments">
 696 |                       <ion-icon name="chatbubble-ellipses-outline"></ion-icon>
 697 | 
 698 |                       <data value="114">114</data>
 699 |                     </div>
 700 | 
 701 |                   </div>
 702 | 
 703 |                 </div>
 704 | 
 705 |               </div>
 706 |             </li>
 707 | 
 708 |             <li>
 709 |               <div class="blog-card">
 710 | 
 711 |                 <figure class="card-banner">
 712 | 
 713 |                   <a href="#">
 714 |                     <img src="./assets/images/blog-2.jpg" alt="What cars are most vulnerable" loading="lazy"
 715 |                       class="w-100">
 716 |                   </a>
 717 | 
 718 |                   <a href="#" class="btn card-badge">Repair</a>
 719 | 
 720 |                 </figure>
 721 | 
 722 |                 <div class="card-content">
 723 | 
 724 |                   <h3 class="h3 card-title">
 725 |                     <a href="#">What cars are most vulnerable</a>
 726 |                   </h3>
 727 | 
 728 |                   <div class="card-meta">
 729 | 
 730 |                     <div class="publish-date">
 731 |                       <ion-icon name="time-outline"></ion-icon>
 732 | 
 733 |                       <time datetime="2022-01-14">January 14, 2022</time>
 734 |                     </div>
 735 | 
 736 |                     <div class="comments">
 737 |                       <ion-icon name="chatbubble-ellipses-outline"></ion-icon>
 738 | 
 739 |                       <data value="114">114</data>
 740 |                     </div>
 741 | 
 742 |                   </div>
 743 | 
 744 |                 </div>
 745 | 
 746 |               </div>
 747 |             </li>
 748 | 
 749 |             <li>
 750 |               <div class="blog-card">
 751 | 
 752 |                 <figure class="card-banner">
 753 | 
 754 |                   <a href="#">
 755 |                     <img src="./assets/images/blog-3.jpg" alt="Statistics showed which average age" loading="lazy"
 756 |                       class="w-100">
 757 |                   </a>
 758 | 
 759 |                   <a href="#" class="btn card-badge">Cars</a>
 760 | 
 761 |                 </figure>
 762 | 
 763 |                 <div class="card-content">
 764 | 
 765 |                   <h3 class="h3 card-title">
 766 |                     <a href="#">Statistics showed which average age</a>
 767 |                   </h3>
 768 | 
 769 |                   <div class="card-meta">
 770 | 
 771 |                     <div class="publish-date">
 772 |                       <ion-icon name="time-outline"></ion-icon>
 773 | 
 774 |                       <time datetime="2022-01-14">January 14, 2022</time>
 775 |                     </div>
 776 | 
 777 |                     <div class="comments">
 778 |                       <ion-icon name="chatbubble-ellipses-outline"></ion-icon>
 779 | 
 780 |                       <data value="114">114</data>
 781 |                     </div>
 782 | 
 783 |                   </div>
 784 | 
 785 |                 </div>
 786 | 
 787 |               </div>
 788 |             </li>
 789 | 
 790 |             <li>
 791 |               <div class="blog-card">
 792 | 
 793 |                 <figure class="card-banner">
 794 | 
 795 |                   <a href="#">
 796 |                     <img src="./assets/images/blog-4.jpg" alt="What´s required when renting a car?" loading="lazy"
 797 |                       class="w-100">
 798 |                   </a>
 799 | 
 800 |                   <a href="#" class="btn card-badge">Cars</a>
 801 | 
 802 |                 </figure>
 803 | 
 804 |                 <div class="card-content">
 805 | 
 806 |                   <h3 class="h3 card-title">
 807 |                     <a href="#">What´s required when renting a car?</a>
 808 |                   </h3>
 809 | 
 810 |                   <div class="card-meta">
 811 | 
 812 |                     <div class="publish-date">
 813 |                       <ion-icon name="time-outline"></ion-icon>
 814 | 
 815 |                       <time datetime="2022-01-14">January 14, 2022</time>
 816 |                     </div>
 817 | 
 818 |                     <div class="comments">
 819 |                       <ion-icon name="chatbubble-ellipses-outline"></ion-icon>
 820 | 
 821 |                       <data value="114">114</data>
 822 |                     </div>
 823 | 
 824 |                   </div>
 825 | 
 826 |                 </div>
 827 | 
 828 |               </div>
 829 |             </li>
 830 | 
 831 |             <li>
 832 |               <div class="blog-card">
 833 | 
 834 |                 <figure class="card-banner">
 835 | 
 836 |                   <a href="#">
 837 |                     <img src="./assets/images/blog-5.jpg" alt="New rules for handling our cars" loading="lazy"
 838 |                       class="w-100">
 839 |                   </a>
 840 | 
 841 |                   <a href="#" class="btn card-badge">Company</a>
 842 | 
 843 |                 </figure>
 844 | 
 845 |                 <div class="card-content">
 846 | 
 847 |                   <h3 class="h3 card-title">
 848 |                     <a href="#">New rules for handling our cars</a>
 849 |                   </h3>
 850 | 
 851 |                   <div class="card-meta">
 852 | 
 853 |                     <div class="publish-date">
 854 |                       <ion-icon name="time-outline"></ion-icon>
 855 | 
 856 |                       <time datetime="2022-01-14">January 14, 2022</time>
 857 |                     </div>
 858 | 
 859 |                     <div class="comments">
 860 |                       <ion-icon name="chatbubble-ellipses-outline"></ion-icon>
 861 | 
 862 |                       <data value="114">114</data>
 863 |                     </div>
 864 | 
 865 |                   </div>
 866 | 
 867 |                 </div>
 868 | 
 869 |               </div>
 870 |             </li>
 871 | 
 872 |           </ul>
 873 | 
 874 |         </div>
 875 |       </section>
 876 | 
 877 |     </article>
 878 |   </main>
 879 | 
 880 | 
 881 | 
 882 | 
 883 | 
 884 |   <!-- 
 885 |     - #FOOTER
 886 |   -->
 887 | 
 888 |   <footer class="footer">
 889 |     <div class="container">
 890 | 
 891 |       <div class="footer-top">
 892 | 
 893 |         <div class="footer-brand">
 894 |           <a href="#" class="logo">
 895 |             <img src="./assets/images/logo.svg" alt="Ridex logo">
 896 |           </a>
 897 | 
 898 |           <p class="footer-text">
 899 |             Search for cheap rental cars in New York. With a diverse fleet of 19,000 vehicles, Waydex offers its
 900 |             consumers an
 901 |             attractive and fun selection.
 902 |           </p>
 903 |         </div>
 904 | 
 905 |         <ul class="footer-list">
 906 | 
 907 |           <li>
 908 |             <p class="footer-list-title">Company</p>
 909 |           </li>
 910 | 
 911 |           <li>
 912 |             <a href="#" class="footer-link">About us</a>
 913 |           </li>
 914 | 
 915 |           <li>
 916 |             <a href="#" class="footer-link">Pricing plans</a>
 917 |           </li>
 918 | 
 919 |           <li>
 920 |             <a href="#" class="footer-link">Our blog</a>
 921 |           </li>
 922 | 
 923 |           <li>
 924 |             <a href="#" class="footer-link">Contacts</a>
 925 |           </li>
 926 | 
 927 |         </ul>
 928 | 
 929 |         <ul class="footer-list">
 930 | 
 931 |           <li>
 932 |             <p class="footer-list-title">Support</p>
 933 |           </li>
 934 | 
 935 |           <li>
 936 |             <a href="#" class="footer-link">Help center</a>
 937 |           </li>
 938 | 
 939 |           <li>
 940 |             <a href="#" class="footer-link">Ask a question</a>
 941 |           </li>
 942 | 
 943 |           <li>
 944 |             <a href="#" class="footer-link">Privacy policy</a>
 945 |           </li>
 946 | 
 947 |           <li>
 948 |             <a href="#" class="footer-link">Terms & conditions</a>
 949 |           </li>
 950 | 
 951 |         </ul>
 952 | 
 953 |         <ul class="footer-list">
 954 | 
 955 |           <li>
 956 |             <p class="footer-list-title">Neighborhoods in New York</p>
 957 |           </li>
 958 | 
 959 |           <li>
 960 |             <a href="#" class="footer-link">Manhattan</a>
 961 |           </li>
 962 | 
 963 |           <li>
 964 |             <a href="#" class="footer-link">Central New York City</a>
 965 |           </li>
 966 | 
 967 |           <li>
 968 |             <a href="#" class="footer-link">Upper East Side</a>
 969 |           </li>
 970 | 
 971 |           <li>
 972 |             <a href="#" class="footer-link">Queens</a>
 973 |           </li>
 974 | 
 975 |           <li>
 976 |             <a href="#" class="footer-link">Theater District</a>
 977 |           </li>
 978 | 
 979 |           <li>
 980 |             <a href="#" class="footer-link">Midtown</a>
 981 |           </li>
 982 | 
 983 |           <li>
 984 |             <a href="#" class="footer-link">SoHo</a>
 985 |           </li>
 986 | 
 987 |           <li>
 988 |             <a href="#" class="footer-link">Chelsea</a>
 989 |           </li>
 990 | 
 991 |         </ul>
 992 | 
 993 |       </div>
 994 | 
 995 |       <div class="footer-bottom">
 996 | 
 997 |         <ul class="social-list">
 998 | 
 999 |           <li>
1000 |             <a href="#" class="social-link">
1001 |               <ion-icon name="logo-facebook"></ion-icon>
1002 |             </a>
1003 |           </li>
1004 | 
1005 |           <li>
1006 |             <a href="#" class="social-link">
1007 |               <ion-icon name="logo-instagram"></ion-icon>
1008 |             </a>
1009 |           </li>
1010 | 
1011 |           <li>
1012 |             <a href="#" class="social-link">
1013 |               <ion-icon name="logo-twitter"></ion-icon>
1014 |             </a>
1015 |           </li>
1016 | 
1017 |           <li>
1018 |             <a href="#" class="social-link">
1019 |               <ion-icon name="logo-linkedin"></ion-icon>
1020 |             </a>
1021 |           </li>
1022 | 
1023 |           <li>
1024 |             <a href="#" class="social-link">
1025 |               <ion-icon name="logo-skype"></ion-icon>
1026 |             </a>
1027 |           </li>
1028 | 
1029 |           <li>
1030 |             <a href="#" class="social-link">
1031 |               <ion-icon name="mail-outline"></ion-icon>
1032 |             </a>
1033 |           </li>
1034 | 
1035 |         </ul>
1036 | 
1037 |         <p class="copyright">
1038 |           &copy; 2022 <a href="#">codewithsadee</a>. All Rights Reserved
1039 |         </p>
1040 | 
1041 |       </div>
1042 | 
1043 |     </div>
1044 |   </footer>
1045 | 
1046 | 
1047 | 
1048 | 
1049 | 
1050 |   <!-- 
1051 |     - custom js link
1052 |   -->
1053 |   <script src="./assets/js/script.js"></script>
1054 | 
1055 |   <!-- 
1056 |     - ionicon link
1057 |   -->
1058 |   <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
1059 |   <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
1060 | 
1061 | </body>
1062 | 
1063 | </html>


--------------------------------------------------------------------------------
/index.txt:
--------------------------------------------------------------------------------
  1 | Ridex - Rent your favourite car
  2 | 
  3 | 
  4 | # HEADER
  5 | 
  6 | alt = Ridex logo
  7 | 
  8 | Home
  9 | Explore cars
 10 | About us
 11 | Blog
 12 | 
 13 | 8 800 234 56 78
 14 | Mon - Sat: 9:00 am - 6:00 pm
 15 | 
 16 | <ion-icon name="car-outline"></ion-icon>
 17 | Explore cars
 18 | 
 19 | aria-label = Profile
 20 | <ion-icon name="person-outline"></ion-icon>
 21 | 
 22 | aria-label = Toggle Menu
 23 | 
 24 | 
 25 | 
 26 | # HERO
 27 | 
 28 | The easy way to takeover a lease
 29 | 
 30 | Live in New York, New Jerset and Connecticut!
 31 | 
 32 | Car, model, or brand
 33 | placeholder = What car are you looking?
 34 | 
 35 | Max. monthly payment
 36 | placeholder = Add an amount in $
 37 | 
 38 | Make Year
 39 | placeholder = Add a minimal make year
 40 | 
 41 | Search
 42 | 
 43 | 
 44 | 
 45 | # FEATURED CAR
 46 | 
 47 | Featured cars
 48 | 
 49 | View more
 50 | <ion-icon name="arrow-forward-outline"></ion-icon>
 51 | 
 52 | alt = Toyota RAV4 2021
 53 | 
 54 | Toyota RAV4
 55 | 2021
 56 | 
 57 | <ion-icon name="people-outline"></ion-icon>
 58 | 4 People
 59 | 
 60 | <ion-icon name="flash-outline"></ion-icon>
 61 | Hybrid
 62 | 
 63 | <ion-icon name="speedometer-outline"></ion-icon>
 64 | 6.1km / 1-litre
 65 | 
 66 | <ion-icon name="hardware-chip-outline"></ion-icon>
 67 | Automatic
 68 | 
 69 | $440
 70 | / month
 71 | 
 72 | aria-label = Add to favourite list
 73 | <ion-icon name="heart-outline"></ion-icon>
 74 | 
 75 | Rent now
 76 | 
 77 | 
 78 | alt = BMW 3 Series 2019
 79 | 
 80 | BMW 3 Series
 81 | 2019
 82 | 
 83 | Gasoline
 84 | 
 85 | 8.2km / 1-litre
 86 | 
 87 | $350
 88 | 
 89 | 
 90 | alt = Volkswagen T-Cross 2020
 91 | 
 92 | Volkswagen T-Cross
 93 | 2020
 94 | 
 95 | 5.3km / 1-litre
 96 | 
 97 | $400
 98 | 
 99 | 
100 | alt = Cadillac Escalade 2020
101 | 
102 | Cadillac Escalade
103 | 2020
104 | 
105 | 7.7km / 1-litre
106 | 
107 | $620
108 | 
109 | 
110 | alt = BMW 4 Series GTI 2021
111 | 
112 | BMW 4 Series GTI
113 | 2021
114 | 
115 | 7.6km / 1-litre
116 | 
117 | $530
118 | 
119 | 
120 | alt = BMW 4 Series 2019
121 | 
122 | BMW 4 Series
123 | 2019
124 | 
125 | 7.2km / 1-litre
126 | 
127 | $490
128 | 
129 | 
130 | 
131 | # GET START
132 | 
133 | Get started with 4 simple steps
134 | 
135 | <ion-icon name="person-add-outline"></ion-icon>
136 | 
137 | Create a profile
138 | 
139 | If you are going to use a passage of Lorem Ipsum, you need to be sure.
140 | 
141 | Get started
142 | 
143 | <ion-icon name="car-outline"></ion-icon>
144 | 
145 | Tell us what car you want
146 | 
147 | Various versions have evolved over the years, sometimes by accident, sometimes on purpose
148 | 
149 | <ion-icon name="person-outline"></ion-icon>
150 | 
151 | Match with seller
152 | 
153 | It to make a type specimen book. It has survived not only five centuries, but also the leap into electronic
154 | 
155 | <ion-icon name="card-outline"></ion-icon>
156 | 
157 | Make a deal
158 | 
159 | There are many variations of passages of Lorem available, but the majority have suffered alteration
160 | 
161 | 
162 | 
163 | # BLOG
164 | 
165 | Our Blog
166 | 
167 | alt = Opening of new offices of the company
168 | 
169 | Company
170 | 
171 | Opening of new offices of the company
172 | 
173 | <ion-icon name="time-outline"></ion-icon>
174 | January 14, 2022 
175 | 
176 | <ion-icon name="chatbubble-ellipses-outline"></ion-icon>
177 | 114
178 | 
179 | 
180 | alt = What cars are most vulnerable 
181 | 
182 | Repair
183 | 
184 | What cars are most vulnerable
185 | 
186 | 
187 | alt = Statistics showed which average age
188 | 
189 | Cars
190 | 
191 | Statistics showed which average age
192 | 
193 | alt = What´s required when renting a car?
194 | 
195 | What´s required when renting a car?
196 | 
197 | 
198 | alt = New rules for handling our cars
199 | 
200 | Company
201 | 
202 | New rules for handling our cars
203 | 
204 | 
205 | 
206 | # FOOTER
207 | 
208 | alt = Ridex logo
209 | 
210 | Search for cheap rental cars in New York. With a diverse fleet of 19,000 vehicles, Waydex offers its consumers an attractive and fun selection.
211 | 
212 | Company
213 | 
214 | About us
215 | Pricing plans
216 | Our blog
217 | Contacts
218 | 
219 | Support
220 | 
221 | Help center
222 | Ask a question
223 | Privacy policy
224 | Terms & conditions
225 | 
226 | Neighborhoods in New York
227 | 
228 | Manhattan
229 | Central New York City
230 | Upper East Side
231 | Queens
232 | Theater District
233 | Midtown
234 | SoHo
235 | Chelsea
236 | 
237 | <ion-icon name="logo-facebook"></ion-icon>
238 | <ion-icon name="logo-instagram"></ion-icon>
239 | <ion-icon name="logo-twitter"></ion-icon>
240 | <ion-icon name="logo-linkedin"></ion-icon>
241 | <ion-icon name="logo-skype"></ion-icon>
242 | <ion-icon name="mail-outline"></ion-icon>
243 | 
244 | &copy; 2022 codewithsadee. All Rights Reserved


--------------------------------------------------------------------------------
/readme-images/desktop.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codewithsadee/ridex/473d9444c36dd45066d737a2eb14252713f6a38b/readme-images/desktop.png


--------------------------------------------------------------------------------
/readme-images/project-logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codewithsadee/ridex/473d9444c36dd45066d737a2eb14252713f6a38b/readme-images/project-logo.png


--------------------------------------------------------------------------------
/style-guide.md:
--------------------------------------------------------------------------------
 1 | # Essential Stuff
 2 | 
 3 | ## Html import links
 4 | 
 5 | Google font
 6 | 
 7 | ``` html
 8 | <link rel="preconnect" href="https://fonts.googleapis.com">
 9 | <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10 | <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600&family=Open+Sans&display=swap"
11 |   rel="stylesheet">
12 | ```
13 | 
14 | Ionicon
15 | 
16 | ``` html
17 | <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
18 | <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
19 | ```
20 | 
21 | ---
22 | 
23 | ## Colors
24 | 
25 | ``` css
26 | --pale-purple-pantone: hsl(262, 63%, 92%);
27 | --medium-sea-green: hsl(152, 63%, 43%);
28 | --lavender-blush: hsl(336, 35%, 92%);
29 | --carolina-blue: hsl(204, 91%, 53%);
30 | --columbia-blue: hsl(204, 92%, 90%);
31 | --alice-blue-1: hsl(216, 38%, 95%);
32 | --alice-blue-2: hsl(216, 75%, 97%);
33 | --alice-blue-3: hsl(216, 38%, 95%);
34 | --alice-blue-4: hsl(217, 33%, 92%);
35 | --independence: hsl(219, 21%, 39%);
36 | --deep-cerise: hsl(329, 63%, 52%);
37 | --eerie-black: hsl(210, 11%, 15%);
38 | --space-cadet: hsl(240, 22%, 25%);
39 | --blue-jeans: hsl(204, 80%, 63%);
40 | --slate-blue: hsl(262, 60%, 57%);
41 | --beau-blue: hsl(208, 86%, 92%);
42 | --honey-dew: hsl(152, 48%, 89%);
43 | --mimi-pink: hsl(329, 63%, 90%);
44 | --red-salsa: hsl(0, 79%, 63%);
45 | --sapphire: hsl(211, 100%, 35%);
46 | --manatee: hsl(219, 14%, 60%);
47 | --white: hsl(0, 0%, 100%);
48 | 
49 | --gradient: linear-gradient(to top, var(--alice-blue-2), var(--alice-blue-3));
50 | ```
51 | 
52 | ## Typography
53 | 
54 | ``` css
55 | --ff-nunito: 'Nunito', sans-serif;
56 | --ff-open-sans: 'Open Sans', sans-serif;
57 | 
58 | --fs-1: 2.125rem;
59 | --fs-2: 1.875rem;
60 | --fs-3: 1.5rem;
61 | --fs-4: 1.375rem;
62 | --fs-5: 1.125rem;
63 | --fs-6: 0.875rem;
64 | --fs-7: 0.625rem;
65 | 
66 | --fw-400: 400;
67 | --fw-600: 600;
68 | ```
69 | 
70 | ## Transition
71 | 
72 | ``` css
73 | --transition: 0.5s ease;
74 | ```
75 | 
76 | ## Spacing
77 | 
78 | ``` css
79 | --section-padding: 50px;
80 | ```
81 | 
82 | ## Radius
83 | 
84 | ``` css
85 | --radius-10: 10px;
86 | --radius-14: 14px;
87 | --radius-18: 18px;
88 | ```
89 | 
90 | ## Shadow
91 | 
92 | ``` css
93 | --shadow-1: 3px 3px 9px hsla(240, 14%, 69%, 0.2);
94 | --shadow-2: 3px 3px 9px hsla(204, 92%, 59%, 0.3);
95 | ```
96 | 


--------------------------------------------------------------------------------