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.
Introducción
#PlatziCodingChallenge || PlatziCodingChallenge
Lo que aprenderás sobre HTML y CSS
Análisis y creación del proyecto
Análisis del proyecto Google Clone
Configuración del proyecto
Chrome Dev Tools como herramienta
Qué son las Chrome Dev Tools
Header Google Clone
Qué es el Header y cómo hacer su maqueteado
Agregando estilos al Header
Posicionar una lista en horizontal
Manejo de íconos e imágenes en etiquetas
Contenido principal Google Clone
Maquetado de la sección principal
Estilos en la sección principal
Estilos en la sección del input
Íconos y manejo de background hover
Estilos en los botones
Footer Google Clone
Maquetado del Footer
Estilos en Footer
Cierre
Cierre: diferencias entre CSS Grid y Flexbox
Comparte tu proyecto y certifícate
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
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.
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.
Tendríamos un resultado como este:
¡Genial! Sigamos avanzando con nuestra segunda sección.
Contribución creada con aportes de: Daniel Jonguitud y José Miguel Veintimilla.
Aportes 157
Preguntas 31
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 😉
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;
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
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>```
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:
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/
imagen de google desde inspeccionar :
https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png
“Tips”, 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?
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í
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.
¿Cómo podemos centrar el contenido de un elemento contenedor?
text-align: center;
¿En que nos ayudó la incorporación de Flexbox y Grid?
¿Cómo podemos centrar una imagen de manera horizontal?
margin: 0 auto;
¿Podemos usar la declaración margin: 0 auto; con elementos con display inline?
¿La declaración margin: 0 auto; se puede usar para que el elemento sea flexible?
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
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
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?
o inicia sesión.