ShaifArfan / one-page-website-html-css-project Public
Code Issues 1 Pull requests 20 Actions Projects Security
master
one-page-website-html-css-project / style.css
ShaifArfan contact responsive issue
1 contributor
703 lines (685 sloc) 12.9 KB
1 @import 'https://fonts.googleapis.com/css?family=Montserrat:300, 400, 700&display=sw
2 * {
3 padding: 0;
4 margin: 0;
5 box-sizing: border-box;
6 }
7 html {
8 font-size: 10px;
9 font-family: 'Montserrat', sans-serif;
10 scroll-behavior: smooth;
11 }
12 a {
13 text-decoration: none;
14 }
15 .container {
16 min-height: 100vh;
17 width: 100%;
18 display: flex;
19 align-items: center;
20 justify-content: center;
21 }
22 img {
23 height: 100%;
24 width: 100%;
25 object-fit: cover;
26 }
:
27 p {
28 color: black;
29 font-size: 1.4rem;
30 margin-top: 5px;
31 line-height: 2.5rem;
32 font-weight: 300;
33 letter-spacing: 0.05rem;
34 }
35 .section-title {
36 font-size: 4rem;
37 font-weight: 300;
38 color: black;
39 margin-bottom: 10px;
40 text-transform: uppercase;
41 letter-spacing: 0.2rem;
42 text-align: center;
43 }
44 .section-title span {
45 color: crimson;
46 }
47
48 .cta {
49 display: inline-block;
50 padding: 10px 30px;
51 color: white;
52 background-color: transparent;
53 border: 2px solid crimson;
54 font-size: 2rem;
55 text-transform: uppercase;
56 letter-spacing: 0.1rem;
57 margin-top: 30px;
58 transition: 0.3s ease;
59 transition-property: background-color, color;
60 }
61 .cta:hover {
62 color: white;
63 background-color: crimson;
64 }
65 .brand h1 {
66 font-size: 3rem;
67 text-transform: uppercase;
68 color: white;
69 }
70 .brand h1 span {
71 color: crimson;
:
72 }
73
74 /* Header section */
75 #header {
76 position: fixed;
77 z-index: 1000;
78 left: 0;
79 top: 0;
80 width: 100vw;
81 height: auto;
82 }
83 #header .header {
84 min-height: 8vh;
85 background-color: rgba(31, 30, 30, 0.24);
86 transition: 0.3s ease background-color;
87 }
88 #header .nav-bar {
89 display: flex;
90 align-items: center;
91 justify-content: space-between;
92 width: 100%;
93 height: 100%;
94 max-width: 1300px;
95 padding: 0 10px;
96 }
97 #header .nav-list ul {
98 list-style: none;
99 position: absolute;
100 background-color: rgb(31, 30, 30);
101 width: 100vw;
102 height: 100vh;
103 left: 100%;
104 top: 0;
105 display: flex;
106 flex-direction: column;
107 justify-content: center;
108 align-items: center;
109 z-index: 1;
110 overflow-x: hidden;
111 transition: 0.5s ease left;
112 }
113 #header .nav-list ul.active {
114 left: 0%;
115 }
116 #header .nav-list ul a {
:
117 font-size: 2.5rem;
118 font-weight: 500;
119 letter-spacing: 0.2rem;
120 text-decoration: none;
121 color: white;
122 text-transform: uppercase;
123 padding: 20px;
124 display: block;
125 }
126 #header .nav-list ul a::after {
127 content: attr(data-after);
128 position: absolute;
129 top: 50%;
130 left: 50%;
131 transform: translate(-50%, -50%) scale(0);
132 color: rgba(240, 248, 255, 0.021);
133 font-size: 13rem;
134 letter-spacing: 50px;
135 z-index: -1;
136 transition: 0.3s ease letter-spacing;
137 }
138 #header .nav-list ul li:hover a::after {
139 transform: translate(-50%, -50%) scale(1);
140 letter-spacing: initial;
141 }
142 #header .nav-list ul li:hover a {
143 color: crimson;
144 }
145 #header .hamburger {
146 height: 60px;
147 width: 60px;
148 display: inline-block;
149 border: 3px solid white;
150 border-radius: 50%;
151 position: relative;
152 display: flex;
153 align-items: center;
154 justify-content: center;
155 z-index: 100;
156 cursor: pointer;
157 transform: scale(0.8);
158 margin-right: 20px;
159 }
160 #header .hamburger:after {
:
161 position: absolute;
162 content: '';
163 height: 100%;
164 width: 100%;
165 border-radius: 50%;
166 border: 3px solid white;
167 animation: hamburger_puls 1s ease infinite;
168 }
169 #header .hamburger .bar {
170 height: 2px;
171 width: 30px;
172 position: relative;
173 background-color: white;
174 z-index: -1;
175 }
176 #header .hamburger .bar::after,
177 #header .hamburger .bar::before {
178 content: '';
179 position: absolute;
180 height: 100%;
181 width: 100%;
182 left: 0;
183 background-color: white;
184 transition: 0.3s ease;
185 transition-property: top, bottom;
186 }
187 #header .hamburger .bar::after {
188 top: 8px;
189 }
190 #header .hamburger .bar::before {
191 bottom: 8px;
192 }
193 #header .hamburger.active .bar::before {
194 bottom: 0;
195 }
196 #header .hamburger.active .bar::after {
197 top: 0;
198 }
199 /* End Header section */
200
201 /* Hero Section */
202 #hero {
203 background-image: url(./img/hero-bg.png);
204 background-size: cover;
205 background-position: top center;
:
206 position: relative;
207 z-index: 1;
208 }
209 #hero::after {
210 content: '';
211 position: absolute;
212 left: 0;
213 top: 0;
214 height: 100%;
215 width: 100%;
216 background-color: black;
217 opacity: 0.7;
218 z-index: -1;
219 }
220 #hero .hero {
221 max-width: 1200px;
222 margin: 0 auto;
223 padding: 0 50px;
224 justify-content: flex-start;
225 }
226 #hero h1 {
227 display: block;
228 width: fit-content;
229 font-size: 4rem;
230 position: relative;
231 color: transparent;
232 animation: text_reveal 0.5s ease forwards;
233 animation-delay: 1s;
234 }
235 #hero h1:nth-child(1) {
236 animation-delay: 1s;
237 }
238 #hero h1:nth-child(2) {
239 animation-delay: 2s;
240 }
241 #hero h1:nth-child(3) {
242 animation: text_reveal_name 0.5s ease forwards;
243 animation-delay: 3s;
244 }
245 #hero h1 span {
246 position: absolute;
247 top: 0;
248 left: 0;
249 height: 100%;
:
250 width: 0;
251 background-color: crimson;
252 animation: text_reveal_box 1s ease;
253 animation-delay: 0.5s;
254 }
255 #hero h1:nth-child(1) span {
256 animation-delay: 0.5s;
257 }
258 #hero h1:nth-child(2) span {
259 animation-delay: 1.5s;
260 }
261 #hero h1:nth-child(3) span {
262 animation-delay: 2.5s;
263 }
264
265 /* End Hero Section */
266
267 /* Services Section */
268 #services .services {
269 flex-direction: column;
270 text-align: center;
271 max-width: 1500px;
272 margin: 0 auto;
273 padding: 100px 0;
274 }
275 #services .service-top {
276 max-width: 500px;
277 margin: 0 auto;
278 }
279 #services .service-bottom {
280 display: flex;
281 align-items: center;
282 justify-content: center;
283 flex-wrap: wrap;
284 margin-top: 50px;
285 }
286 #services .service-item {
287 flex-basis: 80%;
288 display: flex;
289 align-items: flex-start;
290 justify-content: center;
291 flex-direction: column;
292 padding: 30px;
293 border-radius: 10px;
294 background-image: url(./img/img-1.png);
:
295 background-size: cover;
296 margin: 10px 5%;
297 position: relative;
298 z-index: 1;
299 overflow: hidden;
300 }
301 #services .service-item::after {
302 content: '';
303 position: absolute;
304 left: 0;
305 top: 0;
306 height: 100%;
307 width: 100%;
308 background-image: linear-gradient(60deg, #29323c 0%, #485563 100%);
309 opacity: 0.9;
310 z-index: -1;
311 }
312 #services .service-bottom .icon {
313 height: 80px;
314 width: 80px;
315 margin-bottom: 20px;
316 }
317 #services .service-item h2 {
318 font-size: 2rem;
319 color: white;
320 margin-bottom: 10px;
321 text-transform: uppercase;
322 }
323 #services .service-item p {
324 color: white;
325 text-align: left;
326 }
327 /* End Services Section */
328
329 /* Projects section */
330 #projects .projects {
331 flex-direction: column;
332 max-width: 1200px;
333 margin: 0 auto;
334 padding: 100px 0;
335 }
336 #projects .projects-header h1 {
337 margin-bottom: 50px;
338 }
:
339 #projects .all-projects {
340 display: flex;
341 align-items: center;
342 justify-content: center;
343 flex-direction: column;
344 }
345 #projects .project-item {
346 display: flex;
347 align-items: center;
348 justify-content: center;
349 flex-direction: column;
350 width: 80%;
351 margin: 20px auto;
352 overflow: hidden;
353 border-radius: 10px;
354 }
355 #projects .project-info {
356 padding: 30px;
357 flex-basis: 50%;
358 height: 100%;
359 display: flex;
360 align-items: flex-start;
361 justify-content: center;
362 flex-direction: column;
363 background-image: linear-gradient(60deg, #29323c 0%, #485563 100%);
364 color: white;
365 }
366 #projects .project-info h1 {
367 font-size: 4rem;
368 font-weight: 500;
369 }
370 #projects .project-info h2 {
371 font-size: 1.8rem;
372 font-weight: 500;
373 margin-top: 10px;
374 }
375 #projects .project-info p {
376 color: white;
377 }
378 #projects .project-img {
379 flex-basis: 50%;
380 height: 300px;
381 overflow: hidden;
382 position: relative;
:
383 }
384 #projects .project-img:after {
385 content: '';
386 position: absolute;
387 left: 0;
388 top: 0;
389 height: 100%;
390 width: 100%;
391 background-image: linear-gradient(60deg, #29323c 0%, #485563 100%);
392 opacity: 0.7;
393 }
394 #projects .project-img img {
395 transition: 0.3s ease transform;
396 }
397 #projects .project-item:hover .project-img img {
398 transform: scale(1.1);
399 }
400 /* End Projects section */
401
402 /* About Section */
403 #about .about {
404 flex-direction: column-reverse;
405 text-align: center;
406 max-width: 1200px;
407 margin: 0 auto;
408 padding: 100px 20px;
409 }
410 #about .col-left {
411 width: 250px;
412 height: 360px;
413 }
414 #about .col-right {
415 width: 100%;
416 }
417 #about .col-right h2 {
418 font-size: 1.8rem;
419 font-weight: 500;
420 letter-spacing: 0.2rem;
421 margin-bottom: 10px;
422 }
423 #about .col-right p {
424 margin-bottom: 20px;
425 }
426 #about .col-right .cta {
427 color: black;
:
428 margin-bottom: 50px;
429 padding: 10px 20px;
430 font-size: 2rem;
431 }
432 #about .col-left .about-img {
433 height: 100%;
434 width: 100%;
435 position: relative;
436 border: 10px solid white;
437 }
438 #about .col-left .about-img::after {
439 content: '';
440 position: absolute;
441 left: -33px;
442 top: 19px;
443 height: 98%;
444 width: 98%;
445 border: 7px solid crimson;
446 z-index: -1;
447 }
448 /* End About Section */
449
450 /* contact Section */
451 #contact .contact {
452 flex-direction: column;
453 max-width: 1200px;
454 margin: 0 auto;
455 width: 90%;
456 }
457 #contact .contact-items {
458 /* max-width: 400px; */
459 width: 100%;
460 }
461 #contact .contact-item {
462 width: 80%;
463 padding: 20px;
464 text-align: center;
465 border-radius: 10px;
466 padding: 30px;
467 margin: 30px;
468 display: flex;
469 justify-content: center;
470 align-items: center;
471 flex-direction: column;
:
472 box-shadow: 0px 0px 18px 0 #0000002c;
473 transition: 0.3s ease box-shadow;
474 }
475 #contact .contact-item:hover {
476 box-shadow: 0px 0px 5px 0 #0000002c;
477 }
478 #contact .icon {
479 width: 70px;
480 margin: 0 auto;
481 margin-bottom: 10px;
482 }
483 #contact .contact-info h1 {
484 font-size: 2.5rem;
485 font-weight: 500;
486 margin-bottom: 5px;
487 }
488 #contact .contact-info h2 {
489 font-size: 1.3rem;
490 line-height: 2rem;
491 font-weight: 500;
492 }
493 /*End contact Section */
494
495 /* Footer */
496 #footer {
497 background-image: linear-gradient(60deg, #29323c 0%, #485563 100%);
498 }
499 #footer .footer {
500 min-height: 200px;
501 flex-direction: column;
502 padding-top: 50px;
503 padding-bottom: 10px;
504 }
505 #footer h2 {
506 color: white;
507 font-weight: 500;
508 font-size: 1.8rem;
509 letter-spacing: 0.1rem;
510 margin-top: 10px;
511 margin-bottom: 10px;
512 }
513 #footer .social-icon {
514 display: flex;
515 margin-bottom: 30px;
516 }
:
517 #footer .social-item {
518 height: 50px;
519 width: 50px;
520 margin: 0 5px;
521 }
522 #footer .social-item img {
523 filter: grayscale(1);
524 transition: 0.3s ease filter;
525 }
526 #footer .social-item:hover img {
527 filter: grayscale(0);
528 }
529 #footer p {
530 color: white;
531 font-size: 1.3rem;
532 }
533 /* End Footer */
534
535 /* Keyframes */
536 @keyframes hamburger_puls {
537 0% {
538 opacity: 1;
539 transform: scale(1);
540 }
541 100% {
542 opacity: 0;
543 transform: scale(1.4);
544 }
545 }
546 @keyframes text_reveal_box {
547 50% {
548 width: 100%;
549 left: 0;
550 }
551 100% {
552 width: 0;
553 left: 100%;
554 }
555 }
556 @keyframes text_reveal {
557 100% {
558 color: white;
559 }
560 }
:
561 @keyframes text_reveal_name {
562 100% {
563 color: crimson;
564 font-weight: 500;
565 }
566 }
567 /* End Keyframes */
568
569 /* Media Query For Tablet */
570 @media only screen and (min-width: 768px) {
571 .cta {
572 font-size: 2.5rem;
573 padding: 20px 60px;
574 }
575 h1.section-title {
576 font-size: 6rem;
577 }
578
579 /* Hero */
580 #hero h1 {
581 font-size: 7rem;
582 }
583 /* End Hero */
584
585 /* Services Section */
586 #services .service-bottom .service-item {
587 flex-basis: 45%;
588 margin: 2.5%;
589 }
590 /* End Services Section */
591
592 /* Project */
593 #projects .project-item {
594 flex-direction: row;
595 }
596 #projects .project-item:nth-child(even) {
597 flex-direction: row-reverse;
598 }
599 #projects .project-item {
600 height: 400px;
601 margin: 0;
602 width: 100%;
603 border-radius: 0;
604 }
:
605 #projects .all-projects .project-info {
606 height: 100%;
607 }
608 #projects .all-projects .project-img {
609 height: 100%;
610 }
611 /* End Project */
612
613 /* About */
614 #about .about {
615 flex-direction: row;
616 }
617 #about .col-left {
618 width: 600px;
619 height: 400px;
620 padding-left: 60px;
621 }
622 #about .about .col-left .about-img::after {
623 left: -45px;
624 top: 34px;
625 height: 98%;
626 width: 98%;
627 border: 10px solid crimson;
628 }
629 #about .col-right {
630 text-align: left;
631 padding: 30px;
632 }
633 #about .col-right h1 {
634 text-align: left;
635 }
636 /* End About */
637
638 /* contact */
639 #contact .contact {
640 flex-direction: column;
641 padding: 100px 0;
642 align-items: center;
643 justify-content: center;
644 min-width: 20vh;
645 }
646 #contact .contact-items {
647 width: 100%;
648 display: flex;
649 flex-direction: row;
:
650 justify-content: space-evenly;
651 margin: 0;
652 }
653 #contact .contact-item {
654 width: 30%;
655 margin: 0;
656 flex-direction: row;
657 }
658 #contact .contact-item .icon {
659 height: 100px;
660 width: 100px;
661 }
662 #contact .contact-item .icon img {
663 object-fit: contain;
664 }
665 #contact .contact-item .contact-info {
666 width: 100%;
667 text-align: left;
668 padding-left: 20px;
669 }
670 /* End contact */
671 }
672 /* End Media Query For Tablet */
673
674 /* Media Query For Desktop */
675 @media only screen and (min-width: 1200px) {
676 /* header */
677 #header .hamburger {
678 display: none;
679 }
680 #header .nav-list ul {
681 position: initial;
682 display: block;
683 height: auto;
684 width: fit-content;
685 background-color: transparent;
686 }
687 #header .nav-list ul li {
688 display: inline-block;
689 }
690 #header .nav-list ul li a {
691 font-size: 1.8rem;
692 }
693 #header .nav-list ul a:after {
:
694 display: none;
695 }
696 /* End header */
697
698 #services .service-bottom .service-item {
699 flex-basis: 22%;
700 margin: 1.5%;
701 }
702 }
703 /* End Media Query For Desktop */
:
