├── css ├── jojonarte.css ├── gabszypogi.css ├── CodeMeNatalie.css ├── SushilBajra11.css ├── jcardoz.css ├── maczokni.css ├── phillipknight.css ├── JasaniDhruv.css ├── botticelli13.css ├── chintanpalan-1.css ├── aliheikal.css ├── derekramsey12.css ├── sagar-pardhi.css ├── luispinedajr.css ├── amyegan.css ├── aolamide.css ├── mrcaste.css ├── Frinlanz.css ├── AraozYazmin.css ├── artoliukkonen.css ├── Zyo86.css ├── noviandsh.css ├── paulliamag.css ├── shrobbins.css ├── grjw.css ├── majse.css ├── garciajasminejoy.css ├── sanjpareek.css ├── caroldestreza.css ├── skelrilod.css ├── vancass.css ├── rmasianjr.css ├── kate_gamo.css ├── mark_allen.css ├── albertodeago.css ├── louierosero.css ├── InsiyaK110.css ├── grsn_chml.css ├── kuroyza.css ├── thewhiteswan.css ├── neetigyachahar.css ├── DeviousLab.css ├── matthewesp.css ├── valdeezzee.css ├── virus200.css ├── edu-matic.css ├── jmsgbrl__.css ├── sanderjson.css ├── biancapereira.css ├── dominuskelvin.css ├── divyT.css ├── akankshach.css ├── charlygg.css ├── mplb0.css ├── cristiand391.css ├── movingtothesun.css ├── matheusagcosta.css ├── quintanilhaedu.css ├── vitebo.css ├── meowlivia.css ├── kimberrypi.css ├── al-fin.css ├── mluis93.css ├── Naivedh.css ├── kjcpaas.css ├── porchee.css ├── tzyinc.css ├── Jomar2019.css ├── cayeborreo.css ├── smokinclove.css ├── index.css ├── anjlapastora.css ├── michieriffic.css ├── jiannejose.css ├── azel.css └── jennifer.css ├── .editorconfig ├── package.json ├── .github └── pull_request_template.md ├── README.md ├── .gitignore └── index.html /css/jojonarte.css: -------------------------------------------------------------------------------- 1 | #jojonarte { 2 | width: 100px; 3 | height: 100px; 4 | background: green; 5 | border-radius: 50%; 6 | } 7 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # editorconfig.org 2 | 3 | root = true 4 | 5 | [*] 6 | charset = utf-8 7 | end_of_line = lf 8 | indent_size = 2 9 | indent_style = space 10 | insert_final_newline = true 11 | trim_trailing_whitespace = true -------------------------------------------------------------------------------- /css/gabszypogi.css: -------------------------------------------------------------------------------- 1 | #gabszypogi { 2 | width: 100px; 3 | height: 100px; 4 | margin: 0 auto; 5 | padding: 2rem; 6 | background-image: linear-gradient(white 1%, red 50%, orange); 7 | border-radius: 150px; 8 | border: 2px solid orange; 9 | position: relative; 10 | } 11 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "emoji-div", 3 | "version": "1.0.0", 4 | "main": "index.html", 5 | "repository": "git@github.com:kimberrypi/emojidiv.git", 6 | "author": "ksmorano ", 7 | "license": "MIT", 8 | "private": false, 9 | "dependencies": { 10 | "gh-pages": "^2.1.1" 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /css/CodeMeNatalie.css: -------------------------------------------------------------------------------- 1 | #CodeMeNatalie { 2 | position: relative; 3 | width: 100px; 4 | height: 100px; 5 | background-color: #ff0000; 6 | color: #fff; 7 | padding: 2rem; 8 | border-radius: 50%; 9 | } 10 | 11 | #CodeMeNatalie:after { 12 | position: absolute; 13 | content: "秘"; 14 | top: 20px; 15 | left: 45px; 16 | font-size: 80px; 17 | font-family: "Lato", serif; 18 | text-shadow: 1px 1px #222; 19 | } 20 | -------------------------------------------------------------------------------- /css/SushilBajra11.css: -------------------------------------------------------------------------------- 1 | #SushilBajra11 { 2 | position: relative; 3 | width: 180px; 4 | height: 180px; 5 | background-color: rgb(255, 215, 0); 6 | border-radius: 100px; 7 | } 8 | 9 | #SushilBajra11::before, 10 | #SushilBajra11::after { 11 | position: absolute; 12 | content: ""; 13 | top: 60px; 14 | width: 20px; 15 | height: 40px; 16 | border-radius: 10px; 17 | background-color: brown; 18 | } 19 | 20 | #SushilBajra11::before { 21 | left: 50px; 22 | } 23 | 24 | #SushilBajra11::after { 25 | right: 50px; 26 | } 27 | -------------------------------------------------------------------------------- /css/jcardoz.css: -------------------------------------------------------------------------------- 1 | #jcardoz { 2 | width: 150px; 3 | height: 150px; 4 | padding-top: 10px; 5 | background: rgb(183, 206, 223); 6 | background: linear-gradient(180deg, rgb(183, 206, 223) 19%, rgb(78, 113, 146) 68%); 7 | color: rgb(255, 255, 255); 8 | text-align: center; 9 | border: 5px solid rgb(78, 113, 146); 10 | border-radius: 20%; 11 | font-weight: bold; 12 | font-size: 150px; 13 | font-family: Segoe UI, Arial, sans-serif; 14 | line-height: 1; 15 | } 16 | 17 | #jcardoz::before { 18 | content: "7"; 19 | } 20 | -------------------------------------------------------------------------------- /css/maczokni.css: -------------------------------------------------------------------------------- 1 | #maczokni { 2 | width: 200px; 3 | height: 200px; 4 | position: relative; 5 | border-radius: 100%; 6 | box-shadow: -5px 5px 15px white inset; 7 | background: radial-gradient(circle at 65% 35%, #000000 0 5%, transparent 7%), 8 | radial-gradient(circle at 35% 35%, #000000 0 5%, transparent 7%), 9 | radial-gradient(ellipse at 50% 75%, #ffffff 0 5%, transparent 7%), 10 | radial-gradient(circle at 27% 35%, #ffffff 0 20%, transparent 22%), 11 | radial-gradient(circle at 73% 35%, #ffffff 0 20%, transparent 22%), 12 | radial-gradient(circle at 50% 50%, #000000 0 50%); 13 | } 14 | -------------------------------------------------------------------------------- /.github/pull_request_template.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | EmojiDiv Checklist: 4 | 5 | - [ ] I have read EmojiDiv's contributing guidelines. 6 | - [ ] Create a div using your name as the ID. 7 | - [ ] Write a single div representation of your emoji using HTML and CSS (Not just adding an emoticon). 8 | - [ ] Set title of PR - 'Add emoji - [your div name]' 9 | - [ ] Upload Screenshot of your emoji in the details of the PR. 10 | - [ ] I had fun doing this! :wink: 11 | -------------------------------------------------------------------------------- /css/phillipknight.css: -------------------------------------------------------------------------------- 1 | #phillipknight { 2 | background-size: 100%; 3 | width: 150px; 4 | height: 150px; 5 | position: relative; 6 | text-align: center; 7 | background: rgba(255, 204, 0, 1); 8 | } 9 | #phillipknight:before, 10 | #phillipknight:after { 11 | content: ""; 12 | position: absolute; 13 | top: 0; 14 | left: 0; 15 | height: 150px; 16 | width: 150px; 17 | background: radial-gradient( 18 | circle, 19 | rgba(254, 255, 153, 1) 70%, 20 | rgba(255, 204, 0, 1) 72% 21 | ); 22 | } 23 | #phillipknight:before { 24 | transform: rotate(30deg); 25 | } 26 | #phillipknight:after { 27 | transform: rotate(60deg); 28 | } 29 | -------------------------------------------------------------------------------- /css/JasaniDhruv.css: -------------------------------------------------------------------------------- 1 | #JasaniDhruv { 2 | width: 100px; 3 | height: 100px; 4 | margin: 0 auto; 5 | padding: 2rem; 6 | background-color: #54e7e7; 7 | border-radius: 50%; 8 | position: relative; 9 | } 10 | 11 | #JasaniDhruv::before { 12 | content: ""; 13 | height: 35px; 14 | width: 25px; 15 | border-radius: 60%; 16 | box-shadow: 50px 0 #5e0247; 17 | background-color: #5e0247; 18 | position: absolute; 19 | top: 40px; 20 | left: 45px; 21 | } 22 | #JasaniDhruv::after { 23 | content: ""; 24 | position: absolute; 25 | left: 42px; 26 | bottom: 30px; 27 | height: 20px; 28 | width: 80px; 29 | border-top: 9px solid #5e0247; 30 | } 31 | -------------------------------------------------------------------------------- /css/botticelli13.css: -------------------------------------------------------------------------------- 1 | #botticelli13 { 2 | width: 0px; 3 | height: 0px; 4 | border-right: 60px solid transparent; 5 | border-top: 60px solid yellow; 6 | border-left: 60px solid yellow; 7 | border-bottom: 60px solid yellow; 8 | border-top-left-radius: 60px; 9 | border-top-right-radius: 60px; 10 | border-bottom-left-radius: 60px; 11 | border-bottom-right-radius: 60px; 12 | position: relative; 13 | } 14 | 15 | #botticelli13:before { 16 | content: " "; 17 | position: absolute; 18 | left: 10px; 19 | top: -50px; 20 | width: 20px; 21 | height: 20px; 22 | background-color: #242424; 23 | border-radius: inherit; 24 | z-index: 1; 25 | } 26 | -------------------------------------------------------------------------------- /css/chintanpalan-1.css: -------------------------------------------------------------------------------- 1 | #chintanpalan-1 { 2 | position: relative; 3 | min-height: 100px; 4 | width: 100px; 5 | margin-left: 10%; 6 | margin-top: 10%; 7 | } 8 | #chintanpalan-1::before, 9 | #chintanpalan-1::after { 10 | content: ""; 11 | position: absolute; 12 | top: 0; 13 | left: 0; 14 | border-radius: 2px; 15 | width: 10px; 16 | height: 100px; 17 | transform: rotate(55deg); 18 | box-shadow: -18px 4px 3px -4px rgba(255, 255, 255, 0.8), 19 | -18px -88px 3px -4px rgba(255, 255, 255, 0.8), -15px 0 0 0 #ad1718, 20 | -15px -26px 0 0 #000; 21 | } 22 | #chintanpalan-1::after { 23 | transform: rotate(43deg) translateX(-23px) translateY(-8px); 24 | } 25 | -------------------------------------------------------------------------------- /css/aliheikal.css: -------------------------------------------------------------------------------- 1 | #aliheikal { 2 | width: 200px; 3 | height: 200px; 4 | border-radius: 50%; 5 | background: #ecf0f1; 6 | position: relative; 7 | margin: 10px auto; 8 | } 9 | 10 | #aliheikal:before { 11 | content: ""; 12 | width: 125px; 13 | height: 125px; 14 | background: #003366; 15 | border-radius: 50%; 16 | position: absolute; 17 | left: 38px; 18 | top: 40px; 19 | box-shadow: inset 0px 0px 0px 35px #0080ff; 20 | } 21 | 22 | #aliheikal:after { 23 | content: ""; 24 | width: 35px; 25 | height: 35px; 26 | background: #ffffff; 27 | opacity: 0.8; 28 | border-radius: 50%; 29 | position: absolute; 30 | left: 105px; 31 | top: 69px; 32 | } 33 | -------------------------------------------------------------------------------- /css/derekramsey12.css: -------------------------------------------------------------------------------- 1 | #derekramsey12 { 2 | position: relative; 3 | width: 100px; 4 | height: 90px; 5 | } 6 | #derekramsey12:before, 7 | #derekramsey12:after { 8 | position: absolute; 9 | content: ""; 10 | left: 50px; 11 | top: 0; 12 | width: 50px; 13 | height: 80px; 14 | background-image: linear-gradient( 15 | to left, 16 | violet, 17 | indigo, 18 | blue, 19 | green, 20 | yellow, 21 | orange, 22 | red 23 | ); 24 | border-radius: 50px 50px 0 0; 25 | transform: rotate(-45deg); 26 | transform-origin: 0 100%; 27 | } 28 | #derekramsey12:after { 29 | left: 0; 30 | transform: rotate(45deg); 31 | transform-origin: 100% 100%; 32 | } 33 | -------------------------------------------------------------------------------- /css/sagar-pardhi.css: -------------------------------------------------------------------------------- 1 | #sagar-pardhi { 2 | width: 200px; 3 | height: 200px; 4 | background: gold; 5 | border-radius: 50%; 6 | border: 4px solid #242424; 7 | position: relative; 8 | } 9 | 10 | #sagar-pardhi::before { 11 | content: " "; 12 | position: absolute; 13 | width: 30px; 14 | height: 40px; 15 | top: 50px; 16 | left: 50px; 17 | background: black; 18 | box-shadow: 70px 0px 0 black; 19 | border-radius: 50%; 20 | z-index: 1; 21 | } 22 | 23 | #sagar-pardhi::after { 24 | content: " "; 25 | width: 40px; 26 | height: 50px; 27 | position: absolute; 28 | top: 110px; 29 | left: 80px; 30 | background: black; 31 | border-radius: 50%; 32 | z-index: 1; 33 | } 34 | -------------------------------------------------------------------------------- /css/luispinedajr.css: -------------------------------------------------------------------------------- 1 | #luispinedajr { 2 | background-color: gold; 3 | width: 200px; 4 | height: 200px; 5 | border-radius: 50%; 6 | margin: 0 auto; 7 | } 8 | 9 | #luispinedajr:after { 10 | content: ""; 11 | width: 125px; 12 | height: 100px; 13 | border-bottom: solid 50px black; 14 | border-radius: 50%; 15 | top: 20px; 16 | left: 5px; 17 | display: inline-block; 18 | position: relative; 19 | } 20 | 21 | #luispinedajr::before { 22 | content: ""; 23 | width: 30px; 24 | height: 30px; 25 | background-color: black; 26 | border-radius: 50%; 27 | display: inline-block; 28 | box-shadow: 50px 0px black; 29 | position: relative; 30 | top: -70px; 31 | left: 60px; 32 | } 33 | -------------------------------------------------------------------------------- /css/amyegan.css: -------------------------------------------------------------------------------- 1 | #amyegan { 2 | position: relative; 3 | width: 100px; 4 | height: 100px; 5 | margin: 0 auto; 6 | margin-bottom: 0px; 7 | padding: 2rem; 8 | background-color: gold; 9 | border-radius: 50%; 10 | } 11 | 12 | #amyegan::before { 13 | top: 50px; 14 | left: 2.75rem; 15 | position: absolute; 16 | content: ""; 17 | border-radius: 50%; 18 | width: 1.25rem; 19 | height: 1.75rem; 20 | background-color: black; 21 | box-shadow: 3.75rem 0 0 black; 22 | } 23 | 24 | #amyegan::after { 25 | top: 5.6rem; 26 | left: 4.8rem; 27 | position: absolute; 28 | content: "3"; 29 | font-family: sans-serif; 30 | font-weight: 700; 31 | font-size: 2.25rem; 32 | background: none; 33 | } 34 | -------------------------------------------------------------------------------- /css/aolamide.css: -------------------------------------------------------------------------------- 1 | #aolamide { 2 | border-radius: 50%; 3 | position: relative; 4 | width: 100px; 5 | height: 100px; 6 | padding: 2rem; 7 | background: linear-gradient(yellow, rgb(255, 179, 0)); 8 | border: 1px solid black; 9 | box-shadow: 2px 2px 2px grey; 10 | } 11 | 12 | #aolamide:before { 13 | position: absolute; 14 | content: ""; 15 | background-color: black; 16 | top: 30px; 17 | left: 30px; 18 | border-radius: 50%; 19 | padding: 15px; 20 | box-shadow: 68px 0px 0px black; 21 | } 22 | 23 | #aolamide:after { 24 | position: absolute; 25 | content: ""; 26 | background-color: black; 27 | border-radius: 0 0 50% 50%; 28 | padding: 20px; 29 | top: 80px; 30 | width: 50px; 31 | } 32 | -------------------------------------------------------------------------------- /css/mrcaste.css: -------------------------------------------------------------------------------- 1 | #mrcaste { 2 | position: relative; 3 | width: 200px; 4 | height: 100px; 5 | box-sizing: content-box; 6 | background-color: blueviolet; 7 | padding: 10px 10px 10px 10px; 8 | border: 1px solid; 9 | border-radius: 10px; 10 | } 11 | #mrcaste:before, 12 | #mrcaste:after { 13 | content: ""; 14 | box-sizing: content-box; 15 | position: absolute; 16 | top: 16px; 17 | left: 16px; 18 | width: 50px; 19 | height: 50px; 20 | border: 20px solid black; 21 | border-radius: 50px 50px 0 50px; 22 | transform: rotate(-45deg); 23 | border-color: #fff; 24 | } 25 | #mrcaste:after { 26 | left: auto; 27 | right: 16px; 28 | border-radius: 50px 50px 50px 0; 29 | transform: rotate(45deg); 30 | } 31 | -------------------------------------------------------------------------------- /css/Frinlanz.css: -------------------------------------------------------------------------------- 1 | #Frinlanz { 2 | width: 100px; 3 | height: 100px; 4 | margin: 0 auto; 5 | padding: 2rem; 6 | background-image: linear-gradient(to top, #f8a90a 30%, #fae75a 70%, #fff); 7 | border-radius: 50%; 8 | border: 5px solid #f8a90a; 9 | position: relative; 10 | } 11 | 12 | #Frinlanz:after { 13 | content: " "; 14 | width: 70px; 15 | height: 10px; 16 | background-color: black; 17 | right: 45px; 18 | bottom: 50px; 19 | position: absolute; 20 | } 21 | 22 | #Frinlanz:before { 23 | content: " "; 24 | position: absolute; 25 | width: 20px; 26 | height: 30px; 27 | background-color: black; 28 | box-shadow: 50px 0px 0 black; 29 | border-radius: 20px; 30 | left: 46px; 31 | z-index: 1; 32 | } 33 | -------------------------------------------------------------------------------- /css/AraozYazmin.css: -------------------------------------------------------------------------------- 1 | #AraozYazmin { 2 | position: relative; 3 | width: 200px; 4 | height: 150px; 5 | margin: 20px 0; 6 | background-image: radial-gradient(gold 25%, DarkGoldenrod 25%, Goldenrod); 7 | border-radius: 50% / 10%; 8 | color: white; 9 | text-align: center; 10 | text-indent: 0.1em; 11 | } 12 | #AraozYazmin:after { 13 | content: ""; 14 | position: absolute; 15 | top: 30%; 16 | bottom: 60%; 17 | right: -5%; 18 | left: -5%; 19 | background: green; 20 | border-radius: 20% / 20%; 21 | } 22 | #AraozYazmin:before { 23 | content: ""; 24 | position: absolute; 25 | top: 30%; 26 | bottom: 30%; 27 | right: -5%; 28 | left: -5%; 29 | background: SaddleBrown; 30 | border-radius: 30% / 30%; 31 | } 32 | -------------------------------------------------------------------------------- /css/artoliukkonen.css: -------------------------------------------------------------------------------- 1 | #artoliukkonen { 2 | width: 100px; 3 | height: 100px; 4 | margin: 0 auto; 5 | padding: 2rem; 6 | background-image: linear-gradient(155deg, white 1%, gold 25%, orange); 7 | border-radius: 50%; 8 | border: 4px solid #242424; 9 | position: relative; 10 | } 11 | 12 | #artoliukkonen:before, 13 | #artoliukkonen:after { 14 | content: "x"; 15 | position: absolute; 16 | width: 30px; 17 | height: 30px; 18 | border-radius: inherit; 19 | left: 40px; 20 | bottom: 100px; 21 | z-index: 1; 22 | font-size: 35px; 23 | font-family: Arial, sans-serif; 24 | box-shadow: 27px 68px 0px black; 25 | } 26 | 27 | #artoliukkonen:after { 28 | right: 30px; 29 | left: initial; 30 | box-shadow: initial; 31 | } 32 | -------------------------------------------------------------------------------- /css/Zyo86.css: -------------------------------------------------------------------------------- 1 | #jyotiman { 2 | box-shadow: 0 0 0 1em red, 0 1em 0 1em red, -2.5em 1.5em 0 0.5em red, 3 | 2.5em 1.5em 0 0.5em red, -3em -3em 0 0 red, 3em -3em 0 0 red, 4 | -2em -2em 0 0 red, 2em -2em 0 0 red, -3em -1em 0 0 red, -2em -1em 0 0 red, 5 | 2em -1em 0 0 red, 3em -1em 0 0 red, -4em 0 0 0 red, -3em 0 0 0 red, 6 | 3em 0 0 0 red, 4em 0 0 0 red, -5em 1em 0 0 red, -4em 1em 0 0 red, 7 | 4em 1em 0 0 red, 5em 1em 0 0 red, -5em 2em 0 0 red, 5em 2em 0 0 red, 8 | -5em 3em 0 0 red, -3em 3em 0 0 red, 3em 3em 0 0 red, 5em 3em 0 0 red, 9 | -2em 4em 0 0 red, -1em 4em 0 0 red, 1em 4em 0 0 red, 2em 4em 0 0 red; 10 | background: yellow; 11 | width: 1em; 12 | height: 1em; 13 | overflow: hidden; 14 | margin: 50px 0 70px 65px; 15 | } 16 | -------------------------------------------------------------------------------- /css/noviandsh.css: -------------------------------------------------------------------------------- 1 | #noviandsh { 2 | height: 100px; 3 | width: 100px; 4 | background-image: linear-gradient(155deg, white 1%, gold 25%, orange); 5 | border-radius: 50%; 6 | padding: 2rem; 7 | position: relative; 8 | border: 4px solid #242424; 9 | } 10 | 11 | #noviandsh:before { 12 | content: ""; 13 | height: 30px; 14 | width: 30px; 15 | background: black; 16 | position: absolute; 17 | border-radius: 50%; 18 | top: 50px; 19 | left: 40px; 20 | box-shadow: 55px 0px 0 black; 21 | } 22 | 23 | #noviandsh:after { 24 | content: ""; 25 | height: 50px; 26 | width: 50px; 27 | border-top: 5px solid black; 28 | position: absolute; 29 | bottom: 0; 30 | left: 60px; 31 | border-radius: 78% 22% 70% 30% / 30% 13% 87% 70%; 32 | } 33 | -------------------------------------------------------------------------------- /css/paulliamag.css: -------------------------------------------------------------------------------- 1 | #paulliamag { 2 | width: 200px; 3 | height: 200px; 4 | background: black; 5 | position: relative; 6 | border-radius: 100%; 7 | box-shadow: -5px 5px 15px white inset; 8 | background: linear-gradient(45deg, black, #000000bf); 9 | } 10 | 11 | #paulliamag:before { 12 | position: absolute; 13 | content: ""; 14 | top: 15px; 15 | left: 10%; 16 | width: 110px; 17 | height: 120px; 18 | border-radius: 50%; 19 | background-color: #ffffff; 20 | transform: rotate(-140deg); 21 | box-shadow: 0 1px 5px #000000 inset; 22 | } 23 | 24 | #paulliamag:after { 25 | position: absolute; 26 | content: "8"; 27 | left: 22%; 28 | font-size: 100px; 29 | font-family: cursive; 30 | font-weight: bolder; 31 | transform: rotate(5deg); 32 | } 33 | -------------------------------------------------------------------------------- /css/shrobbins.css: -------------------------------------------------------------------------------- 1 | #shrobbins { 2 | width: 100px; 3 | height: 60px; 4 | margin: 0 auto; 5 | padding: 30px; 6 | background-image: linear-gradient(#ff7518 15%, #df5a00 50%, #ff6f00); 7 | border-radius: 100px; 8 | position: relative; 9 | } 10 | 11 | #shrobbins:before { 12 | position: absolute; 13 | content: ""; 14 | background-color: black; 15 | top: 30px; 16 | left: 34px; 17 | padding: 13px; 18 | box-shadow: 70px 0px 0px black; 19 | } 20 | 21 | #shrobbins:after { 22 | content: ""; 23 | position: absolute; 24 | width: 0; 25 | height: 0; 26 | bottom: 45px; 27 | left: 64px; 28 | border-left: 20px solid transparent; 29 | border-right: 20px solid transparent; 30 | border-bottom: 20px solid black; 31 | box-shadow: 0px 30px 0px black; 32 | } 33 | -------------------------------------------------------------------------------- /css/grjw.css: -------------------------------------------------------------------------------- 1 | #grjw { 2 | width: 6.25em; 3 | height: 1.875em; 4 | margin: 0 auto; 5 | position: relative; 6 | background-color: #e0e0e0; 7 | } 8 | 9 | #grjw::after, 10 | #grjw::before { 11 | position: absolute; 12 | width: 3.75em; 13 | height: 3.75em; 14 | content: ""; 15 | background: radial-gradient( 16 | circle at 1.25em 1.5em, 17 | #e7e7e7 1.25em, 18 | transparent 0% 19 | ), 20 | radial-gradient(circle at 2.25em 2.5em, #d0d0d0 1.25em, transparent 0%), 21 | linear-gradient(45deg, #e0e0e0 1.5em, transparent 1.5em); 22 | } 23 | 24 | #grjw::before { 25 | top: -0.75em; 26 | right: 5.5em; 27 | transform: rotate(-139deg); 28 | } 29 | 30 | #grjw::after { 31 | top: -0.75em; 32 | left: 5.5em; 33 | transform: rotate(50deg); 34 | } 35 | -------------------------------------------------------------------------------- /css/majse.css: -------------------------------------------------------------------------------- 1 | #majse { 2 | box-shadow: 0 0 0 1em blue, 0 1em 0 1em blue, -2.5em 1.5em 0 0.5em blue, 3 | 2.5em 1.5em 0 0.5em blue, -3em -3em 0 0 blue, 3em -3em 0 0 blue, 4 | -2em -2em 0 0 blue, 2em -2em 0 0 blue, -3em -1em 0 0 blue, 5 | -2em -1em 0 0 blue, 2em -1em 0 0 blue, 3em -1em 0 0 blue, -4em 0 0 0 blue, 6 | -3em 0 0 0 blue, 3em 0 0 0 blue, 4em 0 0 0 blue, -5em 1em 0 0 blue, 7 | -4em 1em 0 0 blue, 4em 1em 0 0 blue, 5em 1em 0 0 blue, -5em 2em 0 0 blue, 8 | 5em 2em 0 0 blue, -5em 3em 0 0 blue, -3em 3em 0 0 blue, 3em 3em 0 0 blue, 9 | 5em 3em 0 0 blue, -2em 4em 0 0 blue, -1em 4em 0 0 blue, 1em 4em 0 0 blue, 10 | 2em 4em 0 0 blue; 11 | background: blue; 12 | width: 1em; 13 | height: 1em; 14 | overflow: hidden; 15 | position: relative; 16 | } 17 | -------------------------------------------------------------------------------- /css/garciajasminejoy.css: -------------------------------------------------------------------------------- 1 | #garciajasminejoy { 2 | position: relative; 3 | height: 150px; 4 | width: 150px; 5 | background-color: yellow; 6 | background: radial-gradient(12px 11px at 32% 32%, black 50%, transparent 4%), 7 | radial-gradient(12px 11px at 67% 32%, black 50%, transparent 4%), 8 | radial-gradient(30px 30px at 30% 40%, white 50%, transparent 4%), 9 | radial-gradient(30px 30px at 65% 40%, white 50%, transparent 4%), 10 | radial-gradient(circle at bottom right, gold 50%, yellow 100%); 11 | border-radius: 100%; 12 | border: 4px solid black; 13 | } 14 | 15 | #garciajasminejoy:after { 16 | content: ""; 17 | position: absolute; 18 | top: 70%; 19 | left: 34%; 20 | width: 32%; 21 | height: 6px; 22 | background-color: black; 23 | border-radius: 4px; 24 | } 25 | -------------------------------------------------------------------------------- /css/sanjpareek.css: -------------------------------------------------------------------------------- 1 | #sanjpareek { 2 | width: 96px; 3 | box-sizing: content-box; 4 | height: 48px; 5 | background: #eee; 6 | border-color: black; 7 | border-style: solid; 8 | border-width: 2px 2px 50px 2px; 9 | border-radius: 100%; 10 | position: relative; 11 | } 12 | #sanjpareek:before { 13 | content: ""; 14 | position: absolute; 15 | top: 50%; 16 | left: 0; 17 | background: #eee; 18 | border: 18px solid black; 19 | border-radius: 100%; 20 | width: 12px; 21 | height: 12px; 22 | box-sizing: content-box; 23 | } 24 | #sanjpareek:after { 25 | content: ""; 26 | position: absolute; 27 | top: 50%; 28 | left: 50%; 29 | background: black; 30 | border: 18px solid #eee; 31 | border-radius: 100%; 32 | width: 12px; 33 | height: 12px; 34 | box-sizing: content-box; 35 | } 36 | -------------------------------------------------------------------------------- /css/caroldestreza.css: -------------------------------------------------------------------------------- 1 | #caroldestreza { 2 | background: #fcc21b; 3 | position: relative; 4 | width: 172px; 5 | height: 140px; 6 | border-radius: 60% 60% 40% 40% / 80% 80% 20% 20%; 7 | } 8 | 9 | #caroldestreza:before { 10 | position: absolute; 11 | content: ""; 12 | height: 20px; 13 | width: 85px; 14 | border-radius: 10% 10% 50% 50% / 20% 20% 80% 80%; 15 | background-color: transparent; 16 | left: 45px; 17 | top: 65px; 18 | box-shadow: -10px 20px 0 0px #2f2f2f, 10px 20px 0 0px #2f2f2f; 19 | } 20 | 21 | #caroldestreza:after { 22 | position: absolute; 23 | content: ""; 24 | height: 30px; 25 | width: 25px; 26 | border-radius: 50%; 27 | background-color: transparent; 28 | left: 60px; 29 | top: 20px; 30 | box-shadow: -20px 20px 0 0px #2f2f2f, 50px 20px 0 0px #2f2f2f; 31 | } 32 | -------------------------------------------------------------------------------- /css/skelrilod.css: -------------------------------------------------------------------------------- 1 | #skelrilod { 2 | display: flex; 3 | justify-content: center; 4 | border: 3px solid #ff9900; 5 | background-image: radial-gradient(#ffff00, #ffc83d); 6 | width: 350px; 7 | height: 350px; 8 | border-radius: 50%; 9 | box-shadow: 5px 5px 5px 5px grey; 10 | } 11 | 12 | #skelrilod::before { 13 | content: ""; 14 | position: relative; 15 | border: 10px solid black; 16 | height: 25px; 17 | width: 25px; 18 | border-radius: 50%; 19 | background-color: black; 20 | margin: auto; 21 | top: 75px; 22 | box-shadow: 90px 0px 0 black; 23 | margin-left: 110px; 24 | } 25 | 26 | #skelrilod::after { 27 | content: ""; 28 | position: absolute; 29 | width: 150px; 30 | height: 150px; 31 | border-top: 14px solid black; 32 | border-radius: 50%; 33 | margin-top: 55px; 34 | } 35 | -------------------------------------------------------------------------------- /css/vancass.css: -------------------------------------------------------------------------------- 1 | #vancass { 2 | content: ""; 3 | width: 20px; 4 | height: 20px; 5 | background: black; 6 | position: relative; 7 | left: -20px; 8 | border-radius: 50%; 9 | box-shadow: 40px 0px black, 20px 40px black, 20px 20px 0px 50px yellow, 10 | 20px 20px 0px 55px orange; 11 | margin-bottom: 75px; 12 | } 13 | 14 | #vancass:after { 15 | content: ""; 16 | width: 50px; 17 | height: 30px; 18 | position: absolute; 19 | bottom: -42px; 20 | left: 15px; 21 | background: black; 22 | border-radius: 50%; 23 | transform: rotate(30deg); 24 | } 25 | 26 | #vancass:before { 27 | content: ""; 28 | width: 50px; 29 | height: 30px; 30 | position: absolute; 31 | bottom: -42px; 32 | left: -5px; 33 | background: black; 34 | border-radius: 50%; 35 | transform: rotate(-30deg); 36 | } 37 | -------------------------------------------------------------------------------- /css/rmasianjr.css: -------------------------------------------------------------------------------- 1 | #rmasianjr { 2 | width: 200px; 3 | height: 200px; 4 | position: relative; 5 | border-radius: 100%; 6 | box-shadow: 2px 5px 10px #9aa5b1 inset; 7 | background: linear-gradient(-135deg, black, #000000bf); 8 | } 9 | 10 | #rmasianjr::before { 11 | content: ""; 12 | z-index: 2; 13 | position: absolute; 14 | top: 40%; 15 | left: 20%; 16 | width: 45px; 17 | height: 20px; 18 | background-color: #cb6e17; 19 | box-shadow: 80px 0px 0 #cb6e17; 20 | border-radius: 50%; 21 | } 22 | 23 | #rmasianjr::after { 24 | content: ""; 25 | position: absolute; 26 | top: 30%; 27 | bottom: 40%; 28 | right: 5%; 29 | left: 5%; 30 | background-image: linear-gradient(to right, white 1%, gold 50%, orange); 31 | border-radius: 80% / 50%; 32 | box-shadow: 5px 5px 10px rgba(255, 255, 255, 0.2); 33 | } 34 | -------------------------------------------------------------------------------- /css/kate_gamo.css: -------------------------------------------------------------------------------- 1 | #kate_gamo { 2 | width: 100px; 3 | height: 100px; 4 | margin: 0 auto; 5 | padding: 2rem; 6 | background-image: linear-gradient( 7 | to top, 8 | rgba(255, 166, 0, 0.76) 5%, 9 | gold 60%, 10 | white 11 | ); 12 | border-radius: 50%; 13 | border: 4px solid gold; 14 | position: relative; 15 | } 16 | 17 | #kate_gamo::before { 18 | position: absolute; 19 | content: ""; 20 | top: 55px; 21 | left: 100px; 22 | width: 25px; 23 | height: 25px; 24 | border-radius: 7%; 25 | box-shadow: 4px 4px #a76700; 26 | filter: box-drop; 27 | transform: rotate(140deg); 28 | } 29 | 30 | #kate_gamo::after { 31 | position: absolute; 32 | content: ""; 33 | top: 50px; 34 | left: 40px; 35 | width: 20px; 36 | height: 35px; 37 | border-radius: 80%; 38 | background-color: #a76700; 39 | } 40 | -------------------------------------------------------------------------------- /css/mark_allen.css: -------------------------------------------------------------------------------- 1 | #mark_allen { 2 | width: 160px; 3 | height: 160px; 4 | position: relative; 5 | overflow: hidden; 6 | background: linear-gradient(to top, #f8aa0a 5%, #ffe730 70%, #fff); 7 | border-radius: 50%; 8 | box-shadow: inset 0 0 10px #fea901; 9 | } 10 | 11 | #mark_allen::before { 12 | content: ""; 13 | position: absolute; 14 | top: 50px; 15 | left: -21px; 16 | height: 20px; 17 | width: 100%; 18 | overflow: hidden; 19 | background-image: linear-gradient(to right, #6c3200 56%, transparent 0%); 20 | background-position: bottom; 21 | background-size: 72px 8px; 22 | background-repeat: repeat-x; 23 | } 24 | 25 | #mark_allen::after { 26 | content: ""; 27 | position: absolute; 28 | left: 42px; 29 | bottom: 30px; 30 | height: 20px; 31 | width: 80px; 32 | border-top: 9px solid #6c3200; 33 | } 34 | -------------------------------------------------------------------------------- /css/albertodeago.css: -------------------------------------------------------------------------------- 1 | #albertodeago { 2 | height: 100px; 3 | width: 100px; 4 | background-image: linear-gradient(155deg, white 1%, gold 25%, orange); 5 | border-radius: 50%; 6 | padding: 2rem; 7 | position: relative; 8 | border: 4px solid #242424; 9 | } 10 | 11 | #albertodeago:before { 12 | transform: translate(10px, 10px); 13 | content: ""; 14 | height: 24px; 15 | width: 32px; 16 | background: black; 17 | position: absolute; 18 | border-radius: 50%; 19 | top: 50px; 20 | left: 40px; 21 | box-shadow: 55px 0px 0 black; 22 | } 23 | 24 | #albertodeago:after { 25 | content: ""; 26 | height: 50px; 27 | width: 50px; 28 | border-top: 5px solid black; 29 | position: absolute; 30 | bottom: 25px; 31 | left: 60px; 32 | border-radius: 78% 22% 70% 30% / 30% 13% 87% 70%; 33 | transform: rotateX(125deg); 34 | } 35 | -------------------------------------------------------------------------------- /css/louierosero.css: -------------------------------------------------------------------------------- 1 | #louierosero { 2 | position: relative; 3 | width: 0px; 4 | height: 0px; 5 | border-right: 60px solid transparent; 6 | border-top: 60px solid orange; 7 | border-left: 60px solid orange; 8 | border-bottom: 60px solid orange; 9 | border-top-left-radius: 60px; 10 | border-top-right-radius: 60px; 11 | border-bottom-left-radius: 60px; 12 | border-bottom-right-radius: 60px; 13 | } 14 | 15 | #louierosero::before { 16 | content: ""; 17 | position: absolute; 18 | top: -40px; 19 | left: -20px; 20 | height: 20px; 21 | width: 20px; 22 | background: white; 23 | border-radius: 50%; 24 | } 25 | 26 | #louierosero::after { 27 | content: ""; 28 | position: absolute; 29 | top: -35px; 30 | left: -15px; 31 | height: 10px; 32 | width: 10px; 33 | background: gray; 34 | border-radius: 50%; 35 | } 36 | -------------------------------------------------------------------------------- /css/InsiyaK110.css: -------------------------------------------------------------------------------- 1 | #InsiyaK110 { 2 | position: absolute; 3 | width: 50px; 4 | height: 50px; 5 | border-right: 70px solid transparent; 6 | border-top: 70px solid yellow; 7 | border-left: 70px solid yellow; 8 | border-bottom: 70px solid yellow; 9 | border-top-left-radius: 70px; 10 | border-top-right-radius: 70px; 11 | border-bottom-left-radius: 70px; 12 | border-bottom-right-radius: 70px; 13 | } 14 | 15 | #InsiyaK110::before { 16 | content: ""; 17 | position: absolute; 18 | top: -50px; 19 | left: -30px; 20 | height: 30px; 21 | width: 30px; 22 | background: white; 23 | border-radius: 40%; 24 | } 25 | 26 | #InsiyaK110::after { 27 | content: ""; 28 | position: absolute; 29 | top: -45px; 30 | left: -25px; 31 | height: 20px; 32 | width: 20px; 33 | background: saddlebrown; 34 | border-radius: 40%; 35 | } 36 | -------------------------------------------------------------------------------- /css/grsn_chml.css: -------------------------------------------------------------------------------- 1 | #grsn_chml { 2 | width: 160px; 3 | height: 160px; 4 | position: relative; 5 | overflow: hidden; 6 | background: linear-gradient(to top, #ffd684 5%, #fdf08b 70%, #fff); 7 | border-radius: 50%; 8 | } 9 | 10 | #grsn_chml::before { 11 | content: " "; 12 | position: absolute; 13 | width: 10px; 14 | height: 10px; 15 | border-radius: inherit; 16 | left: 30px; 17 | bottom: 80px; 18 | z-index: 1; 19 | box-shadow: #7c4f00 80px 0px 0px 0px, #815200 -10px 11px 0px 0px; 20 | } 21 | 22 | #grsn_chml::after { 23 | content: " "; 24 | position: absolute; 25 | width: 50px; 26 | height: 50px; 27 | right: 48px; 28 | bottom: 18px; 29 | border: 8px solid #754412; 30 | border-radius: 120%; 31 | border-bottom-left-radius: 40px; 32 | border-top-color: transparent; 33 | border-right-color: transparent; 34 | transform: rotate(315deg); 35 | } 36 | -------------------------------------------------------------------------------- /css/kuroyza.css: -------------------------------------------------------------------------------- 1 | #kuroyza { 2 | position: relative; 3 | width: 100px; 4 | height: 100px; 5 | background-image: linear-gradient(to right bottom, #ffff00 25%, #ffb300); 6 | color: #fff; 7 | padding: 2rem; 8 | border-radius: 50%; 9 | } 10 | 11 | #kuroyza::after { 12 | content: ""; 13 | position: absolute; 14 | top: 58px; 15 | right: 29%; 16 | height: 20px; 17 | width: 16px; 18 | background-color: #333; 19 | border-radius: inherit; 20 | box-shadow: -55px 0 0 #333; 21 | } 22 | 23 | #kuroyza::before { 24 | content: ""; 25 | position: absolute; 26 | left: 67px; 27 | bottom: 25px; 28 | width: 26px; 29 | height: 12px; 30 | background-image: linear-gradient(to right, #fff 85%, #3339 80%); 31 | background-size: 15%; 32 | border-radius: 100px; 33 | border: 1px solid #333; 34 | transform: scaleX(2); 35 | box-shadow: 0 -122px 0px 16px #333; 36 | } 37 | -------------------------------------------------------------------------------- /css/thewhiteswan.css: -------------------------------------------------------------------------------- 1 | #thewhiteswan { 2 | width: 160px; 3 | height: 160px; 4 | border-radius: 50%; 5 | background: linear-gradient(#ff8d00 55% 40%, transparent 50%), 6 | radial-gradient(circle at 50% 55%, #000000 38% 38%, transparent 40%), 7 | radial-gradient(circle at 50% 50%, #ff8d00 0 50%); 8 | position: relative; 9 | } 10 | 11 | #thewhiteswan::after, 12 | #thewhiteswan::before { 13 | position: absolute; 14 | width: 60px; 15 | height: 60px; 16 | content: ""; 17 | width: 0; 18 | height: 0; 19 | border-left: 50px solid transparent; 20 | border-right: 50px solid transparent; 21 | border-bottom: 90px solid black; 22 | } 23 | 24 | #thewhiteswan::before { 25 | top: 5px; 26 | right: 60px; 27 | transform: rotate(0deg) scale(0.4); 28 | } 29 | 30 | #thewhiteswan::after { 31 | top: 5px; 32 | left: 60px; 33 | transform: rotate(0deg) scale(0.4); 34 | } 35 | -------------------------------------------------------------------------------- /css/neetigyachahar.css: -------------------------------------------------------------------------------- 1 | #neetigyachahar { 2 | width: 150px; 3 | height: 150px; 4 | background-image: linear-gradient(rgb(255, 179, 0), yellow); 5 | border-radius: 500px; 6 | border: 2px solid black; 7 | } 8 | 9 | #neetigyachahar:after { 10 | display: inline; 11 | content: "."; 12 | position: relative; 13 | left: -6px; 14 | top: 23px; 15 | padding: 10px; 16 | color: transparent; 17 | background-color: transparent; 18 | border-bottom: 6px solid black; 19 | border-radius: 40px; 20 | box-shadow: 27px 68px 0px black; 21 | z-index: -10px; 22 | } 23 | 24 | #neetigyachahar:before { 25 | display: inline; 26 | content: "."; 27 | position: relative; 28 | left: 80px; 29 | top: 23px; 30 | padding: 10px; 31 | color: transparent; 32 | background-color: transparent; 33 | border-bottom: 6px solid black; 34 | border-radius: 40px; 35 | z-index: 10; 36 | } 37 | -------------------------------------------------------------------------------- /css/DeviousLab.css: -------------------------------------------------------------------------------- 1 | #deviouslab { 2 | width: 100px; 3 | height: 100px; 4 | margin: 0 auto; 5 | padding: 2rem; 6 | background-image: linear-gradient( 7 | to top, 8 | rgba(255, 166, 0, 0.76) 5%, 9 | gold 60%, 10 | yellow 11 | ); 12 | border-radius: 50%; 13 | border: 2px solid black; 14 | position: relative; 15 | } 16 | 17 | #deviouslab::before { 18 | content: ""; 19 | position: absolute; 20 | top: 40px; 21 | left: 43px; 22 | width: 25px; 23 | height: 35px; 24 | background: #a76700; 25 | border-radius: 50%; 26 | box-shadow: 55px 0 #a76700; 27 | } 28 | 29 | #deviouslab::after { 30 | content: ""; 31 | position: absolute; 32 | width: 85px; 33 | height: 40px; 34 | top: 100px; 35 | left: 40px; 36 | background: linear-gradient(to bottom, #a76700 0%, #a76700 100%); 37 | border-bottom-left-radius: 40px; 38 | border-bottom-right-radius: 40px; 39 | } 40 | -------------------------------------------------------------------------------- /css/matthewesp.css: -------------------------------------------------------------------------------- 1 | #matthewesp { 2 | width: 100px; 3 | height: 100px; 4 | margin: 0 auto; 5 | padding: 2rem; 6 | background-image: linear-gradient(155deg, white 1%, gold 25%, orange); 7 | border-radius: 50%; 8 | border: 4px solid #242424; 9 | position: relative; 10 | } 11 | 12 | #matthewesp:before { 13 | content: " "; 14 | position: absolute; 15 | width: 30px; 16 | height: 30px; 17 | background-color: #242424; 18 | box-shadow: 50px 0px 0 #242424; 19 | border-radius: inherit; 20 | left: 40px; 21 | bottom: 80px; 22 | z-index: 1; 23 | } 24 | 25 | #matthewesp:after { 26 | content: " "; 27 | width: 20px; 28 | height: 20px; 29 | background-color: pink; 30 | border-radius: inherit; 31 | border: solid 2px black; 32 | position: absolute; 33 | left: 70px; 34 | bottom: 30px; 35 | z-index: 1; 36 | } -------------------------------------------------------------------------------- /css/valdeezzee.css: -------------------------------------------------------------------------------- 1 | #valdeezzee { 2 | width: 100px; 3 | height: 100px; 4 | margin: 0 auto; 5 | padding: 2rem; 6 | background-image: linear-gradient( 7 | to top, 8 | rgba(255, 166, 0, 0.76) 100%, 9 | gold 20%, 10 | white 11 | ); 12 | border-radius: 50%; 13 | border: 4px solid gold; 14 | position: relative; 15 | } 16 | 17 | #valdeezzee::before { 18 | position: absolute; 19 | content: ""; 20 | top: 70px; 21 | left: 67px; 22 | width: 40px; 23 | height: 40px; 24 | border-radius: 40%; 25 | box-shadow: 6px 6px #a76700; 26 | filter: box-drop; 27 | transform: rotate(45deg); 28 | } 29 | 30 | #valdeezzee::after { 31 | content: " "; 32 | position: absolute; 33 | top: 70px; 34 | left: 50px; 35 | width: 20px; 36 | height: 20px; 37 | background-color: saddlebrown; 38 | box-shadow: 50px 0px 0 saddlebrown; 39 | border-radius: inherit; 40 | z-index: 1; 41 | } 42 | -------------------------------------------------------------------------------- /css/virus200.css: -------------------------------------------------------------------------------- 1 | #virus200 { 2 | width: 100px; 3 | height: 100px; 4 | margin: 0 auto; 5 | padding: 2rem; 6 | background-image: linear-gradient(155deg, white 1%, gold 25%, orange); 7 | border-radius: 50%; 8 | border: 4px solid #242424; 9 | position: relative; 10 | } 11 | 12 | #virus200:before { 13 | content: " "; 14 | position: absolute; 15 | width: 15px; 16 | height: 15px; 17 | background-color: #242424; 18 | box-shadow: 50px 0px 0 #242424; 19 | border-radius: inherit; 20 | left: 50px; 21 | bottom: 80px; 22 | z-index: 01; 23 | } 24 | 25 | #virus200:after { 26 | content: " "; 27 | width: 60px; 28 | height: 20px; 29 | background-color: rgb(0, 0, 0); 30 | border-radius: 0 0 50% 50%; 31 | border: solid 2px black; 32 | position: absolute; 33 | left: 50px; 34 | bottom: 30px; 35 | z-index: 1; 36 | } -------------------------------------------------------------------------------- /css/edu-matic.css: -------------------------------------------------------------------------------- 1 | #edu-matic1 { 2 | width: 10rem; 3 | height: 10rem; 4 | background: #dbdbdb; 5 | border-radius: 50%; 6 | } 7 | #edu-matic1::before { 8 | content: ""; 9 | width: 10rem; 10 | height: 5rem; 11 | background: #ff1c1c; 12 | border-radius: 5rem 5rem 0 0; 13 | position: absolute; 14 | } 15 | #edu-matic2 { 16 | width: 10rem; 17 | height: 0.5rem; 18 | background: #333; 19 | margin-top: 4.8rem; 20 | position: absolute; 21 | } 22 | #edu-matic2::before { 23 | content: ""; 24 | width: 3rem; 25 | height: 3rem; 26 | background: #333; 27 | border-radius: 50%; 28 | position: absolute; 29 | margin-left: 3.5rem; 30 | margin-top: -1.1rem; 31 | } 32 | 33 | #edu-matic2::after { 34 | content: ""; 35 | width: 1.8rem; 36 | height: 1.8rem; 37 | background: #fff; 38 | border-radius: 50%; 39 | margin-left: 4.1rem; 40 | margin-top: -0.5rem; 41 | position: absolute; 42 | } 43 | -------------------------------------------------------------------------------- /css/jmsgbrl__.css: -------------------------------------------------------------------------------- 1 | #jmsgbrl__ { 2 | width: 100px; 3 | height: 100px; 4 | margin: 0 auto; 5 | padding: 2rem; 6 | background-image: linear-gradient(orange 1%, gold 50%, white); 7 | border-radius: 50%; 8 | border: 4px solid gold; 9 | position: relative; 10 | } 11 | 12 | #jmsgbrl__:before { 13 | content: " "; 14 | width: 50px; 15 | height: 50px; 16 | border: 5px solid black; 17 | border-radius: 50%; 18 | border-top-right-radius: 100px; 19 | border-bottom-color: transparent; 20 | border-left-color: transparent; 21 | transform: rotate(-45deg); 22 | right: 52px; 23 | top: 20px; 24 | position: absolute; 25 | } 26 | 27 | #jmsgbrl__:after { 28 | content: " "; 29 | position: absolute; 30 | width: 20px; 31 | height: 20px; 32 | background-color: black; 33 | box-shadow: 50px 0px 0 black; 34 | border-radius: inherit; 35 | left: 50px; 36 | bottom: 30px; 37 | z-index: 1; 38 | } 39 | -------------------------------------------------------------------------------- /css/sanderjson.css: -------------------------------------------------------------------------------- 1 | #sanderjson { 2 | width: 100px; 3 | height: 100px; 4 | margin: 0 auto; 5 | padding: 2rem; 6 | border-radius: 50%; 7 | content: ""; 8 | border: 5px solid #373f51; 9 | background: linear-gradient( 10 | 181deg, 11 | #ead2ac 1%, 12 | #faf0ca 25%, 13 | #ffd700 45%, 14 | #fa8072 15 | ); 16 | position: relative; 17 | } 18 | #sanderjson:before { 19 | width: 30px; 20 | height: 30px; 21 | border-radius: 25px; 22 | background-color: #373f51; 23 | box-shadow: 50px 0px 0 #373f51; 24 | content: " "; 25 | z-index: 10; 26 | position: absolute; 27 | top: 30px; 28 | left: 40px; 29 | } 30 | #sanderjson::after { 31 | content: ""; 32 | width: 50%; 33 | height: 20px; 34 | background-color: #f8f8ff; 35 | border-radius: inherit; 36 | border: solid 2px LightPink; 37 | position: absolute; 38 | left: 25%; 39 | bottom: 30px; 40 | z-index: 1; 41 | } 42 | -------------------------------------------------------------------------------- /css/biancapereira.css: -------------------------------------------------------------------------------- 1 | #biancapereira { 2 | position: relative; 3 | width: 150px; 4 | height: 150px; 5 | background: #ede821; 6 | border-radius: 50%; 7 | border: 3px solid #100f0a; 8 | } 9 | 10 | #biancapereira:after { 11 | content: ""; 12 | position: absolute; 13 | top: 45px; 14 | left: 35px; 15 | width: 25px; 16 | height: 35px; 17 | background: #100f0a; 18 | border-radius: 50%; 19 | box-shadow: 55px 0 #100f0a; 20 | } 21 | 22 | #biancapereira:before { 23 | content: ""; 24 | position: absolute; 25 | width: 70px; 26 | height: 40px; 27 | top: 95px; 28 | left: 38px; 29 | background: linear-gradient( 30 | to bottom, 31 | rgba(255, 255, 255, 1) 0%, 32 | rgba(255, 255, 255, 1) 25%, 33 | rgba(16, 15, 10, 1) 25%, 34 | rgba(16, 15, 10, 1) 100% 35 | ); 36 | border: 3px solid #100f0a; 37 | border-bottom-left-radius: 40px; 38 | border-bottom-right-radius: 40px; 39 | } 40 | -------------------------------------------------------------------------------- /css/dominuskelvin.css: -------------------------------------------------------------------------------- 1 | #dominuskelvin { 2 | width: 100px; 3 | height: 100px; 4 | margin: 0 auto; 5 | padding: 2rem; 6 | background-image: linear-gradient(155deg, #fff 1%, #fee134 25%, #f39f20); 7 | border-radius: 50%; 8 | border: 1px solid black; 9 | position: relative; 10 | } 11 | 12 | #dominuskelvin:after { 13 | content: " "; 14 | width: 50px; 15 | height: 50px; 16 | border: 5px solid black; 17 | border-radius: 50%; 18 | border-top-right-radius: 100px; 19 | border-bottom-color: transparent; 20 | border-left-color: transparent; 21 | transform: rotate(132deg); 22 | right: 52px; 23 | bottom: 10px; 24 | position: absolute; 25 | } 26 | 27 | #dominuskelvin:before { 28 | content: " "; 29 | position: absolute; 30 | width: 20px; 31 | height: 20px; 32 | background-color: black; 33 | box-shadow: 50px 0px 0 black; 34 | border-radius: inherit; 35 | left: 46px; 36 | z-index: 1; 37 | } 38 | -------------------------------------------------------------------------------- /css/divyT.css: -------------------------------------------------------------------------------- 1 | #divyT { 2 | width: 160px; 3 | height: 160px; 4 | position: relative; 5 | overflow: hidden; 6 | background: linear-gradient(to top, #f8aa0a 5%, #ffe730 70%, #fff); 7 | border-radius: 50%; 8 | box-shadow: inset 0 0 10px #fea901; 9 | } 10 | 11 | #divyT::before { 12 | content: " "; 13 | position: absolute; 14 | width: 30px; 15 | height: 30px; 16 | border-radius: inherit; 17 | left: 30px; 18 | bottom: 80px; 19 | z-index: 1; 20 | box-shadow: #fddc29 80px 0px 0px 0px, #654307 80px -11px 0px 0px, 21 | #654307 0px -11px 0px 0px; 22 | } 23 | 24 | #divyT::after { 25 | content: " "; 26 | position: absolute; 27 | width: 50px; 28 | height: 50px; 29 | right: 48px; 30 | bottom: 18px; 31 | border: 8px solid #654307; 32 | border-radius: 30%; 33 | border-bottom-left-radius: 40px; 34 | border-top-color: transparent; 35 | border-right-color: transparent; 36 | transform: rotate(315deg); 37 | } 38 | -------------------------------------------------------------------------------- /css/akankshach.css: -------------------------------------------------------------------------------- 1 | #akankshach { 2 | width: 160px; 3 | height: 160px; 4 | position: relative; 5 | overflow: hidden; 6 | background: linear-gradient(to top, #f8aa0a 5%, #ffe730 70%, #fff); 7 | border-radius: 50%; 8 | box-shadow: inset 0 0 10px #fea901; 9 | } 10 | 11 | #akankshach::before { 12 | content: " "; 13 | position: absolute; 14 | width: 30px; 15 | height: 30px; 16 | border-radius: inherit; 17 | left: 30px; 18 | bottom: 80px; 19 | z-index: 1; 20 | box-shadow: #fddc29 80px 0px 0px 0px, #654307 80px -11px 0px 0px, 21 | #654307 0px -11px 0px 0px; 22 | } 23 | 24 | #akankshach::after { 25 | content: " "; 26 | position: absolute; 27 | width: 50px; 28 | height: 50px; 29 | right: 48px; 30 | bottom: 18px; 31 | border: 8px solid #654307; 32 | border-radius: 30%; 33 | border-bottom-left-radius: 40px; 34 | border-top-color: transparent; 35 | border-right-color: transparent; 36 | transform: rotate(135deg); 37 | } 38 | -------------------------------------------------------------------------------- /css/charlygg.css: -------------------------------------------------------------------------------- 1 | #charlygg { 2 | position: relative; 3 | margin-top: 20px; 4 | width: 180px; 5 | height: 100px; 6 | border-radius: 3px; 7 | background-image: linear-gradient( 8 | to bottom, 9 | rgb(218, 218, 218), 10 | rgb(218, 218, 218) 20px, 11 | 0%, 12 | rgb(51, 51, 51) 235px, 13 | transparent 235px 14 | ); 15 | } 16 | 17 | #charlygg::before { 18 | content: ""; 19 | position: absolute; 20 | top: 18px; 21 | left: 56px; 22 | width: 68px; 23 | height: 68px; 24 | background: #111; 25 | border-radius: 50%; 26 | box-shadow: 0 0 0px 6px rgb(182, 182, 182); 27 | } 28 | 29 | #charlygg::after { 30 | content: ""; 31 | position: absolute; 32 | box-shadow: 13px 10px 0 6px rgb(248, 6, 6), 23px -3px 0 4px rgb(131, 130, 130), 33 | 28px -3px 0 4px rgb(131, 130, 130), 131px -3px 0 4px rgb(131, 130, 130), 34 | 138px -3px 0 4px rgb(131, 130, 130), 155px -3px 0 4px rgb(131, 130, 130), 35 | 162px -3px 0 4px rgb(131, 130, 130); 36 | } 37 | -------------------------------------------------------------------------------- /css/mplb0.css: -------------------------------------------------------------------------------- 1 | #mplb0 { 2 | width: 160px; 3 | height: 160px; 4 | top: 10px; 5 | margin: 0 auto; 6 | border-radius: 50%; 7 | background: linear-gradient(#ffce4a 55% 40%, transparent 50%), 8 | radial-gradient(circle at 50% 55%, #96660c 38% 38%, transparent 40%), 9 | radial-gradient(circle at 50% 50%, #ffce4a 0 50%); 10 | position: relative; 11 | } 12 | 13 | #mplb0::after, 14 | #mplb0::before { 15 | position: absolute; 16 | width: 60px; 17 | height: 60px; 18 | content: ""; 19 | background: radial-gradient( 20 | circle at 20.5px 25px, 21 | #df2640 20px, 22 | transparent 41% 23 | ), 24 | radial-gradient(circle at 35px 39.5px, #df2640 20px, transparent 41%), 25 | linear-gradient(45deg, #df2640 0px 23px, transparent 25px); 26 | } 27 | 28 | #mplb0::before { 29 | top: -5px; 30 | right: 90px; 31 | transform: rotate(-69deg) scale(1.1); 32 | } 33 | 34 | #mplb0::after { 35 | top: -5px; 36 | left: 90px; 37 | transform: rotate(-21deg) scale(1.1); 38 | } 39 | -------------------------------------------------------------------------------- /css/cristiand391.css: -------------------------------------------------------------------------------- 1 | #cristiand391 { 2 | width: 100px; 3 | height: 100px; 4 | margin: 0 auto; 5 | padding: 2rem; 6 | background-color: #ffcc4d; 7 | border-radius: 50%; 8 | position: relative; 9 | } 10 | 11 | #cristiand391::before { 12 | content: ""; 13 | height: 35px; 14 | width: 25px; 15 | border-radius: 60%; 16 | box-shadow: 50px 0 #664500; 17 | background-color: #664500; 18 | position: absolute; 19 | top: 40px; 20 | left: 45px; 21 | } 22 | 23 | #cristiand391::after { 24 | content: ""; 25 | display: block; 26 | border-radius: 25px; 27 | border: 6px solid #664500; 28 | width: 85px; 29 | height: 23px; 30 | background: linear-gradient( 31 | #664500, 32 | #664500 5px, 33 | rgba(255, 255, 255, 0) 5px, 34 | rgba(255, 255, 255, 0) 10px 35 | ) 36 | 0 9px, 37 | repeating-linear-gradient( 38 | 90deg, 39 | white, 40 | white 15px, 41 | #664500 15px, 42 | #664500 20px 43 | ) -5px 0; 44 | margin: 65px auto 0 auto; 45 | } 46 | -------------------------------------------------------------------------------- /css/movingtothesun.css: -------------------------------------------------------------------------------- 1 | #movingtothesun { 2 | font-size: 0.625em; 3 | width: 10em; 4 | height: 10em; 5 | margin: 0 auto; 6 | padding: 2rem; 7 | position: relative; 8 | color: #eb8f00; 9 | border: 0.6em solid currentColor; 10 | border-radius: 50%; 11 | background-image: linear-gradient(#fee133 0%, #fee133 60%, #f6a323 100%); 12 | } 13 | 14 | #movingtothesun::before { 15 | content: ""; 16 | position: absolute; 17 | background: #000; 18 | border-radius: 50%; 19 | width: 2.2em; 20 | height: 2.2em; 21 | left: 3.3em; 22 | top: 6em; 23 | box-shadow: #000 7.6em 0, #fff 0 0 0 1.5em, #fff 7.6em 0 0 1.5em, 24 | currentColor 0 0 0 2.1em, currentColor 7.6em 0 0 2.1em, 25 | #f18e5f -1em 2em 2em 1.5em, #f18e5f 8.6em 2em 2em 1.5em; 26 | } 27 | 28 | #movingtothesun::after { 29 | content: ""; 30 | position: absolute; 31 | background: #000; 32 | border-radius: 3em; 33 | width: 3em; 34 | height: 1.2em; 35 | left: 50%; 36 | top: 12em; 37 | margin-left: -1.5em; 38 | box-shadow: -3.8em -10em 0 -0.1em, 3.8em -10em 0 -0.1em; 39 | } 40 | -------------------------------------------------------------------------------- /css/matheusagcosta.css: -------------------------------------------------------------------------------- 1 | #matheusagcosta { 2 | width: 100px; 3 | height: 100px; 4 | margin: 0 auto; 5 | padding: 2rem; 6 | background-image: linear-gradient( 7 | to top, 8 | rgba(255, 166, 0, 0.76) 5%, 9 | gold 45%, 10 | white 11 | ); 12 | border-radius: 50%; 13 | box-shadow: 0px -20px 19px rgba(208, 115, 4, 0.65) inset, 14 | -10px -20px 19px rgba(208, 115, 4, 0.25) inset, 15 | 10px -20px 19px rgba(208, 115, 4, 0.25) inset, 16 | 0 6px 1px rgba(255, 163, 9, 0.44) inset, 17 | 3px 6px 1px rgba(255, 163, 9, 0.35) inset, 18 | -3px 6px 1px rgba(255, 163, 9, 0.35) inset, 19 | 0 -2px 4px rgba(205, 111, 3, 0.95) inset; 20 | position: relative; 21 | } 22 | 23 | #matheusagcosta::after, 24 | #matheusagcosta::before { 25 | box-shadow: 0px 2px 9px #562100 inset; 26 | position: absolute; 27 | content: ""; 28 | top: 50px; 29 | width: 20px; 30 | height: 30px; 31 | border-radius: 50%; 32 | background-color: #a76700; 33 | } 34 | 35 | #matheusagcosta::after { 36 | left: 45px; 37 | } 38 | 39 | #matheusagcosta::before { 40 | right: 45px; 41 | } 42 | -------------------------------------------------------------------------------- /css/quintanilhaedu.css: -------------------------------------------------------------------------------- 1 | #quintanilhaedu { 2 | width: 100px; 3 | height: 100px; 4 | margin: 0 auto; 5 | padding: 2rem; 6 | background-image: linear-gradient( 7 | 155deg, 8 | white 1%, 9 | rgb(214, 14, 14) 25%, 10 | rgba(219, 40, 8, 0.945) 11 | ); 12 | border-radius: 50%; 13 | border: 4px solid #242424; 14 | position: relative; 15 | } 16 | 17 | #quintanilhaedu:before { 18 | content: " "; 19 | position: absolute; 20 | width: 30px; 21 | height: 30px; 22 | background-color: black; 23 | box-shadow: 50px 0px 0 black; 24 | border-radius: inherit; 25 | left: 40px; 26 | bottom: 80px; 27 | z-index: 1; 28 | } 29 | 30 | #quintanilhaedu:after { 31 | content: " "; 32 | width: 50px; 33 | height: 50px; 34 | border: 10px solid black; 35 | border-radius: 50%; 36 | border-top-right-radius: 100px; 37 | border-bottom-color: transparent; 38 | border-left-color: transparent; 39 | transform: rotate(-45deg); 40 | right: 50px; 41 | top: 100px; 42 | position: absolute; 43 | } -------------------------------------------------------------------------------- /css/vitebo.css: -------------------------------------------------------------------------------- 1 | #vitebo { 2 | border: 2px solid #333; 3 | background-image: linear-gradient(155deg, #fff 1%, #fee134 25%, #f39f20); 4 | border-radius: 50%; 5 | height: 100px; 6 | padding: 2rem; 7 | position: relative; 8 | width: 100px; 9 | } 10 | 11 | #vitebo:before { 12 | --size: 62px; 13 | --height: calc(var(--size) - 4px); 14 | --width: calc(var(--size) + 10px); 15 | --left-position: calc(50% - var(--width) / 2); 16 | 17 | background-color: transparent; 18 | border-radius: 10% 10% 50% 50%; 19 | box-shadow: calc(var(--size) / 1.65) var(--size) 0 0 #333, 20 | calc(var(--size) / -1.65) var(--size) 0 0 #333, 0 38px 0 -24px #333; 21 | content: " "; 22 | height: var(--height); 23 | left: var(--left-position); 24 | position: absolute; 25 | top: -20px; 26 | width: var(--width); 27 | } 28 | 29 | #vitebo:after { 30 | --width: 55px; 31 | --left-position: calc(50% - var(--width) / 2); 32 | 33 | background-color: #333; 34 | border-radius: 4px; 35 | bottom: 40px; 36 | content: " "; 37 | height: 8px; 38 | left: var(--left-position); 39 | position: absolute; 40 | width: var(--width); 41 | } 42 | -------------------------------------------------------------------------------- /css/meowlivia.css: -------------------------------------------------------------------------------- 1 | #meowlivia { 2 | width: 100px; 3 | height: 100px; 4 | background: #fdd835; 5 | background-image: radial-gradient( 6 | circle, 7 | #fff 10%, 8 | #fff 12%, 9 | #000 12%, 10 | #000000 25%, 11 | #000000 40%, 12 | white 30%, 13 | white 50%, 14 | transparent 50% 15 | ), 16 | radial-gradient( 17 | circle, 18 | #fff 10%, 19 | #fff 12%, 20 | #000 12%, 21 | #000000 25%, 22 | #000000 40%, 23 | white 30%, 24 | white 50%, 25 | transparent 50% 26 | ), 27 | linear-gradient(#000, #000); 28 | background-repeat: no-repeat; 29 | background-size: 50px 50px, 50px 50px, 54px 6px; 30 | background-position: 5px 20px, 45px 20px, 50% 70px; 31 | border-radius: 50%; 32 | position: relative; 33 | } 34 | 35 | #meowlivia:after { 36 | content: ""; 37 | position: absolute; 38 | left: 26px; 39 | top: 72px; 40 | width: 50%; 41 | height: 30px; 42 | background: linear-gradient( 43 | to right, 44 | #f43636 0%, 45 | #ff9800 20%, 46 | #ffeb3b 35%, 47 | #7cff00 60%, 48 | #00f3ff 78%, 49 | #0012ff 100% 50 | ); 51 | } 52 | -------------------------------------------------------------------------------- /css/kimberrypi.css: -------------------------------------------------------------------------------- 1 | #kimberrypi { 2 | width: 100px; 3 | height: 100px; 4 | margin: 0 auto; 5 | padding: 2rem; 6 | background-image: linear-gradient(white 1%, gold 50%, orange); 7 | border-radius: 150px; 8 | border: 2px solid orange; 9 | position: relative; 10 | } 11 | 12 | #kimberrypi:before { 13 | content: " "; 14 | position: absolute; 15 | width: 37px; 16 | height: 8px; 17 | background-color: saddlebrown; 18 | box-shadow: 50px 0px 0 saddlebrown; 19 | border-radius: inherit; 20 | left: 30px; 21 | bottom: 80px; 22 | z-index: 1; 23 | } 24 | 25 | #kimberrypi:after { 26 | content: " "; 27 | width: 85px; 28 | height: 8px; 29 | background-color: saddlebrown; 30 | border-radius: inherit; 31 | position: absolute; 32 | left: 30px; 33 | bottom: 45px; 34 | z-index: 1; 35 | } 36 | 37 | #kimberrypi-pride { 38 | width: 50px; 39 | height: 50px; 40 | background: white; 41 | border-radius: 0px 70px 0 0; 42 | -moz-border-radius: 0 70px 0 0; 43 | -webkit-border-radius: 0 70px 0 0; 44 | position: relative; 45 | margin-top: 75px; 46 | margin-left: -45px; 47 | box-shadow: 5px -5px 0 5px #af2fcf, 10px -10px 0 10px #1550d2, 48 | 15px -15px 0 15px #069534, 20px -20px 0 20px #fffa48, 49 | 25px -25px 0 25px #ffb22c, 30px -30px 0 30px #fb2223; 50 | } 51 | -------------------------------------------------------------------------------- /css/al-fin.css: -------------------------------------------------------------------------------- 1 | #al-fin { 2 | width: 100px; 3 | height: 100px; 4 | margin: 0 auto; 5 | padding: 2rem; 6 | background-image: linear-gradient( 7 | to top, 8 | rgba(255, 166, 0, 0.76) 5%, 9 | gold 45%, 10 | white 11 | ); 12 | border-radius: 50%; 13 | box-shadow: 0px -20px 19px rgba(208, 115, 4, 0.65) inset, 14 | -10px -20px 19px rgba(208, 115, 4, 0.25) inset, 15 | 10px -20px 19px rgba(208, 115, 4, 0.25) inset, 16 | 0 6px 1px rgba(255, 163, 9, 0.44) inset, 17 | 3px 6px 1px rgba(255, 163, 9, 0.35) inset, 18 | -3px 6px 1px rgba(255, 163, 9, 0.35) inset, 19 | 0 -2px 4px rgba(205, 111, 3, 0.95) inset; 20 | position: relative; 21 | overflow: hidden; 22 | } 23 | 24 | #al-fin::before { 25 | box-shadow: 0px 0px 0 10px #562100, 50px 0px 0 10px #562100; 26 | position: absolute; 27 | content: ""; 28 | top: 50px; 29 | left: 55px; 30 | width: 4px; 31 | height: 10px; 32 | border-radius: 50%; 33 | background-color: #562100; 34 | } 35 | 36 | #al-fin::after { 37 | position: absolute; 38 | box-shadow: 0px 20px 0 10px rgba(171,226,210,1); 39 | content: ""; 40 | top: 80px; 41 | left: 18px; 42 | width: 120px; 43 | height: 70px; 44 | border-radius: 40%; 45 | border: 4px solid rgba(171,226,210,1); 46 | background: linear-gradient(0deg, rgba(171,226,210,1) 0%, rgba(255,255,255,1) 100%); 47 | } 48 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | I created this project for everyone who wants to explore participating in open source. This project is inspired by A Single Div and Hui Jing's talk last Connect Asia 2019. 2 | 3 | # It's October, let's celebrate open source! 4 | 5 | I'm creating this project in participation to Hacktoberfest. Hacktoberfest is a yearly event by Digital Ocean to promote awareness to open source. As their website says: 6 | 7 | > Hacktoberfest® is open to everyone in our global community. Whether you’re a developer, student learning to code, event host, or company of any size, you can help drive growth of open source and make positive contributions to an ever-growing community. All backgrounds and skill levels are encouraged to complete the challenge. 8 | 9 | To participate in this project, you must draw an emoji using HTML and CSS and create a pull request. 10 | 11 | # Guidelines 12 | 13 | 1. Fork this repository. 14 | 1. Create a div using your name as the ID. 15 | 1. Select an emoji to make. Write a single div representation of your emoji using HTML and CSS. You can get inspiration from this website. 16 | 1. Create a branch, push your work and create a pull request. 17 | Most importantly, enjoy! 18 | 19 | # Reference 20 | 21 | 1. https://css-tricks.com/the-shapes-of-css/ 22 | -------------------------------------------------------------------------------- /css/mluis93.css: -------------------------------------------------------------------------------- 1 | #mluis-45 { 2 | display: block; 3 | width: 146px; 4 | height: 180px; 5 | background-color: whitesmoke; 6 | border-radius: 50% 50% 0% 0% / 50% 40% 70% 40%; 7 | position: relative; 8 | } 9 | 10 | #mluis-45::before { 11 | content: ""; 12 | height: 2.2em; 13 | width: 1.7em; 14 | background-color: white; 15 | border-radius: 50%; 16 | margin-left: 30px; 17 | margin-top: 30px; 18 | display: inline-block; 19 | } 20 | #mluis-45::after { 21 | content: ""; 22 | height: 2.2em; 23 | width: 1.7em; 24 | background-color: white; 25 | border-radius: 50%; 26 | margin-left: 30px; 27 | margin-top: 30px; 28 | display: inline-block; 29 | } 30 | #mluis2 { 31 | width: 100px; 32 | height: 40px; 33 | background-color: black; 34 | position: absolute; 35 | border-radius: 0% 50% 50% 50% / 50% 0% 50% 50%; 36 | animation-name: boca; 37 | animation-duration: 4s; 38 | animation-iteration-count: infinite; 39 | } 40 | #mluis2::before { 41 | content: ""; 42 | width: 10px; 43 | height: 10px; 44 | background-color: black; 45 | position: absolute; 46 | border-radius: 50%; 47 | margin-top: -42px; 48 | margin-left: 78px; 49 | } 50 | #mluis2::after { 51 | content: ""; 52 | width: 10px; 53 | height: 10px; 54 | background-color: black; 55 | position: absolute; 56 | border-radius: 50%; 57 | margin-top: -42px; 58 | margin-left: 22px; 59 | } 60 | @keyframes boca { 61 | from { 62 | height: 40px; 63 | } 64 | to { 65 | height: 67px; 66 | } 67 | } 68 | -------------------------------------------------------------------------------- /css/Naivedh.css: -------------------------------------------------------------------------------- 1 | #Naivedh { 2 | background: /*start eye*/ radial-gradient( 3 | ellipse at 29% 54%, 4 | #f5d442 0 13%, 5 | transparent 11% 6 | ), 7 | radial-gradient(ellipse at 28% 49%, #96660c 0 13%, transparent 13%), 8 | /*right eye */ 9 | radial-gradient(ellipse at 72% 54%, #f5d442 0 15px, transparent 15px), 10 | radial-gradient(ellipse at 73% 49%, #96660c 0 15%, #a6868600 13%) 11 | /*end eye*/, 12 | /*brow*/ radial-gradient(ellipse at 36% 47%, #f5d442 0 27%, transparent 12%), 13 | radial-gradient(ellipse at 28% 39%, #96660c 0 14%, transparent 12%), 14 | /*right brow*/ 15 | radial-gradient(ellipse at 64% 47%, #f5d442 0 27%, transparent 12%), 16 | radial-gradient(ellipse at 72% 38%, #96660c 0 13%, transparent 13%) 17 | /*end brow*/, 18 | /* start of mouth*/ 19 | radial-gradient(circle at 49% 12%, #f5d442 0 58%, transparent 25%), 20 | radial-gradient(circle at 50% 56%, #96660c 0 51%, transparent 45%) 21 | /* end of mouth*/, 22 | /* start face background*/ radial-gradient(circle at 50% 50%, #f5d442 0 50%); 23 | border: 2px solid black; 24 | height: 100px; 25 | width: 100px; 26 | border-radius: 50%; 27 | transform: scale(1.2); 28 | } 29 | 30 | #Naivedh::before { 31 | position: absolute; 32 | content: ""; 33 | height: 30px; 34 | width: 29px; 35 | border-radius: 95% 20% 90% 80% / 95% 60% 90% 80%; 36 | background: radial-gradient(circle at 50% 60%, white 0 1px, #47c0fc 10px); 37 | border: 2px solid black; 38 | transform: translate(70px, 35px) rotate(320deg); 39 | margin-top: -45px; 40 | } 41 | -------------------------------------------------------------------------------- /css/kjcpaas.css: -------------------------------------------------------------------------------- 1 | #kjcpaas-rolling-eyes::before { 2 | content: ""; 3 | position: absolute; 4 | top: 4em; 5 | left: 3.5em; 6 | width: 1em; 7 | height: 1em; 8 | display: block; 9 | background-color: black; 10 | border-radius: 50%; 11 | transform: none; 12 | animation: eyeroll 4s infinite; 13 | box-shadow: 0em 0em 0 1em white, 0em 0em 0 1.1em black, 4em 0em 0 0em black, 14 | 4em 0em 0 1em white, 4em 0em 0 1.1em black; 15 | } 16 | 17 | @keyframes eyeroll { 18 | 25% { 19 | transform: none; 20 | box-shadow: 0em 0em 0 1em white, 0em 0em 0 1.1em black, 4em 0em 0 0em black, 21 | 4em 0em 0 1em white, 4em 0em 0 1.1em black; 22 | } 23 | 40% { 24 | transform: translate(0.5em, -0.5em); 25 | box-shadow: -0.5em 0.5em 0 1em white, -0.5em 0.5em 0 1.1em black, 26 | 4em 0em 0 0em black, 3.5em 0.5em 0 1em white, 3.5em 0.5em 0 1.1em black; 27 | } 28 | 50% { 29 | transform: translate(0, -1em); 30 | box-shadow: 0em 1em 0 1em white, 0em 1em 0 1.1em black, 4em 0em 0 0em black, 31 | 4em 1em 0 1em white, 4em 1em 0 1.1em black; 32 | } 33 | 60% { 34 | transform: translate(-0.5em, -0.5em); 35 | box-shadow: 0.5em 0.5em 0 1em white, 0.5em 0.5em 0 1.1em black, 36 | 4em 0em 0 0em black, 4.5em 0.5em 0 1em white, 4.5em 0.5em 0 1.1em black; 37 | } 38 | 75% { 39 | transform: none; 40 | box-shadow: 0em 0em 0 1em white, 0em 0em 0 1.1em black, 4em 0em 0 0em black, 41 | 4em 0em 0 1em white, 4em 0em 0 1.1em black; 42 | } 43 | } 44 | 45 | #kjcpaas-rolling-eyes::after { 46 | content: ""; 47 | width: 3em; 48 | height: 0; 49 | display: block; 50 | margin: 9em auto; 51 | border: 0.2em solid black; 52 | } 53 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | 2 | # Created by https://www.gitignore.io/api/node 3 | # Edit at https://www.gitignore.io/?templates=node 4 | 5 | ### Node ### 6 | # Logs 7 | logs 8 | *.log 9 | npm-debug.log* 10 | yarn-debug.log* 11 | yarn-error.log* 12 | lerna-debug.log* 13 | 14 | # Diagnostic reports (https://nodejs.org/api/report.html) 15 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json 16 | 17 | # Runtime data 18 | pids 19 | *.pid 20 | *.seed 21 | *.pid.lock 22 | 23 | # Directory for instrumented libs generated by jscoverage/JSCover 24 | lib-cov 25 | 26 | # Coverage directory used by tools like istanbul 27 | coverage 28 | *.lcov 29 | 30 | # nyc test coverage 31 | .nyc_output 32 | 33 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) 34 | .grunt 35 | 36 | # Bower dependency directory (https://bower.io/) 37 | bower_components 38 | 39 | # node-waf configuration 40 | .lock-wscript 41 | 42 | # Compiled binary addons (https://nodejs.org/api/addons.html) 43 | build/Release 44 | 45 | # Dependency directories 46 | node_modules/ 47 | jspm_packages/ 48 | 49 | # TypeScript v1 declaration files 50 | typings/ 51 | 52 | # TypeScript cache 53 | *.tsbuildinfo 54 | 55 | # Optional npm cache directory 56 | .npm 57 | 58 | # Optional eslint cache 59 | .eslintcache 60 | 61 | # Optional REPL history 62 | .node_repl_history 63 | 64 | # Output of 'npm pack' 65 | *.tgz 66 | 67 | # Yarn Integrity file 68 | .yarn-integrity 69 | 70 | # dotenv environment variables file 71 | .env 72 | .env.test 73 | 74 | # parcel-bundler cache (https://parceljs.org/) 75 | .cache 76 | 77 | # next.js build output 78 | .next 79 | 80 | # nuxt.js build output 81 | .nuxt 82 | 83 | # react / gatsby 84 | public/ 85 | 86 | # vuepress build output 87 | .vuepress/dist 88 | 89 | # Serverless directories 90 | .serverless/ 91 | 92 | # FuseBox cache 93 | .fusebox/ 94 | 95 | # DynamoDB Local files 96 | .dynamodb/ 97 | 98 | # End of https://www.gitignore.io/api/node -------------------------------------------------------------------------------- /css/porchee.css: -------------------------------------------------------------------------------- 1 | #porchee { 2 | height: 55px; 3 | width: 60px; 4 | border-radius: 0 0 60px 60px; 5 | position: relative; 6 | background-image: linear-gradient( 7 | 0deg, 8 | white 0, 9 | brown 65px, 10 | transparent 65px, 11 | transparent 130px 12 | ); 13 | border: 5px solid #572a00; 14 | box-shadow: 0 0 0 5px solid #572a00; 15 | background-size: 130px 130px; 16 | background-position: 0 0px; 17 | animation: fill 2s infinite; 18 | -webkit-animation: fill 2s infinite; 19 | } 20 | @keyframes fill { 21 | 100% { 22 | background-position: 0 -65px; 23 | } 24 | } 25 | @-webkit-keyframes fill { 26 | 100% { 27 | background-position: 0 -65px; 28 | } 29 | } 30 | #porchee:before { 31 | position: absolute; 32 | content: ""; 33 | height: 22px; 34 | width: 15px; 35 | border: 5px solid #572a00; 36 | border-radius: 0 30px 30px 0; 37 | right: -30px; 38 | } 39 | 40 | #porcheeheart { 41 | height: 100px; 42 | width: 100px; 43 | background-color: red; 44 | margin: auto; 45 | transform: rotate(45deg); 46 | animation: beat 1.5s infinite; 47 | } 48 | 49 | #porcheeheart:before { 50 | position: absolute; 51 | content: ""; 52 | height: 60px; 53 | width: 100px; 54 | background-color: red; 55 | border-radius: 100px 100px 0 0; 56 | top: -59px; 57 | } 58 | 59 | #porcheeheart:after { 60 | position: absolute; 61 | content: ""; 62 | height: 60px; 63 | width: 100px; 64 | background-color: red; 65 | border-radius: 100px 100px 0 0; 66 | transform: rotate(-90deg); 67 | top: 19.5px; 68 | right: 80px; 69 | } 70 | 71 | @keyframes beat { 72 | 50% { 73 | transform: rotate(45deg) scale(0.7); 74 | } 75 | } 76 | #stargirlcodes { 77 | border-radius: 50%; 78 | background-color: #ffffff; 79 | width: 130px; 80 | height: 165px; 81 | background: linear-gradient(to bottom right, #ffffff, #c0c0c0); 82 | } 83 | 84 | #kjcpaas-rolling-eyes { 85 | position: relative; 86 | z-index: 0; 87 | height: 12em; 88 | width: 12em; 89 | border-radius: 50%; 90 | background-image: linear-gradient(to top, #f9aa03 5%, #fdc03d 45%, white); 91 | box-shadow: 0 0 20px #f9aa03 inset; 92 | } 93 | -------------------------------------------------------------------------------- /css/tzyinc.css: -------------------------------------------------------------------------------- 1 | #tzyinc { 2 | background: radial-gradient(ellipse at 0% 0%, #6a3b20 22px, 0, transparent) 3 | 24px 19px/100px 100px no-repeat; 4 | width: 100px; 5 | height: 100px; 6 | transform: rotate(30deg); 7 | } 8 | 9 | #tzyinc:before { 10 | content: " "; 11 | background: 12 | /*4th section*/ radial-gradient( 13 | ellipse at 50px 13.5px, 14 | #6a3b20 25px, 15 | 0, 16 | transparent 17 | ) -25px 57px/100px 45px no-repeat, 18 | radial-gradient(ellipse at 50px 13.5px, #6a3b20 25px, 0, transparent) 8px 19 | 58px/100px 45px no-repeat, 20 | /*3rd section*/ 21 | radial-gradient(ellipse at 50px 13.5px, #6a3b20 25px, 0, transparent) 5px 22 | 42px/100px 45px no-repeat, 23 | radial-gradient(ellipse at 50px 13.5px, #6a3b20 25px, 0, transparent) -7px 42px/100px 24 | 45px no-repeat, 25 | /*2nd section*/ 26 | radial-gradient(ellipse at 50px 13.5px, #6a3b20 25px, 0, transparent) 6px 27 | 29px/100px 45px no-repeat; 28 | /* background-size: 100px 50px; */ 29 | position: absolute; 30 | top: 0; 31 | left: 0; 32 | /* border-radius: 100px; */ 33 | width: 100px; 34 | height: 100px; 35 | z-index: 2; 36 | transform: translate(-5px, 0) rotate(-52.5deg); 37 | } 38 | 39 | #tzyinc:after { 40 | content: " "; 41 | background: 42 | /*mouth*/ radial-gradient( 43 | ellipse at 50% 0%, 44 | white 17px, 45 | 0, 46 | transparent 47 | ) 48 | 0px 74px/100px 28px no-repeat, 49 | /*right eye*/ 50 | radial-gradient( 51 | ellipse at 50% 50%, 52 | black 5px, 53 | 0, 54 | white 9px, 55 | 0, 56 | transparent 57 | ) 58 | 55px 45px/19px 25px no-repeat, 59 | /*left eye*/ 60 | radial-gradient( 61 | ellipse at 50% 50%, 62 | black 5px, 63 | 0, 64 | white 9px, 65 | 0, 66 | transparent 67 | ) 68 | 27px 45px/19px 25px no-repeat, 69 | /*back body segment*/ 70 | radial-gradient(ellipse at 50px 13.5px, #6a3b20 25px, 0, transparent) 4px 71 | 66px/100px 41px no-repeat, 72 | radial-gradient(ellipse at 50px 13.5px, #6a3b20 25px, 0, transparent) 19px 73 | 66px/100px 41px no-repeat; 74 | /* background-size: 100px 50px; */ 75 | position: absolute; 76 | top: 0; 77 | left: 0; 78 | /* border-radius: 100px; */ 79 | width: 100px; 80 | height: 100px; 81 | z-index: 2; 82 | transform: rotate(-30deg); 83 | } 84 | -------------------------------------------------------------------------------- /css/Jomar2019.css: -------------------------------------------------------------------------------- 1 | #Jomar2019 { 2 | border-radius: 50%; 3 | position: relative; 4 | border: solid 2px #f8aa0a; 5 | width: 160px; 6 | height: 160px; 7 | background-image: linear-gradient(to top, #f8aa0a 5%, #ffe730 70%, #fff); 8 | background: radial-gradient(70px 10px at 50% 80%, #414141 40%, transparent 4%), 9 | radial-gradient(circle at bottom right, gold 50%, yellow 100%); 10 | } 11 | 12 | #Jomar2019:after, 13 | #Jomar2019:before { 14 | position: absolute; 15 | content: ""; 16 | padding-bottom: 20px; 17 | width: 30px; 18 | background-color: #414141; 19 | border-radius: 100%; 20 | top: 48px; 21 | -webkit-animation: Jomar2019-face-move 5s ease-in-out infinite, 22 | Jomar2019-eyes-blink 2s ease-in-out infinite; 23 | animation: Jomar2019-face-move 5s ease-in-out infinite, 24 | Jomar2019-eyes-blink 2s ease-in-out infinite; 25 | -webkit-animation-direction: alternate; 26 | animation-direction: alternate; 27 | } 28 | #Jomar2019:after { 29 | left: 30px; 30 | } 31 | #Jomar2019:before { 32 | left: 85px; 33 | } 34 | 35 | @-webkit-keyframes Jomar2019-eyes-blink { 36 | 0% { 37 | height: 10px; 38 | } 39 | 97% { 40 | height: 10px; 41 | } 42 | 100% { 43 | height: 0px; 44 | } 45 | } 46 | 47 | @keyframes Jomar2019-eyes-blink { 48 | 0% { 49 | height: 10px; 50 | } 51 | 97% { 52 | height: 10px; 53 | } 54 | 100% { 55 | height: 0px; 56 | } 57 | } 58 | @-webkit-keyframes Jomar2019-face-move { 59 | 0% { 60 | -webkit-transform: translateX(0); 61 | transform: translateX(0); 62 | } 63 | 30% { 64 | -webkit-transform: translateX(0); 65 | transform: translateX(0); 66 | } 67 | 35% { 68 | -webkit-transform: translateX(-20px); 69 | transform: translateX(-20px); 70 | } 71 | 65% { 72 | -webkit-transform: translateX(-20px); 73 | transform: translateX(-20px); 74 | } 75 | 70% { 76 | -webkit-transform: translateX(-10px); 77 | transform: translateX(-10px); 78 | } 79 | 85% { 80 | -webkit-transform: translateX(-10px); 81 | transform: translateX(-10px); 82 | } 83 | 90% { 84 | -webkit-transform: translateX(0); 85 | transform: translateX(0); 86 | } 87 | 100% { 88 | -webkit-transform: translateX(0); 89 | transform: translateX(0); 90 | } 91 | } 92 | @keyframes Jomar2019-face-move { 93 | 0% { 94 | -webkit-transform: translateX(0); 95 | transform: translateX(0); 96 | } 97 | 30% { 98 | -webkit-transform: translateX(0); 99 | transform: translateX(0); 100 | } 101 | 35% { 102 | -webkit-transform: translateX(-20px); 103 | transform: translateX(-20px); 104 | } 105 | 65% { 106 | -webkit-transform: translateX(-20px); 107 | transform: translateX(-20px); 108 | } 109 | 70% { 110 | -webkit-transform: translateX(-10px); 111 | transform: translateX(-10px); 112 | } 113 | 85% { 114 | -webkit-transform: translateX(-10px); 115 | transform: translateX(-10px); 116 | } 117 | 90% { 118 | -webkit-transform: translateX(0); 119 | transform: translateX(0); 120 | } 121 | 100% { 122 | -webkit-transform: translateX(0); 123 | transform: translateX(0); 124 | } 125 | } 126 | -------------------------------------------------------------------------------- /css/cayeborreo.css: -------------------------------------------------------------------------------- 1 | #cayeborreo { 2 | box-shadow: -70px 0px 0 #fdcb2b, -30px -40px 0 #211c30, -80px 10px 0 #fdcb2b, 3 | -70px 10px 0 #ffe282, -60px 10px 0 #fdcb2b, -40px -30px 0 #211c30, 4 | -30px -30px 0 #47affa, -20px -30px 0 #211c30, -70px 20px 0 #fdcb2b, 5 | -40px -20px 0 #211c30, -30px -20px 0 #5bd04c, -20px -20px 0 #5bd04c, 6 | -10px -20px 0 #211c30, -30px -10px 0 #211c30, -20px -10px 0 #fdcb2b, 7 | -10px -10px 0 #fdcb2b, 0 -10px 0 #211c30, 70px -10px 0 #211c30, 8 | 80px -10px 0 #211c30, -30px 0 0 #211c30, -20px 0 0 #f28a26, 9 | -10px 0 0 #f28a26, 10px 0 0 #211c30, 20px 0 0 #211c30, 30px 0 0 #211c30, 10 | 40px 0 0 #211c30, 50px 0 0 #211c30, 60px 0 0 #211c30, 90px 0 0 #211c30, 11 | -20px 10px 0 #211c30, -10px 10px 0 #cd351d, 0 10px 0 #a42915, 12 | 10px 10px 0 #7d1d0d, 20px 10px 0 #de57a9, 30px 10px 0 #de57a9, 13 | 40px 10px 0 #de57a9, 50px 10px 0 #211c30, 70px 10px 0 #f14965, 14 | 90px 10px 0 #211c30, -20px 20px 0 #211c30, -10px 20px 0 #7d1d0d, 15 | 0 20px 0 #7d1d0d, 10px 20px 0 #de57a9, 20px 20px 0 #de57a9, 16 | 30px 20px 0 #211c30, 40px 20px 0 #211c30, 60px 20px 0 #f14965, 17 | 70px 20px 0 #f0b4df, 80px 20px 0 #211c30, -20px 30px 0 #211c30, 18 | -10px 30px 0 #de57a9, 0 30px 0 #de57a9, 10px 30px 0 #de57a9, 19 | 20px 30px 0 #211c30, 30px 30px 0 #f0b4df, 60px 30px 0 #f0b4df, 20 | 70px 30px 0 #211c30, -30px 40px 0 #211c30, -20px 40px 0 #de57a9, 21 | -10px 40px 0 #de57a9, 0 40px 0 #211c30, 10px 40px 0 #211c30, 22 | 20px 40px 0 #f0b4df, 60px 40px 0 #211c30, 70px 40px 0 #de57a9, 23 | 80px 40px 0 #211c30, -40px 50px 0 #211c30, -30px 50px 0 #f0b4df, 24 | -20px 50px 0 #211c30, -10px 50px 0 #211c30, 0 50px 0 #f0b4df, 25 | 20px 50px 0 #211c30, 30px 50px 0 #211c30, 60px 50px 0 #211c30, 26 | 70px 50px 0 #de57a9, 80px 50px 0 #de57a9, 90px 50px 0 #211c30, 27 | -90px 60px 0 #fdcb2b, -50px 60px 0 #211c30, 20px 60px 0 #211c30, 28 | 30px 60px 0 #211c30, 60px 60px 0 #211c30, 70px 60px 0 #de57a9, 29 | 80px 60px 0 #de57a9, 90px 60px 0 #de57a9, 100px 60px 0 #211c30, 30 | -100px 70px 0 #fdcb2b, -90px 70px 0 #ffe282, -80px 70px 0 #fdcb2b, 31 | -50px 70px 0 #211c30, -40px 70px 0 #f0b4df, -10px 70px 0 #f0b4df, 32 | 60px 70px 0 #f0b4df, 70px 70px 0 #211c30, 80px 70px 0 #de57a9, 33 | 80px 70px 0 #de57a9, 90px 70px 0 #de57a9, 100px 70px 0 #de57a9, 34 | 110px 70px 0 #211c30, 120px 70px 0 #211c30, -90px 80px 0 #fdcb2b, 35 | -50px 80px 0 #211c30, -40px 80px 0 #f0b4df, -10px 80px 0 #f0b4df, 36 | 70px 80px 0 #211c30, 80px 80px 0 #de57a9, 90px 80px 0 #de57a9, 37 | 100px 80px 0 #de57a9, 110px 80px 0 #de57a9, 120px 80px 0 #211c30, 38 | -50px 90px 0 #211c30, 70px 90px 0 #f0b4df, 80px 90px 0 #211c30, 39 | 90px 90px 0 #de57a9, 100px 90px 0 #de57a9, 110px 90px 0 #de57a9, 40 | 120px 90px 0 #211c30, -40px 100px 0 #211c30, 30px 100px 0 #f0b4df, 41 | 80px 100px 0 #f0b4df, 90px 100px 0 #211c30, 100px 100px 0 #de57a9, 42 | 110px 100px 0 #211c30, 120px 100px 0 #f0b4df, -30px 110px 0 #211c30, 43 | -20px 110px 0 #211c30, -10px 110px 0 #211c30, 0 110px 0 #211c30, 44 | 10px 110px 0 #211c30, 20px 110px 0 #211c30, 90px 110px 0 #211c30, 45 | 100px 110px 0 #de57a9, 110px 110px 0 #211c30, 20px 120px 0 #211c30, 46 | 100px 120px 0 #211c30, 110px 120px 0 #f0b4df; 47 | height: 10px; 48 | width: 10px; 49 | background-color: #cd351d; 50 | } 51 | -------------------------------------------------------------------------------- /css/smokinclove.css: -------------------------------------------------------------------------------- 1 | #smokinclove { 2 | background: /*start eye*/ radial-gradient( 3 | ellipse at 29% 54%, 4 | #f5d442 0 13%, 5 | transparent 11% 6 | ), 7 | radial-gradient(ellipse at 28% 49%, #96660c 0 13%, transparent 13%), 8 | /*right eye */ 9 | radial-gradient(ellipse at 72% 54%, #f5d442 0 15px, transparent 15px), 10 | radial-gradient(ellipse at 73% 49%, #96660c 0 15%, #a6868600 13%) 11 | /*end eye*/, 12 | /*brow*/ radial-gradient(ellipse at 36% 47%, #f5d442 0 27%, transparent 12%), 13 | radial-gradient(ellipse at 28% 39%, #96660c 0 14%, transparent 12%), 14 | /*right brow*/ 15 | radial-gradient(ellipse at 64% 47%, #f5d442 0 27%, transparent 12%), 16 | radial-gradient(ellipse at 72% 38%, #96660c 0 13%, transparent 13%) 17 | /*end brow*/, 18 | /* start of mouth*/ 19 | radial-gradient( 20 | circle at 49% 12%, 21 | #f5d442 0 58%, 22 | #96660c 58% 61%, 23 | white 61% 67%, 24 | transparent 67% 25 | ), 26 | radial-gradient(circle at 50% 56%, #96660c 0 51%, transparent 45%) 27 | /* end of mouth*/, 28 | /* start face background*/ radial-gradient(circle at 50% 50%, #f5d442 0 50%); 29 | border: 2px solid black; 30 | height: 100px; 31 | width: 100px; 32 | border-radius: 50%; 33 | transform: scale(1.2); 34 | } 35 | #smokinclove::before { 36 | height: 40px; 37 | width: 35px; 38 | border-radius: 87% 13% 48% 52% / 59% 14% 86% 41%; 39 | border: 2px solid black; 40 | position: absolute; 41 | content: ""; 42 | background: radial-gradient(circle at 50% 60%, white 0 1px, #47c0fc 15px); 43 | transform: translate(-19px, 43px); 44 | } 45 | 46 | #smokinclove::after { 47 | position: absolute; 48 | content: ""; 49 | height: 40px; 50 | width: 35px; 51 | border-radius: 26% 88% 48% 55% / 11% 57% 43% 89%; 52 | background: radial-gradient(circle at 50% 60%, white 0 1px, #47c0fc 15px); 53 | border: 2px solid black; 54 | transform: translate(80px, 41px); 55 | } 56 | 57 | #smokinclove-sparkle { 58 | position: absolute; 59 | width: 100px; 60 | height: 100px; 61 | background: radial-gradient(circle at 30px 30px, red 0 30px, transparent 30px), 62 | radial-gradient(circle at 68px 70px, red 0 30px, transparent 30px), 63 | linear-gradient(45deg, red 0px 50px, transparent 50px), 64 | radial-gradient(circle at 36px 75px, red 0 20px, transparent 20px); 65 | transform: rotate(-45deg); 66 | } 67 | 68 | #smokinclove-sparkle::before { 69 | content: ""; 70 | position: absolute; 71 | width: 40px; 72 | height: 40px; 73 | top: 40px; 74 | left: -14px; 75 | background: radial-gradient( 76 | circle at 0 0, 77 | transparent 0 30%, 78 | yellow 30% 38%, 79 | transparent 38% 80 | ), 81 | radial-gradient( 82 | circle at 95% 0, 83 | transparent 0 30%, 84 | yellow 30% 38%, 85 | transparent 38% 86 | ), 87 | radial-gradient( 88 | circle at 95% 93%, 89 | transparent 0 30%, 90 | yellow 30% 38%, 91 | transparent 38% 92 | ), 93 | radial-gradient( 94 | circle at 0% 93%, 95 | transparent 0 30%, 96 | yellow 30% 38%, 97 | transparent 38% 98 | ), 99 | radial-gradient(circle at 48% 48%, yellow 0 34%, transparent 34%); 100 | transform: rotate(45deg); 101 | } 102 | 103 | #smokinclove-sparkle::after { 104 | content: ""; 105 | position: absolute; 106 | width: 30px; 107 | height: 30px; 108 | top: 50px; 109 | left: 75px; 110 | background: radial-gradient( 111 | circle at 0 0, 112 | transparent 0 30%, 113 | yellow 30% 38%, 114 | transparent 38% 115 | ), 116 | radial-gradient( 117 | circle at 95% 0, 118 | transparent 0 30%, 119 | yellow 30% 38%, 120 | transparent 38% 121 | ), 122 | radial-gradient( 123 | circle at 95% 93%, 124 | transparent 0 30%, 125 | yellow 30% 38%, 126 | transparent 38% 127 | ), 128 | radial-gradient( 129 | circle at 0% 93%, 130 | transparent 0 30%, 131 | yellow 30% 38%, 132 | transparent 38% 133 | ), 134 | radial-gradient(circle at 48% 48%, yellow 0 34%, transparent 34%); 135 | transform: rotate(45deg); 136 | } 137 | -------------------------------------------------------------------------------- /css/index.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css?family=Press+Start+2P&display=swap"); 2 | @import url("./akankshach.css"); 3 | @import url("./albertodeago.css"); 4 | @import url("./aliheikal.css"); 5 | @import url("./amyegan.css"); 6 | @import url("./anjlapastora.css"); 7 | @import url("./aolamide.css"); 8 | @import url("./AraozYazmin.css"); 9 | @import url("./artoliukkonen.css"); 10 | @import url("./azel.css"); 11 | @import url("./biancapereira.css"); 12 | @import url("./botticelli13.css"); 13 | @import url("./caroldestreza.css"); 14 | @import url("./cayeborreo.css"); 15 | @import url("./charlygg.css"); 16 | @import url("./chintanpalan-1.css"); 17 | @import url("./CodeMeNatalie.css"); 18 | @import url("./cristiand391.css"); 19 | @import url("./derekramsey12.css"); 20 | @import url("./DeviousLab.css"); 21 | @import url("./divyT.css"); 22 | @import url("./dominuskelvin.css"); 23 | @import url("./edu-matic.css"); 24 | @import url("./Frinlanz.css"); 25 | @import url("./gabszypogi.css"); 26 | @import url("./garciajasminejoy.css"); 27 | @import url("./grjw.css"); 28 | @import url("./grsn_chml.css"); 29 | @import url("./InsiyaK110.css"); 30 | @import url("./jacobtyq.css"); 31 | @import url("./JasaniDhruv.css"); 32 | @import url("./jennifer.css"); 33 | @import url("./jiannejose.css"); 34 | @import url("./jmsgbrl__.css"); 35 | @import url("./jojonarte.css"); 36 | @import url("./Jomar2019.css"); 37 | @import url("./kate_gamo.css"); 38 | @import url("./kimberrypi.css"); 39 | @import url("./kjcpaas.css"); 40 | @import url("./kuroyza.css"); 41 | @import url("./louierosero.css"); 42 | @import url("./luispinedajr.css"); 43 | @import url("./maczokni.css"); 44 | @import url("./majse.css"); 45 | @import url("./mark_allen.css"); 46 | @import url("./matheusagcosta.css"); 47 | @import url("./matthewesp.css"); 48 | @import url("./meowlivia.css"); 49 | @import url("./michieriffic.css"); 50 | @import url("./mluis93.css"); 51 | @import url("./movingtothesun.css"); 52 | @import url("./mplb0.css"); 53 | @import url("./mrcaste.css"); 54 | @import url("./Naivedh.css"); 55 | @import url("./neetigyachahar.css"); 56 | @import url("./noviandsh.css"); 57 | @import url("./paulliamag.css"); 58 | @import url("./phillipknight.css"); 59 | @import url("./porchee.css"); 60 | @import url("./quintanilhaedu.css"); 61 | @import url("./rmasianjr.css"); 62 | @import url("./sagar-pardhi.css"); 63 | @import url("./sanderjson.css"); 64 | @import url("./sanjpareek.css"); 65 | @import url("./skelrilod.css"); 66 | @import url("./shrobbins.css"); 67 | @import url("./smokinclove.css"); 68 | @import url("./sumaiya.css"); 69 | @import url("./SushilBajra11.css"); 70 | @import url("./thewhiteswan.css"); 71 | @import url("./tzyinc.css"); 72 | @import url("./valdeezzee.css"); 73 | @import url("./vancass.css"); 74 | @import url("./virus200.css"); 75 | @import url("./vitebo.css"); 76 | @import url("./Zyo86.css"); 77 | @import url("./al-fin.css"); 78 | @import url("./jcardoz.css"); 79 | 80 | html, 81 | body { 82 | font-family: sans-serif; 83 | margin: 0; 84 | line-height: 1.5; 85 | background-color: #f5f6fa; 86 | } 87 | 88 | a { 89 | color: #318997; 90 | } 91 | 92 | .hero { 93 | display: flex; 94 | flex-direction: column; 95 | justify-content: center; 96 | align-items: center; 97 | width: 100%; 98 | height: 15%; 99 | background-color: #25274d; 100 | text-align: center; 101 | color: white; 102 | font-family: "Press Start 2P", Tahoma, sans-serif; 103 | } 104 | 105 | .message { 106 | display: flex; 107 | width: 100%; 108 | margin: 0 auto; 109 | } 110 | 111 | .message-body { 112 | margin: 1rem; 113 | padding: 0.25rem 1rem; 114 | width: 100%; 115 | background-color: #25274d1f; 116 | border: 1px solid #4648661f; 117 | border-radius: 0.25rem; 118 | } 119 | 120 | .container { 121 | display: flex; 122 | flex-wrap: wrap; 123 | justify-content: center; 124 | margin: 0.5rem; 125 | } 126 | 127 | .container > div { 128 | display: flex; 129 | flex-wrap: wrap; 130 | align-items: center; 131 | justify-content: center; 132 | min-height: 30vh; 133 | margin: 5px; 134 | padding: 15px; 135 | border: none; 136 | flex: 1; 137 | min-width: 15rem; 138 | background-color: #ffffff; 139 | border-radius: 0.25rem; 140 | box-shadow: 0 1px 2px #007a7c1f; 141 | } 142 | 143 | .container > .emoji > div { 144 | margin-bottom: 1rem !important; 145 | align-self: center; 146 | } 147 | 148 | .container > div > p { 149 | margin: auto 0 0; 150 | font-size: small; 151 | text-align: center; 152 | width: 100%; 153 | } 154 | 155 | .is-hidden { 156 | display: none !important; 157 | } 158 | 159 | @media only screen and (max-width: 768px) { 160 | .message { 161 | flex-direction: column; 162 | } 163 | 164 | .message-body { 165 | width: auto; 166 | } 167 | 168 | .container { 169 | flex-direction: column; 170 | } 171 | 172 | .container > div { 173 | width: auto; 174 | } 175 | } 176 | -------------------------------------------------------------------------------- /css/anjlapastora.css: -------------------------------------------------------------------------------- 1 | div.anjlapastora { 2 | justify-content: center; 3 | text-align: center; 4 | width: 100%; 5 | height: 100px; 6 | margin: 0 auto; 7 | max-width: 50%; 8 | } 9 | 10 | #anjlapastora { 11 | position: absolute; 12 | animation: x 1s infinite; 13 | -webkit-animation: x 1s infinite; 14 | -moz-animation: x 1s infinite; 15 | -o-animation: x 1s infinite; 16 | } 17 | 18 | @keyframes x { 19 | 0%, 20 | 33.3% { 21 | box-shadow: 30px 10px 0 0 #e0c8a3, 40px 10px 0 0 #e0c8a3, 22 | 50px 10px 0 0 #e0c8a3, 60px 10px 0 0 #e0c8a3, 70px 10px 0 0 #e0c8a3, 23 | 80px 10px 0 0 #e0c8a3, 90px 10px 0 0 #e0c8a3, 100px 10px 0 0 #e0c8a3, 24 | 20px 20px 0 0 #e0c8a3, 30px 20px 0 0 #fe8cb0, 40px 20px 0 0 #fe8cb0, 25 | 50px 20px 0 0 #fe8cb0, 60px 20px 0 0 #fe8cb0, 70px 20px 0 0 #fe8cb0, 26 | 80px 20px 0 0 #008729, 90px 20px 0 0 #fe8cb0, 100px 20px 0 0 #fe8cb0, 27 | 110px 20px 0 0 #e0c8a3, 10px 30px 0 0 #e0c8a3, 20px 30px 0 0 #fe8cb0, 28 | 30px 30px 0 0 #fe8cb0, 40px 30px 0 0 #f9c300, 50px 30px 0 0 #fe8cb0, 29 | 60px 30px 0 0 #e91e63, 70px 30px 0 0 #fe8cb0, 80px 30px 0 0 #fe8cb0, 30 | 90px 30px 0 0 #fe8cb0, 100px 30px 0 0 #fe8cb0, 110px 30px 0 0 #fe8cb0, 31 | 120px 30px 0 0 #e0c8a3, 10px 40px 0 0 #e0c8a3, 20px 40px 0 0 #fe8cb0, 32 | 30px 40px 0 0 #fe8cb0, 40px 40px 0 0 #fe8cb0, 50px 40px 0 0 #fe8cb0, 33 | 60px 40px 0 0 #fe8cb0, 70px 40px 0 0 #f9c300, 80px 40px 0 0 #fe8cb0, 34 | 90px 40px 0 0 #f9c300, 100px 40px 0 0 #fe8cb0, 110px 40px 0 0 #fe8cb0, 35 | 120px 40px 0 0 #e0c8a3, 10px 50px 0 0 #e0c8a3, 20px 50px 0 0 #fe8cb0, 36 | 30px 50px 0 0 #fe8cb0, 40px 50px 0 0 #e91e63, 50px 50px 0 0 #fe8cb0, 37 | 60px 50px 0 0 #fe8cb0, 70px 50px 0 0 #fe8cb0, 80px 50px 0 0 #fe8cb0, 38 | 90px 50px 0 0 #fe8cb0, 100px 50px 0 0 #fe8cb0, 110px 50px 0 0 #fe8cb0, 39 | 120px 50px 0 0 #e0c8a3, 10px 60px 0 0 #e0c8a3, 20px 60px 0 0 #fe8cb0, 40 | 30px 60px 0 0 #fe8cb0, 40px 60px 0 0 #fe8cb0, 50px 60px 0 0 #fe8cb0, 41 | 80px 60px 0 0 #fe8cb0, 90px 60px 0 0 #fe8cb0, 100px 60px 0 0 #fe8cb0, 42 | 110px 60px 0 0 #fe8cb0, 120px 60px 0 0 #e0c8a3, 10px 70px 0 0 #e0c8a3, 43 | 20px 70px 0 0 #fe8cb0, 30px 70px 0 0 #e91e63, 40px 70px 0 0 #fe8cb0, 44 | 90px 70px 0 0 #fe8cb0, 100px 70px 0 0 #e91e63, 110px 70px 0 0 #fe8cb0, 45 | 120px 70px 0 0 #e0c8a3, 10px 80px 0 0 #e0c8a3, 20px 80px 0 0 #fe8cb0, 46 | 30px 80px 0 0 #fe8cb0, 40px 80px 0 0 #008729, 50px 80px 0 0 #fe8cb0, 47 | 80px 80px 0 0 #fe8cb0, 90px 80px 0 0 #fe8cb0, 100px 80px 0 0 #fe8cb0, 48 | 110px 80px 0 0 #fe8cb0, 120px 80px 0 0 #e0c8a3, 10px 90px 0 0 #e0c8a3, 49 | 20px 90px 0 0 #fe8cb0, 30px 90px 0 0 #fe8cb0, 40px 90px 0 0 #fe8cb0, 50 | 50px 90px 0 0 #fe8cb0, 60px 90px 0 0 #fe8cb0, 70px 90px 0 0 #fe8cb0, 51 | 80px 90px 0 0 #fe8cb0, 90px 90px 0 0 #fe8cb0, 100px 90px 0 0 #f9c300, 52 | 110px 90px 0 0 #fe8cb0, 120px 90px 0 0 #e0c8a3, 10px 100px 0 0 #e0c8a3, 53 | 20px 100px 0 0 #fe8cb0, 30px 100px 0 0 #f9c300, 40px 100px 0 0 #fe8cb0, 54 | 50px 100px 0 0 #f9c300, 60px 100px 0 0 #fe8cb0, 70px 100px 0 0 #fe8cb0, 55 | 80px 100px 0 0 #fe8cb0, 90px 100px 0 0 #fe8cb0, 100px 100px 0 0 #fe8cb0, 56 | 110px 100px 0 0 #fe8cb0, 120px 100px 0 0 #e0c8a3, 20px 110px 0 0 #e0c8a3, 57 | 30px 110px 0 0 #fe8cb0, 40px 110px 0 0 #fe8cb0, 50px 110px 0 0 #fe8cb0, 58 | 60px 110px 0 0 #fe8cb0, 70px 110px 0 0 #fe8cb0, 80px 110px 0 0 #008729, 59 | 90px 110px 0 0 #fe8cb0, 100px 110px 0 0 #fe8cb0, 110px 110px 0 0 #e0c8a3, 60 | 30px 120px 0 0 #e0c8a3, 40px 120px 0 0 #e0c8a3, 50px 120px 0 0 #e0c8a3, 61 | 60px 120px 0 0 #e0c8a3, 70px 120px 0 0 #e0c8a3, 80px 120px 0 0 #e0c8a3, 62 | 90px 120px 0 0 #e0c8a3, 100px 120px 0 0 #e0c8a3; 63 | height: 10px; 64 | width: 10px; 65 | } 66 | 33.309999999999995%, 67 | 66.7% { 68 | box-shadow: 30px 10px 0 0 #e0c8a3, 40px 10px 0 0 #e0c8a3, 69 | 50px 10px 0 0 #e0c8a3, 60px 10px 0 0 #e0c8a3, 70px 10px 0 0 #e0c8a3, 70 | 80px 10px 0 0 #e0c8a3, 90px 10px 0 0 #e0c8a3, 100px 10px 0 0 #e0c8a3, 71 | 20px 20px 0 0 #e0c8a3, 30px 20px 0 0 #fe8cb0, 40px 20px 0 0 #fe8cb0, 72 | 50px 20px 0 0 #f9c300, 60px 20px 0 0 #fe8cb0, 70px 20px 0 0 #fe8cb0, 73 | 80px 20px 0 0 #fe8cb0, 90px 20px 0 0 #fe8cb0, 100px 20px 0 0 #fe8cb0, 74 | 110px 20px 0 0 #e0c8a3, 10px 30px 0 0 #e0c8a3, 20px 30px 0 0 #fe8cb0, 75 | 30px 30px 0 0 #fe8cb0, 40px 30px 0 0 #008729, 50px 30px 0 0 #fe8cb0, 76 | 60px 30px 0 0 #e91e63, 70px 30px 0 0 #008729, 80px 30px 0 0 #fe8cb0, 77 | 90px 30px 0 0 #f9c300, 100px 30px 0 0 #fe8cb0, 110px 30px 0 0 #fe8cb0, 78 | 120px 30px 0 0 #e0c8a3, 10px 40px 0 0 #e0c8a3, 20px 40px 0 0 #fe8cb0, 79 | 30px 40px 0 0 #fe8cb0, 40px 40px 0 0 #f9c300, 50px 40px 0 0 #fe8cb0, 80 | 60px 40px 0 0 #fe8cb0, 70px 40px 0 0 #fe8cb0, 80px 40px 0 0 #fe8cb0, 81 | 90px 40px 0 0 #fe8cb0, 100px 40px 0 0 #008729, 110px 40px 0 0 #fe8cb0, 82 | 120px 40px 0 0 #e0c8a3, 10px 50px 0 0 #e0c8a3, 20px 50px 0 0 #008729, 83 | 30px 50px 0 0 #fe8cb0, 40px 50px 0 0 #e91e63, 50px 50px 0 0 #fe8cb0, 84 | 60px 50px 0 0 #fe8cb0, 70px 50px 0 0 #fe8cb0, 80px 50px 0 0 #fe8cb0, 85 | 90px 50px 0 0 #fe8cb0, 100px 50px 0 0 #fe8cb0, 110px 50px 0 0 #fe8cb0, 86 | 120px 50px 0 0 #e0c8a3, 10px 60px 0 0 #e0c8a3, 20px 60px 0 0 #fe8cb0, 87 | 30px 60px 0 0 #fe8cb0, 40px 60px 0 0 #fe8cb0, 50px 60px 0 0 #fe8cb0, 88 | 80px 60px 0 0 #fe8cb0, 90px 60px 0 0 #fe8cb0, 100px 60px 0 0 #fe8cb0, 89 | 110px 60px 0 0 #fe8cb0, 120px 60px 0 0 #e0c8a3, 10px 70px 0 0 #e0c8a3, 90 | 20px 70px 0 0 #fe8cb0, 30px 70px 0 0 #e91e63, 40px 70px 0 0 #fe8cb0, 91 | 90px 70px 0 0 #fe8cb0, 100px 70px 0 0 #fe8cb0, 110px 70px 0 0 #fe8cb0, 92 | 120px 70px 0 0 #e0c8a3, 10px 80px 0 0 #e0c8a3, 20px 80px 0 0 #fe8cb0, 93 | 30px 80px 0 0 #fe8cb0, 40px 80px 0 0 #fe8cb0, 50px 80px 0 0 #008729, 94 | 80px 80px 0 0 #fe8cb0, 90px 80px 0 0 #fe8cb0, 100px 80px 0 0 #008729, 95 | 110px 80px 0 0 #fe8cb0, 120px 80px 0 0 #e0c8a3, 10px 90px 0 0 #e0c8a3, 96 | 20px 90px 0 0 #fe8cb0, 30px 90px 0 0 #fe8cb0, 40px 90px 0 0 #008729, 97 | 50px 90px 0 0 #fe8cb0, 60px 90px 0 0 #fe8cb0, 70px 90px 0 0 #fe8cb0, 98 | 80px 90px 0 0 #fe8cb0, 90px 90px 0 0 #fe8cb0, 100px 90px 0 0 #fe8cb0, 99 | 110px 90px 0 0 #fe8cb0, 120px 90px 0 0 #e0c8a3, 10px 100px 0 0 #e0c8a3, 100 | 20px 100px 0 0 #fe8cb0, 30px 100px 0 0 #f9c300, 40px 100px 0 0 #fe8cb0, 101 | 50px 100px 0 0 #fe8cb0, 60px 100px 0 0 #fe8cb0, 70px 100px 0 0 #008729, 102 | 80px 100px 0 0 #fe8cb0, 90px 100px 0 0 #fe8cb0, 100px 100px 0 0 #fe8cb0, 103 | 110px 100px 0 0 #fe8cb0, 120px 100px 0 0 #e0c8a3, 20px 110px 0 0 #e0c8a3, 104 | 30px 110px 0 0 #fe8cb0, 40px 110px 0 0 #fe8cb0, 50px 110px 0 0 #fe8cb0, 105 | 60px 110px 0 0 #fe8cb0, 70px 110px 0 0 #fe8cb0, 80px 110px 0 0 #008729, 106 | 90px 110px 0 0 #fe8cb0, 100px 110px 0 0 #fe8cb0, 110px 110px 0 0 #e0c8a3, 107 | 30px 120px 0 0 #e0c8a3, 40px 120px 0 0 #e0c8a3, 50px 120px 0 0 #e0c8a3, 108 | 60px 120px 0 0 #e0c8a3, 70px 120px 0 0 #e0c8a3, 80px 120px 0 0 #e0c8a3, 109 | 90px 120px 0 0 #e0c8a3, 100px 120px 0 0 #e0c8a3; 110 | height: 10px; 111 | width: 10px; 112 | } 113 | 66.71000000000001%, 114 | 100% { 115 | box-shadow: 30px 10px 0 0 #e0c8a3, 40px 10px 0 0 #e0c8a3, 116 | 50px 10px 0 0 #e0c8a3, 60px 10px 0 0 #e0c8a3, 70px 10px 0 0 #e0c8a3, 117 | 80px 10px 0 0 #e0c8a3, 90px 10px 0 0 #e0c8a3, 100px 10px 0 0 #e0c8a3, 118 | 20px 20px 0 0 #e0c8a3, 30px 20px 0 0 #fe8cb0, 40px 20px 0 0 #fe8cb0, 119 | 50px 20px 0 0 #fe8cb0, 60px 20px 0 0 #fe8cb0, 70px 20px 0 0 #fe8cb0, 120 | 80px 20px 0 0 #fe8cb0, 90px 20px 0 0 #fe8cb0, 100px 20px 0 0 #fe8cb0, 121 | 110px 20px 0 0 #e0c8a3, 10px 30px 0 0 #e0c8a3, 20px 30px 0 0 #fe8cb0, 122 | 30px 30px 0 0 #f9c300, 40px 30px 0 0 #fe8cb0, 50px 30px 0 0 #fe8cb0, 123 | 60px 30px 0 0 #e91e63, 70px 30px 0 0 #fe8cb0, 80px 30px 0 0 #6482fe, 124 | 90px 30px 0 0 #fe8cb0, 100px 30px 0 0 #6482fe, 110px 30px 0 0 #fe8cb0, 125 | 120px 30px 0 0 #e0c8a3, 10px 40px 0 0 #e0c8a3, 20px 40px 0 0 #fe8cb0, 126 | 30px 40px 0 0 #fe8cb0, 40px 40px 0 0 #fe8cb0, 50px 40px 0 0 #f9c300, 127 | 60px 40px 0 0 #fe8cb0, 70px 40px 0 0 #6482fe, 80px 40px 0 0 #fe8cb0, 128 | 90px 40px 0 0 #fe8cb0, 100px 40px 0 0 #fe8cb0, 110px 40px 0 0 #fe8cb0, 129 | 120px 40px 0 0 #e0c8a3, 10px 50px 0 0 #e0c8a3, 20px 50px 0 0 #fe8cb0, 130 | 30px 50px 0 0 #fe8cb0, 40px 50px 0 0 #f9c300, 50px 50px 0 0 #fe8cb0, 131 | 60px 50px 0 0 #fe8cb0, 70px 50px 0 0 #fe8cb0, 80px 50px 0 0 #fe8cb0, 132 | 90px 50px 0 0 #6482fe, 100px 50px 0 0 #f9c300, 110px 50px 0 0 #fe8cb0, 133 | 120px 50px 0 0 #e0c8a3, 10px 60px 0 0 #e0c8a3, 20px 60px 0 0 #fe8cb0, 134 | 30px 60px 0 0 #f9c300, 40px 60px 0 0 #fe8cb0, 50px 60px 0 0 #fe8cb0, 135 | 80px 60px 0 0 #fe8cb0, 90px 60px 0 0 #fe8cb0, 100px 60px 0 0 #fe8cb0, 136 | 110px 60px 0 0 #fe8cb0, 120px 60px 0 0 #e0c8a3, 10px 70px 0 0 #e0c8a3, 137 | 20px 70px 0 0 #fe8cb0, 30px 70px 0 0 #fe8cb0, 40px 70px 0 0 #fe8cb0, 138 | 90px 70px 0 0 #fe8cb0, 100px 70px 0 0 #e91e63, 110px 70px 0 0 #fe8cb0, 139 | 120px 70px 0 0 #e0c8a3, 10px 80px 0 0 #e0c8a3, 20px 80px 0 0 #f9c300, 140 | 30px 80px 0 0 #f9c300, 40px 80px 0 0 #fe8cb0, 50px 80px 0 0 #fe8cb0, 141 | 80px 80px 0 0 #fe8cb0, 90px 80px 0 0 #fe8cb0, 100px 80px 0 0 #fe8cb0, 142 | 110px 80px 0 0 #fe8cb0, 120px 80px 0 0 #e0c8a3, 10px 90px 0 0 #e0c8a3, 143 | 20px 90px 0 0 #fe8cb0, 30px 90px 0 0 #fe8cb0, 40px 90px 0 0 #fe8cb0, 144 | 50px 90px 0 0 #fe8cb0, 60px 90px 0 0 #fe8cb0, 70px 90px 0 0 #fe8cb0, 145 | 80px 90px 0 0 #fe8cb0, 90px 90px 0 0 #fe8cb0, 100px 90px 0 0 #6482fe, 146 | 110px 90px 0 0 #fe8cb0, 120px 90px 0 0 #e0c8a3, 10px 100px 0 0 #e0c8a3, 147 | 20px 100px 0 0 #fe8cb0, 30px 100px 0 0 #6482fe, 40px 100px 0 0 #008729, 148 | 50px 100px 0 0 #fe8cb0, 60px 100px 0 0 #fe8cb0, 70px 100px 0 0 #fe8cb0, 149 | 80px 100px 0 0 #fe8cb0, 90px 100px 0 0 #fe8cb0, 100px 100px 0 0 #fe8cb0, 150 | 110px 100px 0 0 #fe8cb0, 120px 100px 0 0 #e0c8a3, 20px 110px 0 0 #e0c8a3, 151 | 30px 110px 0 0 #fe8cb0, 40px 110px 0 0 #fe8cb0, 50px 110px 0 0 #fe8cb0, 152 | 60px 110px 0 0 #fe8cb0, 70px 110px 0 0 #fe8cb0, 80px 110px 0 0 #008729, 153 | 90px 110px 0 0 #fe8cb0, 100px 110px 0 0 #fe8cb0, 110px 110px 0 0 #e0c8a3, 154 | 30px 120px 0 0 #e0c8a3, 40px 120px 0 0 #e0c8a3, 50px 120px 0 0 #e0c8a3, 155 | 60px 120px 0 0 #e0c8a3, 70px 120px 0 0 #e0c8a3, 80px 120px 0 0 #e0c8a3, 156 | 90px 120px 0 0 #e0c8a3, 100px 120px 0 0 #e0c8a3; 157 | height: 10px; 158 | width: 10px; 159 | } 160 | } 161 | -------------------------------------------------------------------------------- /css/michieriffic.css: -------------------------------------------------------------------------------- 1 | #michieriffic-coke { 2 | position: relative; 3 | box-shadow: 50px 15px 0 0 #8e8c8d, 55px 15px 0 0 #8e8c8d, 4 | 60px 15px 0 0 #8e8c8d, 65px 15px 0 0 #d7cfd4, 70px 15px 0 0 #d7cfd4, 5 | 75px 15px 0 0 #d7cfd4, 80px 15px 0 0 #d7cfd4, 85px 15px 0 0 #d7cfd4, 6 | 90px 15px 0 0 #d7cfd4, 95px 15px 0 0 #8e8c8d, 100px 15px 0 0 #8e8c8d, 7 | 105px 15px 0 0 #706e6f, 110px 15px 0 0 #706e6f, 115px 15px 0 0 #706e6f, 8 | 120px 15px 0 0 #706e6f, 125px 15px 0 0 #8e8c8d, 130px 15px 0 0 #8e8c8d, 9 | 50px 20px 0 0 #8e8c8d, 55px 20px 0 0 #8e8c8d, 60px 20px 0 0 #8e8c8d, 10 | 65px 20px 0 0 #8e8c8d, 70px 20px 0 0 #8e8c8d, 75px 20px 0 0 #8e8c8d, 11 | 80px 20px 0 0 #8e8c8d, 85px 20px 0 0 #8e8c8d, 90px 20px 0 0 #8e8c8d, 12 | 95px 20px 0 0 #8e8c8d, 100px 20px 0 0 #706e6f, 105px 20px 0 0 #706e6f, 13 | 110px 20px 0 0 #706e6f, 115px 20px 0 0 #706e6f, 120px 20px 0 0 #706e6f, 14 | 125px 20px 0 0 #706e6f, 130px 20px 0 0 #8e8c8d, 55px 25px 0 0 #b33321, 15 | 60px 25px 0 0 #b33321, 65px 25px 0 0 #b33321, 70px 25px 0 0 #b33321, 16 | 75px 25px 0 0 #b33321, 80px 25px 0 0 #b33321, 85px 25px 0 0 #b33321, 17 | 90px 25px 0 0 #ffffff, 95px 25px 0 0 #b33321, 100px 25px 0 0 #ffffff, 18 | 105px 25px 0 0 #ffffff, 110px 25px 0 0 #706e6f, 115px 25px 0 0 #d7cfd4, 19 | 120px 25px 0 0 #d7cfd4, 125px 25px 0 0 #b33321, 50px 30px 0 0 #b33321, 20 | 55px 30px 0 0 #b33321, 60px 30px 0 0 #b33321, 65px 30px 0 0 #b33321, 21 | 70px 30px 0 0 #b33321, 75px 30px 0 0 #b33321, 80px 30px 0 0 #b33321, 22 | 85px 30px 0 0 #ffffff, 90px 30px 0 0 #ffffff, 95px 30px 0 0 #ffffff, 23 | 100px 30px 0 0 #b33321, 105px 30px 0 0 #ffffff, 110px 30px 0 0 #706e6f, 24 | 115px 30px 0 0 #d7cfd4, 120px 30px 0 0 #d7cfd4, 125px 30px 0 0 #b33321, 25 | 130px 30px 0 0 #b33321, 50px 35px 0 0 #b33321, 55px 35px 0 0 #b33321, 26 | 60px 35px 0 0 #b33321, 65px 35px 0 0 #b33321, 70px 35px 0 0 #b33321, 27 | 75px 35px 0 0 #b33321, 80px 35px 0 0 #ffffff, 85px 35px 0 0 #ffffff, 28 | 90px 35px 0 0 #b33321, 95px 35px 0 0 #ffffff, 100px 35px 0 0 #b33321, 29 | 105px 35px 0 0 #ffffff, 110px 35px 0 0 #706e6f, 115px 35px 0 0 #d7cfd4, 30 | 120px 35px 0 0 #d7cfd4, 125px 35px 0 0 #b33321, 130px 35px 0 0 #b33321, 31 | 50px 40px 0 0 #b33321, 55px 40px 0 0 #b33321, 60px 40px 0 0 #b33321, 32 | 65px 40px 0 0 #b33321, 70px 40px 0 0 #b33321, 75px 40px 0 0 #b33321, 33 | 80px 40px 0 0 #ffffff, 85px 40px 0 0 #ffffff, 90px 40px 0 0 #b33321, 34 | 95px 40px 0 0 #ffffff, 100px 40px 0 0 #b33321, 105px 40px 0 0 #ffffff, 35 | 110px 40px 0 0 #706e6f, 115px 40px 0 0 #d7cfd4, 120px 40px 0 0 #d7cfd4, 36 | 125px 40px 0 0 #b33321, 130px 40px 0 0 #b33321, 50px 45px 0 0 #b33321, 37 | 55px 45px 0 0 #b33321, 60px 45px 0 0 #b33321, 65px 45px 0 0 #b33321, 38 | 70px 45px 0 0 #b33321, 75px 45px 0 0 #b33321, 80px 45px 0 0 #b33321, 39 | 85px 45px 0 0 #ffffff, 90px 45px 0 0 #ffffff, 95px 45px 0 0 #ffffff, 40 | 100px 45px 0 0 #ffffff, 105px 45px 0 0 #ffffff, 110px 45px 0 0 #706e6f, 41 | 115px 45px 0 0 #706e6f, 120px 45px 0 0 #d7cfd4, 125px 45px 0 0 #b33321, 42 | 130px 45px 0 0 #b33321, 50px 50px 0 0 #b33321, 55px 50px 0 0 #b33321, 43 | 60px 50px 0 0 #b33321, 65px 50px 0 0 #b33321, 70px 50px 0 0 #b33321, 44 | 75px 50px 0 0 #ffffff, 80px 50px 0 0 #ffffff, 85px 50px 0 0 #b33321, 45 | 90px 50px 0 0 #b33321, 95px 50px 0 0 #b33321, 100px 50px 0 0 #b33321, 46 | 105px 50px 0 0 #b33321, 110px 50px 0 0 #ffffff, 115px 50px 0 0 #706e6f, 47 | 120px 50px 0 0 #d7cfd4, 125px 50px 0 0 #b33321, 130px 50px 0 0 #b33321, 48 | 50px 55px 0 0 #b33321, 55px 55px 0 0 #b33321, 60px 55px 0 0 #b33321, 49 | 65px 55px 0 0 #b33321, 70px 55px 0 0 #b33321, 75px 55px 0 0 #ffffff, 50 | 80px 55px 0 0 #ffffff, 85px 55px 0 0 #ffffff, 90px 55px 0 0 #b33321, 51 | 95px 55px 0 0 #b33321, 100px 55px 0 0 #ffffff, 105px 55px 0 0 #ffffff, 52 | 110px 55px 0 0 #ffffff, 115px 55px 0 0 #706e6f, 120px 55px 0 0 #d7cfd4, 53 | 125px 55px 0 0 #d7cfd4, 130px 55px 0 0 #b33321, 50px 60px 0 0 #b33321, 54 | 55px 60px 0 0 #b33321, 60px 60px 0 0 #b33321, 65px 60px 0 0 #b33321, 55 | 70px 60px 0 0 #b33321, 75px 60px 0 0 #b33321, 80px 60px 0 0 #ffffff, 56 | 85px 60px 0 0 #ffffff, 90px 60px 0 0 #ffffff, 95px 60px 0 0 #ffffff, 57 | 100px 60px 0 0 #ffffff, 105px 60px 0 0 #b33321, 110px 60px 0 0 #b33321, 58 | 115px 60px 0 0 #706e6f, 120px 60px 0 0 #706e6f, 125px 60px 0 0 #d7cfd4, 59 | 130px 60px 0 0 #b33321, 50px 65px 0 0 #b33321, 55px 65px 0 0 #b33321, 60 | 60px 65px 0 0 #b33321, 65px 65px 0 0 #b33321, 70px 65px 0 0 #b33321, 61 | 75px 65px 0 0 #b33321, 80px 65px 0 0 #b33321, 85px 65px 0 0 #b33321, 62 | 90px 65px 0 0 #b33321, 95px 65px 0 0 #ffffff, 100px 65px 0 0 #b33321, 63 | 105px 65px 0 0 #b33321, 110px 65px 0 0 #b33321, 115px 65px 0 0 #b33321, 64 | 120px 65px 0 0 #706e6f, 125px 65px 0 0 #d7cfd4, 130px 65px 0 0 #b33321, 65 | 50px 70px 0 0 #b33321, 55px 70px 0 0 #b33321, 60px 70px 0 0 #b33321, 66 | 65px 70px 0 0 #b33321, 70px 70px 0 0 #ffffff, 75px 70px 0 0 #ffffff, 67 | 80px 70px 0 0 #ffffff, 85px 70px 0 0 #ffffff, 90px 70px 0 0 #ffffff, 68 | 95px 70px 0 0 #ffffff, 100px 70px 0 0 #ffffff, 105px 70px 0 0 #ffffff, 69 | 110px 70px 0 0 #ffffff, 115px 70px 0 0 #b33321, 120px 70px 0 0 #706e6f, 70 | 125px 70px 0 0 #d7cfd4, 130px 70px 0 0 #b33321, 50px 75px 0 0 #b33321, 71 | 55px 75px 0 0 #b33321, 60px 75px 0 0 #b33321, 65px 75px 0 0 #b33321, 72 | 70px 75px 0 0 #ffffff, 75px 75px 0 0 #ffffff, 80px 75px 0 0 #ffffff, 73 | 85px 75px 0 0 #ffffff, 90px 75px 0 0 #ffffff, 95px 75px 0 0 #ffffff, 74 | 100px 75px 0 0 #ffffff, 105px 75px 0 0 #ffffff, 110px 75px 0 0 #ffffff, 75 | 115px 75px 0 0 #b33321, 120px 75px 0 0 #706e6f, 125px 75px 0 0 #d7cfd4, 76 | 130px 75px 0 0 #b33321, 50px 80px 0 0 #706e6f, 55px 80px 0 0 #b33321, 77 | 60px 80px 0 0 #b33321, 65px 80px 0 0 #b33321, 70px 80px 0 0 #ffffff, 78 | 75px 80px 0 0 #b33321, 80px 80px 0 0 #b33321, 85px 80px 0 0 #b33321, 79 | 90px 80px 0 0 #b33321, 95px 80px 0 0 #b33321, 100px 80px 0 0 #b33321, 80 | 105px 80px 0 0 #b33321, 110px 80px 0 0 #ffffff, 115px 80px 0 0 #b33321, 81 | 120px 80px 0 0 #706e6f, 125px 80px 0 0 #d7cfd4, 130px 80px 0 0 #b33321, 82 | 50px 85px 0 0 #706e6f, 55px 85px 0 0 #b33321, 60px 85px 0 0 #b33321, 83 | 65px 85px 0 0 #b33321, 70px 85px 0 0 #b33321, 75px 85px 0 0 #b33321, 84 | 80px 85px 0 0 #b33321, 85px 85px 0 0 #b33321, 90px 85px 0 0 #ffffff, 85 | 95px 85px 0 0 #ffffff, 100px 85px 0 0 #ffffff, 105px 85px 0 0 #b33321, 86 | 110px 85px 0 0 #b33321, 115px 85px 0 0 #b33321, 120px 85px 0 0 #706e6f, 87 | 125px 85px 0 0 #d7cfd4, 130px 85px 0 0 #d7cfd4, 50px 90px 0 0 #706e6f, 88 | 55px 90px 0 0 #706e6f, 60px 90px 0 0 #b33321, 65px 90px 0 0 #b33321, 89 | 70px 90px 0 0 #b33321, 75px 90px 0 0 #b33321, 80px 90px 0 0 #b33321, 90 | 85px 90px 0 0 #ffffff, 90px 90px 0 0 #ffffff, 95px 90px 0 0 #ffffff, 91 | 100px 90px 0 0 #ffffff, 105px 90px 0 0 #ffffff, 110px 90px 0 0 #b33321, 92 | 115px 90px 0 0 #b33321, 120px 90px 0 0 #b33321, 125px 90px 0 0 #706e6f, 93 | 130px 90px 0 0 #d7cfd4, 50px 95px 0 0 #d7cfd4, 55px 95px 0 0 #706e6f, 94 | 60px 95px 0 0 #b33321, 65px 95px 0 0 #b33321, 70px 95px 0 0 #b33321, 95 | 75px 95px 0 0 #b33321, 80px 95px 0 0 #ffffff, 85px 95px 0 0 #ffffff, 96 | 90px 95px 0 0 #b33321, 95px 95px 0 0 #b33321, 100px 95px 0 0 #b33321, 97 | 105px 95px 0 0 #b33321, 110px 95px 0 0 #ffffff, 115px 95px 0 0 #b33321, 98 | 120px 95px 0 0 #b33321, 125px 95px 0 0 #706e6f, 130px 95px 0 0 #d7cfd4, 99 | 50px 100px 0 0 #d7cfd4, 55px 100px 0 0 #706e6f, 60px 100px 0 0 #706e6f, 100 | 65px 100px 0 0 #b33321, 70px 100px 0 0 #b33321, 75px 100px 0 0 #b33321, 101 | 80px 100px 0 0 #ffffff, 85px 100px 0 0 #ffffff, 90px 100px 0 0 #b33321, 102 | 95px 100px 0 0 #b33321, 100px 100px 0 0 #b33321, 105px 100px 0 0 #b33321, 103 | 110px 100px 0 0 #ffffff, 115px 100px 0 0 #b33321, 120px 100px 0 0 #b33321, 104 | 125px 100px 0 0 #706e6f, 130px 100px 0 0 #d7cfd4, 50px 105px 0 0 #d7cfd4, 105 | 55px 105px 0 0 #706e6f, 60px 105px 0 0 #706e6f, 65px 105px 0 0 #b33321, 106 | 70px 105px 0 0 #b33321, 75px 105px 0 0 #b33321, 80px 105px 0 0 #b33321, 107 | 85px 105px 0 0 #ffffff, 90px 105px 0 0 #ffffff, 95px 105px 0 0 #ffffff, 108 | 100px 105px 0 0 #ffffff, 105px 105px 0 0 #ffffff, 110px 105px 0 0 #ffffff, 109 | 115px 105px 0 0 #b33321, 120px 105px 0 0 #b33321, 125px 105px 0 0 #706e6f, 110 | 130px 105px 0 0 #d7cfd4, 50px 110px 0 0 #d7cfd4, 55px 110px 0 0 #d7cfd4, 111 | 60px 110px 0 0 #706e6f, 65px 110px 0 0 #b33321, 70px 110px 0 0 #b33321, 112 | 75px 110px 0 0 #b33321, 80px 110px 0 0 #b33321, 85px 110px 0 0 #b33321, 113 | 90px 110px 0 0 #ffffff, 95px 110px 0 0 #ffffff, 100px 110px 0 0 #ffffff, 114 | 105px 110px 0 0 #ffffff, 110px 110px 0 0 #b33321, 115px 110px 0 0 #b33321, 115 | 120px 110px 0 0 #b33321, 125px 110px 0 0 #706e6f, 130px 110px 0 0 #d7cfd4, 116 | 50px 115px 0 0 #d7cfd4, 55px 115px 0 0 #d7cfd4, 60px 115px 0 0 #706e6f, 117 | 65px 115px 0 0 #b33321, 70px 115px 0 0 #ffffff, 75px 115px 0 0 #ffffff, 118 | 80px 115px 0 0 #ffffff, 85px 115px 0 0 #b33321, 90px 115px 0 0 #b33321, 119 | 95px 115px 0 0 #b33321, 100px 115px 0 0 #ffffff, 105px 115px 0 0 #ffffff, 120 | 110px 115px 0 0 #b33321, 115px 115px 0 0 #b33321, 120px 115px 0 0 #b33321, 121 | 125px 115px 0 0 #706e6f, 130px 115px 0 0 #d7cfd4, 50px 120px 0 0 #d7cfd4, 122 | 55px 120px 0 0 #d7cfd4, 60px 120px 0 0 #706e6f, 65px 120px 0 0 #b33321, 123 | 70px 120px 0 0 #ffffff, 75px 120px 0 0 #ffffff, 80px 120px 0 0 #ffffff, 124 | 85px 120px 0 0 #b33321, 90px 120px 0 0 #b33321, 95px 120px 0 0 #b33321, 125 | 100px 120px 0 0 #ffffff, 105px 120px 0 0 #ffffff, 110px 120px 0 0 #ffffff, 126 | 115px 120px 0 0 #b33321, 120px 120px 0 0 #b33321, 125px 120px 0 0 #706e6f, 127 | 130px 120px 0 0 #d7cfd4, 50px 125px 0 0 #d7cfd4, 55px 125px 0 0 #d7cfd4, 128 | 60px 125px 0 0 #706e6f, 65px 125px 0 0 #b33321, 70px 125px 0 0 #ffffff, 129 | 75px 125px 0 0 #ffffff, 80px 125px 0 0 #b33321, 85px 125px 0 0 #b33321, 130 | 90px 125px 0 0 #b33321, 95px 125px 0 0 #b33321, 100px 125px 0 0 #b33321, 131 | 105px 125px 0 0 #ffffff, 110px 125px 0 0 #ffffff, 115px 125px 0 0 #b33321, 132 | 120px 125px 0 0 #b33321, 125px 125px 0 0 #706e6f, 130px 125px 0 0 #d7cfd4, 133 | 50px 130px 0 0 #d7cfd4, 55px 130px 0 0 #d7cfd4, 60px 130px 0 0 #706e6f, 134 | 65px 130px 0 0 #b33321, 70px 130px 0 0 #ffffff, 75px 130px 0 0 #ffffff, 135 | 80px 130px 0 0 #b33321, 85px 130px 0 0 #b33321, 90px 130px 0 0 #b33321, 136 | 95px 130px 0 0 #b33321, 100px 130px 0 0 #b33321, 105px 130px 0 0 #ffffff, 137 | 110px 130px 0 0 #ffffff, 115px 130px 0 0 #b33321, 120px 130px 0 0 #706e6f, 138 | 125px 130px 0 0 #706e6f, 130px 130px 0 0 #d7cfd4, 50px 135px 0 0 #d7cfd4, 139 | 55px 135px 0 0 #706e6f, 60px 135px 0 0 #706e6f, 65px 135px 0 0 #b33321, 140 | 70px 135px 0 0 #b33321, 75px 135px 0 0 #ffffff, 80px 135px 0 0 #ffffff, 141 | 85px 135px 0 0 #b33321, 90px 135px 0 0 #b33321, 95px 135px 0 0 #b33321, 142 | 100px 135px 0 0 #b33321, 105px 135px 0 0 #ffffff, 110px 135px 0 0 #ffffff, 143 | 115px 135px 0 0 #b33321, 120px 135px 0 0 #706e6f, 125px 135px 0 0 #d7cfd4, 144 | 130px 135px 0 0 #b33321, 50px 140px 0 0 #d7cfd4, 55px 140px 0 0 #706e6f, 145 | 60px 140px 0 0 #706e6f, 65px 140px 0 0 #b33321, 70px 140px 0 0 #b33321, 146 | 75px 140px 0 0 #b33321, 80px 140px 0 0 #ffffff, 85px 140px 0 0 #ffffff, 147 | 90px 140px 0 0 #ffffff, 95px 140px 0 0 #ffffff, 100px 140px 0 0 #ffffff, 148 | 105px 140px 0 0 #ffffff, 110px 140px 0 0 #ffffff, 115px 140px 0 0 #b33321, 149 | 120px 140px 0 0 #706e6f, 125px 140px 0 0 #d7cfd4, 130px 140px 0 0 #b33321, 150 | 50px 145px 0 0 #d7cfd4, 55px 145px 0 0 #706e6f, 60px 145px 0 0 #b33321, 151 | 65px 145px 0 0 #b33321, 70px 145px 0 0 #b33321, 75px 145px 0 0 #b33321, 152 | 80px 145px 0 0 #b33321, 85px 145px 0 0 #ffffff, 90px 145px 0 0 #ffffff, 153 | 95px 145px 0 0 #ffffff, 100px 145px 0 0 #ffffff, 105px 145px 0 0 #ffffff, 154 | 110px 145px 0 0 #b33321, 115px 145px 0 0 #706e6f, 120px 145px 0 0 #d7cfd4, 155 | 125px 145px 0 0 #d7cfd4, 130px 145px 0 0 #b33321, 50px 150px 0 0 #d7cfd4, 156 | 55px 150px 0 0 #706e6f, 60px 150px 0 0 #b33321, 65px 150px 0 0 #b33321, 157 | 70px 150px 0 0 #b33321, 75px 150px 0 0 #b33321, 80px 150px 0 0 #b33321, 158 | 85px 150px 0 0 #b33321, 90px 150px 0 0 #b33321, 95px 150px 0 0 #b33321, 159 | 100px 150px 0 0 #b33321, 105px 150px 0 0 #b33321, 110px 150px 0 0 #b33321, 160 | 115px 150px 0 0 #706e6f, 120px 150px 0 0 #d7cfd4, 125px 150px 0 0 #b33321, 161 | 130px 150px 0 0 #b33321, 50px 155px 0 0 #8e8c8d, 55px 155px 0 0 #706e6f, 162 | 60px 155px 0 0 #b33321, 65px 155px 0 0 #b33321, 70px 155px 0 0 #b33321, 163 | 75px 155px 0 0 #b33321, 80px 155px 0 0 #b33321, 85px 155px 0 0 #b33321, 164 | 90px 155px 0 0 #b33321, 95px 155px 0 0 #b33321, 100px 155px 0 0 #b33321, 165 | 105px 155px 0 0 #b33321, 110px 155px 0 0 #706e6f, 115px 155px 0 0 #706e6f, 166 | 120px 155px 0 0 #d7cfd4, 125px 155px 0 0 #b33321, 130px 155px 0 0 #8e8c8d, 167 | 55px 160px 0 0 #8e8c8d, 60px 160px 0 0 #b33321, 65px 160px 0 0 #b33321, 168 | 70px 160px 0 0 #b33321, 75px 160px 0 0 #b33321, 80px 160px 0 0 #b33321, 169 | 85px 160px 0 0 #b33321, 90px 160px 0 0 #b33321, 95px 160px 0 0 #b33321, 170 | 100px 160px 0 0 #b33321, 105px 160px 0 0 #b33321, 110px 160px 0 0 #706e6f, 171 | 115px 160px 0 0 #d7cfd4, 120px 160px 0 0 #d7cfd4, 125px 160px 0 0 #b33321, 172 | 130px 160px 0 0 #8e8c8d, 60px 165px 0 0 #8e8c8d, 65px 165px 0 0 #8e8c8d, 173 | 70px 165px 0 0 #8e8c8d, 75px 165px 0 0 #8e8c8d, 80px 165px 0 0 #8e8c8d, 174 | 85px 165px 0 0 #8e8c8d, 90px 165px 0 0 #8e8c8d, 95px 165px 0 0 #8e8c8d, 175 | 100px 165px 0 0 #8e8c8d, 105px 165px 0 0 #8e8c8d, 110px 165px 0 0 #706e6f, 176 | 115px 165px 0 0 #706e6f, 120px 165px 0 0 #706e6f, 125px 165px 0 0 #8e8c8d, 177 | 65px 170px 0 0 #8e8c8d, 70px 170px 0 0 #8e8c8d, 75px 170px 0 0 #8e8c8d, 178 | 80px 170px 0 0 #8e8c8d, 85px 170px 0 0 #8e8c8d, 90px 170px 0 0 #8e8c8d, 179 | 95px 170px 0 0 #8e8c8d, 100px 170px 0 0 #8e8c8d, 105px 170px 0 0 #706e6f, 180 | 110px 170px 0 0 #706e6f, 115px 170px 0 0 #706e6f, 120px 170px 0 0 #8e8c8d; 181 | height: 10px; 182 | width: 10px; 183 | top: -50px; 184 | left: -75px; 185 | } 186 | -------------------------------------------------------------------------------- /css/jiannejose.css: -------------------------------------------------------------------------------- 1 | #jiMallow { 2 | width: 120px; 3 | height: 150px; 4 | background-color: #ffc6fc; 5 | background-image: radial-gradient( 6 | circle at 50% -68px, 7 | rgba(255, 255, 255, 0.3) 45%, 8 | transparent 50% 9 | ); 10 | border-radius: 100px / 40px; 11 | box-shadow: 6px 5px 1px #eeeeee; 12 | } 13 | 14 | #jiMallow:before { 15 | content: ""; 16 | display: inline-block; 17 | position: relative; 18 | top: 50px; 19 | left: 20px; 20 | width: 20px; 21 | height: 20px; 22 | background-color: #000000; 23 | border-radius: 20px; 24 | box-shadow: 55px 0 0 #000000, 57px 2px 3px 1px #ffffff, 25 | 2px 2px 3px 1px #ffffff, -4px 24px 19px -3px #e83f8e, 26 | 60px 24px 19px -3px #e83f8e, 28px 14px 0 11px #ffc6fc, 27 | 28px 19px 0 8px #000000, 75px -50px 2px -3px #823faf, 28 | 62px -54px 1px 1px #b3beff, 87px -46px 1px 1px #b3beff, 29 | 87px -46px 0 1px #eeeeee; 30 | } 31 | 32 | #jiMarceline { 33 | width: 150px; 34 | height: 210px; 35 | background-color: #dff2f8; 36 | overflow: hidden; 37 | } 38 | 39 | #jiMarceline:before { 40 | content: ""; 41 | display: inline-block; 42 | position: relative; 43 | top: -95px; 44 | left: -40px; 45 | width: 130px; 46 | height: 130px; 47 | background-color: #09102c; 48 | border-radius: 100px; 49 | box-shadow: 135px 20px 0 18px #09102c, 165px 230px 0 10px #09102c, 50 | -45px 270px 0 18px #09102c, 95px 110px 0 -56px #000000, 51 | 5px 110px 0 -56px #000000, 95px 115px 0 -56px #cccccc, 52 | 5px 115px 0 -56px #cccccc, 50px 113px 0 -37px #dff2f8, 53 | 52px 117px 0 -40px #000000, 85px 220px 0 -62px #8a2c32, 54 | 85px 231px 0 -62px #8a2c32; 55 | } 56 | 57 | #jiMarceline:after { 58 | content: ""; 59 | display: inline-block; 60 | position: relative; 61 | top: -25px; 62 | left: -36px; 63 | width: 8px; 64 | height: 7px; 65 | background-color: transparent; 66 | border-top: 1px solid #000000; 67 | border-left: 1px solid #000000; 68 | transform: skew(27deg) rotate(-175deg); 69 | } 70 | 71 | #jiCreeper { 72 | width: 200px; 73 | height: 200px; 74 | } 75 | 76 | #jiCreeper:before { 77 | content: ""; 78 | display: inline-block; 79 | position: relative; 80 | top: 10px; 81 | left: 20px; 82 | width: 10px; 83 | height: 10px; 84 | background-color: #5bc354; 85 | box-shadow: 10px 0 0 #5bc354, 20px 0 0 #017d01, 30px 0 0 #017d01, 86 | 40px 0 0 #017d01, 50px 0 0 #017d01, 60px 0 0 #5bc354, 70px 0 0 #5bc354, 87 | 80px 0 0 #5bc354, 90px 0 0 #5bc354, 100px 0 0 #c2c2c2, 110px 0 0 #c2c2c2, 88 | 120px 0 0 #5bc354, 130px 0 0 #5bc354, 140px 0 0 #5bc354, 150px 0 0 #5bc354, 89 | 0 10px 0 #5bc354, 10px 10px 0 #5bc354, 20px 10px 0 #017d01, 90 | 30px 10px 0 #017d01, 40px 10px 0 #017d01, 50px 10px 0 #017d01, 91 | 60px 10px 0 #5bc354, 70px 10px 0 #5bc354, 80px 10px 0 #5bc354, 92 | 90px 10px 0 #5bc354, 100px 10px 0 #c2c2c2, 110px 10px 0 #c2c2c2, 93 | 120px 10px 0 #5bc354, 130px 10px 0 #5bc354, 140px 10px 0 #5bc354, 94 | 150px 10px 0 #5bc354, 0 20px 0 #5bc354, 10px 20px 0 #5bc354, 95 | 20px 20px 0 #5bc354, 30px 20px 0 #5bc354, 40px 20px 0 #017d01, 96 | 50px 20px 0 #017d01, 60px 20px 0 #5bc354, 70px 20px 0 #5bc354, 97 | 80px 20px 0 #5bc354, 90px 20px 0 #5bc354, 100px 20px 0 #017d01, 98 | 110px 20px 0 #017d01, 120px 20px 0 #5bc354, 130px 20px 0 #5bc354, 99 | 140px 20px 0 #c2c2c2, 150px 20px 0 #c2c2c2, 0 30px 0 #5bc354, 100 | 10px 30px 0 #5bc354, 20px 30px 0 #5bc354, 30px 30px 0 #5bc354, 101 | 40px 30px 0 #017d01, 50px 30px 0 #017d01, 60px 30px 0 #5bc354, 102 | 70px 30px 0 #5bc354, 80px 30px 0 #5bc354, 90px 30px 0 #5bc354, 103 | 100px 30px 0 #017d01, 110px 30px 0 #017d01, 120px 30px 0 #5bc354, 104 | 130px 30px 0 #5bc354, 140px 30px 0 #c2c2c2, 150px 30px 0 #c2c2c2, 105 | 0 40px 0 #017d01, 10px 40px 0 #017d01, 20px 40px 0 #11350f, 106 | 30px 40px 0 #11350f, 40px 40px 0 #11350f, 50px 40px 0 #11350f, 107 | 60px 40px 0 #5bc354, 70px 40px 0 #5bc354, 80px 40px 0 #5bc354, 108 | 90px 40px 0 #5bc354, 100px 40px 0 #11350f, 110px 40px 0 #11350f, 109 | 120px 40px 0 #11350f, 130px 40px 0 #11350f, 140px 40px 0 #c2c2c2, 110 | 150px 40px 0 #c2c2c2, 0 50px 0 #017d01, 10px 50px 0 #017d01, 111 | 20px 50px 0 #11350f, 30px 50px 0 #11350f, 40px 50px 0 #11350f, 112 | 50px 50px 0 #11350f, 60px 50px 0 #5bc354, 70px 50px 0 #5bc354, 113 | 80px 50px 0 #5bc354, 90px 50px 0 #5bc354, 100px 50px 0 #11350f, 114 | 110px 50px 0 #11350f, 120px 50px 0 #11350f, 130px 50px 0 #11350f, 115 | 140px 50px 0 #c2c2c2, 150px 50px 0 #c2c2c2, 0 60px 0 #017d01, 116 | 10px 60px 0 #017d01, 20px 60px 0 #11350f, 30px 60px 0 #11350f, 117 | 40px 60px 0 #010101, 50px 60px 0 #010101, 60px 60px 0 #5bc354, 118 | 70px 60px 0 #5bc354, 80px 60px 0 #017d01, 90px 60px 0 #017d01, 119 | 100px 60px 0 #010101, 110px 60px 0 #010101, 120px 60px 0 #11350f, 120 | 130px 60px 0 #11350f, 140px 60px 0 #c2c2c2, 150px 60px 0 #c2c2c2, 121 | 0 70px 0 #017d01, 10px 70px 0 #017d01, 20px 70px 0 #11350f, 122 | 30px 70px 0 #11350f, 40px 70px 0 #010101, 50px 70px 0 #010101, 123 | 60px 70px 0 #5bc354, 70px 70px 0 #5bc354, 80px 70px 0 #017d01, 124 | 90px 70px 0 #017d01, 100px 70px 0 #010101, 110px 70px 0 #010101, 125 | 120px 70px 0 #11350f, 130px 70px 0 #11350f, 140px 70px 0 #c2c2c2, 126 | 150px 70px 0 #c2c2c2, 0 80px 0 #5bc354, 10px 80px 0 #5bc354, 127 | 20px 80px 0 #017d01, 30px 80px 0 #017d01, 40px 80px 0 #5bc354, 128 | 50px 80px 0 #5bc354, 60px 80px 0 #11350f, 70px 80px 0 #11350f, 129 | 80px 80px 0 #11350f, 90px 80px 0 #11350f, 100px 80px 0 #c2c2c2, 130 | 110px 80px 0 #c2c2c2, 120px 80px 0 #5bc354, 130px 80px 0 #5bc354, 131 | 140px 80px 0 #017d01, 150px 80px 0 #017d01, 0 90px 0 #5bc354, 132 | 10px 90px 0 #5bc354, 20px 90px 0 #017d01, 30px 90px 0 #017d01, 133 | 40px 90px 0 #5bc354, 50px 90px 0 #5bc354, 60px 90px 0 #11350f, 134 | 70px 90px 0 #11350f, 80px 90px 0 #11350f, 90px 90px 0 #11350f, 135 | 100px 90px 0 #c2c2c2, 110px 90px 0 #c2c2c2, 120px 90px 0 #5bc354, 136 | 130px 90px 0 #5bc354, 140px 90px 0 #017d01, 150px 90px 0 #017d01, 137 | 0 100px 0 #5bc354, 10px 100px 0 #5bc354, 20px 100px 0 #5bc354, 138 | 30px 100px 0 #5bc354, 40px 100px 0 #11350f, 50px 100px 0 #11350f, 139 | 60px 100px 0 #010101, 70px 100px 0 #010101, 80px 100px 0 #010101, 140 | 90px 100px 0 #010101, 100px 100px 0 #11350f, 110px 100px 0 #11350f, 141 | 120px 100px 0 #017d01, 130px 100px 0 #017d01, 140px 100px 0 #c2c2c2, 142 | 150px 100px 0 #c2c2c2, 0 110px 0 #5bc354, 10px 110px 0 #5bc354, 143 | 20px 110px 0 #5bc354, 30px 110px 0 #5bc354, 40px 110px 0 #11350f, 144 | 50px 110px 0 #11350f, 60px 110px 0 #010101, 70px 110px 0 #010101, 145 | 80px 110px 0 #010101, 90px 110px 0 #010101, 100px 110px 0 #11350f, 146 | 110px 110px 0 #11350f, 120px 110px 0 #017d01, 130px 110px 0 #017d01, 147 | 140px 110px 0 #c2c2c2, 150px 110px 0 #c2c2c2, 0 120px 0 #5bc354, 148 | 10px 120px 0 #5bc354, 20px 120px 0 #5bc354, 30px 120px 0 #5bc354, 149 | 40px 120px 0 #010101, 50px 120px 0 #010101, 60px 120px 0 #010101, 150 | 70px 120px 0 #010101, 80px 120px 0 #010101, 90px 120px 0 #010101, 151 | 100px 120px 0 #010101, 110px 120px 0 #010101, 120px 120px 0 #5bc354, 152 | 130px 120px 0 #5bc354, 140px 120px 0 #5bc354, 150px 120px 0 #5bc354, 153 | 0 130px 0 #5bc354, 10px 130px 0 #5bc354, 20px 130px 0 #5bc354, 154 | 30px 130px 0 #5bc354, 40px 130px 0 #010101, 50px 130px 0 #010101, 155 | 60px 130px 0 #010101, 70px 130px 0 #010101, 80px 130px 0 #010101, 156 | 90px 130px 0 #010101, 100px 130px 0 #010101, 110px 130px 0 #010101, 157 | 120px 130px 0 #5bc354, 130px 130px 0 #5bc354, 140px 130px 0 #5bc354, 158 | 150px 130px 0 #5bc354, 0 140px 0 #017d01, 10px 140px 0 #017d01, 159 | 20px 140px 0 #5bc354, 30px 140px 0 #5bc354, 40px 140px 0 #11350f, 160 | 50px 140px 0 #11350f, 60px 140px 0 #5bc354, 70px 140px 0 #5bc354, 161 | 80px 140px 0 #c2c2c2, 90px 140px 0 #c2c2c2, 100px 140px 0 #017d01, 162 | 110px 140px 0 #017d01, 120px 140px 0 #5bc354, 130px 140px 0 #5bc354, 163 | 140px 140px 0 #5bc354, 150px 140px 0 #5bc354, 0 150px 0 #017d01, 164 | 10px 150px 0 #017d01, 20px 150px 0 #5bc354, 30px 150px 0 #5bc354, 165 | 40px 150px 0 #11350f, 50px 150px 0 #11350f, 60px 150px 0 #5bc354, 166 | 70px 150px 0 #5bc354, 80px 150px 0 #c2c2c2, 90px 150px 0 #c2c2c2, 167 | 100px 150px 0 #017d01, 110px 150px 0 #017d01, 120px 150px 0 #5bc354, 168 | 130px 150px 0 #5bc354, 140px 150px 0 #5bc354, 150px 150px 0 #5bc354; 169 | } 170 | 171 | #jiCreeper:after { 172 | content: ""; 173 | display: inline-block; 174 | position: relative; 175 | top: 0; 176 | left: 0; 177 | width: 10px; 178 | height: 10px; 179 | background-color: #dadada; 180 | box-shadow: -10px -10px 0 #c4c4c4, 10px 0 0 #dadada, 20px 0 0 #ffffff, 181 | 20px 0 0 #ffffff, 30px -20px 0 #c4c4c4, 40px 0 0 #c4c4c4, 50px 0 0 #c4c4c4, 182 | 60px 0 0 #ffffff, 70px 0 0 #dadada, 80px 0 0 #dadada, 80px -20px 0 #323232, 183 | 90px 0 0 #dadada, 90px -10px 0 #dadada, 100px 0 0 #ffffff, 110px 0 0 #eaeaea, 184 | 120px 0 0 #dadada, 130px 0 0 #dadada, 140px 0 0 #ffffff, 150px 0 0 #ffffff, 185 | 160px 0 0 #dadada, -20px 10px 0 #dadada, 0 10px 0 #dadada, 186 | 10px 10px 0 #ffffff, 20px 10px 0 #c4c4c4, 30px 10px 0 #ffffff, 187 | 40px 10px 0 #c4c4c4, 50px 10px 0 #c4c4c4, 60px 10px 0 #dadada, 188 | 70px 10px 0 #dadada, 80px 10px 0 #ffffff, 90px 10px 0 #dadada, 189 | 100px 10px 0 #eaeaea, 110px 10px 0 #eaeaea, 120px 10px 0 #ffffff, 190 | 130px 10px 0 #ffffff, 140px 10px 0 #dadada, 150px 10px 0 #dadada, 191 | 160px 10px 0 #ffffff, 0 20px 0 #dadada, 10px 20px 0 #dadada, 192 | 20px 20px 0 #dadada, 30px 20px 0 #dadada, 40px 20px 0 #ffffff, 193 | 50px 20px 0 #c4c4c4, 60px 20px 0 #dadada, 70px 20px 0 #ffffff, 194 | 80px 20px 0 #dadada, 90px 20px 0 #dadada, 100px 20px 0 #ffffff, 195 | 110px 20px 0 #c4c4c4, 120px 20px 0 #ffffff, 130px 20px 0 #dadada, 196 | 140px 20px 0 #ffffff, 150px 20px 0 #ffffff, 160px 20px 0 #eaeaea, 197 | -20px 30px 0 #6e6e6e, 0 30px 0 #dadada, 10px 30px 0 #ffffff, 198 | 20px 30px 0 #dadada, 30px 30px 0 #dadada, 40px 30px 0 #ffffff, 199 | 50px 30px 0 #c4c4c4, 60px 30px 0 #dadada, 70px 30px 0 #dadada, 200 | 80px 30px 0 #dadada, 90px 30px 0 #ffffff, 100px 30px 0 #c4c4c4, 201 | 110px 30px 0 #c4c4c4, 120px 30px 0 #ffffff, 130px 30px 0 #dadada, 202 | 140px 30px 0 #ffffff, 150px 30px 0 #eaeaea, 160px 30px 0 #ffffff, 203 | 0 40px 0 #c4c4c4, 10px 40px 0 #ffffff, 20px 40px 0 #6e6e6e, 204 | 30px 40px 0 #6e6e6e, 40px 40px 0 #ffffff, 50px 40px 0 #6e6e6e, 205 | 60px 40px 0 #ffffff, 70px 40px 0 #dadada, 80px 40px 0 #ffffff, 206 | 90px 40px 0 #dadada, 100px 40px 0 #ffffff, 110px 40px 0 #6e6e6e, 207 | 120px 40px 0 #6e6e6e, 130px 40px 0 #ffffff, 140px 40px 0 #eaeaea, 208 | 150px 40px 0 #ffffff, 160px 40px 0 #eaeaea, 0 50px 0 #c4c4c4, 209 | 10px 50px 0 #c4c4c4, 20px 50px 0 #ffffff, 30px 50px 0 #6e6e6e, 210 | 40px 50px 0 #ffffff, 50px 50px 0 #ffffff, 60px 50px 0 #dadada, 211 | 70px 50px 0 #dadada, 80px 50px 0 #ffffff, 90px 50px 0 #dadada, 212 | 100px 50px 0 #6e6e6e, 110px 50px 0 #6e6e6e, 120px 50px 0 #6e6e6e, 213 | 130px 50px 0 #ffffff, 140px 50px 0 #ffffff, 150px 50px 0 #eaeaea, 214 | 160px 50px 0 #eaeaea, 0 60px 0 #c4c4c4, 10px 60px 0 #c4c4c4, 215 | 20px 60px 0 #6e6e6e, 30px 60px 0 #6e6e6e, 40px 60px 0 #ffffff, 216 | 50px 60px 0 #323232, 60px 60px 0 #dadada, 70px 60px 0 #ffffff, 217 | 80px 60px 0 #c4c4c4, 90px 60px 0 #c4c4c4, 100px 60px 0 #323232, 218 | 110px 60px 0 #323232, 120px 60px 0 #ffffff, 130px 60px 0 #6e6e6e, 219 | 140px 60px 0 #ffffff, 150px 60px 0 #ffffff, 160px 60px 0 #323232, 220 | 0 70px 0 #c4c4c4, 10px 70px 0 #c4c4c4, 20px 70px 0 #ffffff, 221 | 30px 70px 0 #ffffff, 40px 70px 0 #323232, 50px 70px 0 #323232, 222 | 60px 70px 0 #dadada, 70px 70px 0 #ffffff, 80px 70px 0 #c4c4c4, 223 | 90px 70px 0 #c4c4c4, 100px 70px 0 #323232, 110px 70px 0 #ffffff, 224 | 120px 70px 0 #6e6e6e, 130px 70px 0 #6e6e6e, 140px 70px 0 #ffffff, 225 | 150px 70px 0 #eaeaea, 160px 70px 0 #eaeaea, 0 80px 0 #ffffff, 226 | 10px 80px 0 #dadada, 20px 80px 0 #c4c4c4, 30px 80px 0 #ffffff, 227 | 40px 80px 0 #dadada, 50px 80px 0 #dadada, 60px 80px 0 #ffffff, 228 | 70px 80px 0 #ffffff, 80px 80px 0 #6e6e6e, 90px 80px 0 #6e6e6e, 229 | 100px 80px 0 #eaeaea, 110px 80px 0 #eaeaea, 120px 80px 0 #dadada, 230 | 130px 80px 0 #dadada, 140px 80px 0 #c4c4c4, 150px 80px 0 #ffffff, 231 | 160px 80px 0 #ffffff, 0 90px 0 #dadada, 10px 90px 0 #ffffff, 232 | 20px 90px 0 #c4c4c4, 30px 90px 0 #c4c4c4, 40px 90px 0 #ffffff, 233 | 50px 90px 0 #dadada, 60px 90px 0 #6e6e6e, 70px 90px 0 #ffffff, 234 | 80px 90px 0 #6e6e6e, 90px 90px 0 #6e6e6e, 100px 90px 0 #eaeaea, 235 | 110px 90px 0 #ffffff, 120px 90px 0 #dadada, 130px 90px 0 #dadada, 236 | 140px 90px 0 #c4c4c4, 150px 90px 0 #ffffff, 160px 90px 0 #ffffff, 237 | 0 100px 0 #dadada, 10px 100px 0 #dadada, 20px 100px 0 #dadada, 238 | 30px 100px 0 #ffffff, 40px 100px 0 #6e6e6e, 50px 100px 0 #6e6e6e, 239 | 60px 100px 0 #323232, 70px 100px 0 #323232, 80px 100px 0 #323232, 240 | 90px 100px 0 #323232, 100px 100px 0 #ffffff, 110px 100px 0 #6e6e6e, 241 | 120px 100px 0 #c4c4c4, 130px 100px 0 #ffffff, 140px 100px 0 #eaeaea, 242 | 150px 100px 0 #ffffff, 160px 100px 0 #ffffff, 0 110px 0 #dadada, 243 | 10px 110px 0 #dadada, 20px 110px 0 #dadada, 30px 110px 0 #ffffff, 244 | 40px 110px 0 #6e6e6e, 50px 110px 0 #6e6e6e, 60px 110px 0 #ffffff, 245 | 70px 110px 0 #323232, 80px 110px 0 #ffffff, 90px 110px 0 #ffffff, 246 | 100px 110px 0 #6e6e6e, 110px 110px 0 #6e6e6e, 120px 110px 0 #c4c4c4, 247 | 130px 110px 0 #ffffff, 140px 110px 0 #eaeaea, 150px 110px 0 #ffffff, 248 | 160px 110px 0 #eaeaea, 0 120px 0 #dadada, 10px 120px 0 #ffffff, 249 | 20px 120px 0 #dadada, 30px 120px 0 #dadada, 40px 120px 0 #323232, 250 | 50px 120px 0 #ffffff, 60px 120px 0 #323232, 70px 120px 0 #323232, 251 | 80px 120px 0 #ffffff, 90px 120px 0 #323232, 100px 120px 0 #323232, 252 | 110px 120px 0 #323232, 120px 120px 0 #ffffff, 130px 120px 0 #dadada, 253 | 140px 120px 0 #ffffff, 150px 120px 0 #dadada, 160px 120px 0 #dadada, 254 | 180px 150px 0 #c4c4c4, 0 130px 0 #ffffff, 10px 130px 0 #dadada, 255 | 20px 130px 0 #ffffff, 30px 130px 0 #ffffff, 40px 130px 0 #323232, 256 | 50px 130px 0 #323232, 60px 130px 0 #ffffff, 70px 130px 0 #323232, 257 | 80px 130px 0 #323232, 90px 130px 0 #ffffff, 100px 130px 0 #323232, 258 | 110px 130px 0 #323232, 120px 130px 0 #dadada, 130px 130px 0 #dadada, 259 | 140px 130px 0 #ffffff, 150px 130px 0 #dadada, 160px 130px 0 #dadada, 260 | 0 140px 0 #c4c4c4, 10px 140px 0 #c4c4c4, 20px 140px 0 #dadada, 261 | 30px 140px 0 #dadada, 40px 140px 0 #ffffff, 50px 140px 0 #6e6e6e, 262 | 60px 140px 0 #ffffff, 70px 140px 0 #dadada, 80px 140px 0 #ffffff, 263 | 90px 140px 0 #eaeaea, 100px 140px 0 #c4c4c4, 110px 140px 0 #ffffff, 264 | 120px 140px 0 #dadada, 130px 140px 0 #dadada, 140px 140px 0 #ffffff, 265 | 150px 140px 0 #dadada, 160px 140px 0 #ffffff, 0 150px 0 #ffffff, 266 | 10px 150px 0 #c4c4c4, 20px 150px 0 #ffffff, 30px 150px 0 #dadada, 267 | 40px 150px 0 #6e6e6e, 50px 150px 0 #6e6e6e, 60px 150px 0 #ffffff, 268 | 70px 150px 0 #dadada, 80px 150px 0 #eaeaea, 90px 150px 0 #eaeaea, 269 | 100px 150px 0 #ffffff, 110px 150px 0 #ffffff, 120px 150px 0 #dadada, 270 | 130px 150px 0 #ffffff, 140px 150px 0 #dadada, 150px 150px 0 #ffffff, 271 | 160px 150px 0 #dadada, 180px 150px 0 #c4c4c4, 0 160px 0 #c4c4c4, 272 | 10px 160px 0 #c4c4c4, 10px 170px 0 #dadada, 10px 190px 0 #dadada, 273 | 20px 160px 0 #dadada, 20px 170px 0 #6e6e6e, 20px 180px 0 #6e6e6e, 274 | 30px 160px 0 #dadada, 30px 190px 0 #323232, 40px 160px 0 #c4c4c4, 275 | 40px 170px 0 #c4c4c4, 40px 200px 0 #c4c4c4, 50px 160px 0 #6e6e6e, 276 | 50px 190px 0 #6e6e6e, 60px 160px 0 #ffffff, 60px 170px 0 #c4c4c4, 277 | 70px 160px 0 #dadada, 70px 180px 0 #c4c4c4, 70px 200px 0 #c4c4c4, 278 | 80px 160px 0 #ffffff, 90px 160px 0 #eaeaea, 90px 190px 0 #323232, 279 | 100px 160px 0 #dadada, 110px 160px 0 #ffffff, 110px 170px 0 #c4c4c4, 280 | 120px 160px 0 #dadada, 120px 160px 0 #dadada, 120px 190px 0 #323232, 281 | 120px 190px 0 #dadada, 130px 160px 0 #dadada, 130px 170px 0 #6e6e6e, 282 | 1300px 180px 0 #6e6e6e, 140px 160px 0 #dadada, 140px 190px 0 #323232, 283 | 140px 160px 0 #eaeaea, 150px 160px 0 #dadada, 160px 160px 0 #ffffff, 284 | 165px 170px 0 #c4c4c4, 180px 180px 0 #323232; 285 | animation: explode 1000ms ease infinite; 286 | } 287 | 288 | @keyframes explode { 289 | 0% { 290 | opacity: 0; 291 | } 292 | 20% { 293 | opacity: 1; 294 | } 295 | 100% { 296 | opacity: 0; 297 | } 298 | } 299 | -------------------------------------------------------------------------------- /css/azel.css: -------------------------------------------------------------------------------- 1 | #azel-smilingface { 2 | position: relative; 3 | background-color: #ffc83d; 4 | width: 200px; 5 | height: 200px; 6 | border-radius: 50%; 7 | position: relative; 8 | border: 5px solid #ff8d0d; 9 | } 10 | 11 | #azel-smilingface::before { 12 | content: " "; 13 | position: absolute; 14 | z-index: 1; 15 | background-color: #ffc83d; 16 | width: 46px; 17 | height: 20px; 18 | top: 70px; 19 | left: 36px; 20 | border-radius: 50%; 21 | box-shadow: #ffc83d 80px 0px 0px 0px, #654307 80px -11px 0px 0px, 22 | #654307 0px -11px 0px 0px, #ff8d0d -15px 36px 22px 5px, 23 | #ff8d0d 105px 36px 22px 5px; 24 | } 25 | 26 | #azel-smilingface::after { 27 | content: " "; 28 | position: absolute; 29 | width: 50px; 30 | height: 50px; 31 | right: 68px; 32 | bottom: 28px; 33 | border: 8px solid #654307; 34 | border-radius: 30%; 35 | border-bottom-left-radius: 40px; 36 | border-top-color: transparent; 37 | border-right-color: transparent; 38 | transform: rotate(-45deg); 39 | } 40 | 41 | #azel-hamtaro { 42 | position: relative; 43 | top: -20px; 44 | left: -5px; 45 | background-color: #000; 46 | height: 5px; 47 | width: 5px; 48 | webkit-animation: azel-hamtaro 4s; 49 | -moz-animation: azel-hamtaro 4s; 50 | -ms-animation: azel-hamtaro 4s; 51 | -o-animation: azel-hamtaro 4s; 52 | animation: azel-hamtaro 4s infinite; 53 | } 54 | 55 | @keyframes azel-hamtaro { 56 | 0% { 57 | box-shadow: #000 5px 0px 0px 0px, #000 10px 0px 0px 0px, 58 | #000 15px 0px 0px 0px, #000 60px 0px 0px 0px, #000 65px 0px 0px 0px, 59 | #000 70px 0px 0px 0px, #000 75px 0px 0px 0px, #000 -5px 5px 0px 0px, 60 | #fd7a41 0px 5px 0px 0px, #fd7a41 5px 5px 0px 0px, #fd7a41 10px 5px 0px 0px, 61 | #fd7a41 15px 5px 0px 0px, #000 20px 5px 0px 0px, #000 55px 5px 0px 0px, 62 | #fd7a41 60px 5px 0px 0px, #fd7a41 65px 5px 0px 0px, 63 | #fd7a41 70px 5px 0px 0px, #fd7a41 75px 5px 0px 0px, #000 80px 5px 0px 0px, 64 | #000 -10px 10px 0px 0px, #fd7a41 -5px 10px 0px 0px, 65 | #fd7a41 0px 10px 0px 0px, #fd7a41 5px 10px 0px 0px, 66 | #fd7a41 10px 10px 0px 0px, #fd7a41 15px 10px 0px 0px, 67 | #fd7a41 20px 10px 0px 0px, #000 25px 10px 0px 0px, #000 50px 10px 0px 0px, 68 | #fd7a41 55px 10px 0px 0px, #fd7a41 55px 10px 0px 0px, 69 | #fd7a41 60px 10px 0px 0px, #fd7a41 65px 10px 0px 0px, 70 | #fd7a41 70px 10px 0px 0px, #fd7a41 75px 10px 0px 0px, 71 | #fd7a41 80px 10px 0px 0px, #000 85px 10px 0px 0px, #000 -15px 15px 0px 0px, 72 | #fd7a41 -10px 15px 0px 0px, #000 -5px 15px 0px 0px, #000 0px 15px 0px 0px, 73 | #fd7a41 5px 15px 0px 0px, #fd7a41 10px 15px 0px 0px, 74 | #fd7a41 15px 15px 0px 0px, #fd7a41 20px 15px 0px 0px, 75 | #000 25px 15px 0px 0px, #000 30px 15px 0px 0px, #000 35px 15px 0px 0px, 76 | #000 40px 15px 0px 0px, #000 45px 15px 0px 0px, #000 50px 15px 0px 0px, 77 | #000 55px 15px 0px 0px, #fd7a41 60px 15px 0px 0px, 78 | #fd7a41 65px 15px 0px 0px, #fd7a41 70px 15px 0px 0px, 79 | #fd7a41 75px 15px 0px 0px, #000 80px 15px 0px 0px, 80 | #fd7a41 85px 15px 0px 0px, #000 90px 15px 0px 0px, #000 -15px 20px 0px 0px, 81 | #000 5px 20px 0px 0px, #fd7a41 10px 20px 0px 0px, 82 | #fd7a41 15px 20px 0px 0px, #fd7a41 20px 20px 0px 0px, 83 | #fd7a41 25px 20px 0px 0px, #fd7a41 30px 20px 0px 0px, 84 | #fd7a41 35px 20px 0px 0px, #fd7a41 40px 20px 0px 0px, 85 | #fd7a41 45px 20px 0px 0px, #fd7a41 50px 20px 0px 0px, 86 | #fd7a41 55px 20px 0px 0px, #fd7a41 60px 20px 0px 0px, 87 | #fd7a41 65px 20px 0px 0px, #fd7a41 70px 20px 0px 0px, 88 | #000 75px 20px 0px 0px, #fd7a41 85px 20px 0px 0px, #000 90px 20px 0px 0px, 89 | #000 -15px 25px 0px 0px, #000 5px 25px 0px 0px, #fd7a41 10px 25px 0px 0px, 90 | #fd7a41 15px 25px 0px 0px, #fd7a41 20px 25px 0px 0px, 91 | #fd7a41 25px 25px 0px 0px, #fd7a41 30px 25px 0px 0px, 92 | #fd7a41 35px 25px 0px 0px, #fd7a41 40px 25px 0px 0px, 93 | #fd7a41 45px 25px 0px 0px, #fd7a41 50px 25px 0px 0px, 94 | #fd7a41 55px 25px 0px 0px, #fd7a41 60px 25px 0px 0px, 95 | #fd7a41 65px 25px 0px 0px, #fd7a41 70px 25px 0px 0px, 96 | #000 75px 25px 0px 0px, #fd7a41 85px 25px 0px 0px, #000 90px 25px 0px 0px, 97 | #000 -15px 30px 0px 0px, #fd7a41 -10px 30px 0px 0px, 98 | #fd7a41 0px 30px 0px 0px, #fd7a41 30px 30px 0px 0px, 99 | #fd7a41 35px 30px 0px 0px, #fd7a41 40px 30px 0px 0px, 100 | #fd7a41 45px 30px 0px 0px, #fd7a41 50px 30px 0px 0px, 101 | #fd7a41 55px 30px 0px 0px, #fd7a41 60px 30px 0px 0px, 102 | #fd7a41 65px 30px 0px 0px, #fd7a41 70px 30px 0px 0px, 103 | #fd7a41 75px 30px 0px 0px, #000 80px 30px 0px 0px, 104 | #fd7a41 85px 30px 0px 0px, #000 90px 30px 0px 0px, #000 -10px 35px 0px 0px, 105 | #000 -5px 35px 0px 0px, #fd7a41 45px 35px 0px 0px, 106 | #fd7a41 50px 35px 0px 0px, #fd7a41 55px 35px 0px 0px, 107 | #fd7a41 60px 35px 0px 0px, #000 65px 35px 0px 0px, 108 | #fd7a41 70px 35px 0px 0px, #fd7a41 75px 35px 0px 0px, 109 | #000 80px 35px 0px 0px, #000 85px 35px 0px 0px, #000 -5px 40px 0px 0px, 110 | #000 15px 40px 0px 0px, #000 20px 40px 0px 0px, #000 25px 40px 0px 0px, 111 | #fd7a41 55px 40px 0px 0px, #fd7a41 60px 40px 0px 0px, 112 | #000 65px 40px 0px 0px, #000 70px 40px 0px 0px, #000 75px 40px 0px 0px, 113 | #000 85px 40px 0px 0px, #000 -5px 45px 0px 0px, #000 10px 45px 0px 0px, 114 | #000 15px 45px 0px 0px, #fff 20px 45px 0px 0px, #fff 25px 45px 0px 0px, 115 | #000 30px 45px 0px 0px, #000 60px 45px 0px 0px, #000 75px 45px 0px 0px, 116 | #000 80px 45px 0px 0px, #000 85px 45px 0px 0px, #000 -5px 50px 0px 0px, 117 | #000 10px 50px 0px 0px, #000 15px 50px 0px 0px, #fff 25px 50px 0px 0px, 118 | #000 30px 50px 0px 0px, #000 60px 50px 0px 0px, #000 75px 50px 0px 0px, 119 | #000 80px 50px 0px 0px, #fd7a41 85px 50px 0px 0px, #000 90px 50px 0px 0px, 120 | #000 -10px 55px 0px 0px, #000 10px 55px 0px 0px, #000 15px 55px 0px 0px, 121 | #000 20px 55px 0px 0px, #000 25px 55px 0px 0px, #000 30px 55px 0px 0px, 122 | #000 60px 55px 0px 0px, #000 65px 55px 0px 0px, #000 70px 55px 0px 0px, 123 | #000 75px 55px 0px 0px, #000 80px 55px 0px 0px, #000 90px 55px 0px 0px, 124 | #000 -15px 60px 0px 0px, #000 -10px 60px 0px 0px, #000 -5px 60px 0px 0px, 125 | #000 0px 60px 0px 0px, #fd7a41 5px 60px 0px 0px, #000 15px 60px 0px 0px, 126 | #000 20px 60px 0px 0px, #000 25px 60px 0px 0px, #fff 30px 60px 0px 0px, 127 | #fd7a41 45px 60px 0px 0px, #000 50px 60px 0px 0px, #000 65px 60px 0px 0px, 128 | #000 70px 60px 0px 0px, #000 75px 60px 0px 0px, #fd7a41 85px 60px 0px 0px, 129 | #000 90px 60px 0px 0px, #000 95px 60px 0px 0px, #000 100px 60px 0px 0px, 130 | #000 -10px 65px 0px 0px, #fd7a41 -5px 65px 0px 0px, #000 90px 65px 0px 0px, 131 | #000 -10px 70px 0px 0px, #000 -5px 70px 0px 0px, #000 0px 70px 0px 0px, 132 | #fd7a41 5px 70px 0px 0px, #fd7a41 80px 70px 0px 0px, 133 | #000 85px 70px 0px 0px, #000 90px 70px 0px 0px, #000 95px 70px 0px 0px, 134 | #000 -15px 75px 0px 0px, #000 -10px 75px 0px 0px, #000 35px 75px 0px 0px, 135 | #000 50px 75px 0px 0px, #000 65px 75px 0px 0px, #fd7a41 85px 75px 0px 0px, 136 | #000 90px 75px 0px 0px, #000 -10px 80px 0px 0px, #fd7a41 -5px 80px 0px 0px, 137 | #fd7a41 0px 80px 0px 0px, #000 40px 80px 0px 0px, #000 45px 80px 0px 0px, 138 | #000 55px 80px 0px 0px, #000 60px 80px 0px 0px, #000 85px 80px 0px 0px, 139 | #000 -10px 85px 0px 0px, #fd7a41 -5px 85px 0px 0px, 140 | #fd7a41 0px 85px 0px 0px, #fd7a41 5px 85px 0px 0px, 141 | #fd7a41 10px 85px 0px 0px, #000 80px 85px 0px 0px, #000 85px 85px 0px 0px, 142 | #000 -15px 90px 0px 0px, #000 -10px 90px 0px 0px, 143 | #fd7a41 -5px 90px 0px 0px, #fd7a41 0px 90px 0px 0px, 144 | #000 25px 90px 0px 0px, #000 65px 90px 0px 0px, #fd7a41 80px 90px 0px 0px, 145 | #000 85px 90px 0px 0px, #000 -20px 95px 0px 0px, 146 | #fd7a41 -15px 95px 0px 0px, #000 -10px 95px 0px 0px, 147 | #fd7a41 -5px 95px 0px 0px, #fd7a41 20px 95px 0px 0px, 148 | #000 30px 95px 0px 0px, #000 60px 95px 0px 0px, #000 85px 95px 0px 0px, 149 | #000 -15px 100px 0px 0px, #000 -10px 100px 0px 0px, 150 | #000 15px 100px 0px 0px, #fd7a41 20px 100px 0px 0px, 151 | #fd7a41 25px 100px 0px 0px, #000 30px 100px 0px 0px, 152 | #000 60px 100px 0px 0px, #000 75px 100px 0px 0px, #000 85px 100px 0px 0px, 153 | #000 -10px 105px 0px 0px, #000 -5px 105px 0px 0px, #000 20px 105px 0px 0px, 154 | #000 25px 105px 0px 0px, #000 65px 105px 0px 0px, #000 70px 105px 0px 0px, 155 | #000 80px 105px 0px 0px, #000 -5px 110px 0px 0px, #000 0px 110px 0px 0px, 156 | #fd7a41 5px 110px 0px 0px, #000 10px 110px 0px 0px, 157 | #fd7a41 25px 110px 0px 0px, #fd7a41 30px 110px 0px 0px, 158 | #fd7a41 35px 110px 0px 0px, #fd7a41 40px 110px 0px 0px, 159 | #fd7a41 45px 110px 0px 0px, #fd7a41 70px 110px 0px 0px, 160 | #000 75px 110px 0px 0px, #000 -5px 115px 0px 0px, 161 | #fd7a41 0px 115px 0px 0px, #fd7a41 5px 115px 0px 0px, 162 | #fd7a41 10px 115px 0px 0px, #000 15px 115px 0px 0px, 163 | #000 20px 115px 0px 0px, #000 25px 115px 0px 0px, #000 30px 115px 0px 0px, 164 | #000 35px 115px 0px 0px, #000 40px 115px 0px 0px, #000 45px 115px 0px 0px, 165 | #000 50px 115px 0px 0px, #000 55px 115px 0px 0px, #000 60px 115px 0px 0px, 166 | #fd7a41 65px 115px 0px 0px, #fd7a41 70px 115px 0px 0px, 167 | #fd7a41 75px 115px 0px 0px, #000 80px 115px 0px 0px, 168 | #000 0px 120px 0px 0px, #000 5px 120px 0px 0px, #000 10px 120px 0px 0px, 169 | #000 65px 120px 0px 0px, #000 70px 120px 0px 0px, #000 75px 120px 0px 0px; 170 | } 171 | 50% { 172 | } 173 | 100% { 174 | box-shadow: #000 5px 0px 0px 0px, #000 10px 0px 0px 0px, 175 | #000 15px 0px 0px 0px, #000 60px 0px 0px 0px, #000 65px 0px 0px 0px, 176 | #000 70px 0px 0px 0px, #000 75px 0px 0px 0px, #000 -5px 5px 0px 0px, 177 | #fd7a41 0px 5px 0px 0px, #fd7a41 5px 5px 0px 0px, #fd7a41 10px 5px 0px 0px, 178 | #fd7a41 15px 5px 0px 0px, #000 20px 5px 0px 0px, #000 55px 5px 0px 0px, 179 | #fd7a41 60px 5px 0px 0px, #fd7a41 65px 5px 0px 0px, 180 | #fd7a41 70px 5px 0px 0px, #fd7a41 75px 5px 0px 0px, #000 80px 5px 0px 0px, 181 | #000 -10px 10px 0px 0px, #fd7a41 -5px 10px 0px 0px, 182 | #fd7a41 0px 10px 0px 0px, #fd7a41 5px 10px 0px 0px, 183 | #fd7a41 10px 10px 0px 0px, #fd7a41 15px 10px 0px 0px, 184 | #fd7a41 20px 10px 0px 0px, #000 25px 10px 0px 0px, #000 50px 10px 0px 0px, 185 | #fd7a41 55px 10px 0px 0px, #fd7a41 55px 10px 0px 0px, 186 | #fd7a41 60px 10px 0px 0px, #fd7a41 65px 10px 0px 0px, 187 | #fd7a41 70px 10px 0px 0px, #fd7a41 75px 10px 0px 0px, 188 | #fd7a41 80px 10px 0px 0px, #000 85px 10px 0px 0px, #000 -15px 15px 0px 0px, 189 | #fd7a41 -10px 15px 0px 0px, #000 -5px 15px 0px 0px, #000 0px 15px 0px 0px, 190 | #fd7a41 5px 15px 0px 0px, #fd7a41 10px 15px 0px 0px, 191 | #fd7a41 15px 15px 0px 0px, #fd7a41 20px 15px 0px 0px, 192 | #000 25px 15px 0px 0px, #000 30px 15px 0px 0px, #000 35px 15px 0px 0px, 193 | #000 40px 15px 0px 0px, #000 45px 15px 0px 0px, #000 50px 15px 0px 0px, 194 | #000 55px 15px 0px 0px, #fd7a41 60px 15px 0px 0px, 195 | #fd7a41 65px 15px 0px 0px, #fd7a41 70px 15px 0px 0px, 196 | #fd7a41 75px 15px 0px 0px, #000 80px 15px 0px 0px, 197 | #fd7a41 85px 15px 0px 0px, #000 90px 15px 0px 0px, #000 -15px 20px 0px 0px, 198 | #000 5px 20px 0px 0px, #fd7a41 10px 20px 0px 0px, 199 | #fd7a41 15px 20px 0px 0px, #fd7a41 20px 20px 0px 0px, 200 | #fd7a41 25px 20px 0px 0px, #fd7a41 30px 20px 0px 0px, 201 | #fd7a41 35px 20px 0px 0px, #fd7a41 40px 20px 0px 0px, 202 | #fd7a41 45px 20px 0px 0px, #fd7a41 50px 20px 0px 0px, 203 | #fd7a41 55px 20px 0px 0px, #fd7a41 60px 20px 0px 0px, 204 | #fd7a41 65px 20px 0px 0px, #fd7a41 70px 20px 0px 0px, 205 | #000 75px 20px 0px 0px, #fd7a41 85px 20px 0px 0px, #000 90px 20px 0px 0px, 206 | #000 -15px 25px 0px 0px, #000 5px 25px 0px 0px, #fd7a41 10px 25px 0px 0px, 207 | #fd7a41 15px 25px 0px 0px, #fd7a41 20px 25px 0px 0px, 208 | #fd7a41 25px 25px 0px 0px, #fd7a41 30px 25px 0px 0px, 209 | #fd7a41 35px 25px 0px 0px, #fd7a41 40px 25px 0px 0px, 210 | #fd7a41 45px 25px 0px 0px, #fd7a41 50px 25px 0px 0px, 211 | #fd7a41 55px 25px 0px 0px, #fd7a41 60px 25px 0px 0px, 212 | #fd7a41 65px 25px 0px 0px, #fd7a41 70px 25px 0px 0px, 213 | #000 75px 25px 0px 0px, #fd7a41 85px 25px 0px 0px, #000 90px 25px 0px 0px, 214 | #000 -15px 30px 0px 0px, #fd7a41 -10px 30px 0px 0px, 215 | #fd7a41 0px 30px 0px 0px, #fd7a41 30px 30px 0px 0px, 216 | #fd7a41 35px 30px 0px 0px, #fd7a41 40px 30px 0px 0px, 217 | #fd7a41 45px 30px 0px 0px, #fd7a41 50px 30px 0px 0px, 218 | #fd7a41 55px 30px 0px 0px, #fd7a41 60px 30px 0px 0px, 219 | #fd7a41 65px 30px 0px 0px, #fd7a41 70px 30px 0px 0px, 220 | #fd7a41 75px 30px 0px 0px, #000 80px 30px 0px 0px, 221 | #fd7a41 85px 30px 0px 0px, #000 90px 30px 0px 0px, #000 -10px 35px 0px 0px, 222 | #000 -5px 35px 0px 0px, #fd7a41 45px 35px 0px 0px, 223 | #fd7a41 50px 35px 0px 0px, #fd7a41 55px 35px 0px 0px, 224 | #fd7a41 60px 35px 0px 0px, #000 65px 35px 0px 0px, 225 | #fd7a41 70px 35px 0px 0px, #fd7a41 75px 35px 0px 0px, 226 | #000 80px 35px 0px 0px, #000 85px 35px 0px 0px, #000 -5px 40px 0px 0px, 227 | #000 15px 40px 0px 0px, #000 20px 40px 0px 0px, #fff 25px 40px 0px 0px, 228 | #fd7a41 55px 40px 0px 0px, #fd7a41 60px 40px 0px 0px, 229 | #000 65px 40px 0px 0px, #000 70px 40px 0px 0px, #000 75px 40px 0px 0px, 230 | #000 85px 40px 0px 0px, #000 -5px 45px 0px 0px, #000 10px 45px 0px 0px, 231 | #000 15px 45px 0px 0px, #000 20px 45px 0px 0px, #000 25px 45px 0px 0px, 232 | #fff 30px 45px 0px 0px, #000 60px 45px 0px 0px, #000 75px 45px 0px 0px, 233 | #000 80px 45px 0px 0px, #000 85px 45px 0px 0px, #000 -5px 50px 0px 0px, 234 | #fff 10px 50px 0px 0px, #fff 15px 50px 0px 0px, #000 25px 50px 0px 0px, 235 | #000 30px 50px 0px 0px, #000 60px 50px 0px 0px, #000 75px 50px 0px 0px, 236 | #000 80px 50px 0px 0px, #fd7a41 85px 50px 0px 0px, #000 90px 50px 0px 0px, 237 | #000 -10px 55px 0px 0px, #fff 10px 55px 0px 0px, #fff 15px 55px 0px 0px, 238 | #fff 20px 55px 0px 0px, #fff 25px 55px 0px 0px, #000 30px 55px 0px 0px, 239 | #000 60px 55px 0px 0px, #000 65px 55px 0px 0px, #000 70px 55px 0px 0px, 240 | #000 75px 55px 0px 0px, #000 80px 55px 0px 0px, #000 90px 55px 0px 0px, 241 | #000 -15px 60px 0px 0px, #000 -10px 60px 0px 0px, #000 -5px 60px 0px 0px, 242 | #000 0px 60px 0px 0px, #fd7a41 5px 60px 0px 0px, #fff 15px 60px 0px 0px, 243 | #fff 20px 60px 0px 0px, #fff 25px 60px 0px 0px, #fff 30px 60px 0px 0px, 244 | #fd7a41 45px 60px 0px 0px, #000 50px 60px 0px 0px, #000 65px 60px 0px 0px, 245 | #000 70px 60px 0px 0px, #000 75px 60px 0px 0px, #fd7a41 85px 60px 0px 0px, 246 | #000 90px 60px 0px 0px, #000 95px 60px 0px 0px, #000 100px 60px 0px 0px, 247 | #000 -10px 65px 0px 0px, #fd7a41 -5px 65px 0px 0px, #000 90px 65px 0px 0px, 248 | #000 -10px 70px 0px 0px, #000 -5px 70px 0px 0px, #000 0px 70px 0px 0px, 249 | #fd7a41 5px 70px 0px 0px, #fd7a41 80px 70px 0px 0px, 250 | #000 85px 70px 0px 0px, #000 90px 70px 0px 0px, #000 95px 70px 0px 0px, 251 | #000 -15px 75px 0px 0px, #000 -10px 75px 0px 0px, #000 35px 75px 0px 0px, 252 | #000 50px 75px 0px 0px, #000 65px 75px 0px 0px, #fd7a41 85px 75px 0px 0px, 253 | #000 90px 75px 0px 0px, #000 -10px 80px 0px 0px, #fd7a41 -5px 80px 0px 0px, 254 | #fd7a41 0px 80px 0px 0px, #000 40px 80px 0px 0px, #000 45px 80px 0px 0px, 255 | #000 55px 80px 0px 0px, #000 60px 80px 0px 0px, #000 85px 80px 0px 0px, 256 | #000 -10px 85px 0px 0px, #fd7a41 -5px 85px 0px 0px, 257 | #fd7a41 0px 85px 0px 0px, #fd7a41 5px 85px 0px 0px, 258 | #fd7a41 10px 85px 0px 0px, #000 80px 85px 0px 0px, #000 85px 85px 0px 0px, 259 | #000 -15px 90px 0px 0px, #000 -10px 90px 0px 0px, 260 | #fd7a41 -5px 90px 0px 0px, #fd7a41 0px 90px 0px 0px, 261 | #000 25px 90px 0px 0px, #000 65px 90px 0px 0px, #fd7a41 80px 90px 0px 0px, 262 | #000 85px 90px 0px 0px, #000 -20px 95px 0px 0px, 263 | #fd7a41 -15px 95px 0px 0px, #000 -10px 95px 0px 0px, 264 | #fd7a41 -5px 95px 0px 0px, #fd7a41 20px 95px 0px 0px, 265 | #000 30px 95px 0px 0px, #000 60px 95px 0px 0px, #000 85px 95px 0px 0px, 266 | #000 -15px 100px 0px 0px, #000 -10px 100px 0px 0px, 267 | #000 15px 100px 0px 0px, #fd7a41 20px 100px 0px 0px, 268 | #fd7a41 25px 100px 0px 0px, #000 30px 100px 0px 0px, 269 | #000 60px 100px 0px 0px, #000 75px 100px 0px 0px, #000 85px 100px 0px 0px, 270 | #000 -10px 105px 0px 0px, #000 -5px 105px 0px 0px, #000 20px 105px 0px 0px, 271 | #000 25px 105px 0px 0px, #000 65px 105px 0px 0px, #000 70px 105px 0px 0px, 272 | #000 80px 105px 0px 0px, #000 -5px 110px 0px 0px, #000 0px 110px 0px 0px, 273 | #fd7a41 5px 110px 0px 0px, #000 10px 110px 0px 0px, 274 | #fd7a41 25px 110px 0px 0px, #fd7a41 30px 110px 0px 0px, 275 | #fd7a41 35px 110px 0px 0px, #fd7a41 40px 110px 0px 0px, 276 | #fd7a41 45px 110px 0px 0px, #fd7a41 70px 110px 0px 0px, 277 | #000 75px 110px 0px 0px, #000 -5px 115px 0px 0px, 278 | #fd7a41 0px 115px 0px 0px, #fd7a41 5px 115px 0px 0px, 279 | #fd7a41 10px 115px 0px 0px, #000 15px 115px 0px 0px, 280 | #000 20px 115px 0px 0px, #000 25px 115px 0px 0px, #000 30px 115px 0px 0px, 281 | #000 35px 115px 0px 0px, #000 40px 115px 0px 0px, #000 45px 115px 0px 0px, 282 | #000 50px 115px 0px 0px, #000 55px 115px 0px 0px, #000 60px 115px 0px 0px, 283 | #fd7a41 65px 115px 0px 0px, #fd7a41 70px 115px 0px 0px, 284 | #fd7a41 75px 115px 0px 0px, #000 80px 115px 0px 0px, 285 | #000 0px 120px 0px 0px, #000 5px 120px 0px 0px, #000 10px 120px 0px 0px, 286 | #000 65px 120px 0px 0px, #000 70px 120px 0px 0px, #000 75px 120px 0px 0px; 287 | } 288 | } 289 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | EmojiDIV 10 | 11 | 12 | 13 | 14 |
15 |

Emoji DIV

16 |

17 | A Hacktoberfest Project. (inspired by 18 | a.single.div and 19 | @hj_chen) 20 |

21 |
22 |
23 |
24 |

GUIDELINES:

25 |
    26 |
  1. 27 | Fork this repository. 28 |
    2. 29 |
  2. Create a div in index.html and css file using your GitHub username name as the ID.
    3. 30 |
  3. Select an emoji to make.
    4. 31 |
  4. 32 | Write a single div representation of your emoji. You can get inspiration from here. 34 |
    5. 35 |
  5. 36 | Create a branch, push your work and 37 | create a pull request. 38 |
    6. 39 |
  6. Most importantly, enjoy!
    7. 40 |
41 |
42 |
43 |

Cheat Sheet:

44 |
    45 |
  1. 46 | Create a branch:
    47 | git checkout -b {branch-name} 48 |
    2. 49 |
  2. 50 | Commit a branch:
    51 | git add .
    52 | git commit -m "add an emoji" 53 |     54 |
    3. 55 |
  3. 56 | Push a branch to remote:
    57 | git push origin {branch-name} 58 |
    4. 59 |
60 |
61 |
62 | 63 |
64 |
65 | Copy the div with class emoji and start drawing your chosen emoji with 66 | CSS! Don't forget to add your name! 67 |
68 | 69 | 70 |
71 |
72 |

73 | by 74 | @kimberrypi 75 |

76 |
77 | 78 |
79 |
80 |

81 | by 82 | @matthewesp 83 |

84 |
85 | 86 |
87 |
88 |

89 | by 90 | @quintanilhaedu 91 |

92 |
93 | 94 |
95 |
96 |

97 | by 98 | @codentacos 99 |

100 |
101 | 102 |
103 |
104 |

105 | by 106 | Botticelli13 107 |

108 |
109 | 110 |
111 |
112 |

113 | by 114 | @sanderjson 115 |

116 |
117 | 118 |
119 |
120 |

121 | by 122 | @jmsgbrl__ 123 |

124 |
125 | 126 |
127 |
128 |

129 | by 130 | @vitebo 131 |

132 |
133 | 134 |
135 |
136 |

137 | by 138 | @rijalpokez 139 |

140 |
141 | 142 |
143 |
144 |

145 | by 146 | @neetigyachahar 147 |

148 |
149 | 150 |
151 |
152 |

153 | by 154 | @CodeMeNatalie 155 |

156 |
157 | 158 |
159 |
160 |

161 | by 162 | @olamideaboyeji 163 |

164 |
165 | 166 |
167 |
168 |

169 | by 170 | @movingtothesun 171 |

172 |
173 | 174 |
175 |
176 |

