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鈥檛 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