No tienes acceso a esta clase

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

Quedan menos de 24 hrs para aprender Ingl茅s, AI y m谩s a precio especial.

Antes: $249

Currency
$209
Suscr铆bete

Termina en:

0 D铆as
3 Hrs
11 Min
44 Seg

Blog page

13/26
Recursos

Aportes 127

Preguntas 13

Ordenar por:

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

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 + 鈫

  • 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! 馃槃

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

Les comparto mi resultado
Mobile

PC

Tablet

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

COmparto mi resultado en la primera parte del blogs menu

Reto cumplido

Estoy contentisimo porque a noche por fin acabe el proyecto casi por mi cuenta, tuve unos problemas con la propiedad grid y por eso tuve que investigar por mi cuenta como funciona y observar como la usaba el profe pero como pase mucho trabajo probando en la consola con esta propiedad realmente puedo decir que aunque us茅 un poco de ayuda del profe me puedo ir contento porque tengo mucho mas conocimiento sobre grid.

No sabia que podiamos usar grid, con las propiedades de modelo de caja osea:

1.justify-content
2.justify-items
3.justtify-self
4.alig-items

C贸mo qued贸 mi intento 馃檪

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:wght@400;700&family=Roboto:wght@400;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:wght@400;700&family=Roboto:wght@400;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:wght@400;700&family=Roboto:wght@400;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:wght@400;700&family=Roboto:wght@400;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

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.

Pueden Utilizar este texto como Prueba: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Euismod nisi porta lorem mollis aliquam ut porttitor. Ultrices dui sapien eget mi proin sed libero enim sed. Vestibulum rhoncus est pellentesque elit. Magnis dis parturient montes nascetur ridiculus mus mauris vitae ultricies.
Ya lo termine y con responsive, ademas lo realize con SASS y es de gran ayuda para la moduralizacion del css ya que al ser varias cosas es dificl entenderlo luego, pero con el nesting incluido del Sass mejor aun. Ademas del @extend para herencia de los estilos por secciones que como ven el article de "noticias" y de los items de "ultimos blogposts". Se ahorro todo ese codigo :v. ![](https://static.platzi.com/media/user_upload/image-2be36d67-6845-4941-92da-3669388b8eb1.jpg) ![](https://static.platzi.com/media/user_upload/image-3a5d2af5-c911-4832-844d-d003f844d7fa.jpg) ![](https://static.platzi.com/media/user_upload/image-87005644-ab2e-4d73-b252-899282210e93.jpg) ![](https://static.platzi.com/media/user_upload/image-b1a7de25-f7c8-4cdf-9a73-181b62e4035c.jpg)
Dejo mi emmet para los 6 divs: div\*6>h3+article>(figure>img)+p\*2+a etiqueta figure es opcional puede ser tambien: div\*6>h3+article>img+p\*2+a

asi voy

Cuando se dice no repitas tu codigo es no copiar y pegar?
tengo que escribir todo el codigo?
o a que se refieren ?

Espero respuestas gracias鈥 馃槂

  • Reto cumplido.

As铆 va quedando.

Diagramas de 谩rbol de los elementos HTML

Algo que me ayuda a estilizar los elementos html es construir 谩rboles l贸gicos de los elementos HTML y as铆 tener una visi贸n panor谩mica que me permita agregar estilos de afuera hacia adentro.

  • Diagrama de 谩rbol del <main>
    Secci贸n 1:

    .
    .
    Secci贸n 2:

    .
    .
    .
    .
  • Diagrama de 谩rbol del <footer>

Estoy intentando llevar este proyecto a mi manera ;_;

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!