tutorial Tutoriales Tutorials

Emoji Factory – Herramienta generadora de emojis

tongasoft
Resumen en español del contenido en 150 palabras Fábrica de emojis – Generador de emojis es una herramienta que te permite hacer emojis sobre la marcha y hoy veremos cómo hacerlo. Fundé este proyecto desde un sitio web y me gustó, así que decidí compartir con ustedes este proyecto. Así que empecemos a hacer esto. Hola chicos hoy vamos a construir Fábrica de emojis. como saben, el marcado HTML es necesario para eso, por lo que primero deberíamos tener algo de marcado HTML. A continuación se muestra el código proporcionado y debe guardarlo con el nombre de archivo proporcionado. Guardarlo como índice.html : <!DOCTYPE html> <html lang=»en»> <head> <meta charset=»UTF-8″ /> <title>Emoji Factory</title> <link href=»https://fonts.googleapis.com/css?family=Comfortaa:400,700|Fredoka+One» rel=»stylesheet» /> <link rel=»stylesheet» href=»https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css» /> <link rel=»stylesheet» href=»https://cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.4.1/css/simple-line-icons.min.css» /> <link rel=»stylesheet» href=»css/style.css» /> </head> <body> <div class=»main-content»> <div class=»emoji-name»> <div>Emoji Factory</div> </div> <div class=»emoji-preview»> <div class=»emoji__wrapper»> <div class=»emoji-face»> <div class=»hat no-hat»></div> <div class=»eyebrows»> <div class=»eyebrow left no-eyebrows»></div> <div class=»eyebrow right no-eyebrows»></div> </div> <div class=»eyes»> <div class=»eye left default»></div> <div class=»eye right default»></div> </div> <div class=»mouth default»></div> <div class=»face-extras sweat»></div> <div class=»item default»></div> </div> </div> </div> <div class=»emoji-choices»> <div class=»emoji-choices__header»>skin color</div> <div class=»emoji-choices__group emoji-choices__group–skin»> <div class=»emoji-choice__skin selected js-choice selected» data-type=»skin» data-multiple=»no» data-name=»skin-1″></div> <div class=»emoji-choice__skin js-choice» data-type=»skin» data-multiple=»no» data-name=»skin-2″></div> <div class=»emoji-choice__skin js-choice» data-type=»skin» data-multiple=»no» data-name=»skin-3″></div> <div class=»emoji-choice__skin js-choice» data-type=»skin» data-multiple=»no» data-name=»skin-4″></div> <div class=»emoji-choice__skin js-choice» data-type=»skin» data-multiple=»no» data-name=»skin-5″></div> <div class=»emoji-choice__skin js-choice» data-type=»skin» data-multiple=»no» data-name=»skin-6″></div> </div> <div class=»emoji-choices__header»>eyes</div> <div class=»emoji-choices__group»> <div class=»emoji-choice__item js-choice selected» data-type=»eyes» data-multiple=»no» data-name=»default»></div> <div class=»emoji-choice__item js-choice» data-type=»eyes» data-multiple=»no» data-name=»startled»></div> <div class=»emoji-choice__item js-choice» data-type=»eyes» data-multiple=»no» data-name=»heart»></div> <div class=»emoji-choice__item js-choice» data-type=»eyes» data-multiple=»no» data-name=»star»></div> <div class=»emoji-choice__item js-choice» data-type=»eyes» data-multiple=»no» data-name=»fire»></div> <div class=»emoji-choice__item js-choice» data-type=»eyes» data-multiple=»no» data-name=»squeeze»></div> <div class=»emoji-choice__item js-choice» data-type=»eyes» data-multiple=»no» data-name=»closed-up»></div> <div class=»emoji-choice__item js-choice» data-type=»eyes» data-multiple=»no» data-name=»closed-down»></div> <div class=»emoji-choice__item js-choice» data-type=»eyes» data-multiple=»no» data-name=»lined»></div> </div> <div class=»emoji-choices__header»>mouth</div> <div class=»emoji-choices__group»> <div class=»emoji-choice__item js-choice» data-type=»mouth» data-multiple=»no» data-name=»no-mouth»></div> <div class=»emoji-choice__item js-choice selected» data-type=»mouth» data-multiple=»no» data-name=»default»></div> <div class=»emoji-choice__item js-choice» data-type=»mouth» data-multiple=»no» data-name=»upside»></div> <div class=»emoji-choice__item js-choice» data-type=»mouth» data-multiple=»no» data-name=»open»></div> <div class=»emoji-choice__item js-choice» data-type=»mouth» data-multiple=»no» data-name=»tongue»></div> <div class=»emoji-choice__item js-choice» data-type=»mouth» data-multiple=»no» data-name=»lined»></div> <div class=»emoji-choice__item js-choice» data-type=»mouth» data-multiple=»no» data-name=»frown»></div> <div class=»emoji-choice__item js-choice» data-type=»mouth» data-multiple=»no» data-name=»smile»></div> <div class=»emoji-choice__item js-choice» data-type=»mouth» data-multiple=»no» data-name=»curse»></div> <div class=»emoji-choice__item js-choice» data-type=»mouth» data-multiple=»no» data-name=»grimace»></div> </div> <div class=»emoji-choices__header»>eyebrows</div> <div class=»emoji-choices__group»> <div class=»emoji-choice__item js-choice selected» data-type=»eyebrows» data-multiple=»no» data-name=»no-eyebrows»></div> <div class=»emoji-choice__item js-choice» data-type=»eyebrows» data-multiple=»no» data-name=»downwards»></div> <div class=»emoji-choice__item js-choice» data-type=»eyebrows» data-multiple=»no» data-name=»furrow»></div> <div class=»emoji-choice__item js-choice» data-type=»eyebrows» data-multiple=»no» data-name=»furrow-far»></div> <div class=»emoji-choice__item js-choice» data-type=»eyebrows» data-multiple=»no» data-name=»up-far»></div> </div> <div class=»emoji-choices__header»>hats</div> <div class=»emoji-choices__group»> <div class=»emoji-choice__item js-choice selected» data-type=»hat» data-multiple=»no» data-name=»no-hat»></div> <div class=»emoji-choice__item js-choice» data-type=»hat» data-multiple=»no» data-name=»round-hat»></div> <div class=»emoji-choice__item js-choice» data-type=»hat» data-multiple=»no» data-name=»wizard-hat»></div> <div class=»emoji-choice__item js-choice» data-type=»hat» data-multiple=»no» data-name=»sorting-hat»></div> <div class=»emoji-choice__item js-choice» data-type=»hat» data-multiple=»no» data-name=»top-hat»></div> <div class=»emoji-choice__item js-choice» data-type=»hat» data-multiple=»no» data-name=»traffic-cone»></div> <div class=»emoji-choice__item js-choice» data-type=»hat» data-multiple=»no» data-name=»cactus»></div> <div class=»emoji-choice__item js-choice» data-type=»hat» data-multiple=»no» data-name=»mickey»></div> </div> <div class=»emoji-choices__header»>extras <small>(Multiples allowed)</small></div> <div class=»emoji-choices__group»> <div class=»emoji-choice__item js-choice selected» data-type=»face-extras» data-multiple=»yes» data-name=»sweat»></div> <div class=»emoji-choice__item js-choice» data-type=»face-extras» data-multiple=»yes» data-name=»tears»></div> <div class=»emoji-choice__item js-choice» data-type=»face-extras» data-multiple=»yes» data-name=»geek-glasses»></div> <div class=»emoji-choice__item js-choice» data-type=»face-extras» data-multiple=»yes» data-name=»sunglasses»></div> <div class=»emoji-choice__item js-choice» data-type=»face-extras» data-multiple=»yes» data-name=»crescent-glasses»></div> <div class=»emoji-choice__item js-choice» data-type=»face-extras» data-multiple=»yes» data-name=»blush»></div> <div class=»emoji-choice__item js-choice» data-type=»face-extras» data-multiple=»yes» data-name=»bandage»></div> <div class=»emoji-choice__item js-choice» data-type=»face-extras» data-multiple=»yes» data-name=»scarf-gryf»></div> <div class=»emoji-choice__item js-choice» data-type=»face-extras» data-multiple=»yes» data-name=»scarf-huff»></div> <div class=»emoji-choice__item js-choice» data-type=»face-extras» data-multiple=»yes» data-name=»scarf-rave»></div> <div class=»emoji-choice__item js-choice» data-type=»face-extras» data-multiple=»yes» data-name=»scarf-slyt»></div> </div> <div class=»emoji-choices__header»>item</div> <div class=»emoji-choices__group»> <div class=»emoji-choice__item js-choice selected» data-type=»item» data-multiple=»no» data-name=»default»></div> <div class=»emoji-choice__item js-choice» data-type=»item» data-multiple=»no» data-name=»shield»></div> <div class=»emoji-choice__item js-choice» data-type=»item» data-multiple=»no» data-name=»dango»></div> <div class=»emoji-choice__item js-choice» data-type=»item» data-multiple=»no» data-name=»wand»></div> <div class=»emoji-choice__item js-choice» data-type=»item» data-multiple=»no» data-name=»coffee»></div> <div class=»emoji-choice__item-custom» data-type=»item» data-multiple=»no» data-name=»custom»> <span>Type/Paste any emoji here for a custom item: </span> <input class=»js-custom-item» maxlength=»2″ /> </div> </div> </div> </div> <script src=»js/index.js»></script> </body> </html> Sin CSS este script (Fábrica de emojis) nunca se verá hermosa. Así que aquí estamos, el marcado HTML está listo, ahora tenemos que personalizar nuestro HTML y se puede hacer usando CSS, por lo que a continuación se muestra el código CSS para nuestro marcado HTML. Tienes que guardarlo con el nombre de archivo proporcionado. Haz un nuevo directorio llamado CSS y poner este archivo en ese directorio. Guardarlo como estilo.css : body { background: linear-gradient(to top left, #a5045a, #ea6465); font-family: «Comfortaa», sans-serif; } , aside.context { text-align: center; color: #fff; line-height: 1.7; } aside.context a { text-decoration: none; color: #fff; padding: 3px 0; border-bottom: 1px dashed; } aside.context a:hover { border-bottom: 1px solid; } aside.context .explanation { max-width: 700px; margin: 6em auto 0; } , footer { text-align: center; margin: 4em auto; width: 100%; } footer a { text-decoration: none; display: inline-block; width: 45px; height: 45px; border-radius: 50%; background: transparent; border: 1px dashed #fff; color: #fff; margin: 5px; } footer a:hover { background: rgba(255, 255, 255, 0.1); } footer a .icons { margin-top: 12px; display: inline-block; font-size: 20px; } , .main-content { margin: 4em auto; max-width: 900px; min-width: 800px; display: grid; grid-template-columns: min-content auto max-content; grid-template-rows: 600px; background: #f7f7f7; box-shadow: 0 1px 35px rgba(0, 0, 0, 0.1); border-radius: 10px; overflow: hidden; } .main-content *:before, .main-content *:after { content: «»; position: absolute; } , .emoji-name { display: flex; align-items: center; justify-content: center; writing-mode: vertical-rl; text-orientation: mixed; padding: 18px; background: linear-gradient(to bottom, #fe6368, #ce3572); border-radius: 8px 0 0 8px; } .emoji-name div { display: inline-block; text-transform: uppercase; letter-spacing: 6px; font: 30px «Fredoka One», sans-serif; transform: rotate(180deg); width: 100%; color: #f9f9f9; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); } , .emoji-preview { display: flex; justify-content: center; align-items: center; background: #f3f3f3; } , .emoji-face { width: 150px; height: 150px; border-radius: 50%; background: #fcc21b; margin: auto; position: relative; display: inline-block; font-size: 5px; } .emoji-face.skin-1 { background: #fcc21b; } .emoji-face.skin-2 { background: #ffd2b1; } .emoji-face.skin-3 { background: #daae91; } .emoji-face.skin-4 { background: #dca86e; } .emoji-face.skin-5 { background: #8b4a22; } .emoji-face.skin-6 { background: #452308; } , .eyes { position: absolute; top: 40px; left: 0; width: 100%; } .eyes .eye { position: absolute; border-radius: 50%; background: #111; top: 0; } .eyes .eye.left { left: 50%; margin-left: -40px; } .eyes .eye.right { right: 50%; margin-right: -40px; } .eyes .eye.default { width: 25px; height: 30px; } .eyes .eye.startled { width: 40px; height: 40px; background: #fff; top: -5px; } .eyes .eye.startled.left { margin-left: -45px; } .eyes .eye.startled.right { margin-right: -48px; } .eyes .eye.startled:before { content: «»; position: absolute; width: 50%; height: 50%; background: #111; border-radius: 50%; margin: auto; left: 0; right: 0; top: 25%; } .eyes .eye.heart, .eyes .eye.star, .eyes .eye.fire, .eyes .eye.squeeze { background: transparent; } .eyes .eye.heart:before, .eyes .eye.star:before, .eyes .eye.fire:before, .eyes .eye.squeeze:before { content: «2764»; color: #f55020; font-size: 50px; top: 0; } .eyes .eye.heart.left { margin-left: -55px; transform: rotate(-15deg); } .eyes .eye.heart.right { margin-right: -10px; transform: rotate(15deg); margin-top: -12px; } .eyes .eye.star { margin-top: -15px; } .eyes .eye.star:before { content: «2605»; font-size: 60px; } .eyes .eye.star.left { margin-left: -50px; } .eyes .eye.star.right { margin-right: -2px; } .eyes .eye.fire:before { content: «1F525»; font-size: 45px; } .eyes .eye.fire.left { transform: rotate(-15deg) scaleX(-1); margin-left: -8px; margin-top: -20px; } .eyes .eye.fire.right { transform: rotate(15deg); margin-top: -20px; margin-right: -10px; } .eyes .eye.squeeze:before { content: «>»; color: #111; font-size: 60px; margin-top: -10px; font-weight: 700; } .eyes .eye.squeeze.right { transform: scaleX(-1); } .eyes .eye.closed-up, .eyes .eye.closed-down { background: transparent; width: 32px; height: 32px; border-radius: 50%; box-shadow: 5px 5px 0 0 #111; transform: rotate(-135deg); top: 20px; } .eyes .eye.closed-down { transform: rotate(45deg); top: -8px; } .eyes .eye.lined { width: 30px; height: 6px; top: 20px; border-radius: 6px; } , .mouth { height: 25%; width: 58%; background: #111; position: absolute; left: 0; right: 0; margin: auto; bottom: 14%; z-index: 4; } .mouth.default, .mouth.upside, .mouth.open, .mouth.tongue { overflow: hidden; border: 3px solid #111; border-radius: 0 0 250px 250px; } .mouth.default:before, .mouth.upside:before, .mouth.open:before, .mouth.tongue:before { height: 10px; width: 100%; background: #fff; top: 0; laft: 0; } .mouth.upside { width: 45%; border-radius: 250px 250px 120px 120px; } .mouth.lined { height: 10px; width: 30%; border-radius: 20px; bottom: 25%; } .mouth.open { border-radius: 40px; width: 20%; height: 20%; } .mouth.tongue { overflow: visible; } .mouth.tongue:before { background: #f55020; height: 52px; width: 45%; margin: auto; left: 0; right: 0; border-radius: 0 0 20px 20px; } .mouth.tongue:after { background: #e13b08; width: 6px; height: 80%; border-radius: 6px; margin: auto; left: 0; right: 0; top: 0; bottom: 0; margin-top: 5px; } .mouth.frown, .mouth.smile { width: 40px; height: 40px; background: transparent; border-radius: 50%; transform: rotate(-135deg); box-shadow: 4px 4px 0 0 #111; } .mouth.smile { transform: rotate(45deg); margin-bottom: 20px; } .mouth.curse:before { content: «#@%!»; color: #fff; font-size: 20px; padding: 8px 10px; letter-spacing: 3px; font-weight: 700; } .mouth.grimace { border-radius: 40px; background: #fff; height: 30px; bottom: 30px; border: 2px solid; background-image: linear-gradient(to bottom, transparent 14px, #111 14px, #111 16px, transparent 16px), repeating-linear-gradient(to right, transparent, transparent 14px, #111 14px, #111 16px, transparent 16px); } .mouth.no-mouth { background: transparent; } , .hat { position: absolute; z-index: 8; } .hat.round-hat, .hat.wizard-hat, .hat.sorting-hat { width: 180px; height: 30px; border-radius: 50%; background: #ffaec9; top: 0px; left: -15px; } .hat.round-hat:before, .hat.wizard-hat:before, .hat.sorting-hat:before { width: 70%; height: 50px; border-radius: 180px 180px 60px 60px; background: #ffaec9; border-bottom: 10px solid #f55020; right: 30px; top: -40px; } .hat.wizard-hat, .hat.sorting-hat { background: #444; } .hat.wizard-hat:before, .hat.sorting-hat:before { background: #444; border-bottom-color: #000; } .hat.wizard-hat:after, .hat.sorting-hat:after { width: 0; height: 0; margin-top: -110px; margin-left: 25px; border-left: 70px solid transparent; border-right: 53px solid transparent; border-bottom: 100px solid #444; border-radius: 20px; } .hat.sorting-hat { background: #400000; } .hat.sorting-hat:before { content: «:|»; color: #c27814; padding: 36px…

