No tienes acceso a esta clase

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

Agregando imágenes al header

8/26
Recursos

Aportes 380

Preguntas 17

Ordenar por:

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

Así me fue quedando:

Aquí mi versión.

Me demoré como medio día jaja pero lo logré
(

Estoy variando el tema del blog :3, comparto como quedó

Asi me quedo mi versión hecha con MobileFirst para que se adapte de la mejor forma posible a todos los usuarios 😃

MOVIL

TABLET

DESKTOP

PC

Mobile

Reto completado 😊

Html

<main>
        <div class="main-container">
            <h2 class="main-container-title">Conoce las novedades y noticias del Mundo Tech</h2>
            <div class="main-container-buttom">
                <a href="">Entra ya!</a>
            </div>
        </div>
    </main>

css

main {
    height: 100%;
    background-image: url(./Cover.png);
    background-size: cover;
    background-position: center;
    display: flex;
    justify-content: center;
}
main .main-container {
    text-align: center;
    margin-top: 5.7rem;
    font-family: monospace;
}
main .main-container .main-container-title {
    color: white;
    letter-spacing: 10px;
    font-size: 40px;
    width: 50rem;
}
main .main-container .main-container-buttom {
    height: 40px;
    background-color: #47cfac;
    width: 100px;
    margin: 100px auto;
    display: grid;
}
main .main-container .main-container-buttom a {
    font-size: 15px;
    margin: auto;
    font-weight: bold;
}


Aquí pueden ver cómo me quedó el reto. 😃)

Mi aporte:

Este fue mi intento un poco más personalizado.

Así quedó con mi estilo:

![](

Aún me queda grande el tema de Grid y me demoré un poco, pero como dice un dicho: “es trabajo honrado” jaja.

MOBILE

TABLET

reto completado y personalizado!

![](

Necesito tomar un curso de diseño urgente xD

¡Listo!

reto terminado!

aca le dejo mi resultado

mobile

![](

table

![](

laptop

![](

Mi codigo del reto

HTML

<!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="./main.css">
    <link rel="stylesheet" href="./css/font/flaticon.css">
    <title>Mi blog</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-003-whatsapp"></span></a>
                <a href="/"><span class="flaticon-010-linkedin"></span></a>
                <a href="/"><span class="flaticon-008-youtube"></span></a>
            </div>
        </section>
        <nav>
            <section class="nav-logo__container">
                <a href=""><img src="./assets/img/Logo-negro.png" alt="logo de mi blog"></a>
            </section>
            <section class="profile-link">
                <a href="./perfil.html">Sobre mi</a>
            </section>
        </nav>
    </header>
    <main>
        <section class="portada">
            <img src="./assets/img/Cover.png" alt="">
            <p>Conoce las novedades y <br> noticias del mundo Tech</p>
            <button>Entra ya!</button>
        </section>
    </main>
</body>
</html>

CSS

body {
    margin: 0;
    padding: 0;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
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-items: flex-end;
    align-items: center;
    justify-content: space-between;
    justify-self: end;
    margin-right: 50px;
}
header .icons span {
    color: white;
}
nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    height: 90px;

}
nav .nav-logo__container {
    margin-left: 50px;
}
nav .nav-logo__container img {
    width: 220px;
    margin-top: 10px;
}
nav .profile-link {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-right: 50px;
}
nav .profile-link a {
    color: black;
    border-bottom: 1px solid black;;
}


.portada {
    display: flex;
    justify-content: center;
    position: relative;
}
.portada p {
    position: absolute;
    top: 32px;
    color: white;
    font-size: 46px;
    letter-spacing: 10px;
    text-align: center;
    
}
main .portada img {
    width: 100vw;
    height: 98vh;
}
button {
    position: absolute;
    top: 280px;
    width: 110px;
    height: 40px;
    background-color: #47cfac;
    font-weight: bold;
    font-size: 18px;
} 

Un aporte:

A la par de este curso decidi practicar mobile first y usar el preprocesador sass. Todavia no me convence la paleta de colores pero asi va quedando:

Mi versión:

Me demore 8 horas maquetando todas las paginas del curso aquí dejo mis resultados.



Me siento muy orgulloso de todo lo que e aprendido en Platzi.

Reto cumplido

Reto Cumplido!!!
retoBLOG.PNG

Debo confesar que se me dificulto mucho organizar el tamaño de la imagen.

![](

Imagen reto

Reto terminado:

para los que tienen un background black y se pierde el color del Logo-negro.png, en las propiedades del img, puedes utilizar esta instrucción;

filter: invert(100%);

Lo que hace que cambie el color del logo a blanco

Mi aporte

Reto logrado!!! (ignoren a Mihawk jeje)

Lo hice responsive 😀
Desktop:

Tablet:

Mobile:

Asi esta quedando mi pagina principal del blog

Este es la portada de mi blog personal con base a lo que he aprendido:

Aqui mi reto, lo modifique un poco a mi gusto.
![](

Iniciando la Pyme!!

Que tal campeon, buen dia,

comparto mi avance…

No le innové mucho como los demás compañeros pero me resultó fácil hacerlo. La verdad es que usar Grid y Flexbox te da un super poder 😃

Mi reto de la maquetación del resto del main
![](

personalizado:

Así me va quedando 😀😀

HTML

    <main>
        <section class="img-container">
                <h1>Conoce las novedades y noticias de Front-case</h1>
                <span class="button">Entra Ya!</span>
        </section>
    </main>

SCSS

.img-container{
    width: 100vw;
    height: 85vh;
    background-image: url("../assets/img/funda_wallpaper.png");
    background-repeat: no-repeat, repeat;
    background-position: center;
    background-size: cover;
    display: grid;
    grid-template-rows: 1fr 1fr 1fr;
    justify-content: center;
    h1{
        max-width: 750px;
        grid-row: 1 / 2;
        align-self: flex-end;
        font-size: 2.8rem;
        text-align: center;
        color:$colorOscuro;
    }
    span{
        width: 150px;
        height: 50px;
        display: flex;
        align-items: center;
        align-self: flex-end;
        justify-content: center;
        justify-self: center;
        font-size: 1.4rem;
        font-weight: 600;
        background-color: $colorClaro;
        color: $colorOscuro;
    }
}

Hola a todos, una sugerencia: En css existe una propiedad para el subrayado, en vez de border-bottom, podrías poner:

 text-decoration: underline; 

¡Explora los diferentes valores!

recomiendo utilizar repeat(), el día de mañana si son mas de dos columnas, por ejemplo 5,

grid-template-columns: 1fr 1fr 1fr 1fr 1fr; 

Puedes escribir de esta forma:

grid-template-columns: repeat(5, 1fr);

Listo aqui esta mi reto terminado!!

😃

Vaya que me complico este reto… Hasta que no leí código ajeno, no vi la posibilidad de poner la imagen de background de todo el body.

Les muestro mi version 😄
.

Así va quedando:
Mobile:

Tablet:

Desktop:

Mi versión!!! 😃

aqui mi reto de la clase 😄
me esforse mucho

Reto de la clase

He aprendido 2 nuevas propiedades css:

  1. word-spacing
  2. letter spacing

las cuales me sirvieron para el título del HOME.

Así va quedando mi blog!

Hay que seguir practicando!! 🤩🤩

Así quedó el mío, mobile y web.

Reto cumplido para los amantes de los videojuegos

Qué tal?

asi quedo el mio, no añadi la foto, Solo agregue un fondo de gradiente infinito con css y animation. estoy tomando los cursos de ingles, asi que la hare en ingles en base a mi aprendizaje de ingles.

Creo que necesito seriamente tomar un curso, aunque sea basico sobre diseño de interfaces, no puedo creer que me haya tardado horas en hacer un diseño tan sencillo.
.
Desktop:
.
Mobile:

body{
    margin: 0;
    padding: 0;
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
}

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

header{
    width: 100%;
    height: 140px;
    display: grid;
    grid-template-rows: 1fr 2fr;
}

header .header-icons-container{
    display: grid;
    background-color: #47cfac;
    justify-content: end;
}

header .header-icons-container .icons{
    width: 300px;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-right: 50px;
}

header .icons span{
    color: white;
}

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

nav .nav-logo-contain{
    margin-left: 50px;
}

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

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

nav .nav-profile-link a{
    color: black;
    border-bottom: 1px solid black;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
}

main{
    width: 100%;
    height: 100%;
    background-image: url('/personalProjects/BLOG/assets/img/Cover.png');
    background-size: 100% 100%;
}

main .title{
    display: flex;
    justify-content: center;
}

main .title h1{
    color: white;
    font-size: 30px;
    letter-spacing: 12px;
    font-family: monospace;
    text-align: center;
    margin-top: 140px;
}

main .button-contain{
    display: flex;
    justify-content: center;
    margin-top: 80px;
}

main button{
    font-size: 18px;
    font-family: fantasy;
    padding: 5px;
    width: 100px;
    height: 45px;
    background-color: #47cfac;
}

mi version 😃

Quedó así, el background del main no logré posicionarlo correctamente.

HTML

<!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='https://unpkg.com/[email protected]/css/boxicons.min.css' rel='stylesheet'>
    <link rel="stylesheet" href="css/styles.css">
    <link rel="stylesheet" href="css/mobile.css">
    <title>Blog</title>
</head>
<body>
    <header>
        <section class="navbar-container">
            <ul class="navbar">
                <a href="https://www.facebook.com" target="blank"><li><i class='bx bxl-facebook icon facebook'></i></li></a>
                <a href="https://www.twitter.com" target="blank"><li><i class='bx bxl-twitter icon'></i></li></a>
                <a href="https://www.instagram.com" target="blank"><li><i class='bx bxl-instagram icon instagram'></i></li></a>
                <a href="https://www.linkedin.com" target="blank"><li><i class='bx bxl-linkedin icon linkedin'></i></li></a>
                <a href="https://www.youtube.com" target="blank"><li><i class='bx bxl-youtube icon youtube'></i></li></a>
            </ul>
        </section>

        <section class="about-container">

             <div class="img-container">
                 <img src="assets/img/logo.png" alt="" class="img">
             </div>

             <div class="aboutMe-container">
                 <a href="#" class="aboutMe">Sobre mí</a>
             </div>
        </section>
    </header> 
    <main>
        <h1>
            Conoce las novedades y <br> noticias del mundo Tech
        </h1>

        <button>Entra ya!</button>
    </main>    
</body>
</html>

CSS


        body {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            height: 100vh;
            overflow: hidden;

         }
         /* Header init */
         header {

            display: grid;
            grid-template-rows: repeat(2,minmax(75px, 1fr))
         }
        
        .navbar-container {

            display: flex;
            justify-content: flex-end;
            background-color: #41c7a4;
        }

        .navbar {

            display: flex;
            justify-content: space-around;
            list-style: none;
            width: 32%;
            margin: auto 0;
            column-gap: 4px;

        }

        .icon {

            color: #41c7a4;
            background-color: white;
            border-radius: 58%;
            font-size: 140%;
            padding: 7px;
            transition: 1s;
        }

        .icon:hover {

            color: #1d9bf0;
            transition: 1s;
        }

        .facebook:hover {

            background-color: #1d9bf0;
            transition: 2s;
            color: white;
        }
        
        .instagram:hover {

            background: linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);
            color: white; 
            transition: 1s;
        }

        .linkedin:hover {

            background-color: #0a66c2;
            color: white;
            transition: 1.5s;
        }
        .youtube:hover {

            color: #ff0000;
            transition: 1s;
        }


        .about-container {

            display: grid;
            grid-template-columns: minmax(200px, 3fr) 2fr;
        }

        .aboutMe-container {

            display: grid;
            grid-template-columns: repeat(5, 1fr);
            margin: auto 0;
        }

        .aboutMe {

            grid-column: 4/5;
            color: #5a585c;
            font-weight: bolder;
        }

        .img-container{

            margin: auto 0;
        }

        .img {

            object-fit: contain;
            width: 30%;
        }

        /* Header end */

        main {

            display: grid;
            justify-content: center;
            height: 100vh;
            background-image: url(../assets/img/cover.png);
            background-size:cover;
            background-position: center;
        }

        h1 {
            z-index: 1000;
            font-family: monospace;
            color: white;
            margin-top: 25%;
            word-spacing: 30%;
            font-size: 40px;
        }

        button {

            width: 15%;
            margin: 0 auto;
            margin-bottom: 100%;
            height: 7%;
            background:#41c7a4;
            font-family: monospace;
            color: black;
            font-weight: bolder;
            border:#41c7a4;
            border-radius: 7%;

        }

Así me ha quedado

Así me quedó 😃

Pd: lo unico que no supe como hacerle fue agregar la fuente, si alguien me puede explicar lo agradeceria

Comparto mis resultados:

Logrado!!!

Así va !, es muy interesante ver como se aplica lo aprendido, cada uno va haciendo la estructura y estilos a su manera
1.png

Les comparto mi código, cualquier FeedBack es bienvenido 😄

HTML

<!DOCTYPE html>
<html lang="es">
   <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge" >
      <!--Fonts -->
      <link rel="stylesheet" href="./Assets/Social Media/font/flaticon.css">
      <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;700&display=swap" rel="stylesheet">
      <!--Custom CSS -->  
      <link rel="stylesheet" href="./CSS/main.css">
      <title>Mi Blog</title>
   </head>
   <body>
      <header>
         <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>
      </header>
      <main>
         <nav>
            <section class="logo-container">
               <a href="./index.html"><img src="./Assets/Logo-blanco.png" alt="Logo MI BLOG"></a>
            </section>
            <section class="profile-link">
               <a href="#">Sobre mí</a>
            </section>
         </nav>
         <section class="principal-container">
            <div class="title">
               <h1>
                  Conoce las novedades y noticias del Mundo Tech 
               </h1>
            </div>
            <div class="button-container">
               <a href="#" class="">Entra ya!</a>
            </div>
         </section>
      </main>
   </body>
</html>

CSS

* {
	margin: 0;
	padding: 0;
}

:root {
	font-size: 62.5%;
	--blanco: #ffffff;
	--verde: #48cfad;
	--negro: #191919;
}

body {
	height: 100vh;
	font-family: 'Roboto Mono', monospace;
}

a {
	text-decoration: none;
}

header {
	width: 100%;
	display: grid;
	background-color: var(--verde);
}

header .icons {
	height: 80px;
	padding: 0 50px 0 50px;
	display: flex;
	justify-content: flex-end;
	align-items: center;
}

header .icons a {
	margin-left: 25px;
	display: inline;
}

header .icons a span {
	color: var(--blanco);
}

header .icons a span:hover {
	font-size: 35px;
	color: #ccf7ec;
}

main {
	background-image: url(/Assets/Imágenes/Cover.png);
	height: calc(100% - 80px);
	width: 100%;
	background-size: cover;
	background-position: center;
}

main nav {
	display: grid;
	grid-template-columns: 1fr 1fr;
	height: 100px;
	padding: 20px 50px 20px 50px;
}

main nav .logo-container {
	display: flex;
	align-items: center;
	justify-content: flex-start;
}

main nav .logo-container a img {
	width: 250px;
}

main nav .profile-link {
	display: flex;
	justify-content: flex-end;
	align-items: center;
}

main nav .profile-link a {
	border: 2px solid var(--blanco);
	border-radius: 10px;
	padding: 10px 20px 10px 20px;
	color: var(--blanco);
	font-weight: 700;
	font-size: 2rem;
}

main nav .profile-link a:hover {
	text-decoration: underline;
}

main .principal-container {
	display: grid;
	grid-template-rows: 1fr 1fr;
	grid-row-gap: 25px;
	height: calc(100% - 180px);
	justify-content: center;
}

main .principal-container .title {
	align-self: flex-end;
}

main .principal-container h1 {
	font-size: 6rem;
	color: var(--blanco);
	max-width: 900px;
	text-align: center;
	text-shadow: 1px 1px 10px rgba(0, 0, 0, 0.7);
}

main .principal-container .button-container {
	align-self: flex-start;
	justify-self: center;
}

main .principal-container .button-container a {
	color: var(--negro);
	background-color: var(--verde);
	display: block;
	padding: 15px 20px;
	font-size: 2.5rem;
	font-weight: 700;
}

main .principal-container .button-container a:hover {
	color: var(--blanco);
	background-color: var(--verde);
	text-decoration: underline;
}

Compartan sus códigos Cracks!

Mi reto…

<main>
        <section class="main-content">
            <div class="main-title">
                <h1>Conoce las novedades y <br> noticias del Mundo Tech</h1>
            </div>
            <div  class="main-button">
                <button>Entra ya!</button>
            </div>
        </section>
    </main>
main {
    height: 100vh;
    background-image: url('../assets/img/Cover.png');
    background-size: cover;
    background-repeat:no-repeat;
    background-position: center;
    /* align-items: center; */
    color: #fff;
    font-family: 'Courier New', Courier, monospace;
}

main .main-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

main .main-title {
    margin-top: 150px;
    font-size: 20px;
    letter-spacing: 10px;
    text-align: center;
}

.main-button  button{
    border: none;
    margin-top: 50px;
    background-color: #47cfac;
    padding: 10px 20px;
    font-weight: bold;
}

.main-button button:hover {
    box-shadow: 0px 1px 1px #47cfad59;
    color: #47cfac;
    background-color: #f8f8f8;
}

Me gustaría saber que opinan??

Todo comentario es bien recibido

aqui mi resultado

Reto cumplido

Reto completo

Opción 1ª profesor.
Opción 2ª mia.

¿Ambas son igualmente válidas?

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

nav .profile-link a {
text-decoration-line: underline;
}

Dejo mi repositorio de github (los ejercicios)
https://github.com/Christiano0407/Portafolio

Wow desconocía que para una de las cosas que se usa el atributo alt era para lo que comenta el profe.

reto modificado jeje

  • **Reto cumplido: **

Reto logrado 😄 a seguirle

https://fersilvahuu.github.io/myBlogS/
Aquí iré publicando como va quedando mi blog, si pueden pasar a verlo y darme feedback se los agradecería bastante.

Saludos, esto es solo por si acaso, la situación es la siguiente si quiere aumentar el tamaño de los icons,
1)ingresan al css de las fuentes para el ejemplo presente: flaticon.css
2)buscan este fragmento de código:

[class^="flaticon-"]:before, [class*=" flaticon-"]:before,
[class^="flaticon-"]:after, [class*=" flaticon-"]:after {   
  font-family: Flaticon;
        font-size: 32px;
font-style: normal;
margin-left: 20px;
}

3)Modifican la propiedad font-size ej: 20px por 32px.

Así me va quedando ![](https://static.platzi.com/media/user_upload/Captura-5f0635c5-71af-4244-a7d5-3e42834b2806.jpg)
Mi aporte, asi va quedando: ![](https://static.platzi.com/media/user_upload/image-02031819-302f-4cde-8b7c-2b03a3e6c436.jpg)
![](https://static.platzi.com/media/user_upload/image-f29babc6-5f72-4f63-b204-91a16b2ecf58.jpg)![](https://static.platzi.com/media/user_upload/image-7c1eba2a-1e3c-4e26-8b1b-60a3d12175eb.jpg) ![](https://static.platzi.com/media/user_upload/image-0dbfdf5c-0c4d-45c0-b0f8-4374d729c45c.jpg)
![](https://static.platzi.com/media/user_upload/Screenshot%20from%202023-12-28%2021-25-13-b7d69539-3ffe-436d-adb2-76f07b0a5a1d.jpg)
![]()![](https://static.platzi.com/media/user_upload/Captura%20de%20pantalla%20%2835%29-6a6a7193-2e8a-4b7d-a0e4-cb61834d953e.jpg)

Este astronauta se fue de Viaje!


listo, reto cumplido

Así va:

Mi versión del Landing page 💡

🖥 Desktops

📱 Mobile

¡Agregando estilo personal!
El halo blanco que se ve en la imagen, en realidad aparece al hacer hover sobre el contenedor, pero en serio quería mostrarlo porque me gustó cómo se ve 😃. Además, al hacer hover también el tamaño del contenedor aumenta.

¡hecho! Ahora a hacer uno desde mi propia imaginación.