177 | by 178 | @albertodeago 179 |

180 |
181 | 182 |
183 |
184 |

185 | by 186 | @kuroyza 187 |

188 |
189 | 190 |
191 |
192 |

193 | by 194 | @bokukage 195 |

196 |
197 | 198 |
199 |
200 |

201 | by 202 | @tzyinc 203 |

204 |
205 | 206 |
207 |
208 |

209 | by 210 | @vancass 211 |

212 |
213 | 214 |
215 |
216 |

217 | by 218 | @kate_gamo 219 |

220 |
221 | 222 |
223 |
224 |

225 | by 226 | @dugtrio91 227 |

228 |
229 | 230 |
231 |
232 |

233 | by 234 | @meowlivia 235 |

236 |
237 | 238 |
239 |
240 |

241 | by 242 | @matheusagcosta 243 |

244 |
245 | 246 |
247 |
248 |

249 | by 250 | @bokukage 251 |

252 |
253 | 254 |
255 |
256 |

257 | by 258 | @artoliukkonen 259 |

260 |
261 | 262 |
263 |
264 |

265 | by 266 | @jacobtyq 267 |

268 |
269 | 270 |
271 |
272 |

273 | CSS emoji by 274 | @amyegan 275 |

276 |
277 | 278 |
279 |
280 |

