Maquetando perfil HTML

Reto:

reto completado

les comparto el fragmento de codigo para dar efecto de degradado, si colocan el primer valor en top (degradado vertical) left (degradado horizontal) deg (degradado diagonal)

background: linear-gradient(145deg,#41CFAC, #FA5AB5) ;```

Una pequeña corrección para manejar el nombre de las clases en inglés proyects se escribe projects

No es mucho pero es trabajo honesto😆![](

reto: un perfil diferente

Les comparto mi avance compañeros.

Después de unos 30 minutos estructurando y dando estilos, he aquí el resultado! 😄

Reto completado! espero comentarios y feedback. Saludos a todos.
![](

Solución al reto:

Versión Desktop

Versión Tablet

Versión Mobile

Este es mi blog, algo diferente a lo visto en el curso pero basándome en el código:

Personalmente me gusta mucho este curso, tiene muchas cosas que se pueden hacer mejor, pero claro hay que entender que esto es solo para principiantes. Muy buen curso.

![](

Listo!

Me gusta más el ejercicio de maquetar con display Grid. ¡Excelente clase!

Les comparto mi página:

![](

projects?

Como va quedando mi proyecto?

CSS solo del perfil

@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;500;700&family=Roboto+Slab:wght@400;700&family=Roboto:wght@400;500;700;900&display=swap');

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
html {
    font-family: 'Roboto mono', monospace;
    font-size: 62.5%;
}
a {
    text-decoration: none;
    display: inline;
    color: black;
}
/* Header */
header {
    width: 100%;
    height: 140px;
    display: grid;
    grid-template-rows: 1fr 1fr;
}
header .header-icons-container {
    width: 100%;
    height: 50px;
    display: grid;
    background-color: #47cfac;
}
header .header-icons-container .icons {
    width: 300px;
    height: auto;
    display: flex;
    justify-items: flex-end;
    align-items: center;
    justify-content: space-between;
    justify-self: end;
    margin-right: 50px;
}
header .icons span {
    color: white;
}
nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    height: 90px;
}
nav .nav-logo-container {
    margin-left: 50px;
}
nav .nav-logo-container img {
    width: 220px;
    margin-top: 10px;
}
nav .profile-link {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-right: 50px;
}
nav .profile-link a {
    font-size: 1.4rem;
    font-weight: bold;
    color: black;
    border-bottom: 1px solid black;
}
/* main */
.blogpost-main-container {
    width: 100%;
    min-height: 700px;
    text-align: center;
    padding-bottom: 50px;
}
.blogpost-main-container .blogpost-main-profile { 
    display: flex;
    align-items: center;
    text-align: initial;
    padding: 80px;
    gap: 30px;
    background-color: #e6e9ed;
}
.blogpost-main-profile img {
    width: 350px;
    margin-left: 50px;
}
.blogpost-main-profile div h2 {
    font-size: 2.5rem;
    font-weight: bold;
    margin-bottom: 20px;
}
.blogpost-main-profile div p {
    font-size: 1.7rem;
    font-weight: 500;
    line-height: 2.5rem;
    margin-right: 50px;
}
.blogpost-main-projects {
    min-height: 350px;
}
.blogpost-main-projects > h2 {
    font-size: 2rem;
    padding: 20px;
    border-bottom: 1px solid #cdd2da;
}
.blogpost-main-projects section {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    padding-top: 20px;
    gap: 20px;
    margin: 0 50px;
}
.blogpost-main-projects section div {
    text-align: initial;
}
.blogpost-main-projects section div p {
    font-size: 1.5rem;
    margin-top: 15px;
}

/* contacto */
.contact-main-container {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 250px;
    background-color: #e6e9ed;
    padding-bottom: 50px;
}
.contact-main-container img {
    height: 100px;
    margin-bottom: 40px;
}
.contact-main-container div {
    display: flex;
    align-items: center;
    margin: 0 auto;
}
.contact-main-container .contact-left, .contact-main-container .contact-right {
    display: block;
    width: 250px;
    margin-left: 10px;
    font-size: 1.4rem;
    font-weight: bold;
}
.contact-left a, .contact-right a {
    border-bottom: 1px solid black;
}
.contact-left p, .contact-right p {
    margin-top: 10px;
}
/* footer */
footer {
    width: 100%;
    height: 80px;
    background-color: #22272d;
    border-top: 35px solid #47cfac;
    text-align: center;
}
footer p {
    color: white;
    margin-top: 17px;
}

//- Aporte

Listo!!, terminado el reto!

Reto cumplido.

Listo!!!

Buenas, a continuación comparto el mío:
   

Reto:

HTML:

<!DOCTYPE html>
<html lang="es-MX">
    <head>
        <title>Perfil</title>
        <link rel="stylesheet" href="./css/profile.css" />
        <link rel="stylesheet" href="./assets/fonts/flaticon.css" />
        <meta charset="UTF-8" />
        <meta name="description" content="Pagina del perfil" />
        <meta name="robots" content="index,follow" />
        <meta 
            name="viewport"
            content="
                width=device-width, 
                user-scalable=no, 
                initial-scale=1.0, 
                maximum-scale=1.0, 
                minimum-scale=1.0"
        />
    </head>
    <body>
        <header>
            <section class="header-icons-container">
                <div class="icons">
                    <a href="#"><span class="flaticon-001-facebook"></span></a>
                    <a href="#"><span class="flaticon-002-twitter"></span></a>
                    <a href="#"><span class="flaticon-011-instagram"></span></a>
                    <a href="#"><span class="flaticon-010-linkedin"></span></a>
                    <a href="#"><span class="flaticon-008-youtube"></span></a>
                </div>
            </section>
            <nav>
                <section class="nav-logo-container">
                    <a href="./index.html"><img src="./assets/img/Logo-negro.png" alt="Logo de mi blog" /></a>
                </section>
                <section class="profile-link">
                    <a href="./perfil.html">Sobre mi</a>
                </section>
            </nav>
        </header>
        <main class="main-profile">
            <section class="profile-info">
                <div class="profile-picture">
                    <img src="./assets/img/profile-pic.jpg" alt="Imagen de persona" />
                </div>
                <div class="profile-desc">
                    <h1>Hola!</h1>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis error incidunt, earum magni nobis ab qui repellat ut, odit quam ratione animi asperiores quia atque quas explicabo. Quaerat, corrupti id!</p>
                </div>
            </section>
            <section class="profile-proyects">
                <div class="grid-container">
                    <h3>Proyectos</h3>
                    <div>
                        <article>
                            <h2>Texto</h2>
                            <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sed exercitationem magnam aperiam facere dolores. Similique error rerum voluptatibus temporibus saepe! Nostrum nobis nemo reiciendis fugit sapiente exercitationem corporis dolorum veniam.</p>
                        </article>
                        <article>
                            <h2>Texto</h2>
                            <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sed exercitationem magnam aperiam facere dolores. Similique error rerum voluptatibus temporibus saepe! Nostrum nobis nemo reiciendis fugit sapiente exercitationem corporis dolorum veniam.</p>
                        </article>
                        <article>
                            <h2>Texto</h2>
                            <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sed exercitationem magnam aperiam facere dolores. Similique error rerum voluptatibus temporibus saepe! Nostrum nobis nemo reiciendis fugit sapiente exercitationem corporis dolorum veniam.</p>
                        </article>
                    </div>
                </div>
            </section>
            <section class="contact-main-container">
                <div>
                    <div>
                        <img src="./assets/img/013-newsletter.png" alt="Imagen de correo" />
                        <div>
                            <a href="">Contacto</a>
                            <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p>
                        </div>
                    </div>
                    <div>
                        <img src="./assets/img/006-like.png" alt="Imagen de corazón" />
                        <div>
                            <a href="">Escribe</a>
                            <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p>
                        </div>
                    </div>
                </div>
            </section>
        </main>
        <footer>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
        </footer>
    </body>
</html>

SCSS:

@import 'reset';
@import 'variables';
@import 'mixins';
@import 'header';
@import 'footer';
@import 'global';
@import 'contact';
@import url('https://fonts.googleapis.com/css?family=Roboto+Mono:400,500,700|Roboto+Slab:400,700|Roboto:400,500,700,900&display=swap');

.main-profile{

    font-family: 'Roboto mono', monospace;

    .profile-info{

        background-color: $gray-color;
        display: flex;
        justify-content: space-around;
        align-items: center;
        padding: 80px;

        .profile-picture{

            width: 30%;

            img{

                width: 100%;

            }

        }

        .profile-desc{

            width: 60%;

            h1{

                font-size: 36px;
                font-weight: bolder;

            }

            p{

                font-size: 16px;

            }

        }

    }

    .profile-proyects{

        padding: 0 50px 40px;

        div{

            h3{

                border-bottom: 1px solid $gray-color;
                padding-bottom: 20px;
                padding-top: 20px;
                text-align: center;
                font-size: 35px;
    
            }

            div{

                display: grid;
                grid-template-columns: 1fr 1fr 1fr;
                gap: 20px 20px;

                article{

                    h2{
        
                        font-size: 30px;
                        margin: 25px 0;
        
                    }
        
                    p{
        
                        margin-bottom: 15px;
        
                    }
        
                }

            }

        }   

    }

}

mi reto:

Aquí está mi reto completado

Reto completado:

<main class="profile-main">
        <section class="profile-news-container">
            <div class="grid-container profile-main-container">
                <div class="profile-img-container">
                    <img src="assets/img/img-perfil.jpg" alt="">
                </div>
                <div class="profile-info-container">
                    <h3>Hola!</h3>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore temporibus quae officia iure quod laboriosam explicabo quasi praesentium quam recusandae. Officia repellat expedita optio voluptatum provident veniam eius blanditiis ratione!</p>
                </div>
            </div>
        </section>
        <section class="profile-projects-container">
            <div class="grid-container">
                <h3>Proyectos</h3>
                <article class="project-container">
                    <h2>Texto</h2>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis laudantium fugiat tempora quasi libero optio placeat esse nulla sunt! Sed ducimus totam praesentium ipsa tempora vel quos! Illum, est praesentium.</p>
                    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Possimus suscipit sapiente aspernatur eligendi praesentium.</p>
                </article>
                <article class="project-container">
                    <h2>Texto</h2>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis laudantium fugiat tempora quasi libero optio placeat esse nulla sunt! Sed ducimus totam praesentium ipsa tempora vel quos! Illum, est praesentium.</p>
                    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Possimus suscipit sapiente aspernatur eligendi praesentium.</p>
                </article>
                <article class="project-container">
                    <h2>Texto</h2>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis laudantium fugiat tempora quasi libero optio placeat esse nulla sunt! Sed ducimus totam praesentium ipsa tempora vel quos! Illum, est praesentium.</p>
                    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Possimus suscipit sapiente aspernatur eligendi praesentium.</p>
                </article>
            </div>
        </section>
        <section class="contact-main-container">
            <div>
                <img src="assets/img/013-newsletter.png" alt="">
                <div class="contact-left">
                    <a href="">Contacto</a>
                    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. </p>
                </div>
            </div>
            <div>
                <img src="assets/img/006-like.png" alt="">
                <div class="contact-right">
                    <a href="">Escribe</a>
                    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. </p>
                </div>
            </div>
        </section>
    </main>```

genial voy a ver este video pero pude hacerlo reutlizando codigo anterior excelente reto

.profile-main{
    display: grid;
}
.profile-news-container {
    background-color: #e6e9ed;
    padding: 30px 50px 40px;
}
.profile-main-container{
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-template-rows: 2fr;
}
.profile-img-container{
    grid-column: 1;
}
.profile-img-container img{
    width: 80%;
    margin-top: 20px;
}
.profile-info-container {
    grid-column: 2;
}
.profile-info-container p{
    margin-bottom: 35px;
}
.profile-projects-container {
    padding: 0px 50px 40px;
}
.profile-projects-container h3{
    border-bottom: 1px solid #cdd2da;
    padding-bottom: 20px;
    text-align: center;
}
.profile-projects-container .project-container{
    display: inline-block;
    padding-left: 20px;
    max-width: 30%;
    margin-bottom: 50px;
}
.profile-projects-container .project-container p{
    margin-bottom: 20px;
}```

Continuemos. 😄

Vamos 😄

aqui esta hecho el reto

Pd: gracias a los aportes que hicieron en videos anteriores pude terminarlo con ese degradado ty ❤️

Pregunta: el profesor para los contenedores de las imagenes siempre usa ‘div’, no sería mejor (o mas correcto, semánticamente) usar un <figure> ? consulto porque en otros cursos si vi que usaban el figure en lugar de div

Acercándonos mas y mas y aprendiendo bastante

Aqui esta el mio

Reto terminado!!

para recordar:

Projects ✅
proyects ❌

Asi va mi proyecto:

RETO CUMPLIDO!

Reto cumplido:

listo

No es más conveniente contener a las imágenes en la etiqueta figure en vez de en un div??

genial

Soy profesor de primaria y siento lo que mis alumnos padecen en ciertas materias, llevo ya varias semanas y siento que no la estoy haciendo.

Le dedico más de 20 horas a la semana y nomas no doy con ninguna. Soy la vergüenza andando, pero eso sí, no voy a parar hasta que aprenda.

Maquetado de la página de perfil.

![](

envío de como quedo mi página antes de ver esta clase 😄

estupendo 😄

Reto. 😋

Me parece increíble que para darle estilos a esa simple parte de la página haya hecho tantos <div>, está correcto, eso es saber programar prolijamente

enserio en este curso aprendí mucho sobre html semántico y como hacer la estructura!

A darle 😄

Felicidad es cuando te das cuenta del error y lo tienes corregido, antes que el profe.

así quedo mi reto de crear el perfil;

me agrada mucho entender el código sin necesidad de una explicación, @platzi vale la pena, realmente es indescriptible la sensación de nunca parar de aprender 🤣🤣🤣🤣

Reto terminado!!!

reto cumplido 😃

Reto cumplido

Hola a todos, acá terminé el ejercicio total, incluyendo media queries con todas las páginas. Sin embargo lo hice tal cual el ejercicio ya que yo quiero construir mi portafolio en una sola página ya que me parece mejor el uso de story telling a través de esta forma. Segundo el blog prefiero escribirlo en medium mas que en mi página propia :v

Mobile

Tablet

Desktop

Comparto mi práctica con grid

<section class="profile-container">
            <div>
                <img src="https://media.istockphoto.com/photos/female-student-going-for-class-in-high-school-picture-id1328847023?b=1&k=20&m=1328847023&s=170667a&w=0&h=tEyMJ3IOTqXYG3e_4BEOXpJtz0qITQlf7LtgP8QcxzA=" alt="">
            </div>
            <div>
                <h2>¡Hola!</h2>
                <p>
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni unde pariatur nobis fugit commodi, ullam temporibus nulla natus itaque accusamus beatae voluptatibus sequi! Accusantium.
                </p>
            </div>
        </section>
        <section class="profile-projects-container">
            <div>
                <h4>Proyectos</h4>
            </div>
            <div class="profile-projects">
                <article>
                    <h5>Título</h5>
                    <p>
                        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Illum temporibus sapiente quae facere placeat minima esse fugit voluptatibus iusto numquam! Tempora voluptatibus alias autem, quae similique optio quas possimus pariatur sequi nobis nihil consequuntur aperiam quisquam?
                    </p>
                </article>
                <article>
                    <h5>Título</h5>
                    <p>
                        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consectetur ea placeat laboriosam. Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam architecto iste ducimus, pariatur tempore ea rem laborum, blanditiis deserunt ullam consequuntur illum accusamus numquam. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Minima maxime esse consequatur.
                    </p>
                </article>
                <article>
                    <h5>Título</h5>
                    <p>
                        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Illum temporibus sapiente quae facere placeat minima esse fugit voluptatibus iusto numquam! Tempora voluptatibus alias autem, quae similique optio quas possimus pariatur sequi nobis nihil consequuntur aperiam quisquam?
                        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Illum temporibus sapiente quae facere placeat minima esse fugit voluptatibus iusto numquam! Tempora voluptatibus alias autem, quae similique optio quas possimus pariatur sequi nobis nihil consequuntur aperiam quisquam?
                    </p>
                </article>
            </div>
        </section>

.profile-container {
    display: grid;
    grid-template-columns: 1.5fr 3fr 3fr 1.5fr;
    align-items: center;
    gap: 60px;
    background-color: #ddd;
    padding: 60px 0;
}

.profile-container div:nth-child(1){
    grid-column: 2;
}

.profile-container div:nth-child(2) {
    grid-column: 3;
}

.profile-container div img {
    width: 100%;
}

.profile-projects-container {
    display: grid;
    grid-template-columns: 1.5fr 6fr 1.5fr;
    justify-items: center;
    align-items: center;
    margin: 45px 0;
    /* grid-template: 20px; */
}


.profile-projects-container div:nth-child(1) {
    grid-column: 2;
    text-align: center;
    font-size: 20px;
    /* border-bottom: 1px solid #aaa; */
    padding-bottom: 12px;
    display: inline-block;
}

.profile-projects-container div:nth-child(2) {
    grid-column: 2;
}

.profile-projects {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    /* align-items: center; */
    border-top: 1px solid #999;
}

.profile-projects article h5 {
    font-size: 16px;
}

![](

Mi aporte al reto, siento que utilizando grid area puedes crear breakpoints con una gran facilidad.

Breakpoints

@media screen and (max-width: 768px) {
    
    
    .contact-main-container{
        
        grid-template-areas:    "contact-left"
                                "contact-right";
        
        
    }
    .profile-container{
      
        grid-template-areas:    "profile-img"
                                "profile-description" ;
       
}
    .grid-container{
        grid-template-areas:    "project-1"
                                "project-2"
                                "project-3"; 
}
}

Desktop

Smartphone
Tablet

Smartphone

Reto cumplido:

bien lo dijo el master, solo debíamos reutilizar código ahora lo personalizare a mi manera y terminare los blogs.

Reto cumplido mi bro

Con responsive desing y toda la cosa.

Cumpliendo el reto

Esta fue la más rápida que hice xd, ya estaban todos los estilos hechos asdlñasdkjñljasd

despues de esta clase ire directamente a cojer clases para saber cuales colores convinan mejor… pero fuera de lo demas me la estoy pasando bien siempre paro la clase y para intentar hacer el diseño por mi cuenta primero.

Reto: No puse una foto mía porque no tengo, seguí la del curso

Reto cumplido, hice algunas modificaciones del diseño inicial.

Listo, no hay nada mejor que la sensación de hacerlo solo

reto finalizado con unas ligeras modificaciones:

Completado!

Puliendo,puliendo. 😃

Reto Cumplido 💚
Como le batalle en esta pantalla jaja
Se me revolvió todo lo de Grid.
Creo que ire a repasar nuevamente el curso 😄

Me levante a las 7am para hacer el reto xD, asi cuando termino de trabajar sigo con el curso!!!

Reto listo: