├── assets ├── fonts │ └── flaticon.ttf ├── images │ ├── footer-bg.png │ ├── gallery-1.jpg │ ├── gallery-2.jpg │ ├── gallery-3.jpg │ ├── gallery-4.jpg │ ├── pricing-1.jpg │ ├── pricing-2.jpg │ ├── pricing-3.jpg │ ├── pricing-4.jpg │ ├── pricing-5.jpg │ ├── pricing-6.jpg │ ├── pricing-7.jpg │ ├── pricing-8.jpg │ ├── pricing-bg.jpg │ ├── footer-blog-1.jpg │ ├── footer-blog-2.jpg │ ├── hero-banner.jpg │ ├── appoin-banner-1.jpg │ └── appoin-banner-2.jpg ├── css │ ├── flaticon.min.css │ └── style.css └── js │ └── script.js ├── readme-images └── desktop.png ├── README.md ├── style-guide.md ├── favicon.svg ├── index.txt └── index.html /assets/fonts/flaticon.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/barber/HEAD/assets/fonts/flaticon.ttf -------------------------------------------------------------------------------- /readme-images/desktop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/barber/HEAD/readme-images/desktop.png -------------------------------------------------------------------------------- /assets/images/footer-bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/barber/HEAD/assets/images/footer-bg.png -------------------------------------------------------------------------------- /assets/images/gallery-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/barber/HEAD/assets/images/gallery-1.jpg -------------------------------------------------------------------------------- /assets/images/gallery-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/barber/HEAD/assets/images/gallery-2.jpg -------------------------------------------------------------------------------- /assets/images/gallery-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/barber/HEAD/assets/images/gallery-3.jpg -------------------------------------------------------------------------------- /assets/images/gallery-4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/barber/HEAD/assets/images/gallery-4.jpg -------------------------------------------------------------------------------- /assets/images/pricing-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/barber/HEAD/assets/images/pricing-1.jpg -------------------------------------------------------------------------------- /assets/images/pricing-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/barber/HEAD/assets/images/pricing-2.jpg -------------------------------------------------------------------------------- /assets/images/pricing-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/barber/HEAD/assets/images/pricing-3.jpg -------------------------------------------------------------------------------- /assets/images/pricing-4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/barber/HEAD/assets/images/pricing-4.jpg -------------------------------------------------------------------------------- /assets/images/pricing-5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/barber/HEAD/assets/images/pricing-5.jpg -------------------------------------------------------------------------------- /assets/images/pricing-6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/barber/HEAD/assets/images/pricing-6.jpg -------------------------------------------------------------------------------- /assets/images/pricing-7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/barber/HEAD/assets/images/pricing-7.jpg -------------------------------------------------------------------------------- /assets/images/pricing-8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/barber/HEAD/assets/images/pricing-8.jpg -------------------------------------------------------------------------------- /assets/images/pricing-bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/barber/HEAD/assets/images/pricing-bg.jpg -------------------------------------------------------------------------------- /assets/images/footer-blog-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/barber/HEAD/assets/images/footer-blog-1.jpg -------------------------------------------------------------------------------- /assets/images/footer-blog-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/barber/HEAD/assets/images/footer-blog-2.jpg -------------------------------------------------------------------------------- /assets/images/hero-banner.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/barber/HEAD/assets/images/hero-banner.jpg -------------------------------------------------------------------------------- /assets/images/appoin-banner-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/barber/HEAD/assets/images/appoin-banner-1.jpg -------------------------------------------------------------------------------- /assets/images/appoin-banner-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/barber/HEAD/assets/images/appoin-banner-2.jpg -------------------------------------------------------------------------------- /assets/css/flaticon.min.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8";@font-face{font-family:flaticon;src:url("../fonts/flaticon.ttf?798b834cf6f35b1643f2eaed810e30d2") format("truetype"),url("../fonts/flaticon.woff?798b834cf6f35b1643f2eaed810e30d2") format("woff"),url("../fonts/flaticon.woff2?798b834cf6f35b1643f2eaed810e30d2") format("woff2"),url("../fonts/flaticon.eot?798b834cf6f35b1643f2eaed810e30d2#iefix") format("embedded-opentype"),url("../fonts/flaticon.svg?798b834cf6f35b1643f2eaed810e30d2#flaticon") format("svg")}i[class*=" flaticon-"]:before,i[class^=flaticon-]:before{font-family:flaticon!important;font-style:normal;font-weight:400!important;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.flaticon-barber:before{content:""}.flaticon-scissors:before{content:""}.flaticon-straight-razor:before{content:""}.flaticon-beauty-treatment:before{content:""}.flaticon-hot-stones:before{content:""}.flaticon-salon:before{content:""}.flaticon-shampoo:before{content:""}.flaticon-hot-stone:before{content:""}.flaticon-treatment:before{content:""}.flaticon-shaving-razor:before{content:""}.flaticon-hair-dye:before{content:""}.flaticon-beauty-salon:before{content:""}.flaticon-relax:before{content:""}.flaticon-massage:before{content:""}.flaticon-spa:before{content:""}.flaticon-yoga:before{content:""}.flaticon-razor-blade:before{content:""}.flaticon-quotation:before{content:""}.flaticon-save-money:before{content:""}.flaticon-home:before{content:""}.flaticon-shopping-cart:before{content:""}.flaticon-dumbbell:before{content:""}.flaticon-fork:before{content:""}.flaticon-soap:before{content:""}.flaticon-medal:before{content:""} -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |
2 | 3 | ![GitHub repo size](https://img.shields.io/github/repo-size/codewithsadee/barber) 4 | ![GitHub stars](https://img.shields.io/github/stars/codewithsadee/barber?style=social) 5 | ![GitHub forks](https://img.shields.io/github/forks/codewithsadee/barber?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/pIgMTd8ZFxY?style=social)](https://youtu.be/pIgMTd8ZFxY) 8 | 9 |
10 |
11 | 12 |

Barber - Barber Website

13 | 14 | Barber is a fully responsive barber website,
Responsive for all devices, build using HTML, CSS, and JavaScript. 15 | 16 | ➥ Live Demo 17 | 18 |
19 | 20 |
21 | 22 | ### Demo Screeshots 23 | 24 | ![Barber Desktop Demo](./readme-images/desktop.png "Desktop Demo") 25 | 26 | ### Prerequisites 27 | 28 | Before you begin, ensure you have met the following requirements: 29 | 30 | * [Git](https://git-scm.com/downloads "Download Git") must be installed on your operating system. 31 | 32 | ### Run Locally 33 | 34 | To run **Barber** locally, run this command on your git bash: 35 | 36 | Linux and macOS: 37 | 38 | ```bash 39 | sudo git clone https://github.com/codewithsadee/barber.git 40 | ``` 41 | 42 | Windows: 43 | 44 | ```bash 45 | git clone https://github.com/codewithsadee/barber.git 46 | ``` 47 | 48 | ### Contact 49 | 50 | If you want to contact with me you can reach me at [Twitter](https://www.twitter.com/codewithsadee). 51 | 52 | ### License 53 | 54 | This project is **free to use** and does not contains any license. 55 | -------------------------------------------------------------------------------- /assets/js/script.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | 4 | 5 | /** 6 | * add event on element 7 | */ 8 | 9 | const addEventOnElem = function (elem, type, callback) { 10 | if (elem.length > 1) { 11 | for (let i = 0; i < elem.length; i++) { 12 | elem[i].addEventListener(type, callback); 13 | } 14 | } else { 15 | elem.addEventListener(type, callback); 16 | } 17 | } 18 | 19 | 20 | 21 | /** 22 | * navbar toggle 23 | */ 24 | 25 | const navbar = document.querySelector("[data-navbar]"); 26 | const navToggler = document.querySelector("[data-nav-toggler]"); 27 | const navLinks = document.querySelectorAll("[data-nav-link]"); 28 | 29 | const toggleNavbar = () => navbar.classList.toggle("active"); 30 | 31 | addEventOnElem(navToggler, "click", toggleNavbar); 32 | 33 | const closeNavbar = () => navbar.classList.remove("active"); 34 | 35 | addEventOnElem(navLinks, "click", closeNavbar); 36 | 37 | 38 | 39 | /** 40 | * header & back top btn active when scroll down to 100px 41 | */ 42 | 43 | const header = document.querySelector("[data-header]"); 44 | const backTopBtn = document.querySelector("[data-back-top-btn]"); 45 | 46 | const headerActive = function () { 47 | if (window.scrollY > 100) { 48 | header.classList.add("active"); 49 | backTopBtn.classList.add("active"); 50 | } else { 51 | header.classList.remove("active"); 52 | backTopBtn.classList.remove("active"); 53 | } 54 | } 55 | 56 | addEventOnElem(window, "scroll", headerActive); 57 | 58 | 59 | 60 | /** 61 | * filter function 62 | */ 63 | 64 | const filterBtns = document.querySelectorAll("[data-filter-btn]"); 65 | const filterItems = document.querySelectorAll("[data-filter]"); 66 | 67 | let lastClickedFilterBtn = filterBtns[0]; 68 | 69 | const filter = function () { 70 | lastClickedFilterBtn.classList.remove("active"); 71 | this.classList.add("active"); 72 | lastClickedFilterBtn = this; 73 | 74 | for (let i = 0; i < filterItems.length; i++) { 75 | if (this.dataset.filterBtn === filterItems[i].dataset.filter || 76 | this.dataset.filterBtn === "all") { 77 | 78 | filterItems[i].style.display = "block"; 79 | filterItems[i].classList.add("active"); 80 | 81 | } else { 82 | 83 | filterItems[i].style.display = "none"; 84 | filterItems[i].classList.remove("active"); 85 | 86 | } 87 | } 88 | } 89 | 90 | addEventOnElem(filterBtns, "click", filter); -------------------------------------------------------------------------------- /style-guide.md: -------------------------------------------------------------------------------- 1 | # Essential Stuff 2 | 3 | ## Html import links 4 | 5 | Google font 6 | 7 | ``` html 8 | 9 | 10 | 13 | ``` 14 | 15 | Flaticon 16 | 17 | ``` html 18 | 19 | ``` 20 | 21 | Ionicon 22 | 23 | ``` html 24 | 25 | 26 | ``` 27 | 28 | --- 29 | 30 | ## Colors 31 | 32 | ``` css 33 | --rich-black-fogra-39_50: hsla(0, 0%, 5%, 0.5); 34 | --rich-black-fogra-39: hsl(0, 0%, 5%); 35 | --indian-yellow_10: hsla(36, 61%, 58%, 0.1); 36 | --indian-yellow: hsl(36, 61%, 58%); 37 | --harvest-gold: hsl(36, 66%, 53%); 38 | --eerie-black-1: hsl(0, 0%, 14%); 39 | --eerie-black-2: hsl(0, 0%, 12%); 40 | --eerie-black-2_85: hsla(0, 0%, 12%, 0.85); 41 | --eerie-black-3: hsl(0, 0%, 8%); 42 | --sonic-silver: hsl(0, 0%, 44%); 43 | --davys-gray: hsl(210, 9%, 31%); 44 | --light-gray: hsl(0, 0%, 80%); 45 | --platinum: hsl(0, 0%, 91%); 46 | --black_30: hsla(0, 0%, 0%, 0.3); 47 | --white_10: hsla(0, 0%, 100%, 0.1); 48 | --white_30: hsla(0, 0%, 100%, 0.3 ); 49 | --white_50: hsla(0, 0%, 100%, 0.5); 50 | --white: hsl(0, 0%, 100%); 51 | --jet: hsl(0, 0%, 21%); 52 | ``` 53 | 54 | ## Typography 55 | 56 | ``` css 57 | --ff-oswald : 'Oswald', sans-serif; 58 | --ff-rubik: 'Rubik', sans-serif; 59 | 60 | --fs-40: 4rem; 61 | --fs-30: 3rem; 62 | --fs-24: 2.4rem; 63 | --fs-18: 1.8rem; 64 | --fs-14: 1.4rem; 65 | --fs-13: 1.3rem; 66 | 67 | --fw-300: 300; 68 | --fw-500: 500; 69 | --fw-600: 600; 70 | --fw-700: 700; 71 | ``` 72 | 73 | ## Spacing 74 | 75 | ``` css 76 | --section-padding: 80px; 77 | ``` 78 | 79 | ## Shadow 80 | 81 | ``` css 82 | --shadow-1: 10px 0 60px hsla(0, 0%, 15%, 0.07); 83 | --shadow-2: 10px 0 60px hsla(0, 0%, 15%, 0.1); 84 | ``` 85 | 86 | ## Border Radius 87 | 88 | ``` css 89 | --radius-5: 5px; 90 | --radius-8: 8px; 91 | ``` 92 | 93 | ## Transition 94 | 95 | ``` css 96 | --transition-1: 0.25s ease; 97 | --transition-2: 0.5s ease; 98 | --cubic-out: cubic-bezier(0.33, 0.85, 0.4, 0.96); 99 | ``` 100 | -------------------------------------------------------------------------------- /favicon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /index.txt: -------------------------------------------------------------------------------- 1 | Barber - Barbers & Hair Cutting 2 | This is a barber html template made by codewithsadee 3 | 4 | 5 | 6 | #---------- HEADER ----------# 7 | 8 | 9 | Call Us : 10 | 012 (345) 67 895 11 | 12 | 13 | Opening Hour : 14 | Sunday - Friday, 08 am - 09 pm 15 | 16 | 17 | 18 | 19 | 20 | 21 | Barber 22 | Hair Salon 23 | 24 | Home 25 | Services 26 | Pricing 27 | Gallery 28 | Appointment 29 | Contact 30 | 31 | aria-label="toggle menu" 32 | 33 | 34 | Appointment 35 | 36 | 37 | 38 | 39 | #---------- HERO ----------# 40 | 41 | Barbers & Hair Cutting 42 | 43 | Sit amet consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua suspendisse ultrices gravida 44 | 45 | Explore Our Services 46 | 47 | 48 | 49 | 50 | #---------- SERVICE ----------# 51 | 52 | Service We Provide 53 | 54 | Sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt labore dolore magna aliqua suspendisse 55 | 56 | 57 | 58 | Hair Cutting Style 59 | 60 | Sit amet consectetur adipisci elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 61 | 62 | aria-label="more" 63 | 64 | 65 | 66 | Hair Washing 67 | 68 | 69 | Body Treatments 70 | 71 | 72 | Beauty & Spa 73 | 74 | 75 | Stylist Shaving 76 | 77 | 78 | Multi Hair Colors 79 | 80 | 81 | 82 | #---------- PRICING ----------# 83 | 84 | Awesome Pricing Plan 85 | 86 | Sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt labore dolore magna aliqua suspendisse 87 | 88 | filter = all 89 | 90 | All Pricing 91 | 92 | filter = beauty-spa 93 | 94 | Beauty & Spa 95 | 96 | filter = body-treatments 97 | 98 | Body Treatments 99 | 100 | filter = face-washing 101 | 102 | Face Washing 103 | 104 | filter = meditations 105 | 106 | Meditations 107 | 108 | filter = shaving 109 | 110 | Shaving 111 | 112 | filter = shaving 113 | alt = Hair Cutting & Fitting 114 | 115 | Hair Cutting & Fitting 116 | Clean & simple 30-40 minutes 117 | $89 118 | 119 | filter = shaving 120 | Shaving & Facial 121 | $45 122 | 123 | filter = face-washing 124 | Hair Color & Wash 125 | $35 126 | 127 | filter = body-treatments 128 | Body Massage 129 | $56 130 | 131 | filter = beauty-spa 132 | Beauty & Spa 133 | $27 134 | 135 | filter = face-washing 136 | Facial & Face Wash 137 | $63 138 | 139 | filter = body-treatments 140 | Backbone Massage 141 | $43 142 | 143 | filter = meditations 144 | Meditation & Massage 145 | $74 146 | 147 | 148 | 149 | #---------- GALLERY ----------# 150 | 151 | Latest Photo Gallery 152 | 153 | Sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt labore dolore magna aliqua suspendisse 154 | 155 | Explore More Gallery 156 | 157 | 158 | alt = Hair Cutting 159 | 160 | Hair Cutting 161 | 162 | Barbers & Salon Services 163 | 164 | aria-label="Read more" 165 | 166 | 167 | 168 | 169 | 170 | #---------- APPOINTMENT ----------# 171 | 172 | Make Appointment 173 | 174 | Sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt labore dolore magna aliqua suspendisse 175 | 176 | placeholder = Your Full Name 177 | placeholder = Email Address 178 | placeholder = Phone Number 179 | 180 | Select category 181 | Beauty & spa 182 | Body massage 183 | Shaving & Facial 184 | Hair Color 185 | 186 | placeholder = Write Message 187 | 188 | Appointment Now 189 | 190 | 191 | 192 | 193 | #---------- FOOTER ----------# 194 | 195 | Barber 196 | Hair Salon 197 | 198 | placeholder = Enter Your Email 199 | 200 | Subscribe Now 201 | 202 | 203 | Quick Links 204 | 205 | Our Services 206 | Meet Our Team 207 | Our Portfolio 208 | Need A Career? 209 | News & Blog 210 | 211 | Services 212 | 213 | Hair Cutting 214 | Shaving & Design 215 | Hair Colors 216 | Beauty & Spa 217 | Body Massages 218 | 219 | Recent News 220 | 221 | alt = The beginners guide to Henna Brows in Brisbane 222 | The beginners guide to Henna Brows in Brisbane 223 | 224 | 225 | 25 August 2022 226 | 227 | alt = How do I get rid of unwanted hair on my face? 228 | How do I get rid of unwanted hair on my face? 229 | 230 | Contact Us 231 | 232 | 233 | 7528 Roberts Ave. Palm Bay, FL 32907 234 | 235 | 236 | +012 (345) 67 89 237 | 238 | 239 | Sun - Friday, 08 am - 09 pm 240 | 241 | 242 | support@gmail.com 243 | 244 | © 2022 codewithsadee. All Rights Reserved. 245 | 246 | 247 | 248 | #---------- BACK TO TOP ----------# 249 | 250 | aria-label="back to top" 251 | 252 | -------------------------------------------------------------------------------- /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 | --rich-black-fogra-39_50: hsla(0, 0%, 5%, 0.5); 24 | --rich-black-fogra-39: hsl(0, 0%, 5%); 25 | --indian-yellow_10: hsla(36, 61%, 58%, 0.1); 26 | --indian-yellow: hsl(36, 61%, 58%); 27 | --harvest-gold: hsl(36, 66%, 53%); 28 | --eerie-black-1: hsl(0, 0%, 14%); 29 | --eerie-black-2: hsl(0, 0%, 12%); 30 | --eerie-black-2_85: hsla(0, 0%, 12%, 0.85); 31 | --eerie-black-3: hsl(0, 0%, 8%); 32 | --sonic-silver: hsl(0, 0%, 44%); 33 | --davys-gray: hsl(210, 9%, 31%); 34 | --light-gray: hsl(0, 0%, 80%); 35 | --platinum: hsl(0, 0%, 91%); 36 | --black_30: hsla(0, 0%, 0%, 0.3); 37 | --white_10: hsla(0, 0%, 100%, 0.1); 38 | --white_30: hsla(0, 0%, 100%, 0.3 ); 39 | --white_50: hsla(0, 0%, 100%, 0.5); 40 | --white: hsl(0, 0%, 100%); 41 | --jet: hsl(0, 0%, 21%); 42 | 43 | /** 44 | * typography 45 | */ 46 | 47 | --ff-oswald : 'Oswald', sans-serif; 48 | --ff-rubik: 'Rubik', sans-serif; 49 | 50 | --fs-40: 4rem; 51 | --fs-30: 3rem; 52 | --fs-24: 2.4rem; 53 | --fs-18: 1.8rem; 54 | --fs-14: 1.4rem; 55 | --fs-13: 1.3rem; 56 | 57 | --fw-300: 300; 58 | --fw-500: 500; 59 | --fw-600: 600; 60 | --fw-700: 700; 61 | 62 | /** 63 | * spacing 64 | */ 65 | 66 | --section-padding: 80px; 67 | 68 | /** 69 | * shadow 70 | */ 71 | 72 | --shadow-1: 10px 0 60px hsla(0, 0%, 15%, 0.07); 73 | --shadow-2: 10px 0 60px hsla(0, 0%, 15%, 0.1); 74 | 75 | /** 76 | * radius 77 | */ 78 | 79 | --radius-5: 5px; 80 | --radius-8: 8px; 81 | 82 | /** 83 | * transition 84 | */ 85 | 86 | --transition-1: 0.25s ease; 87 | --transition-2: 0.5s ease; 88 | --cubic-out: cubic-bezier(0.33, 0.85, 0.4, 0.96); 89 | 90 | } 91 | 92 | 93 | 94 | 95 | 96 | /*-----------------------------------*\ 97 | #RESET 98 | \*-----------------------------------*/ 99 | 100 | *, 101 | *::before, 102 | *::after { 103 | margin: 0; 104 | padding: 0; 105 | box-sizing: border-box; 106 | } 107 | 108 | li { list-style: none; } 109 | 110 | a, 111 | img, 112 | span, 113 | data, 114 | input, 115 | select, 116 | button, 117 | textarea, 118 | ion-icon { display: block; } 119 | 120 | a { 121 | color: inherit; 122 | text-decoration: none; 123 | } 124 | 125 | img { height: auto; } 126 | 127 | input, 128 | select, 129 | button, 130 | textarea { 131 | background: none; 132 | border: none; 133 | font: inherit; 134 | } 135 | 136 | input, 137 | select, 138 | textarea { width: 100%; } 139 | 140 | button { cursor: pointer; } 141 | 142 | ion-icon { pointer-events: none; } 143 | 144 | address { font-style: normal; } 145 | 146 | html { 147 | font-family: var(--ff-rubik); 148 | font-size: 10px; 149 | scroll-behavior: smooth; 150 | } 151 | 152 | body { 153 | background-color: var(--white); 154 | color: var(--sonic-silver); 155 | font-size: 1.6rem; 156 | line-height: 2; 157 | } 158 | 159 | :focus-visible { outline-offset: 4px; } 160 | 161 | ::-webkit-scrollbar { width: 10px; } 162 | 163 | ::-webkit-scrollbar-track { background-color: hsl(0, 0%, 98%); } 164 | 165 | ::-webkit-scrollbar-thumb { background-color: hsl(0, 0%, 80%); } 166 | 167 | ::-webkit-scrollbar-thumb:hover { background-color: hsl(0, 0%, 70%); } 168 | 169 | 170 | 171 | 172 | 173 | /*-----------------------------------*\ 174 | #REUSED STYLE 175 | \*-----------------------------------*/ 176 | 177 | .container { padding-inline: 15px; } 178 | 179 | .section { padding-block: var(--section-padding); } 180 | 181 | .has-before, 182 | .has-after { 183 | position: relative; 184 | z-index: 1; 185 | } 186 | 187 | .has-before::before, 188 | .has-after::after { 189 | position: absolute; 190 | content: ""; 191 | } 192 | 193 | .has-bg-image { 194 | background-repeat: no-repeat; 195 | background-size: cover; 196 | background-position: center; 197 | } 198 | 199 | .h1, 200 | .h2, 201 | .h3 { 202 | font-family: var(--ff-oswald); 203 | line-height: 1.3; 204 | } 205 | 206 | .h1, 207 | .h2 { text-transform: uppercase; } 208 | 209 | .h1, 210 | .h3 { font-weight: var(--fw-600); } 211 | 212 | .h1 { 213 | color: var(--white); 214 | font-size: var(--fs-40); 215 | } 216 | 217 | .h2, 218 | .h3 { color: var(--eerie-black-1); } 219 | 220 | .h2 { font-size: var(--fs-30); } 221 | 222 | .h3 { font-size: var(--fs-24); } 223 | 224 | .btn { 225 | color: var(--white); 226 | background-color: var(--indian-yellow); 227 | display: flex; 228 | align-items: center; 229 | gap: 10px; 230 | max-width: max-content; 231 | padding: 10px 25px; 232 | font-family: var(--ff-oswald); 233 | font-size: var(--fs-14); 234 | font-weight: var(--fw-600); 235 | text-transform: uppercase; 236 | border-radius: var(--radius-5); 237 | overflow: hidden; 238 | } 239 | 240 | .btn::before { 241 | background-color: var(--eerie-black-1); 242 | inset: 0; 243 | z-index: -1; 244 | transform: skewY(-15deg) scaleY(0); 245 | transition: var(--transition-2); 246 | } 247 | 248 | .btn:is(:hover, :focus)::before { transform: skewY(-15deg) scaleY(2.5); } 249 | 250 | .text-center { text-align: center; } 251 | 252 | .grid-list { 253 | display: grid; 254 | gap: 30px; 255 | } 256 | 257 | .img-holder { 258 | aspect-ratio: var(--width) / var(--height); 259 | background-color: var(--light-gray); 260 | overflow: hidden; 261 | } 262 | 263 | .img-cover { 264 | width: 100%; 265 | height: 100%; 266 | object-fit: cover; 267 | } 268 | 269 | 270 | 271 | 272 | 273 | /*-----------------------------------*\ 274 | #HEADER 275 | \*-----------------------------------*/ 276 | 277 | .header-top-item, 278 | .header .btn { display: none; } 279 | 280 | .header-top-list, 281 | .header-top-list .social-list { 282 | display: flex; 283 | align-items: center; 284 | } 285 | 286 | .header-top-list { justify-content: center; } 287 | 288 | .header-top-list .social-list { 289 | gap: 20px; 290 | padding-block: 15px; 291 | } 292 | 293 | .header-top-list .social-link { 294 | color: var(--sonic-silver); 295 | font-size: 15px; 296 | transition: var(--transition-1); 297 | } 298 | 299 | .header-top-list .social-link:is(:hover, :focus) { color: var(--indian-yellow); } 300 | 301 | .header-bottom { 302 | position: absolute; 303 | top: 45px; 304 | left: 0; 305 | width: 100%; 306 | padding-block: 10px; 307 | z-index: 4; 308 | } 309 | 310 | .header-bottom.active { 311 | position: fixed; 312 | top: 0; 313 | background-color: var(--rich-black-fogra-39); 314 | transform: translateY(-100%); 315 | animation: slideIn 0.5s ease forwards; 316 | } 317 | 318 | @keyframes slideIn { 319 | 0% { transform: translateY(-100%); } 320 | 100% { transform: translateY(0); } 321 | } 322 | 323 | .header-bottom > .container { 324 | display: flex; 325 | justify-content: space-between; 326 | align-items: center; 327 | } 328 | 329 | .logo { 330 | color: var(--indian-yellow); 331 | font-family: var(--ff-oswald); 332 | font-size: 2.7rem; 333 | font-weight: var(--fw-600); 334 | text-transform: uppercase; 335 | line-height: 1.4; 336 | } 337 | 338 | .logo .span { 339 | color: var(--white); 340 | font-family: var(--ff-rubik); 341 | font-size: 1.3rem; 342 | font-weight: var(--fw-300); 343 | text-transform: capitalize; 344 | letter-spacing: 2px; 345 | } 346 | 347 | .nav-toggle-btn { 348 | color: var(--white); 349 | font-size: 40px; 350 | } 351 | 352 | .navbar { 353 | position: absolute; 354 | padding-inline: 0; 355 | top: 100%; 356 | left: 15px; 357 | right: 15px; 358 | background-color: var(--rich-black-fogra-39); 359 | max-height: 0; 360 | overflow: hidden; 361 | transition: 0.15s var(--cubic-out); 362 | } 363 | 364 | .navbar.active { 365 | max-height: 321px; 366 | transition-duration: 0.5s; 367 | } 368 | 369 | .navbar-list { 370 | border-block-start: 1px solid var(--jet); 371 | margin-block: 25px; 372 | } 373 | 374 | .navbar-item { border-block-end: 1px solid var(--jet); } 375 | 376 | .navbar-link { 377 | color: var(--white); 378 | font-family: var(--ff-oswald); 379 | font-weight: var(--fw-600); 380 | text-transform: uppercase; 381 | line-height: 1.5; 382 | padding: 10px 30px; 383 | transition: var(--transition-1); 384 | } 385 | 386 | .navbar-link:is(:hover, :focus) { color: var(--indian-yellow); } 387 | 388 | 389 | 390 | 391 | 392 | /*-----------------------------------*\ 393 | #HERO 394 | \*-----------------------------------*/ 395 | 396 | .hero { 397 | --section-padding: 100px; 398 | padding-block-start: calc(var(--section-padding) + 40px); 399 | background-position: left; 400 | } 401 | 402 | .hero::before { 403 | inset: 0; 404 | background-color: var(--rich-black-fogra-39_50); 405 | mix-blend-mode: multiply; 406 | z-index: -1; 407 | } 408 | 409 | .hero-text { 410 | color: var(--white); 411 | margin-block: 15px 40px; 412 | } 413 | 414 | 415 | 416 | 417 | 418 | /*-----------------------------------*\ 419 | #SERVICE 420 | \*-----------------------------------*/ 421 | 422 | .service { text-align: center; } 423 | 424 | .service .section-text { margin-block: 15px 55px; } 425 | 426 | .service-card { 427 | background-color: var(--white); 428 | padding: 60px 25px; 429 | box-shadow: var(--shadow-1); 430 | border-radius: var(--radius-8); 431 | } 432 | 433 | .service-card .card-icon { 434 | color: var(--indian-yellow); 435 | font-size: 70px; 436 | line-height: 1; 437 | } 438 | 439 | .service-card .card-title { 440 | margin-block: 15px 12px; 441 | transition: var(--transition-1); 442 | } 443 | 444 | .service-card .card-title:is(:hover, :focus) { color: var(--indian-yellow); } 445 | 446 | .service-card .card-text { margin-block-end: 30px; } 447 | 448 | .service-card .card-btn { 449 | color: var(--indian-yellow); 450 | background-color: var(--white); 451 | max-width: max-content; 452 | margin-inline: auto; 453 | font-size: 20px; 454 | padding: 15px; 455 | box-shadow: var(--shadow-2); 456 | border-radius: var(--radius-5); 457 | transition: var(--transition-2); 458 | } 459 | 460 | .service-card:is(:hover, :focus-within) .card-btn { 461 | background-color: var(--indian-yellow); 462 | color: var(--white); 463 | } 464 | 465 | 466 | 467 | 468 | 469 | /*-----------------------------------*\ 470 | #PRICING 471 | \*-----------------------------------*/ 472 | 473 | .pricing::before { 474 | inset: 0; 475 | background-color: var(--eerie-black-2_85); 476 | mix-blend-mode: multiply; 477 | z-index: -1; 478 | } 479 | 480 | .pricing .section-title { color: var(--white); } 481 | 482 | .pricing .section-text { 483 | margin-block: 15px 55px; 484 | color: var(--white_50); 485 | } 486 | 487 | .pricing-tab-container { 488 | background-color: var(--white); 489 | padding: 40px 5px; 490 | } 491 | 492 | .tab-filter { 493 | display: flex; 494 | flex-wrap: wrap; 495 | justify-content: center; 496 | gap: 3px; 497 | margin-block-end: 30px; 498 | } 499 | 500 | .filter-btn { 501 | color: var(--eerie-black-1); 502 | font-family: var(--ff-oswald); 503 | font-size: var(--fs-14); 504 | font-weight: var(--fw-600); 505 | text-transform: uppercase; 506 | min-width: 130px; 507 | padding-block: 12px; 508 | border: 1px solid var(--platinum); 509 | transition: var(--transition-1); 510 | } 511 | 512 | .filter-btn .btn-icon { display: none; } 513 | 514 | .filter-btn.active { 515 | background-color: var(--indian-yellow); 516 | border-color: var(--indian-yellow); 517 | color: var(--white); 518 | } 519 | 520 | .pricing .grid-list { padding-inline: 20px; } 521 | 522 | .pricing .grid-list > li.active { animation: popup 0.75s ease forwards; } 523 | 524 | @keyframes popup { 525 | 526 | 0% { opacity: 0; } 527 | 100% { opacity: 1; } 528 | 529 | } 530 | 531 | .pricing-card { 532 | background-color: var(--indian-yellow_10); 533 | padding: 20px 25px; 534 | border-radius: var(--radius-5); 535 | display: flex; 536 | flex-wrap: wrap; 537 | justify-content: space-between; 538 | gap: 15px; 539 | } 540 | 541 | .pricing-card .card-banner { 542 | border-radius: 50%; 543 | overflow: hidden; 544 | } 545 | 546 | .pricing-card .wrapper { order: 1; } 547 | 548 | .pricing-card .h3 { 549 | --fs-24: 2rem; 550 | margin-block-end: 8px; 551 | } 552 | 553 | .pricing-card .card-price { 554 | color: var(--indian-yellow); 555 | font-family: var(--ff-oswald); 556 | font-size: var(--fs-30); 557 | font-weight: var(--fw-500); 558 | } 559 | 560 | 561 | 562 | 563 | 564 | /*-----------------------------------*\ 565 | #GALLERY 566 | \*-----------------------------------*/ 567 | 568 | .title-wrapper { margin-block-end: 60px; } 569 | 570 | .gallery .section-text { margin-block: 12px 15px; } 571 | 572 | .gallery-card { position: relative; } 573 | 574 | .gallery-card .card-banner .img-cover { transition: var(--transition-2); } 575 | 576 | .gallery-card:is(:hover, :focus-within) .card-banner .img-cover { transform: scale(1.1); } 577 | 578 | .gallery-card .card-content { 579 | position: absolute; 580 | inset: 15px; 581 | background-color: var(--eerie-black-2_85); 582 | display: flex; 583 | flex-direction: column; 584 | justify-content: center; 585 | align-items: center; 586 | gap: 10px; 587 | opacity: 0; 588 | transform: scale(0.8); 589 | transition: var(--transition-2); 590 | } 591 | 592 | .gallery-card:is(:hover, :focus-within) .card-content { 593 | opacity: 1; 594 | transform: scale(1); 595 | } 596 | 597 | .gallery-card :is(.card-title, .card-text) { color: var(--white); } 598 | 599 | .gallery-card .card-btn { 600 | background-color: var(--white); 601 | color: var(--indian-yellow); 602 | font-size: 18px; 603 | padding: 16px; 604 | border-radius: var(--radius-5); 605 | margin-block-start: 12px; 606 | transition: var(--transition-1); 607 | } 608 | 609 | .gallery-card .card-btn:is(:hover, :focus) { 610 | background-color: var(--indian-yellow); 611 | color: var(--white); 612 | } 613 | 614 | 615 | 616 | 617 | 618 | /*-----------------------------------*\ 619 | #APPOINTMENT 620 | \*-----------------------------------*/ 621 | 622 | .appoin { padding-block-start: 0; } 623 | 624 | .appoin-card .card-banner { display: none; } 625 | 626 | .appoin-card .card-content { 627 | background-color: var(--indian-yellow); 628 | padding: 80px 15px; 629 | text-align: center; 630 | color: var(--white); 631 | } 632 | 633 | .appoin-card .section-title { color: var(--white); } 634 | 635 | .appoin-card .section-text { margin-block: 15px 55px; } 636 | 637 | .input-field { 638 | background-color: var(--white); 639 | color: var(--davys-gray); 640 | min-height: 56px; 641 | padding-inline: 25px; 642 | border-radius: var(--radius-5); 643 | margin-block-end: 20px; 644 | outline: none; 645 | outline-offset: 0; 646 | } 647 | 648 | .input-field:focus { outline: 3px solid var(--black_30); } 649 | 650 | select.input-field { appearance: none; } 651 | 652 | select.input-field, 653 | .input-field::placeholder, 654 | .input-field.date { 655 | font-family: var(--ff-oswald); 656 | color: var(--eerie-black-1); 657 | font-weight: var(--fw-500); 658 | } 659 | 660 | .input-field > option { 661 | color: var(--sonic-silver); 662 | font-family: var(--ff-rubik); 663 | } 664 | 665 | .input-field.date { text-transform: uppercase; } 666 | 667 | .input-field::-webkit-calendar-picker-indicator { opacity: 0.85; } 668 | 669 | textarea.input-field { 670 | padding-block: 15px; 671 | min-height: 100px; 672 | height: 120px; 673 | max-height: 150px; 674 | resize: vertical; 675 | } 676 | 677 | .form-btn { 678 | color: var(--white); 679 | font-family: var(--ff-oswald); 680 | font-size: var(--fs-14); 681 | font-weight: var(--fw-500); 682 | text-transform: uppercase; 683 | width: 100%; 684 | display: flex; 685 | justify-content: center; 686 | align-items: center; 687 | gap: 10px; 688 | border: 1px solid var(--white); 689 | padding: 13px; 690 | border-radius: var(--radius-5); 691 | transition: var(--transition-1); 692 | } 693 | 694 | .form-btn:is(:hover, :focus) { 695 | background-color: var(--white); 696 | color: var(--eerie-black-1); 697 | } 698 | 699 | 700 | 701 | 702 | 703 | /*-----------------------------------*\ 704 | #FOOTER 705 | \*-----------------------------------*/ 706 | 707 | .footer { 708 | background-color: var(--eerie-black-2); 709 | padding-block-end: 30px; 710 | } 711 | 712 | .footer-top { margin-block-end: 65px; } 713 | 714 | .footer-brand { 715 | border: 1px solid var(--white_10); 716 | margin-block-end: 70px; 717 | } 718 | 719 | .footer .logo { 720 | text-align: center; 721 | padding: 25px; 722 | border-block-end: 1px solid var(--white_10); 723 | } 724 | 725 | .footer .input-wrapper { 726 | background-color: var(--white); 727 | position: relative; 728 | margin: 25px; 729 | padding: 15px; 730 | } 731 | 732 | .footer .input-wrapper:focus-within { outline: 3px solid var(--white_30); } 733 | 734 | .footer .email-field { 735 | text-align: center; 736 | margin-block-end: 15px; 737 | color: inherit; 738 | outline: none; 739 | } 740 | 741 | .footer .btn { 742 | max-width: 100%; 743 | width: 100%; 744 | justify-content: center; 745 | } 746 | 747 | .footer-link-box { 748 | display: grid; 749 | gap: 50px; 750 | } 751 | 752 | .footer-list-title { 753 | color: var(--white); 754 | font-family: var(--ff-oswald); 755 | font-size: var(--fs-18); 756 | font-weight: var(--fw-600); 757 | text-transform: uppercase; 758 | margin-block-end: 30px; 759 | } 760 | 761 | .footer-link::before { 762 | position: static; 763 | padding: 2.5px; 764 | background-color: var(--white_30); 765 | display: block; 766 | border-radius: 50%; 767 | transition: var(--transition-1); 768 | } 769 | 770 | .footer-link, 771 | .blog-card, 772 | .blog-card .card-date, 773 | .footer-list-item { 774 | display: flex; 775 | align-items: center; 776 | } 777 | 778 | .footer-link { 779 | color: var(--white_50); 780 | gap: 10px; 781 | margin-block-start: 8px; 782 | transition: var(--transition-1); 783 | } 784 | 785 | .footer-link:is(:hover, :focus) { color: var(--white); } 786 | 787 | .footer-link:is(:hover, :focus)::before { background-color: var(--white); } 788 | 789 | .blog-card { 790 | gap: 25px; 791 | margin-block-start: 20px; 792 | } 793 | 794 | .blog-card .card-banner { flex-shrink: 0; } 795 | 796 | .blog-card .card-title { 797 | color: var(--white); 798 | font-family: var(--ff-oswald); 799 | font-size: var(--fs-14); 800 | font-weight: var(--fw-500); 801 | line-height: 1.5; 802 | margin-block-end: 5px; 803 | transition: var(--transition-1); 804 | } 805 | 806 | .blog-card .card-title:is(:hover, :focus) { color: var(--indian-yellow); } 807 | 808 | .blog-card .card-date { 809 | gap: 5px; 810 | font-size: var(--fs-13); 811 | text-transform: uppercase; 812 | color: var(--white_50); 813 | } 814 | 815 | .blog-card .card-date ion-icon { --ionicon-stroke-width: 50px; } 816 | 817 | .footer-list-item { 818 | align-items: flex-start; 819 | gap: 10px; 820 | margin-block-start: 10px; 821 | } 822 | 823 | .footer-list-item ion-icon { 824 | color: var(--indian-yellow); 825 | font-size: 18px; 826 | flex-shrink: 0; 827 | --ionicon-stroke-width: 50px; 828 | margin-block: 7px; 829 | } 830 | 831 | .contact-link { 832 | color: var(--white_50); 833 | transition: var(--transition-1); 834 | } 835 | 836 | a.contact-link:is(:hover, :focus) { color: var(--white); } 837 | 838 | .footer-bottom { 839 | background-color: var(--eerie-black-3); 840 | text-align: center; 841 | padding: 15px; 842 | } 843 | 844 | .copyright-link { 845 | display: inline-block; 846 | color: var(--indian-yellow); 847 | } 848 | 849 | 850 | 851 | 852 | 853 | /*-----------------------------------*\ 854 | #BACK TO TOP 855 | \*-----------------------------------*/ 856 | 857 | .back-top-btn { 858 | position: fixed; 859 | bottom: 10px; 860 | right: 20px; 861 | background-color: var(--harvest-gold); 862 | color: var(--white); 863 | font-size: 20px; 864 | padding: 10px; 865 | border-radius: var(--radius-5); 866 | z-index: 4; 867 | opacity: 0; 868 | visibility: hidden; 869 | transition: var(--transition-1); 870 | } 871 | 872 | .back-top-btn.active { 873 | opacity: 1; 874 | visibility: visible; 875 | transform: translateY(-10px); 876 | } 877 | 878 | 879 | 880 | 881 | 882 | /*-----------------------------------*\ 883 | #MEDIA QUERIES 884 | \*-----------------------------------*/ 885 | 886 | /** 887 | * responsive for large than 575px screen 888 | */ 889 | 890 | @media (min-width: 575px) { 891 | 892 | /** 893 | * CUSTOM PROPERTY 894 | */ 895 | 896 | :root { 897 | 898 | /** 899 | * typography 900 | */ 901 | 902 | --fs-40: 6rem; 903 | 904 | } 905 | 906 | 907 | 908 | /** 909 | * REUSED STYLE 910 | */ 911 | 912 | .container, 913 | .header-top { 914 | max-width: 540px; 915 | width: 100%; 916 | margin-inline: auto; 917 | } 918 | 919 | .btn { padding: 13px 40px; } 920 | 921 | .h2 { --fs-30: 3.5rem; } 922 | 923 | 924 | 925 | /** 926 | * HEADER 927 | */ 928 | 929 | .header-top { 930 | position: absolute; 931 | top: 0; 932 | left: 50%; 933 | transform: translateX(-50%); 934 | max-width: 600px; 935 | z-index: 4; 936 | background-color: var(--white); 937 | border-radius: 0 0 20px 20px; 938 | } 939 | 940 | .header-top-item:first-child { 941 | display: flex; 942 | align-items: center; 943 | gap: 10px; 944 | } 945 | 946 | .header-top-item ion-icon { 947 | font-size: 18px; 948 | color: var(--indian-yellow); 949 | --ionicon-stroke-width: 50px; 950 | } 951 | 952 | .header-top-item .item-title { 953 | color: var(--eerie-black-1); 954 | font-weight: var(--fw-500); 955 | } 956 | 957 | .header-top-item .item-link { transition: var(--transition-1); } 958 | 959 | .header-top-item .item-link:is(:hover, :focus) { color: var(--indian-yellow); } 960 | 961 | .header-top-list { justify-content: space-between; } 962 | 963 | .logo { font-size: 3rem; } 964 | 965 | .logo .span { font-size: 1.4rem; } 966 | 967 | 968 | 969 | /** 970 | * HERO 971 | */ 972 | 973 | .hero { padding-block-start: calc(var(--section-padding) + 80px); } 974 | 975 | .hero-text { font-size: var(--fs-18); } 976 | 977 | 978 | 979 | /** 980 | * PRICING 981 | */ 982 | 983 | .filter-btn .btn-icon { 984 | display: block; 985 | font-size: 55px; 986 | line-height: 1; 987 | margin-block-end: 5px; 988 | } 989 | 990 | .pricing-card { 991 | flex-wrap: nowrap; 992 | align-items: center; 993 | gap: 30px; 994 | } 995 | 996 | .pricing-card .wrapper { order: 0; } 997 | 998 | .pricing-card .card-price { 999 | align-self: flex-start; 1000 | line-height: 1.6; 1001 | } 1002 | 1003 | 1004 | 1005 | /** 1006 | * GALLERY 1007 | */ 1008 | 1009 | .gallery .grid-list { grid-template-columns: 1fr 1fr; } 1010 | 1011 | 1012 | 1013 | /** 1014 | * APPOINTMENT 1015 | */ 1016 | 1017 | .appoin-card .card-content { padding-inline: 50px; } 1018 | 1019 | 1020 | 1021 | /** 1022 | * FOOTER 1023 | */ 1024 | 1025 | .footer .email-field { 1026 | margin-block-end: 0; 1027 | text-align: left; 1028 | font-size: var(--fs-18); 1029 | padding: 10px 15px; 1030 | padding-inline-end: 210px; 1031 | } 1032 | 1033 | .footer .btn { 1034 | position: absolute; 1035 | top: 15px; 1036 | right: 15px; 1037 | bottom: 15px; 1038 | width: max-content; 1039 | } 1040 | 1041 | .footer-link-box { grid-template-columns: 1fr 1fr; } 1042 | 1043 | .footer-list:is(:nth-child(3), :nth-child(4)) { grid-column: 1 / 3; } 1044 | 1045 | .blog-card .card-title { 1046 | --fs-14: 1.7rem; 1047 | max-width: 25ch; 1048 | } 1049 | 1050 | } 1051 | 1052 | 1053 | 1054 | 1055 | 1056 | /** 1057 | * responsive for large than 768px screen 1058 | */ 1059 | 1060 | @media (min-width: 768px) { 1061 | 1062 | /** 1063 | * CUSTOM PROPERTY 1064 | */ 1065 | 1066 | :root { 1067 | 1068 | /** 1069 | * typography 1070 | */ 1071 | 1072 | --fs-40: 8rem; 1073 | 1074 | } 1075 | 1076 | 1077 | 1078 | /** 1079 | * REUSED STYLE 1080 | */ 1081 | 1082 | .container { max-width: 720px; } 1083 | 1084 | .h2 { --fs-30: 4rem; } 1085 | 1086 | .section-text { 1087 | max-width: 50ch; 1088 | margin-inline: auto; 1089 | } 1090 | 1091 | 1092 | 1093 | /** 1094 | * HEADER 1095 | */ 1096 | 1097 | .header-top { max-width: 780px; } 1098 | 1099 | 1100 | 1101 | /** 1102 | * SERVICE 1103 | */ 1104 | 1105 | .service .grid-list { grid-template-columns: 1fr 1fr; } 1106 | 1107 | 1108 | 1109 | /** 1110 | * PRICING 1111 | */ 1112 | 1113 | .pricing-tab-container { padding: 40px; } 1114 | 1115 | .pricing-card .wrapper { margin-inline-end: auto; } 1116 | 1117 | 1118 | 1119 | /** 1120 | * GALLERY 1121 | */ 1122 | 1123 | .gallery .section-text { margin-inline: 0; } 1124 | 1125 | .gallery-card .card-content { inset: 30px; } 1126 | 1127 | 1128 | 1129 | /** 1130 | * APPOINTMENT 1131 | */ 1132 | 1133 | .appoin-card .card-banner { display: block; } 1134 | 1135 | .appoin-card { display: flex; } 1136 | 1137 | 1138 | 1139 | /** 1140 | * FOOTER 1141 | */ 1142 | 1143 | .footer-list:is(:nth-child(3), :nth-child(4)) { grid-column: auto; } 1144 | 1145 | } 1146 | 1147 | 1148 | 1149 | 1150 | 1151 | /** 1152 | * responsive for large than 992px screen 1153 | */ 1154 | 1155 | @media (min-width: 992px) { 1156 | 1157 | /** 1158 | * CUSTOM PROPERTY 1159 | */ 1160 | 1161 | :root { 1162 | 1163 | /** 1164 | * typography 1165 | */ 1166 | 1167 | --fs-40: 10rem; 1168 | 1169 | } 1170 | 1171 | 1172 | 1173 | /** 1174 | * REUSED STYLE 1175 | */ 1176 | 1177 | .container { max-width: 960px; } 1178 | 1179 | 1180 | 1181 | /** 1182 | * HEADER 1183 | */ 1184 | 1185 | .nav-toggle-btn { display: none; } 1186 | 1187 | .header-top { max-width: 1020px; } 1188 | 1189 | .header-bottom { padding-block: 20px; } 1190 | 1191 | .navbar, 1192 | .navbar-list, 1193 | .navbar-item { all: unset; } 1194 | 1195 | .navbar-list, 1196 | .header .btn { display: flex; } 1197 | 1198 | .navbar-link { padding-inline: 10px; } 1199 | 1200 | 1201 | 1202 | /** 1203 | * HERO 1204 | */ 1205 | 1206 | .hero { 1207 | --section-padding: 150px; 1208 | padding-block-start: calc(var(--section-padding) + 100px); 1209 | } 1210 | 1211 | .hero-title, 1212 | .hero-text { max-width: 600px; } 1213 | 1214 | 1215 | 1216 | /** 1217 | * SERVICE 1218 | */ 1219 | 1220 | .service .grid-list { grid-template-columns: repeat(3, 1fr); } 1221 | 1222 | 1223 | 1224 | /** 1225 | * PRICING 1226 | */ 1227 | 1228 | .pricing .grid-list { grid-template-columns: 1fr 1fr; } 1229 | 1230 | .pricing-card { height: 100%; } 1231 | 1232 | .pricing-card .card-banner { flex-shrink: 0; } 1233 | 1234 | 1235 | 1236 | /** 1237 | * GALLERY 1238 | */ 1239 | 1240 | .gallery .title-wrapper { 1241 | display: flex; 1242 | justify-content: space-between; 1243 | align-items: flex-end; 1244 | } 1245 | 1246 | .gallery .section-text { margin-block-end: 0; } 1247 | 1248 | 1249 | 1250 | /** 1251 | * APPOINTMENT 1252 | */ 1253 | 1254 | .appoin-card .input-wrapper { 1255 | display: flex; 1256 | gap: 20px; 1257 | } 1258 | 1259 | 1260 | 1261 | /** 1262 | * FOOTER 1263 | */ 1264 | 1265 | .footer-brand { 1266 | display: flex; 1267 | align-items: center; 1268 | } 1269 | 1270 | .footer .logo { 1271 | padding: 60px 70px; 1272 | border-block-end: none; 1273 | border-inline-end: 1px solid var(--white_10); 1274 | } 1275 | 1276 | .footer .input-wrapper { 1277 | flex-grow: 1; 1278 | margin-inline: 70px; 1279 | } 1280 | 1281 | } 1282 | 1283 | 1284 | 1285 | 1286 | 1287 | /** 1288 | * responsive for large than 1200px screen 1289 | */ 1290 | 1291 | @media (min-width: 1200px) { 1292 | 1293 | /** 1294 | * CUSTOM PROPERTY 1295 | */ 1296 | 1297 | :root { 1298 | 1299 | /** 1300 | * typography 1301 | */ 1302 | 1303 | --fs-40: 11rem; 1304 | 1305 | /** 1306 | * spacing 1307 | */ 1308 | 1309 | --section-padding: 120px; 1310 | 1311 | } 1312 | 1313 | 1314 | 1315 | /** 1316 | * REUSED STYLE 1317 | */ 1318 | 1319 | .container { max-width: 1200px; } 1320 | 1321 | 1322 | 1323 | /** 1324 | * HEADER 1325 | */ 1326 | 1327 | .header-top { max-width: 1260px; } 1328 | 1329 | .header-top-list { gap: 30px; } 1330 | 1331 | .header-top-item { 1332 | display: flex; 1333 | align-items: center; 1334 | gap: 10px; 1335 | } 1336 | 1337 | .header-top-item:nth-child(2) { margin-inline-end: auto; } 1338 | 1339 | 1340 | 1341 | /** 1342 | * HERO 1343 | */ 1344 | 1345 | .hero { 1346 | background-position: left; 1347 | padding-block-end: 200px; 1348 | } 1349 | 1350 | .hero-title, 1351 | .hero-text { max-width: 680px; } 1352 | 1353 | 1354 | 1355 | /** 1356 | * PRICING 1357 | */ 1358 | 1359 | .filter-btn { min-width: 178px; } 1360 | 1361 | 1362 | 1363 | /** 1364 | * GALLERY 1365 | */ 1366 | 1367 | .gallery .grid-list { grid-template-columns: repeat(4, 1fr); } 1368 | 1369 | 1370 | 1371 | /** 1372 | * APPOINTMENT 1373 | */ 1374 | 1375 | .appoin-card .card-content { flex-grow: 1; } 1376 | 1377 | 1378 | 1379 | /** 1380 | * FOOTER 1381 | */ 1382 | 1383 | .footer-link-box { grid-template-columns: 0.5fr 0.5fr 1fr 0.8fr; } 1384 | 1385 | 1386 | 1387 | /** 1388 | * BACK TO TOP 1389 | */ 1390 | 1391 | .back-top-btn { padding: 15px; } 1392 | 1393 | } -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 12 | Barber - Barbers & Hair Cutting 13 | 14 | 15 | 16 | 19 | 20 | 21 | 24 | 25 | 26 | 29 | 30 | 31 | 34 | 35 | 38 | 39 | 40 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 52 | 53 |
54 | 55 |
56 |
57 | 58 |
    59 | 60 |
  • 61 | 62 | 63 |

    Call Us :

    64 | 65 | 012 (345) 67 895 66 |
    • 67 | 68 |
  • 69 | 70 | 71 |

    Opening Hour :

    72 | 73 |

    Sunday - Friday, 08 am - 09 pm

    74 |
    • 75 | 76 |
  • 77 | 104 |
    • 105 | 106 |
107 | 108 |
109 |
110 | 111 |
112 |
113 | 114 | 118 | 119 | 148 | 149 | 152 | 153 | 154 | Appointment 155 | 156 | 157 | 158 | 159 |
160 |
161 | 162 |
163 | 164 | 165 | 166 | 167 | 168 |
169 |
170 | 171 | 174 | 175 |
177 |
178 | 179 |

Barbers & Hair Cutting

180 | 181 |

182 | Sit amet consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua 183 | suspendisse 184 | ultrices gravida 185 |

186 | 187 | 188 | Explore Our Services 189 | 190 | 191 | 192 | 193 |
194 |
195 | 196 | 197 | 198 | 199 | 200 | 203 | 204 |
205 |
206 | 207 |

Service We Provide

208 | 209 |

210 | Sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt labore dolore magna aliqua suspendisse 211 |

212 | 213 |
    214 | 215 |
  • 216 |
    217 | 218 |
    219 | 220 |
    221 | 222 |

    223 | Hair Cutting Style 224 |

    225 | 226 |

    227 | Sit amet consectetur adipisci elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 228 |

    229 | 230 | 231 | 232 | 233 | 234 |
    235 |
    • 236 | 237 |
  • 238 |
    239 | 240 |
    241 | 242 |
    243 | 244 |

    245 | Hair Washing 246 |

    247 | 248 |

    249 | Sit amet consectetur adipisci elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 250 |

    251 | 252 | 253 | 254 | 255 | 256 |
    257 |
    • 258 | 259 |
  • 260 |
    261 | 262 |
    263 | 264 |
    265 | 266 |

    267 | Body Treatments 268 |

    269 | 270 |

    271 | Sit amet consectetur adipisci elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 272 |

    273 | 274 | 275 | 276 | 277 | 278 |
    279 |
    • 280 | 281 |
  • 282 |
    283 | 284 |
    285 | 286 |
    287 | 288 |

    289 | Beauty & Spa 290 |

    291 | 292 |

    293 | Sit amet consectetur adipisci elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 294 |

    295 | 296 | 297 | 298 | 299 | 300 |
    301 |
    • 302 | 303 |
  • 304 |
    305 | 306 |
    307 | 308 |
    309 | 310 |

    311 | Stylist Shaving 312 |

    313 | 314 |

    315 | Sit amet consectetur adipisci elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 316 |

    317 | 318 | 319 | 320 | 321 | 322 |
    323 |
    • 324 | 325 |
  • 326 |
    327 | 328 |
    329 | 330 |
    331 | 332 |

    333 | Multi Hair Colors 334 |

    335 | 336 |

    337 | Sit amet consectetur adipisci elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 338 |

    339 | 340 | 341 | 342 | 343 | 344 |
    345 |
    • 346 | 347 |
348 | 349 |
350 |
351 | 352 | 353 | 354 | 355 | 356 | 359 | 360 |
362 |
363 | 364 |

Awesome Pricing Plan

365 | 366 |

367 | Sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt labore dolore magna aliqua suspendisse 368 |

369 | 370 |
371 | 372 |
    373 | 374 |
  • 375 | 382 |
    • 383 | 384 |
  • 385 | 392 |
    • 393 | 394 |
  • 395 | 402 |
    • 403 | 404 |
  • 405 | 412 |
    • 413 | 414 |
  • 415 | 422 |
    • 423 | 424 |
  • 425 | 432 |
    • 433 | 434 |
435 | 436 |
    437 | 438 |
  • 439 |
    440 | 441 |
    442 | Hair Cutting & Fitting 444 |
    445 | 446 |
    447 |

    Hair Cutting & Fitting

    448 | 449 |

    Clean & simple 30-40 minutes

    450 |
    451 | 452 | $89 453 | 454 |
    455 |
    • 456 | 457 |
  • 458 |
    459 | 460 |
    461 | Shaving & Facial 463 |
    464 | 465 |
    466 |

    Shaving & Facial

    467 | 468 |

    Clean & simple 30-40 minutes

    469 |
    470 | 471 | $45 472 | 473 |
    474 |
    • 475 | 476 |
  • 477 |
    478 | 479 |
    480 | Hair Color & Wash 482 |
    483 | 484 |
    485 |

    Hair Color & Wash

    486 | 487 |

    Clean & simple 30-40 minutes

    488 |
    489 | 490 | $35 491 | 492 |
    493 |
    • 494 | 495 |
  • 496 |
    497 | 498 |
    499 | Body Massage 501 |
    502 | 503 |
    504 |

    Body Massage

    505 | 506 |

    Clean & simple 30-40 minutes

    507 |
    508 | 509 | $56 510 | 511 |
    512 |
    • 513 | 514 |
  • 515 |
    516 | 517 |
    518 | Beauty & Spa 520 |
    521 | 522 |
    523 |

    Beauty & Spa

    524 | 525 |

    Clean & simple 30-40 minutes

    526 |
    527 | 528 | $27 529 | 530 |
    531 |
    • 532 | 533 |
  • 534 |
    535 | 536 |
    537 | Facial & Face Wash 539 |
    540 | 541 |
    542 |

    Facial & Face Wash

    543 | 544 |

    Clean & simple 30-40 minutes

    545 |
    546 | 547 | $63 548 | 549 |
    550 |
    • 551 | 552 |
  • 553 |
    554 | 555 |
    556 | Backbone Massage 558 |
    559 | 560 |
    561 |

    Backbone Massage

    562 | 563 |

    Clean & simple 30-40 minutes

    564 |
    565 | 566 | $43 567 | 568 |
    569 |
    • 570 | 571 |
  • 572 |
    573 | 574 |
    575 | Meditation & Massage 577 |
    578 | 579 |
    580 |

    Meditation & Massage

    581 | 582 |

    Clean & simple 30-40 minutes

    583 |
    584 | 585 | $74 586 | 587 |
    588 |
    • 589 | 590 |
591 | 592 |
593 | 594 |
595 |
596 | 597 | 598 | 599 | 600 | 601 | 604 | 605 | 725 | 726 | 727 | 728 | 729 | 730 | 733 | 734 |
735 |
736 | 737 |
738 | 739 |
740 | 742 |
743 | 744 |
745 | 746 |

Make Appointment

747 | 748 |

749 | Sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt labore dolore magna aliqua 750 | suspendisse 751 |

752 | 753 |
754 | 755 |
756 | 757 | 758 | 759 |
760 | 761 |
762 | 763 | 764 | 773 |
774 | 775 | 776 | 777 | 778 | 779 | 784 | 785 |
786 | 787 |
788 | 789 |
790 | 792 |
793 | 794 |
795 | 796 |
797 |
798 | 799 |
800 |
801 | 802 | 803 | 804 | 805 | 806 | 809 | 810 | 994 | 995 | 996 | 997 | 998 | 999 | 1002 | 1003 | 1004 | 1005 | 1006 | 1007 | 1008 | 1009 | 1010 | 1011 | 1014 | 1015 | 1016 | 1019 | 1020 | 1021 | 1022 | 1023 | 1024 | --------------------------------------------------------------------------------