281 | by 282 | @PaulLiamAG 283 |

284 |
285 | 286 |
287 |
288 |

289 | by 290 | @majse_ 291 |

292 |
293 | 294 |
295 |
296 |

297 | by 298 | @Luispinedajr 299 |

300 |
301 | 302 |
303 |
304 |

305 | by 306 | @mplb0 307 |

308 |
309 | 310 |
311 |
312 |

313 | by 314 | @kimberrypi 315 |

316 |
317 | 318 |
319 |
320 |

321 | by 322 | @cayeborreo 323 |

324 |
325 | 326 |
327 |
328 |

329 | by 330 | @azelalynetan 331 |

332 |
333 | 334 |
335 |
336 |

337 | by 338 | @cristiand391 339 |

340 |
341 | 342 |
343 |
344 |

345 | by 346 | @phillipknight 347 |

348 |
349 | 350 |
351 |
352 |

353 | by 354 | @gabszypogi 355 |

356 |
357 | 358 |
359 |
360 |

361 | by 362 | @porchee 363 |

364 |
365 | 366 |
367 |
368 |

369 | by 370 | @derekramsey12 371 |

372 |
373 | 374 |
375 |
376 |

377 | by 378 | @porchee 379 |

380 |
381 | 382 |
383 |
384 |

385 | by 386 | @novalaurente 387 |

388 |
389 | 390 |
391 |
392 |

393 | by 394 | @kjcpaas 395 |

396 |
397 | 398 |
399 |
400 |

401 | by 402 | @biibischan 403 |

404 |
405 | 406 |
407 |
408 |

409 | by 410 | @sanjpareek 411 |

412 |
413 |
414 |
415 |

416 | by 417 | 418 | @JD235 419 | 420 |

421 |
422 | 423 |
424 |
425 |

426 | by 427 | @michieriffic 428 |

429 |
430 | 431 |
432 |
433 |

434 | by 435 | @azelalynetan 436 |

437 |
438 | 439 |
440 |
441 |

442 | by 443 | @Ns 444 |

445 |
446 | 447 |
448 |
449 |

450 | by 451 | @garciajasminejoy 452 |

453 |
454 | 455 |
456 |
457 |

458 | by 459 | @maczokni 460 |

461 |
462 | 463 |
464 |
465 |

466 | by 467 | @grjw 468 |

469 |
470 | 471 |
472 |
473 |

474 | by 475 | @mrcaste 476 |

477 |
478 | 479 |
480 |
481 |

482 | by 483 | @louierosero 484 |

485 |
486 | 487 |
488 |
489 |

490 | by 491 | @rmasianjr 492 |

493 |
494 | 495 |
496 |
497 |

498 | CSS emoji by 499 | @dominus_kelvin 500 |

501 |
502 | 503 |
504 |
505 |

506 | by 507 | @ch_akanksha 508 |

509 |
510 |
511 |
512 |

513 | by 514 | @Jomar2019 515 |

516 |
517 |
518 |
519 |

520 | by 521 | @valdeezzee 522 |

523 |
524 | 525 |
526 |
527 |

528 | CSS emoji by {@designmoredata} 529 |

530 |
531 | 532 |
533 |
534 |

535 | by 536 | @GrsnChml 537 |

538 |
539 | 540 |
541 |
542 |

543 | by 544 | @jojonarte 545 |

546 |
547 |
548 |
549 |

550 | CSS emoji by 551 | @InsiyaK110 552 |

553 |
554 |
555 |
556 |

557 | by 558 | @SushilBajracharya01 559 |

560 |
561 | 562 |
563 |
564 |

565 | by 566 | felipprodrigues 567 |

568 |
569 | 570 |
571 |
572 |

573 | CSS emoji by 574 | @Frinlanz 575 |

576 |
577 | 578 |
579 |
580 |

581 | by 582 | 583 | @sagar-pardhi 584 |

585 |
586 | 587 |
588 |
589 |

590 | CSS emoji by 591 | @aliheikal 592 |

593 |
594 | 595 |
596 |
597 |

598 | by 599 | @caroldestreza 600 |

601 |
602 | 603 |
604 |
605 |

606 | Chopsticks 🥢 by 607 | @ChintanPalan 608 |

609 |
610 | 611 |
612 |
613 |

614 | CSS emoji by 615 | @charlygg 616 |

617 |
618 | 619 |
620 |
621 |
622 |
623 |

624 | CSS emoji by 625 | @anjlapastora 626 |

627 | 628 |
629 |
630 |

631 | by 632 | @jennifer 633 |

634 |
635 | 636 |
637 |
638 |

639 | by 640 | @shrobbins 641 |

642 |
643 | 644 |
645 |
646 |

647 | CSS emoji by 648 | @jiannejose 649 |

650 |
651 | 652 |
653 |
654 |

655 | CSS emoji by 656 | @jiannejose 657 |

658 |
659 | 660 |
661 |
662 |

663 | CSS emoji by 664 | @jiannejose 665 |

666 |
667 | 668 |
669 |
670 |

671 | CSS emoji by 672 | @AraozYazmin 673 |

674 |
675 | 676 |
677 |
678 |
679 |
680 |

CSS emoji by 681 | @edu-matic

682 |
683 | 684 |
685 |
686 |
687 |

CSS emoji by 688 | @mluis93

689 |
690 | 691 |
692 |
693 |

694 | by 695 | @jyotiman 696 |

697 |
698 | 699 |
700 |
701 |

702 | CSS emoji by 703 | @DeviousLab 704 |

705 |
706 | 707 |
708 |
709 |

710 | by 711 | @thewhiteswan 712 |

713 |
714 | 715 |
716 |
717 |

718 | by 719 | @al-fin 720 |

721 |
722 | 723 |
724 |
725 |

726 | by 727 | @jcardoz 728 |

729 |
730 | 731 | 732 | 733 | 737 | 738 |
739 | 740 | 741 | -------------------------------------------------------------------------------- /css/jennifer.css: -------------------------------------------------------------------------------- 1 | #jennifer { 2 | position: relative; 3 | height: 5px; 4 | width: 5px; 5 | top: -50px; 6 | left: -100px; 7 | box-shadow: 195px 5px 0 0 #000000, 200px 5px 0 0 #000000, 8 | 185px 10px 0 0 #000000, 190px 10px 0 0 #000000, 195px 10px 0 0 #000000, 9 | 200px 10px 0 0 #000000, 175px 15px 0 0 #000000, 180px 15px 0 0 #000000, 10 | 185px 15px 0 0 #000000, 190px 15px 0 0 #000000, 195px 15px 0 0 #000000, 11 | 200px 15px 0 0 #000000, 170px 20px 0 0 #000000, 175px 20px 0 0 #ffc107, 12 | 180px 20px 0 0 #ffc107, 185px 20px 0 0 #ffc107, 190px 20px 0 0 #000000, 13 | 195px 20px 0 0 #000000, 200px 20px 0 0 #000000, 35px 25px 0 0 #000000, 14 | 40px 25px 0 0 #000000, 45px 25px 0 0 #000000, 50px 25px 0 0 #000000, 15 | 55px 25px 0 0 #000000, 60px 25px 0 0 #000000, 165px 25px 0 0 #000000, 16 | 170px 25px 0 0 #ffc107, 175px 25px 0 0 #ffc107, 180px 25px 0 0 #ffc107, 17 | 185px 25px 0 0 #ffc107, 190px 25px 0 0 #000000, 195px 25px 0 0 #000000, 18 | 35px 30px 0 0 #000000, 40px 30px 0 0 #000000, 45px 30px 0 0 #000000, 19 | 50px 30px 0 0 #ff9800, 55px 30px 0 0 #ff9800, 60px 30px 0 0 #ff9800, 20 | 65px 30px 0 0 #000000, 70px 30px 0 0 #000000, 75px 30px 0 0 #000000, 21 | 80px 30px 0 0 #000000, 160px 30px 0 0 #000000, 165px 30px 0 0 #ffc107, 22 | 170px 30px 0 0 #ffc107, 175px 30px 0 0 #ffc107, 180px 30px 0 0 #ffc107, 23 | 185px 30px 0 0 #ff9800, 190px 30px 0 0 #000000, 195px 30px 0 0 #000000, 24 | 45px 35px 0 0 #000000, 50px 35px 0 0 #000000, 55px 35px 0 0 #795548, 25 | 60px 35px 0 0 #ffc107, 65px 35px 0 0 #ffc107, 70px 35px 0 0 #ffc107, 26 | 75px 35px 0 0 #ffc107, 80px 35px 0 0 #ff9800, 85px 35px 0 0 #000000, 27 | 90px 35px 0 0 #000000, 95px 35px 0 0 #000000, 100px 35px 0 0 #000000, 28 | 105px 35px 0 0 #ffffff, 110px 35px 0 0 #000000, 115px 35px 0 0 #000000, 29 | 120px 35px 0 0 #000000, 125px 35px 0 0 #000000, 130px 35px 0 0 #000000, 30 | 135px 35px 0 0 #000000, 140px 35px 0 0 #000000, 145px 35px 0 0 #ffffff, 31 | 150px 35px 0 0 #000000, 155px 35px 0 0 #000000, 160px 35px 0 0 #ffc107, 32 | 165px 35px 0 0 #ffc107, 170px 35px 0 0 #ffc107, 175px 35px 0 0 #ffc107, 33 | 180px 35px 0 0 #ff9800, 185px 35px 0 0 #ff9800, 190px 35px 0 0 #000000, 34 | 50px 40px 0 0 #000000, 55px 40px 0 0 #000000, 60px 40px 0 0 #795548, 35 | 65px 40px 0 0 #ff9800, 70px 40px 0 0 #ffc107, 75px 40px 0 0 #ffc107, 36 | 80px 40px 0 0 #ffc107, 85px 40px 0 0 #ffc107, 90px 40px 0 0 #ffc107, 37 | 95px 40px 0 0 #ffc107, 100px 40px 0 0 #ff9800, 105px 40px 0 0 #000000, 38 | 110px 40px 0 0 #ffc107, 115px 40px 0 0 #ffc107, 120px 40px 0 0 #ffc107, 39 | 125px 40px 0 0 #ffc107, 130px 40px 0 0 #ffc107, 135px 40px 0 0 #ffc107, 40 | 140px 40px 0 0 #ffc107, 145px 40px 0 0 #000000, 150px 40px 0 0 #ff9800, 41 | 155px 40px 0 0 #ffc107, 160px 40px 0 0 #ffc107, 165px 40px 0 0 #ffc107, 42 | 170px 40px 0 0 #ffc107, 175px 40px 0 0 #ff9800, 180px 40px 0 0 #ff9800, 43 | 185px 40px 0 0 #000000, 55px 45px 0 0 #000000, 60px 45px 0 0 #000000, 44 | 65px 45px 0 0 #ff9800, 70px 45px 0 0 #ff9800, 75px 45px 0 0 #ff9800, 45 | 80px 45px 0 0 #ffc107, 85px 45px 0 0 #ffc107, 90px 45px 0 0 #ffc107, 46 | 95px 45px 0 0 #ffc107, 100px 45px 0 0 #ffc107, 105px 45px 0 0 #ffc107, 47 | 110px 45px 0 0 #ffc107, 115px 45px 0 0 #ffc107, 120px 45px 0 0 #ffc107, 48 | 125px 45px 0 0 #ffc107, 130px 45px 0 0 #ffc107, 135px 45px 0 0 #ffc107, 49 | 140px 45px 0 0 #ffc107, 145px 45px 0 0 #ffc107, 150px 45px 0 0 #ffc107, 50 | 155px 45px 0 0 #ffc107, 160px 45px 0 0 #ffc107, 165px 45px 0 0 #ff9800, 51 | 170px 45px 0 0 #ff9800, 175px 45px 0 0 #ff9800, 180px 45px 0 0 #000000, 52 | 60px 50px 0 0 #000000, 65px 50px 0 0 #000000, 70px 50px 0 0 #ff9800, 53 | 75px 50px 0 0 #ff9800, 80px 50px 0 0 #ff9800, 85px 50px 0 0 #ff9800, 54 | 90px 50px 0 0 #ff9800, 95px 50px 0 0 #ffc107, 100px 50px 0 0 #ffc107, 55 | 105px 50px 0 0 #ffc107, 110px 50px 0 0 #ffc107, 115px 50px 0 0 #ffc107, 56 | 120px 50px 0 0 #ffc107, 125px 50px 0 0 #ffc107, 130px 50px 0 0 #ffc107, 57 | 135px 50px 0 0 #ffc107, 140px 50px 0 0 #ffc107, 145px 50px 0 0 #ffc107, 58 | 150px 50px 0 0 #ffc107, 155px 50px 0 0 #ffc107, 160px 50px 0 0 #ff9800, 59 | 165px 50px 0 0 #000000, 170px 50px 0 0 #ff9800, 175px 50px 0 0 #000000, 60 | 70px 55px 0 0 #000000, 75px 55px 0 0 #000000, 80px 55px 0 0 #ff9800, 61 | 85px 55px 0 0 #000000, 90px 55px 0 0 #ffc107, 95px 55px 0 0 #ffc107, 62 | 100px 55px 0 0 #ffc107, 105px 55px 0 0 #ffc107, 110px 55px 0 0 #ffc107, 63 | 115px 55px 0 0 #ffc107, 120px 55px 0 0 #ffc107, 125px 55px 0 0 #ffc107, 64 | 130px 55px 0 0 #ffc107, 135px 55px 0 0 #ffc107, 140px 55px 0 0 #ffc107, 65 | 145px 55px 0 0 #ffc107, 150px 55px 0 0 #ffc107, 155px 55px 0 0 #ffc107, 66 | 160px 55px 0 0 #ffc107, 165px 55px 0 0 #ff9800, 170px 55px 0 0 #000000, 67 | 20px 60px 0 0 #000000, 80px 60px 0 0 #000000, 85px 60px 0 0 #ffc107, 68 | 90px 60px 0 0 #ffc107, 95px 60px 0 0 #ffc107, 100px 60px 0 0 #ffc107, 69 | 105px 60px 0 0 #ffc107, 110px 60px 0 0 #ffc107, 115px 60px 0 0 #ffc107, 70 | 120px 60px 0 0 #ffc107, 125px 60px 0 0 #ffc107, 130px 60px 0 0 #ffc107, 71 | 135px 60px 0 0 #ffc107, 140px 60px 0 0 #ffc107, 145px 60px 0 0 #ffc107, 72 | 150px 60px 0 0 #ffc107, 155px 60px 0 0 #ffc107, 160px 60px 0 0 #ffc107, 73 | 165px 60px 0 0 #ffc107, 170px 60px 0 0 #000000, 20px 65px 0 0 #000000, 74 | 25px 65px 0 0 #000000, 80px 65px 0 0 #000000, 85px 65px 0 0 #ffc107, 75 | 90px 65px 0 0 #ffc107, 95px 65px 0 0 #ffc107, 100px 65px 0 0 #000000, 76 | 105px 65px 0 0 #000000, 110px 65px 0 0 #ffc107, 115px 65px 0 0 #ffc107, 77 | 120px 65px 0 0 #ffc107, 125px 65px 0 0 #ffc107, 130px 65px 0 0 #ffc107, 78 | 135px 65px 0 0 #ffc107, 140px 65px 0 0 #ffc107, 145px 65px 0 0 #ffc107, 79 | 150px 65px 0 0 #000000, 155px 65px 0 0 #000000, 160px 65px 0 0 #ffc107, 80 | 165px 65px 0 0 #ffc107, 170px 65px 0 0 #000000, 20px 70px 0 0 #000000, 81 | 25px 70px 0 0 #ff9800, 30px 70px 0 0 #000000, 75px 70px 0 0 #000000, 82 | 80px 70px 0 0 #ff9800, 85px 70px 0 0 #ffc107, 90px 70px 0 0 #ffc107, 83 | 95px 70px 0 0 #000000, 100px 70px 0 0 #000000, 105px 70px 0 0 #ffffff, 84 | 110px 70px 0 0 #000000, 115px 70px 0 0 #ffc107, 120px 70px 0 0 #ffc107, 85 | 125px 70px 0 0 #ffc107, 130px 70px 0 0 #ffc107, 135px 70px 0 0 #ffc107, 86 | 140px 70px 0 0 #ffc107, 145px 70px 0 0 #000000, 150px 70px 0 0 #000000, 87 | 155px 70px 0 0 #ffffff, 160px 70px 0 0 #000000, 165px 70px 0 0 #ffc107, 88 | 170px 70px 0 0 #ff9800, 175px 70px 0 0 #000000, 20px 75px 0 0 #000000, 89 | 25px 75px 0 0 #ffc107, 30px 75px 0 0 #ff9800, 35px 75px 0 0 #000000, 90 | 75px 75px 0 0 #000000, 80px 75px 0 0 #ffc107, 85px 75px 0 0 #ffc107, 91 | 90px 75px 0 0 #ffc107, 95px 75px 0 0 #000000, 100px 75px 0 0 #000000, 92 | 105px 75px 0 0 #000000, 110px 75px 0 0 #000000, 115px 75px 0 0 #ffc107, 93 | 120px 75px 0 0 #ffc107, 125px 75px 0 0 #ffc107, 130px 75px 0 0 #ffc107, 94 | 135px 75px 0 0 #ffc107, 140px 75px 0 0 #ffc107, 145px 75px 0 0 #000000, 95 | 150px 75px 0 0 #000000, 155px 75px 0 0 #000000, 160px 75px 0 0 #000000, 96 | 165px 75px 0 0 #ffc107, 170px 75px 0 0 #ffc107, 175px 75px 0 0 #000000, 97 | 20px 80px 0 0 #000000, 25px 80px 0 0 #ffc107, 30px 80px 0 0 #ffc107, 98 | 35px 80px 0 0 #ff9800, 40px 80px 0 0 #000000, 75px 80px 0 0 #000000, 99 | 80px 80px 0 0 #ffc107, 85px 80px 0 0 #ffc107, 90px 80px 0 0 #ffc107, 100 | 95px 80px 0 0 #ffc107, 100px 80px 0 0 #000000, 105px 80px 0 0 #000000, 101 | 110px 80px 0 0 #ffc107, 115px 80px 0 0 #ffc107, 120px 80px 0 0 #ffc107, 102 | 125px 80px 0 0 #ffc107, 130px 80px 0 0 #ffc107, 135px 80px 0 0 #ffc107, 103 | 140px 80px 0 0 #ffc107, 145px 80px 0 0 #ffc107, 150px 80px 0 0 #000000, 104 | 155px 80px 0 0 #000000, 160px 80px 0 0 #ffc107, 165px 80px 0 0 #ffc107, 105 | 170px 80px 0 0 #ffc107, 175px 80px 0 0 #000000, 20px 85px 0 0 #000000, 106 | 25px 85px 0 0 #ffc107, 30px 85px 0 0 #ffc107, 35px 85px 0 0 #ffc107, 107 | 40px 85px 0 0 #ff9800, 45px 85px 0 0 #000000, 70px 85px 0 0 #000000, 108 | 75px 85px 0 0 #ffc107, 80px 85px 0 0 #ffc107, 85px 85px 0 0 #ff0000, 109 | 90px 85px 0 0 #ff0000, 95px 85px 0 0 #ffc107, 100px 85px 0 0 #ffc107, 110 | 105px 85px 0 0 #ffc107, 110px 85px 0 0 #ffc107, 115px 85px 0 0 #ffc107, 111 | 120px 85px 0 0 #ffc107, 125px 85px 0 0 #000000, 130px 85px 0 0 #000000, 112 | 135px 85px 0 0 #ffc107, 140px 85px 0 0 #ffc107, 145px 85px 0 0 #ffc107, 113 | 150px 85px 0 0 #ffc107, 155px 85px 0 0 #ffc107, 160px 85px 0 0 #ffc107, 114 | 165px 85px 0 0 #ff0000, 170px 85px 0 0 #ff0000, 175px 85px 0 0 #ffc107, 115 | 180px 85px 0 0 #000000, 20px 90px 0 0 #000000, 25px 90px 0 0 #ffc107, 116 | 30px 90px 0 0 #ffc107, 35px 90px 0 0 #ffc107, 40px 90px 0 0 #ffc107, 117 | 45px 90px 0 0 #ff9800, 50px 90px 0 0 #000000, 70px 90px 0 0 #000000, 118 | 75px 90px 0 0 #ffc107, 80px 90px 0 0 #ff0000, 85px 90px 0 0 #ff0000, 119 | 90px 90px 0 0 #ff0000, 95px 90px 0 0 #ff0000, 100px 90px 0 0 #ffc107, 120 | 105px 90px 0 0 #ffc107, 110px 90px 0 0 #ffc107, 115px 90px 0 0 #ffc107, 121 | 120px 90px 0 0 #ffc107, 125px 90px 0 0 #ffc107, 130px 90px 0 0 #ffc107, 122 | 135px 90px 0 0 #ffc107, 140px 90px 0 0 #ffc107, 145px 90px 0 0 #ffc107, 123 | 150px 90px 0 0 #ffc107, 155px 90px 0 0 #ffc107, 160px 90px 0 0 #ff0000, 124 | 165px 90px 0 0 #ff0000, 170px 90px 0 0 #ff0000, 175px 90px 0 0 #ff0000, 125 | 180px 90px 0 0 #000000, 20px 95px 0 0 #000000, 25px 95px 0 0 #ffc107, 126 | 30px 95px 0 0 #ffc107, 35px 95px 0 0 #ffc107, 40px 95px 0 0 #ffc107, 127 | 45px 95px 0 0 #ffc107, 50px 95px 0 0 #ff9800, 55px 95px 0 0 #000000, 128 | 70px 95px 0 0 #000000, 75px 95px 0 0 #ffc107, 80px 95px 0 0 #ff0000, 129 | 85px 95px 0 0 #ff0000, 90px 95px 0 0 #ff0000, 95px 95px 0 0 #ff0000, 130 | 100px 95px 0 0 #ffc107, 105px 95px 0 0 #ffc107, 110px 95px 0 0 #000000, 131 | 115px 95px 0 0 #ffc107, 120px 95px 0 0 #ffc107, 125px 95px 0 0 #000000, 132 | 130px 95px 0 0 #000000, 135px 95px 0 0 #ffc107, 140px 95px 0 0 #ffc107, 133 | 145px 95px 0 0 #000000, 150px 95px 0 0 #ffc107, 155px 95px 0 0 #ffc107, 134 | 160px 95px 0 0 #ff0000, 165px 95px 0 0 #ff0000, 170px 95px 0 0 #ff0000, 135 | 175px 95px 0 0 #ff0000, 180px 95px 0 0 #000000, 20px 100px 0 0 #000000, 136 | 25px 100px 0 0 #ffc107, 30px 100px 0 0 #ffc107, 35px 100px 0 0 #ffc107, 137 | 40px 100px 0 0 #ffc107, 45px 100px 0 0 #ffc107, 50px 100px 0 0 #ffc107, 138 | 55px 100px 0 0 #ff9800, 60px 100px 0 0 #000000, 70px 100px 0 0 #000000, 139 | 75px 100px 0 0 #ffc107, 80px 100px 0 0 #ffc107, 85px 100px 0 0 #ff0000, 140 | 90px 100px 0 0 #ff0000, 95px 100px 0 0 #ffc107, 100px 100px 0 0 #ffc107, 141 | 105px 100px 0 0 #ffc107, 110px 100px 0 0 #ffc107, 115px 100px 0 0 #000000, 142 | 120px 100px 0 0 #000000, 125px 100px 0 0 #ffc107, 130px 100px 0 0 #ffc107, 143 | 135px 100px 0 0 #000000, 140px 100px 0 0 #000000, 145px 100px 0 0 #ffc107, 144 | 150px 100px 0 0 #ffc107, 155px 100px 0 0 #ffc107, 160px 100px 0 0 #ffc107, 145 | 165px 100px 0 0 #ff0000, 170px 100px 0 0 #ff0000, 175px 100px 0 0 #ffc107, 146 | 180px 100px 0 0 #000000, 20px 105px 0 0 #000000, 25px 105px 0 0 #ffc107, 147 | 30px 105px 0 0 #ffc107, 35px 105px 0 0 #ffc107, 40px 105px 0 0 #ffc107, 148 | 45px 105px 0 0 #ffc107, 50px 105px 0 0 #ffc107, 55px 105px 0 0 #ffc107, 149 | 60px 105px 0 0 #ff9800, 65px 105px 0 0 #000000, 70px 105px 0 0 #000000, 150 | 75px 105px 0 0 #000000, 80px 105px 0 0 #ffc107, 85px 105px 0 0 #ffc107, 151 | 90px 105px 0 0 #ffc107, 95px 105px 0 0 #ffc107, 100px 105px 0 0 #ffc107, 152 | 105px 105px 0 0 #ffc107, 110px 105px 0 0 #ffc107, 115px 105px 0 0 #ffc107, 153 | 120px 105px 0 0 #ffc107, 125px 105px 0 0 #ffc107, 130px 105px 0 0 #ffc107, 154 | 135px 105px 0 0 #ffc107, 140px 105px 0 0 #ffc107, 145px 105px 0 0 #ffc107, 155 | 150px 105px 0 0 #ffc107, 155px 105px 0 0 #ffc107, 160px 105px 0 0 #ffc107, 156 | 165px 105px 0 0 #ffc107, 170px 105px 0 0 #ffc107, 175px 105px 0 0 #000000, 157 | 20px 110px 0 0 #000000, 25px 110px 0 0 #ffc107, 30px 110px 0 0 #ffc107, 158 | 35px 110px 0 0 #ffc107, 40px 110px 0 0 #ffc107, 45px 110px 0 0 #ffc107, 159 | 50px 110px 0 0 #ffc107, 55px 110px 0 0 #ffc107, 60px 110px 0 0 #ffc107, 160 | 65px 110px 0 0 #ff9800, 70px 110px 0 0 #000000, 75px 110px 0 0 #000000, 161 | 80px 110px 0 0 #ff9800, 85px 110px 0 0 #ffc107, 90px 110px 0 0 #ffc107, 162 | 95px 110px 0 0 #ffc107, 100px 110px 0 0 #ffc107, 105px 110px 0 0 #ffc107, 163 | 110px 110px 0 0 #ffc107, 115px 110px 0 0 #ffc107, 120px 110px 0 0 #ffc107, 164 | 125px 110px 0 0 #ffc107, 130px 110px 0 0 #ffc107, 135px 110px 0 0 #ffc107, 165 | 140px 110px 0 0 #ffc107, 145px 110px 0 0 #ffc107, 150px 110px 0 0 #ffc107, 166 | 155px 110px 0 0 #ffc107, 160px 110px 0 0 #ffc107, 165px 110px 0 0 #ffc107, 167 | 170px 110px 0 0 #ff9800, 175px 110px 0 0 #000000, 25px 115px 0 0 #000000, 168 | 30px 115px 0 0 #ffc107, 35px 115px 0 0 #ffc107, 40px 115px 0 0 #ffc107, 169 | 45px 115px 0 0 #ffc107, 50px 115px 0 0 #ffc107, 55px 115px 0 0 #ffc107, 170 | 60px 115px 0 0 #ffc107, 65px 115px 0 0 #ffc107, 70px 115px 0 0 #000000, 171 | 75px 115px 0 0 #ffffff, 80px 115px 0 0 #000000, 85px 115px 0 0 #ffc107, 172 | 90px 115px 0 0 #ffc107, 95px 115px 0 0 #ffc107, 100px 115px 0 0 #ffc107, 173 | 105px 115px 0 0 #ffc107, 110px 115px 0 0 #ffc107, 115px 115px 0 0 #ffc107, 174 | 120px 115px 0 0 #ffc107, 125px 115px 0 0 #ffc107, 130px 115px 0 0 #ffc107, 175 | 135px 115px 0 0 #ffc107, 140px 115px 0 0 #ffc107, 145px 115px 0 0 #ffc107, 176 | 150px 115px 0 0 #ffc107, 155px 115px 0 0 #ffc107, 160px 115px 0 0 #ffc107, 177 | 165px 115px 0 0 #ffc107, 170px 115px 0 0 #000000, 175px 115px 0 0 #ffffff, 178 | 30px 120px 0 0 #000000, 35px 120px 0 0 #ffc107, 40px 120px 0 0 #ffc107, 179 | 45px 120px 0 0 #ffc107, 50px 120px 0 0 #ffc107, 55px 120px 0 0 #ffc107, 180 | 60px 120px 0 0 #ffc107, 65px 120px 0 0 #000000, 75px 120px 0 0 #000000, 181 | 80px 120px 0 0 #ff9800, 85px 120px 0 0 #ffc107, 90px 120px 0 0 #ffc107, 182 | 95px 120px 0 0 #ffc107, 100px 120px 0 0 #ffc107, 105px 120px 0 0 #ffc107, 183 | 110px 120px 0 0 #ffc107, 115px 120px 0 0 #ffc107, 120px 120px 0 0 #ff9800, 184 | 125px 120px 0 0 #ff9800, 130px 120px 0 0 #ff9800, 135px 120px 0 0 #ff9800, 185 | 140px 120px 0 0 #ffc107, 145px 120px 0 0 #ffc107, 150px 120px 0 0 #ffc107, 186 | 155px 120px 0 0 #ffc107, 160px 120px 0 0 #ffc107, 165px 120px 0 0 #ffc107, 187 | 170px 120px 0 0 #ff9800, 175px 120px 0 0 #000000, 35px 125px 0 0 #000000, 188 | 40px 125px 0 0 #ffc107, 45px 125px 0 0 #ffc107, 50px 125px 0 0 #ffc107, 189 | 55px 125px 0 0 #ffc107, 60px 125px 0 0 #000000, 75px 125px 0 0 #000000, 190 | 80px 125px 0 0 #000000, 85px 125px 0 0 #ffc107, 90px 125px 0 0 #ffc107, 191 | 95px 125px 0 0 #ffc107, 100px 125px 0 0 #ffc107, 105px 125px 0 0 #ffc107, 192 | 110px 125px 0 0 #ffc107, 115px 125px 0 0 #ffc107, 120px 125px 0 0 #ffc107, 193 | 125px 125px 0 0 #ff9800, 130px 125px 0 0 #ff9800, 135px 125px 0 0 #ffc107, 194 | 140px 125px 0 0 #ffc107, 145px 125px 0 0 #ffc107, 150px 125px 0 0 #ffc107, 195 | 155px 125px 0 0 #ffc107, 160px 125px 0 0 #ffc107, 165px 125px 0 0 #ffc107, 196 | 170px 125px 0 0 #ffc107, 175px 125px 0 0 #000000, 30px 130px 0 0 #000000, 197 | 35px 130px 0 0 #ffc107, 40px 130px 0 0 #ffc107, 45px 130px 0 0 #ffc107, 198 | 50px 130px 0 0 #ffc107, 55px 130px 0 0 #000000, 75px 130px 0 0 #000000, 199 | 80px 130px 0 0 #ffc107, 85px 130px 0 0 #ffc107, 90px 130px 0 0 #ffc107, 200 | 95px 130px 0 0 #ffc107, 100px 130px 0 0 #ffc107, 105px 130px 0 0 #ffc107, 201 | 110px 130px 0 0 #000000, 115px 130px 0 0 #ffc107, 120px 130px 0 0 #ffc107, 202 | 125px 130px 0 0 #ffc107, 130px 130px 0 0 #ffc107, 135px 130px 0 0 #ffc107, 203 | 140px 130px 0 0 #ffc107, 145px 130px 0 0 #000000, 150px 130px 0 0 #ffc107, 204 | 155px 130px 0 0 #ffc107, 160px 130px 0 0 #ffc107, 165px 130px 0 0 #ffc107, 205 | 170px 130px 0 0 #ffc107, 175px 130px 0 0 #000000, 30px 135px 0 0 #000000, 206 | 35px 135px 0 0 #ffc107, 40px 135px 0 0 #ffc107, 45px 135px 0 0 #ffc107, 207 | 50px 135px 0 0 #ffc107, 55px 135px 0 0 #ffc107, 60px 135px 0 0 #000000, 208 | 70px 135px 0 0 #000000, 75px 135px 0 0 #ffc107, 80px 135px 0 0 #ffc107, 209 | 85px 135px 0 0 #ffc107, 90px 135px 0 0 #000000, 95px 135px 0 0 #ffc107, 210 | 100px 135px 0 0 #ffc107, 105px 135px 0 0 #ffc107, 110px 135px 0 0 #000000, 211 | 115px 135px 0 0 #ffc107, 120px 135px 0 0 #ffc107, 125px 135px 0 0 #ffc107, 212 | 130px 135px 0 0 #ffc107, 135px 135px 0 0 #ffc107, 140px 135px 0 0 #ffc107, 213 | 145px 135px 0 0 #000000, 150px 135px 0 0 #ffc107, 155px 135px 0 0 #ffc107, 214 | 160px 135px 0 0 #ffc107, 165px 135px 0 0 #000000, 170px 135px 0 0 #ffc107, 215 | 175px 135px 0 0 #000000, 35px 140px 0 0 #000000, 40px 140px 0 0 #ffc107, 216 | 45px 140px 0 0 #ffc107, 50px 140px 0 0 #ffc107, 55px 140px 0 0 #ffc107, 217 | 60px 140px 0 0 #ffc107, 65px 140px 0 0 #000000, 70px 140px 0 0 #000000, 218 | 75px 140px 0 0 #ffc107, 80px 140px 0 0 #ffc107, 85px 140px 0 0 #ffc107, 219 | 90px 140px 0 0 #ff9800, 95px 140px 0 0 #ffc107, 100px 140px 0 0 #ffc107, 220 | 105px 140px 0 0 #ffc107, 110px 140px 0 0 #ffc107, 115px 140px 0 0 #000000, 221 | 120px 140px 0 0 #ffc107, 125px 140px 0 0 #ffc107, 130px 140px 0 0 #ffc107, 222 | 135px 140px 0 0 #ffc107, 140px 140px 0 0 #000000, 145px 140px 0 0 #ffc107, 223 | 150px 140px 0 0 #ffc107, 155px 140px 0 0 #ffc107, 160px 140px 0 0 #ffc107, 224 | 165px 140px 0 0 #000000, 170px 140px 0 0 #ffc107, 175px 140px 0 0 #ffc107, 225 | 180px 140px 0 0 #000000, 40px 145px 0 0 #000000, 45px 145px 0 0 #ffc107, 226 | 50px 145px 0 0 #ffc107, 55px 145px 0 0 #ff9800, 60px 145px 0 0 #ff9800, 227 | 65px 145px 0 0 #795548, 70px 145px 0 0 #000000, 75px 145px 0 0 #ffc107, 228 | 80px 145px 0 0 #ffc107, 85px 145px 0 0 #ffc107, 90px 145px 0 0 #ff9800, 229 | 95px 145px 0 0 #000000, 100px 145px 0 0 #ffc107, 105px 145px 0 0 #ffc107, 230 | 110px 145px 0 0 #ffc107, 115px 145px 0 0 #000000, 120px 145px 0 0 #ffc107, 231 | 125px 145px 0 0 #ffc107, 130px 145px 0 0 #ffc107, 135px 145px 0 0 #ffc107, 232 | 140px 145px 0 0 #000000, 145px 145px 0 0 #ffc107, 150px 145px 0 0 #ffc107, 233 | 155px 145px 0 0 #ffc107, 160px 145px 0 0 #000000, 165px 145px 0 0 #ff9800, 234 | 170px 145px 0 0 #ffc107, 175px 145px 0 0 #ffc107, 180px 145px 0 0 #000000, 235 | 45px 150px 0 0 #000000, 50px 150px 0 0 #ff9800, 55px 150px 0 0 #ff9800, 236 | 60px 150px 0 0 #ff9800, 65px 150px 0 0 #000000, 70px 150px 0 0 #000000, 237 | 75px 150px 0 0 #ffc107, 80px 150px 0 0 #ffc107, 85px 150px 0 0 #ffc107, 238 | 90px 150px 0 0 #ff9800, 95px 150px 0 0 #000000, 100px 150px 0 0 #ffc107, 239 | 105px 150px 0 0 #ffc107, 110px 150px 0 0 #ffc107, 115px 150px 0 0 #000000, 240 | 120px 150px 0 0 #ffc107, 125px 150px 0 0 #ffc107, 130px 150px 0 0 #ffc107, 241 | 135px 150px 0 0 #ffc107, 140px 150px 0 0 #000000, 145px 150px 0 0 #ffc107, 242 | 150px 150px 0 0 #ffc107, 155px 150px 0 0 #ffc107, 160px 150px 0 0 #000000, 243 | 165px 150px 0 0 #ff9800, 170px 150px 0 0 #ffc107, 175px 150px 0 0 #ffc107, 244 | 180px 150px 0 0 #000000, 50px 155px 0 0 #000000, 55px 155px 0 0 #ff9800, 245 | 60px 155px 0 0 #795548, 65px 155px 0 0 #795548, 70px 155px 0 0 #000000, 246 | 75px 155px 0 0 #ffc107, 80px 155px 0 0 #ffc107, 85px 155px 0 0 #ffc107, 247 | 90px 155px 0 0 #ffc107, 95px 155px 0 0 #ff9800, 100px 155px 0 0 #000000, 248 | 105px 155px 0 0 #ffc107, 110px 155px 0 0 #ffc107, 115px 155px 0 0 #000000, 249 | 120px 155px 0 0 #ffc107, 125px 155px 0 0 #ffc107, 130px 155px 0 0 #ffc107, 250 | 135px 155px 0 0 #ffc107, 140px 155px 0 0 #000000, 145px 155px 0 0 #ffc107, 251 | 150px 155px 0 0 #ffc107, 155px 155px 0 0 #000000, 160px 155px 0 0 #ff9800, 252 | 165px 155px 0 0 #ffc107, 170px 155px 0 0 #ffc107, 175px 155px 0 0 #ffc107, 253 | 180px 155px 0 0 #000000, 45px 160px 0 0 #000000, 50px 160px 0 0 #795548, 254 | 55px 160px 0 0 #795548, 60px 160px 0 0 #795548, 65px 160px 0 0 #795548, 255 | 70px 160px 0 0 #000000, 75px 160px 0 0 #ffc107, 80px 160px 0 0 #ffc107, 256 | 85px 160px 0 0 #ffc107, 90px 160px 0 0 #ffc107, 95px 160px 0 0 #ffc107, 257 | 100px 160px 0 0 #ff9800, 105px 160px 0 0 #000000, 110px 160px 0 0 #000000, 258 | 115px 160px 0 0 #ffc107, 120px 160px 0 0 #ffc107, 125px 160px 0 0 #ffc107, 259 | 130px 160px 0 0 #ffc107, 135px 160px 0 0 #ffc107, 140px 160px 0 0 #ffc107, 260 | 145px 160px 0 0 #000000, 150px 160px 0 0 #000000, 155px 160px 0 0 #ff9800, 261 | 160px 160px 0 0 #ffc107, 165px 160px 0 0 #ffc107, 170px 160px 0 0 #ffc107, 262 | 175px 160px 0 0 #ffc107, 180px 160px 0 0 #000000, 50px 165px 0 0 #000000, 263 | 55px 165px 0 0 #795548, 60px 165px 0 0 #795548, 65px 165px 0 0 #795548, 264 | 70px 165px 0 0 #000000, 75px 165px 0 0 #ffc107, 80px 165px 0 0 #ffc107, 265 | 85px 165px 0 0 #ffc107, 90px 165px 0 0 #ffc107, 95px 165px 0 0 #ffc107, 266 | 100px 165px 0 0 #ffc107, 105px 165px 0 0 #ffc107, 110px 165px 0 0 #ffc107, 267 | 115px 165px 0 0 #ffc107, 120px 165px 0 0 #ffc107, 125px 165px 0 0 #ffc107, 268 | 130px 165px 0 0 #ffc107, 135px 165px 0 0 #ffc107, 140px 165px 0 0 #ffc107, 269 | 145px 165px 0 0 #ffc107, 150px 165px 0 0 #ffc107, 155px 165px 0 0 #ffc107, 270 | 160px 165px 0 0 #ffc107, 165px 165px 0 0 #ffc107, 170px 165px 0 0 #ffc107, 271 | 175px 165px 0 0 #ffc107, 180px 165px 0 0 #000000, 55px 170px 0 0 #000000, 272 | 60px 170px 0 0 #000000, 65px 170px 0 0 #795548, 70px 170px 0 0 #000000, 273 | 75px 170px 0 0 #ff9800, 80px 170px 0 0 #ffc107, 85px 170px 0 0 #ffc107, 274 | 90px 170px 0 0 #ffc107, 95px 170px 0 0 #ffc107, 100px 170px 0 0 #ffc107, 275 | 105px 170px 0 0 #ffc107, 110px 170px 0 0 #ffc107, 115px 170px 0 0 #ffc107, 276 | 120px 170px 0 0 #ffc107, 125px 170px 0 0 #ffc107, 130px 170px 0 0 #ffc107, 277 | 135px 170px 0 0 #ffc107, 140px 170px 0 0 #ffc107, 145px 170px 0 0 #ffc107, 278 | 150px 170px 0 0 #ffc107, 155px 170px 0 0 #ffc107, 160px 170px 0 0 #ffc107, 279 | 165px 170px 0 0 #ffc107, 170px 170px 0 0 #ffc107, 175px 170px 0 0 #ffc107, 280 | 180px 170px 0 0 #000000, 65px 175px 0 0 #000000, 70px 175px 0 0 #000000, 281 | 75px 175px 0 0 #000000, 80px 175px 0 0 #ffc107, 85px 175px 0 0 #ffc107, 282 | 90px 175px 0 0 #ffc107, 95px 175px 0 0 #ffc107, 100px 175px 0 0 #ffc107, 283 | 105px 175px 0 0 #ffc107, 110px 175px 0 0 #ffc107, 115px 175px 0 0 #ffc107, 284 | 120px 175px 0 0 #ffc107, 125px 175px 0 0 #ffc107, 130px 175px 0 0 #ffc107, 285 | 135px 175px 0 0 #ffc107, 140px 175px 0 0 #ffc107, 145px 175px 0 0 #ffc107, 286 | 150px 175px 0 0 #ffc107, 155px 175px 0 0 #ffc107, 160px 175px 0 0 #ffc107, 287 | 165px 175px 0 0 #ffc107, 170px 175px 0 0 #ffc107, 175px 175px 0 0 #000000, 288 | 75px 180px 0 0 #000000, 80px 180px 0 0 #ff9800, 85px 180px 0 0 #ffc107, 289 | 90px 180px 0 0 #ffc107, 95px 180px 0 0 #ffc107, 100px 180px 0 0 #ffc107, 290 | 105px 180px 0 0 #ffc107, 110px 180px 0 0 #ffc107, 115px 180px 0 0 #ffc107, 291 | 120px 180px 0 0 #ffc107, 125px 180px 0 0 #ffc107, 130px 180px 0 0 #ffc107, 292 | 135px 180px 0 0 #ffc107, 140px 180px 0 0 #ffc107, 145px 180px 0 0 #ffc107, 293 | 150px 180px 0 0 #ffc107, 155px 180px 0 0 #ffc107, 160px 180px 0 0 #ffc107, 294 | 165px 180px 0 0 #ffc107, 170px 180px 0 0 #ffc107, 175px 180px 0 0 #000000, 295 | 80px 185px 0 0 #000000, 85px 185px 0 0 #ffc107, 90px 185px 0 0 #ffc107, 296 | 95px 185px 0 0 #ffc107, 100px 185px 0 0 #ffc107, 105px 185px 0 0 #ffc107, 297 | 110px 185px 0 0 #ffc107, 115px 185px 0 0 #ff9800, 120px 185px 0 0 #ff9800, 298 | 125px 185px 0 0 #ff9800, 130px 185px 0 0 #ff9800, 135px 185px 0 0 #ff9800, 299 | 140px 185px 0 0 #ffc107, 145px 185px 0 0 #ffc107, 150px 185px 0 0 #ffc107, 300 | 155px 185px 0 0 #ffc107, 160px 185px 0 0 #ffc107, 165px 185px 0 0 #ffc107, 301 | 170px 185px 0 0 #000000, 80px 190px 0 0 #ffffff, 85px 190px 0 0 #000000, 302 | 90px 190px 0 0 #ff9800, 95px 190px 0 0 #ffc107, 100px 190px 0 0 #ff9800, 303 | 105px 190px 0 0 #ff9800, 110px 190px 0 0 #000000, 115px 190px 0 0 #000000, 304 | 120px 190px 0 0 #000000, 125px 190px 0 0 #000000, 130px 190px 0 0 #000000, 305 | 135px 190px 0 0 #000000, 140px 190px 0 0 #000000, 145px 190px 0 0 #ff9800, 306 | 150px 190px 0 0 #ff9800, 155px 190px 0 0 #ffc107, 160px 190px 0 0 #ff9800, 307 | 165px 190px 0 0 #000000, 170px 190px 0 0 #ffffff, 80px 195px 0 0 #000000, 308 | 85px 195px 0 0 #ffc107, 90px 195px 0 0 #ffc107, 95px 195px 0 0 #ffc107, 309 | 100px 195px 0 0 #000000, 105px 195px 0 0 #000000, 110px 195px 0 0 #000000, 310 | 145px 195px 0 0 #000000, 150px 195px 0 0 #000000, 155px 195px 0 0 #ffc107, 311 | 160px 195px 0 0 #ffc107, 165px 195px 0 0 #ffc107, 170px 195px 0 0 #000000, 312 | 80px 200px 0 0 #000000, 85px 200px 0 0 #000000, 90px 200px 0 0 #000000, 313 | 95px 200px 0 0 #000000, 100px 200px 0 0 #000000, 150px 200px 0 0 #000000, 314 | 155px 200px 0 0 #000000, 160px 200px 0 0 #000000, 165px 200px 0 0 #000000, 315 | 170px 200px 0 0 #000000; 316 | } --------------------------------------------------------------------------------