Sesión 3: 10 de marzo

Clase 3 de 4 • #PlatziChallenge: Crea tu primera página web

Contenido del curso

Grabaciones

José Mañaricúa Torres

student•

Me propuse como reto maquetar con HTML y CSS la página clon de Platzi Day, anexo las imágenes y el código en HTML y CSS, me falta realizar los media queries para que la página sea responsive web design. Agradezco sus opiniones al respecto y consejos.

Ahora el código HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600;700&display=swap" rel="stylesheet">
    <title>Platzi</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <header>
        <nav class="navbar">
            <figure class="logo-high">
                <img src="./img/isotipo.webp" alt="">
                <img src="./img/logotipo.webp" alt="">
            </figure>
            <ul>
                <li>
                    <a href="#">Inicio</a>
                </li>
                <li>
                    <a href="#">Planes</a>
                </li>
                <li>
                    <a href="#">Cursos</a>
                </li>
                <li>
                    <a href="#">Blog</a>
                </li>
                <li>
                    <a href="#">Agenda</a>
                </li>
            </ul>
        </nav>
    </header>
    <main class="main-container">
        <section class="section-up">
            <div class="left-section">
                <h2>Platzi Day</h2>
                <h5>18, 19 y 20 de Marzo</h5>
                <p>Acceso sin costo a todos los cursos <br> de platzi durante 72 hrs</p>
                <div>
                    <input type="text" name="" id="" value="https://platzi.com/l/day-2712939/">
                    <button>Copiar</button>
                </div>
            </div>
            <div class="right-section">
                <img src="./img/Hero.webp" alt="">
            </div>
        </section>
        <section>
            <div class="first-section">
                <h3>¿Qué es el Platzi Day?</h3>
                <p>Platzi Day es la oportunidad perfecta para que, gracias a ti, más personas puedan descubrir <br> 
                y probar la experiencia de la educación profesional efectiva durante 72 horas continuas sin <br>
                necesidad de contar con una suscripción.</p>
            </div>
            <div class="second-section">
                <h3>Subscripciones con las que cuenta Platzi</h3>
                <div class="sub-cat">
                    <div>
                        <h4>Basic</h4>
                        <p>1 estudiante</p>
                    </div>
                    <div>
                        <h4>Expert</h4>
                        <p>1 estudiante</p>
                    </div>
                    <div>
                        <h4>Expert +</h4>
                        <p>2 estudiantes</p>
                    </div>
                </div>
            </div>
            <div class="third-section">
                <h3>Encontrarás cursos de:</h3>
                <div class="courses">
                    <div>
                        <h4>Desarrollo e <br> Ingeniería</h4>
                    </div>
                    <div>
                        <h4>Marketing <br> Digital</h4>
                    </div>
                    <div>
                        <h4>Cursos de <br> Inglés</h4>
                    </div>
                </div>
            </div>
        </section>
    </main>
    <footer >
        <div class="footer-container">
            <figure class="logo-down">
                <img src="./img/isotipo.webp" alt="">
                <img src="./img/logotipo.webp" alt="">
            </figure>
            <p>Transformamos la economía de nuestros países <br> entrenando a la próxima generación de <br> profesionales en tecnología.</p>
            <a href="#">Preguntas Frecuentes</a>
            <a href="#">Trabaja con nosotros</a>
            <a href="#">Términos y Condiciones</a>
        </div>
    </footer>
</body>
</html>

Y finalmente el código CSS:

:root {
    --bg-nav-fot: #0C1633;
    --letter-white: #FFFFFF;
    --col-btn: #98CA3F;
    --bg-blue: #17A2F8;
    --bg-rose: #FF8080;
    --input-grey: #C4C4C4;

    --big-lg: 6.4rem;
    --lg: 4rem;
    --big-md: 3rem;
    --md: 2.2rem;
    --big-sm: 2rem;
    --sm: 1.8rem;
    --min: 1.5rem;

    --f-weight-medium: 600;
    --f-weight-light: 500;

    --font-site: 'Montserrat', sans-serif;
}
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
html {
    font-size: 62.5%;
}
body {
    font-family: var(--font-site);
}
img {
    width: 100%;
}