Fábrica de emojis – Generador de emojis es una herramienta que te permite hacer emojis sobre la marcha y hoy veremos cómo hacerlo. Fundé este proyecto desde un sitio web y me gustó, así que decidí compartir con ustedes este proyecto. Así que empecemos a hacer esto.

Hola chicos hoy vamos a construir Fábrica de emojis. como saben, el marcado HTML es necesario para eso, por lo que primero deberíamos tener algo de marcado HTML.

A continuación se muestra el código proporcionado y debe guardarlo con el nombre de archivo proporcionado.

Guardarlo como índice.html :

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>Emoji Factory</title>
        <link href="https://fonts.googleapis.com/css?family=Comfortaa:400,700|Fredoka+One" rel="stylesheet" />
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css" />
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.4.1/css/simple-line-icons.min.css" />
        <link rel="stylesheet" href="css/style.css" />
    </head>
    <body>
        <div class="main-content">
            <div class="emoji-name">
                <div>Emoji Factory</div>
            </div>
            <div class="emoji-preview">
                <div class="emoji__wrapper">
                    <div class="emoji-face">
                        <div class="hat no-hat"></div>
                        <div class="eyebrows">
                            <div class="eyebrow left no-eyebrows"></div>
                            <div class="eyebrow right no-eyebrows"></div>
                        </div>
                        <div class="eyes">
                            <div class="eye left default"></div>
                            <div class="eye right default"></div>
                        </div>
                        <div class="mouth default"></div>
                        <div class="face-extras sweat"></div>
                        <div class="item default"></div>
                    </div>
                </div>
            </div>
            <div class="emoji-choices">
                <div class="emoji-choices__header">skin color</div>
                <div class="emoji-choices__group emoji-choices__group--skin">
                    <div class="emoji-choice__skin selected js-choice selected" data-type="skin" data-multiple="no" data-name="skin-1"></div>
                    <div class="emoji-choice__skin js-choice" data-type="skin" data-multiple="no" data-name="skin-2"></div>
                    <div class="emoji-choice__skin js-choice" data-type="skin" data-multiple="no" data-name="skin-3"></div>
                    <div class="emoji-choice__skin js-choice" data-type="skin" data-multiple="no" data-name="skin-4"></div>
                    <div class="emoji-choice__skin js-choice" data-type="skin" data-multiple="no" data-name="skin-5"></div>
                    <div class="emoji-choice__skin js-choice" data-type="skin" data-multiple="no" data-name="skin-6"></div>
                </div>
                <div class="emoji-choices__header">eyes</div>
                <div class="emoji-choices__group">
                    <div class="emoji-choice__item js-choice selected" data-type="eyes" data-multiple="no" data-name="default"></div>
                    <div class="emoji-choice__item js-choice" data-type="eyes" data-multiple="no" data-name="startled"></div>
                    <div class="emoji-choice__item js-choice" data-type="eyes" data-multiple="no" data-name="heart"></div>
                    <div class="emoji-choice__item js-choice" data-type="eyes" data-multiple="no" data-name="star"></div>
                    <div class="emoji-choice__item js-choice" data-type="eyes" data-multiple="no" data-name="fire"></div>
                    <div class="emoji-choice__item js-choice" data-type="eyes" data-multiple="no" data-name="squeeze"></div>
                    <div class="emoji-choice__item js-choice" data-type="eyes" data-multiple="no" data-name="closed-up"></div>
                    <div class="emoji-choice__item js-choice" data-type="eyes" data-multiple="no" data-name="closed-down"></div>
                    <div class="emoji-choice__item js-choice" data-type="eyes" data-multiple="no" data-name="lined"></div>
                </div>
                <div class="emoji-choices__header">mouth</div>
                <div class="emoji-choices__group">
                    <div class="emoji-choice__item js-choice" data-type="mouth" data-multiple="no" data-name="no-mouth"></div>
                    <div class="emoji-choice__item js-choice selected" data-type="mouth" data-multiple="no" data-name="default"></div>
                    <div class="emoji-choice__item js-choice" data-type="mouth" data-multiple="no" data-name="upside"></div>
                    <div class="emoji-choice__item js-choice" data-type="mouth" data-multiple="no" data-name="open"></div>
                    <div class="emoji-choice__item js-choice" data-type="mouth" data-multiple="no" data-name="tongue"></div>
                    <div class="emoji-choice__item js-choice" data-type="mouth" data-multiple="no" data-name="lined"></div>
                    <div class="emoji-choice__item js-choice" data-type="mouth" data-multiple="no" data-name="frown"></div>
                    <div class="emoji-choice__item js-choice" data-type="mouth" data-multiple="no" data-name="smile"></div>
                    <div class="emoji-choice__item js-choice" data-type="mouth" data-multiple="no" data-name="curse"></div>
                    <div class="emoji-choice__item js-choice" data-type="mouth" data-multiple="no" data-name="grimace"></div>
                </div>
                <div class="emoji-choices__header">eyebrows</div>
                <div class="emoji-choices__group">
                    <div class="emoji-choice__item js-choice selected" data-type="eyebrows" data-multiple="no" data-name="no-eyebrows"></div>
                    <div class="emoji-choice__item js-choice" data-type="eyebrows" data-multiple="no" data-name="downwards"></div>
                    <div class="emoji-choice__item js-choice" data-type="eyebrows" data-multiple="no" data-name="furrow"></div>
                    <div class="emoji-choice__item js-choice" data-type="eyebrows" data-multiple="no" data-name="furrow-far"></div>
                    <div class="emoji-choice__item js-choice" data-type="eyebrows" data-multiple="no" data-name="up-far"></div>
                </div>
                <div class="emoji-choices__header">hats</div>
                <div class="emoji-choices__group">
                    <div class="emoji-choice__item js-choice selected" data-type="hat" data-multiple="no" data-name="no-hat"></div>
                    <div class="emoji-choice__item js-choice" data-type="hat" data-multiple="no" data-name="round-hat"></div>
                    <div class="emoji-choice__item js-choice" data-type="hat" data-multiple="no" data-name="wizard-hat"></div>
                    <div class="emoji-choice__item js-choice" data-type="hat" data-multiple="no" data-name="sorting-hat"></div>
                    <div class="emoji-choice__item js-choice" data-type="hat" data-multiple="no" data-name="top-hat"></div>
                    <div class="emoji-choice__item js-choice" data-type="hat" data-multiple="no" data-name="traffic-cone"></div>
                    <div class="emoji-choice__item js-choice" data-type="hat" data-multiple="no" data-name="cactus"></div>
                    <div class="emoji-choice__item js-choice" data-type="hat" data-multiple="no" data-name="mickey"></div>
                </div>
                <div class="emoji-choices__header">extras <small>(Multiples allowed)</small></div>
                <div class="emoji-choices__group">
                    <div class="emoji-choice__item js-choice selected" data-type="face-extras" data-multiple="yes" data-name="sweat"></div>
                    <div class="emoji-choice__item js-choice" data-type="face-extras" data-multiple="yes" data-name="tears"></div>
                    <div class="emoji-choice__item js-choice" data-type="face-extras" data-multiple="yes" data-name="geek-glasses"></div>
                    <div class="emoji-choice__item js-choice" data-type="face-extras" data-multiple="yes" data-name="sunglasses"></div>
                    <div class="emoji-choice__item js-choice" data-type="face-extras" data-multiple="yes" data-name="crescent-glasses"></div>
                    <div class="emoji-choice__item js-choice" data-type="face-extras" data-multiple="yes" data-name="blush"></div>
                    <div class="emoji-choice__item js-choice" data-type="face-extras" data-multiple="yes" data-name="bandage"></div>
                    <div class="emoji-choice__item js-choice" data-type="face-extras" data-multiple="yes" data-name="scarf-gryf"></div>
                    <div class="emoji-choice__item js-choice" data-type="face-extras" data-multiple="yes" data-name="scarf-huff"></div>
                    <div class="emoji-choice__item js-choice" data-type="face-extras" data-multiple="yes" data-name="scarf-rave"></div>
                    <div class="emoji-choice__item js-choice" data-type="face-extras" data-multiple="yes" data-name="scarf-slyt"></div>
                </div>
                <div class="emoji-choices__header">item</div>
                <div class="emoji-choices__group">
                    <div class="emoji-choice__item js-choice selected" data-type="item" data-multiple="no" data-name="default"></div>
                    <div class="emoji-choice__item js-choice" data-type="item" data-multiple="no" data-name="shield"></div>
                    <div class="emoji-choice__item js-choice" data-type="item" data-multiple="no" data-name="dango"></div>
                    <div class="emoji-choice__item js-choice" data-type="item" data-multiple="no" data-name="wand"></div>
                    <div class="emoji-choice__item js-choice" data-type="item" data-multiple="no" data-name="coffee"></div>
                    <div class="emoji-choice__item-custom" data-type="item" data-multiple="no" data-name="custom">
                        <span>Type/Paste any emoji here for a custom item: </span>
                        <input class="js-custom-item" maxlength="2" />
                    </div>
                </div>
            </div>
        </div>
        <script src="js/index.js"></script>
    </body>
