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) ;```

Les comparto mi avance compañeros.

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

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:

Listo!

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.

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

![](

Lo hice solo usando display:grid para todas las partes de la maquetación, es recomendable hacer eso o combinarlo con otras propiedades como flexbox o los mismos display block ,block-inline , etc?

Les comparto mi página:

Como va quedando mi proyecto?

CSS solo del perfil

@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:[email protected];500;700&family=Roboto+Slab:[email protected];700&family=Roboto:[email protected];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;
}

Cambie la sección de Perfil por la de Portafolio.

Aquí está mi reto completado

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:

//- Aporte

Aquí el resultado de mi blog 😃

projects?

Listo!!, terminado el reto!

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

Listo!!!

Reto cumplido.

Cumpliendo el reto

Reto cumplido mi bro

Con responsive desing y toda la cosa.

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

Reto cumplido:

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

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.

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

Maquetado de la página de perfil.

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 finalizado con unas ligeras modificaciones:

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;
}

![](

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

Reto:

.
Repositorio en GitHub
.
Proyecto en GitHub Pages

Reto cumplido

Completado!

• proyectzzzzzzzzzz

reto cumplido 😃

Aquí les dejo mi diseño a ver que les parece, Un saludo desde Suiza
My-Profil

genial

Reto cumplido:

así quedo mi reto de crear el perfil;

estupendo 😄

![](

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

<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>```

.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;
}```

Reto terminado!!

Comparto mi proyecto en Github
https://github.com/ArzCorp/Blog

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

Aqui esta el mio

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

para recordar:

Projects ✅
proyects ❌

Puliendo,puliendo. 😃

aqui esta hecho el reto

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

Reto completado:

Reto cumplido.
Repositorio

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

Reto. 😋

A darle 😄

Saludos!

Este es mi resultado de la página del perfil. Pueden encontrar mi repositorio aquí y la página web aquí

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!

Vamos 😄

Asi va mi proyecto:

listo

RETO CUMPLIDO!

Continuemos. 😄

Acercándonos mas y mas y aprendiendo bastante

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!!!

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

Humildemente terminado XD para ver el proyecto entero click [aquí](file:///home/yanina/Blog/index.html)

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

Reto listo: