diff --git a/assets/css/styles.css b/assets/css/styles.css index be32e06..7e03477 100644 --- a/assets/css/styles.css +++ b/assets/css/styles.css @@ -6,30 +6,30 @@ --header-height: 3rem; /*========== Colors ==========*/ - --first-color: #069C54; + --first-color: #069c54; --first-color-alt: #048654; --title-color: #393939; --text-color: #707070; - --text-color-light: #A6A6A6; - --body-color: #FBFEFD; - --container-color: #FFFFFF; + --text-color-light: #a6a6a6; + --body-color: #fbfefd; + --container-color: #ffffff; /*========== Font and typography ==========*/ - --body-font: 'Poppins', sans-serif; + --body-font: "Poppins", sans-serif; --biggest-font-size: 2.25rem; --h1-font-size: 1.5rem; --h2-font-size: 1.25rem; --h3-font-size: 1rem; - --normal-font-size: .938rem; - --small-font-size: .813rem; - --smaller-font-size: .75rem; + --normal-font-size: 0.938rem; + --small-font-size: 0.813rem; + --smaller-font-size: 0.75rem; /*========== Font weight ==========*/ --font-medium: 500; --font-semi-bold: 600; /*========== Margenes ==========*/ - --mb-1: .5rem; + --mb-1: 0.5rem; --mb-2: 1rem; --mb-3: 1.5rem; --mb-4: 2rem; @@ -41,37 +41,39 @@ --z-fixed: 100; } -@media screen and (min-width: 768px){ - :root{ +@media screen and (min-width: 768px) { + :root { --biggest-font-size: 4rem; --h1-font-size: 2.25rem; --h2-font-size: 1.5rem; --h3-font-size: 1.25rem; --normal-font-size: 1rem; - --small-font-size: .875rem; - --smaller-font-size: .813rem; + --small-font-size: 0.875rem; + --smaller-font-size: 0.813rem; } } /*========== BASE ==========*/ -*,::before,::after{ +*, +::before, +::after { box-sizing: border-box; } -html{ +html { scroll-behavior: smooth; } /*========== Variables Dark theme ==========*/ -body.dark-theme{ - --title-color: #F1F3F2; - --text-color: #C7D1CC; - --body-color: #1D2521; - --container-color: #27302C; +body.dark-theme { + --title-color: #f1f3f2; + --text-color: #c7d1cc; + --body-color: #1d2521; + --container-color: #27302c; } /*========== Button Dark/Light ==========*/ -.change-theme{ +.change-theme { position: absolute; right: 1rem; top: 1.8rem; @@ -80,7 +82,7 @@ body.dark-theme{ cursor: pointer; } -body{ +body { margin: var(--header-height) 0 0 0; font-family: var(--body-font); font-size: var(--normal-font-size); @@ -89,41 +91,45 @@ body{ line-height: 1.6; } -h1,h2,h3,p,ul{ +h1, +h2, +h3, +p, +ul { margin: 0; } -ul{ +ul { padding: 0; list-style: none; } -a{ +a { text-decoration: none; } -img{ +img { max-width: 100%; height: auto; transform: translate(114px, 77px); - } /*========== CLASS CSS ==========*/ -.section{ +.section { padding: 4rem 0 2rem; } -.section-title, .section-subtitle{ +.section-title, +.section-subtitle { text-align: center; } -.section-title{ +.section-title { font-size: var(--h1-font-size); color: var(--title-color); margin-bottom: var(--mb-3); } -.section-subtitle{ +.section-subtitle { display: block; color: var(--first-color); font-weight: var(--font-medium); @@ -131,19 +137,19 @@ img{ } /*========== LAYOUT ==========*/ -.bd-container{ +.bd-container { max-width: 960px; width: calc(100% - 2rem); margin-left: var(--mb-2); margin-right: var(--mb-2); } -.bd-grid{ +.bd-grid { display: grid; gap: 1.5rem; } -.l-header{ +.l-header { width: 100%; position: fixed; top: 0; @@ -153,7 +159,7 @@ img{ } /*========== NAV ==========*/ -.nav{ +.nav { max-width: 1024px; height: var(--header-height); display: flex; @@ -161,8 +167,8 @@ img{ align-items: center; } -@media screen and (max-width: 768px){ - .nav__menu{ +@media screen and (max-width: 768px) { + .nav__menu { position: fixed; top: -100%; left: 0; @@ -170,286 +176,287 @@ img{ padding: 1.5rem 0 1rem; text-align: center; background-color: var(--body-color); - transition: .4s; - box-shadow: 0 4px 4px rgba(0,0,0,.1); + transition: 0.4s; + box-shadow: 0 4px 4px rgba(0, 0, 0, 0.1); border-radius: 0 0 1rem 1rem; z-index: var(--z-fixed); } } -.nav__item{ +.nav__item { margin-bottom: var(--mb-2); } -.nav__link, .nav__logo, .nav__toggle{ +.nav__link, +.nav__logo, +.nav__toggle { color: var(--text-color); font-weight: var(--font-medium); } -.nav__logo:hover{ +.nav__logo:hover { color: var(--first-color); } -.nav__link{ - transition: .3s; +.nav__link { + transition: 0.3s; } -.nav__link:hover{ +.nav__link:hover { color: var(--first-color); } -.nav__toggle{ +.nav__toggle { font-size: 1.3rem; cursor: pointer; } /* Show menu */ -.show-menu{ +.show-menu { top: var(--header-height); } .menu__container.bd-grid { display: flex; - column-gap: 206px; } img.menu__img { transform: translateX(3px); } /* Active menu */ -.active-link{ +.active-link { color: var(--first-color); } /* Change background header */ -.scroll-header{ - box-shadow: 0 2px 4px rgba(0,0,0,.1); +.scroll-header { + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } /* Scroll top */ -.scrolltop{ +.scrolltop { position: fixed; right: 1rem; bottom: -20%; display: flex; justify-content: center; align-items: center; - padding: .3rem; - background: rgba(6,156,84,.5); - border-radius: .4rem; + padding: 0.3rem; + background: rgba(6, 156, 84, 0.5); + border-radius: 0.4rem; z-index: var(--z-tooltip); - transition: .4s; + transition: 0.4s; visibility: hidden; } -.scrolltop:hover{ +.scrolltop:hover { background-color: var(--first-color-alt); } -.scrolltop__icon{ +.scrolltop__icon { font-size: 1.8rem; color: var(--body-color); } /* Show scrolltop */ -.show-scroll{ +.show-scroll { visibility: visible; bottom: 1.5rem; } /*========== HOME ==========*/ -.home__container{ +.home__container { height: calc(100vh - var(--header-height)); align-content: center; } -.home__title{ +.home__title { font-size: var(--biggest-font-size); color: var(--first-color); margin-bottom: var(--mb-1); } -.home__subtitle{ +.home__subtitle { font-size: var(--h1-font-size); color: var(--title-color); margin-bottom: var(--mb-4); } -.home__img{ +.home__img { width: 300px; justify-self: center; } - -/*========== BUTTONS ==========*/ -.button{ + +/*========== BUTTONS ==========*/ +.button { display: inline-block; background-color: var(--first-color); - color: #FFF; + color: #fff; padding: 15px; - border-radius: .5rem; - transition: .3s; - + border-radius: 0.5rem; + transition: 0.3s; } -.button:hover{ +.button:hover { background-color: var(--first-color-alt); } /*========== ABOUT ==========*/ -.about__data{ +.about__data { text-align: center; } -.about__description{ +.about__description { margin-bottom: var(--mb-3); } -.about__img{ +.about__img { width: 280px; - border-radius: .5rem; + border-radius: 0.5rem; justify-self: center; } /*========== SERVICES ==========*/ -.services__container{ +.services__container { row-gap: 2.5rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } -.services__content{ +.services__content { text-align: center; } -.services__img{ +.services__img { width: 64px; height: 64px; fill: var(--first-color); margin-bottom: var(--mb-2); } -.services__title{ +.services__title { font-size: var(--h3-font-size); color: var(--title-color); margin-bottom: var(--mb-1); } -.services__description{ +.services__description { padding: 0 1.5rem; } /*========== MENU ==========*/ -.menu__container{ +.menu__container { display: flex; justify-content: center; } -.menu__content{ +.menu__content { position: relative; display: flex; flex-direction: column; background-color: var(--container-color); - border-radius: .5rem; - box-shadow: 0 2px 4px rgba(3,74,40,.15); - padding: .75rem; + border-radius: 0.5rem; + box-shadow: 0 2px 4px rgba(3, 74, 40, 0.15); + padding: 0.75rem; } -.menu__img{ +.menu__img { width: 100px; align-self: center; margin-bottom: var(--mb-2); } -.menu__name, .menu__preci{ +.menu__name, +.menu__preci { font-weight: var(--font-semi-bold); color: var(--title-color); } -.menu__name{ +.menu__name { font-size: var(--normal-font-size); } -.menu__detail, .menu__preci{ +.menu__detail, +.menu__preci { font-size: var(--small-font-size); } -.menu__detail{ +.menu__detail { margin-bottom: var(--mb-1); } -.menu__button{ +.menu__button { position: absolute; bottom: 0; right: 0; display: flex; - padding: .625rem .813rem; - border-radius: .5rem 0 .5rem 0; + padding: 0.625rem 0.813rem; + border-radius: 0.5rem 0 0.5rem 0; } /*========== APP ==========*/ -.app__data{ +.app__data { text-align: center; } -.app__description{ +.app__description { margin-bottom: var(--mb-5); } -.app__stores{ +.app__stores { margin-bottom: var(--mb-4); height: 200px; width: 200px; } -.app__store{ +.app__store { width: 169px; margin: 0 var(--mb-1); } -.app__img{ +.app__img { width: 230px; justify-self: center; } /*========== CONTACT ==========*/ -.contact__container{ +.contact__container { text-align: center; } -.contact__description{ +.contact__description { margin-bottom: var(--mb-3); } /*========== FOOTER ==========*/ -.footer__container{ +.footer__container { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); row-gap: 2rem; } -.footer__logo{ +.footer__logo { font-size: var(--h3-font-size); color: var(--first-color); font-weight: var(--font-semi-bold); } -.footer__description{ +.footer__description { display: block; font-size: var(--small-font-size); - margin: .25rem 0 var(--mb-3); + margin: 0.25rem 0 var(--mb-3); } -.footer__social{ - +.footer__social { font-size: 30px; color: var(--title-color); margin-right: var(--mb-2); } -.footer__title{ +.footer__title { font-size: var(--h2-font-size); color: var(--title-color); margin-bottom: var(--mb-2); } -.footer__link{ +.footer__link { display: inline-block; color: var(--text-color); margin-bottom: var(--mb-1); } -.footer__link:hover{ +.footer__link:hover { color: var(--first-color); } -.footer__copy{ +.footer__copy { text-align: center; font-size: var(--small-font-size); color: var(--text-color-light); @@ -457,106 +464,110 @@ img.menu__img { } /*========== MEDIA QUERIES ==========*/ -@media screen and (min-width: 576px){ +@media screen and (min-width: 576px) { .home__container, .about__container, - .app__container{ - grid-template-columns: repeat(2,1fr); + .app__container { + grid-template-columns: repeat(2, 1fr); align-items: center; } - .about__data, .about__initial, - .app__data, .app__initial, - .contact__container, .contact__initial{ + .about__data, + .about__initial, + .app__data, + .app__initial, + .contact__container, + .contact__initial { text-align: initial; } - .about__img, .app__img{ + .about__img, + .app__img { width: 380px; order: -1; } - .contact__container{ + .contact__container { grid-template-columns: 1.75fr 1fr; align-items: center; } - .contact__button{ + .contact__button { justify-self: center; } } -@media screen and (min-width: 768px){ - body{ +@media screen and (min-width: 768px) { + body { margin: 0; } - .section{ + .section { padding-top: 8rem; } - .nav{ + .nav { height: calc(var(--header-height) + 1.5rem); } - .nav__list{ + .nav__list { display: flex; } - .nav__item{ + .nav__item { margin-left: var(--mb-5); margin-bottom: 0; } - .nav__toggle{ + .nav__toggle { display: none; } - .change-theme{ + .change-theme { position: initial; margin-left: var(--mb-2); } - .home__container{ + .home__container { height: 100vh; justify-items: center; } .services__container, - .menu__container{ + .menu__container { margin-top: var(--mb-6); } - .menu__container{ + .menu__container { column-gap: 4rem; } - .menu__content{ - padding: 1.5rem; + .menu__content { + padding: 3.5rem; } - .menu__img{ + .menu__img { width: 130px; } - .app__store{ + .app__store { margin: 0 var(--mb-1) 0 0; } } -@media screen and (min-width: 960px){ - .bd-container{ +@media screen and (min-width: 960px) { + .bd-container { margin-left: auto; margin-right: auto; } - .home__img{ + .home__img { width: 500px; } .about__container, - .app__container{ + .app__container { column-gap: 7rem; } } /* For tall screens on mobiles y desktop*/ @media screen and (min-height: 721px) { - .home__container { - height: 640px; - } + .home__container { + height: 640px; + } } diff --git a/index.html b/index.html index d8c21d5..675a00f 100644 --- a/index.html +++ b/index.html @@ -228,7 +228,7 @@ - +