</html>

Sin CSS este script (Fábrica de emojis) nunca se verá hermosa. Así que aquí estamos, el marcado HTML está listo, ahora tenemos que personalizar nuestro HTML y se puede hacer usando CSS, por lo que a continuación se muestra el código CSS para nuestro marcado HTML.

Tienes que guardarlo con el nombre de archivo proporcionado. Haz un nuevo directorio llamado CSS y poner este archivo en ese directorio.

Guardarlo como estilo.css :

body {
  background: linear-gradient(to top left, #a5045a, #ea6465);
  font-family: "Comfortaa", sans-serif;
}
,
aside.context {
  text-align: center;
  color: #fff;
  line-height: 1.7;
}
aside.context a {
  text-decoration: none;
  color: #fff;
  padding: 3px 0;
  border-bottom: 1px dashed;
}
aside.context a:hover {
  border-bottom: 1px solid;
}
aside.context .explanation {
  max-width: 700px;
  margin: 6em auto 0;
}
,
footer {
  text-align: center;
  margin: 4em auto;
  width: 100%;
}
footer a {
  text-decoration: none;
  display: inline-block;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  background: transparent;
  border: 1px dashed #fff;
  color: #fff;
  margin: 5px;
}
footer a:hover {
  background: rgba(255, 255, 255, 0.1);
}
footer a .icons {
  margin-top: 12px;
  display: inline-block;
  font-size: 20px;
}
,
.main-content {
  margin: 4em auto;
  max-width: 900px;
  min-width: 800px;
  display: grid;
  grid-template-columns: min-content auto max-content;
  grid-template-rows: 600px;
  background: #f7f7f7;
  box-shadow: 0 1px 35px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  overflow: hidden;
}
.main-content *:before, .main-content *:after {
  content: "";
  position: absolute;
}
,
.emoji-name {
  display: flex;
  align-items: center;
  justify-content: center;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  padding: 18px;
  background: linear-gradient(to bottom, #fe6368, #ce3572);
  border-radius: 8px 0 0 8px;
}
.emoji-name div {
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: 6px;
  font: 30px "Fredoka One", sans-serif;
  transform: rotate(180deg);
  width: 100%;
  color: #f9f9f9;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
,
.emoji-preview {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #f3f3f3;
}
,
.emoji-face {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: #fcc21b;
  margin: auto;
  position: relative;
  display: inline-block;
  font-size: 5px;
}
.emoji-face.skin-1 {
  background: #fcc21b;
}
.emoji-face.skin-2 {
  background: #ffd2b1;
}
.emoji-face.skin-3 {
  background: #daae91;
}
.emoji-face.skin-4 {
  background: #dca86e;
}
.emoji-face.skin-5 {
  background: #8b4a22;
}
.emoji-face.skin-6 {
  background: #452308;
}
,
.eyes {
  position: absolute;
  top: 40px;
  left: 0;
  width: 100%;
}
.eyes .eye {
  position: absolute;
  border-radius: 50%;
  background: #111;
  top: 0;
}
.eyes .eye.left {
  left: 50%;
  margin-left: -40px;
}
.eyes .eye.right {
  right: 50%;
  margin-right: -40px;
}
.eyes .eye.default {
  width: 25px;
  height: 30px;
}
.eyes .eye.startled {
  width: 40px;
  height: 40px;
  background: #fff;
  top: -5px;
}
.eyes .eye.startled.left {
  margin-left: -45px;
}
.eyes .eye.startled.right {
  margin-right: -48px;
}
.eyes .eye.startled:before {
  content: "";
  position: absolute;
  width: 50%;
  height: 50%;
  background: #111;
  border-radius: 50%;
  margin: auto;
  left: 0;
  right: 0;
  top: 25%;
}
.eyes .eye.heart, .eyes .eye.star, .eyes .eye.fire, .eyes .eye.squeeze {
  background: transparent;
}
.eyes .eye.heart:before, .eyes .eye.star:before, .eyes .eye.fire:before, .eyes .eye.squeeze:before {
  content: "2764";
  color: #f55020;
  font-size: 50px;
  top: 0;
}
.eyes .eye.heart.left {
  margin-left: -55px;
  transform: rotate(-15deg);
}
.eyes .eye.heart.right {
  margin-right: -10px;
  transform: rotate(15deg);
  margin-top: -12px;
}
.eyes .eye.star {
  margin-top: -15px;
}
.eyes .eye.star:before {
  content: "2605";
  font-size: 60px;
}
.eyes .eye.star.left {
  margin-left: -50px;
}
.eyes .eye.star.right {
  margin-right: -2px;
}
.eyes .eye.fire:before {
  content: "1F525";
  font-size: 45px;
}
.eyes .eye.fire.left {
  transform: rotate(-15deg) scaleX(-1);
  margin-left: -8px;
  margin-top: -20px;
}
.eyes .eye.fire.right {
  transform: rotate(15deg);
  margin-top: -20px;
  margin-right: -10px;
}
.eyes .eye.squeeze:before {
  content: ">";
  color: #111;
  font-size: 60px;
  margin-top: -10px;
  font-weight: 700;
}
.eyes .eye.squeeze.right {
  transform: scaleX(-1);
}
.eyes .eye.closed-up, .eyes .eye.closed-down {
  background: transparent;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  box-shadow: 5px 5px 0 0 #111;
  transform: rotate(-135deg);
  top: 20px;
}
.eyes .eye.closed-down {
  transform: rotate(45deg);
  top: -8px;
}
.eyes .eye.lined {
  width: 30px;
  height: 6px;
  top: 20px;
  border-radius: 6px;
}
,
.mouth {
  height: 25%;
  width: 58%;
  background: #111;
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  bottom: 14%;
  z-index: 4;
}
.mouth.default, .mouth.upside, .mouth.open, .mouth.tongue {
  overflow: hidden;
  border: 3px solid #111;
  border-radius: 0 0 250px 250px;
}
.mouth.default:before, .mouth.upside:before, .mouth.open:before, .mouth.tongue:before {
  height: 10px;
  width: 100%;
  background: #fff;
  top: 0;
  laft: 0;
}
.mouth.upside {
  width: 45%;
  border-radius: 250px 250px 120px 120px;
}
.mouth.lined {
  height: 10px;
  width: 30%;
  border-radius: 20px;
  bottom: 25%;
}
.mouth.open {
  border-radius: 40px;
  width: 20%;
  height: 20%;
}
.mouth.tongue {
  overflow: visible;
}
.mouth.tongue:before {
  background: #f55020;
  height: 52px;
  width: 45%;
  margin: auto;
  left: 0;
  right: 0;
  border-radius: 0 0 20px 20px;
}
.mouth.tongue:after {
  background: #e13b08;
  width: 6px;
  height: 80%;
  border-radius: 6px;
  margin: auto;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin-top: 5px;
}
.mouth.frown, .mouth.smile {
  width: 40px;
  height: 40px;
  background: transparent;
  border-radius: 50%;
  transform: rotate(-135deg);
  box-shadow: 4px 4px 0 0 #111;
}
.mouth.smile {
  transform: rotate(45deg);
  margin-bottom: 20px;
}
.mouth.curse:before {
  content: "#@%!";
  color: #fff;
  font-size: 20px;
  padding: 8px 10px;
  letter-spacing: 3px;
  font-weight: 700;
}
.mouth.grimace {
  border-radius: 40px;
  background: #fff;
  height: 30px;
  bottom: 30px;
  border: 2px solid;
  background-image: linear-gradient(to bottom, transparent 14px, #111 14px, #111 16px, transparent 16px), repeating-linear-gradient(to right, transparent, transparent 14px, #111 14px, #111 16px, transparent 16px);
}
.mouth.no-mouth {
  background: transparent;
}
,
.hat {
  position: absolute;
  z-index: 8;
}
.hat.round-hat, .hat.wizard-hat, .hat.sorting-hat {
  width: 180px;
  height: 30px;
  border-radius: 50%;
  background: #ffaec9;
  top: 0px;
  left: -15px;
}
.hat.round-hat:before, .hat.wizard-hat:before, .hat.sorting-hat:before {
  width: 70%;
  height: 50px;
  border-radius: 180px 180px 60px 60px;
  background: #ffaec9;
  border-bottom: 10px solid #f55020;
  right: 30px;
  top: -40px;
}
.hat.wizard-hat, .hat.sorting-hat {
  background: #444;
}
.hat.wizard-hat:before, .hat.sorting-hat:before {
  background: #444;
  border-bottom-color: #000;
}
.hat.wizard-hat:after, .hat.sorting-hat:after {
  width: 0;
  height: 0;
  margin-top: -110px;
  margin-left: 25px;
  border-left: 70px solid transparent;
  border-right: 53px solid transparent;
  border-bottom: 100px solid #444;
  border-radius: 20px;
}
.hat.sorting-hat {
  background: #400000;
}
.hat.sorting-hat:before {
  content: ":|";
  color: #c27814;
  padding: 36px 20px;
  border-bottom: 0;
  width: 10px;
  font-size: 40px;
  top: -75px;
  right: 63px;
  background: #400000;
  border-radius: 180px 60px 60px 180px;
  border-right: 10px solid #c27814;
  transform: rotate(90deg);
  z-index: 1;
}
.hat.sorting-hat:after {
  border-bottom: 100px solid #400000;
}
.hat.top-hat {
  width: 80%;
  height: 15px;
  margin: auto;
  margin: auto;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  top: -110px;
  border-radius: 6px;
  background: #006daf;
}
.hat.top-hat:before {
  width: 80%;
  margin: auto;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  height: 80px;
  border-radius: 10px 10px 0 0;
  margin-top: -80px;
  background: linear-gradient(to bottom, #006daf 0%, #006daf 80%, #0061a0 80%);
}
.hat.traffic-cone {
  width: 70%;
  height: 100px;
  margin: auto;
  margin: auto;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  top: -222px;
  background: linear-gradient(to right, transparent 40%, #f79003 40%, #f79003 60%, transparent 60%);
  border-bottom: 15px solid #f79003;
}
.hat.traffic-cone:before {
  bottom: -12px;
  margin: auto;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-image: linear-gradient(100deg, transparent 20%, #f79003 20%, #f79003 50%, transparent 50%), linear-gradient(260deg, transparent 20%, #f79003 20%, #f79003 50%, transparent 50%);
  width: 70%;
  height: 112px;
}
.hat.traffic-cone:after {
  margin: auto;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  border-bottom: 40px solid #fff;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  margin-top: 35px;
  height: 0;
  width: 47%;
}
.hat.cactus {
  width: 80%;
  margin: auto;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  top: -120px;
  height: 15px;
  border-radius: 8px;
  background: #c27814;
}
.hat.cactus:before {
  width: 40%;
  background: linear-gradient(to top right, #8cbd18, #419e0b);
  height: 100px;
  border-radius: 100px 100px 0 0;
  top: -99px;
  right: 22px;
}
.hat.cactus:after {
  width: 35%;
  background: linear-gradient(to top right, #8cbd18, #c2f056);
  height: 75px;
  border-radius: 80px 80px 0 0;
  top: -74px;
  left: 20px;
}
.hat.mickey {
  margin: auto;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: 95%;
  height: 80px;
  top: -70px;
  background: transparent;
  border-top: 30px solid #111;
  border-radius: 150px 150px 0 0;
}
.hat.mickey:before, .hat.mickey:after {
  width: 80px;
  height: 70px;
  top: -75px;
  left: -20px;
  background: #111;
  border-radius: 50%;
}
.hat.mickey:before {
  transform: rotate(-25deg);
}
.hat.mickey:after {
  transform: rotate(25deg);
  right: -20px;
  left: auto;
}
,
.eyebrow {
  position: absolute;
  top: 15px;
  display: inline-block;
}
.eyebrow:before {
  content: "(";
  color: #d58c00;
  font: 700 30px "Comfortaa", sans-serif;
  text-shadow: 2px 0 0 #d58c00;
  transform: rotate(90deg);
  left: 0;
}
.eyebrow.left {
  left: 42px;
}
.eyebrow.right {
  right: 50px;
}
.eyebrow.downwards:before, .eyebrow.furrow:before, .eyebrow.furrow-far:before {
  transform: rotate(270deg);
}
.eyebrow.furrow.left {
  transform: rotate(40deg);
  left: 60px;
}
.eyebrow.furrow.right {
  transform: rotate(-40deg) scaleX(-1);
  right: 62px;
}
.eyebrow.up-far {
  top: 20px;
}
.eyebrow.up-far.left {
  transform: rotate(-40deg);
  left: 20px;
}
.eyebrow.up-far.right {
  transform: rotate(40deg) scaleX(-1);
  right: 18px;
}
.eyebrow.furrow-far {
  top: 25px;
}
.eyebrow.furrow-far.left {
  transform: rotate(-35deg);
  left: 20px;
}
.eyebrow.furrow-far.right {
  transform: rotate(35deg) scaleX(-1);
  right: 17px;
}
.eyebrow.no-eyebrows:before {
  content: none;
}
,
.face-extras {
  position: absolute;
}
.face-extras.sweat {
  width: 35px;
  height: 35px;
  border-radius: 80% 0 55% 50% / 55% 0 80% 50%;
  background: #006daf;
  transform: rotate(-45deg);
  top: 20px;
  right: -5px;
}
.face-extras.tears {
  width: 30px;
  height: 30px;
  border-radius: 80% 0 55% 50% / 55% 0 80% 50%;
  background: #006daf;
  top: 70px;
  left: 5px;
}
.face-extras.tears:before {
  width: inherit;
  height: inherit;
  border-radius: inherit;
  background: #006daf;
  transform: scaleX(-1);
  margin-left: 110px;
}
.face-extras.geek-glasses {
  width: 100%;
  top: 50px;
  height: 5px;
  background: linear-gradient(to right, #111 15%, transparent 15%, transparent 85%, #111 85%);
}
.face-extras.geek-glasses:before, .face-extras.geek-glasses:after {
  margin-top: -25px;
  width: 50px;
  height: 50px;
  border: 3px solid #111;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
}
.face-extras.geek-glasses:before {
  left: 20px;
}
.face-extras.geek-glasses:after {
  right: 20px;
}
.face-extras.sunglasses {
  width: 95%;
  height: 6px;
  margin: auto;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  top: -65px;
  background: #111;
}
.face-extras.sunglasses:before, .face-extras.sunglasses:after {
  background: inherit;
  width: 70px;
  height: 35px;
  border-radius: 5px 5px 150px 150px;
}
.face-extras.sunglasses:before {
  left: 5px;
}
.face-extras.sunglasses:after {
  right: 5px;
}
.face-extras.crescent-glasses {
  z-index: 4;
  margin: auto;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  height: 3.5px;
  width: 98%;
  top: -25px;
  background: linear-gradient(to right, #d4af37 20px, transparent 20px, transparent 60px, #d4af37 60px, #d4af37 80px, transparent 80px, transparent 130px, #d4af37 130px);
}
.face-extras.crescent-glasses:before, .face-extras.crescent-glasses:after {
  width: 50px;
  height: 24px;
  border-radius: 4px 4px 50px 50px;
  border: 2.5px solid #d4af37;
  background: rgba(179, 219, 242, 0.9);
  top: -8px;
}
.face-extras.crescent-glasses:before {
  left: 15px;
}
.face-extras.crescent-glasses:after {
  right: 15px;
}
.face-extras.blush {
  width: 100%;
}
.face-extras.blush:before, .face-extras.blush:after {
  width: 35px;
  height: 35px;
  background: rgba(245, 80, 32, 0.4);
  border-radius: 50%;
  top: 65px;
}
.face-extras.blush:before {
  left: 10px;
}
.face-extras.blush:after {
  right: 10px;
}
.face-extras.bandage {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  transform: rotate(-30deg);
  background: linear-gradient(to bottom, #fff 20%, #ddd 20%, #ddd 30%, transparent 30%);
}
.face-extras.scarf-gryf, .face-extras.scarf-huff, .face-extras.scarf-rave, .face-extras.scarf-slyt {
  z-index: 10;
  width: 40px;
  height: 60px;
  background: linear-gradient(darkgreen 30%, darkgreen 80%, transparent 80%), repeating-linear-gradient(to right, darkgreen, darkgreen 4px, transparent 4px, transparent 7px);
  transform: rotate(14deg);
  bottom: -60px;
  right: 30px;
}
.face-extras.scarf-gryf:before, .face-extras.scarf-huff:before, .face-extras.scarf-rave:before, .face-extras.scarf-slyt:before {
  width: 40px;
  height: 80px;
  background: linear-gradient(darkgreen 0%, green 40%, #ccc 40%, #ccc 45%, green 45%, green 55%, #ccc 55%, #ccc 60%, green 60%, green 80%, transparent 80%), repeating-linear-gradient(to right, green, green 4px, transparent 4px, transparent 7px);
  transform: rotate(-45deg);
  top: -20px;
  right: -20px;
}
.face-extras.scarf-gryf:after, .face-extras.scarf-huff:after, .face-extras.scarf-rave:after, .face-extras.scarf-slyt:after {
  width: 132px;
  height: 40px;
  background: repeating-linear-gradient(to right, green 16px, #ccc 16px, #ccc 20px, green 20px, green 28px, #ccc 28px, #ccc 32px, green 32px, green 60px);
  transform: rotate(-14deg);
  top: -30px;
  left: -80px;
  border-radius: 10px;
  border-bottom-left-radius: 40px 100px;
  border-bottom-right-radius: 40px 100px;
}
.face-extras.scarf-gryf {
  background: linear-gradient(#982730 30%, #982730 80%, transparent 80%), repeating-linear-gradient(to right, #982730, #982730 4px, transparent 4px, transparent 7px);
}
.face-extras.scarf-gryf:before {
  background: linear-gradient(#982730 0%, #ad343e 40%, #ffbf00 40%, #ffbf00 45%, #ad343e 45%, #ad343e 55%, #ffbf00 55%, #ffbf00 60%, #ad343e 60%, #ad343e 80%, transparent 80%), repeating-linear-gradient(to right, #ad343e, #ad343e 4px, transparent 4px, transparent 7px);
}
.face-extras.scarf-gryf:after {
  background: repeating-linear-gradient(to right, #ad343e 16px, #ffbf00 16px, #ffbf00 20px, #ad343e 20px, #ad343e 28px, #ffbf00 28px, #ffbf00 32px, #ad343e 32px, #ad343e 60px);
}
.face-extras.scarf-huff {
  background: linear-gradient(#ce9c04 30%, #ce9c04 80%, transparent 80%), repeating-linear-gradient(to right, #ce9c04, #ce9c04 4px, transparent 4px, transparent 7px);
}
.face-extras.scarf-huff:before {
  background: linear-gradient(#ce9c04 0%, #eab000 40%, #111 40%, #111 45%, #eab000 45%, #eab000 55%, #111 55%, #111 60%, #eab000 60%, #eab000 80%, transparent 80%), repeating-linear-gradient(to right, #eab000, #eab000 4px, transparent 4px, transparent 7px);
}
.face-extras.scarf-huff:after {
  background: repeating-linear-gradient(to right, #eab000 16px, #111 16px, #111 20px, #eab000 20px, #eab000 28px, #111 28px, #111 32px, #eab000 32px, #eab000 60px);
}
.face-extras.scarf-rave {
  background: linear-gradient(#0061a0 30%, #0061a0 80%, transparent 80%), repeating-linear-gradient(to right, #0061a0, #0061a0 4px, transparent 4px, transparent 7px);
}
.face-extras.scarf-rave:before {
  background: linear-gradient(#0061a0 0%, #006daf 40%, #c0d8e0 40%, #c0d8e0 45%, #006daf 45%, #006daf 55%, #c0d8e0 55%, #c0d8e0 60%, #006daf 60%, #006daf 80%, transparent 80%), repeating-linear-gradient(to right, #006daf, #006daf 4px, transparent 4px, transparent 7px);
}
.face-extras.scarf-rave:after {
  background: repeating-linear-gradient(to right, #006daf 16px, #c0d8e0 16px, #c0d8e0 20px, #006daf 20px, #006daf 28px, #c0d8e0 28px, #c0d8e0 32px, #006daf 32px, #006daf 60px);
}
,
.item {
  position: absolute;
  z-index: 20;
}
.item.custom {
  font-size: 12em;
  bottom: -15px;
  right: -20px;
}
.item.coffee {
  right: -20px;
  border-top: 75px solid #fff;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  height: 0;
  width: 40px;
  bottom: -20px;
}
.item.coffee:before {
  margin: -55px 0 0 -9px;
  border-top: 30px solid #c27814;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  height: 0;
  width: calc(100% + 8px);
}
.item.coffee:after {
  background: #333;
  width: 70px;
  height: 20px;
  margin: -90px 0 0 -15px;
  border-radius: 10px 10px 3px 3px;
  background: linear-gradient(to bottom, transparent 8px, #555 8px), linear-gradient(to right, transparent 10%, #666 10%, #666 90%, transparent 90%);
}
.item.shield {
  right: -25px;
  bottom: -10px;
  width: 90px;
  height: 90px;
  background: radial-gradient(ellipse at center, #f55020 20%, #f55020 20%, #f55020 38%, #eee 38%, #eee 55%, #f55020 55%);
  border-radius: 50%;
}
.item.shield:before {
  content: "2605";
  color: #fff;
  font-size: 30px;
  border-radius: 50%;
  background: #0061a0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: auto;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin-top: 30px;
}
.item.dango {
  background: #c27814;
  width: 5px;
  height: 125px;
  border-radius: 6px;
  right: -25px;
  bottom: 0;
}
.item.dango:before {
  top: 60px;
  left: -13px;
  background: #8cbd18;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  box-shadow: -8px 20px 0 -25px #f55020;
  box-shadow: 0 -28px 0 #fff, 0 -56px 0 #ffaec9;
}
.item.wand {
  top: 0;
  right: -20px;
  background: #d58c00;
  width: 8px;
  height: 80px;
  border-radius: 50% 20px 0 0;
}
.item.wand:before {
  background: #c27814;
  width: 12px;
  height: 50px;
  left: -2px;
  top: 70px;
  z-index: 0;
  border-radius: 4px 4px 0 0;
}
.item.wand:after {
  width: 22px;
  height: 50px;
  border-radius: 10px 50px 10px 14px;
  background: linear-gradient(to bottom, #400000 20%, transparent 20%, transparent 60%, #400000 60%), linear-gradient(to right, transparent 15%, #400000 15%, #400000 90%, transparent 90%);
  top: 100px;
  left: -6px;
}
,
.emoji-choices {
  overflow-y: auto;
  overflow-x: hidden;
  height: calc(100%);
  margin: 0 5px 0 0;
  box-shadow: -3px 0px 50px 1px rgba(0, 0, 0, 0.1);
}
,
.emoji-choices__header {
  background: linear-gradient(to right, rgba(206, 53, 114, 0.4), #f7f7f7);
  padding: 15px;
  border-left: 5px solid #ce3572;
  text-transform: uppercase;
  font-weight: 700;
}
.emoji-choices__header small {
  font-size: 70%;
  margin-left: 5px;
}
,
.emoji-choices__group {
  box-sizing: border-box;
  padding: 10px 22px 10px 10px;
  display: grid;
  grid-row-gap: 8px;
  grid-column-gap: 14px;
  grid-template-columns: repeat(4, 75px);
}
,
.emoji-choice__item {
  flex: 1;
  position: relative;
  width: 100%;
  height: 75px;
  background: #ebebeb;
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/567707/spriteEmoji.jpg);
  border-radius: 4px;
  cursor: pointer;
  overflow: hidden;
  border: 3px solid #ebebeb;
  font-size: 12px;
}
.emoji-choice__item:after {
  content: "aaa";
  width: calc(100% - 4px);
  left: -2px;
  margin-top: 10px;
  background: #fff;
  height: auto;
  opacity: 0;
  bottom: -20px;
  font: 700 10px "Comfortaa", sans-serif;
  transition: 0.2s ease;
  text-align: center;
  padding: 5px 5px 3px;
  word-wrap: break-all;
  text-transform: uppercase;
}
.emoji-choice__item:hover:after {
  opacity: 1;
  bottom: 0;
}
,
.emoji-choices__group--skin {
  grid-template-columns: repeat(6, 40px);
  padding: 20px 20px;
}
,
.emoji-choice__skin {
  width: 35px;
  height: 35px;
  background: #fcc21b;
  border-radius: 50%;
  border: 3px solid #fff;
  cursor: pointer;
}
.emoji-choice__skin[data-name="skin-2"] {
  background: #ffd2b1;
}
.emoji-choice__skin[data-name="skin-3"] {
  background: #daae91;
}
.emoji-choice__skin[data-name="skin-4"] {
  background: #dca86e;
}
.emoji-choice__skin[data-name="skin-5"] {
  background: #8b4a22;
}
.emoji-choice__skin[data-name="skin-6"] {
  background: #452308;
}
,
.emoji-choice__item[data-type="eyes"]:after {
  content: "Normal";
}
.emoji-choice__item[data-type="eyes"][data-name="startled"] {
  background-position: -75px 0;
}
.emoji-choice__item[data-type="eyes"][data-name="startled"]:after {
  content: "Startled";
}
.emoji-choice__item[data-type="eyes"][data-name="heart"] {
  background-position: -150px 0;
}
.emoji-choice__item[data-type="eyes"][data-name="heart"]:after {
  content: "Heart";
}
.emoji-choice__item[data-type="eyes"][data-name="star"] {
  background-position: -225px 0;
}
.emoji-choice__item[data-type="eyes"][data-name="star"]:after {
  content: "Star";
}
.emoji-choice__item[data-type="eyes"][data-name="fire"] {
  background-position: -300px 0;
}
.emoji-choice__item[data-type="eyes"][data-name="fire"]:after {
  content: "Fire";
}
.emoji-choice__item[data-type="eyes"][data-name="squeeze"] {
  background-position: -375px 0;
}
.emoji-choice__item[data-type="eyes"][data-name="squeeze"]:after {
  content: "Oh no";
}
.emoji-choice__item[data-type="eyes"][data-name="closed-up"] {
  background-position: -450px 0;
}
.emoji-choice__item[data-type="eyes"][data-name="closed-up"]:after {
  content: "Joyful";
}
.emoji-choice__item[data-type="eyes"][data-name="closed-down"] {
  background-position: -525px 0;
}
.emoji-choice__item[data-type="eyes"][data-name="closed-down"]:after {
  content: "Content";
}
.emoji-choice__item[data-type="eyes"][data-name="lined"] {
  background-position: 0 -75px;
}
.emoji-choice__item[data-type="eyes"][data-name="lined"]:after {
  content: "-__-";
}
,
.emoji-choice__item[data-type="mouth"][data-name="default"] {
  background-position: -75px -75px;
}
.emoji-choice__item[data-type="mouth"][data-name="default"]:after {
  content: "Big Smile";
}
.emoji-choice__item[data-type="mouth"][data-name="upside"] {
  background-position: -150px -75px;
}
.emoji-choice__item[data-type="mouth"][data-name="upside"]:after {
  content: "What?!";
}
.emoji-choice__item[data-type="mouth"][data-name="open"] {
  background-position: -225px -75px;
}
.emoji-choice__item[data-type="mouth"][data-name="open"]:after {
  content: "Shocked";
}
.emoji-choice__item[data-type="mouth"][data-name="tongue"] {
  background-position: -300px -75px;
}
.emoji-choice__item[data-type="mouth"][data-name="tongue"]:after {
  content: "Cheeky";
}
.emoji-choice__item[data-type="mouth"][data-name="lined"] {
  background-position: -375px -75px;
}
.emoji-choice__item[data-type="mouth"][data-name="lined"]:after {
  content: "Mmm...";
}
.emoji-choice__item[data-type="mouth"][data-name="frown"] {
  background-position: -450px -75px;
}
.emoji-choice__item[data-type="mouth"][data-name="frown"]:after {
  content: "Frown";
}
.emoji-choice__item[data-type="mouth"][data-name="smile"] {
  background-position: -525px -75px;
}
.emoji-choice__item[data-type="mouth"][data-name="smile"]:after {
  content: "Smile";
}
.emoji-choice__item[data-type="mouth"][data-name="curse"] {
  background-position: 0 -150px;
}
.emoji-choice__item[data-type="mouth"][data-name="curse"]:after {
  content: "Wtf m8";
}
.emoji-choice__item[data-type="mouth"][data-name="grimace"] {
  background-position: -75px -150px;
}
.emoji-choice__item[data-type="mouth"][data-name="grimace"]:after {
  content: "Grimace";
}
.emoji-choice__item[data-type="mouth"][data-name="no-mouth"]:after {
  content: "No Mouth";
}
,
.emoji-choice__item[data-type="eyebrows"][data-name="no-eyebrows"]:after {
  content: "No brows";
}
.emoji-choice__item[data-type="eyebrows"][data-name="downwards"] {
  background-position: -150px -150px;
}
.emoji-choice__item[data-type="eyebrows"][data-name="downwards"]:after {
  content: "Curious";
}
.emoji-choice__item[data-type="eyebrows"][data-name="furrow"] {
  background-position: -225px -150px;
}
.emoji-choice__item[data-type="eyebrows"][data-name="furrow"]:after {
  content: "Furrow";
}
.emoji-choice__item[data-type="eyebrows"][data-name="furrow-far"] {
  background-position: -300px -150px;
}
.emoji-choice__item[data-type="eyebrows"][data-name="furrow-far"]:after {
  content: "Worried";
}
.emoji-choice__item[data-type="eyebrows"][data-name="up-far"] {
  background-position: -375px -150px;
}
.emoji-choice__item[data-type="eyebrows"][data-name="up-far"]:after {
  content: "Raised";
}
,
.emoji-choice__item[data-type="hat"][data-name="no-hat"]:after {
  content: "No hat";
}
.emoji-choice__item[data-type="hat"][data-name="round-hat"] {
  background-position: -450px -150px;
}
.emoji-choice__item[data-type="hat"][data-name="round-hat"]:after {
  content: "a Pink hat";
}
.emoji-choice__item[data-type="hat"][data-name="wizard-hat"] {
  background-position: -525px -150px;
}
.emoji-choice__item[data-type="hat"][data-name="wizard-hat"]:after {
  content: "Wizard hat";
}
.emoji-choice__item[data-type="hat"][data-name="sorting-hat"] {
  background-position: 0 -225px;
}
.emoji-choice__item[data-type="hat"][data-name="sorting-hat"]:after {
  content: "sorting hat";
}
.emoji-choice__item[data-type="hat"][data-name="top-hat"] {
  background-position: -75px -225px;
}
.emoji-choice__item[data-type="hat"][data-name="top-hat"]:after {
  content: "top hat";
}
.emoji-choice__item[data-type="hat"][data-name="traffic-cone"] {
  background-position: -150px -225px;
}
.emoji-choice__item[data-type="hat"][data-name="traffic-cone"]:after {
  content: "traffic cone";
}
.emoji-choice__item[data-type="hat"][data-name="cactus"] {
  background-position: -225px -225px;
}
.emoji-choice__item[data-type="hat"][data-name="cactus"]:after {
  content: "cactus hat";
}
.emoji-choice__item[data-type="hat"][data-name="mickey"] {
  background-position: -300px -225px;
}
.emoji-choice__item[data-type="hat"][data-name="mickey"]:after {
  content: "mickey hat";
}
,
.emoji-choice__item[data-type="face-extras"][data-name="sweat"] {
  background-position: -375px -225px;
}
.emoji-choice__item[data-type="face-extras"][data-name="sweat"]:after {
  content: "sweat";
}
.emoji-choice__item[data-type="face-extras"][data-name="tears"] {
  background-position: -450px -225px;
}
.emoji-choice__item[data-type="face-extras"][data-name="tears"]:after {
  content: "tears";
}
.emoji-choice__item[data-type="face-extras"][data-name="geek-glasses"] {
  background-position: -525px -225px;
}
.emoji-choice__item[data-type="face-extras"][data-name="geek-glasses"]:after {
  content: "Geeky glasses";
}
.emoji-choice__item[data-type="face-extras"][data-name="sunglasses"] {
  background-position: 0 -300px;
}
.emoji-choice__item[data-type="face-extras"][data-name="sunglasses"]:after {
  content: "sunglasses";
}
.emoji-choice__item[data-type="face-extras"][data-name="crescent-glasses"] {
  background-position: -75px -300px;
}
.emoji-choice__item[data-type="face-extras"][data-name="crescent-glasses"]:after {
  content: "Crescent glasses";
}
.emoji-choice__item[data-type="face-extras"][data-name="blush"] {
  background-position: -150px -300px;
}
.emoji-choice__item[data-type="face-extras"][data-name="blush"]:after {
  content: "Blush";
}
.emoji-choice__item[data-type="face-extras"][data-name="bandage"] {
  background-position: -225px -300px;
}
.emoji-choice__item[data-type="face-extras"][data-name="bandage"]:after {
  content: "Head Bandage";
}
.emoji-choice__item[data-type="face-extras"][data-name="scarf-gryf"] {
  background-position: -300px -300px;
}
.emoji-choice__item[data-type="face-extras"][data-name="scarf-gryf"]:after {
  content: "Gryffindor Scarf";
}
.emoji-choice__item[data-type="face-extras"][data-name="scarf-huff"] {
  background-position: -375px -300px;
}
.emoji-choice__item[data-type="face-extras"][data-name="scarf-huff"]:after {
  content: "Hufflepuff Scarf";
}
.emoji-choice__item[data-type="face-extras"][data-name="scarf-rave"] {
  background-position: -450px -300px;
}
.emoji-choice__item[data-type="face-extras"][data-name="scarf-rave"]:after {
  content: "Ravenclaw Scarf";
}
.emoji-choice__item[data-type="face-extras"][data-name="scarf-slyt"] {
  background-position: -525px -300px;
}
.emoji-choice__item[data-type="face-extras"][data-name="scarf-slyt"]:after {
  content: "Slytherin Scarf";
}
,
.emoji-choice__item[data-type="item"][data-name="default"] {
  background-image: none;
}
.emoji-choice__item[data-type="item"][data-name="default"]:after {
  content: "No Item";
}
.emoji-choice__item[data-type="item"][data-name="coffee"] {
  background-position: 0 -375px;
}
.emoji-choice__item[data-type="item"][data-name="coffee"]:after {
  content: "Coffee";
}
.emoji-choice__item[data-type="item"][data-name="shield"] {
  background-position: -75px -375px;
}
.emoji-choice__item[data-type="item"][data-name="shield"]:after {
  content: "Capt America"s Shield";
}
.emoji-choice__item[data-type="item"][data-name="dango"] {
  background-position: -150px -375px;
}
.emoji-choice__item[data-type="item"][data-name="dango"]:after {
  content: "Dango";
}
.emoji-choice__item[data-type="item"][data-name="wand"] {
  background-position: -225px -375px;
}
.emoji-choice__item[data-type="item"][data-name="wand"]:after {
  content: "Wand";
}
,
.emoji-choice__item[data-name="no-mouth"], .emoji-choice__item[data-name="no-eyebrows"], .emoji-choice__item[data-name="no-hat"], .emoji-choice__item[data-type="item"][data-name="default"] {
  background-image: none;
}
.emoji-choice__item[data-name="no-mouth"]:before, .emoji-choice__item[data-name="no-eyebrows"]:before, .emoji-choice__item[data-name="no-hat"]:before, .emoji-choice__item[data-type="item"][data-name="default"]:before {
  content: "29BB";
  font-size: 40px;
  color: #bbb;
  margin: 15px 18px;
}
,
.emoji-choice__item-custom {
  background: none;
  grid-column: span 4;
  display: flex;
  margin: 10px 0;
  text-transform: uppercase;
  align-items: center;
}
.emoji-choice__item-custom span {
  flex: 0 0 60%;
  line-height: 1.4;
  padding-right: 10px;
  font-size: 13px;
}
.emoji-choice__item-custom input {
  padding: 8px;
  border-radius: 4px;
  border: 2px solid #ebebeb;
  margin-right: 20px;
  max-width: 30px;
  font-size: 20px;
}
.emoji-choice__item-custom input:focus {
  border-color: #a5045a;
  outline: none;
}
,
.selected {
  border-color: #ce3572;
}
,
.main-content ::-webkit-scrollbar {
  width: 10px;
  border-radius: 10px;
}
.main-content ::-webkit-scrollbar-track {
  background: #f6f6f6;
  margin: 5px;
}
.main-content ::-webkit-scrollbar-thumb {
  background: linear-gradient(to bottom, #a5045a, #ea6465);
  border-radius: 10px;
}
.main-content ::-webkit-scrollbar-thumb:hover {
  background: #a5045a;
  border-radius: 10px;
}

Entonces, hemos escrito el marcado HTML y lo hemos personalizado y ahora agregaremos algunas funciones en este proyecto (Fábrica de emojis). Para hacer este proyecto (Fábrica de emojis) funcionan correctamente, por lo que usaremos JavaScript.

Así que aquí hay un JavaScript para nuestro proyecto (Fábrica de emojis) y también guárdelo con el nombre de archivo proporcionado. Haz un nuevo directorio llamado js y coloque este archivo en ese directorio.

Guardarlo como índice.js :

$(".js-choice").on("click", function() {
    var type = $(this).data("type");
    var multiple = $(this).data("multiple");
    var name = $(this).data("name");

    if (multiple === "no") {
        if (type === "eyebrows" || type === "eyes") {
            var typeSingle = type.slice(0, -1);
            var parentDiv = $("div." + type);
            parentDiv.empty();
            var newDiv =
                '
            ';
            $(parentDiv).append(newDiv);
            $('.emoji-choices div[data-type="' + type + '"]').removeClass("selected");
            $(this).addClass("selected");
        } else if (type === "item") {
            $(".item").text("");
            $(".emoji-face")
                .find("." + type)
                .attr("class", type + " " + name);
            $('.emoji-choices div[data-type="item"]').removeClass("selected");
            $(this).addClass("selected");
        } else if (type === "skin") {
            $(".emoji-face").attr("class", "emoji-face " + " " + name);
            $('.emoji-choices div[data-type="' + type + '"]').removeClass("selected");
            $(this).addClass("selected");
        } else {
            $(".emoji-face")
                .find("." + type)
                .attr("class", type + " " + name);
            $('.emoji-choices div[data-type="' + type + '"]').removeClass("selected");
            $(this).addClass("selected");
        }
    } else {
        $(this).toggleClass("selected");
        var elementToCheck = $("div." + type + "." + name);
        if (elementToCheck.length > 0) {
            elementToCheck.remove();
        } else {
            var newDiv = '
            ';
            $(".emoji-face").append(newDiv);
        }
    }
});

$(".js-custom-item").on("keyup paste", function() {
    var customItem = $(this).val();
    $('.emoji-choices div[data-type="item"]').removeClass("selected");

    $(".item").remove();
    var newDiv = '
    ' + customItem + "
    ";
    $(".emoji-face").append(newDiv);
});

Conclusión :

Así que aquí estamos, lo hemos hecho y nuestro proyecto Fábrica de emojis está listo ahora puede guardar todos los archivos como se indica. como los archivos CSS en el directorio css y los archivos JavaScript en un directorio JS. El nombre a continuación es un árbol de directorios de los archivos y carpetas de este proyecto.

Descargar proyecto (Fábrica de emojis) Archivo :

Descargar

Espero que le guste esta publicación y, si es así, compártala con sus amigos y siga visitando este sitio para obtener más este tipo de proyectos y tutoriales.

Entradas relacionadas

Add Emoji to WordPress Title aioseo all in one seo emoji Emojis Plugins SEO title Tutorials Wordpress wordpress seo

Cómo agregar fácilmente emojis a su título SEO en WordPress (Fácil)

tongasoft
accept payments using stripe add qr codes in wordpress payment forms Plugins qr qr code shortcodes stripe stripe for wordpress stripe payment plugins for wordpress stripe payments in wordpress Tutorials Wordpress wpforms wpforms lite

Cómo agregar pago con código QR Stripe en WordPress (2 formas sencillas)

tongasoft

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *