No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Aprende todo un fin de semana sin pagar una suscripción 🔥

Aprende todo un fin de semana sin pagar una suscripción 🔥

Regístrate

Comienza en:

1D
13H
7M
7S

Blog page

13/26
Recursos

Aportes 116

Preguntas 11

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

o inicia sesión.

Ahi esta el Emmet de los 6 articulos.

div*6>h3+article>img+p*2+a

Copien borren la a vuelvanla a colocar y presionen Enter.
Se ahoran copiar y pegar 6 veces.
Funciona bien en VSCode. Creo que en sublime tienes que instalar emmet en el gestor de paquetes.

Así quedó cumpliendo el reto de hacerlo por mi cuenta:

Reto parte 1:

Lo hice practicando lo aprendido en CSS Grid Layout

el mio :'3 lo deje un tanto diferente al original XD

Con cada curso voy teniendo más soltura a la hora de realizar retos. 😄
aquí pueden ver el código si desean.

Para clonar o duplicar el codigo, lo marcas y presionas ALT + SHIFT + ↓

Reto completado.
Aqui les dejo el repo de mis avances: https://github.com/abulnes16/personal-blog

.

Si ustedes son de los que peleaban para tomarle fotos a un sitio completo les dejo esta extensión: https://chrome.google.com/webstore/detail/full-page-screen-capture/fdpohaocaechififmbbbbbknoalclacl

  • Don´t repeat yourself: No repitas tu código. Hay una librería llamada React, con ella puedes crear componentes que renderiza la sección html-css que desees donde lo desees.

Me emocione y me puse a maquetar y darle el diseño de una vez a toda la pagina de blogs.
Ahora ver las clases y ver que mejorar 😄

Mi reto terminado, estuve como 3 horas xD, ahora ire a dormir y mañana lo are desde el video!, vale la pena es esfuerzo! 😄

Les comparto mi resultado
Mobile

PC

Tablet

Reto cumplido

Me tomé muy a pecho el reto del profe y creo que terminé lo que él va a mostrar hasta la clase 19; sin embargo, quise asumir el reto y aquí les muestro… eso sí, optimizado para los tres dispositivos.

MOBILE

TABLET

DESKTOP

excelente la forma de seccionar yo lo haria un poco distinto pero en este punto busco seguir el curso para mejorar mi forma de hacer css

yo directamente hice las 4 paginas antes de continuar el curso.
Al terminar me di cuenta que podia usar variables y hacer cosas para no repetir tanto el codigo, igualmente me sirvio mucho para practicar los estilos y trate de seguir la metodologia BEM.
Asi quedaron mis paginas.



index

<!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="stylesheet" href="/styles/main.css">
    <link rel="stylesheet" href="/css/font/flaticon.css">
    <title>landing</title>
</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>
            <div class="nav-logo-container">
                <a href="/">
                    <img src="/assets/img/Logo-negro.png" alt="Logo" srcset="">
                </a> 
            </div>
            <div class="profile-link">
                <a href="/perfil.html">Sobre mi</a>
            </div>
        </nav>

    </header>

    <main class="home-main">
        <section class="main-text">
            <h2>Conoce las novedades y<br> noticias del mundo Tech</h2>
        </section>

        <button class="main-button"><a href="/blogs.html">entra ya!</a></button>
    </main>
</body>
</html>```


‘’’

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

html {
    font-size: 6.25%;
}

body {
    margin: 0px;
    padding: 0px;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    font-family: 'Roboto mono', monospace;
}

a {
    text-decoration: none;
    display: inline;
    color: black;
}

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-self: end;
    align-items: center;
    justify-content: space-between;
    margin-right: 50px;
}

header .icons span {
    color: white;
}

nav {
    background-color: white;
}

header nav {
    height: 90px;
    display: grid;
    grid-template-columns: 1fr 1fr;
}

header nav .nav-logo-container {
    margin-left: 40px;
}

nav .nav-logo-container img{
    width: 220px;
    margin-top: 10px;
}

header nav .profile-link {
    display: flex;
    align-items: center;
    justify-content: end;
    margin-right: 50px;
    font-size: 20rem;
}

header nav .profile-link a {
    color: black;
    border-bottom: 1px solid black;
}

.home-main {
    height: 80vh;
    background-image: url(/assets/img/Cover.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column ;
    align-items: center;
}


.home-main .main-text {
    margin-top: 20px;
    color: white;
    font-size: 24rem;
    text-align:center;
    letter-spacing: 5rem;
}

.home-main .main-button {
    margin-top: 30px;
    background-color: #47cfac;
    height: 40px;
    width: 120px;
    border-radius: 5px;
    font-size: 18rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.home-main .main-button a {
    font-weight: 700;
    font-size: 18rem;
} 

blogs

<!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="stylesheet" href="/css/font/flaticon.css">
    <link rel="stylesheet" href="/styles/blogs.css">
    <title>Noticias</title>
</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>
            <div class="nav-logo-container">
                <a href="/">
                    <img src="/assets/img/Logo-negro.png" alt="Logo" srcset="">
                </a> 
            </div>
            <div class="profile-link">
                <a href="/perfil.html">Sobre mi</a>
            </div>
        </nav>
    </header>

    <main>
        <section class="noticias">
            <div class="noticias-photo">
                <h2 class="noticias-photo_title">
                    Noticias
                </h2>
                <picture class="noticias-photo_photo">
                    <img src="/assets/img/main-news-img.png" alt="foto de noticias">
                </picture>
            </div>
    
            <div class="noticias-text">
                <h1 class="noticias-text_tittle">Titulo del Blog</h1>
                <p class="noticias-text_text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat maiores accusamus id odit inventore earum saepe? Deserunt sunt pariatur est odit doloremque, unde, dignissimos facere iusto ratione alias vel! Optio?</p>
                <a class="noticias-text_button" href="/blogPost.html">Leer mas</a>
            </div>
        </section>
        
        <section class="articulos">
            <section class="articulos-container">
                <p class="articulos-container_title">últimos Blogpost</p>
                <div class="articulos-container_posts">
                    <article class="post-articles">
                        <img class="posts-articles_img" src="/assets/img/post-1.png" alt="imagen">
                        <p class="posts-articles_t">Titulo del Blogpost</p>
                        <p class="posts-articles_p">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptate perspiciatis consectetur, repellat fuga voluptatibus molestias.</p>
                        <a class="posts-articles_a" href="/blogPost.html">Leer mas</a>
                    </article>
                    
                    <article class="post-articles">
                        <img class="posts-articles_img" src="/assets/img/post-2.png" alt="imagen">
                        <p class="posts-articles_t">Titulo del Blogpost</p>
                        <p class="posts-articles_p">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptate perspiciatis consectetur, repellat fuga voluptatibus molestias.</p>
                        <a class="posts-articles_a" href="/blogPost.html">Leer mas</a>
                    </article>
                    
                    <article class="post-articles">
                        <img class="posts-articles_img" src="/assets/img/post-3.png" alt="imagen">
                        <p class="posts-articles_t">Titulo del Blogpost</p>
                        <p class="posts-articles_p">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptate perspiciatis consectetur, repellat fuga voluptatibus molestias.</p>
                        <a class="posts-articles_a" href="/blogPost.html">Leer mas</a>
                    </article>

                    <article class="post-articles">
                        <img class="posts-articles_img" src="/assets/img/post-1.png" alt="imagen">
                        <p class="posts-articles_t">Titulo del Blogpost</p>
                        <p class="posts-articles_p">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptate perspiciatis consectetur, repellat fuga voluptatibus molestias.</p>
                        <a class="posts-articles_a" href="/blogPost.html">Leer mas</a>
                    </article>
                    
                    <article class="post-articles">
                        <img class="posts-articles_img" src="/assets/img/post-2.png" alt="imagen">
                        <p class="posts-articles_t">Titulo del Blogpost</p>
                        <p class="posts-articles_p">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptate perspiciatis consectetur, repellat fuga voluptatibus molestias.</p>
                        <a class="posts-articles_a" href="/blogPost.html">Leer mas</a>
                    </article>
                    
                    <article class="post-articles">
                        <img class="posts-articles_img" src="/assets/img/post-3.png" alt="imagen">
                        <p class="posts-articles_t">Titulo del Blogpost</p>
                        <p class="posts-articles_p">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptate perspiciatis consectetur, repellat fuga voluptatibus molestias.</p>
                        <a class="posts-articles_a" href="/blogPost.html">Leer mas</a>
                    </article>
                </div>
            </section>



        </section>
    </main>

    
    <footer>
        <section class="footerC">
            <div class="footerC-colorBar"></div>
            <div  class="footerc-box">
                <p class="box-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
            </div>
        </section>
        

    </footer>
</body>
</html>
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono&family=Roboto+Slab:[email protected];700&family=Roboto:[email protected];500;700;900&display=swap');

html {
    font-size: 62.5%;
}

body {
    margin: 0px;
    padding: 0px;
    font-family: 'Roboto mono', monospace;
}

a {
    text-decoration: none;
    display: inline;
    color: black;
}
/*estilos 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-self: end;
    align-items: center;
    justify-content: space-between;
    margin-right: 50px;
}

header .icons span {
    color: white;
}

nav {
    background-color: white;
}

header nav {
    height: 90px;
    display: grid;
    grid-template-columns: 1fr 1fr;
}

header nav .nav-logo-container {
    margin-left: 40px;
}

nav .nav-logo-container img{
    width: 220px;
    margin-top: 10px;
}

header nav .profile-link {
    display: flex;
    align-items: center;
    justify-content: end;
    margin-right: 50px;
    font-size: 2.4rem;
    font-weight: bold;
}

header nav .profile-link a {
    color: black;
    border-bottom: 1px solid black;
}
/*final del header*/

/*estilos main*/

.noticias {
    background-color: #e6e9ed;
    width: 100%;
    height: 70vh;
    padding-top: 0px;
    display: flex;
    justify-content: center;
}

.noticias .noticias-photo_title {
    font-size: 2.4rem;
    font-weight: 700;
}

.noticias .noticias-photo {
    width: 40vw;
    margin-right: 150px;
}

.noticias .noticias-photo .noticias-photo_photo img{
    width: 100%;
}

.noticias .noticias-text {
    width: 30vw;

}

.noticias .noticias-text .noticias-text_tittle {
    padding-top: 30px;
    font-size: 4rem;
}

.noticias .noticias-text .noticias-text_text {
    padding-top: 0px;
    font-weight: bold;
    font-size: 2rem;
    padding-top: 0;
    margin-bottom: 40px;
}

.noticias .noticias-text .noticias-text_button{
    font-size: 1.8rem;
    font-weight: 700;
    border: 1px solid #48cfad;
    padding: 15px;
}


.articulos {
    width: 100%;
    height: auto;
    margin-bottom: 50px;
    display: grid;
    grid-template-columns: 1fr 8fr 1fr;
    background-color: white;
}

.articulos .articulos-container {
    width: 100%;
    grid-column-start: 2;
    grid-column-end: 3;
    display: flex;
    align-content: center;
    flex-flow: column wrap;

}

.articulos .articulos-container .articulos-container_title {
    width: 100%;
    font-size: 2.5rem;
    font-weight: 900;
    text-align: center;
    letter-spacing: 3px;
    padding-bottom: 30px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.274);
}

.articulos .articulos-container .articulos-container_posts {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    height: auto;
}
.articulos-container_posts .post-articles{
    margin-top: 50px;
    width: 30%;
    height: auto;
}

.articulos-container_posts .post-articles .posts-articles_img {
    width: 100%;
}

.articulos-container_posts .post-articles p {
    font-size: 2rem;
    font-weight: bold;
    margin-bottom: 40px;
}

.articulos-container_posts .post-articles a {
    border: 1px solid #47cfac;
    font-size: 1.6rem;
    font-weight: bold;
    padding: 10px 20px;
}

/*final del main*/

/*estilos foooter*/
.footerC {
    display: grid;
    font-size: 1.6rem;
    grid-template-rows: 1fr 3fr;
    background-color: #48cfad;
}

.footerC .footerc-box {
    background-color: #22272d;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
}

‘’

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

html {
    font-size: 62.5%;
}

body {
    margin: 0px;
    padding: 0px;
    font-family: 'Roboto mono', monospace;
}

a {
    text-decoration: none;
    display: inline;
    color: black;
}
/*estilos 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-self: end;
    align-items: center;
    justify-content: space-between;
    margin-right: 50px;
}

header .icons span {
    color: white;
}

nav {
    background-color: white;
}

header nav {
    height: 90px;
    display: grid;
    grid-template-columns: 1fr 1fr;
}

header nav .nav-logo-container {
    margin-left: 40px;
}

nav .nav-logo-container img{
    width: 220px;
    margin-top: 10px;
}

header nav .profile-link {
    display: flex;
    align-items: center;
    justify-content: end;
    margin-right: 50px;
    font-size: 2.4rem;
    font-weight: bold;
}

header nav .profile-link a {
    color: black;
    border-bottom: 1px solid black;
}
/*final del header*/

/*estilos main*/

.postImgCon {
    display: flex;
    justify-self: center;
    margin: 0 auto;
    width: 95vw;
    height: auto ;
    flex-flow: column wrap;
}

.postImgCon img {
    width: 100%;
}

.postImgCon p {
    font-size: 2rem;
    font-weight:900;
    margin-top: 100px;
    margin-left: 9%;
}

.post {
    width: 80%;
    height: auto;
    display: flex;
    flex-flow: column wrap;
    margin: 0 auto;
    border-top: 1px solid #22272d69;
}

.post .post-title {
    font-size: 3rem;
    font-weight: 900;
}

.post .post-text {
    font-size: 1.6rem;
    font-weight: 700;
}

/*final del main*/

/*estilos foooter*/

.contactMe {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background-color: #e6e9ed;
    height: 30vh;
    justify-items: center;

}

.contactMe .contact {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin-top: 5%;
}

.contactMe .contact .contact-imgContainer {
    display: flex;
    justify-content: center;
    margin-right: 10px;
}

.contactMe .contact img {
    height: 100px;
}

.contactMe .contact .contact-textContainer {
    margin-left: -70px;
}

.contactMe .contact a {
    font-size: 2rem;
    font-weight: 900;
    border-bottom: 2px solid black;
}

.contactMe .contact p {
    font-size: 2rem;
    font-weight: 900;
}

.footerC {
    display: grid;
    font-size: 1.6rem;
    grid-template-rows: 1fr 3fr;
    background-color: #48cfad;
}

.footerC .footerc-box {
    background-color: #22272d;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
}

post

<!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="stylesheet" href="/css/font/flaticon.css">
    <link rel="stylesheet" href="/styles/blogPost.css">
    <title>Lo Ultimo en Tech</title>
</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>
            <div class="nav-logo-container">
                <a href="/">
                    <img src="/assets/img/Logo-negro.png" alt="Logo" srcset="">
                </a> 
            </div>
            <div class="profile-link">
                <a href="/perfil.html">Sobre mi</a>
            </div>
        </nav>
    </header>

    <main>
     <section class="postImgCon">
         <img src="/assets/img/main-news-img.png" alt="Imagen principal del post">
         <p>Noticias</p>
     </section>  
     
     <section class="post">
         <p class="post-title">Titulo Del blogpost</p>
         <p class="post-text">
             Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptatem mollitia harum quibusdam ipsam iusto voluptatibus. Reprehenderit quos nisi rem fuga repellendus omnis! Laudantium officia ut distinctio, consectetur optio tenetur maiores. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Consequatur neque atque perspiciatis dicta doloremque eligendi repudiandae tenetur sunt numquam, provident eius iusto natus itaque fugiat labore magni accusamus magnam doloribus.quibusdam ipsam iusto voluptatibus. Reprehenderit quos nisi rem fuga repellendus omnis! Laudantium officia ut distinctio, consectetur optio tenetur maiores. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Consequatur neque atque perspiciatis dicta doloremque eligendi repudiandae tenetur sunt numquam, provident eius iusto natus itaque fugiat labore magni accusamus magnam doloribus.quibusdam ipsam iusto voluptatibus. Reprehenderit quos nisi rem fuga repellendus omnis! Laudantium officia ut distinctio, consectetur optio tenetur maiores. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Consequatur neque atque perspiciatis dicta doloremque eligendi repudiandae tenetur sunt numquam, provident eius iusto natus itaque fugiat labore magni accusamus magnam doloribus.quibusdam ipsam iusto voluptatibus. Reprehenderit quos nisi rem fuga repellendus omnis! Laudantium officia ut distinctio, consectetur optio tenetur maiores. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Consequatur neque atque perspiciatis dicta doloremque eligendi repudiandae tenetur sunt numquam, provident eius iusto natus itaque fugiat labore magni accusamus magnam doloribus. <br> <br>

             quibusdam ipsam iusto voluptatibus. Reprehenderit quos nisi rem fuga repellendus omnis! Laudantium officia ut distinctio, consectetur optio tenetur maiores. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Consequatur neque atque perspiciatis dicta doloremque eligendi repudiandae tenetur sunt numquam, provident eius iusto natus itaque fugiat labore magni accusamus magnam doloribus. <br><br>

             quibusdam ipsam iusto voluptatibus. Reprehenderit quos nisi rem fuga repellendus omnis! Laudantium officia ut distinctio, consectetur optio tenetur maiores. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Consequatur neque atque perspiciatis dicta doloremque eligendi repudiandae tenetur sunt numquam, provident eius iusto natus itaque fugiat labore magni accusamus magnam doloribus.quibusdam ipsam iusto voluptatibus. Reprehenderit quos nisi rem fuga repellendus omnis! Laudantium officia ut distinctio, consectetur optio tenetur maiores. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Consequatur neque atque perspiciatis dicta doloremque eligendi repudiandae tenetur sunt numquam, provident eius iusto natus itaque fugiat labore magni accusamus magnam doloribus.
         </p>

     </section>
    </main>

    <aside class="contactMe">

        <div class="contact">
            <div class="contact-imgContainer">
                <img src="/assets/img/013-newsletter.png" alt="013-newsletter">
            </div>
            <div class="contact-textContainer">
                <a href="#">contacto</a>
                <p>Lorem ipsum, dolor sit amet <br> consectetur adipisicing elit.</p>
            </div>
        </div>

        <div class="contact">
            <div class="contact-imgContainer">
                <img src="/assets/img/006-like.png" alt="like">
            </div>
            <div class="contact-textContainer">
                <a href="#">Escribe</a>
                <p>Lorem ipsum, dolor sit amet <br> consectetur adipisicing elit.</p>
            </div>
        </div>
    </aside>
    <footer>
        <section class="footerC">
            <div class="footerC-colorBar"></div>
            <div  class="footerc-box">
                <p class="box-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
            </div>
        </section>
        

    </footer>
</body>
</html>

perfil

<!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="stylesheet" href="/css/font/flaticon.css">
    <link rel="stylesheet" href="/styles/perfil.css">
    <title>Perfil</title>
</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>
            <div class="nav-logo-container">
                <a href="/">
                    <img src="/assets/img/Logo-negro.png" alt="Logo" srcset="">
                </a> 
            </div>
            <div class="profile-link">
                <a href="/perfil.html">Sobre mi</a>
            </div>
        </nav>
    </header>

    <main>

        <section class="profile">
            <div class="profile-container">
                <img class="profile-container_img" src="/assets/img/perfil.jpeg" alt="">
                <div class="profile-container_TC">
                    <p class="profile-title">Hola!</p>
                    <p class="profile-text">Soy emanuel urquiola estoy aprendiendo programacion en Platzi, quiero especializarme en bases de datos. Amo las pringles y trabajar en sitios frios para estar bien abrigado 😂.</p>
                </div>
            </div>
        </section>
        
        <section class="articulos">
            <section class="articulos-container">
                <p class="articulos-container_title">Proyectos</p>
                <div class="articulos-container_posts">
                    <article class="post-articles">

                        <p class="posts-articles_t">Titulo del proyecto</p>
                        <p class="posts-articles_p">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptate perspiciatis consectetur, repellat fuga voluptatibus molestias.</p>
                        <a class="posts-articles_a" href="/blogPost.html">Leer mas</a>
                    </article>
                    
                    <article class="post-articles">
                        <p class="posts-articles_t">Titulo del proyecto</p>
                        <p class="posts-articles_p">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptate perspiciatis consectetur, repellat fuga voluptatibus molestias.</p>
                        <a class="posts-articles_a" href="/blogPost.html">Leer mas</a>
                    </article>
                    
                    <article class="post-articles">
                        <p class="posts-articles_t">Titulo del proyecto</p>
                        <p class="posts-articles_p">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptate perspiciatis consectetur, repellat fuga voluptatibus molestias.</p>
                        <a class="posts-articles_a" href="/blogPost.html">Leer mas</a>
                    </article>
                </div>
            </section>

    </main>

    <aside class="contactMe">

        <div class="contact">
            <div class="contact-imgContainer">
                <img src="/assets/img/013-newsletter.png" alt="013-newsletter">
            </div>
            <div class="contact-textContainer">
                <a href="#">Contacto</a>
                <p>Lorem ipsum, dolor sit amet <br> consectetur adipisicing elit.</p>
            </div>
        </div>

        <div class="contact">
            <div class="contact-imgContainer">
                <img src="/assets/img/006-like.png" alt="like">
            </div>
            <div class="contact-textContainer">
                <a href="#">Escribe</a>
                <p>Lorem ipsum, dolor sit amet <br> consectetur adipisicing elit.</p>
            </div>
        </div>
    </aside>
    <footer>
        <section class="footerC">
            <div class="footerC-colorBar"></div>
            <div  class="footerc-box">
                <p class="box-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
            </div>
        </section>
        

    </footer>
</body>
</html> 
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono&family=Roboto+Slab:[email protected];700&family=Roboto:[email protected];500;700;900&display=swap');

html {
    font-size: 62.5%;
}

body {
    margin: 0px;
    padding: 0px;
    font-family: 'Roboto mono', monospace;
}

a {
    text-decoration: none;
    display: inline;
    color: black;
}
/*estilos 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-self: end;
    align-items: center;
    justify-content: space-between;
    margin-right: 50px;
}

header .icons span {
    color: white;
}

nav {
    background-color: white;
}

header nav {
    height: 90px;
    display: grid;
    grid-template-columns: 1fr 1fr;
}

header nav .nav-logo-container {
    margin-left: 40px;
}

nav .nav-logo-container img{
    width: 220px;
    margin-top: 10px;
}

header nav .profile-link {
    display: flex;
    align-items: center;
    justify-content: end;
    margin-right: 50px;
    font-size: 2.4rem;
    font-weight: bold;
}

header nav .profile-link a {
    color: black;
    border-bottom: 1px solid black;
}
/*final del header*/

/*estilos main*/

.profile {
    width: 100%;
    height: auto;
    display: grid;
    grid-template-columns: 1fr 8fr 1fr;
    background-color: #e6e9ed;
}

.profile .profile-container {
    grid-column-start: 2;
    display: flex;
    flex-wrap: wrap;
    padding: 50px 0;
}

.profile .profile-container img {
    width: 19%;
    border-radius: 15px;
}

.profile .profile-container .profile-container_TC {
    width: 75%;
    margin-left: 6%;
}

.profile .profile-container .profile-container_TC .profile-title{
    font-size: 2.4rem;
    font-weight: 700;
}

.profile .profile-container .profile-container_TC .profile-text{
    font-size: 1.6rem;
    font-weight: 700;
}


.articulos {
    width: 100%;
    height: auto;
    margin-bottom: 50px;
    display: grid;
    grid-template-columns: 1fr 8fr 1fr;
    background-color: white;
}

.articulos .articulos-container {
    width: 100%;
    grid-column-start: 2;
    grid-column-end: 3;
    display: flex;
    align-content: center;
    flex-flow: column wrap;

}

.articulos .articulos-container .articulos-container_title {
    width: 100%;
    font-size: 2.5rem;
    font-weight: 900;
    text-align: center;
    letter-spacing: 3px;
    padding-bottom: 30px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.274);
}

.articulos .articulos-container .articulos-container_posts {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    height: auto;
}
.articulos-container_posts .post-articles{
    margin-top: 50px;
    width: 30%;
    height: auto;
}

.articulos-container_posts .post-articles .posts-articles_img {
    width: 100%;
}

.articulos-container_posts .post-articles p {
    font-size: 2rem;
    font-weight: bold;
    margin-bottom: 40px;
}

.articulos-container_posts .post-articles a {
    border: 1px solid #47cfac;
    font-size: 1.6rem;
    font-weight: bold;
    padding: 10px 20px;
}
/*final del main*/

/*estilos foooter*/

.contactMe {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background-color: #e6e9ed;
    height: 30vh;
    justify-items: center;

}

.contactMe .contact {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin-top: 5%;
}

.contactMe .contact .contact-imgContainer {
    display: flex;
    justify-content: center;
    margin-right: 10px;
}

.contactMe .contact img {
    height: 100px;
}

.contactMe .contact .contact-textContainer {
    margin-left: -70px;
}

.contactMe .contact a {
    font-size: 2rem;
    font-weight: 900;
    border-bottom: 2px solid black;
}

.contactMe .contact p {
    font-size: 2rem;
    font-weight: 900;
}

.footerC {
    display: grid;
    font-size: 1.6rem;
    grid-template-rows: 1fr 3fr;
    background-color: #48cfad;
}

.footerC .footerc-box {
    background-color: #22272d;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
}

Me anime gracias a los demas compañeros a realizar la pagina de un jalon. Asi quedo:

Mira mamá ya puedo hacerlo solo 😃

lo hice todo sin ver el video vamos a ver cuantas correcciones hago

COmparto mi resultado en la primera parte del blogs menu

Reto cumplido. Le di mi propio estilo. Al principio lo vi como un error en la parte del post mas importante o ultimo pero me agrado no se que les parece a ustedes.

Terminado

Asi ha quedado mi versión, veré las siguientes clases para ver que puedo mejorar 😃

Resultado del reto:

Recuerda siempre estar SECO, o mejor dicho DRY, DONT REPEAT YOURSELF

Mi reto

Yo lo hice con css grid xD

Pude resolver el desafio, las buenas practicas que aprendi del profesor degranda realmente me han ayudado muchisimo a mejorar mi trabajo en css.

Creo que ha sido la primera vez que consigo cumplir un reto sin complicaciones, sin errores, sabiendo lo que estaba haciendo y sin revisar tanto código anterior o de otros. Cada vez mejores skills. ¡Excelente profesor! Me hizo sentir orgulloso de mi código

Ahi vamos con mi progreso

Aquí mi versión del proyecto!
(Si bien no quedó igual y le faltó estilos al preview del blogpost, pude practicar CSS Grid y estoy satisfecho con el resultado! 😄)

Muy práctico el curso. Recordar que, es un curso para mejorar (html, css), y practicar.

Cómo quedó mi intento 🙂

RETO CUMPLIDO
.

Mobile desing

Reto cumplido casi quedo loco pero lo logre, ahora a ver las clases para ver como hacer el codigo mas entendible.


y aqui os dejo el link
https://sartheghost.github.io/BLOG-POST/

div*6>h3{titulo de la primera seccion}+article>img+p{titulo del articulo}+p{contenido del parrafo}+a

Mobile version

Desktop Version:

PD: No cuesta nada si prácticas mucho rato, recomiendo los vídeos de Jordan Alexander en Youtube.

Antes de comenzar…
Aquí mi intento Gg 💆‍♂️

Uno quisiera que todos los cursos los dictara el profesor degranda, se le entiende todo lo que explica, ¡Excelente docente!

Completando el reto de hacerlo por mi cuenta:

Nailed it! ✨💜
![](

Aqui lo hice por mi cuenta por el reto del profesor.



Código de la clase:

<main>
        <!-- PRINCIPAL BLOG -->
        <section>
            <div>
                <h3>Lorem, ipsum dolor sit amet consectetur adipisicing elit.</h3>
                <div>
                    <img src="" alt="">
                </div>
            </div>
            <div>
                <h2></h2>
                <p></p>
                <a href=""></a>
            </div>
        </section>
        <!-- ALL BLOGS -->
        <section>
            <div>
                <h3></h3>

                <article>
                    <img src="" alt="">
                    <p></p>
                    <p></p>
                    <a href=""></a>
                </article>

                <article>
                    <img src="" alt="">
                    <p></p>
                    <p></p>
                    <a href=""></a>
                </article>

                <article>
                    <img src="" alt="">
                    <p></p>
                    <p></p>
                    <a href=""></a>
                </article>

                <article>
                    <img src="" alt="">
                    <p></p>
                    <p></p>
                    <a href=""></a>
                </article>

                <article>
                    <img src="" alt="">
                    <p></p>
                    <p></p>
                    <a href=""></a>
                </article>

                <article>
                    <img src="" alt="">
                    <p></p>
                    <p></p>
                    <a href=""></a>
                </article>

            </div>
        </section>
    </main>
    <footer>
        <p></p>
    </footer>
</body>
</html>

Hola comunidad!
Aquí mi diseño antes de ver la resolución de Diego.

Saludos!

Quise adelantarme un poco con el diseño y así me quedó:

Challenge Done! everything on my own!

El intento que hice por mi cuenta antes de ver la clase
mobile

tablet

desktop

Terminado

Reto

Estoy llevando este curso aplicando los preprocesadores del curso anterior, realmente es más cómodo y organizado solamente hacer un **include **y tener todo el componente de header, **footer **o lo que tengas modularizado.

Los que usamos VScode tenemos la opcion de escribir:

 div>h3+article*6>img+p*2+a

y nos va a generar automaticamente todo el texto del div para no tener que estar copiando las 6 veces.

Reto completo.

Reto completado antes de ver la clase, lo realice según el diseño que decidí implementar.

Buena clase!

Trate de hacer el primer section por mi cuenta Imagen tarea

Practicando con Emmet
div > h3 + article * 6 > img + p * 2 + a

resultado del reto:

gran clase

excelente

Reto Cumplido !

Otro tip, para ponerle el nombre de clase a un <div> de manera rapida es .nombredelaclase + tab
ejem: .container
Resultado:

<div class="container">
</div>

Es la forma rapida para crear <div> con su nombre de clase

Lo logre jaja mucho CSS Grid:


Reto cumplido! 😄

Segunda parte:

Que emocion. 😃

el diseño de este proyecto me recuerda a la de Arduino jeje

a estilizar 🖌

Va quedando super nuestro blog!

Genial

A darle con todo.

porfin me salio algo wiiiiiiiiiii!!!

reto completado

Listo!!

Post principal.

listo el mio

Que hermoso como maqueta en el Html… me imagino que eso se gana con la experiencia…

Intenté hacerla por mi cuenta y este fue el resultado 😃

Excelente clase

Por buenas prácticas no debió meter el botón dentro de una etiqueta semántica de <button></button>?

Excelente clase!

parte 1

parte 2

parte 3

Reto cumplido!!

Poco a poco ya se visualiza la maquetación, sin la necesidad de guía del instructor!! 😃

Esta es mi solución al reto y este mi repositorio.

😃

Reto
![](

Vamos super bien, gracias! 😄

¡Reto completado!

Necesitaba esta clase, tuve varios inconvenientes con el primer reto que aunque los solucioné, no estaban claros del todo. Gracias.

vamos mejorando!! 😭😭

Challenge completed!! You can see my code here
(The black borders in the images are from google dev tools when I snipped the screen)

Reto completado


Excelente proceso ahí vamos 👍 tenía bastante que no usaba html y css y este curso me sirve para repasar ambos.

Excelente ya tenemos la estructura básica para nuestra página web blogs.

Don’t repeat yourself: ¿Como podemos realizar para no repetir el código del header?, recuerdo que en asp.net hay algo que se llama master page, no se si se pueda hacer algo similar.

Sigo sin convencerme de este curso practico, mucho html innecesario, comentarios sin sentido, el profesor le pone onda, pero no parece tener claro que hacer o no pensó bien la solución de antemano. Estoy hablando faltando varias clases más, espero encontrarme algo mejor en futuras clases.

Excelente clase, continuemos! 😄

div>h3+article.post-container*6>img+p*2+a

Buena clase