├── assets ├── 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 └── css │ └── style.css ├── readme-images ├── desktop.png └── project-logo.png ├── favicon.svg ├── .github └── workflows │ └── azure-static-web-apps-gentle-rock-09c057810.yml ├── style-guide.md ├── index.txt └── index.html /assets/images/blog-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lalith514/rental-car2198/HEAD/assets/images/blog-1.jpg -------------------------------------------------------------------------------- /assets/images/blog-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lalith514/rental-car2198/HEAD/assets/images/blog-2.jpg -------------------------------------------------------------------------------- /assets/images/blog-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lalith514/rental-car2198/HEAD/assets/images/blog-3.jpg -------------------------------------------------------------------------------- /assets/images/blog-4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lalith514/rental-car2198/HEAD/assets/images/blog-4.jpg -------------------------------------------------------------------------------- /assets/images/blog-5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lalith514/rental-car2198/HEAD/assets/images/blog-5.jpg -------------------------------------------------------------------------------- /assets/images/car-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lalith514/rental-car2198/HEAD/assets/images/car-1.jpg -------------------------------------------------------------------------------- /assets/images/car-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lalith514/rental-car2198/HEAD/assets/images/car-2.jpg -------------------------------------------------------------------------------- /assets/images/car-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lalith514/rental-car2198/HEAD/assets/images/car-3.jpg -------------------------------------------------------------------------------- /assets/images/car-4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lalith514/rental-car2198/HEAD/assets/images/car-4.jpg -------------------------------------------------------------------------------- /assets/images/car-5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lalith514/rental-car2198/HEAD/assets/images/car-5.jpg -------------------------------------------------------------------------------- /assets/images/car-6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lalith514/rental-car2198/HEAD/assets/images/car-6.jpg -------------------------------------------------------------------------------- /readme-images/desktop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lalith514/rental-car2198/HEAD/readme-images/desktop.png -------------------------------------------------------------------------------- /assets/images/hero-banner.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lalith514/rental-car2198/HEAD/assets/images/hero-banner.jpg -------------------------------------------------------------------------------- /readme-images/project-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lalith514/rental-car2198/HEAD/readme-images/project-logo.png -------------------------------------------------------------------------------- /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 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /.github/workflows/azure-static-web-apps-gentle-rock-09c057810.yml: -------------------------------------------------------------------------------- 1 | name: Azure Static Web Apps CI/CD 2 | 3 | on: 4 | push: 5 | branches: 6 | - main 7 | pull_request: 8 | types: [opened, synchronize, reopened, closed] 9 | branches: 10 | - main 11 | 12 | jobs: 13 | build_and_deploy_job: 14 | if: github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.action != 'closed') 15 | runs-on: ubuntu-latest 16 | name: Build and Deploy Job 17 | steps: 18 | - uses: actions/checkout@v2 19 | with: 20 | submodules: true 21 | - name: Build And Deploy 22 | id: builddeploy 23 | uses: Azure/static-web-apps-deploy@v1 24 | with: 25 | azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_GENTLE_ROCK_09C057810 }} 26 | repo_token: ${{ secrets.GITHUB_TOKEN }} # Used for Github integrations (i.e. PR comments) 27 | action: "upload" 28 | ###### Repository/Build Configurations - These values can be configured to match your app requirements. ###### 29 | # For more information regarding Static Web App workflow configurations, please visit: https://aka.ms/swaworkflowconfig 30 | app_location: "/" # App source code path 31 | api_location: "" # Api source code path - optional 32 | output_location: "" # Built app content directory - optional 33 | ###### End of Repository/Build Configurations ###### 34 | 35 | close_pull_request_job: 36 | if: github.event_name == 'pull_request' && github.event.action == 'closed' 37 | runs-on: ubuntu-latest 38 | name: Close Pull Request Job 39 | steps: 40 | - name: Close Pull Request 41 | id: closepullrequest 42 | uses: Azure/static-web-apps-deploy@v1 43 | with: 44 | azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_GENTLE_ROCK_09C057810 }} 45 | action: "close" 46 | -------------------------------------------------------------------------------- /style-guide.md: -------------------------------------------------------------------------------- 1 | # Essential Stuff 2 | 3 | ## Html import links 4 | 5 | Google font 6 | 7 | ``` html 8 | 9 | 10 | 12 | ``` 13 | 14 | Ionicon 15 | 16 | ``` html 17 | 18 | 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 | -------------------------------------------------------------------------------- /assets/images/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /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 | 17 | Explore cars 18 | 19 | aria-label = Profile 20 | 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 | 51 | 52 | alt = Toyota RAV4 2021 53 | 54 | Toyota RAV4 55 | 2021 56 | 57 | 58 | 4 People 59 | 60 | 61 | Hybrid 62 | 63 | 64 | 6.1km / 1-litre 65 | 66 | 67 | Automatic 68 | 69 | $440 70 | / month 71 | 72 | aria-label = Add to favourite list 73 | 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 | 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 | 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 | 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 | 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 | 174 | January 14, 2022 175 | 176 | 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 | 238 | 239 | 240 | 241 | 242 | 243 | 244 | © 2022 codewithsadee. All Rights Reserved -------------------------------------------------------------------------------- /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 | } -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Ridex - Rent your favourite car 9 | 10 | 13 | 14 | 15 | 18 | 19 | 20 | 23 | 24 | 25 | 27 | 28 | 29 | 30 | 31 | 34 | 35 |
36 |
37 | 38 |
39 | 40 | 43 | 44 | 65 | 66 |
67 | 68 |
69 | 8 800 234 56 78 70 | 71 | Mon - Sat: 9:00 am - 6:00 pm 72 |
73 | 74 | 75 | 76 | 77 | Explore cars 78 | 79 | 80 | 81 | 82 | 83 | 84 | 89 | 90 |
91 | 92 |
93 |
94 | 95 | 96 | 97 | 98 | 99 |
100 |
101 | 102 | 105 | 106 |
107 |
108 | 109 |
110 |

