Estilos en la sección principal

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.

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

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 😉

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

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;

Link de la imagen
https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ7GehYKdImLiMpzSon3pKKLVhwGS_S4Ssjj9WHNIfUYXZiyrzk7w&s

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 “text-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, “margin: 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 “position: absolute”, para ello su contenedor debe tener “position: relative” y movemos el eje hacia su centro con “transform” 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 “Application”

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

URL Google: https://img.pngio.com/google-logo-2015-png-image-purepng-free-transparent-cc0-png-google-logo-transparent-10000_3382.png

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

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

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>```

El logo de google en png: https://upload.wikimedia.org/wikipedia/commons/archive/2/2f/20150901171201!Google_2015_logo.svg

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.

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

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/

imagen de google desde inspeccionar :
https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png

“Tips”, muy útiles.

https://img.pngio.com/google-logo-2015-png-image-purepng-free-transparent-cc0-png-google-logo-transparent-10000_3382.png

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?

url de Google = https://assets.stickpng.com/images/580b57fcd9996e24bc43c51f.png

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í

• Logo

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 “inspeccionar” lo que vas maquetando es agregar una línea sólida con la propiedad “outline”, 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!

Si quieren agregar el logo clásico de Google:
URL :
https://upload.wikimedia.org/wikipedia/commons/thumb/c/c9/Google_logo_(2013-2015).svg/1024px-Google_logo_(2013-2015).svg.png

Logo de Google:
https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png

Por acá comparto la imagen de la lupa
https://upload.wikimedia.org/wikipedia/commons/thumb/7/7e/Vector_search_icon.svg/945px-Vector_search_icon.svg.png

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

Imagen de Google, 272x92:
https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png