Reto:
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
Aportes 102
Preguntas 2
Reto:
reto completado
les comparto el fragmento de codigo para dar efecto de degradado, si colocan el primer valor en top (degradado vertical) left (degradado horizontal) deg (degradado diagonal)
background: linear-gradient(145deg,#41CFAC, #FA5AB5) ;```
Les comparto mi avance compañeros.
Una pequeña corrección para manejar el nombre de las clases en inglés proyects se escribe projects
No es mucho pero es trabajo honesto😆;
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
font-family: 'Roboto mono', monospace;
font-size: 62.5%;
}
a {
text-decoration: none;
display: inline;
color: black;
}
/* 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-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 {
font-size: 1.4rem;
font-weight: bold;
color: black;
border-bottom: 1px solid black;
}
/* main */
.blogpost-main-container {
width: 100%;
min-height: 700px;
text-align: center;
padding-bottom: 50px;
}
.blogpost-main-container .blogpost-main-profile {
display: flex;
align-items: center;
text-align: initial;
padding: 80px;
gap: 30px;
background-color: #e6e9ed;
}
.blogpost-main-profile img {
width: 350px;
margin-left: 50px;
}
.blogpost-main-profile div h2 {
font-size: 2.5rem;
font-weight: bold;
margin-bottom: 20px;
}
.blogpost-main-profile div p {
font-size: 1.7rem;
font-weight: 500;
line-height: 2.5rem;
margin-right: 50px;
}
.blogpost-main-projects {
min-height: 350px;
}
.blogpost-main-projects > h2 {
font-size: 2rem;
padding: 20px;
border-bottom: 1px solid #cdd2da;
}
.blogpost-main-projects section {
display: grid;
grid-template-columns: repeat(3, 1fr);
padding-top: 20px;
gap: 20px;
margin: 0 50px;
}
.blogpost-main-projects section div {
text-align: initial;
}
.blogpost-main-projects section div p {
font-size: 1.5rem;
margin-top: 15px;
}
/* contacto */
.contact-main-container {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
min-height: 250px;
background-color: #e6e9ed;
padding-bottom: 50px;
}
.contact-main-container img {
height: 100px;
margin-bottom: 40px;
}
.contact-main-container div {
display: flex;
align-items: center;
margin: 0 auto;
}
.contact-main-container .contact-left, .contact-main-container .contact-right {
display: block;
width: 250px;
margin-left: 10px;
font-size: 1.4rem;
font-weight: bold;
}
.contact-left a, .contact-right a {
border-bottom: 1px solid black;
}
.contact-left p, .contact-right p {
margin-top: 10px;
}
/* footer */
footer {
width: 100%;
height: 80px;
background-color: #22272d;
border-top: 35px solid #47cfac;
text-align: center;
}
footer p {
color: white;
margin-top: 17px;
}
Cambie la sección de Perfil por la de Portafolio.
Aquí está mi reto completado
Reto:
HTML:
<!DOCTYPE html>
<html lang="es-MX">
<head>
<title>Perfil</title>
<link rel="stylesheet" href="./css/profile.css" />
<link rel="stylesheet" href="./assets/fonts/flaticon.css" />
<meta charset="UTF-8" />
<meta name="description" content="Pagina del perfil" />
<meta name="robots" content="index,follow" />
<meta
name="viewport"
content="
width=device-width,
user-scalable=no,
initial-scale=1.0,
maximum-scale=1.0,
minimum-scale=1.0"
/>
</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>
<section class="nav-logo-container">
<a href="./index.html"><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 class="main-profile">
<section class="profile-info">
<div class="profile-picture">
<img src="./assets/img/profile-pic.jpg" alt="Imagen de persona" />
</div>
<div class="profile-desc">
<h1>Hola!</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis error incidunt, earum magni nobis ab qui repellat ut, odit quam ratione animi asperiores quia atque quas explicabo. Quaerat, corrupti id!</p>
</div>
</section>
<section class="profile-proyects">
<div class="grid-container">
<h3>Proyectos</h3>
<div>
<article>
<h2>Texto</h2>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sed exercitationem magnam aperiam facere dolores. Similique error rerum voluptatibus temporibus saepe! Nostrum nobis nemo reiciendis fugit sapiente exercitationem corporis dolorum veniam.</p>
</article>
<article>
<h2>Texto</h2>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sed exercitationem magnam aperiam facere dolores. Similique error rerum voluptatibus temporibus saepe! Nostrum nobis nemo reiciendis fugit sapiente exercitationem corporis dolorum veniam.</p>
</article>
<article>
<h2>Texto</h2>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sed exercitationem magnam aperiam facere dolores. Similique error rerum voluptatibus temporibus saepe! Nostrum nobis nemo reiciendis fugit sapiente exercitationem corporis dolorum veniam.</p>
</article>
</div>
</div>
</section>
<section class="contact-main-container">
<div>
<div>
<img src="./assets/img/013-newsletter.png" alt="Imagen de correo" />
<div>
<a href="">Contacto</a>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p>
</div>
</div>
<div>
<img src="./assets/img/006-like.png" alt="Imagen de corazón" />
<div>
<a href="">Escribe</a>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p>
</div>
</div>
</div>
</section>
</main>
<footer>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</footer>
</body>
</html>
SCSS:
@import 'reset';
@import 'variables';
@import 'mixins';
@import 'header';
@import 'footer';
@import 'global';
@import 'contact';
@import url('https://fonts.googleapis.com/css?family=Roboto+Mono:400,500,700|Roboto+Slab:400,700|Roboto:400,500,700,900&display=swap');
.main-profile{
font-family: 'Roboto mono', monospace;
.profile-info{
background-color: $gray-color;
display: flex;
justify-content: space-around;
align-items: center;
padding: 80px;
.profile-picture{
width: 30%;
img{
width: 100%;
}
}
.profile-desc{
width: 60%;
h1{
font-size: 36px;
font-weight: bolder;
}
p{
font-size: 16px;
}
}
}
.profile-proyects{
padding: 0 50px 40px;
div{
h3{
border-bottom: 1px solid $gray-color;
padding-bottom: 20px;
padding-top: 20px;
text-align: center;
font-size: 35px;
}
div{
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 20px 20px;
article{
h2{
font-size: 30px;
margin: 25px 0;
}
p{
margin-bottom: 15px;
}
}
}
}
}
}
mi reto:
//- Aporte
Aquí el resultado de mi blog 😃
projects?
Listo!!, terminado el reto!
Buenas, a continuación comparto el mío:
Listo!!!
Reto cumplido.
Cumpliendo el reto
Reto cumplido mi bro
Con responsive desing y toda la cosa.
Reto cumplido, hice algunas modificaciones del diseño inicial.
Reto cumplido:
bien lo dijo el master, solo debíamos reutilizar código ahora lo personalizare a mi manera y terminare los blogs.
Soy profesor de primaria y siento lo que mis alumnos padecen en ciertas materias, llevo ya varias semanas y siento que no la estoy haciendo.
Le dedico más de 20 horas a la semana y nomas no doy con ninguna. Soy la vergüenza andando, pero eso sí, no voy a parar hasta que aprenda.
Listo, no hay nada mejor que la sensación de hacerlo solo
Maquetado de la página de perfil.
Mi aporte al reto, siento que utilizando grid area puedes crear breakpoints con una gran facilidad.
Breakpoints
@media screen and (max-width: 768px) {
.contact-main-container{
grid-template-areas: "contact-left"
"contact-right";
}
.profile-container{
grid-template-areas: "profile-img"
"profile-description" ;
}
.grid-container{
grid-template-areas: "project-1"
"project-2"
"project-3";
}
}
Desktop
Smartphone
Tablet
Smartphone
reto finalizado con unas ligeras modificaciones:
Comparto mi práctica con grid
<section class="profile-container">
<div>
<img src="https://media.istockphoto.com/photos/female-student-going-for-class-in-high-school-picture-id1328847023?b=1&k=20&m=1328847023&s=170667a&w=0&h=tEyMJ3IOTqXYG3e_4BEOXpJtz0qITQlf7LtgP8QcxzA=" alt="">
</div>
<div>
<h2>¡Hola!</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni unde pariatur nobis fugit commodi, ullam temporibus nulla natus itaque accusamus beatae voluptatibus sequi! Accusantium.
</p>
</div>
</section>
<section class="profile-projects-container">
<div>
<h4>Proyectos</h4>
</div>
<div class="profile-projects">
<article>
<h5>Título</h5>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Illum temporibus sapiente quae facere placeat minima esse fugit voluptatibus iusto numquam! Tempora voluptatibus alias autem, quae similique optio quas possimus pariatur sequi nobis nihil consequuntur aperiam quisquam?
</p>
</article>
<article>
<h5>Título</h5>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consectetur ea placeat laboriosam. Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam architecto iste ducimus, pariatur tempore ea rem laborum, blanditiis deserunt ullam consequuntur illum accusamus numquam. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Minima maxime esse consequatur.
</p>
</article>
<article>
<h5>Título</h5>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Illum temporibus sapiente quae facere placeat minima esse fugit voluptatibus iusto numquam! Tempora voluptatibus alias autem, quae similique optio quas possimus pariatur sequi nobis nihil consequuntur aperiam quisquam?
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Illum temporibus sapiente quae facere placeat minima esse fugit voluptatibus iusto numquam! Tempora voluptatibus alias autem, quae similique optio quas possimus pariatur sequi nobis nihil consequuntur aperiam quisquam?
</p>
</article>
</div>
</section>
.profile-container {
display: grid;
grid-template-columns: 1.5fr 3fr 3fr 1.5fr;
align-items: center;
gap: 60px;
background-color: #ddd;
padding: 60px 0;
}
.profile-container div:nth-child(1){
grid-column: 2;
}
.profile-container div:nth-child(2) {
grid-column: 3;
}
.profile-container div img {
width: 100%;
}
.profile-projects-container {
display: grid;
grid-template-columns: 1.5fr 6fr 1.5fr;
justify-items: center;
align-items: center;
margin: 45px 0;
/* grid-template: 20px; */
}
.profile-projects-container div:nth-child(1) {
grid-column: 2;
text-align: center;
font-size: 20px;
/* border-bottom: 1px solid #aaa; */
padding-bottom: 12px;
display: inline-block;
}
.profile-projects-container div:nth-child(2) {
grid-column: 2;
}
.profile-projects {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
/* align-items: center; */
border-top: 1px solid #999;
}
.profile-projects article h5 {
font-size: 16px;
}
 usar un <figure> ? consulto porque en otros cursos si vi que usaban el figure en lugar de div
Reto. 😋
A darle 😄
Me parece increíble que para darle estilos a esa simple parte de la página haya hecho tantos <div>, está correcto, eso es saber programar prolijamente
enserio en este curso aprendí mucho sobre html semántico y como hacer la estructura!
Vamos 😄
Asi va mi proyecto:
listo
RETO CUMPLIDO!
Continuemos. 😄
Acercándonos mas y mas y aprendiendo bastante
me agrada mucho entender el código sin necesidad de una explicación, @platzi vale la pena, realmente es indescriptible la sensación de nunca parar de aprender 🤣🤣🤣🤣
Reto terminado!!!
No es más conveniente contener a las imágenes en la etiqueta figure en vez de en un div??
Humildemente terminado XD para ver el proyecto entero click [aquí](file:///home/yanina/Blog/index.html)
Reto Cumplido 💚
Como le batalle en esta pantalla jaja
Se me revolvió todo lo de Grid.
Creo que ire a repasar nuevamente el curso 😄
Reto listo:
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?
o inicia sesión.