├── images ├── Cosmetic-Surgeon.jpg ├── Eyebrow-shaping-and-tinting.png ├── Facial-treatments.png ├── Hair-removal.png ├── Hair-specialist.jpg ├── Haircut-and-styling.png ├── Makeup-artist.jpg ├── Nail-Artist.jpg ├── Spa-treatments.png ├── blog-1.jpg ├── blog-2.jpg ├── blog-3.jpg ├── bottom-img.jpg ├── head-img.jpg ├── logo.svg ├── mid-img.jpg ├── person-1.png ├── person-2.png ├── person-3.png ├── service-img-1.jpg ├── service-img-2.jpg ├── service-img-3.jpg ├── service-img-4.jpg ├── service-img-5.jpg ├── service-img-6.jpg └── skin-rejuvenation.png ├── index.html ├── jqury.min.js ├── style.css ├── style2.css └── view.md /images/Cosmetic-Surgeon.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dev-alihasan/Responsive-Beauty-Salon-or-Spa-Website-HTML-CSS-JavaScript/b396f2b7515f3c8b87205193bd069708ef9021d0/images/Cosmetic-Surgeon.jpg -------------------------------------------------------------------------------- /images/Eyebrow-shaping-and-tinting.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dev-alihasan/Responsive-Beauty-Salon-or-Spa-Website-HTML-CSS-JavaScript/b396f2b7515f3c8b87205193bd069708ef9021d0/images/Eyebrow-shaping-and-tinting.png -------------------------------------------------------------------------------- /images/Facial-treatments.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dev-alihasan/Responsive-Beauty-Salon-or-Spa-Website-HTML-CSS-JavaScript/b396f2b7515f3c8b87205193bd069708ef9021d0/images/Facial-treatments.png -------------------------------------------------------------------------------- /images/Hair-removal.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dev-alihasan/Responsive-Beauty-Salon-or-Spa-Website-HTML-CSS-JavaScript/b396f2b7515f3c8b87205193bd069708ef9021d0/images/Hair-removal.png -------------------------------------------------------------------------------- /images/Hair-specialist.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dev-alihasan/Responsive-Beauty-Salon-or-Spa-Website-HTML-CSS-JavaScript/b396f2b7515f3c8b87205193bd069708ef9021d0/images/Hair-specialist.jpg -------------------------------------------------------------------------------- /images/Haircut-and-styling.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dev-alihasan/Responsive-Beauty-Salon-or-Spa-Website-HTML-CSS-JavaScript/b396f2b7515f3c8b87205193bd069708ef9021d0/images/Haircut-and-styling.png -------------------------------------------------------------------------------- /images/Makeup-artist.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dev-alihasan/Responsive-Beauty-Salon-or-Spa-Website-HTML-CSS-JavaScript/b396f2b7515f3c8b87205193bd069708ef9021d0/images/Makeup-artist.jpg -------------------------------------------------------------------------------- /images/Nail-Artist.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dev-alihasan/Responsive-Beauty-Salon-or-Spa-Website-HTML-CSS-JavaScript/b396f2b7515f3c8b87205193bd069708ef9021d0/images/Nail-Artist.jpg -------------------------------------------------------------------------------- /images/Spa-treatments.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dev-alihasan/Responsive-Beauty-Salon-or-Spa-Website-HTML-CSS-JavaScript/b396f2b7515f3c8b87205193bd069708ef9021d0/images/Spa-treatments.png -------------------------------------------------------------------------------- /images/blog-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dev-alihasan/Responsive-Beauty-Salon-or-Spa-Website-HTML-CSS-JavaScript/b396f2b7515f3c8b87205193bd069708ef9021d0/images/blog-1.jpg -------------------------------------------------------------------------------- /images/blog-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dev-alihasan/Responsive-Beauty-Salon-or-Spa-Website-HTML-CSS-JavaScript/b396f2b7515f3c8b87205193bd069708ef9021d0/images/blog-2.jpg -------------------------------------------------------------------------------- /images/blog-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dev-alihasan/Responsive-Beauty-Salon-or-Spa-Website-HTML-CSS-JavaScript/b396f2b7515f3c8b87205193bd069708ef9021d0/images/blog-3.jpg -------------------------------------------------------------------------------- /images/bottom-img.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dev-alihasan/Responsive-Beauty-Salon-or-Spa-Website-HTML-CSS-JavaScript/b396f2b7515f3c8b87205193bd069708ef9021d0/images/bottom-img.jpg -------------------------------------------------------------------------------- /images/head-img.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dev-alihasan/Responsive-Beauty-Salon-or-Spa-Website-HTML-CSS-JavaScript/b396f2b7515f3c8b87205193bd069708ef9021d0/images/head-img.jpg -------------------------------------------------------------------------------- /images/logo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /images/mid-img.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dev-alihasan/Responsive-Beauty-Salon-or-Spa-Website-HTML-CSS-JavaScript/b396f2b7515f3c8b87205193bd069708ef9021d0/images/mid-img.jpg -------------------------------------------------------------------------------- /images/person-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dev-alihasan/Responsive-Beauty-Salon-or-Spa-Website-HTML-CSS-JavaScript/b396f2b7515f3c8b87205193bd069708ef9021d0/images/person-1.png -------------------------------------------------------------------------------- /images/person-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dev-alihasan/Responsive-Beauty-Salon-or-Spa-Website-HTML-CSS-JavaScript/b396f2b7515f3c8b87205193bd069708ef9021d0/images/person-2.png -------------------------------------------------------------------------------- /images/person-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dev-alihasan/Responsive-Beauty-Salon-or-Spa-Website-HTML-CSS-JavaScript/b396f2b7515f3c8b87205193bd069708ef9021d0/images/person-3.png -------------------------------------------------------------------------------- /images/service-img-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dev-alihasan/Responsive-Beauty-Salon-or-Spa-Website-HTML-CSS-JavaScript/b396f2b7515f3c8b87205193bd069708ef9021d0/images/service-img-1.jpg -------------------------------------------------------------------------------- /images/service-img-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dev-alihasan/Responsive-Beauty-Salon-or-Spa-Website-HTML-CSS-JavaScript/b396f2b7515f3c8b87205193bd069708ef9021d0/images/service-img-2.jpg -------------------------------------------------------------------------------- /images/service-img-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dev-alihasan/Responsive-Beauty-Salon-or-Spa-Website-HTML-CSS-JavaScript/b396f2b7515f3c8b87205193bd069708ef9021d0/images/service-img-3.jpg -------------------------------------------------------------------------------- /images/service-img-4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dev-alihasan/Responsive-Beauty-Salon-or-Spa-Website-HTML-CSS-JavaScript/b396f2b7515f3c8b87205193bd069708ef9021d0/images/service-img-4.jpg -------------------------------------------------------------------------------- /images/service-img-5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dev-alihasan/Responsive-Beauty-Salon-or-Spa-Website-HTML-CSS-JavaScript/b396f2b7515f3c8b87205193bd069708ef9021d0/images/service-img-5.jpg -------------------------------------------------------------------------------- /images/service-img-6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dev-alihasan/Responsive-Beauty-Salon-or-Spa-Website-HTML-CSS-JavaScript/b396f2b7515f3c8b87205193bd069708ef9021d0/images/service-img-6.jpg -------------------------------------------------------------------------------- /images/skin-rejuvenation.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dev-alihasan/Responsive-Beauty-Salon-or-Spa-Website-HTML-CSS-JavaScript/b396f2b7515f3c8b87205193bd069708ef9021d0/images/skin-rejuvenation.png -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Camelia Beauty 7 | 8 | 9 | 10 | 11 | 12 |
13 |
14 |
15 |
16 |

