#css externo

[batterycitycodes]

Devout like the moonlight — pack trama, rol, baúl de personaje y ficha

PREVIEW — DESCARGA

Se puede cambiar el color dorado, viene donde en el código. Si usan varias en un mismo tema, el color de acento siempre debe ser el mismo para todos los participantes.

CSS externo.

Las imagenes se autoajustan siempre.

No quiten el crédito.

La fuente es Arcane Gold, el link de la webfont viene de mi propio dropbox.

En la cronología les recomiendo que numeren del 1 al 9, luego el cero y vuelvan a empezar. No se rompe, pero visualmente es más bonito si sólo tienen un número.

Se pueden agregar más personajes al code de la trama, tantos como sean necesarios.

A cambio, aunque sea, de dos kofi les agrego atributos a la ficha.

Gifs de Til The End of The Moon.

No tiene scrolls, no tiene hovers ni nada. Se sabe que no me gustan esas cosas, jaja. De hecho, vi varios de mis códigos y dije: tienen demasiadas cosas, quiero hacer algo que tenga muchos espacios.

[maharielresources]

[CODES] Pack The Devil Wears Prada: Firmas

Tablilla para firma con imagen a la izquierda y tablilla para firma con imagen a la derecha.

El estilo está en un CSS externo, por lo que no puedes cambiar colores, ni fuentes.

La estética es de El Diablo Viste de Prada (2006).

Si no lo has hecho ya, consulta los términos de uso para esta y todas mis tablillas.

[solaresources]

Hwang

[TEMPLATE/ROL] hwang

Gente, esse é um código feito com muito carinho por mim, cuida! ‹𝟹

Se for usar, mande uma ask/reblogue/curta, por favorzinho. Nunca retire os créditos, Deus sabe de tudo!

Pagar pegar o código, meu solzinho, clique AQUI.

Muita gente pergunta por que eu não uso CSS externo nos meus templates. A verdade é que prefiro manter tudo inline porque acho mais prático de editar, especialmente quando se trata de ajustes rápidos. Até porque se quiserem roubar o CSS externo não impede isso. Isso também ajuda a evitar certos conflitos ou bugs que às vezes surgem com arquivos externos. Mas claro, se você quiser um template meu com CSS externo, é só me chamar que faço uma versão personalizada pra você!

[necromancercoding]

Necro, sabes como se puede agregar más codigo css al CSS Stylesheet, porque me he pasado de lineas y ahora me dice que muy extenso.

¡Hola anon! Tienes la opción de usar CSS externo (FAQ -> Busca "dropbox" sin las comillas), o usar los templates. Personalmente uso los templates siempre que puedo para tener todo en la propia plataforma. Ciertas cosas no necesitas tenerlas en el CSS principal ocupando espacio:

Lista de miembros -> memberlist_body.

Grupos -> groupcp_info_body y groupcp_user_body.

Subforos -> index_box.

Estadísticas -> index_body.

Perfiles sencillos -> profile_view_body.

Apariencias aisladas del interior de los temas (hovers en avatares, footers, campos de perfil...) -> viewtopic_body.

Registro (pantalla de aceptación de términos) -> agreement.

FAQ -> faq_dhtml.

Edición del sceditor, clases generales (.panel, h1.page-title, etc), formularios, formateo del cuerpo del post -> overall_footer_end.

Con todo eso te ahorrarás una barbaridad de espacio. Otras cosas que pongo en templates dependiendo del peso del skin:

Elementos concretos de navegación, como el switcheroo de Monomer o el código multicuentas de Adven -> overall_footer_end.

Tablillas -> normalmente en el overall_footer_begin, alrededor de la localización de {FOOTER_WIDGETS} (después del primer cierre del bloque html_validation), pero también puede ir en overall_footer_end.

Realmente, las únicas zonas que puedo decir que siempre pongo en el CSS son el header, navegación, tablón, listado de temas, interior de temas (a excepción de lo mencionado arriba) y footer. Son las zonas más repetidas en diferentes templates; y aún así, header+navegación+tablón podrían ir perfectamente en overall_header y el footer en overall_footer_begin/end. Los listados de temas y los posts son las zonas más repetidas entre templates (3 templates los listados de tema: viewforum_body, search_results_topics y privmsgs_body / 7 los posts: viewtopic_body, search_results_posts, posting_preview, posting_topic_review, privmsg_topic_review, privmsgs_preview, privmsgs_read_body) así que cien por cien recomiendo que estén en el CSS.

Lo bueno de tener los CSS por separado es que cuando falle algo sabes donde editar, y además a la hora de armar el skin tienes espacio en el CSS para editar ahí la nueva página y una vez terminada, la mueves al template y dejas de nuevo limpio el CSS.

¡Saludos!

[rossresources]

Bom dia! Notei que quando fui ver o code "Love on the brain" estava sem o link externo de CSS!

Bom dia! Obrigada por avisar, anon anjo!! Já corrigi 💜

[apuntesmagueydiseno]

CSS

Hojas de estilo en cascada (CSS, Cascading Style Sheets) es un lenguaje de estilos que nos ayuda a definir Rubiales (2021) "el aspecto, la presentación y la posición que tendrán los diferentes elementos de una página web", es decir, que nos permiten modificar el diseño de una página web y dar formato a las etiquetas HTML. Entre algunos de los beneficios que tiene el uso de CSS podemos mencionar que es posible separar el contenido de la página del diseño de sus elementos; también, que se puede mejorar la velocidad de carga de nuestro sitio; adicionalmente, es posible cambiar el diseño de las páginas web para se vea acorde al dispositivo desde el cual es consultada (diseño responsivo). Tipos de CSS. Coronado (2024) identifica 4 tipos principales de CSS: ·CSS Inline. Es la aplicación directa de CSS a los elementos HTML con el atributo style, es útil para aplicar estilos específicos, pero dificulta su consulta y favorece la repetición de código (cada elemento debería tener su propio atributo style). ·CSS Interno. Estilos incluidos directamente en el código HTML, mediante la etiqueta <style> dentro del <head>. Es fácil de usar y aplicar, pero no permite el uso en varias páginas al mismo tiempo. ·CSS Externo. Estilos definidos en un archivo CSS separado con terminación .css y que es enlazado a HTML mediante la etiqueta <link>. Este tipo de CSS puede ser utilizado en varias páginas a la vez, sin repetir código, pero debe ser enlazado correctamente para que sea aplicado. ·CSS Importado. Se utiliza la regla @import para incluir varios archivos dentro de un mismo CSS principal. Permite una mejor organización del código al dividirlo en pedazos mas pequeños pero puede afectar la velocidad de carga del sitio.

Referencias. Coronado, B. (2024). Elaboración de hojas de estilo. UF1303. Editorial Tutor Información Rubiales, M. (2021) Curso de desarrollo Web. HTML, CSS y JavaScript. Edición 2021. Anaya Multimedia

[josegremarquez]

Código que genere un menú horizontal en html

código HTML que crea un menú horizontal dentro de un encabezado utilizando la propiedad display y sin un archivo CSS externo, todo dentro de una etiqueta <style>: HTML <!DOCTYPE html> <html> <head> <title>Menú Horizontal con CSS</title> <style> nav { background-color: #f1f1f1; overflow: hidden; } nav a { float: left; display: block; color: black; text-align: center; padding: 14px…

[codigonautas]

Creando Figuras Geométricas con CSS CSS, CSS, CSS3, DiseñoWeb, FigurasGeométricas https://codigonautas.com/crear-figuras-geometricas-css/?feed_id=400&_unique_id=6774464b345ca

[msrlunatj]

Introducción a CSS: Estilizando la Web

Introducción

CSS (Cascading Style Sheets) es el lenguaje que se utiliza para describir la presentación de un documento escrito en HTML o XML. Mientras que HTML estructura el contenido de la web, CSS se encarga de darle estilo, desde la disposición de los elementos hasta los colores y las fuentes. Si estás empezando en el mundo del desarrollo web, aprender CSS es esencial para crear sitios atractivos y funcionales. En este blog, te proporcionaré una introducción a CSS, cubriendo sus conceptos básicos y algunas prácticas recomendadas para que puedas comenzar a diseñar páginas web impresionantes.

1. ¿Qué es CSS?

CSS es un lenguaje de hojas de estilo que permite definir cómo se muestran los elementos de un documento HTML en la pantalla, en papel o en otros medios. Gracias a CSS, puedes separar la estructura de un sitio web de su presentación, lo que facilita el mantenimiento y la escalabilidad del diseño.

a) Características Principales de CSS:

Selección de Elementos: CSS te permite seleccionar y aplicar estilos a elementos HTML específicos o a grupos de elementos.

Diseño Responsivo: CSS facilita la creación de diseños que se adaptan a diferentes tamaños de pantalla, desde dispositivos móviles hasta monitores de escritorio.

Control de Estilos Visuales: Con CSS, puedes controlar el color, el tamaño, la fuente, el espacio entre elementos, y mucho más.

2. Cómo Empezar con CSS

Para comenzar a usar CSS, puedes incluir las reglas de estilo directamente en un archivo HTML o en un archivo CSS separado. A continuación te muestro cómo hacerlo:

a) CSS en Línea:

Puedes aplicar estilos directamente en los elementos HTML utilizando el atributo style.

b) CSS Interno:

Puedes definir un bloque de CSS dentro de la etiqueta <style> en el <head> de tu documento HTML.

c) CSS Externo:

La mejor práctica es usar un archivo CSS separado para mantener el estilo y el contenido por separado.

Contenido de styles.css:

3. Conceptos Básicos de CSS

CSS se basa en reglas que constan de selectores y declaraciones. A continuación te explico los conceptos más importantes:

a) Selectores:

Los selectores indican qué elementos HTML deben ser estilizados.

Selector de Elemento:

Selector de Clase:

Selector de ID:

b) Propiedades y Valores:

Las propiedades son aspectos específicos del estilo que se aplican a los elementos, como color, fuente, y margen.

Propiedad color: Cambia el color del texto.

Propiedad font-size: Cambia el tamaño de la fuente.

Propiedad margin: Define el espacio exterior alrededor de un elemento.

c) Especificidad y Herencia:

La especificidad determina qué reglas CSS se aplican cuando hay conflictos, y la herencia permite que ciertos estilos se transmitan a los elementos hijos.

Especificidad:

Herencia:

4. Diseño de Páginas Web con CSS

CSS permite controlar el diseño y la disposición de los elementos en una página web, facilitando la creación de sitios visualmente atractivos y organizados.

a) Modelos de Caja (Box Model):

Cada elemento en CSS se representa como una caja que comprende márgenes, bordes, rellenos y el contenido.

b) Layouts (Diseños):

CSS proporciona varias técnicas para organizar elementos en una página, incluyendo Flexbox y Grid.

Flexbox:

Grid Layout:

c) Media Queries y Diseño Responsivo:

Las media queries permiten que los diseños se adapten a diferentes tamaños de pantalla, lo que es fundamental para crear sitios web responsivos.

5. Recursos para Aprender Más CSS

Documentación Oficial:

MDN Web Docs: Una guía completa que cubre todo lo que necesitas saber sobre CSS.

Tutoriales en Línea:

CSS-Tricks: Un sitio repleto de tutoriales, ejemplos y trucos para mejorar tu uso de CSS.

W3Schools: Un recurso fácil de seguir para aprender los fundamentos de CSS con ejemplos prácticos.

Libros Recomendados:

“CSS: The Definitive Guide” de Eric A. Meyer: Un recurso profundo para desarrolladores que quieren dominar CSS.

“CSS Secrets” de Lea Verou: Este libro revela técnicas avanzadas para crear efectos y diseños sorprendentes con CSS.

Conclusión

CSS es una herramienta poderosa para cualquier desarrollador web. Desde controlar la apariencia básica de los elementos hasta diseñar sitios complejos y responsivos, el dominio de CSS te permitirá crear experiencias web atractivas y profesionales. Comienza practicando con los conceptos básicos, y poco a poco, profundiza en las técnicas más avanzadas para llevar tus diseños al siguiente nivel.

[isaacmtz001]

Frontend y Backend son términos utilizados en el desarrollo web para describir las diferentes capas de una aplicación o sitio web.

((Frontend))

- Definición: Capa de presentación de una aplicación o sitio web que interactúa directamente con el usuario.

Responsabilidades:

- Diseño y estructura de la interfaz de usuario.

- Creación de la experiencia del usuario.

- Manejo de eventos y acciones del usuario.

- Conexión con el Backend para obtener y enviar datos.

- Tecnologías: HTML, CSS, JavaScript, frameworks como React, Angular, Vue.js.

((Backend))

- Definición: Capa de lógica de negocio de una aplicación o sitio web que maneja la información y la lógica detrás de escena.

- *Responsabilidades*:

- Manejo de datos y bases de datos.

- Autenticación y autorización de usuarios.

- Procesamiento de solicitudes y respuestas.

- Integración con servicios externos.

- Tecnologías: Lenguajes de programación como Java, Python, Ruby, PHP, frameworks como Node.js, Django, Ruby on Rails.

[batterycitycodes]

The Devil God — post de rol

PREVIEW — DESCARGA

Dos versiones disponibles, con imagenes de encabezado o sin ellas.

No hay cambios de color porque es blanco y negro, si alguien lo quiere en modo oscuro estoy dispuesta a hacerlo, sólo menciónenlo en el post, en mi ask, en mis mensajes, whenever.

CSS externo

Las imagenes se autoajustan al centro y a lo ancho o largo, depende de lo que la imagen necesite.

No hay post de trama para este ni es parte de ningún pack. Sin embargo si quiero hacer un pack más completo con cosas de Til The End of The Moon.

Gifs del demo de Til The End of The Moon.

[crazyboredasians]

Hace un tiempo alguien pidió tips para alguien que quiere empezar a codear. Mi tip más vital es que nunca empieces primero con los códigos. Haz un layout primero. O sea elabora el prototipo/diseño de tu código en algún sitio. Mi recomendación es figma, porque es bastante friendly e intuitivo sin necesidad de ponerte a instalar un nuevo programa de Adobe o tener que ingeniartelas para hacerlo con PS o AI. Encima, recuerden siempre hacer el diseño con medidas reales, porque así lo único que tienen que hacer es hacer copy+paste de las medidas en pixeles de cada elemento que ya hicieron en su prototipo y no tienen que andar probando nada, o si sí, todo lo hacen en el prototipo, así no pierden tanto tiempo y dolores de cabeza buscando el px correcto (?)

Igual, gente que comienza a codear... Al menos cuando yo empecé no sabía que FA no soporta el estilo de escritura en cascada del CSS colocado dentro del post. Aún así, sean organizados y siempre codifiquen de esa forma. Cada valor en una línea. Cuando terminen y quieran meter el <style> dentro del post de FA, pidanle ayuda a ChatGPT. Lo que yo hago es pegar todo el CSS y pedirle que me borre todos los saltos de línea del código, y así le hago copy+paste en el post de FA. Lo digo porque en varias ocasiones me pasó que yo borraba manualmente los saltos de línea y a veces no me daba cuenta que no lo hacía bien. Y se me terminaba haciendo un cagadero con el CSS. O si quieren evitarse todos esos problemas, aprendan a poner el CSS externo.

Igual, un error pendejo que me pasaba cuando inicié, es que cuando ponía el "position", y lo que sigue es poner si es desde top, left, bottom, right, yo escogía el que me daba la gana. Pues no! se me descuadraba bien feo aunque en la previa parecía todo bien. Puede que haya sido solo un problema de compatibilidad con FA, pero lo logré solucionar usando nada más 2 opciones. Left o Right, Top o Bottom. No sean tontos como yo(?)

Tips de cosas más estéticas: Nada de códigos con letra de 9 px en la parte de post 😭 que estamos ciegos. Y mi recomendación súper personal, es que eviten colocar #000 o/y #fff de ser posible, sobre todo juntos. Lastima horrible los ojos. Busquen otros "negros" y "blancos". O sea, cosas como combinaciones entre #222 y #e2e2e2, que son más colores grises pero funcionan como negro y blanco. Claro, para mí es un gusto más personal, pero pienso que se ve más lindo.

Ahí se ven , banda 🫶

Gracias por tomarte el tiempo en dejar aquí tus tipsss. Muy apreciado! Lo de ChatGPT me pareció muy bueno. No lo había pensado!

✰ pride

[argn0110]

Primeros pasos: organización (HTML y CSS)

Este es un ejemplo de como podemos organizar nuestros archivos cuando hacemos ejercicios de HTML y CSS.

Lo primero será crear nuestra carpeta raíz donde se encontrarán todos los archivos necesarios para que el navegador nos cargue nuestra página.

Creamos una carpeta y le ponemos nombre desde el explorador de archivos (win) o finder (mac).

Ejemplo: "raiz"

2. Abrimos VSCode y en el panel de EXPLORADOR seleccionamos "Abrir carpeta". Seleccionamos nuestra carpeta raíz.

También podemos abrir nuestra carpeta desde el menú archivo > abrir carpeta.

3. En la barra de actividad seleccionamos el panel de EXPLORADOR y localizamos los iconos que nos permitiran crear el resto de archivos que nos hacen falta.

-Nuevo archivo -Nueva carpeta -Actualizar explorador -Contraer carpetas en el Explorador.

4. Seleccionamos "Nuevo archivo" y lo llamamos "index". En la esquina inferior derecha podemos observar que nuestro nuevo archivo es un texto sin formato. Para cambiar el modo de lenguaje seleccionamos "texto sin formato" y elegimos el modo de lenguaje HTML.

Por último seleccionamos el menú archivo > guardar como > tipo: HTML.

ATAJO: Podemos escribir directamente el nombre con la extensión: "index.html" cuando creamos un nuevo archivo y no hará falta cambiar el "modo de lenguaje" ni "guardar como".

5. Seleccionamos en el panel de EXPLORADOR "Nueva carpeta" y nos creará una nueva carpeta dentro de "raiz" a la que llamaremos por ejemplo "css". Esta carpeta contendrá todas nuestras hojas de estilo. (segundo icono)

6. Seleccionamos la carpeta "css" desde el panel EXPLORADOR y repetimos el paso 4 pero en vez de llamar a nuestro archivo "index" lo llamaremos "style" y en vez de seleccionar el modo de lenguaje HTML elegiremos CSS.

Recordemos que tambien podemos llamar al archivo directamente "style.css".

Con esta organización ya tendremos los archivos y carpetas básicos para comenzar a escribir nuestro código HTML junto a su CSS.

Resumiendo, tendremos nuestra carpeta raíz que dentro tendrá su archivo "index.html" y la carpeta "css".

Podemos añadir más carpetas para organizar otros recursos que vayamos a utilizar en nuestro código. Por ejemplo: carpetas para las imagenes, el javascript, o las fuentes.

7. Seleccionamos nuestro archivo "index.html" en el panel de EXPLORADOR en VSCode y escribimos nuestro código.

Como se puede observar en la segunda captura dentro de la etiqueta <head> podemos ver la etiqueta <link rel="stylesheet" href="css/style.css"> que sería necesaria para vincular nuestro archivo "style.css" a nuestro "index.html". Esta forma de aplicar estilo recordemos que es CSS Externo y es la forma más usada y recomendada de usar CSS.

El atributo rel="stylesheet" nos indica el tipo de relación entre "index.html" y la etiqueta "link", en este caso es "stylesheet", es decir, que la relación es de hoja de estilo. El segundo atributo, href="css/style.css" , nos indica la ubicación, es decir que el archivo de la hoja de estilo "style.css" esta dento de la carpeta "css".

8. Una vez que hayamos añadido contenido a nuestro código podemos ver como se ejecutaria en el navegador. Entraremos al panel de EJECUCIÓN Y DEPURACIÓN, seleccionaremos el botón ejecución y depuración y escojemos la aplicación web que prefiramos (es recomendable usar chrome).

También podemos copiar la ruta de acceso dando click derecho sobre "index.html", seleccionando "Copiar ruta de acceso" y pegando la dirección en el navegador. Ejemplo:

No olvidemos que para poder ver como se ejecuta nuestro código en el navegador debemos tener guardados los cambios.

Trabajar a dos columnas.

[necromancercoding]

Necro, sé que igual y esta es una pregunta de novato, pero, ¿cómo puedo vincular a mi foro una página de github con codes sin poner la url en los posts? He buscado guías, pero no sé si están mal explicadas o yo no las entiendo.

¡Hola anon! No entiendo exactamente lo que quieres hacer. ¿Te refieres a poner elementos externos (como archivos .css) de manera externa? De ser eso, yo uso dropbox y explico cómo lo hago aquí.

[fernando-arciniega]

Calculadora en PHP CSS y Javascript

Este código es la estructura de una página web que contiene una calculadora simple hecha en HTML, CSS y JavaScript. Aquí hay una explicación detallada de cada parte: - : Esto declara la versión de HTML utilizada, que es HTML5 en este caso. - : Aquí se abre el elemento HTML, y se especifica que el idioma de la página es inglés ("en"). - : La sección de encabezado de la página, donde se incluyen metadatos y enlaces a archivos externos. - : Define la codificación de caracteres UTF-8, que es ampliamente utilizada y es compatible con varios idiomas. - Calculadora: Establece el título de la página, que se mostrará en la pestaña del navegador. -

Calculadora en PHP