nav {
    width: 100%;
    height: 6.8rem;
    background-color: var(--bg-nav-fot);
}
.logo-high {
    position: absolute;
    top: 1.4rem;
    left: 2.5rem;
}
.logo-high img:first-child {
    margin-top: .3rem;
    width: 2.9rem;
    height: 3.2rem;
}
.logo-high img:last-child {
    width: 4.8rem;
    margin-bottom: .4rem;
}
.navbar ul {
    display: flex;
    justify-content: center;
    align-items: center;
    list-style: none;
    height: 100%;
}
.navbar li {
    margin-right: 10.5rem;
}
.navbar li:last-child {
    margin-right: 0;
}
.navbar a {
    text-decoration: none;
    color: var(--letter-white);
    font-size: var(--sm);
    font-weight: var(--f-weight-medium);
}
.main-container {
    margin-left: 12rem;
    margin-right: 12rem;
}
.section-up {
    margin-top: 8rem;
    margin-bottom: 4rem;
    display: flex;
    justify-content: space-between;
}
.left-section h1 {
    font-size: var(--big-lg);
    margin-top: 2rem;
    margin-bottom: 2rem;
}
.left-section h4 {
    font-size: var(--sm);
    color: var(--col-btn);
    margin-bottom: 3rem;
}
.left-section p {
    font-size: var(--md);
    margin-bottom: 5.5rem;
}
.left-section div {
    display: flex;
}
.left-section input {
    width: 34rem;
    height: 3.6rem;
    border: 1px solid var(--input-grey);
    margin-right: 1rem;
}
.left-section input[type="text"] {
    padding-left: 1.5rem;
    font-family: var(--font-site);
    font-size: var(--min);
}
.left-section button {
    width: 13.3rem;
    height: 3.6rem;
    background-color: var(--col-btn);
    border: none;
    border-radius: .6rem;
    font-size: var(--sm);
    color: var(--letter-white);
}
.section-up .right-section img {
    margin-right: 12rem;
    width: 37.1rem;
}
.first-section h2 {
    font-size: var(--lg);
    margin-bottom: 2rem;
}
.first-section {
    margin-bottom: 6rem;
}
.first-section p {
    font-size: var(--md);
}
.second-section {
    margin-bottom: 5rem;
}
.second-section h2 {
    font-size: var(--lg);
    margin-bottom: 4rem;
}
.sub-cat {
    display: flex;
    justify-content: space-between;
    padding: 0 3rem;
}
.sub-cat div {
    background-color: var(--bg-nav-fot);
    width: 30.7rem;
    height: 16.4rem;
    border-radius: .8rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 3.1rem;
}
.sub-cat h3 {
    color: var(--letter-white);
    font-size: var(--big-md);
    margin-bottom: 1rem;
}
.sub-cat p {
    color: var(--letter-white);
    font-size: var(--big-sm);
}
.third-section {
    margin-bottom: 8rem;
}
.third-section h2 {
    font-size: var(--lg);
    margin-bottom: 6rem;
}
.courses {
    display: flex;
    justify-content: space-between;
}
.courses div {
    width: 37.5rem;
    height: 16.4rem;
    border-radius: .8rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 3.5rem;
}
.courses h3 {
    color: var(--letter-white);
    font-size: var(--big-md);
}
.courses div:first-child {
    background-color: var(--col-btn);
}
.courses div:nth-child(2) {
    background-color: var(--bg-blue);
}
.courses div:last-child {
    background-color: var(--bg-rose);
}
footer {
    background-color: var(--bg-nav-fot);
}
.footer-container {
    margin-right: 5.2rem;
    margin-left: 5.2rem;
    height: 33.7rem;
}
.logo-down {
    padding-top: 5rem;
    margin-bottom: 2.3rem;
}
.logo-down img:first-child {
    width: 3.3rem;
}
.logo-down img:last-child {
    width: 5.5rem;
}
.footer-container p {
    color: var(--letter-white);
    font-size: var(--min);
    margin-bottom: 3rem;
}
.footer-container a {
    color: var(--letter-white);
    text-decoration: none;
    display: block;
    font-size: var(--min);
    margin-bottom: 1.2rem;
}

Luis Alejandro Marcano Guaiquire

student•

Wooo. Esto esta genial ! :D

Valeria Jaimes

student•

¡Súper!

Sesión 3: 10 de marzo

Grabaciones

Sesión 1: 3 de marzo

Sesión 2: 8 de marzo

Sesión 3: 10 de marzo

Sesión 4: 15 de marzo