/* 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 { --white: #fff; --black: #111; --gray: #343440; --main-font: "Raleway", sans-serif; } /* Etilos Globales */ body { font-family: var(--main-font); font-size: 1.6rem; line-height: 1.8; } h1, h2, h3 { font-weight: 900; margin: 1rem 0 4rem 0; line-height: 1.2; } h1 { font-size: 4.8rem; } h2 { font-size: 5.8rem; } h3 { font-size: 5rem; } a { text-decoration: none; } img { max-width: 100%; display: block; height: auto; } .container { max-width: 120rem; width: 90%; /* cuando el ancho sea menos de 1200px va a ocupar el 90% */ margin: 0 auto; /* centra el contenedor */ } .btn { background-color: var(--white); color: var(--gray); border: 1px solid var(--gray); padding: 0.5rem 2rem; transition-property: background-color; transition-duration: 0.3s; } .btn:hover { background-color: var(--gray); color: var(--white); } /* Utilidades */ .text-center { text-align: center; } .mt-5 { margin-top: 5rem; } /* HEADER */ .header { min-height: 60rem; background-image: url(../img/hero.jpg); background-repeat: no-repeat; background-size: cover; background-position: center; padding: 5rem 0; } .content-header { color: var(--white); display: flex; flex-direction: column; height: calc(60rem - 4rem); justify-content: space-between; } .bar a { color: var(--white); font-size: 2rem; } @media (min-width: 1070px) { .bar { display: flex; justify-content: space-between; align-items: center; } } .logo { } .site-name { font-weight: 300; font-size: 3rem; text-align: center; } .site-name span { font-weight: 900; } @media (min-width: 768px) { .site-name { font-size: 4.8rem; } } .contact { display: flex; flex-direction: column; align-items: center; } @media (min-width: 768px) { .contact { align-items: flex-end; } } .tel { display: flex; } .tel::before { content: ""; background-image: url(../img/telefono.png); display: block; width: 4rem; height: 4rem; background-repeat: no-repeat; background-position: center center; margin-right: 1rem; } .navigation { display: flex; flex-direction: column; align-items: center; width: 100%; margin-top: 1rem; } @media (min-width: 768px) { .navigation { flex-direction: row; } } .navigation a { padding: 1rem 2rem; transition-property: background-color; transition-duration: 0.3s; width: 100%; text-align: center; } .navigation a:hover { background-color: rgb(255 255 255 / 0.5); color: var(--black); } .link { } .slogan { text-align: center; } @media (min-width: 768px) { .slogan { text-align: right; } } .slogan h2 { font-size: 2rem; margin: 0; } @media (min-width: 768px) { .slogan h2 { font-size: 3rem; margin: 0; } } .slogan p { margin: 0; line-height: 1; } /* ABOUT SECTION */ .about { display: grid; grid-template-rows: 1fr 1fr; background-image: url(../img/nosotros.jpg); background-repeat: no-repeat; background-position: bottom center; } @media (min-width: 992px) { .about { grid-template-columns: 1fr 1fr 1fr; } } .about-content { background-color: var(--white); padding: 1rem; } @media (min-width: 992px) { .about-content { padding: 5rem; grid-column: 2/4; } } .about-content h2 { font-size: 4rem; } @media (min-width: 768px) { .about-content h2 { font-size: 5.8rem; } } .about-content h2, .about-content p { margin-bottom: 2rem; } /* MODELS SECTION */ .main h2 { font-size: 4rem; text-align: center; } @media (min-width: 768px) { .main h2 { font-size: 5.8rem; text-align: left; } } .model { display: grid; grid-template-rows: 1fr 1.5fr; background-repeat: no-repeat; background-position: bottom center; margin-bottom: 5rem; } .model:last-of-type { margin-bottom: 0; } @media (min-width: 768px) { .model { grid-template-rows: 1fr 1fr; } } @media (min-width: 768px) { .model { grid-template-columns: 1fr 1fr; } } .basic { background-image: url(../img/modelo_basico.jpg); } @media (min-width: 768px) { .basic { background-position: top right; } .basic .content-model { grid-row: 2/3; padding: 2rem 2rem 2rem 0; } } .premier { background-image: url(../img/modelo_premier.jpg); } @media (min-width: 768px) { .premier { background-position: top left; } .premier .content-model { grid-column: 2/3; padding: 2rem 0rem 2rem 2rem; } } .elite { background-image: url(../img/modelo_elite.jpg); } @media (min-width: 768px) { .elite { background-position: top right; } .elite .content-model { padding: 2rem 2rem 2rem 0; } } .content-model { background-color: var(--white); padding: 1rem; } @media (min-width: 768px) { .content-model { padding: 5rem; } } .content-model h3 { font-size: 4rem; } /* GALERY */ .galery { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } @media (min-width: 768px) { .galery { grid-template-columns: 1fr 1fr 1fr; } } .galery img { object-fit: cover; height: 100%; } .galery .image:nth-child(2) { grid-row: 1/3; grid-column: 2/3; } @media (min-width: 768px) { .galery .image:nth-child(2) { grid-column: 1/2; grid-row: 2/4; } } .galery .image:nth-child(3) { grid-row: 3/5; grid-column: 2/3; } @media (min-width: 768px) { .galery .image:nth-child(3) { grid-column: 2/3; grid-row: 1/2; } } .galery .image:nth-child(6) { grid-row: 2/4; } @media (min-width: 768px) { .galery .image:nth-child(6) { grid-column: 3/4; grid-row: 1/3; } } /* FOOTER */ .footer { height: 50rem; background-image: url(../img/footer_bg.jpg); background-repeat: no-repeat; background-position: center center; background-size: cover; display: flex; flex-direction: column; justify-content: flex-end; color: var(--white); } .copyright { text-align: center; font-size: 2rem; background-color: var(--black); margin-bottom: 0; margin-top: 4rem; }