Skip to content

Commit 10b8a6b

Browse files
vycodervycoder
committed
section 5, navigation completed
1 parent d87df08 commit 10b8a6b

File tree

6 files changed

+624
-300
lines changed

6 files changed

+624
-300
lines changed

‎Natours/starter/css/style.css

+149
Original file line numberDiff line numberDiff line change
@@ -515,6 +515,155 @@ body {
515515
transform: translate(-50%, -50%);
516516
text-align: center; }
517517

518+
.footer {
519+
background-color: #333;
520+
color: #f7f7f7;
521+
padding: 10rem 0;
522+
font-size: 1.4rem; }
523+
.footer__logo-box {
524+
text-align: center;
525+
margin-bottom: 8rem; }
526+
.footer__logo {
527+
width: 15rem;
528+
height: auto; }
529+
.footer__list {
530+
list-style: none; }
531+
.footer__item {
532+
display: inline-block; }
533+
.footer__item:not(:last-child) {
534+
margin-right: 1.5rem; }
535+
.footer__link:link, .footer__link:visited {
536+
background-color: #333;
537+
color: #f7f7f7;
538+
text-decoration: none;
539+
text-transform: uppercase;
540+
display: inline-block;
541+
transition: all .2s; }
542+
.footer__link:hover, .footer__link:active {
543+
color: #55c57a;
544+
box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.4);
545+
transform: rotate(5deg) scale(1.3); }
546+
.footer__navigation {
547+
border-top: 1px solid #777;
548+
padding-top: 2rem;
549+
display: inline-block; }
550+
.footer__copyright {
551+
border-top: 1px solid #777;
552+
padding-top: 2rem;
553+
width: 80%;
554+
float: right; }
555+
556+
.navigation__checkbox {
557+
display: none; }
558+
559+
.navigation__button {
560+
background-color: #FFF;
561+
height: 7rem;
562+
width: 7rem;
563+
position: fixed;
564+
top: 6rem;
565+
right: 6rem;
566+
border-radius: 50%;
567+
z-index: 2000;
568+
box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.1);
569+
text-align: center;
570+
cursor: pointer; }
571+
572+
.navigation__background {
573+
height: 6rem;
574+
width: 6rem;
575+
border-radius: 50%;
576+
position: fixed;
577+
top: 6.5rem;
578+
right: 6.5rem;
579+
background-image: radial-gradient(#7ed56f, #28b485);
580+
z-index: 1000;
581+
transition: transform 0.8s cubic-bezier(0.86, 0, 0.07, 1); }
582+
583+
.navigation__nav {
584+
height: 100vh;
585+
position: fixed;
586+
top: 0;
587+
left: 0;
588+
z-index: 1500;
589+
opacity: 0;
590+
width: 0;
591+
transition: all 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55); }
592+
593+
.navigation__list {
594+
position: absolute;
595+
top: 50%;
596+
left: 50%;
597+
transform: translate(-50%, -50%);
598+
list-style: none;
599+
text-align: center;
600+
width: 100%; }
601+
602+
.navigation__item {
603+
margin: 1rem; }
604+
605+
.navigation__link:link, .navigation__link:visited {
606+
display: inline-block;
607+
font-size: 3rem;
608+
font-weight: 300;
609+
color: #FFF;
610+
text-decoration: none;
611+
text-transform: uppercase;
612+
padding: 1rem 2rem;
613+
background-image: linear-gradient(120deg, transparent 0%, transparent 50%, #FFF 50%);
614+
background-size: 220%;
615+
transition: all .4s; }
616+
.navigation__link:link span, .navigation__link:visited span {
617+
margin-right: 1.5rem;
618+
display: inline-block; }
619+
620+
.navigation__link:hover, .navigation__link:active {
621+
background-position: 100%;
622+
color: #55c57a;
623+
transform: translateX(1rem); }
624+
625+
.navigation__checkbox:checked ~ .navigation__background {
626+
transform: scale(80); }
627+
628+
.navigation__checkbox:checked ~ .navigation__nav {
629+
opacity: 1;
630+
width: 100%; }
631+
632+
.navigation__icon {
633+
position: relative;
634+
margin-top: 3.5rem; }
635+
.navigation__icon, .navigation__icon::before, .navigation__icon::after {
636+
width: 3rem;
637+
height: 2px;
638+
background-color: #333;
639+
display: inline-block; }
640+
.navigation__icon::before, .navigation__icon::after {
641+
content: "";
642+
position: absolute;
643+
left: 0;
644+
transition: all .2s; }
645+
.navigation__icon::before {
646+
top: -.8rem; }
647+
.navigation__icon::after {
648+
top: .8rem; }
649+
650+
.navigation__button:hover .navigation__icon::before {
651+
top: -1rem; }
652+
653+
.navigation__button:hover .navigation__icon::after {
654+
top: 1rem; }
655+
656+
.navigation__checkbox:checked + .navigation__button .navigation__icon {
657+
background-color: transparent; }
658+
659+
.navigation__checkbox:checked + .navigation__button .navigation__icon::before {
660+
top: 0;
661+
transform: rotate(135deg); }
662+
663+
.navigation__checkbox:checked + .navigation__button .navigation__icon::after {
664+
top: 0;
665+
transform: rotate(-135deg); }
666+
518667
.section-about {
519668
background-color: #f7f7f7;
520669
padding: 25rem 0;

0 commit comments

Comments
 (0)