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
12H
7M
44S

Manejo de Grid para posicionar contenedores

9/26
Recursos

Aportes 108

Preguntas 14

Ordenar por:

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

o inicia sesi贸n.

Algo muy importante que quisiera resaltar es :

Porque hacer un titulo con un tag <p> y no con un tag <h1> en nuestra pagina?

El tag h1 es importante en el hero debido al SEO y a la experiencia de usuario.
Este nos ayuda a indicar la cabecera mas importante en una pagina web, hace que la lectura del contenido sea de una manera r谩pida y clara d贸nde se encuentra el usuario y el contenido que se va a encontrar.

Por otro lado, a nivel SEO, nos ayuda a posicionar una p谩gina por la palabra clave que se desee. Se recomienda utilizar la palabra clave dentro del H1 para mejorar el posicionamiento de la p谩gina por ese t茅rmino.

Para los que saben m谩s sobre HTML y CSS y observaron que pusieron un etiqueta <p></p> en vez de un <h1></h1>, en el repositorio de github ya esta corregido, les invito a pasarse a los repositorios de cada curso que tomen y ayuden a mejorarlos, esto les ayudara a ustedes y a las persona que aun no saben mucho del tema, ayudemos a desarrollar buenas practicas sin depender mucho de los profesores.

El reto sin la imagen de fondo:

En cada clase se aprende algo diferente, como por ejemplo el letter-spacing y el uso del grid column, Diego es un excelente profesor.

Reto:

![](

Yo lo hice con flexbox jeje

.main-section {
	width: 100vw;
	height: 100%;
	background-image: url("/assets/images/Cover.png");
	background-position: center;
	background-size: cover;
	background-attachment: fixed;
}
.main-title-container {
	font-family: Roboto;
	font-size: 20px;
	color: white;
	letter-spacing: 8px;
	line-height: 70px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 50%;
}

.main-title-container button {
	margin-top: 55px;
	background-color: #47cfac;
	color: black;
	width: 130px;
	font-weight: 900;
	height: 60px;
	border-radius: 10px;
}

El reto ajustandolo a uno de mis proyectos 馃槃 鈾

Buen铆simo. Para que la imagen se vea en toda la pantalla pueden usar

Background: url('direcci贸n de imagen');
background-size: cover;

as铆 se ver谩 en en toda la pantalla.

Poniendo a prueba el conocimiento adquirido en los cursos anteriores, estoy usando el pre-procesador Sass as铆 como dise帽o Movile first, espero sus comentarios y consejos,
Igual dejo un poco del c贸digo del cuerpo de mi pagina

Un gran complemento a este curso es iniciar con Mobile First y hacer los estilos antes de cada v铆deo para comparar tu construcci贸n con la del profesor porque hay distintos caminos que te llevaran a Roma. No te presiones si tu CSS no es igual al del profe importa el resultado y como lo construyes

Es genial como explica Diego De Granda

Este ha sido mi resultado:
![](

Mi blog

Reto:

Listo, lo que he visto en los aportes es que hay diferentes soluciones, para lograr el mismo resultado, todas son muy interesantes y enriquecedoras.

les comparto mi proyecto en Github https://github.com/ArzCorp/Blog

Leo los comentarios y no veo que este mal su forma de hacer c贸digo, si bien es cierto que tiene un titulo con p y no con H1, el menciona el porqu茅 lo usa, recuerden que el curso es de css y aunque se debe de hacer buenas pr谩cticas en html es solo aprendizaje de base, ojo los comentarios donde indican que no debe ser as铆 tienen buenos fundamentos y est谩n en lo correcto. 馃懆馃徎鈥嶐煉烩渽馃挭

08:59 en el .home-main-text{} es
el font-weight:700 (sin la unidad px)

Porque si el home-main ser谩 煤nico en toda la p谩gina, 驴por qu茅 le asignan una clase y no un ID?

驴Qu茅 tal?

Superado!

.hero {
    width: 100%;
    height: 100vh;
    background-image: url(/assets/images/hero-image.jpeg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.hero-background {
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;
}
.hero-container {
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.hero-container h2 {
    color: white;
    letter-spacing: 0.4rem;
}
.hero-container button {
    width: 120px;
    height: 48px;
    margin-top: 60px;
    color: black;
    background-color: #47cfac;
    font-weight: bold;
}

reto.
solo me falta el tipo de fuente.

Siento que esta manera hace que se tenga un c贸digo m谩s organizado. Facilita las cosas en el momento de ubicar posibles errores.

mi aporte!

馃惐鈥嶐煈

esta es mi version, me causaba ruido que el logo de twitter fuese el de tumblr.

otra cosa me siento mas comodo haciendo las cosas con flex y no con grid.

Solucion del reto

reto completado

Vengo del curso de CSS Gris y Dise帽o Web con CSS Grid y Flexbox a mirar esta clase porque es frustrante como no llevan absolutamente nada a la pr谩ctica en esos dos cursos. Me alegra que al menos algo se toque de CSS Grid en este curso.

Cu谩ndo tienes varias p谩ginas y te encargas de ellas con un mismo archivo css, tienes que llevar la especificidad al m谩ximo nivel.

Al momento de darle uno o m谩s: fr, le estamos diciendo a el grid que me haga de cierto tamallo la refilla.

La propiedad de grid column, hace que posicionemos nuestra caja en una columna de su elemento padre, que debe tener la propiedad de grid column al menos, pero mejor si tiene varias columnas definidas.

C贸digo para que la imagen quede bien 馃挌

    background-image: url("../assets/img/funda_wallpaper.png");
    background-repeat: no-repeat, repeat;
    background-position: center;
    background-size: cover;

Que gratificante es ver las clases del profe De Granda

Un dato curioso que quiero aportar el font-weight no se usa con px, si se fijan en el DevTool no lo usa, marca error.

Esto es por que este no se define con px, sus valores son como las fuentes de google. 500 o 700 o bold o bolder.


Asi voy

驴que es mejor?, utilizar <h1> o <p> para agregar el texto principal, 驴y porque?

Vamos bien 馃槂

Que gran practica, tenia muchas ganas de que ya saliera el curso

Yo hice el html y css de 茅sta forma:

<main class="main-container">
        <section class="main-container_text">
            <h1>Conoce las novedades y noticias del Mundo Tech</h1>
        </section>
        <section class="main-container_button">
            <button>
                <a href="/blog.html">Entra ya!</a>
            </button>
        </section>
    </main>

CSS------------
.main-container {
  background-color: black;
  display: grid;
  grid-template-rows: 1fr 1fr;
  justify-items: center;
  height: 70%;
  width: 100%;
  background-image: url("/assets/img/Cover.png");
  background-position: center;
  background-size: auto;  
}

.main-container_text {
  display: flex;
  align-items: center;
  color: white;
  text-align: center;
  font-size: 25px;
  letter-spacing: 10px;
  font-weight: 500px;
  width: 50%;

}

.main-container_button button {
  color: black;
  background-color: #47cfac;
  width: 110px;
  height: 50px;
  font-size: 18px;
  font-weight: bold;
  line-height: 50%;
}```

Yo hubiera usado un h1 para eso de la semantica, pero supongo que eso se ve en otros cursos!

el alt nos ayuda a ver con problemas visuales
agregamos
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 .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;
}

.main-section {
width: 100vw;
height: 100%;
background-image: url("/assets/images/Cover.png");
background-position: center;
background-size: cover;
background-attachment: fixed;
}
.main-title-container {
font-family: Roboto;
font-size: 20px;
color: white;
letter-spacing: 8px;
line-height: 70px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 50%;
}

.main-title-container button {
margin-top: 55px;
background-color: #47cfac;
color: black;
width: 130px;
font-weight: 900;
height: 60px;
border-radius: 10px;
}
APUNTES 鈥

No me dejaba establecer la altura del main al 100% sin que me saliera el scroll, lo solucion茅 agregando un min-height: 100% en el body

body{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    min-height: 100%;
}

Pantalla principal terminada comparto link
https://sartheghost.github.io/BLOG-POST/

.flaticon-link.faceboock{
background-image: url("./css/font/img/facebook.png");
background-size: 40px 40px;
background-image: black;
background-repeat: no-repeat;
}
.flaticon-link.twitter{
background-image: url("./css/font/img/twitter.png");
background-size: 40px 40px;
background-image: black;
background-repeat: no-repeat;
}
.flaticon-link.instagram{
background-image: url("./css/font/img/instagram.png");
background-size: 40px 40px;
background-image: black;
background-repeat: no-repeat;
}
.flaticon-link.tiktok{
background-image: url("./css/font/img/tiktok.png");
background-size: 40px 40px;
background-image: black;
background-repeat: no-repeat;
}
.flaticon-link.whatsapp{
background-image: url("./css/font/img/whatsapp.png");
background-size: 40px 40px;
background-image: black;
background-repeat: no-repeat;
}

.hero{
width: 100%;
height: 100vh;
text-align: center;
margin: auto;
justify-content: center;
align-items: center;
}
.hero-subt{
background-image:url("./assets/img/Cover.png");
position:absolute;
background-repeat: no-repeat;
background-position: center;
background-size: auto;
height: 100%;
width: 100%;

}
.hero-h1{
margin-top: 100px;
color: white;
justify-content: center;
letter-spacing: 5px;
font-size: 30px;

}
button{
margin-top: 100px;
background: #47cfac;
color:black;
border: 1px solid black;
padding: 8px 18px;
border-radius: 5px;
font-size: 15px;
font-weight: bold;

}

<main class=鈥渉ero鈥>
<section class=鈥渉ero-subt鈥>
<h1 class=鈥渉ero-h1鈥 >conoces las novedades y <br>noticias del mundo tech</h1>
<button>Entrar ya!</button>
</section>
</main>

<!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/main.css">
    <link rel="stylesheet" href="./css/font/flaticon.css">
    <title>My Blog</title>
</head>
<body>
    <!-- BARRA DE NAVEGACION -->
    <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="#"><img src="./assets/img/Logo-negro.png" alt="Logo_Image"></a>
            </section>
            <section class="profile-link">
                <a href="perfil.html">Sobre m铆</a>
            </section>
        </nav>
    </header>
    <main class="home-main">
        <section>
            <p class="home-main-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae, in.</p>
            <button class="home-main-button">
                <a href="">Entra ya!</a>
            </button>
        </section>
    </main>
    
</body>
</html>

Para los que saben m谩s sobre HTML y CSS y observaron que pusieron un etiqueta <p></p> en vez de un <h1></h1>, en el repositorio de github ya esta corregido, les invito a pasarse a los repositorios de cada curso Algo muy importante que quisiera resaltar es :

Porque hacer un titulo con un tag <p> y no con un tag <h1> en nuestra pagina?

El tag h1 es importante en el hero debido al SEO y a la experiencia de usuario.
Este nos ayuda a indicar la cabecera mas importante en una pagina web, hace que la lectura del contenido sea de una manera r谩pida y clara d贸nde se encuentra el usuario y el contenido que se va a encontrar.

Por otro lado, a nivel SEO, nos ayuda a posicionar una p谩gina por la palabra clave que se desee. Se recomienda utilizar la palabra clave dentro del H1

Esta muy interesante este curso de maquetaci贸n, estoy aprendiendo conceptos nuevos y muy funcionales para mis proyectos 馃挌馃挌馃挌

<h1>Conoce las novedades y <br> noticias del Mundo Tech</h1>

<link rel=鈥減reconnect鈥 href=鈥https://fonts.googleapis.com鈥>
<link rel=鈥減reconnect鈥 href=鈥https://fonts.gstatic.com鈥 crossorigin>
<link href=鈥https://fonts.googleapis.com/css2?family=Roboto+Mono:[email protected]&display=swap鈥 rel=鈥渟tylesheet鈥>

   font-family: 'Roboto Mono', monospace;
    font-size: 2.5rem;
    letter-spacing: 10px;
    color: white; 

Quisiera comparir el codigo, marcado y estilos, estoy siguiendo al profesor pero trate de simplificar las estructuras para optimizar un poco mas al momento de aplicar estilos, y usar BEM (trato, aun no fluyo con este tema)

	<body>
		<header>
			<section class="header__icons">
				<a href="/"><span class="flaticon-001-facebook"></span></a>
				<a href="/">.... los demas iconos</a>
			</section>
			<nav>
				<section class="nav__logo">
					<a href="/"><img src="assets/images/Logo-negro.png" alt="Logo" /> </a>
				</section>
				<section class="nav__links">
					<a href="perfil.html">About me</a>
				</section>
			</nav>
		</header>
		<section class="hero">
			<h1 class="hero__text">
				Conoce las novedades y <br />
				noticias del Mundo Tech
			</h1>
			<button class="hero__button" href="blog.html">Entra ya!</button>
		</section>
	</body>
body {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    position: fixed;
}

header {
    width: 100%;
    display: grid;
    grid-template-rows: 50px 90px;
    background-color: var(--main-color);
}

.header__icons {
    width: 300px;
    height: 50px;
    margin: 0 50px;
    display: flex;
    align-items: center;
    justify-self: end;
    justify-items: flex-end;
    justify-content: space-between;
    color: var(--white);
}

.header__icons span {
    color: var(--white);
}

nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: var(--white);
}

nav section {
    margin: 50px;
}

.nav__logo img {
    width: 220px;
    margin-top: 10px;
}

.nav__links a {
    font-weight: bold;
    color: var(--black);
    border-bottom: 1px solid var(--black);
}

.hero {
    height: 100%;
    display: grid;
    align-items: center;
    justify-items: center;

    background-image: url("/./assets/images/cover.png");
    background-color: var(--black);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.hero__text {
    font-size: 2.5rem;
    color: var(--white);
}

.hero__button {
    width: 20%;
    height: 80px;
    align-self: baseline;

    font-size: 1.2rem;
    font-weight: bold;
    color: var(--black);
    
    border: none;
    border-radius: 10px;
    cursor: pointer;
    background-image: linear-gradient(180deg, var(--main-color), var(--white))
}

Mi maquetado no quedo del todo igual pero almenos mi resultado fue mas aproximado al real

Pues yo us茅 un h2, ya que el h1 se ocupa para el t铆tulo principal de la p谩gina justamente en el logo, m谩s que ese tipo de descripci贸n, de hecho si podria ser buen un parrafo.
Segundo no use grid ya que era m谩s f谩cil para m铆 usar flexbox. Porque son muy pocos elementos y siento que grid es para algo con m煤cha m谩s complejidad en su composici贸n.

Sabes que est谩s progresando en tu proceso de aprendizaje cuando notas cosas que puedes corregir y cuestionar lo que te est谩n ense帽ando.

<p> no usar, mejor usen un h1 o h2 para el posicionamiento web

Practicando es que se aprende, lo hice de tres formas diferentes para posicionar el main, pero ninguna le gana a la versatilidad del css grid jaja, nunca pares de aprender y practicar.

reto:

Yo lo abr铆a hecho de otra forma sinceramente. Hubiera hecho algo tipo as铆 sin necesidad de declarar 3 columnas.

	display: grid;
	grid-template-columns: minmax(auto, 768px);
	justify-content: center;
	justify-align: center;

Colocarle una sola columna y a ella misma limitarle el crecimiento a una medida especifica. En este caso para poner un ejemplo puse 768px, pero pudiera haber sido cualquier otra seg煤n lo hubiera requerido la forma del dise帽o. Y centrar todo con justify-content y justify-items sin necesidad de usar 3 columnas y decirle al contenido que ocupara la segunda columna

Muy buena clase!!!

Excelente!! Seguimos!!! 馃槂

hehe

隆Me parece fabuloso Grid!

font-weight: 700px? Creo que 鈥榩x鈥 se fu茅 de m谩s.

otra duda, he visto que esta utilizando solo display grid, 驴es mejor solo utilizar display grid o en unos casos combinarlo con display flex?

la verdad me falta un poco mas de experiencia para entender bien el display grid pero ya lo voy asimilando

鈥淪茅 que para el t铆tulo tenemos las etiquetas h1 a h6, pero yo voy a utilizar la etiqueta de p谩rrafo porque al p谩rrafo le voy a dar estilos para llevarlo al tama帽o de fuente que necesito鈥.

Me preocupa la cantidad de errores que comete y hace como que no pas贸 nada, varios typo y cosas que me parece no conoce tan bien o capaz que son los nervios de dar la clase y act煤a de esa manera sin querer.

Genial excelente ejercicio

Listo! Con esta clase logr茅 pulir mi c贸digo ya que todo lo hab铆a puesto en el mismo header 馃槄

Yo lo hice un poco diferente, nose si fue la mejor manera para codiar el codigo鈥

Html

<section class="parrafo">
        <div>
            <h1>Conoce las Novedades y<br/> noticias del Mundo Tech</h1>
        </div>
    </section>
<dvi class="button-container">
        <a href="blog.html">
            <button>Entra ya!</button>
        </a>
    </dvi>

Css

    background-image: url("../img/Cover.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position:absolute;

   .parrafo h1{
    font-family: 'Roboto', sans-serif;
    font-weight: 500px;
    font-size: 50px;
    letter-spacing: 10px;
    margin-top: 160px;
    text-align: center;
    color: #e6e9ed;
}
.button-container{
    display: grid;
    justify-items: center;
}
.button-container button{
    color: #ffffff;
    padding: 15px;
    font-size: 20px;
    font-weight: bold;
    cursor: pointer;
    border: none;
    background-color: #47cfac;
}
.button-container:hover button {
    background-color: #31927a;
}

Yo lo hice de la siguiente forma:

鈥揌TML鈥

<code>
<main>
        <section>
            <h1>Conoce las novedades y noticias del mundo Tech</h1>

            <input type="submit" value="Entra ya!!">
        </section>
    </main>

鈥 css 鈥

<code>
main {
    height: calc(100vh - 140px);
    background-image: url('../assets/images/Cover.png');
    background-position: center top;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}
main section {
    margin: 10%;
    width: 55%;
    text-align: center;
}
h1 {
    font-size: 35px;
    letter-spacing: 3px;
    color: #fff;
}
input[type='submit'] {
    margin: 5%;
    padding: 10px 15px;
    font-size: 18px;
    border: 1px solid rgb(224, 224, 224);
    background-color: #46ce6f;
    border-radius: 5px;
    transition: all ease-in .5s;
}
input[type='submit']:hover {
    background-color: #288343;
}

Cuando se debe usar H1 o P. Entiendo que los motores de b煤squeda de google toman en cuenta los H1, entonces cu谩ndo deber铆a usarlos?

/* .main{
  background-image: url("../assets/img/Cover.png");
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;

}
.main h1{
  margin-top: 60px;
  color: white;
  font-size: 40px;
}

.main .main-button button{
  color: #47cfac;
 background-color: rgba(0, 0, 255, 0.678);
 padding: 10px 20px;

} */```

Bueno esto es lo que me sali贸, aunque siento que algo me falto porque no me sali贸 responsive

Que bien ense帽a Diego De Granda, uno de mis profes favoritos definitivamente

Gracias por la explicaci贸n de las partes iniciales para posicionar bien esta vista instructor Diego.

Reto Listo!!

Listo, va quedando muy bien toda la maquetacion del sitio, de verdad este profe es muy bueno!

en el selector .home-main section tengo que colocar
display:grid
es necesario como es el hijo directo de un grid , sin embargo si le quitas permanece en la columna 2 pero el button se apega a la izquierda ,
porque??

Excelente!!

Continuemos. El m铆o lo hice con flexblox, pero aplicar茅 las pr谩cticas de la clase 馃槃

No entiendo porque pone el display grid en el section, ya lo tenia en el contenedor, es necesario tambi茅n en el hijo?

Lo hab铆a hecho de otra forma, me hace falta practicar m谩s con el display grid 馃槵

De haber sabido que ibas a hacer el reto no me rompo la cabeza asi茅ndolo :v

RETO;

Este es mi trabajo de la clase

Esta siendo un gran curso.

7. Manejo de Grid para posicionar contenedores:

En esta clase hemos usado Grid para posicionar los contenedores dentro del main de la p谩gina principal.

Es v谩lida su manera de hacerlo, con un grid dentro de un grid, si antes no han visto sobre CSS Grid se les har谩 muy muy raro, por eso antes de llevar este curso tienen que haber visto ya HTML, CSS, Flex y Grid, de lo contrario se van a perder.

Les comparto el c贸digo de la clase:

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="./css/main.css">
    <link rel="stylesheet" href="./assets/font/flaticon.css">
    <title>Mi blog by Aldo Ortiz</title>
</head>
<body>
    <header class="header grid">
        <section class="header-icons-container grid">
            <div class="header-icons flex">
                <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 class="header-nav grid">
            <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-container flex">
                <a href="/perfil.html">Sobre m铆</a>
            </section>
        </nav>
    </header>
    <main class="home-main grid">
        <section class="home-main-section grid">
            <p class="home-main-text">Conoce las novedades y noticias del mundo Tech</p>
            <button class="home-main-button">
                <a href="./blogs.html">隆Entra ya!</a>
            </button>
        </section>
    </main>
</body>
</html>

CSS:

/*RESET*/
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
body {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    font-family: 'Segoe UI';
}
/*SHARED*/
a {
    text-decoration: none;
    display: inline;
    color: black;
}
.grid {
    display: grid;
}
.flex {
    display: flex;
}
/*HEADER*/
.header {
    width: 100%;
    height: 140px;
    grid-template-rows: repeat(2, 1fr);
}
.header-icons-container {
    width: 100%;
    height: 50px;
    background-color: #47cfac;
}
.header-icons {
    width: 300px;
    height: auto;
    justify-items: flex-end;
    align-items: center;
    justify-content: space-between;
    justify-self: end;
    margin-right: 50px;
}
.header-icons span {
    color: white;
}
.header-nav {
    grid-template-columns: repeat(2, 1fr);
    height: 90px;
}
.nav-logo-container {
    margin-left: 50px;
}
.profile-link-container {
    align-items: center;
    justify-content: flex-end;
    margin-right: 50px;
}
.profile-link-container a {
    color: black;
    border-bottom: 1px solid black;
}
.nav-logo-container img {
    width: 220px;
    margin-top: 10px;
}
/*MAIN*/
.home-main {
    grid-template-columns: 1fr 4fr 1fr;
    height: 100%;
}
.home-main-section {
    grid-column: 2;
    justify-items: center;
    height: 350px;
    margin-top: 80px;
}
.home-main-text {
    font-size: 30px;
    font-weight: 700;
    letter-spacing: 10px;
    color: black;
    text-align: center;
}

La p谩gina va quedando as铆: