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
¡Continuemos con nuestro proyecto! En esta ocasión, aprenderemos a extraer la imagen de perfil directamente de la página de Google, así como el ícono de navegación.
Ten en cuenta que para este paso vamos a usar una imagen alojada en un servidor ajeno a nosotros, por lo que se tratará de una ruta absoluta. Puedes encontrar la imagen aquí.
Lo primero es aplicar una clase a la etiqueta en que se encuentra nuestro ícono y eliminar el texto para que no entre en conflicto con el ícono.
Procedemos a aplicar los estilos en nuestro archivo CSS.
Deberíamos tener este resultado:
Para empezar este paso, debemos obtener el enlace de nuestra imagen de perfil de Google.
Vayamos a google.com y hagamos clic derecho en nuestra foto.
Clic en inspeccionar.
Vemos que la consola nos posiciona justo en la url de nuestra foto.
Copiamos ese enlace.
Vamos a nuestro archivo HTML y cambiamos el contenido de nuestra barra de navegación Photos e insertamos una etiqueta img en su lugar.
Pegamos el enlace en el atributo src.
Nota: probablemente la URL sea demasiado larga para que la veas completa en la pantalla de tu editor. Para evitar ese molesto scroll, ve a la pestaña View de tu editor y activa la función Word Warp.
Deberías poder observar tu imagen ya incrustada en tu proyecto:
Como te podrás dar cuenta, faltan algunos detalles para que se parezca a la página original de Google. Vamos a nuestro archivo CSS.
Como final tu header debería tener este estilo:
Adicionalmente, te dejo una lista de sitios en los que puedes encontrar íconos para tus proyectos:
¡Perfecto! Acabamos de darles los estilos al header de nuestro proyecto. Sigamos trabajando en ello.
Contribución creada con aportes de: Anggi Vanesa Pallares Solis y José Miguel Veintimilla.
Aportes 194
Preguntas 81
Aquí les dejo un enlace donde el equipo de diseño de google ofrece usar sus íconos para descargar en PNG y SVG: https://material.io/resources/icons/?style=baseline
Aunque aquí se usa una imagen como ícono para fines prácticos, en un proyecto real no es bueno usar imágenes como íconos, esto porque las imágenes suelen añadir más peso y tiempo de carga a las páginas, la tendencia hoy en día es usar íconos como SVG o como pseudo-elementos de CSS, para esto existen varias páginas, como lo es FontAwesome, pero si tu quieres crear tus propios íconos y transformarlos a imágenes, te recomiendo mucho usar icomoon, donde tu puedes subir tus imágenes como SVG y icomooon se encargará de crearte tu paquete de iconos personalizados:D!
Actualmente la url de la imagen de usuario ya no se encuentra en el CSS ni en la etiqueta SPAN, sino directamente en el HTML de Google. Es importante revisar el código de todos modos, pero aquí la dejo:
https://lh3.googleusercontent.com/ogw/ADGmqu9yv6YQHk4RPmO4bLrZUTc9EJGT6AdP1S27EDDA=s32-c-mo
En la siguiente página pueden encontrar varios íconos, colorearlos a su gusto y para descargar.
Si les paso como a mi que la foto les sale más grande pueden agregar al estilo de img un height: 32px; y width: 32px;
Estas dimensiones son las que google utiliza en esa foto en específico.
Lo más importante acá fue lo de Toogle Wrap JAJAJA ❤️
Te comparto mi icono creado con muchos divs y algo de css
<a href="">
<li class="squares">
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
</li>
</a>
.squares {
width: 20px;
height: 20px;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
.square {
width: 4px;
height: 4px;
background: #5F5F5F;
margin: .7px .8px;
}
Para la imagen de perfil no usé la de google, sino que la enlacé de la misma manera que enlacé el icono del menú, creando una clase llamada photo y haciéndole unos arreglos con margin y radius.
nav .nav-right-section .photo{
background-image: url('https://pbs.twimg.com/profile_images/1197294940449058817/nwnf9lP1_400x400.png');
background-repeat: no-repeat;
background-position: center;
background-size: contain;
width: 35px;
height: 35px;
border-radius: 50%;
margin-left: 5%;
}
Se que no tiene mucho que ver pero les comparto el bg del profe.
Si quieren agregar una imagen desde su equipo local y en CSS darle el estilo redondeado.
<li><a href="#"><img src="/Images/avatar.jpg" alt="" /></a></li>
css
nav .nav_right_section img {
border-radius: 50%;
margin-left: 15px;
width: 32px;
height: 32px;
}
A la hora de colocar esos estilos e imágenes por mi cuenta, me tardé un montón y cometí bastantes errores que quedaron claros al ver ésta clase.
Me doy cuenta que me falta muchísimo por aprender
Es mucho más fácil cuando el profe lo hace jaja
¿Cual es el beneficio de traer toda la estructura de árbol en lugar de llamar solo la clase? Es una duda enorme
Una opción genial es usar un proveedor de iconos, por ejemplo Font Awesome.
En Visual Studio Cade con Alt + Z
también se puede hacer hace el Toggle Wrap.
La propiedad background es un shorthand así que podrían utilizarlo así,
.icon-menu {
width: 30px;
height: 30px;
cursor: pointer;
background: url(../images/icon-menu.png) no-repeat center;
background-size: contain;
}
Les recomiendo usar Material design para poner el íconos.
Para hacerlo solo tienen que hacer lo siguiente.
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
<span class="material-icons md-24">apps</span>
Yo siempre me preguntaba porque en mi Visual Studio Code (a diferencia de mis profesores) no podia ver todo el código completo en la pantalla, debia hacer scroll lateral, despues de esta clase aprendi el truco. Es mucho más cómodo trabajar así 😉
Dentro de VSC en view le das click a Word wrap
si quieren que al pasar el mouse se sombree el menu icon y la foto de perfil tal como pasa en la pagina de google, solo necesitan agregar un borde transparente y luego con hover hacen que cambie de color a un gris claro
nav .nav-right-section .menu-icon{
background-image: url("/assets/menu.png");
background-repeat: no-repeat;
background-position: center;
background-size: 16px;
width: 32px;
height: 32px;
border: 4px solid transparent;
}
nav .nav-right-section .menu-icon:hover{
background-color: #e2e2e2;
border: 4px solid #e2e2e2;
border-radius: 50%;
}
nav .nav-right-section .profile-photo{
margin-left: 10px;
width: 32px;
height: 32px;
border-radius: 50%;
border: 4px solid transparent;
}
nav .nav-right-section .profile-photo:hover{
border: 4px solid #e2e2e2;
}
y listo
Cada día aprendo cosas nuevas con estos cursos. Conocimiento al 100%
Por si acaso en ATOM, van a View y es la opción Toogle Soft Wrap⚡⚡⚡
Alt + Z también hace el Toggle Wrap en VS Code.
En qué casos usamos img y background-image? Osea, cómo saber cuándo es mejor usar una u otra?
Me parece mejor aplicar la imagen en HTML que en CSS
Pueden buscar iconos para sus proyectos en Material Design.
Yo descargué la imágen .png de el icono de apps de aquí, agregué la imágen a la carpeta assets de mi proyecto para utilizarla en mi index.html
El tamaño de la foto es 32X32. Hay que agregar un atributo de “width=32” a la etiqueta img
Para encontrar íconos para sus proyectos les recomiendo ir a iconos8.es
Les comparto una pagina donde pueden descargar muchos iconos https://icons8.com. Saludos
Les comparto el código por si quieren poner en la imagen de perfil las iniciales de su datos:
HTML:
<li class="avatar">
<a href="">JC</a>
</li>
CSS:
nav .nav-right-section .avatar{
background-color: red;
width: 34px;
height: 34px;
text-align: center;
line-height: 34px;
border-radius: 50%;
margin-left: 15px;
}
nav .nav-right-section .avatar a{
padding: 0 5px;
text-align: center;
color: white;
font-size: 17px;
font-weight: bold;
}
En el reto esta parte se me hizo un poco fastidiosa, no conseguia ningun icono decente.
¡Brutal! se afianzan muy bien los conocimientos vistos en el curso de desarrollo web online.
¡Hola! Si no encontré el link al inspeccionar el código y subí una imagen desde mi local pc, ¿cuáles serían las medidas para que esté del tamaño correspondiente o las propiedades que debería modificar? Gracias, saludos.
Gracias profe yo creo que hasta el momento este debió ser el primer curso tomado
quedo muy bien el header, y muy buena la forma de poner el icono y la imagen
Recomendadisimo usar iconos, de poderse imágenes en formato SVG. Son vectores y no se pixelan a la hora de hacer zoom.
Generalmente pongo los iconos a nivel del html, tiene alguna repercusión?
Es mejor las imágenes en las carpetas con la URL
<img src="img/covi.jpg" width="100%" >
Ese tip del VS - Code >> _View >>toggle Word Wrap _ fue Dios.
cuando habilita el toggle word wrap te funciona en el momento, si cierras la ventana y vuelves abrir, nuevamente te toca ir al menú para componerla.
En VSCode puedes tener ese valor por defecto en los settings, para que no tengan ese problema.
Preferences - Settings y puedes buscar Word Wrap
También pueden ir a open settings JSON y colocar la siguiente linea.
"editor.wordWrap": "on"
Va tomando forma el Proyecto, se ve interesante y al enfocarse con el micro-learning le dan al clavo si saben direccionar pedagógicamente cada material al objetivo que se desea.
Una pregunta, para CSS es más recomendable trabajar con px, em o rem?
Hice un tutorial de como agregar iconos sin usar imágenes, les dejo el link, espero les sirva compañeros
Woo! genial! Gracias, Excelente clase!
excelente para reparar y observar nuestros errores
No habia entendido muy bien el background-img hasta ahora. Buena clase.
Hay alguna diferencia entre colocar las imagenes estaticas (Iconos, logos, etc) en forma de background, o colocarlas dentro de una etiqueta <a>? Ya que veo más facilidad y simplicidad en el código agregandolas asi:
<li><a><img src=“icon.png”></a><li>
que tener que ajustar todos esos valores en el background. Opiniones?
toggle Word Wrap me sirvió demasiado, no esperaba aprenderlo en este curso, brutal !!
Awesome!
Les comparto una forma de implementar iconos de Google desde Google Fonts. 😄
Pueden implementar los iconos ofrecido por Google de forma gratuita desde su página de Google Fonts.
Para implementarlo tienen que incluir esta línea de en su head
en el HTML.
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
Otras formas de implementar los iconos de Google.
Luego para poder usarlo tienen que seleccionar el icono que quieren usar y pegar la etiqueta span que les aparece en el lateral derecho de la pantalla.
Si quieren usarlo en otra etiqueta, aparte de la span, pueden copiar el nombre de la clase y pegarla en donde desean usarla junto con el contenido que necesita el icono para funcionar.
<a href="#" class="material-icons">apps</a>
En caso de tener algún problema al querer usar algún icono, en la clase de su etiqueta de HTML simplemente copie y pegue class="material-icons"
.
<etiqueta class="material-icons"> nombre del icono </etiqueta>
yo en la parte del icono de las aplicaciones no puse la imagen si no que se me dio por experimentar y hacer los puntos con div
<li>
<a href="" class="enlce">
<div class="cajas">
<div class="conteiner__cajas">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
</a>
</li>
.cajas{
width: 20px;
}
.conteiner__cajas{
display: grid;
display: flex;
flex-wrap: wrap;
gap: 1.9px;
}
.conteiner__cajas div{
width: 5px;
height: 5px;
background-color: white;
border-radius: 50%;
margin-top: 0.4px;
}
Intenté clonar el de Platzi
al utilizar el icono de menu como imagen de fondo y quitar el contenido del link “icon” al pasar el cursor por encima este no genera la manito, porque entiende que es un lugar vacio, con un lindo fondo claro, pero vacio como la existencia
En mi caso al presionar <inspeccionar> a la página de Google, no me salía el background-image.
Para poder colocar mi foto hice click derecho sobre la foto > copiar dirección de imagen y luego lo añadí al código de HTML.
Resumen
1
2
3
4
5
6
7
8
9
muy buen video la verdad cuando yo lo hize sin ver los videos ocupe position para separar el icono y la imagen aunque yo no ocupe icono sino que los hize con puros divs de color negro XD
Hice el ícono de los cuadrados uniendo 9 cuadrados de ícono :c
Me gusta mucho este curso. Este profesor explica de una manera sencilla pero super bien.
Estoy tratando de poner una imagen de mi trabajo pero no me funciona. Voy a seguir aprendiendo y nunca parar de aprender.
Acá mi resultado del header. (Lo he hecho por mi cuenta entonces habrá alguno que otro error y es diferente al de Diego). El ícono de los círculos está en SVG, lo saqué inspeccionándolo en la web oficial de Google, lo mismo la foto:
Por si alguien lo quiere insertar igual en su código, acá les dejo lo que hice yo:
HTML:
<li class="li-svg">
<a href="/" role="button" name="Google Aps"
><svg class="navbar-svg" focusable="false" viewBox="0 0 24 24">
<path
d="M6,8c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM12,20c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM6,20c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM6,14c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM12,14c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM16,6c0,1.1 0.9,2 2,2s2,-0.9 2,-2 -0.9,-2 -2,-2 -2,0.9 -2,2zM12,8c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM18,14c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM18,20c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2z"
></path></svg
></a>
</li>
CSS:
.navbar-svg {
color: rgba(255, 255, 255, 0.87);
fill: currentColor;
width: 40px;
height: 40px;
padding: 8px;
vertical-align: middle;
}
.li-svg {
padding: 4px;
}
Podemos agregar la declaración de cursor: pointer; a la clase de .menu-icon para que se cambien el cursor sobre la imagen de menú:
nav .nav-right-section .menu-icon {
background-image: url("https://static.thenounproject.com/png/756729-200.png");
background-repeat: no-repeat;
background-position: center;
background-size: contain;
width: 25px;
height: 25px;
cursor: pointer;
}
Les comparto estas herramientas donde se pueden descargar los iconos
otra manera de hacerlo es
background-image:url('//ssl.gstatic.com/gb/images/i1_1967ca6a.png')
y agregarle
background-position: -132px -38px;
hay varios trucos en VS estudio que nosabia el
menu vista - opcion togle
plugin live server live server 👍
Gracias a este vídeo mejore el rendimiento de mi página! ya que es mejor siempre referenciar las imágenes e íconos a través de urls en vez de descargarlas y guardarlas dentro de tu proyecto, ya que hace la carga del mismo mucho mas lenta en el navegador. Además que al ser archivos binarios a Github se le complica un poco manejarlos al subirlos como parte del proyecto. Muy buena clase!
La url de la imagen del perfil de google la encontré directamente en el código html con el inspector de elementos.
Este es el icono según el propio Google
<a href="#"><svg focusable="false" viewBox="0 0 24 24">
<path
d="M6,8c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM12,20c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM6,20c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM6,14c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM12,14c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM16,6c0,1.1 0.9,2 2,2s2,-0.9 2,-2 -0.9,-2 -2,-2 -2,0.9 -2,2zM12,8c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM18,14c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM18,20c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2z">
</path>
</svg></a>
En VSCode presionas ALT + Z = Toggle Word Wrap
https://materialdesignicons.com/
Aqui pueden descargar muchos iconos tambien
Genial, todo va muy rapido de alguna manera pero se entiendo muy bien
View/Toggle Word Wrap o pueden utilizar Alt + z para que el código se acomode al tamaño de la pantalla que tengan.
en los casos que yo tenga un icono descargado de, por ejemplo; flaticon como haría? porque ahí tengo que hacerlo en una clase.
Yo lo hice de este modo, pero debe de haber una mejor forma {más semántica de hacerlo}
<div class="cuadrado"><div class="flaticon-mostrar-boton-de-aplicaciones"></div></div>```
Compañeros, a qué se debe que la imagen colocada para la clase .menu-icon sea solo sea visible hasta que las etiquetas que señalo (1,2,3,4) en mi código son colocadas? Es decir, si las comentara o si no estuvieran, mi ícono no se vería a pesar de estar poniendo el link de la imagen. Por qué pasa eso?
nav .nav-right-section .menu-icon {
background-image: url("https://static.thenounproject.com/png/756729-200.png");
background-repeat: no-repeat;
background-position: center; /*1*/
background-size: contain; /*2*/
width: 25px; /*3*/
height: 25px; /*4*/
}
Tuve algunos problemas con los selectores decidi mejor hacerlo con ids
body{
margin: 0;
padding: 0;
font-size: 13px;
font-family: Arial, Helvetica, sans-serif;
}
/* -------------------Header------------------- */
header{
display: flex;
width: 100%;
height: 60px;
flex-direction: row-reverse;
align-items: center;
}
header nav ul li{
display: inline;
margin: 0 15px;
}
a{
color: black;
text-decoration: none;
}
li{
height: auto;
width: auto;
}
ul{
display: flex;
align-items: center;
}
.menu-icon img{
background-position: center;
background-size: contain;
width: 25px;
height: 25px;
align-self: flex-end;
}
#imagen-perfil{
border-radius: 20px;
}
¿Cual es la diferencia entre usar la etiqueta HTML img o usar la propiedad de CSS background-image?
yo lo que avia puesto era poner las dos imagenes en el html y editarlas con css, pero el lo hizo de dos maneras xD
Estupenda clase instructor Diego, yo hubiera usado una imagen en la carpeta pero utilizar el enlace que Google usa para nuestra foto de perfil fue una buena idea.
Las propiedades de fondo CSS se utilizan para definir los efectos de fondo para los elementos.
color de fondo: background-color
imagen de fondo: background-image
repetición de fondo: background-repeat
adjunto de fondo: background-attachment
posición de fondo: background-position
literal este curso es lo que es, es practico
Dejo aquí la imagen oficial que usa google para los iconos e imágenes:
Que bonito…ahi vamos
Otra manera de agregar la imagen de perfil:
Este es el codigo que use para agregar la imagen pero desde el css y con una clase en el li de la imagen.
HTML
<li class="menu__photo">
CSS
nav .nav-right-section .menu__photo{
background-image: url('/img/unnamed.jpg');
background-repeat: no-repeat;
width: 25px;
height: 25px;
border-radius: 50%;
background-size:contain ;
}
Recuerden agregar la altura y el ancho cuando lo hagan como el profe.
Así vamos 😎
¿En equipos de trabajo quién se encarga de proporcionar las imágenes que se van a usar en un proyecto?
¿Cómo se llama la carpeta en la que almacenamos las imágenes, videos y fuentes tipográficas externas que podemos usar en nuestros proyectos?
¿Podemos poner una imagen como fondo con CSS?
¿Cómo podemos colocar una imagen de fondo con CSS?
background-image: url('https://static.thenounproject.com/png/756729-200.png');
¿Para qué nos sirve la propiedad background-repeat?
¿Cómo podemos evitar que una imagen como background se repita?
background-repeat: no-repeat;
¿Por qué una imagen como background se puede repetir?
¿Cómo podemos posicionar una imagen de fondo usando CSS?
background-position
¿Para qué nos sirve la declaración background-size: contain?
¿Para qué nos sirve la propiedad border-radius?
border-radius: 50px;
Header
Hola a todos, quiero compartirles otra manera de incluir el ícono de las Apps oficial del Material Desing de Google a la barra de navegación:
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
Pegan esta línea de códido en el Head del proyecto.
2. Dentro de la etiqueta a dónde va el ícono pegan la siguiente línea <span class="material-icons">apps</span>
con lo cual el arbol del HTML les debería quedar de la siguiente manera:
<li>
<a href="#">
<span class="material-icons">
apps
</span>
</a>
</li>
Y ya con eso les aparece el mismo ícono de menú en su proyecto de una manera más rápida.
Pueden consultar más información de como incluir los íconos en la siguiente página: https://developers.google.com/fonts/docs/material_icons#icon_font_for_the_web
tuve que retroceder y ver este curso para repasar un monton de cosas! excelente diego!
Al igual que podemos buscar fuentes en Google Fonts, se pueden descargar iconos desde [Google Fonts Icons], estan todos los que necesiten y mas si queremos recrear al mismo buscador de Google. (https://fonts.google.com/icons?icon.query=account)
En el screen de abajo, vemos por ejemplo, algunos de los iconos que existen si ponemos “Account” en el buscador.
En esta pagina pueden encontrar diversos iconos https://www.flaticon.com/free-icons/google
Espero les sirva 😃
(
La foto de perfil ya no se encuentra en la etiqueta <spam sino en un <img class, cierto!!!
Otra manera de llamar a los elementos en nuestra hoja d eestilos es a través de la pseudoclase ilustrada. Asi nos evitamos colocarle tantas clases a nuestro código. Si creen que es una mala práctica hacerlo asi me podrían corregir o dar algun feedback respecto a ello (soy nuevo en esto)
Al igual que fonts, google también tiene íconos para utilizar, basta con copiar el link en head y el span del ícono que nos brinda para utilizarlo, les dejo la página
Para usar la herramienta toggle wrap mas rapido podemos usar Alt + z
Alt + z es el atajo para el ajuste de palabra lo recomiendo casi siempre si es que trabajas en una pantalla pequeña(como la mía) y quieres tener abierto al mismo tiempo la ventana del vs code y el navegador para ver tus clases, te facilita el escribir código la verdad.
Pueden descargar el icono de Google fonts en la pestaña de iconos
Yo que me mate haciendo el icono con div y css en la primera clase y pude haber buscado el icono jajaja
Ahi puse un div con 9 divs dentro que son los circulos y use estos estilos
.icono{
display: flex;
width: 20px;
height: 20px;
flex-wrap: wrap;
justify-content: space-evenly;
margin-left: 20px;
margin-right: 20px;
}
.icono:hover{
background-color: var(--bottom-color);
width: 23px;
height: 23px;
}
.circulos {
background-color: aliceblue;
border-radius: 50%;
flex-basis: 20%;
margin: 6%;
}
en eta pagina pueden descargar todos los iconos que pudieran necesitar en algun momento.
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?
o inicia sesión.