/* Hace que todos los elementos que se encuentren dentro de las etiquetas hereden la propiedad box-sizing: border-box; asignada en el elemento padre () */ html { box-sizing: border-box; font-size: 62.5%; /* 1rem = 10px */ } *, *:before, *:after { box-sizing: inherit; } /* Variables */ :root { --main-font: "Roboto", sans-serif; --secondary-font: "Lato", sans-serif; --primary-color: #1073ba; --secondary-color: #49d5ff; --gray: #3b3b3b; --white: #ffff; --black: #1f1e1e; --lightgray: #e1e1e1; --space: 5rem; } /* Estilos Globales */ body { font-family: var(--main-font); font-size: 1.6rem; line-height: 1.5; } .container { max-width: 120rem; width: 90%; /* cuando el ancho sea menos de 1200px va a ocupar el 90% */ margin: 0 auto; /* centra el contenedor */ } h1, h2, h3 { font-weight: 900; font-family: var(--secondary-font); margin: calc(var(--space) / 2) 0; } h1 { font-size: 4.4rem; } h2 { font-size: 3.6rem; } h3 { font-size: 2.8rem; } img { max-width: 100%; display: block; height: auto; } /* Utilidades */ .text-center { text-align: center; } /* Degradados */ .blue-gradient { color: transparent; background: linear-gradient( to right, var(--primary-color) 0%, var(--secondary-color) 100% ); -webkit-background-clip: text; } /* HEADER */ .header { background-color: var(--black); padding: calc(var(--space) * 3) 0; color: var(--white); } @media (min-width: 768px) { .header-content { display: grid; grid-template-columns: 2fr 2fr; } } .header-image { display: flex; flex-direction: row; align-items: center; } .header-text { text-align: center; padding-top: var(--space); } .header-text p { margin: 0; } @media (min-width: 768px) { .header-text { text-align: left; display: flex; flex-direction: column; justify-content: space-between; padding: 0; } } .product-tagline { font-size: 3rem; font-weight: 900; } .product-name { font-size: 5.5rem; margin: 0; } @media (min-width: 768px) { .product-name { font-size: 6rem; line-height: 1; } } .product-description { } .product-price span { font-size: 4rem; font-weight: 900; } /* ICONOS */ .icons { padding: var(--space) 0; } @media (min-width: 768px) { .icons { display: flex; flex-direction: row; gap: 2rem; } } .icon { display: flex; flex-direction: column; align-items: center; margin: calc(var(--space) / 2) 0; } @media (min-width: 768px) { .icon { margin: 0; } } .icon img { width: 5rem; } .icon h3 { color: var(--primary-color); text-transform: uppercase; } /* ABOUT SECTION */ .about { background-image: linear-gradient(to top, var(--black) 50%, transparent 100%), url(../img/imagen-mujer.jpg); background-position: right; background-repeat: repeat, no-repeat; background-size: 100%, 110rem; } @media (min-width: 1600px) { .about { background-size: 100%, 210rem; } } @media (min-width: 768px) { .about { background-image: linear-gradient( to right, var(--black) 50%, transparent 100% ), url(../img/imagen-mujer.jpg); } } .about-grid { display: grid; grid-template-rows: 40rem 40rem; row-gap: var(--space); align-items: center; } @media (min-width: 768px) { .about-grid { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr; row-gap: unset; column-gap: var(--space); padding: calc(var(--space) * 2) 0; } } .about-text { color: var(--white); grid-row-start: 2; grid-row-end: 3; padding-bottom: var(--space); } .about-text h2 { font-size: 3.5rem; text-align: center; } .about-text p { font-size: 1.8rem; line-height: 2; } @media (min-width: 768px) { .about-text h2 { font-size: 4rem; text-align: left; } .about-text p { font-size: 2rem; line-height: 2; } .about-text { padding-bottom: 0; } } /* MODELS SECTION */ .models { padding: var(--space) 0; } .models h2 { text-transform: uppercase; font-size: 4rem; margin-bottom: var(--space); } .models-list { display: flex; flex-direction: column-reverse; } @media (min-width: 992px) { .models-list { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 20rem 20rem; gap: 4rem; } } .model { background-color: var(--lightgray); margin-bottom: 2rem; padding-left: 4rem; border-radius: 2rem; color: var(--primary-color); min-height: 20rem; display: flex; flex-direction: column; justify-content: space-evenly; background-repeat: no-repeat; background-position: 90% center; background-size: 12rem; transition-property: transform, backgroud-size; transition-timing-function: ease-in-out; transition-duration: 0.3s; } .model:hover { transform: scale(1.05); } @media (min-width: 992px) { .model:hover { background-size: 22rem; cursor: pointer; } } @media (min-width: 992px) { .model { background-size: 16rem; margin-bottom: 0; } } .model h3 { font-size: 2.4rem; } .model .price { font-size: 4rem; font-weight: 900; line-height: 0; } .model:first-of-type { margin-bottom: 0; } .model-basic { background-image: url(../img/modelo-x.svg); } .model-plus { background-image: url(../img/modelo-y.svg); } .model-plus-plus { background-color: var(--primary-color); color: var(--white); background-image: url(../img/modelo-z.svg); } .model-plus-plus .price { font-size: 5rem; } @media (min-width: 992px) { .model-plus-plus { grid-row: 1/3; grid-column: 2/3; background-size: 20rem; } .model-plus-plus h3 { font-size: 3rem; } } /* NEWSLETTER SECTION */ .newsletter { background-image: linear-gradient(to bottom, transparent 50%, var(--black) 0%), url(../img/newsletter.jpg); background-repeat: repeat, no-repeat; background-size: 100%, 80rem; background-position: top center; padding-bottom: 5rem; } @media (min-width: 768px) { .newsletter { background-image: linear-gradient( to right, transparent 50%, var(--black) 0% ), url(../img/newsletter.jpg); background-size: 100%, 90rem; background-position: left; padding: 10rem 0; } } @media (min-width: 1300px) { .newsletter { background-size: 100%, 130rem; } } .content-newsletter { display: grid; grid-template-rows: 1fr 1fr; gap: var(--space); color: var(--white); } @media (min-width: 768px) { .content-newsletter { grid-template-rows: unset; grid-template-columns: 1fr 1fr; } } .text-newsletter { grid-row: 2/3; } @media (min-width: 768px) { .text-newsletter { grid-row: unset; grid-column: 2/3; } } .text-newsletter h2 { font-size: 3rem; } .form input[type="email"] { width: 100%; padding: 1rem; } .form input[type="submit"] { width: 100%; padding: 2rem; margin-top: 2rem; background-color: var(--primary-color); color: var(--white); text-transform: uppercase; font-size: 2rem; font-weight: 900; border: none; } .form input[type="submit"]:hover { cursor: pointer; } /* FOOTER */ .footer { border-top: 1px solid var(--lightgray); margin: 10rem 0 0 0; padding: 4rem 0; } .footer p { font-family: var(--secondary-font); font-size: 2.4rem; text-align: center; }