From f5b3d27855c4326e60c54e46dac7f4c4a0a80bc5 Mon Sep 17 00:00:00 2001 From: DanielArturoAlejoAlvarez Date: Thu, 16 Nov 2023 10:13:51 -0500 Subject: [PATCH] Format code app --- assets/css/slider.css | 126 +++-- assets/css/styles.css | 1031 +++++++++++++++++++++-------------------- assets/js/app.js | 126 +++-- assets/js/funcs.js | 47 +- assets/js/slider.js | 2 +- index.html | 569 +++++++++++++---------- 6 files changed, 1003 insertions(+), 898 deletions(-) diff --git a/assets/css/slider.css b/assets/css/slider.css index 33078c5..9a1341e 100644 --- a/assets/css/slider.css +++ b/assets/css/slider.css @@ -1,67 +1,65 @@ /* SLIDESHOW */ * { - margin: 0; - padding: 0; - box-sizing: border-box; - } - - .slider-container { - position: absolute; - width: 100%; - max-width: 100%; - top: 0; - overflow: hidden; - } - - .slider { - width: 100%; - height: 100vh; - display: flex; - margin-left: -100%; - } - - .slider__section { - width: 100%; - } - - .slider__image { - display: block; - width: 100vw; - height: 100%; - object-fit: cover; - } - - .slider__btn { - position: absolute; - width: 70px; - height: 70px; - background: var(--tomato); - color: #FFF; - top: 50%; - transform: translateY(-50%); - font-size: 30px; - font-weight: bold; - font-family: monospace; - border-radius: 50%; - cursor: pointer; - z-index: 99; - display: flex; - justify-content: center; - align-items: center; - } - - .slider__btn:hover { - background: var(--black); - color: var(--white); - } - - .slider__btn--right { - right: 10px; - } - - .slider__btn--left { - left: 10px; - } - - \ No newline at end of file + margin: 0; + padding: 0; + box-sizing: border-box; +} + +.slider-container { + position: absolute; + width: 100%; + max-width: 100%; + top: 0; + overflow: hidden; +} + +.slider { + width: 100%; + height: 100vh; + display: flex; + margin-left: -100%; +} + +.slider__section { + width: 100%; +} + +.slider__image { + display: block; + width: 100vw; + height: 100%; + object-fit: cover; +} + +.slider__btn { + position: absolute; + width: 70px; + height: 70px; + background: var(--tomato); + color: #fff; + top: 50%; + transform: translateY(-50%); + font-size: 30px; + font-weight: bold; + font-family: monospace; + border-radius: 50%; + cursor: pointer; + z-index: 99; + display: flex; + justify-content: center; + align-items: center; +} + +.slider__btn:hover { + background: var(--black); + color: var(--white); +} + +.slider__btn--right { + right: 10px; +} + +.slider__btn--left { + left: 10px; +} diff --git a/assets/css/styles.css b/assets/css/styles.css index 0acd198..512b571 100644 --- a/assets/css/styles.css +++ b/assets/css/styles.css @@ -1,167 +1,169 @@ @import url(https://fonts.googleapis.com/css?family=Poppins:100,200,300,400,500,600,700,800,900); :root { - --yellow: #F2A922; - --yellowdark: #F2921D; - --gold: #F8D902; - --red: #F9032F; - --black: #000; - --white: #FFF; - --tomato: #D92211; - --butano: rgb(275,85,25); - --green: rgb(83, 236, 7); - --transition: all 500ms cubic-bezier(0.25, 0.35, 0, 1.74); + --yellow: #f2a922; + --yellowdark: #f2921d; + --gold: #f8d902; + --red: #f9032f; + --black: #000; + --white: #fff; + --tomato: #d92211; + --butano: rgb(275, 85, 25); + --green: rgb(83, 236, 7); + --transition: all 500ms cubic-bezier(0.25, 0.35, 0, 1.74); } * { - box-sizing: border-box; - padding: 0; - margin: 0; - font-family: futura-pt-condensed,'Poppins', sans-serif; + box-sizing: border-box; + padding: 0; + margin: 0; + font-family: futura-pt-condensed, "Poppins", sans-serif; } -h1,h2,h3,h4,h5,h6 { - font-family: futura-pt, sans-serif; +h1, +h2, +h3, +h4, +h5, +h6 { + font-family: futura-pt, sans-serif; } /* Navbar */ .navbar { - z-index: 9999; - position: fixed; - background-color: var(--black); - width: 100vw; - height: 70px; - padding: 0.5rem calc((100vw - 1200px)/2); - display: flex; - justify-content: space-between; - align-items: center; - text-transform: uppercase; - font-weight: 500; - box-shadow: 0px 4px 20px 0 rgba(0,0,0,.9); + z-index: 9999; + position: fixed; + background-color: var(--black); + width: 100vw; + height: 70px; + padding: 0.5rem calc((100vw - 1200px) / 2); + display: flex; + justify-content: space-between; + align-items: center; + text-transform: uppercase; + font-weight: 500; + box-shadow: 0px 4px 20px 0 rgba(0, 0, 0, 0.9); } .navbar__logo { - color: var(--gold); - padding-left: 1rem; - text-decoration: none; - font-size: 2.5rem; - font-weight: 900; - letter-spacing: -5px; - text-transform: none; - font-family: futura-pt, sans-serif; + color: var(--gold); + padding-left: 1rem; + text-decoration: none; + font-size: 2.5rem; + font-weight: 900; + letter-spacing: -5px; + text-transform: none; + font-family: futura-pt, sans-serif; } .navbar__logo:hover { - color: var(--white); + color: var(--white); } .navbar__link { - color: var(--white); - padding: 0 1rem; - text-decoration: none; - font-size: 1.2rem; - font-family: futura-pt, sans-serif; - transition: var(--transition); + color: var(--white); + padding: 0 1rem; + text-decoration: none; + font-size: 1.2rem; + font-family: futura-pt, sans-serif; + transition: var(--transition); } .navbar__link:hover { - background-color: var(--gold); - color: var(--black); - padding: 1.2rem; - font-weight: 600; + background-color: var(--gold); + color: var(--black); + padding: 1.2rem; + font-weight: 600; } +@media screen and (max-width: 768px) { + body.active { + overflow-y: hidden; + overflow-x: hidden; + } + .navbar__link { + display: flex; + justify-content: center; + align-items: center; + font-weight: 700; + } + + .navbar__toggle { + margin-top: 10px; + } + + .navbar__toggle .bar { + width: 25px; + height: 3px; + background-color: var(--white); + display: block; + margin: 5px auto; + transition: var(--transition); + cursor: pointer; + } -@media screen and (max-width: 768px) { - body.active { - overflow-y: hidden; - overflow-x: hidden; - } - - .navbar__link { - display: flex; - justify-content: center; - align-items: center; - font-weight: 700; - } - - .navbar__toggle { - margin-top: 10px; - } - - .navbar__toggle .bar { - width: 25px; - height: 3px; - background-color: var(--white); - display: block; - margin: 5px auto; - transition: var(--transition); - cursor: pointer; - } - - .navbar__menu { - display: grid; - grid-template-columns: 1fr; - grid-template-rows: repeat(4, 100px); - margin: 63px 0; - width: 100%; - position: absolute; - top: -1000px; - opacity: 1; - transition: all 500ms cubic-bezier(0.25, 0.35, 0, 1.74); - z-index: -1; - } - - .navbar__menu.active { - background: rgba(0,0,0,.9); - top: 10%; - opacity: 1; - transition: all 0.5s ease; - z-index: 99; - height: 100vh; - font-size: 1.6rem; - } - - #mobile-menu { - position: absolute; - top: 1.5%; - right: 5%; - transform: translate(5%, 20%); - } - - #mobile-menu.is-active .bar:nth-child(2) { - opacity: 0; - } - - #mobile-menu.is-active .bar:nth-child(1) { - transform: translateY(8px) rotate(45deg); - } - #mobile-menu.is-active .bar:nth-child(3) { - transform: translateY(-8px) rotate(-45deg); - } + .navbar__menu { + display: grid; + grid-template-columns: 1fr; + grid-template-rows: repeat(4, 100px); + margin: 63px 0; + width: 100%; + position: absolute; + top: -1000px; + opacity: 1; + transition: all 500ms cubic-bezier(0.25, 0.35, 0, 1.74); + z-index: -1; + } + + .navbar__menu.active { + background: rgba(0, 0, 0, 0.9); + top: 10%; + opacity: 1; + transition: all 0.5s ease; + z-index: 99; + height: 100vh; + font-size: 1.6rem; + } + + #mobile-menu { + position: absolute; + top: 1.5%; + right: 5%; + transform: translate(5%, 20%); + } + + #mobile-menu.is-active .bar:nth-child(2) { + opacity: 0; + } + + #mobile-menu.is-active .bar:nth-child(1) { + transform: translateY(8px) rotate(45deg); + } + #mobile-menu.is-active .bar:nth-child(3) { + transform: translateY(-8px) rotate(-45deg); + } } .mask { - background-color: rgba(0,0,0,.7); - width: 100%; - height: 100%; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - z-index: 1; + background-color: rgba(0, 0, 0, 0.7); + width: 100%; + height: 100%; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + z-index: 1; } /* Section Hero */ .hero { - height: 100vh; - position: relative; - - - /*background: linear-gradient( + height: 100vh; + position: relative; + + /*background: linear-gradient( to right, rgba(0,0,0,0.4), rgba(0,0,0,0.1)) @@ -169,604 +171,623 @@ h1,h2,h3,h4,h5,h6 { background-size: cover; background-position: center; height: 100vh;*/ - padding: .5rem calc(100vw - 1200px)/2; - display: flex; - justify-content: center; - align-items: center; + padding: 0.5rem calc(100vw - 1200px) / 2; + display: flex; + justify-content: center; + align-items: center; } .hero__content { - position: absolute; - color: var(--white); - padding: 3rem 5rem; - line-height: 1; - text-align: center; - z-index: 2; + position: absolute; + color: var(--white); + padding: 3rem 5rem; + line-height: 1; + text-align: center; + z-index: 2; } .hero__content h1 { - font-size: clamp(4rem,8vw,7rem); - letter-spacing: -8px; + font-size: clamp(4rem, 8vw, 7rem); + letter-spacing: -8px; } .hero__content h2 { - color: #DDD; - font-size: clamp(2rem,5vw,3rem); - text-transform: uppercase; - font-weight: 600; - margin-bottom: 4rem; + color: #ddd; + font-size: clamp(2rem, 5vw, 3rem); + text-transform: uppercase; + font-weight: 600; + margin-bottom: 4rem; } .hero__content .button { - text-decoration: none; - text-transform: uppercase; - background-color: var(--gold); - color: var(--black); - padding: 1.2rem; - font-size: clamp(2rem,4vw,3rem); - font-weight: bold; - border-radius: 4px; - box-shadow: 0px 4px 16px rgba(0,0,0,0.4) inset; - /*transition: var(--transition);*/ - + text-decoration: none; + text-transform: uppercase; + background-color: var(--gold); + color: var(--black); + padding: 1.2rem; + font-size: clamp(2rem, 4vw, 3rem); + font-weight: bold; + border-radius: 4px; + box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.4) inset; + /*transition: var(--transition);*/ } .hero__content .button:hover { - background-color: var(--black); - color: var(--gold); - transition: var(--transition); + background-color: var(--black); + color: var(--gold); + transition: var(--transition); } .hero__content .button i.fas { - margin-left: .8rem; + margin-left: 0.8rem; } @media screen and (max-width: 640px) { - .hero { - background-position: right 0; - } + .hero { + background-position: right 0; + } } @media screen and (max-width: 820px) { - .hero { - background-position: right 0; - } + .hero { + background-position: right 0; + } } @media screen and (max-width: 1024px) { - .hero { - background-position: right 0; - } + .hero { + background-position: right 0; + } } /* Section Services */ .services { - padding: 8rem calc((100vw - 1200px)/2); + padding: 8rem calc((100vw - 1200px) / 2); } .services__container { - display: grid; - grid-template-columns: 1fr 1fr; - padding: 1rem; + display: grid; + grid-template-columns: 1fr 1fr; + padding: 1rem; } .services__img { - width: 100%; - height: 100%; - box-shadow: 0px 4px 20px 0 rgba(0,0,0,0.8); + width: 100%; + height: 100%; + box-shadow: 0px 4px 20px 0 rgba(0, 0, 0, 0.8); } - - .topline { - color: var(--tomato); - font-size: 1.2rem; - font-weight: bold; - text-transform: uppercase; - margin-bottom: .5rem; + color: var(--tomato); + font-size: 1.2rem; + font-weight: bold; + text-transform: uppercase; + margin-bottom: 0.5rem; } .services__headding { - font-size: clamp(2rem,6vw,3rem); - margin-bottom: 1rem; + font-size: clamp(2rem, 6vw, 3rem); + margin-bottom: 1rem; } .services__features { - list-style: none; + list-style: none; } .services__feature { - margin-bottom: 1.5rem; - font-size: clamp(1rem,5vw,1.2rem); + margin-bottom: 1.5rem; + font-size: clamp(1rem, 5vw, 1.2rem); } .fa-check-circle { - color: var(--tomato); - margin-right: .5rem; + color: var(--tomato); + margin-right: 0.5rem; } @media screen and (max-width: 768px) { - .services__container { - grid-template-columns: 1fr; - } - + .services__container { + grid-template-columns: 1fr; + } } /* Membership Section */ .membership { - background-color: var(--black); - color: var(--white); - padding: 6rem calc(100vw - 1200px); - text-align: center; + background-color: var(--black); + color: var(--white); + padding: 6rem calc(100vw - 1200px); + text-align: center; } .membership h1 { - font-size: clamp(2rem,5vw,3rem); - margin-bottom: 1rem; - padding: 0 1rem; - + font-size: clamp(2rem, 5vw, 3rem); + margin-bottom: 1rem; + padding: 0 1rem; } .membership__desc { - margin-bottom: 3rem; - padding: 1rem; - font-size: clamp(1rem,3vw,1.5rem); + margin-bottom: 3rem; + padding: 1rem; + font-size: clamp(1rem, 3vw, 1.5rem); } .membership__wrapper { - display: flex; - justify-content: space-between; - align-items: flex-start; - padding: 1rem; + display: flex; + justify-content: space-between; + align-items: flex-start; + padding: 1rem; } .membership__card { - padding: 2rem; - min-height: 450px; - width: 325px; - background: var(--white); - color: var(--black); - border-radius: 10px; - display: flex; - flex-direction: column; - justify-content: space-between; + padding: 2rem; + min-height: 450px; + width: 325px; + background: var(--white); + color: var(--black); + border-radius: 10px; + display: flex; + flex-direction: column; + justify-content: space-between; } .membership__parks { - min-height: 150px; + min-height: 150px; } .membership__card p { - margin-bottom: 1.2rem; + margin-bottom: 1.2rem; } .card-icon { - font-size: 4rem; - margin-bottom: 2rem; - color: var(--tomato); + font-size: 4rem; + margin-bottom: 2rem; + color: var(--tomato); } .membership__card h3 { - font-size: clamp(1rem,5vw,2rem); - margin-bottom: 2rem; + font-size: clamp(1rem, 5vw, 2rem); + margin-bottom: 2rem; } .membership__card .button { - background-color: var(--tomato); - color: var(--white); - padding: 1.2rem 2.5rem; - text-decoration: none; - font-size: 100%; - text-transform: uppercase; - font-weight: 600; - border-radius: 5px; - box-shadow: 0px 4px 20px 0 rgba(0,0,0,.9);; - border: 0; - cursor: pointer; + background-color: var(--tomato); + color: var(--white); + padding: 1.2rem 2.5rem; + text-decoration: none; + font-size: 100%; + text-transform: uppercase; + font-weight: 600; + border-radius: 5px; + box-shadow: 0px 4px 20px 0 rgba(0, 0, 0, 0.9); + border: 0; + cursor: pointer; } .membership__card .price { - color: var(--black); - font-size: 2rem; - font-weight: 600; + color: var(--black); + font-size: 2rem; + font-weight: 600; } @media screen and (max-width: 1100px) { - .membership__wrapper { - flex-direction: column; - align-items: center; - } - .membership__card { - width: 90%; - margin-bottom: 2rem; - } + .membership__wrapper { + flex-direction: column; + align-items: center; + } + .membership__card { + width: 90%; + margin-bottom: 2rem; + } } /* Work Section */ .work { - padding: 8rem calc((100vw - 1100px)/2); + padding: 8rem calc((100vw - 1100px) / 2); } .work__wrapper { - display: grid; - grid-template-columns: 1fr 1fr; - grid-template-rows: repeat(auto,350px); + display: grid; + grid-template-columns: 1fr 1fr; + grid-template-rows: repeat(auto, 350px); } .work__card { - margin: 1rem; - border-radius: 10px; - position: relative; + margin: 1rem; + border-radius: 10px; + position: relative; } .work__text { - padding: 1rem; + padding: 1rem; } .work__text h1 { - margin-bottom: 1rem; - font-size: 3rem; + margin-bottom: 1rem; + font-size: 3rem; } .work__desc { - font-size: clamp(1rem,3vw,1.3rem); - line-height: 1.4; + font-size: clamp(1rem, 3vw, 1.3rem); + line-height: 1.4; } .work__card p { - position: absolute; - bottom: 30px; - left: 25px; - color: var(--white); - font-size: 3rem; + position: absolute; + bottom: 30px; + left: 25px; + color: var(--white); + font-size: 3rem; } .work__img { - width: 100%; - height: 100%; - border-radius: 10px; - box-shadow: 0px 4px 20px 0 rgba(0,0,0,.9); + width: 100%; + height: 100%; + border-radius: 10px; + box-shadow: 0px 4px 20px 0 rgba(0, 0, 0, 0.9); } .work__text:nth-child(1) { - grid-row: 1/3; - grid-column: 2/3; + grid-row: 1/3; + grid-column: 2/3; } .work__text:nth-child(2) { - grid-row: 5/6; - grid-column: 1/2; + grid-row: 5/6; + grid-column: 1/2; } - .work__card:nth-child(3) { - grid-row: 1/3; - grid-column: 1/2; + grid-row: 1/3; + grid-column: 1/2; } .work__card:nth-child(4) { - grid-row: 2/4; - grid-column: 2/3; + grid-row: 2/4; + grid-column: 2/3; } .work__card:nth-child(5) { - grid-row: 3/5; - grid-column: 1/2; + grid-row: 3/5; + grid-column: 1/2; } .work__card:nth-child(6) { - grid-row: 4/6; - grid-column: 2/3; + grid-row: 4/6; + grid-column: 2/3; } - @media screen and (max-width: 768px) { - .work__wrapper { - grid-template-columns: 1fr; - grid-template-rows: auto; - } - - .work__text:nth-child(1) { - grid-row: 1/2; - grid-column: 1/2; - } - .work__text:nth-child(2) { - grid-row: 6/7; - grid-column: 1/2; - } - - .work__card:nth-child(3) { - grid-row: 3/4; - grid-column: 1/2; - } - .work__card:nth-child(4) { - grid-row: 4/5; - grid-column: 1/2; - } - .work__card:nth-child(5) { - grid-row: 5/6; - grid-column: 1/2; - } - .work__card:nth-child(6) { - grid-row: 2/3; - grid-column: 1/2; - } + .work__wrapper { + grid-template-columns: 1fr; + grid-template-rows: auto; + } + + .work__text:nth-child(1) { + grid-row: 1/2; + grid-column: 1/2; + } + .work__text:nth-child(2) { + grid-row: 6/7; + grid-column: 1/2; + } + + .work__card:nth-child(3) { + grid-row: 3/4; + grid-column: 1/2; + } + .work__card:nth-child(4) { + grid-row: 4/5; + grid-column: 1/2; + } + .work__card:nth-child(5) { + grid-row: 5/6; + grid-column: 1/2; + } + .work__card:nth-child(6) { + grid-row: 2/3; + grid-column: 1/2; + } } /* Email Section */ .email { - background: linear-gradient( - 180deg, - rgba(0,0,0,0.6) 0%, - rgba(0,0,0,0.6) 35%, - rgba(0,0,0,0.1) 100%) - , url(../img/bg_email.jpeg) no-repeat center; - background-size: cover; - background-attachment: fixed; - height: 450px; - background-position: right bottom; - color: var(--white); - width: 100%; - padding: 5rem calc((100vw - 1300px)/2); - display: flex; - justify-content: center; - align-items: center; - transition: var(--transition); + background: linear-gradient( + 180deg, + rgba(0, 0, 0, 0.6) 0%, + rgba(0, 0, 0, 0.6) 35%, + rgba(0, 0, 0, 0.1) 100% + ), + url(../img/bg_email.jpeg) no-repeat center; + background-size: cover; + background-attachment: fixed; + height: 450px; + background-position: right bottom; + color: var(--white); + width: 100%; + padding: 5rem calc((100vw - 1300px) / 2); + display: flex; + justify-content: center; + align-items: center; + transition: var(--transition); } .form__wrap .button { - background-color: var(--tomato); - color: var(--white); - padding: 1.2rem 2.5rem; - text-decoration: none; - font-size: 100%; - text-transform: uppercase; - font-weight: 600; - border-radius: 5px; - box-shadow: 0px 4px 20px 0 rgba(0,0,0,.9);; - border: 0; - cursor: pointer; + background-color: var(--tomato); + color: var(--white); + padding: 1.2rem 2.5rem; + text-decoration: none; + font-size: 100%; + text-transform: uppercase; + font-weight: 600; + border-radius: 5px; + box-shadow: 0px 4px 20px 0 rgba(0, 0, 0, 0.9); + border: 0; + cursor: pointer; } .email__content { - display: flex; - flex-direction: column; - align-items: center; + display: flex; + flex-direction: column; + align-items: center; } .email__content h1 { - font-size: clamp(2rem,5vw,3rem); - margin-bottom: 1rem; - padding: 0 1rem; + font-size: clamp(2rem, 5vw, 3rem); + margin-bottom: 1rem; + padding: 0 1rem; } .email__content p { - margin-bottom: 2rem; - font-size: clamp(1rem, 2.5vw, 1.2rem); - padding: 0 1rem; - text-align: center; + margin-bottom: 2rem; + font-size: clamp(1rem, 2.5vw, 1.2rem); + padding: 0 1rem; + text-align: center; } form { - /*z-index: 10;*/ + /*z-index: 10;*/ } .form__wrap input { - padding: 1rem 1.5rem; - outline: none; - width: 350px; - height: 50px; - border: none; - margin-right: 1rem; - border-radius: 4px; + padding: 1rem 1.5rem; + outline: none; + width: 350px; + height: 50px; + border: none; + margin-right: 1rem; + border-radius: 4px; } @media screen and (max-width: 768px) { + .form__wrap { + display: flex; + flex-direction: column; + padding: 0 1rem; + } - .form__wrap { - display: flex; - flex-direction: column; - padding: 0 1rem; - } - - .form__wrap input { - width: 100%; - margin-right: 0; - margin-bottom: 1rem; - } + .form__wrap input { + width: 100%; + margin-right: 0; + margin-bottom: 1rem; + } - .form__wrap .button { - min-width: 350px; - width: 100%; - } + .form__wrap .button { + min-width: 350px; + width: 100%; + } } @media screen and (max-width: 400px) { - .button { - width: 100%; - min-width: 250px; - } + .button { + width: 100%; + min-width: 250px; + } } /* Footer Section */ .footer { - display: grid; - grid-template-columns: repeat(2, 1fr); - color: var(--white); - background-color: var(--black); - padding: 5rem calc((100vw - 1100px)/2); + display: grid; + grid-template-columns: repeat(2, 1fr); + color: var(--white); + background-color: var(--black); + padding: 5rem calc((100vw - 1100px) / 2); } .footer__desc { - padding: 0 2rem; + padding: 0 2rem; } .footer__desc h1 { - color: var(--gold); - font-size: 2rem; - letter-spacing: -5px; - margin-bottom: 2rem; + color: var(--gold); + font-size: 2rem; + letter-spacing: -5px; + margin-bottom: 2rem; } .footer__desc p { - margin-bottom: 1rem; + margin-bottom: 1rem; } #phone { - font-weight: bold; - font-size: 1.2rem; + font-weight: bold; + font-size: 1.2rem; } #phone .fab { - font-size: 1.2rem; - font-weight: bold; - color: var(--gold); + font-size: 1.2rem; + font-weight: bold; + color: var(--gold); } #email { - font-weight: bold; - font-size: 1rem; + font-weight: bold; + font-size: 1rem; } #email .fas { - font-size: 1.2rem; - font-weight: bold; - color: var(--white); + font-size: 1.2rem; + font-weight: bold; + color: var(--white); } .footer__wrapper { - display: grid; - grid-template-columns: repeat(2, 1fr); + display: grid; + grid-template-columns: repeat(2, 1fr); } .footer__links { - display: flex; - flex-direction: column; - align-items: flex-start; - padding: 1rem 2rem; + display: flex; + flex-direction: column; + align-items: flex-start; + padding: 1rem 2rem; } .footer__title { - font-size: 1rem; - margin-bottom: 16px; + font-size: 1rem; + margin-bottom: 16px; } .footer__link { - text-decoration: none; - color: rgb(242,242,242); - font-size: 1rem; - margin-bottom: .5rem; - transition: var(--transition); + text-decoration: none; + color: rgb(242, 242, 242); + font-size: 1rem; + margin-bottom: 0.5rem; + transition: var(--transition); } .footer__link:hover { - color: var(--gold); + color: var(--gold); } .footer__link .fab { - font-size: 1.5rem; + font-size: 1.5rem; } @media screen and (max-width: 820px) { - .footer__wrapper { - grid-template-columns: 1fr; - } + .footer__wrapper { + grid-template-columns: 1fr; + } } @media screen and (max-width: 400px) { - .footer__desc { - padding: 1rem; - } + .footer__desc { + padding: 1rem; + } - .footer__links { - padding: 1rem; - } + .footer__links { + padding: 1rem; + } } .copyright { - background-color: var(--tomato); - color: var(--white); - padding: 1rem calc((100vw - 1200px)/2); - display: flex; - justify-content: center; - align-items: center; - font-size: clamp(1rem,3vw,3rem); - text-transform: capitalize; - font-size: 100%; + background-color: var(--tomato); + color: var(--white); + padding: 1rem calc((100vw - 1200px) / 2); + display: flex; + justify-content: center; + align-items: center; + font-size: clamp(1rem, 3vw, 3rem); + text-transform: capitalize; + font-size: 100%; } #btnTop a.super-btn-top { - text-decoration: none; - background: var(--tomato); - -webkit-border-radius: 50%; - border-radius: 50%; - position: fixed; - bottom: 50px; - right: 25px; - width: 50px; - height: 50px; - color: var(--white); - z-index: 999; - font-size: 30px; - line-height: 50px; - -webkit-animation-name: superBtnTopScroll; - animation-name: superBtnTopScroll; - -webkit-animation-duration: 4s; - animation-duration: 4s; - -webkit-animation-delay: 0s; - animation-delay: 0s; - -webkit-animation-timing-function: ease-in-out; - animation-timing-function: ease-in-out; - -webkit-animation-fill-mode: forwards; - animation-fill-mode: forwards; - animation-iteration-count: infinite; - -webkit-animation-iteration-count: 1; - -webkit-transform-origin: center bottom; - -ms-transform-origin: center bottom; - transform-origin: center bottom; } - #btnTop a.super-btn-top i { - margin-left: 12px; } - - @-webkit-keyframes superBtnTopScroll { - 0% { } - from, 20%, 53%, 80%, to { - -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); - animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); - -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); } - 40%, 43% { - -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); - animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); - -webkit-transform: translate3d(0, -30px, 0); - transform: translate3d(0, -30px, 0); } - 70% { - -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); - animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); - -webkit-transform: translate3d(0, -15px, 0); - transform: translate3d(0, -15px, 0); } - 90% { - -webkit-transform: translate3d(0, -4px, 0); - transform: translate3d(0, -4px, 0); } - 100% { } } - - @keyframes superBtnTopScroll { - 0% { } - from, 20%, 53%, 80%, to { - -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); - animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); - -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); } - 40%, 43% { - -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); - animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); - -webkit-transform: translate3d(0, -30px, 0); - transform: translate3d(0, -30px, 0); } - 70% { - -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); - animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); - -webkit-transform: translate3d(0, -15px, 0); - transform: translate3d(0, -15px, 0); } - 90% { - -webkit-transform: translate3d(0, -4px, 0); - transform: translate3d(0, -4px, 0); } - 100% { } } \ No newline at end of file + text-decoration: none; + background: var(--tomato); + -webkit-border-radius: 50%; + border-radius: 50%; + position: fixed; + bottom: 50px; + right: 25px; + width: 50px; + height: 50px; + color: var(--white); + z-index: 999; + font-size: 30px; + line-height: 50px; + -webkit-animation-name: superBtnTopScroll; + animation-name: superBtnTopScroll; + -webkit-animation-duration: 4s; + animation-duration: 4s; + -webkit-animation-delay: 0s; + animation-delay: 0s; + -webkit-animation-timing-function: ease-in-out; + animation-timing-function: ease-in-out; + -webkit-animation-fill-mode: forwards; + animation-fill-mode: forwards; + animation-iteration-count: infinite; + -webkit-animation-iteration-count: 1; + -webkit-transform-origin: center bottom; + -ms-transform-origin: center bottom; + transform-origin: center bottom; +} +#btnTop a.super-btn-top i { + margin-left: 12px; +} + +@-webkit-keyframes superBtnTopScroll { + 0% { + } + from, + 20%, + 53%, + 80%, + to { + -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); + animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } + 40%, + 43% { + -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); + animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); + -webkit-transform: translate3d(0, -30px, 0); + transform: translate3d(0, -30px, 0); + } + 70% { + -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); + animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); + -webkit-transform: translate3d(0, -15px, 0); + transform: translate3d(0, -15px, 0); + } + 90% { + -webkit-transform: translate3d(0, -4px, 0); + transform: translate3d(0, -4px, 0); + } + 100% { + } +} + +@keyframes superBtnTopScroll { + 0% { + } + from, + 20%, + 53%, + 80%, + to { + -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); + animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } + 40%, + 43% { + -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); + animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); + -webkit-transform: translate3d(0, -30px, 0); + transform: translate3d(0, -30px, 0); + } + 70% { + -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); + animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); + -webkit-transform: translate3d(0, -15px, 0); + transform: translate3d(0, -15px, 0); + } + 90% { + -webkit-transform: translate3d(0, -4px, 0); + transform: translate3d(0, -4px, 0); + } + 100% { + } +} diff --git a/assets/js/app.js b/assets/js/app.js index 27b5756..405e409 100644 --- a/assets/js/app.js +++ b/assets/js/app.js @@ -1,78 +1,76 @@ -const menu = document.querySelector("#mobile-menu") -const menuLinks = document.querySelector(".navbar__menu") -const logo = document.querySelector(".navbar__logo") -const body = document.querySelector("body") +const menu = document.querySelector("#mobile-menu"); +const menuLinks = document.querySelector(".navbar__menu"); +const logo = document.querySelector(".navbar__logo"); +const body = document.querySelector("body"); -const mobileMenu = ()=>{ - menu.classList.toggle("is-active") - menuLinks.classList.toggle("active") - body.classList.toggle("active") -} +const mobileMenu = () => { + menu.classList.toggle("is-active"); + menuLinks.classList.toggle("active"); + body.classList.toggle("active"); +}; -menu.addEventListener('click', mobileMenu) +menu.addEventListener("click", mobileMenu); // Animations // GSAP 3 // ScrollTrigger - +gsap.registerPlugin(ScrollTrigger); -gsap.registerPlugin(ScrollTrigger) +gsap.from(".animate-hero", { + duration: 0.6, + opacity: 0, + y: -150, + stagger: 0.3, +}); -gsap.from('.animate-hero', { - duration: 0.6, - opacity: 0, - y: -150, - stagger: 0.3 -}) +gsap.from(".animate-services", { + scrollTrigger: ".animate-services", + duration: 0.5, + opacity: 1, + x: -150, + stagger: 0.12, +}); -gsap.from('.animate-services', { - scrollTrigger: '.animate-services', - duration: 0.5, - opacity: 1, - x: -150, - stagger: 0.12 -}) +gsap.from(".animate-img", { + scrollTrigger: ".animate-services", + duration: 1.2, + opacity: 0, + x: -200, +}); -gsap.from('.animate-img', { - scrollTrigger: '.animate-services', - duration: 1.2, - opacity: 0, - x: -200, -}) +gsap.from(".animate-membership", { + scrollTrigger: ".animate-membership", + duration: 1, + opacity: 0, + y: -150, + stagger: 0.3, + delay: 0.5, +}); -gsap.from('.animate-membership', { - scrollTrigger: '.animate-membership', - duration: 1, - opacity: 0, - y: -150, - stagger: 0.3, - delay: 0.5 -}) +gsap.from(".animate-card", { + scrollTrigger: ".animate-card", + duration: 1, + opacity: 0, + y: -150, + stagger: 0.1, + delay: 0.2, +}); -gsap.from('.animate-card', { - scrollTrigger: '.animate-card', - duration: 1, - opacity: 0, - y: -150, - stagger: 0.1, - delay: 0.2 -}) +gsap.from(".animate-work", { + scrollTrigger: ".animate-work", + duration: 1, + opacity: 0, + y: -150, + stagger: 0.3, + delay: 0.2, +}); -gsap.from('.animate-work', { - scrollTrigger: '.animate-work', - duration: 1, - opacity: 0, - y: -150, - stagger: 0.3, - delay: 0.2 -}) - -gsap.from('.animate-email', { - scrollTrigger: '.animate-email', - duration: 0.8, - opacity: 0, - y: -150, - stagger: 0.25, - delay: 0.6 -}) \ No newline at end of file +gsap.from(".animate-email", { + scrollTrigger: ".animate-email", + duration: 0.8, + opacity: 0, + y: -150, + stagger: 0.25, + delay: 0.6, +}); diff --git a/assets/js/funcs.js b/assets/js/funcs.js index 2937520..3990636 100644 --- a/assets/js/funcs.js +++ b/assets/js/funcs.js @@ -1,27 +1,30 @@ -$(function(){ - smmothScroll(800) -}) +$(function () { + smmothScroll(800); +}); function smmothScroll(duration) { - $('a[href^="#"]').on('click', function(e) { - var target=$($(this).attr('href')); - if(target.length) { - e.preventDefault(); - $('html, body').animate({ - scrollTop: target.offset().top - }, duration); - } - }); + $('a[href^="#"]').on("click", function (e) { + var target = $($(this).attr("href")); + if (target.length) { + e.preventDefault(); + $("html, body").animate( + { + scrollTop: target.offset().top, + }, + duration + ); + } + }); } -$(window).scroll(function(){ - superScrollTopButton() -}) +$(window).scroll(function () { + superScrollTopButton(); +}); -function superScrollTopButton(){ - if($(document).scrollTop()>50) { - $('#btnTop a').addClass('super-btn-top'); - }else { - $('#btnTop a').removeClass('super-btn-top'); - } -} \ No newline at end of file +function superScrollTopButton() { + if ($(document).scrollTop() > 50) { + $("#btnTop a").addClass("super-btn-top"); + } else { + $("#btnTop a").removeClass("super-btn-top"); + } +} diff --git a/assets/js/slider.js b/assets/js/slider.js index 3759b9d..257e939 100644 --- a/assets/js/slider.js +++ b/assets/js/slider.js @@ -48,4 +48,4 @@ btnLeft.addEventListener("click", () => { setInterval(() => { NextSlider(); -}, 5000); \ No newline at end of file +}, 5000); diff --git a/index.html b/index.html index 3d513c5..787e2a4 100644 --- a/index.html +++ b/index.html @@ -1,202 +1,237 @@ - - - - - - - + + + + + + + NewCo - - - - - - - + + + + + + + + - +
- -
-
- slider 1 -
-
- slider 2 -
-
- slider 3 -
-
- slider 4 -
-
- slider 5 -
- - - +
+
+ slider 1 +
+
+ slider 2 +
+
+ slider 3
-
- +
+ slider 4
-
- +
+ slider 5
+
+
+ +
+
+ +
- +
- -
-
-

NewCo

-

Software Development — Cyber Security — Cloud — UI/UX — AI

- Join Now -
- - +
+
+

NewCo

+

+ Software Development — Cyber Security — Cloud — UI/UX — AI +

+ Join Now +
- + - +
-
-
-

Features

-

What we offer

-
-

- Software Development -

-

- Ecommerce -

-

- Cyber Security -

-

- AI & Automatization -

-

- Cloud Computing -

-

- Big Data & Control Systems -

-

- REST architecture & Microservices -

-

- UI/UX -

-
-
-
- -
+
+
+

Features

+

What we offer

+
+

+ Software Development +

+

+ Ecommerce +

+

+ Cyber Security +

+

+ AI & Automatization +

+

+ Cloud Computing +

+

+ Big Data & Control Systems +

+

+ REST architecture & + Microservices +

+

+ UI/UX +

+
+
+
+
+
- + + +
-

View Our Plans

-

- Get started today and receive 25% off your first month -

-
-
-
- -

Portfolio

-
-
-

Portfolio website, Custom data, Contact form, Social networks, Responsive design, Blog, Admin Panel, Animations, Maintenance and Web Positioning (SEO).

-

$500

-
- Sign Up -
-
-
- -

Ecommerce

-
-
-

Web portfolio, Personalized data, Contact form, Social networks, Responsive Design, Blog, Admin panel, Animations, Maintenance and Web Positioning (SEO). - Specialized design in sales, Shopping cart, Reports, Customer administration, Admin Panel with graphs and balances, Printed data, User registration, Google Analytics, etc

-

$1000

-
- Sign Up -
-
-
- -

Business

-
-
-

Web portfolio, Personalized data, Contact form, Social networks, Responsive Design, Blog, Admin panel, Animations, Maintenance and Web Positioning (SEO). - Admin Panel with graphs and balances, Printed data, User registration, Google Analytics. - Specialized design in business, Cyber Security, Cloud Computing, Software Engineering, REST Architecture, Artificial Intelligent, Big Data, etc

-

$2000

-
- Sign Up -
+

View Our Plans

+

+ Get started today and receive 25% off your first month +

+
+
+
+ +

Portfolio

+
+
+

+ Portfolio website, Custom data, Contact form, Social networks, + Responsive design, Blog, Admin Panel, Animations, Maintenance and + Web Positioning (SEO). +

+

$500

+
+ Sign Up +
+
+
+ +

Ecommerce

+
+
+

+ Web portfolio, Personalized data, Contact form, Social networks, + Responsive Design, Blog, Admin panel, Animations, Maintenance and + Web Positioning (SEO). Specialized design in sales, Shopping cart, + Reports, Customer administration, Admin Panel with graphs and + balances, Printed data, User registration, Google Analytics, etc +

+

$1000

+
+ Sign Up
+
+
+ +

Business

+
+
+

+ Web portfolio, Personalized data, Contact form, Social networks, + Responsive Design, Blog, Admin panel, Animations, Maintenance and + Web Positioning (SEO). Admin Panel with graphs and balances, + Printed data, User registration, Google Analytics. Specialized + design in business, Cyber Security, Cloud Computing, Software + Engineering, REST Architecture, Artificial Intelligent, Big Data, + etc +

+

$2000

+
+ Sign Up +
+
- + + +
-
-
-

- Software Engineering -

-

Software Development & Web Design

-

- Our job is to develop high-quality software under current standards. - The best technical team and product maintenance. - Excellent planning and dedication in our work, giving our passion and skills to leave our clients truly satisfied. -

-
-
-

- Artificial Intelligence -

-

Automation & Control

-

- Our job is to develop high-quality software under current standards. - The best technical team and product maintenance. - Excellent planning and dedication in our work, giving our passion and skills to leave our clients truly satisfied. -

-
- -
-

Software Engineer

- software development -
-
-

Artificial Intelligent

- artificial intelligent -
-
-

Cloud Computing

- cloud computing -
-
-

Big Data

- big data -
+
+

Software Engineer

+ software development +
+
+

Artificial Intelligent

+ artificial intelligent +
+
+

Cloud Computing

+ cloud computing +
+
+

Big Data

+ big data
+
- + + + + - +