17 | 18 | 19 | 20 |

21 |
22 |
23 | 24 |
25 |
26 | 78 52782857 27 |
28 | 48 6528464 29 |
30 |
31 |
32 |
33 | 34 |
35 |
36 | 290,69DA Norrth America, Silvia Cit 37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 | 72 |
73 |
74 |
75 |
76 |
77 |
78 |
79 |
80 |
81 |
82 |

Take Care of Your Health

83 |

At Medina, we are dedicated to diagnosing all kinds of diseases.

84 | make an appointment 85 |
86 |
87 |
88 |
89 |
90 |
91 |
92 |
93 |
94 |
95 |

Skin Surgeon Doctor

96 |
97 |
98 |

Prof. Dr. Kelli A. Hutchens

99 |

Kelli Hutchens is a Dermatologist in Maywood, Illinois. Dr. Hutchens has been practicing medicine for over 18 years

100 |
101 |
102 |
103 |

Dr. Mary-margaret

104 |

Mary-margaret Noland is a Dermatologist in Charlottesville.

105 |
106 |
107 |
108 |

Dr.Nancy.Mcmichael

109 |

Dr.Nancy.Mcmichael has been practicing medicine for over 14 years and is highly rated in 30 conditions,

110 |
111 |
112 |
113 |
114 | 125 |
126 |
127 |

services

128 |
129 |
130 |
131 |
132 | 133 |
134 |
135 | Eyebrow-shaping-and-tinting 136 |
137 |
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
138 |
139 |
140 |
141 | 142 |
143 |
144 | Facial treatments 145 |
146 |
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
147 |
148 |
149 |
150 | 151 |
152 |
153 | Haircut and styling 154 |
155 |
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
156 |
157 |
158 |
159 | 160 |
161 |
162 | Hair removal 163 |
164 |
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
165 |
166 |
167 |
168 | 169 |
170 |
171 | Skin rejuvenation 172 |
173 |
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
174 |
175 |
176 |
177 | 178 |
179 |
180 | Spa treatments 181 |
182 |
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
183 |
184 |
185 |
186 |
187 | 245 | 256 |
257 |
258 |
259 |

Latest Blog Posts

260 |
261 |
262 | 263 | 264 | 265 |

266 | Best skin care products 267 |

268 |

jan 19, 2023 at 5:12pm

269 |

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dicta, eveniet cupiditate magni sapiente sunt rem placeat laboriosam numquam deserunt ipsa?

270 |
271 |
272 | 284 |
285 |
286 | 287 | 288 | 289 |

290 | Nail polish design ideas 291 |

292 |

dec 26, 2023 at 5:12pm

293 |

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eveniet iusto totam expedita quaerat minus perferendis eos repudiandae reiciendis modi doloribus.

