diff --git a/black.png b/black.png new file mode 100644 index 0000000..fe887aa Binary files /dev/null and b/black.png differ diff --git a/download.png b/download.png new file mode 100644 index 0000000..adb62f1 Binary files /dev/null and b/download.png differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..cffe14c --- /dev/null +++ b/index.html @@ -0,0 +1,262 @@ + + + + + + + + + AutoGo + + +
+ +
+
+ header +
+
+

Looking to save more on your rental car?

+

+ Discover AutoGo bike & car rental in your city with Rent a Car Select + from a range of car options and local specials. +

+
+ + app store + + + play + +
+
+
+
+ +
+

HOW IT WORKS

+

AutoGo following 3 working steps

+
+
+ +

Choose a location

+

+ Select your desired rental location from our extensive network of + rental spots. +

+
+
+ +

Pick-up date

+

+ Specify the date and time you wish to pick up your car with flexible + scheduling options. +

+
+
+ +

Book your vehicle/h4> +

+ Browse through our wide range of vehicles and choose the one that + best suits your needs. +

+

+
+
+ +
+
+ service +
+
+

BEST SERVICES

+

+ Feel the best experience with our rental deals +

+ +
+
+ +
+

CUSTOMER EXPERIENCE

+

+ We are ensuring the best customer experience +

+
+
+ +

Competitive pricing

+
+
+ +

Easier Rent On Your Budget

+
+
+ +

Most Felxible Payment Plans

+
+
+ +

The Best Extended Auto Warranties

+
+
+ +

Roadside Assistance 24/7

+
+
+ +

Your Choice Of Mechanic

+
+ experience +
+
+ +
+
+
+

Download the free AutoGo app

+

+ Download the AutoGo app to manage your bookings, find exclusive + deals, and access 24/7 support, all from your mobile device. +

