Así me fue quedando:
Introducción
Lo que aprenderás sobre maquetación en CSS
Chrome Devtools
Análisis y creación del proyecto
Diseño del proyecto
Setup del proyecto
Creando la página principal
Arquitectura del header en HTML
Estilos en el header
Agregando íconos
Agregando imágenes al header
Manejo de Grid para posicionar contenedores
Manejo de imágenes de Background
Agregando fuentes
Terminando el Home
Creando página de Blogs
Blog page
Manejo de clases
Estilos en blogs html
Agregando imagen
Estilos del botón
Trabajando la sección de post
Grid Container
Creando página de Blog
Crear la pantalla de blog
Agregando estilos a la página de blog
Creando página de perfil
Sección de contacto
Maquetando perfil HTML
Manejando estilos en la página de perfil
Blog responsivo
Media Queries
Cierre
Cierre del curso
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Si ya tienes una cuenta,
No se trata de lo que quieres comprar, sino de quién quieres ser. Invierte en tu educación con el precio especial
Antes: $249
$209
Paga en 4 cuotas sin intereses
Termina en:
11 Días
16 Hrs
44 Min
21 Seg
Agregando imágenes al header
8/26Recursos
Aportes 381
Preguntas 17
Ordenar por:
Aquí mi versión.
La pagina subida en github.io: https://jromerogonzaga.github.io/blogsite/
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
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:
- word-spacing
- letter spacing
las cuales me sirvieron para el título del HOME.
-
Resultado
-
Repositorio
Visita mi repositorio en GitHub para ver el código -
Demo:
Revisa la demo aquí
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.
Me costó mucho, pero lo conseguí
Así me va quedando
Mi aporte, asi va quedando:
![]()
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.
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?