294 |
295 |
296 |
297 |
298 |
299 | 375 |
376 | 377 | 402 | 403 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | list-style: none; 5 | } 6 | body { 7 | font-family: "Lato", Helvetica, Arial, sans-serif; 8 | font-size: 16px; 9 | background-color: #fee3ec; 10 | } 11 | a { 12 | text-decoration: none; 13 | transition: all 0.3s ease-in-out; 14 | } 15 | .d-none { 16 | display: none; 17 | } 18 | .d-block { 19 | display: block; 20 | } 21 | .sr-only { 22 | position: absolute; 23 | width: 1px; 24 | height: 1px; 25 | overflow: hidden; 26 | } 27 | .txt-right { 28 | float: right; 29 | } 30 | .btn { 31 | position: relative; 32 | font-size: 17px; 33 | text-transform: uppercase; 34 | text-decoration: none; 35 | padding: 1em 2.5em; 36 | display: inline-block; 37 | border-radius: 6em; 38 | transition: all 0.2s; 39 | border: none; 40 | font-family: inherit; 41 | font-weight: 500; 42 | color: #000; 43 | background-color: #f8d0e0; 44 | } 45 | .btn:hover { 46 | transform: translateY(-3px); 47 | box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); 48 | background-color: #f8d0e0a4; 49 | } 50 | .btn:active { 51 | transform: translateY(-1px); 52 | box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); 53 | } 54 | .btn::after { 55 | content: ""; 56 | display: inline-block; 57 | height: 100%; 58 | width: 100%; 59 | border-radius: 100px; 60 | position: absolute; 61 | top: 0; 62 | left: 0; 63 | z-index: -1; 64 | transition: all 0.4s; 65 | background-color: #f8d0e0; 66 | } 67 | .btn:hover::after { 68 | transform: scaleX(1.4) scaleY(1.6); 69 | opacity: 0; 70 | } 71 | .container { 72 | width: 100%; 73 | margin: auto; 74 | padding-left: var(--col-gap); 75 | padding-right: var(--col-gap); 76 | } 77 | .row { 78 | display: flex; 79 | flex-wrap: wrap; 80 | margin-left: calc(var(--col-gap) * -1); 81 | margin-right: calc(var(--col-gap) * -1); 82 | } 83 | [class^="col-"] { 84 | padding-left: var(--col-gap); 85 | padding-right: var(--col-gap); 86 | box-sizing: border-box; 87 | } 88 | .col-1 { 89 | width: 8.333333%; 90 | } 91 | .col-2 { 92 | width: 16.666666%; 93 | } 94 | .col-3 { 95 | width: 25%; 96 | } 97 | .col-4 { 98 | width: 33.333333%; 99 | } 100 | .col-5 { 101 | width: 41.666666%; 102 | } 103 | .col-6 { 104 | width: 50%; 105 | } 106 | .col-7 { 107 | width: 58.333333%; 108 | } 109 | .col-8 { 110 | width: 66.666666%; 111 | } 112 | .col-9 { 113 | width: 72.999999%; 114 | } 115 | .col-10 { 116 | width: 83.333333%; 117 | } 118 | .col-11 { 119 | width: 91.666666%; 120 | } 121 | .col-12 { 122 | width: 100%; 123 | } 124 | [class*="row-cols-"] > .col { 125 | flex-grow: 0; 126 | } 127 | .row-cols-1 > .col { 128 | width: 100%; 129 | } 130 | .row-cols-2 > .col { 131 | width: 50%; 132 | } 133 | .row-cols-3 > .col { 134 | width: 33.333333%; 135 | } 136 | .row-cols-4 > .col { 137 | width: 25%; 138 | } 139 | .row-cols-5 > .col { 140 | width: 20%; 141 | } 142 | .row-cols-6 > .col { 143 | width: 16.666666%; 144 | } 145 | @media screen and (min-width: 768px) { 146 | .container { 147 | max-width: 768px; 148 | } 149 | .col-md-1 { 150 | width: 8.333333%; 151 | } 152 | .col-md-2 { 153 | width: 16.666666%; 154 | } 155 | .col-md-3 { 156 | width: 25%; 157 | } 158 | .col-md-4 { 159 | width: 33.333333%; 160 | } 161 | .col-md-5 { 162 | width: 41.666666%; 163 | } 164 | .col-md-6 { 165 | width: 50%; 166 | } 167 | .col-md-7 { 168 | width: 58.333333%; 169 | } 170 | .col-md-8 { 171 | width: 66.666666%; 172 | } 173 | .col-md-9 { 174 | width: 72.999999%; 175 | } 176 | .col-md-10 { 177 | width: 83.333333%; 178 | } 179 | .col-md-11 { 180 | width: 91.666666%; 181 | } 182 | .col-md-12 { 183 | width: 100%; 184 | } 185 | .row-cols-md-1 > .col { 186 | width: 100%; 187 | } 188 | .row-cols-md-2 > .col { 189 | width: 50%; 190 | } 191 | .row-cols-md-3 > .col { 192 | width: 33.333333%; 193 | } 194 | .row-cols-md-4 > .col { 195 | width: 25%; 196 | } 197 | .row-cols-md-5 > .col { 198 | width: 20%; 199 | } 200 | .row-cols-md-6 > .col { 201 | width: 16.666666%; 202 | } 203 | } 204 | @media screen and (min-width: 1200px) { 205 | .container { 206 | max-width: 1200px; 207 | } 208 | .col-xl-1 { 209 | width: 8.333333%; 210 | } 211 | .col-xl-2 { 212 | width: 16.666666%; 213 | } 214 | .col-xl-3 { 215 | width: 25%; 216 | } 217 | .col-xl-4 { 218 | width: 33.333333%; 219 | } 220 | .col-xl-5 { 221 | width: 41.666666%; 222 | } 223 | .col-xl-6 { 224 | width: 50%; 225 | } 226 | .col-xl-7 { 227 | width: 58.333333%; 228 | } 229 | .col-xl-8 { 230 | width: 66.666666%; 231 | } 232 | .col-xl-9 { 233 | width: 72.999999%; 234 | } 235 | .col-xl-10 { 236 | width: 83.333333%; 237 | } 238 | .col-xl-11 { 239 | width: 91.666666%; 240 | } 241 | .col-xl-12 { 242 | width: 100%; 243 | } 244 | .row-cols-xl-1 > .col { 245 | width: 100%; 246 | } 247 | .row-cols-xl-2 > .col { 248 | width: 50%; 249 | } 250 | .row-cols-xl-3 > .col { 251 | width: 33.333333%; 252 | } 253 | .row-cols-xl-4 > .col { 254 | width: 25%; 255 | } 256 | .row-cols-xl-5 > .col { 257 | width: 20%; 258 | } 259 | .row-cols-xl-6 > .col { 260 | width: 16.666666%; 261 | } 262 | .d-xl-inline-block { 263 | display: inline-block; 264 | } 265 | } 266 | .contact { 267 | display: flex; 268 | flex-wrap: wrap; 269 | align-items: center; 270 | } 271 | .contact .contact-icon i { 272 | font-size: 20px; 273 | padding: 13px 16px; 274 | background-color: #ffffff40; 275 | border-radius: 50%; 276 | margin: 0 10px; 277 | } 278 | .contact .contact-main { 279 | width: auto; 280 | } 281 | .main-header { 282 | position: absolute; 283 | width: 100%; 284 | top: 0; 285 | left: 0; 286 | z-index: 10; 287 | } 288 | .main-info { 289 | color: #fff; 290 | padding: 1.5em 0 1em; 291 | text-align: left; 292 | } 293 | .main-info .row { 294 | align-items: center; 295 | } 296 | .main-info .logo { 297 | margin-right: auto; 298 | } 299 | .main-info a { 300 | color: #fff; 301 | } 302 | .main-nav { 303 | margin: auto; 304 | } 305 | .sticky { 306 | width: 100%; 307 | position: fixed; 308 | top: 0; 309 | z-index: 1; 310 | } 311 | .main-nav.sticky { 312 | background: rgba(243, 157, 182, 0.15); 313 | backdrop-filter: blur(4.6px); 314 | -webkit-backdrop-filter: blur(4.6px); 315 | } 316 | .main-nav nav { 317 | margin-left: 15px; 318 | margin-right: 15px; 319 | background: rgba(243, 157, 182, 0.15); 320 | backdrop-filter: blur(4.6px); 321 | -webkit-backdrop-filter: blur(4.6px); 322 | display: flex; 323 | justify-content: space-between; 324 | } 325 | .main-nav nav a { 326 | display: block; 327 | padding: 1.5rem 1rem; 328 | color: #fff; 329 | font-size: 0.95rem; 330 | font-weight: 600; 331 | letter-spacing: 1px; 332 | } 333 | .main-nav nav a:hover, 334 | .main-nav nav a:focus, 335 | .main-nav nav a.active { 336 | background-color: #efa6baa6; 337 | } 338 | .main-header .contact:first-of-type .contact-main { 339 | width: 120px; 340 | } 341 | .main-header .contact:last-of-type { 342 | margin-left: 130px; 343 | } 344 | .main-header .contact:last-of-type .contact-main { 345 | width: 220px; 346 | } 347 | .kv { 348 | background-color: #d3dce4; 349 | } 350 | .slider-banner { 351 | color: #fff; 352 | position: relative; 353 | } 354 | .slider-banner .container { 355 | position: relative; 356 | } 357 | .slider-container { 358 | position: relative; 359 | width: 100%; 360 | height: 760px; 361 | margin: auto; 362 | } 363 | .slider-banner .item { 364 | min-height: 760px; 365 | display: block; 366 | padding-top: 160px; 367 | } 368 | .slider-banner .item h2 { 369 | font-size: 4rem; 370 | } 371 | .slider-banner .item h3 { 372 | font-size: 1.5rem; 373 | font-weight: 400; 374 | margin-bottom: 1.5rem; 375 | } 376 | .slider-banner .item-kv-1 { 377 | background: url(images/head-img.jpg) top center no-repeat; 378 | } 379 | .slider-banner .item-kv-txt { 380 | display: block; 381 | padding-top: 5em; 382 | padding-bottom: 5em; 383 | } 384 | .slider-banner .slider-dot { 385 | position: absolute; 386 | left: 0; 387 | bottom: 50px; 388 | width: 100%; 389 | } 390 | .doc-section { 391 | background-color: #fee3ec; 392 | padding-top: 4em; 393 | padding-bottom: 5em; 394 | text-align: center; 395 | } 396 | .doc-section h2 { 397 | color: #272727; 398 | font-size: 3rem; 399 | margin-bottom: 30px; 400 | } 401 | .doc-section h3 { 402 | color: #272727; 403 | font-size: 1.3rem; 404 | margin-bottom: 10px; 405 | } 406 | .doc-section p { 407 | color: #868686; 408 | font-size: 0.95rem; 409 | line-height: 1.6; 410 | margin-bottom: 10px; 411 | } 412 | .doc-section .icon { 413 | width: 130px; 414 | height: 130px; 415 | border: 2px solid #ccc; 416 | border-radius: 50%; 417 | position: relative; 418 | overflow: hidden; 419 | margin: 0 auto 30px; 420 | } 421 | .doc-section .icon:after { 422 | content: ""; 423 | background-repeat: no-repeat; 424 | background-position: center; 425 | position: absolute; 426 | top: 0; 427 | bottom: 0; 428 | left: 0; 429 | right: 0; 430 | } 431 | .doc-section .icon-pills:after { 432 | background-image: url(images/person-1.png); 433 | } 434 | .doc-section .icon-doctor:after { 435 | background-image: url(images/person-2.png); 436 | } 437 | .doc-section .icon-car:after { 438 | background-image: url(images/person-3.png); 439 | } 440 | @media screen and (min-width: 768) { 441 | .doc-section { 442 | text-align: left; 443 | } 444 | } 445 | .fill-banner { 446 | color: #fff; 447 | padding-top: 5em; 448 | padding-bottom: 5em; 449 | } 450 | .banner-1-bg { 451 | background: url(images/mid-img.jpg) center no-repeat fixed; 452 | } 453 | .banner-2-bg { 454 | background: url(images/bottom-img.jpg) center no-repeat fixed; 455 | } 456 | .fill-banner h2 { 457 | font-size: 4rem; 458 | margin-bottom: 30px; 459 | } 460 | .fill-banner p { 461 | font-size: 1.125rem; 462 | font-weight: 400; 463 | line-height: 1.3; 464 | margin-bottom: 30px; 465 | } 466 | @media screen and (min-width: 768px) { 467 | .item { 468 | position: relative; 469 | } 470 | .item img { 471 | border-radius: 5px; 472 | } 473 | .service-card .btn { 474 | border-radius: 5px; 475 | padding: 15px 30px 15px 15px; 476 | position: absolute; 477 | right: 0; 478 | bottom: 25px; 479 | width: 250px; 480 | max-width: 300px; 481 | } 482 | .service-card .btn:before { 483 | font-family: "Font Awesome 5 Free"; 484 | content: "\f061"; 485 | font-size: 1.35rem; 486 | font-weight: 700; 487 | color: #ccc; 488 | opacity: 0; 489 | transform: translateX(-10px) scale(0); 490 | position: absolute; 491 | top: 11px; 492 | left: 15px; 493 | transition: transform 0.2s, opacity 0.6s ease-in; 494 | } 495 | .service-card .btn:hover { 496 | background-color: #272727; 497 | padding: 15px 0 15px 45px; 498 | } 499 | .service-card .btn:hover:before { 500 | opacity: 1; 501 | transform: translateX(0) scale(1); 502 | } 503 | } 504 | .blog { 505 | padding-top: 6.875em; 506 | padding-bottom: 6.875em; 507 | } 508 | .blog article { 509 | margin: 0 auto; 510 | } 511 | .blog h2 { 512 | color: #272727; 513 | font-size: 2.5rem; 514 | margin-bottom: 3.75rem; 515 | } 516 | .blog .post { 517 | padding-left: 0.5em; 518 | padding-right: 0.5em; 519 | margin-bottom: 1rem; 520 | } 521 | .blog img { 522 | width: 100%; 523 | margin: 0 auto 20px; 524 | } 525 | .blog .post h2 { 526 | font-size: 1.375rem; 527 | margin-bottom: 0.75rem; 528 | } 529 | .blog h2 a { 530 | color: #272727; 531 | } 532 | .blog .time { 533 | font-size: 1rem; 534 | font-weight: 400; 535 | color: #a5a5a5; 536 | margin-bottom: 1.75rem; 537 | } 538 | .blog { 539 | padding-left: 0.5rem; 540 | } 541 | .blog:before { 542 | content: ""; 543 | border-left: 1px solid #bdbdbd; 544 | padding-right: 0.5rem; 545 | } 546 | .blog p { 547 | font-size: 0.9rem; 548 | color: #434445; 549 | line-height: 1.5; 550 | } 551 | .blog .btn { 552 | color: #fff; 553 | background-color: var(--main-color); 554 | } 555 | .blog .btn:hover { 556 | background-color: #4d4d4d; 557 | } 558 | .img-hover { 559 | width: 100%; 560 | display: inline-block; 561 | overflow: hidden; 562 | } 563 | .img-hover img { 564 | display: inline-block; 565 | transform: scale(1); 566 | transition: transform 0.5s; 567 | } 568 | .img-hover:hover img { 569 | transform: scale(1.1); 570 | } 571 | .main-footer { 572 | font-size: 0.9rem; 573 | line-height: 1.5; 574 | padding-top: 3em; 575 | padding-bottom: 3em; 576 | color: #fdfdfd; 577 | background-color: #f98cac; 578 | } 579 | .main-footer h3 { 580 | color: #fff; 581 | font-size: 1.2rem; 582 | padding-bottom: 0.5rem; 583 | border-bottom: 1px solid #fff; 584 | margin-bottom: 1.375rem; 585 | } 586 | .main-footer p { 587 | line-height: 1.5; 588 | margin-bottom: 1rem; 589 | } 590 | .main-footer .contact { 591 | flex-wrap: nowrap; 592 | margin-bottom: 0.5rem; 593 | } 594 | .main-footer .contact a { 595 | color: #fff; 596 | } 597 | .main-footer .contact .contact-icon { 598 | align-self: flex-start; 599 | } 600 | .main-footer .contact .contact-icon i { 601 | color: #fff; 602 | width: 35px; 603 | padding: 0; 604 | background-color: transparent; 605 | margin: 0; 606 | } 607 | .footer-logo { 608 | margin-bottom: 1.85rem; 609 | } 610 | .main-footer .sns li { 611 | display: inline; 612 | margin: 0 5px; 613 | } 614 | .main-footer .sns a { 615 | display: inline-block; 616 | color: #fee3ec; 617 | padding: 10px 12px; 618 | } 619 | .main-footer .icon-fb a { 620 | padding: 10px 14px; 621 | } 622 | .main-footer .icon-instagram a { 623 | padding: 10px 9px; 624 | } 625 | .main-footer .sns a:hover { 626 | color: #fff; 627 | } 628 | .main-footer .copyright, 629 | .main-footer .copyright a { 630 | color: #afd7eb; 631 | padding-top: 100px; 632 | } 633 | .form-group { 634 | display: flex; 635 | } 636 | .form-control { 637 | display: block; 638 | height: calc(1.5em + 0.75rem + 2px); 639 | padding: 0.25rem 0.75rem; 640 | font-size: 1rem; 641 | font-weight: 400; 642 | line-height: 1.5; 643 | color: #495057; 644 | background-color: #fff; 645 | background-clip: padding-box; 646 | border: 1px solid #ced4da; 647 | } 648 | .form-group .btn { 649 | color: #fff; 650 | padding: 0.75rem; 651 | background-color: #000; 652 | border-radius: 0.25rem; 653 | border: transparent; 654 | letter-spacing: normal; 655 | } 656 | .form-group .btn:hover { 657 | cursor: pointer; 658 | background-color: #333; 659 | border: transparent; 660 | } 661 | .submit-btn { 662 | padding: 15px 30px; 663 | text-align: center; 664 | text-transform: uppercase; 665 | transition: 0.5s; 666 | background-size: 200% auto; 667 | color: #fff; 668 | display: block; 669 | border: 0; 670 | font-weight: 700; 671 | box-shadow: 0 0 14px -7px #ee6cff; 672 | background-color: #ff709b; 673 | cursor: pointer; 674 | user-select: none; 675 | -webkit-user-select: none; 676 | touch-action: manipulation; 677 | } 678 | .submit-btn:hover { 679 | background-position: right center; 680 | color: #fff; 681 | text-decoration: none; 682 | } 683 | .submit-btn:active { 684 | transform: scale(0.95); 685 | } 686 | .goTop { 687 | font-family: "Font Awesome 5 Free"; 688 | font-weight: 600; 689 | font-size: 0.75rem; 690 | padding: 18px 20px; 691 | border-radius: 50%; 692 | color: #fff; 693 | background-color: #f8d0e0; 694 | -webkit-box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.1); 695 | box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.1); 696 | position: fixed; 697 | right: 1.875rem; 698 | bottom: 1.5rem; 699 | cursor: pointer; 700 | -webkit-transform: translateY(150px); 701 | transform: translateY(150px); 702 | -webkit-transition: 0.6s; 703 | transition: 0.6s; 704 | } 705 | .goTop:after { 706 | content: "\f077"; 707 | } 708 | .goTop:hover { 709 | background-color: #fee3ec; 710 | color: #fff; 711 | } 712 | .goTop:focus { 713 | outline: none; 714 | } 715 | .goTop.active { 716 | -webkit-transform: translateY(0); 717 | transform: translateY(0); 718 | -webkit-transition: 0.6s; 719 | transition: 0.6s; 720 | } 721 | -------------------------------------------------------------------------------- /style2.css: -------------------------------------------------------------------------------- 1 | .services-container { 2 | background-size: cover; 3 | padding: 60px 0; 4 | } 5 | .inner-container { 6 | width: 100%; 7 | max-width: 1200px; 8 | margin: auto; 9 | padding: 0 20px; 10 | overflow: hidden; 11 | } 12 | .section-title { 13 | text-align: center; 14 | color: #000; 15 | text-transform: uppercase; 16 | font-size: 30px; 17 | } 18 | .border { 19 | width: 160px; 20 | height: 2px; 21 | background: #cb2d3e; 22 | margin: 40px auto; 23 | } 24 | .service-container { 25 | display: flex; 26 | flex-wrap: wrap; 27 | justify-content: center; 28 | } 29 | .service-box { 30 | max-width: 33.33%; 31 | padding: 10px; 32 | text-align: center; 33 | color: #161616; 34 | cursor: pointer; 35 | } 36 | .service-icon { 37 | display: inline-block; 38 | width: 70px; 39 | height: 70px; 40 | border: 3px solid #ff8dc7; 41 | margin-bottom: 30px; 42 | margin-top: 16px; 43 | border-radius: 50%; 44 | } 45 | .service-icon i { 46 | line-height: 70px; 47 | transform: rotate(-45deg); 48 | font-size: 26px; 49 | } 50 | .service-box:hover .service-icon { 51 | background: #f8d0e0; 52 | color: #242424; 53 | } 54 | .service-title { 55 | font-size: 18px; 56 | text-transform: uppercase; 57 | margin-bottom: 10px; 58 | .descriptionfont-size: 14px; 59 | } 60 | @media screen and (max-width: 960px) { 61 | .service-box { 62 | max-width: 45%; 63 | } 64 | } 65 | @media screen and (max-width: 768px) { 66 | .service-box { 67 | max-width: 50%; 68 | } 69 | } 70 | @media screen and (max-width: 480px) { 71 | .service-box { 72 | max-width: 100%; 73 | } 74 | } 75 | .list-members { 76 | background: #f8d0e0; 77 | width: 80%; 78 | margin: 4% auto; 79 | display: flex; 80 | flex-wrap: wrap; 81 | } 82 | .member { 83 | flex-basis: 50%; 84 | display: flex; 85 | align-items: center; 86 | justify-content: space-between; 87 | } 88 | .member-image { 89 | width: 50%; 90 | height: 100%; 91 | cursor: pointer; 92 | overflow: hidden; 93 | position: relative; 94 | } 95 | .member-image img { 96 | width: 100%; 97 | height: 100%; 98 | transition: 1s; 99 | } 100 | .member-image:hover img { 101 | transform: scale(1.1); 102 | } 103 | .member-info { 104 | width: 50%; 105 | text-align: center; 106 | } 107 | .member-info p { 108 | margin: 20px 0; 109 | } 110 | .social-link .fab { 111 | width: 35px; 112 | height: 35px; 113 | line-height: 35px; 114 | margin: 0 7px; 115 | cursor: pointer; 116 | transition: transform 0.5s; 117 | color: #ff8dc7; 118 | } 119 | .social-link .fab:hover { 120 | background: #ffddd2; 121 | color: #ff5da2; 122 | transform: translateY(-7px); 123 | border-radius: 50%; 124 | } 125 | @media screen and (min-width: 771px) { 126 | .member:nth-child(4n + 3) .member-info, 127 | .member:nth-child(4n + 4) .member-info { 128 | order: 1; 129 | } 130 | .member:nth-child(4n + 3) .member-image, 131 | .member:nth-child(4n + 4) .member-image { 132 | order: 2; 133 | } 134 | .member:nth-child(4n + 3) .member-image::after, 135 | .member:nth-child(4n + 4) .member-image::after { 136 | left: 0; 137 | right: auto; 138 | transform: translateY(-50%) rotateZ(180deg); 139 | } 140 | } 141 | @media screen and (max-width: 770px) { 142 | .list-members { 143 | width: 95%; 144 | } 145 | .member { 146 | flex-basis: 100%; 147 | font-size: 14px; 148 | } 149 | .social-link .fab { 150 | width: 30px; 151 | height: 30px; 152 | line-height: 30px; 153 | } 154 | .member:nth-child(even) .member-info { 155 | order: 1; 156 | } 157 | .member:nth-child(even) .member-image { 158 | order: 2; 159 | } 160 | .member:nth-child(even) .member-image::after { 161 | left: 0; 162 | right: auto; 163 | transform: translateY(-50%) rotateZ(180deg); 164 | } 165 | } 166 | -------------------------------------------------------------------------------- /view.md: -------------------------------------------------------------------------------- 1 | # Beauty Salon Responsive Website 2 | ### This is an HTML code for a website. It includes various sections such as header, sections for different services, member profiles, blog posts, and a footer. The website appears to be for a beauty salon or spa . 3 | 4 | ![camelia-baeuty-salon](https://github.com/dev-alihasan/beauty-salon/assets/101947194/41d25a80-d147-4683-8eac-3fc761b52850) 5 | --------------------------------------------------------------------------------