The easy way to takeover a lease

111 | 112 |

113 | Live in New York, New Jerset and Connecticut! 114 |

115 |
116 | 117 |
118 | 119 |
120 | 121 |
122 | 123 | 124 | 126 |
127 | 128 |
129 | 130 | 131 | 132 |
133 | 134 |
135 | 136 | 137 | 138 |
139 | 140 | 141 | 142 |
143 | 144 |
145 |
146 | 147 | 148 | 149 | 150 | 151 | 154 | 155 | 564 | 565 | 566 | 567 | 568 | 569 | 572 | 573 |
574 |
575 | 576 |

Get started with 4 simple steps

577 | 578 |
    579 | 580 |
  • 581 |
    582 | 583 |
    584 | 585 |
    586 | 587 |

    Create a profile

    588 | 589 |

    590 | If you are going to use a passage of Lorem Ipsum, you need to be sure. 591 |

    592 | 593 | Get started 594 | 595 |
    596 |
    • 597 | 598 |
  • 599 |
    600 | 601 |
    602 | 603 |
    604 | 605 |

    Tell us what car you want

    606 | 607 |

    608 | Various versions have evolved over the years, sometimes by accident, sometimes on purpose 609 |

    610 | 611 |
    612 |
    • 613 | 614 |
  • 615 |
    616 | 617 |
    618 | 619 |
    620 | 621 |

    Match with seller

    622 | 623 |

    624 | It to make a type specimen book. It has survived not only five centuries, but also the leap into 625 | electronic 626 |

    627 | 628 |
    629 |
    • 630 | 631 |
  • 632 |
    633 | 634 |
    635 | 636 |
    637 | 638 |

    Make a deal

    639 | 640 |

    641 | There are many variations of passages of Lorem available, but the majority have suffered alteration 642 |

    643 | 644 |
    645 |
    • 646 | 647 |
648 | 649 |
650 |
651 | 652 | 653 | 654 | 655 | 656 | 659 | 660 |
661 |
662 | 663 |

Our Blog

664 | 665 |
    666 | 667 |
  • 668 |
    669 | 670 |
    671 | 672 | 673 | Opening of new offices of the company 675 | 676 | 677 | Company 678 | 679 |
    680 | 681 |
    682 | 683 |

    684 | Opening of new offices of the company 685 |

    686 | 687 |
    688 | 689 |
    690 | 691 | 692 | 693 |
    694 | 695 |
    696 | 697 | 698 | 114 699 |
    700 | 701 |
    702 | 703 |
    704 | 705 |
    706 |
    • 707 | 708 |
  • 709 |
    710 | 711 |
    712 | 713 | 714 | What cars are most vulnerable 716 | 717 | 718 | Repair 719 | 720 |
    721 | 722 |
    723 | 724 |

    725 | What cars are most vulnerable 726 |

    727 | 728 |
    729 | 730 |
    731 | 732 | 733 | 734 |
    735 | 736 |
    737 | 738 | 739 | 114 740 |
    741 | 742 |
    743 | 744 |
    745 | 746 |
    747 |
    • 748 | 749 |
  • 750 |
    751 | 752 |
    753 | 754 | 755 | Statistics showed which average age 757 | 758 | 759 | Cars 760 | 761 |
    762 | 763 |
    764 | 765 |

    766 | Statistics showed which average age 767 |

    768 | 769 |
    770 | 771 |
    772 | 773 | 774 | 775 |
    776 | 777 |
    778 | 779 | 780 | 114 781 |
    782 | 783 |
    784 | 785 |
    786 | 787 |
    788 |
    • 789 | 790 |
  • 791 |
    792 | 793 |
    794 | 795 | 796 | What´s required when renting a car? 798 | 799 | 800 | Cars 801 | 802 |
    803 | 804 |
    805 | 806 |

    807 | What´s required when renting a car? 808 |

    809 | 810 |
    811 | 812 |
    813 | 814 | 815 | 816 |
    817 | 818 |
    819 | 820 | 821 | 114 822 |
    823 | 824 |
    825 | 826 |
    827 | 828 |
    829 |
    • 830 | 831 |
  • 832 |
    833 | 834 |
    835 | 836 | 837 | New rules for handling our cars 839 | 840 | 841 | Company 842 | 843 |
    844 | 845 |
    846 | 847 |

    848 | New rules for handling our cars 849 |

    850 | 851 |
    852 | 853 |
    854 | 855 | 856 | 857 |
    858 | 859 |
    860 | 861 | 862 | 114 863 |
    864 | 865 |
    866 | 867 |
    868 | 869 |
    870 |
    • 871 | 872 |
873 | 874 |
875 |
876 | 877 |
878 |
879 | 880 | 881 | 882 | 883 | 884 | 887 | 888 | 1045 | 1046 | 1047 | 1048 | 1049 | 1050 | 1053 | 1054 | 1055 | 1058 | 1059 | 1060 | 1061 | 1062 | 1063 | --------------------------------------------------------------------------------