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
Chrome Dev Tools
Header Google Clone
Maquetado del Header
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
Aún no tienes acceso a esta clase
Crea una cuenta y continúa viendo este curso
Crear cuenta
Si ya tienes una cuenta,
Iniciar sesión
Estilos en la sección principal
11/17Recursos
Aportes 143
Preguntas 24
Ordenar por:
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.
Cual seria la diferencia entre:
Text-align: center; Y Justify-content:center;
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)
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 😄
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
En este enlace les dejo la imagen del logo de Google. 🔥🔥🔥
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)
Ahorre código copiando el enlace del logo directamente en Google, ya venía con el tamaño real.
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 )
Muy buen profesor
Genial, he aprendido mucho!
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!!
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
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
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>```
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”
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/
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.
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
Super este curso, pero es buena practica poner algo en el alt que permite definir lo que es la imagen! Nunca pares de aprender!
no hace falta repetir margin y margin-bottom, puedes poner margin: 0 auto 20px, y tendrás el shortcode correcto sin repetir.
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
Podemos aplicar en el logo también
margin: 0 auto 35px;
Asi va mi proceso me parece muy buena esta clase.
Duda rapida:
en el curso definitivo de HTML y CSS se explica que es mejor usar rem en lugar de los pixeles, en estos casos para los posicionamientos de los margenes, etc.
¿es mejor utilizar rem o px? y ¿Porque?
De la página de google se puede sacar directamente el enlace del logo y y colocarlo en el src de la imagen, ya tiene las dimensiones espécíficas sin necesidad de modificarlas
</img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="logo-google">
Seria mas interesante aprender a hacer el logo de GOOGLE con figuras
Les dejo el link de la imagen google por si les hace falta
https://cdn.geekwire.com/wp-content/uploads/2015/09/Screen-Shot-2015-09-01-at-9.04.04-AM-620x301.png
vamos que vamos
Thanks teacher.
muy buena enseñanza
Ok entonces margin auto, define el tamaño dividiendo entre dos
<section class="main-logo">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Google_2015_logo.svg/1280px-Google_2015_logo.png" alt="">
</section>
main .main-logo {
width: 530px;
margin: 0 auto;
margin-bottom: 35px;
}
main .main-logo img {
width: 300px;
}```
Excelente clase!
Genial, sigamos con la siguiente clase.
¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.