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:

3D
14H
23M
57S

Estilos en la secci贸n principal

11/18
Recursos

Ya maquetamos todo el esqueleto de la secci贸n principal. Es hora de aplicar estilos a las secciones de nuestro main. Vayamos a nuestro archivo CSS y empecemos a llamar esas clases.

Pasos para darle estilos al main

  1. Luego de llamar a nuestra etiqueta main, lo primero es separarla un poco del header.
  2. A帽adimos un margin-top de 150 p铆xeles.
  3. Centramos el contenido con un text-align: center.
    11.1.png

Pasos para poner la secci贸n Logo de Google

  1. Llamamos la clase desde la etiqueta padre para ser espec铆ficos: main .main-logo
  2. Le definimos un width de 530 p铆xeles, que ser谩n las dimensiones que tendr谩 el logo.
  3. Le damos un margin: 0 auto. Cuando agregamos un ancho a una etiqueta, pero a煤n hay espacio sobrante y queremos que se posicione de manera autom谩tica, aplicamos auto. Esto hace que divida el espacio sobrante entre dos y coloca a los lados. As铆 nos aseguramos que se mantenga siempre en el centro
  4. Le damos un margin-bottom de 35 pixeles.
    11.2.png

Adem谩s, si queremos que el logo tenga exactamente las dimensiones que tiene el logo original de Google, podemos crear otro estillo llamando a la etiqueta img y aplicando un width de 272px y un height de 92px.
11.3.png

Tendr铆amos un resultado como este:
imagen de google.png
隆Genial! Sigamos avanzando con nuestra segunda secci贸n.

Contribuci贸n creada con aportes de: Daniel Jonguitud y Jos茅 Miguel Veintimilla.

Aportes 157

Preguntas 31

Ordenar por:

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

o inicia sesi贸n.

Estos son los valores para el alto y ancho de la imagen del logo de google:

height: 92px;
width: 272px;

Esto lo pueden sacar directamente de inspeccionar el logo en la secci贸n de Estilos.

Una buena pr谩ctica que estoy usando para ir aprendiendo m谩s r谩pido y corrigiendo mis conceptos.
Es escuchar lo que va a realizar e intentar hacerlo antes que el (pausando v铆deo) para luego darme cuenta que lo hice de forma correcta 贸 entender el porqu茅 no lo hice de la mejor manera.

Les dejo por aqu铆 el enlace a todos los doodles de Google!
Para que miren y pongan el que m谩s les guste 馃槈


Con click derecho podemos obtener el link de la pagina original.

Porque el pofe le respeto el espacio padre en la clase (main .main-logo) y a mi no hasta que le puse clase (main .main-logo img con el width de 300px)

Esta es la URL del logo original de Google (El mismo que usa la p谩gina original) 馃憖

https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png

Recuerden que pueden utilizar margin: 0 auto para centrar el contenido.
Para esto deben definir previamente el width.
Como funciona el margin?
Margin es el margen que tendra un elemento frente a otros.
Sus valores son鈥
margin: top right bottom left
Al utilizar solo dos valores como margin: 0 auto hacemos referencia a鈥 margin: (arriba y abajo) (derecha e izquierda)
Es por eso que se centra con los valores 0 auto por que no aplica margin arriba y abajo, y aplica un margin auto a los lados 馃槃

Banda Cuando escriban c贸digo dentro de sus contenedores mi recomendaci贸n es descarguen una extension de google llamada Toggle pesticide para que puedan ver los margenes de sus contenedores, o a cada contenedor col贸quenle un border: (2px solid color)

Cual seria la diferencia entre:
Text-align: center; Y Justify-content:center;

En este enlace les dejo la imagen del logo de Google. 馃敟馃敟馃敟

