No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Maquetando perfil HTML

23/26
Recursos

Aportes 107

Preguntas 2

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

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馃槅![](

Les comparto mi avance compa帽eros.

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:

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:

![](

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?

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

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.

en mi caso para la primera seccion lo hice con grid y defini un div para la imagen y una tag article para el titulo y el parrafo

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

Soluci贸n a segundo reto:

馃巿Repo

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

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 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 鈥榙iv鈥, 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!!!