diff --git a/Thumbs.db b/Thumbs.db new file mode 100644 index 0000000..80443ab Binary files /dev/null and b/Thumbs.db differ diff --git a/assets/css/style.css b/assets/css/style.css new file mode 100644 index 0000000..390d8f9 --- /dev/null +++ b/assets/css/style.css @@ -0,0 +1,402 @@ +/*-----------------------------------*\ + #style.css +\*-----------------------------------*/ + +/*-----------------------------------*\ + #CUSTOM PROPERTY +\*-----------------------------------*/ + +:root { + /* colors */ + --international-orange-engineering: hsl(1, 91%, 37%); + --cadet-blue-creyola: hsl(222, 14%, 69%); + --oxford-blue-1: hsl(222, 47%, 15%); + --oxford-blue-2: hsl(222, 44%, 14%); + --oxford-blue-3: hsl(222, 50%, 11%); + --sonic-silver: hsl(0, 0%, 44%); + --space-cadet: hsl(222, 44%, 18%); + --pastel-pink: hsl(1, 53%, 75%); + --eerie-black: hsl(0, 0%, 15%); + --light-gray: hsl(0, 0%, 80%); + --white: hsl(0, 0%, 100%); + + /* typography */ + --ff-chakra-petch: "Chakra Petch", sans-serif; + --ff-mulish: "Mulish", sans-serif; + + --fs-1: 3.5rem; + --fs-2: 3rem; + --fs-3: 2.4rem; + --fs-4: 1.8rem; + --fs-5: 1.4rem; + --fs-6: 1.2rem; + + --fw-400: 400; + --fw-600: 600; + --fw-700: 700; + + /* spacing */ + --section-padding: 60px; + + /* box shadow */ + --shadow: 0px 0px 100px 0px hsl(216, 9%, 90%); + + /* border-radius */ + --radius-pill: 100px; + --radius-circle: 50%; + + /* transition */ + --transition: 0.25s ease; + --cubic-out: cubic-bezier(0.05, 0.83, 0.52, 0.97); +} + +/*-----------------------------------*\ + #RESET +\*-----------------------------------*/ + +*, +*::before, +*::after { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +li { + list-style: none; +} + +a, +img, +span, +button { + display: block; +} + +a { + color: inherit; + text-decoration: none; +} + +img { + height: auto; +} + +button { + background: none; + border: none; + font: inherit; + cursor: pointer; +} + +address { + font-style: normal; +} + +html { + font-family: var(--ff-mulish); + font-size: 10px; + scroll-behavior: smooth; +} + +body { + background-color: var(--white); + color: var(--sonic-silver); + font-size: 1.6rem; + line-height: 1.5; +} + +:focus-visible { + outline-offset: 4px; +} +::-webkit-scrollbar { + width: 10px; +} +::-webkit-scrollbar-track { + background-color: hsl(0, 0%, 98%); +} +::-webkit-scrollbar-thumb { + background-color: hsl(0, 0%, 80%); +} +::-webkit-scrollbar-thumb:hover { + background-color: hsl(0, 0%, 70%); +} + +/*-----------------------------------*\ + #REUSED STYLE +\*-----------------------------------*/ + +.container { + padding-inline: 16px; +} + +.material-symbols-rounded { + --fs: 1em; + font-variation-settings: "FILL" 0, "wght" 600, "GRAD" 0, "opsz" 40; + font-size: var(--fs); + width: 1em; + overflow: hidden; +} + +.has-bg-image { + background-repeat: no-repeat; + background-size: cover; + background-position: left; +} + +.section-subtitle { + max-width: max-content; + font-family: var(--ff-chakra-petch); + font-size: var(--fs-5); + font-weight: var(--fw-600); + text-transform: uppercase; + margin-block-end: 12px; + margin-inline: auto; +} + +.section-subtitle::before { + content: ""; + display: inline-block; + height: 15px; + width: 30px; + margin-block-end: -2px; + background-repeat: no-repeat; + background-size: contain; + background-position: center; +} + +.section-subtitle.\:dark { + color: var(--white); +} +.section-subtitle.\:dark::before { + background-image: url("../images/text-bars-light.png"); +} + +.section-subtitle.\:light { + color: var(--international-orange-engineering); +} +.section-subtitle.\:light::before { + background-image: url("../images/text-bars-dark.png"); +} + +.section-title { + text-align: center; +} + +.h1, +.h2, +.h3, +.display-1 { + font-family: var(--ff-chakra-petch); + font-weight: var(--fw-700); + text-transform: uppercase; +} + +.display-1 { + font-size: var(--fs-1); +} + +.h1 { + color: var(--white); + font-size: var(--fs-2); + line-height: 1.1; + letter-spacing: 1px; +} + +.h2, +.h3 { + color: var(--eerie-black); + font-weight: var(--fw-600); + line-height: 1.2; +} + +.h2 { + font-size: var(--fs-3); +} + +.h3 { + font-size: var(--fs-4); +} + +.btn { + background-color: var(--international-orange-engineering); + color: var(--white); + max-width: max-content; + font-family: var(--ff-chakra-petch); + font-weight: var(--fw-600); + text-transform: uppercase; + display: flex; + align-items: center; + gap: 8px; + padding: 12px 20px; + border: 1px solid transparent; + border-radius: var(--radius-pill); + transition: var(--transition); + will-change: transform; +} + +.btn:is(:hover, :focus-visible) { + transform: translateY(-5px); + background-color: var(--oxford-blue-3); + border-color: var(--white); +} + +.move-anim { + animation: moving 2s ease-in-out infinite alternate; +} + +@keyframes moving { + 0% { + transform: translateY(0); + } + 100% { + transform: translateY(10px); + } +} + +/*-----------------------------------*\ + #HEADER +\*-----------------------------------*/ + +.header .btn { + display: none; +} + +.header { + position: absolute; + top: 0; + left: 0; + width: 100%; + padding: 40px 15px; + padding-inline-start: 40px; + z-index: 4; +} + +.header .container { + display: flex; + justify-content: space-between; + align-items: center; +} + +.logo img { + width: 100px; +} + +.nav-toggle-icon { + width: 30px; + height: 2px; + background-color: var(--white); + transition: var(--transition); +} + +.nav-toggle-icon:not(:last-child) { + margin-block-end: 7px; +} + +.nav-toggle-btn.active .icon-2 { + opacity: 0; + transform: translateX(-10px); +} + +.nav-toggle-btn.active .icon-1 { + transform: rotate(45deg) translate(8px, 8px); +} + +.nav-toggle-btn.active .icon-3 { + transform: rotate(-45deg) translate(4px, -4px); +} + +.navbar { + position: absolute; + top: 100px; + right: 30px; + background-color: var(--international-orange-engineering); + min-width: max-content; + width: 30%; + transform: translateY(20px); + opacity: 0; + visibility: hidden; + transition: 0.25s var(--cubic-out); + z-index: 2; +} + +.navbar.active { + transform: translateY(0); + opacity: 1; + visibility: visible; + transition-duration: 0.5s; +} + +.navbar-link { + font-family: var(--ff-chakra-petch); + font-size: var(--fs-5); + text-transform: uppercase; + color: var(--white); + padding: 10px 20px; + transition: var(--transition); +} + +.navbar-link:is(:hover, :focus-visible) { + background-color: var(--white); + color: var(--international-orange-engineering); +} +/*-----------------------------------*\ + #HERO +\*-----------------------------------*/ + +.hero { + position: relative; + padding-block-start: calc(var(--section-padding) + 70px); + text-align: center; + z-index: 1; + overflow: hidden; +} + +.hero .container { + display: grid; + gap: 30px; +} + +.hero .section-subtitle { + text-transform: unset; +} + +.hero .section-text { + color: var(--white); + margin-block: 14px 18px; +} + +.hero .btn { + margin-inline: auto; +} + +.hero-banner { + aspect-ratio: var(--width) / var(--height); +} + +.hero-banner img { + position: absolute; + bottom: 0; + right: 0; + width: 90%; + z-index: -1; +} +/*-----------------------------------*\ + #SERVICE +\*-----------------------------------*/ + +/*-----------------------------------*\ + #ABOUT +\*-----------------------------------*/ + +/*-----------------------------------*\ + #WORK +\*-----------------------------------*/ + +/*-----------------------------------*\ + #FOOTER +\*-----------------------------------*/ + +/*-----------------------------------*\ + #MEDIA QUERIES +\*-----------------------------------*/ diff --git a/assets/images/Thumbs.db b/assets/images/Thumbs.db new file mode 100644 index 0000000..05aa570 Binary files /dev/null and b/assets/images/Thumbs.db differ diff --git a/assets/images/about-abs-banner.png b/assets/images/about-abs-banner.png new file mode 100644 index 0000000..e781969 Binary files /dev/null and b/assets/images/about-abs-banner.png differ diff --git a/assets/images/about-banner.png b/assets/images/about-banner.png new file mode 100644 index 0000000..b5912bc Binary files /dev/null and b/assets/images/about-banner.png differ diff --git a/assets/images/about-shape.png b/assets/images/about-shape.png new file mode 100644 index 0000000..c255b50 Binary files /dev/null and b/assets/images/about-shape.png differ diff --git a/assets/images/facebook.svg b/assets/images/facebook.svg new file mode 100644 index 0000000..193b19c --- /dev/null +++ b/assets/images/facebook.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/assets/images/footer-shape-1.png b/assets/images/footer-shape-1.png new file mode 100644 index 0000000..f57f73a Binary files /dev/null and b/assets/images/footer-shape-1.png differ diff --git a/assets/images/footer-shape-2.png b/assets/images/footer-shape-2.png new file mode 100644 index 0000000..9c9f6a1 Binary files /dev/null and b/assets/images/footer-shape-2.png differ diff --git a/assets/images/footer-shape-3.png b/assets/images/footer-shape-3.png new file mode 100644 index 0000000..94a9205 Binary files /dev/null and b/assets/images/footer-shape-3.png differ diff --git a/assets/images/hero-banner.png b/assets/images/hero-banner.png new file mode 100644 index 0000000..de9e1af Binary files /dev/null and b/assets/images/hero-banner.png differ diff --git a/assets/images/hero-bg.jpg b/assets/images/hero-bg.jpg new file mode 100644 index 0000000..b0601b7 Binary files /dev/null and b/assets/images/hero-bg.jpg differ diff --git a/assets/images/instagram.svg b/assets/images/instagram.svg new file mode 100644 index 0000000..eb0468d --- /dev/null +++ b/assets/images/instagram.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/assets/images/logo.png b/assets/images/logo.png new file mode 100644 index 0000000..1b8336b Binary files /dev/null and b/assets/images/logo.png differ diff --git a/assets/images/nav-before-img.png b/assets/images/nav-before-img.png new file mode 100644 index 0000000..874204e Binary files /dev/null and b/assets/images/nav-before-img.png differ diff --git a/assets/images/service-bg.jpg b/assets/images/service-bg.jpg new file mode 100644 index 0000000..df32326 Binary files /dev/null and b/assets/images/service-bg.jpg differ diff --git a/assets/images/services-1.png b/assets/images/services-1.png new file mode 100644 index 0000000..72d0ed8 Binary files /dev/null and b/assets/images/services-1.png differ diff --git a/assets/images/services-2.png b/assets/images/services-2.png new file mode 100644 index 0000000..77a7673 Binary files /dev/null and b/assets/images/services-2.png differ diff --git a/assets/images/services-3.png b/assets/images/services-3.png new file mode 100644 index 0000000..d3a5235 Binary files /dev/null and b/assets/images/services-3.png differ diff --git a/assets/images/services-4.png b/assets/images/services-4.png new file mode 100644 index 0000000..32530c3 Binary files /dev/null and b/assets/images/services-4.png differ diff --git a/assets/images/services-5.png b/assets/images/services-5.png new file mode 100644 index 0000000..faab876 Binary files /dev/null and b/assets/images/services-5.png differ diff --git a/assets/images/services-6.png b/assets/images/services-6.png new file mode 100644 index 0000000..7249dbc Binary files /dev/null and b/assets/images/services-6.png differ diff --git a/assets/images/text-bars-dark.png b/assets/images/text-bars-dark.png new file mode 100644 index 0000000..151d717 Binary files /dev/null and b/assets/images/text-bars-dark.png differ diff --git a/assets/images/text-bars-light.png b/assets/images/text-bars-light.png new file mode 100644 index 0000000..a0a0ac4 Binary files /dev/null and b/assets/images/text-bars-light.png differ diff --git a/assets/images/twitter.svg b/assets/images/twitter.svg new file mode 100644 index 0000000..d6e6a47 --- /dev/null +++ b/assets/images/twitter.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/images/work-1.jpg b/assets/images/work-1.jpg new file mode 100644 index 0000000..a736037 Binary files /dev/null and b/assets/images/work-1.jpg differ diff --git a/assets/images/work-2.jpg b/assets/images/work-2.jpg new file mode 100644 index 0000000..07292fb Binary files /dev/null and b/assets/images/work-2.jpg differ diff --git a/assets/images/work-3.jpg b/assets/images/work-3.jpg new file mode 100644 index 0000000..90faf61 Binary files /dev/null and b/assets/images/work-3.jpg differ diff --git a/assets/js/script.js b/assets/js/script.js new file mode 100644 index 0000000..79da6e0 --- /dev/null +++ b/assets/js/script.js @@ -0,0 +1,11 @@ +"use strict"; + +// MOBILE NAVBAR TOGGLE + +const navbar = document.querySelector("[data-navbar]"); +const navToggler = document.querySelector("[data-nav-toggler]"); + +navToggler.addEventListener("click", function () { + navbar.classList.toggle("active"); + this.classList.toggle("active"); +}); diff --git a/favicon.svg b/favicon.svg new file mode 100644 index 0000000..371771f --- /dev/null +++ b/favicon.svg @@ -0,0 +1,4 @@ + + + + diff --git a/index.html b/index.html new file mode 100644 index 0000000..2f3d8d2 --- /dev/null +++ b/index.html @@ -0,0 +1,128 @@ + + + + + + + Autofix - Auto Maintenance & Repair Service + + + + + + + + + + + + + + + + + + + + +
+
+ + + + + + Get a Quote + arrow_forward + + + +
+
+ +
+
+ + +
+
+
+

+ We have talented engineers & mechanics +

+ +

+ Auto Maintenance & Repair Service +

+ +

+ Duis aute irure dolor in reprehenderit in voluptate velit esse + Excepteur sint occaecat cupidatat non proident. +

+ + + Our Services + arrow_forward + +
+ +
+ red motor vehicle +
+
+
+
+
+ + + + diff --git a/index.txt b/index.txt new file mode 100644 index 0000000..9d3408d --- /dev/null +++ b/index.txt @@ -0,0 +1,151 @@ +Autofix - Auto Maintenance & Repair Service + +This is a vehicle repair html template made by codewithsadee + + + +#---------- HEADER ----------# + +alt = autofix home + +Home +About +Services +Projects +Contact + +Get a Quote +arrow_forward + +aria-label = toggle menu + + +#---------- HERO ----------# + +We have talented engineers & mechanics + +Auto Maintenance & Repair Service + +Duis aute irure dolor in reprehenderit in voluptate velit esse Excepteur sint occaecat cupidatat non proident. + +Our Services +arrow_forward + +alt = red motor vehicle + + + +#---------- SERVICE ----------# + +Our services +We Provide Great Services For your Vehicle + +alt = Engine Repair +Engine Repair +Autem velaum iure reare aenderit rui in ea roluptate esse ruam moles + +Read more + +alt = Brake Repair +Brake Repair + +alt = Tire Repair +Tire Repair + +alt = Battery Repair +Battery Repair + +alt = Red Car + +alt = Steering Repair +Steering Repair + +View All Services +arrow_forward + + + +#---------- ABOUT ----------# + +alt = vehicle repire equipments + +About Us + +We’re Commited to Meet the quality + +Quis autem vel eum iure reprehenderit qui in ea volu velit esse quam nihil molestiae consequatur, vel illum eui dolorem eum fugiat ruo. + +Reprehenderit qui in ea volu velit esse quam nihil moe stiae consequatur, vel illum eui. + +8K+ +Happy Clients + +22+ +Instruments + +50+ +Years in market + +99% +Projects completed + + + +#---------- WORK ----------# + +Our Work + +Latest projects we have done + +alt = Engine Repair +Auto Repair +Engine Repair + +arrow_forward + +alt = Car Tyre change +Car Tyre change + +alt = Battery Adjust +Battery Adjust + + + +#---------- FOOTER ----------# + +alt = autofix home + +Rerum necessitatibus saepe eveniet aut et voluptates repudiandae sint et molestiae non recusandae. + +alt = facebook +alt = instagram +alt = twitter + +Opening Hours + +Monday – Saturday +12.00 – 14.45 + +Sunday – Thursday +17.30 – 00.00 + +Friday – Saturday + +Contact Info + +call ++01 2 3456 7890 + +mail +info@autofix.com + +location_on +21 King Street Melbourne, 3000, Australia + +alt = Shape + +Copyright 2023, All Rights Reserved. + +alt = Shape + +alt = Red Car \ No newline at end of file diff --git a/readme-images/desktop.png b/readme-images/desktop.png new file mode 100644 index 0000000..5fe79f7 Binary files /dev/null and b/readme-images/desktop.png differ diff --git a/style-guide.md b/style-guide.md new file mode 100644 index 0000000..1ecab56 --- /dev/null +++ b/style-guide.md @@ -0,0 +1,81 @@ +# Essential Stuff + +## Html import links + +Google font + +``` html + + + +``` + +Material icon font + +``` html + +``` + +--- + +## Colors + +``` css +--international-orange-engineering: hsl(1, 91%, 37%); +--cadet-blue-creyola: hsl(222, 14%, 69%); +--oxford-blue-1: hsl(222, 47%, 15%); +--oxford-blue-2: hsl(222, 44%, 14%); +--oxford-blue-3: hsl(222, 50%, 11%); +--sonic-silver: hsl(0, 0%, 44%); +--space-cadet: hsl(222, 44%, 18%); +--pastel-pink: hsl(1, 53%, 75%); +--eerie-black: hsl(0, 0%, 15%); +--light-gray: hsl(0, 0%, 80%); +--white: hsl(0, 0%, 100%); +``` + +## Typography + +``` css +--ff-chakra-petch: 'Chakra Petch', sans-serif; +--ff-mulish: 'Mulish', sans-serif; + +--fs-1: 3.5rem; +--fs-2: 3rem; +--fs-3: 2.4rem; +--fs-4: 1.8rem; +--fs-5: 1.4rem; +--fs-6: 1.2rem; + +--fw-400: 400; +--fw-600: 600; +--fw-700: 700; +``` + +## Spacing + +``` css +--section-padding: 60px; +``` + +## Shadow + +``` css +--shadow: 0px 0px 100px 0px hsl(216, 9%, 90%); +``` + +## Border Radius + +``` css +--radius-pill: 100px; +--radius-circle: 50%; +``` + +## Transition + +``` css +--transition: 0.25s ease; +--cubic-out: cubic-bezier(0.05, 0.83, 0.52, 0.97); +```