7 8 9 + 4 5 6 - 1 2 3 * 0 . C / = La calculadora anterior permite realizar operaciones matemáticas básicas, como suma, resta, multiplicación, y división, además de realizar cálculos con números enteros y decimales. Aquí están las operaciones que se pueden realizar con esta calculadora: - Suma (+): Puedes realizar sumas de números. Para ello, simplemente haces clic en los botones numéricos (del 0 al 9) y luego en el botón "+" para sumar los números ingresados. Por ejemplo, para sumar 5 y 3, harías clic en "5", "+", "3", y finalmente en el botón "=" para obtener el resultado. - Resta (-): Similar a la suma, pero utilizas el botón "-" para realizar operaciones de resta. Por ejemplo, para restar 7 de 12, harías clic en "12", "-", "7", y luego "=" para obtener el resultado. - Multiplicación (*): Puedes multiplicar números usando el botón "". Para multiplicar 4 por 6, harías clic en "4", "", "6", y luego "=" para obtener el resultado. - División (/): Para realizar divisiones, utilizas el botón "/". Por ejemplo, para dividir 20 por 5, harías clic en "20", "/", "5", y luego "=" para obtener el resultado. - Números enteros y decimales: La calculadora permite ingresar números enteros y decimales. Puedes utilizar el botón de punto (".") para ingresar números decimales. Por ejemplo, puedes ingresar 3.14 para realizar operaciones con números decimales. - Borrar (C): El botón "C" se utiliza para borrar el contenido del campo de entrada, lo que te permite realizar nuevas operaciones desde cero. - Resultado (=): El botón "=" se utiliza para calcular el resultado de la expresión matemática que hayas ingresado en el campo de entrada. Una vez que hayas ingresado la expresión, haces clic en "=" para obtener el resultado. Es importante tener en cuenta que esta calculadora utiliza la función eval() de JavaScript para evaluar las expresiones matemáticas. Esto significa que puede manejar una variedad de expresiones matemáticas, pero es esencial ingresarlas de manera válida y evitar errores de sintaxis. Si la expresión contiene errores, la calculadora mostrará "Error". Read the full article

[hyeri-code]

[Tutorial] Css externo

Holis mis amores, estuve recordando mis tiempos de inicios haciendo tablillas, y una información que me resultó muy útil es de poner el css en una página externa, así que pensé sería bueno enseñarles cómo. Prerrequisitos

Tener una cuenta de Tumblr, codepen o dropbox

Para tumblr y dropbox necesitas un programa de codes, recomiendo notepad, o sublime text

Un código listo (no se podrán hacer cambios en el css luego de colgarlo, si quieres hacer algo deberás volver a repetir todo el proceso)

Con tumblr 1. Abres tu procesador de texto y colocas el css y le das a guardar como. Es importante que lo guardes como una hoja de css así:

2. Abres tu página de tumblr y le das a "Modificar Apariencia", de ahí a "Editar HTML". Aprietas el ícono de engranaje y le das a "Recursos asociados al tema", te va a aparecer un cuadrado blanco debajo del html. Ahí aprietas "Añadir un archivo" y pones la hoja de css que ya hiciste de antemano. Te debería aparecer así:

Yo use una hoja llamada "estadisticas.css" al ladito le das a la opción "Insertar" y te pone un link arriba en el css (al principio). 3. A tu html le agregas este código: CÓDIGO y cambias el LINK por pos el link que te dio tumblr. Con Dropbox 1. Lo mismo que lo anterior, creas una hoja de estilo en tu propio ordenador. 2. Vas a tu cuentita de dropbox, le das a "Añadir archivo", una vez se cargue le das a compartir y "Crear vínculo". Algo así les debería aparecer:

3. Al link que te da dropbox tienes que cambiarle un detallito. Al "www" debes cambiarlo por "dl", así: https://dl.dropbox.com/s/xzcejzejgqsnzj2/PeaxDrawnIcons.ttf?dl=0 4. Pones el link en este code: CÓDIGO (Es el mismo para todos) en tu HTML. Codepen 1. Tienes que crear un nuevo pen y copias tu css completito y lo guardas.

2. Tomas el link del pen y le añades al final .css, así: https://codepen.io/darknya/pen/MWgKPwG.css 3.Pones el link en este code: CÓDIGO (Es el mismo para todos) en tu HTML. Eso es todo, si tienen alguna duda o algo por el estilo, mandenme un ask y yo les resuelvo todas las que quieren ♥♥♥♥