+
+ + app store + + + play + +
+
+
+ download +
+
+
+ + + + + + + \ No newline at end of file diff --git a/main.js b/main.js new file mode 100644 index 0000000..5ae5667 --- /dev/null +++ b/main.js @@ -0,0 +1,83 @@ +const menuBtn = document.getElementById("menu-btn"); +const navLinks = document.getElementById("nav-links"); +const menuBtnIcon = menuBtn.querySelector("i"); + +menuBtn.addEventListener("click", (e) => { + navLinks.classList.toggle("open"); + + const isOpen = navLinks.classList.contains("open"); + menuBtnIcon.setAttribute("class", isOpen ? "ri-close-line" : "ri-menu-line"); +}); + +navLinks.addEventListener("click", (e) => { + navLinks.classList.remove("open"); + menuBtnIcon.setAttribute("class", "ri-menu-line"); +}); + +const scrollRevealOption = { + distance: "50px", + origin: "bottom", + duration: 1000, +}; + +ScrollReveal().reveal(".header__image img", { + ...scrollRevealOption, + origin: "right", +}); +ScrollReveal().reveal(".header__content h1", { + ...scrollRevealOption, + delay: 500, +}); +ScrollReveal().reveal(".header__content p", { + ...scrollRevealOption, + delay: 1000, +}); +ScrollReveal().reveal(".header__links", { + ...scrollRevealOption, + delay: 1500, +}); + +ScrollReveal().reveal(".steps__card", { + ...scrollRevealOption, + interval: 500, +}); + +ScrollReveal().reveal(".service__image img", { + ...scrollRevealOption, + origin: "left", +}); +ScrollReveal().reveal(".service__content .section__subheader", { + ...scrollRevealOption, + delay: 500, +}); +ScrollReveal().reveal(".service__content .section__header", { + ...scrollRevealOption, + delay: 1000, +}); +ScrollReveal().reveal(".service__list li", { + ...scrollRevealOption, + delay: 1500, + interval: 500, +}); + +ScrollReveal().reveal(".experience__card", { + duration: 1000, + interval: 500, +}); + +ScrollReveal().reveal(".download__image img", { + ...scrollRevealOption, + origin: "right", +}); +ScrollReveal().reveal(".download__content .section__header", { + ...scrollRevealOption, + delay: 500, +}); +ScrollReveal().reveal(".download__content p", { + ...scrollRevealOption, + delay: 1000, +}); +ScrollReveal().reveal(".download__links", { + ...scrollRevealOption, + delay: 1500, +}); \ No newline at end of file diff --git a/play.png b/play.png new file mode 100644 index 0000000..474643c Binary files /dev/null and b/play.png differ diff --git a/pure.png b/pure.png new file mode 100644 index 0000000..6cbc82c Binary files /dev/null and b/pure.png differ diff --git a/smt.png b/smt.png new file mode 100644 index 0000000..17a06ab Binary files /dev/null and b/smt.png differ diff --git a/store.jpg b/store.jpg new file mode 100644 index 0000000..0d76f3b Binary files /dev/null and b/store.jpg differ diff --git a/style.css b/style.css new file mode 100644 index 0000000..6a2f121 --- /dev/null +++ b/style.css @@ -0,0 +1,648 @@ +@import url("https://fonts.googleapis.com/css2?family=Mulish:ital,wght@0,200..1000;1,200..1000&display=swap"); + +:root { + --primary-color: #fe5b3e; + --text-dark: #0f172a; + --text-light: #475569; + --extra-light: #f2f2f2; + --white: #ffffff; + --max-width: 1200px; + --gradient: linear-gradient(to bottom, #260c07, #1a0d03); +} + +* { + padding: 0; + margin: 0; + box-sizing: border-box; +} + +.section__container { + max-width: var(--max-width); + margin: auto; + padding: 5rem 1rem; +} + +.section__subheader { + margin-bottom: 0.5rem; + font-size: 1rem; + font-weight: 600; + color: var(--text-light); + letter-spacing: 1px; +} + +.section__header { + font-size: 2.5rem; + font-weight: 800; + color: var(--text-dark); +} + +.btn { + padding: 0.75rem 1.5rem; + outline: none; + border: none; + font-size: 1rem; + color: var(--white); + background-color: #474fa0; + white-space: nowrap; + border-radius: 4px; + transition: 0.3s; + cursor: pointer; +} + +.btn:hover { + background-color: #3c4286; +} + +img { + display: flex; + width: 100%; +} + +a { + text-decoration: none; + transition: 0.3s; +} + +ul { + list-style: none; +} + +html, +body { + scroll-behavior: smooth; +} + +body { + font-family: "Mulish", sans-serif; +} + +header { + position: relative; +} + +header::before { + position: absolute; + content: ""; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1)); + z-index: -1; +} + +nav { + position: fixed; + isolation: isolate; + width: 100%; + z-index: 9; +} + +.nav__header { + padding: 1rem; + width: 100%; + display: flex; + align-items: center; + justify-content: space-between; + background-color: var(--primary-color); +} + +.nav__logo a { + font-size: 1.5rem; + font-weight: 700; + color: var(--white); +} + +.nav__menu__btn { + font-size: 1.5rem; + color: var(--white); + cursor: pointer; +} + +.nav__links { + position: absolute; + top: 100%; + left: 0; + width: 100%; + padding: 2rem; + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + gap: 2rem; + background-color: var(--primary-color); + transition: 0.5s; + z-index: -1; + transform: translateY(-100%); +} + +.nav__links.open { + transform: translateY(0); +} + +.nav__links a { + font-weight: 700; + color: var(--white); +} + +.nav__links .btn { + padding: 0; + background-color: transparent; +} + +.nav__btns { + display: none; +} + +.header__container { + display: grid; + gap: 2rem 0; + position: relative; + isolation: isolate; + overflow: hidden; +} + +.header__container::before { + position: absolute; + content: ""; + top: 0; + right: 0; + width: 100%; + height: 50%; + background: var(--gradient); + border-radius: 1rem 1rem 0.5rem 0.5rem; + z-index: -1; +} + +.header__content h1 { + position: relative; + isolation: isolate; + margin-bottom: 2rem; + font-size: 2.75rem; + font-weight: 800; + color: var(--text-dark); + line-height: 3.25rem; +} + +.header__content h1::before { + position: absolute; + content: ""; + left: 0; + bottom: -1rem; + height: 4px; + width: 2rem; + background-color: var(--primary-color); +} + +.header__content p { + margin-bottom: 2rem; + font-weight: 500; + color: var(--text-dark); + line-height: 1.75rem; +} + +.header__links { + display: flex; + align-items: center; + gap: 1rem; +} + +.header__links img { + max-width: 125px; + border-radius: 5px; + box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.1); +} + +.steps__container :is(.section__subheader, .section__header) { + text-align: center; +} + +.steps__grid { + margin-top: 4rem; + display: grid; + gap: 2rem; +} + +.steps__card { + text-align: center; +} + +.steps__card span { + display: inline-block; + margin-bottom: 2rem; + padding: 10px 17px; + font-size: 1.75rem; + color: var(--primary-color); + border-radius: 5px; + background-color: var(--extra-light); + border: 4px solid var(--white); + box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.1); +} + +.steps__card:hover span { + padding: 14px 21px; + background: var(--gradient); + color: var(--white); + border: none; +} + +.steps__card h4 { + margin-bottom: 1rem; + font-size: 1.25rem; + font-weight: 800; + color: var(--text-dark); +} + +.steps__card p { + color: var(--text-light); + line-height: 1.75rem; +} + +.service__container { + display: grid; + gap: 2rem; + overflow: hidden; +} + +.service__list { + margin-top: 2rem; + display: grid; + gap: 2rem; +} + +.service__list li { + display: flex; + align-items: flex-start; + gap: 1rem; +} + +.service__list li span { + padding: 12px 15px; + font-size: 1.5rem; + color: var(--primary-color); + background-color: var(--extra-light); + border: 4px solid var(--white); + border-radius: 5px; + box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.1); +} + +.service__list h4 { + margin-bottom: 0.5rem; + font-size: 1.2rem; + font-weight: 700; + color: var(--text-dark); +} + +.service__list p { + color: var(--text-light); + line-height: 1.75rem; +} + +.experience__container :is(.section__subheader, .section__header) { + text-align: center; + max-width: 600px; + margin-inline: auto; +} + +.experience__content { + max-width: 1024px; + margin-inline: auto; + margin-top: 4rem; + position: relative; + isolation: isolate; +} + +.experience__content img { + max-width: 300px; + margin-inline: auto; + opacity: 0.5; +} + +.experience__card { + position: absolute; + max-width: 200px; +} + +.experience__card span { + display: inline-block; + margin-bottom: 0.5rem; + padding: 10px 13px; + font-size: 1.5rem; + color: var(--primary-color); + background-color: var(--extra-light); + border: 4px solid var(--white); + border-radius: 5px; + box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.1); +} + +.experience__card h4 { + font-size: 1rem; + font-weight: 700; + color: var(--text-dark); +} + +.experience__card:nth-child(1) { + top: 5rem; + left: 1rem; +} + +.experience__card:nth-child(2) { + top: 50%; + left: 1rem; + transform: translateY(-50%); +} + +.experience__card:nth-child(3) { + bottom: 5rem; + left: 1rem; +} + +.experience__card:nth-child(4) { + top: 5rem; + right: 1rem; + text-align: right; +} + +.experience__card:nth-child(5) { + top: 50%; + right: 1rem; + transform: translateY(-50%); + text-align: right; +} + +.experience__card:nth-child(6) { + bottom: 5rem; + right: 1rem; + text-align: right; +} + +.download__container { + overflow: hidden; +} + +.download__grid { + display: grid; + padding: 5rem 1rem; + background: var(--gradient); + border-radius: 1rem; +} + +.download__image { + display: none; +} + +.download__content .section__header { + margin-bottom: 1rem; + color: var(--white); +} + +.download__content p { + margin-bottom: 2rem; + color: var(--extra-light); + line-height: 1.75rem; +} + +.download__links { + display: flex; + align-items: center; + gap: 1rem; +} + +.download__links img { + max-width: 125px; + border-radius: 5px; + box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.1); +} + +.footer__container { + display: grid; + gap: 4rem 2rem; + border-bottom: 1px solid var(--text-light); +} + +.footer__col h4 { + margin-bottom: 2rem; + font-size: 1.25rem; + font-weight: 700; + color: var(--text-dark); +} + +.footer__links { + display: grid; + gap: 1rem; +} + +.footer__links a { + font-weight: 600; + color: var(--text-light); +} + +.footer__links a:hover { + color: var(--primary-color); +} + +.footer__bar { + padding-block: 2rem; + display: flex; + align-items: center; + justify-content: space-between; + flex-direction: column; + gap: 1rem; + flex-wrap: wrap; +} + +.footer__bar h4 { + font-size: 1.5rem; + font-weight: 700; + color: var(--text-dark); +} + +.footer__bar p { + font-weight: 500; + color: var(--text-light); + text-align: center; +} + +.footer__socials { + display: flex; + align-items: center; + gap: 1rem; +} + +.footer__socials a { + display: inline-block; + padding: 8px 10px; + font-size: 1rem; + color: var(--text-dark); + border-radius: 100%; + box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.1); +} + +.footer__socials a:hover { + color: var(--white); + background: var(--gradient); +} + +@media (width > 540px) { + .steps__grid { + grid-template-columns: repeat(2, 1fr); + } + + .footer__container { + grid-template-columns: repeat(2, 1fr); + } +} + +@media (width > 768px) { + header::before { + height: calc(100% - 4rem); + } + + nav { + position: static; + padding-block: 2rem; + padding-inline: 1rem; + max-width: var(--max-width); + margin-inline: auto; + display: flex; + align-items: center; + justify-content: space-between; + gap: 2rem; + } + + .nav__header { + flex: 1; + padding: 0; + background-color: transparent; + } + + .nav__logo a { + font-weight: 800; + color: var(--text-dark); + } + + .nav__menu__btn { + display: none; + } + + .nav__links { + position: static; + padding: 0; + width: fit-content; + flex-direction: row; + background-color: transparent; + transform: none; + } + + .nav__links a { + padding-block: 5px; + color: var(--text-dark); + border-bottom: 2px solid transparent; + } + + .nav__links a:hover { + border-color: var(--primary-color); + } + + .nav__links__btn { + display: none; + } + + .nav__btns { + display: flex; + flex: 1; + align-items: center; + justify-content: flex-end; + } + + .nav__btns .btn__primary { + color: var(--text-dark); + background-color: transparent; + } + + .header__container { + grid-template-columns: repeat(5, 1fr); + align-items: center; + } + + .header__container::before { + right: 5rem; + width: calc(50% - 4rem); + height: 100%; + } + + .header__image { + grid-column: 3/6; + } + + .header__content { + grid-area: 1/1/2/3; + } + + .steps__grid { + grid-template-columns: repeat(3, 1fr); + } + + .service__container { + grid-template-columns: repeat(2, 1fr); + align-items: center; + } + + .experience__content img { + opacity: 1; + } + + .experience__card:nth-child(1) { + left: 5rem; + } + + .experience__card:nth-child(3) { + left: 5rem; + } + + .experience__card:nth-child(4) { + right: 5rem; + } + + .experience__card:nth-child(6) { + right: 5rem; + } + + .download__grid { + margin-block: 4rem; + padding-inline: 2rem; + grid-template-columns: repeat(2, 1fr); + align-items: center; + } + + .download__image { + display: flex; + position: relative; + isolation: isolate; + } + + .download__image img { + position: absolute; + max-width: 300px; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + filter: drop-shadow(0 0 20px rgba(0, 0, 0, 0.2)); + } + + .footer__container { + grid-template-columns: repeat(4, 1fr); + } + + .footer__bar { + flex-direction: row; + } + + .footer__bar :is(h4, .footer__socials) { + flex: 1; + } + + .footer__socials { + justify-content: flex-end; + } +} \ No newline at end of file