Algunos tips de posicionamiento.

  • Si el elemento tiene un comportamiento en l铆nea (display: inline, inline-block, inline-flex, etc) se puede centrar de forma horizontal aplicando 鈥渢ext-align: center鈥 al contenedor.

  • Si el elemento tiene un comportamiento en bloque (display: block, flex, grid, etc) se lo puede centrar horizontalmente ajustando sus m谩rgenes laterales, 鈥渕argin: 0 auto鈥.

  • Se puede centrar de forma horizontal y vertical uno o m谩s elementos convirtiendo a su contenedor en una caja flexible usando las propiedades de flexbox.

  • Se puede centrar de forma horizontal y vertical un elemento con 鈥減osition: absolute鈥, para ello su contenedor debe tener 鈥減osition: relative鈥 y movemos el eje hacia su centro con 鈥渢ransform鈥 o tambi茅n posicionando con left y top, calculando la posici贸n calc(50% - (ancho del elemento / 2 )

Ahorre c贸digo copiando el enlace del logo directamente en Google, ya ven铆a con el tama帽o real.

Yo trato primero de colocarle fondo a los contenedores para entender como funcionan, de ahi les quito el color.
Haciendo esta clase trate de hacerle a mi manera de entender y el codigo me qued贸 asi, no se si tengan alguna sugerencia, al parecer estan unas lineas mas de codigo pero creo que es porque le di mas formato, pero nose


Yo inspecciono las paginas que quiero replicar, y le quito sus propios recursos. 馃馃 Lo puedes hacer navegando en la pesta帽as del inspector de chrome, en la pesta帽a 鈥淎pplication鈥

Muy buen profesor

Genial, he aprendido mucho!

Hola! Les comparto esta p谩gina para que elijan su doodle favorito.
https://www.google.com/doodles/?hl=es-419#archive

probad lo facil que es ir encima del icono de la pagina de google, darle click derecho y pinchar sobre copiar direccion de la imagen y luego en vuestro proyecto vas a tener la misma de google hasta con las animaciones de google jajajajaja el alumno superando al maestro!!

Me parece genial la combinaci贸 de Displays. Ayuda mucho a entender sus diferencias y como hacer 麓para darle un buen uso a cada uno.

Para dimensionar la imagen del logo

main .main-logo img{
    widows: 272px;
    height: 92px;
}

Por si a alguien le interesa, dejo el enlace a los shortcuts de Visual Studio Code, especialmente los de File management son muy 煤tiles para los que estamos iniciando: https://code.visualstudio.com/shortcuts/keyboard-shortcuts-windows.pdf

Super este curso, pero es buena practica poner algo en el alt que permite definir lo que es la imagen! Nunca pares de aprender!

suena muy sencilla la estructura de html pero aun tengo problemas con todas las clases de css seguire practicando

margin se puede modificar asi:
-cuando le das un solo valor, lo aplica a las 4 margenes
-con dos valores, aplica el primero a top y a bottom, el segundo a right y a left, ej:

margin: 30px 45px;

aplicas 30 pixeles arriba y abajo, 45pixeles a los lados

-con tres valores aplica el primero a top, el segundo a ambos lados y el tercero a bottom.

margin: 0 auto 35px;

Aqu铆 ahorrar铆amos una linea de c贸digo del ejemplo de la clase, ya que pondr铆amos cero px arriba, autom谩tico para los lados y 30px abajo

-con 4 valores, aplica el primero para top, el segundo para right, el tercero para bottom y el cuarto para left, es decir en el sentido de las manecillas del reloj

Otro level

main .main-logo img {
 width: 400px;
}

   <section class="main-logo">
     <img src="https://www.oscdigital.org/sites/default/files/images/google-nuevo-logo-septiembre-2015.png" alt="">
   </section>```

Vi muchos comentarios de los compa帽eros acerca de c贸mo obtener la imagen de Google. Lo pueden obtener de diversas maneras:

  • Haciendo una b煤squeda r谩pido en el buscador.
  • Copiar la URL de la imagen directamente, pinchando click derecho al logo de Google.
  • O copiando la URL, al momento de inspeccionar la imagen de Google.
  • Tambi茅n tienen el link en la caja de Archivos y Enlaces.
    Como ven hay muchos medios, la cuesti贸n es el fin u objetivo.

siempre hay distintas formas de centrar un elemento, pero en un pagina con la estructura

<body>
	<header> <h1>un titulo increible</h1></header>
	<main>
		lorem100(<--- tabula cuando escrebes esto)
	</main>
	<footer> <p> Copyright  XD</p></footer>
</body>

Me gusta centrar el elemento main con el siguiente css

body {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	
}
main {
	flex: 1;
}

listo, main queda centrado verticalmente ocupando todo el alto disponible.

Excelente lecci贸n, de a poco voy recordando cosas !

Algo para tener en cuenta es que pueden utilizar margin: 0 auto para centrar el contenido, Para esto deben definir previamente el width.

Compa帽eros les comparto la pagina oficial para los iconos del buscador y el micr贸fono de google.
https://fonts.google.com/icons?icon.query=search
Y tambien la gu铆a de uso.
https://google.github.io/material-design-icons/

鈥淭ips鈥, muy 煤tiles.

As铆, o m谩s f谩cil. Que buen profesor!

Listo!! margin auto es para poder centrar, en otras palabras.excelent =)

Me Llam贸 mucho la atencion el margin: 0 auto;

Buena maquetacion en las clases.

Brutal clase ense帽a para que se entienda superfacil.

Hola a todos, si por alguna raz贸n el logo que busquen sobrepase las dimensiones del width del contenedor con la clase .main-logo, la imagen se va a expandir m谩s all谩 del contenedor. Para evitar este problema, y no depender de estar cambiando manualmente los valores del width, yo hice la siguiente modificaci贸n al c贸digo para que la etiqueta img herede el valor del width del contenedor padre:

/* Estilos de la clase del contenedor del logo*/
main .main-logo {
    width: 272px;
    height: 92px;
    margin: 0 auto;
    margin-bottom: 35px;
}

/* Estilos de la etiqueta img del logo, usando el inherit se evita cambiar manualmente el valor del width de la etiqueta img, y lo va a heredar del contenedor del logo */
main .main-logo img {
    width: inherit;
}

Aqui pueden encontrar todos los doodles especiales que hace google para conmemorar diferentes fechas , por si quieren agregarlos a su proyecto https://www.google.com/doodles/

main .main-logo {
    width: 530px;
    margin: 0 auto;
    margin-bottom: 35px;
}

main .main-logo img {
    width: 300px;
    
}```

no hace falta repetir margin y margin-bottom, puedes poner margin: 0 auto 20px, y tendr谩s el shortcode correcto sin repetir.

Para los logos e im谩genes, sale m谩s facil ir a la p谩gina de google > mouse button 2 > abrir imagen en nueva pesta帽a > copiar el url

Me encanta este curso

Eleg铆 este Doodle, pero aqu铆 pueden encontrar todos los Doodles de Google:

https://www.google.com/doodles/freddie-mercurys-65th-birthday

DISPLAY
El display tiende a referirse a un tipo de comportamiento que se le puede dar a un elemento.
.
POSITION:
Darle al elemento una ubicaci贸n en espec铆fica y a la vez un comportamiento que defina su estado.
.
En mi humilde opini贸n, 驴Cu谩l ser铆a tu definici贸n?

Para aclarar un poco mas la propiedad text-align
Esta propiedad se usa para alinear el contenido de los elementos de un bloque, pero no puede utilizarse directamente sobre el contenido que se desea alinear

Valores permitidos

left

right

center

justify

**Fuente: https://uniwebsidad.com/libros/referencia-css2/text-align **

gracias

Yo en esta secci贸n lo hice con flex, supongo que se pueden aplicar diversas perspectivas y encontrar la misma soluci贸n. Lo que si me complica un poco en el desarrollo es:
驴Cu谩ndo debo crear contenedores de elementos para manipularlos correctamente?

Ya que esto es lo que me hace perder m谩s tiempo a la hora de manipular elemento con css para darle estilo. Pasa lo que muchos han comentado, no toma alguna regla dada, o aplica de forma distinta a la deseada.

Fundamental! => metanle a FLEXBOX y GRID 鈥 son f谩ciles de aprender y los van a salvar el dia de ma帽ana a la hora de maquetar :3

Por qu茅 coloc贸 text-align: center (no funciona s贸lo para texto?) y a la vez fue necesario colocar lo de margin auto para centrarlo?

<main class="main">
        <section class="container-box">
            <article class="container-article">
                <div class="content">
                    <div class="content__logo">
                        <img src="/img/logo-google.png" class="logo-google" alt="Logo Google">
                    </div>
                    <div class="content__search">
                        <span class="material-icons">search</span>
                        <input type="text" class="input__search">
                        <a href="#" class="micro__search">
                            <span class="material-icons">
                                mic
                            </span>
                        </a>
                    </div>
                    <div class="content__btns">
                        <div class="btns btns__01">
                            <input type="submit" value="Busca con Google" class="input__submit" />
                        </div>
                        <div class="btns btns__02">
                            <input type="submit" value="Me siento con suerte" class="input__submit" />
                        </div>
                    </div>
                    <div class="content__info">
                        <h5 class="f-size-13">Ofrecido por Google en: <a href="https://www.google.com/setprefs?sig=0_JJ4tMHhsEW_PKw0SPdZSNlS8ccw%3D&hl=es-419&source=homepage&sa=X&ved=0ahUKEwi1s-W0rpTsAhXMhOAKHWKtDicQ2ZgBCA8">Espa帽ol (Latinoam茅rica)</a></h5>
                    </div>
                </div>
            </article>
        </section>
    </main>
.main{
    height: 60vh;
}
.container-article{
    min-height: 400px;
}
.content{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.content__logo{
    display: flex;
    justify-content: center;
}
.logo-google{
    width: 50%;
}
.content__search{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 58.2rem;
    border: 1px solid var(--br-01);
    border-radius: 25px;
    margin-top: 2.8rem;
    
}
.input__search{
    border: none;
    width: 75%;
    padding: 1.5rem 2rem;
}
.input__search:focus{
    outline: none;
}
.content__btns{
    display: flex;
    justify-content: space-between;
    flex-direction: row;
}
.btns{
    margin: 1.8rem 0.5rem;
}
.input__submit{
    background-image: -webkit-linear-gradient(top,var(--color-04),var(--color-03));
    background-color: var(--color-02);
    border: 1px solid var(--color-02);
    border-radius: 4px;
    color: var(--text-05);
    font-family: arial,sans-serif;
    font-size: 14px;
    margin: 11px 4px;
    padding: 0 16px;
    line-height: 27px;
    height: 36px;
    min-width: 54px;
    text-align: center;
    cursor: pointer;
    user-select: none;
}
.input__submit:hover {
    box-shadow: 0 1px 1px rgba(0,0,0,0.1);
    background-image: -webkit-linear-gradient(top,var(--color-05),var(--color-03));
    background-color: var(--color-05);
    border: 1px solid var(--br-02);
    color: var(--text-03);
}
.content__info h5{
    font-weight: normal;
    color: var(--text-03);
    margin: 0;
}
.content__info a{
    color: #1a0dab;
}
.content__info a:visited{ 
    color: #609;
}
.content__info a:hover, .content__info a:active{ 
    text-decoration: underline;
}

En mi caso el tama帽o de la imagen no se ajust贸 hasta que le colocamos el a帽o expl铆citamente con la etiqueta IMG. 驴Hay alguna explicaci贸n para esto?

Tengo una pregunta, para las etiquetas de img 驴ya no se utiliza el figure? o 驴si? alguien me puede explicar si si o no y el porque?

En la parte del logo de Google de preferencia copien el link del logo original de la misma web y luego le ponen los estilos que indica el compa帽ero abajo.

https://www.google.com.pe/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png

para que no se compliquen buscando la medida perfecta del logo, nada mas vayan a la pagina principal de Google, y denle click derecho y desc谩rguenla, as铆 se las va a descargar con las medidas exactas para linkearlo a su img.

Genial, vamos quedando muy bien

perfecto 馃槃

Genial!

Me encantan las buenas practicas.

Good!

funciona tambien con un gif

Dani lo hace tan f谩cil.

Pueden encontrar el logo de Google aqu铆

Este profe es mas tranqui , re piola se re maneja , explica despacio y entendible , bien ah铆 profee

Muy buena la explicaci贸n del margin: 0 auto;

Me espante cuando apareci贸 la imagen en grande

Yo use en el body un display flex para poder separar las 3 secciones con space-between.

Clase 11 - Estilos en la secci贸n principal


驴C贸mo podemos centrar el contenido de un elemento contenedor?

  • Con la declaraci贸n:
text-align: center;

驴En que nos ayud贸 la incorporaci贸n de Flexbox y Grid?

  • En posicionar de manera f谩cil elementos.

驴C贸mo podemos centrar una imagen de manera horizontal?

  • Con la declaraci贸n:
margin: 0 auto;
  • Lo que estamos haciendo con esta declaraci贸n es indicando que arriba y abajo queremos un valor de 0 para su margen y con el valor de auto para los lados derecho e izquierdo lo que hacemos es decir que divida el espacio disponible en ambos lados.

驴Podemos usar la declaraci贸n margin: 0 auto; con elementos con display inline?

  • No, este m茅todo de centrado solo funciona con elementos con display block.

驴La declaraci贸n margin: 0 auto; se puede usar para que el elemento sea flexible?

  • S铆.

Creer铆a que as铆 quedar铆a el main si usamos display:flex

main {
    /* margin-top: 150px;
    text-align: center; */
    width: 100%;
    height: 70vh; 
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center; 
}

Otra forma de 鈥渋nspeccionar鈥 lo que vas maquetando es agregar una l铆nea s贸lida con la propiedad 鈥渙utline鈥, la cual no ocupa espacio y no te altera las medidas. Con ella puedes visualizar todas las secciones que vas creando. Cuando finalices simplemente la eliminas o la comentas.

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    outline:1px solid red;
}

Tomando algo de forma.
隆Feliz 2023! Si lo estas viendo en a帽o nuevo.

y si se le da al main un max-width de 650px al main?? y un margin auto?

por que tanto div ??? yo casi no uso div para que tanto contendor solo con el section ya deberia manipular los elementos hijos, me parece que hay divs innecesarios o por que lo hace ?

Yo alinee mis items con Flex-box, aqu铆 dejo el c贸digo que us茅.

main {
display: flex;
align-items: center;
flex-direction: column;
width: 100%;
height: 500px;
}

Link del mismo logo de Google

Tiene las medidas 272x92 px

Usando esta imagen nos ahorramos las l铆neas de la clase main main-logo img en el CSS:

en el minuto 5:45 es bueno aclarar que el margin: 0 auto, solo funciona si tiene un width. 馃槃

Hola. Les comparto este repositorio que sirve de gu铆a para el examen final, pues contiene las preguntas que se encuentran en el examen, la justificaci贸n y el video del curso donde se habla sobre eso. Espero y les sea de utilidad 馃槃.
Platzi-Test

grid y flex,han ayudado a tener mayor facilidad en el posicionamiento.

imagen google png link

ESTE ES EL MIO DEL 2022:

me gusta como el profe va explicando cada parte del proyecto.Gracias!

felicito a platzi y a todos su profesores en especial a el profesor Diego de Granda uno de los grandes!!