├── README.md ├── assets ├── amoung-us.png └── mayCode.png ├── index.html └── style.css /README.md: -------------------------------------------------------------------------------- 1 |

Desenho Amoung Us em HTML e CSS

2 | 3 |

4 | 5 | 6 | My Linkedin 7 | 8 | 9 |

10 | 11 |
“A chave para transformação é a continuidade. Continue a codar!”
12 | 13 |
14 | 15 |
16 | 17 |
18 |
19 | 20 | 21 | 22 | ## Apresentação 23 |
24 | 25 |
26 | amoung-us 27 |
28 |
29 | 30 | ## Sobre o desenho do Amoung Us em HTML e CSS 31 |
32 | 33 |

34 | Encontrei no youtube um vídeo de como desenhar um personagem do Amoung Us em HTML e CSS. Gostei muito e resolvi fazer o meu acompanhando o vídeo. 35 | Faça o seu também! 36 | Divirtam-se! 37 |

38 | 39 | https://www.youtube.com/watch?v=JDI0zz2Waqw 40 | 41 | 42 |
43 | 44 | ## Tecnologias Utilizadas 45 |
46 | 47 | - [x] HTML 48 | - [x] CSS 49 | 50 |
51 |
52 |
53 |
54 |
55 | 56 |

57 | mayTheCodeBeWithYou 58 |

-------------------------------------------------------------------------------- /assets/amoung-us.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MorenaNobre/CSS-Drawing/6a9d35c188f7c40adae3a2a3a45e27986b17243c/assets/amoung-us.png -------------------------------------------------------------------------------- /assets/mayCode.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MorenaNobre/CSS-Drawing/6a9d35c188f7c40adae3a2a3a45e27986b17243c/assets/mayCode.png -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | CSS Drawing Amoung Us 5 | 6 | 7 | 8 |
9 |
10 |
11 |
12 |
13 |
14 | 15 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | *, 2 | *:before, 3 | *:after { 4 | box-sizing: border-box; 5 | padding: 0; 6 | margin: 0; 7 | } 8 | 9 | body { 10 | background-color: #ffde2a; 11 | } 12 | 13 | .player { 14 | background-color: #3D167D; 15 | height: 200px; 16 | width: 140px; 17 | position: absolute; 18 | margin: auto; 19 | left: 0; 20 | right: 0; 21 | top: 0; 22 | bottom: 0; 23 | border: 10px solid #000000; 24 | border-bottom: none; 25 | border-radius: 60px 80px 0 0; 26 | z-index: 1; 27 | } 28 | 29 | .player:after { 30 | content: ""; 31 | position: absolute; 32 | width: 92%; 33 | height: 85%; 34 | background-color: #6E2FBC 35 | ; 36 | top: 2.5px; 37 | left: 6px; 38 | border-radius: 58% 70% 28% 42% / 28% 56% 88% 89%; 39 | } 40 | 41 | .legs { 42 | height: 50px; 43 | width: 60px; 44 | background-color: #3D167D ; 45 | position: absolute; 46 | bottom: -50px; 47 | left: -10px; 48 | border: 10px solid #000000; 49 | border-top: none; 50 | border-radius: 0 0 22px 22px; 51 | z-index: 1; 52 | } 53 | 54 | .legs:before{ 55 | content: ""; 56 | height: 45px; 57 | width: 60px; 58 | background-color: #3D167D; 59 | position: absolute; 60 | right: -90px; 61 | border: 10px solid #000000; 62 | border-top: none; 63 | border-radius: 0 0 22px 22px; 64 | } 65 | 66 | .legs:after { 67 | content: ""; 68 | height: 10px; 69 | width: 55px; 70 | background-color: #000000; 71 | position: absolute; 72 | top: -10px; 73 | left: 40px; 74 | border-radius: 0 0 10px 0; 75 | } 76 | 77 | .back { 78 | height: 120px; 79 | width: 35px; 80 | background-color: #6E2FBC ; 81 | border: 10px solid #000000; 82 | position: absolute; 83 | left: -45px; 84 | top: 65px; 85 | border-right: none; 86 | border-radius: 20px 0 0 20px; 87 | } 88 | 89 | .back:before{ 90 | content: ""; 91 | position: absolute; 92 | height: 78px; 93 | width: 25.4px; 94 | background-color: #3D167D 95 | ; 96 | bottom: -0.5px; 97 | left: -0.5px; 98 | border-radius: 12px 0 0 8px; 99 | } 100 | 101 | .glass { 102 | height: 75px; 103 | width: 110px; 104 | background-color: #225381; 105 | z-index: 2; 106 | position: absolute; 107 | top: 30px; 108 | left: 40px; 109 | border-radius: 25px 50px 30px 30px; 110 | border: 10px solid #000000; 111 | } 112 | 113 | .glass:before { 114 | content: ""; 115 | position: absolute; 116 | width: 85%; 117 | height: 65%; 118 | background-color: #71d4ec; 119 | border-radius: 0 28px 3px 30px; 120 | right: 0; 121 | top: 0; 122 | } 123 | 124 | .glass:after { 125 | content: ""; 126 | position: absolute; 127 | width: 45%; 128 | height: 22%; 129 | background-color: #f7f7f7; 130 | left: 39px; 131 | top: 5px; 132 | border-radius: 10px; 133 | transform: rotate(6deg); 134 | } 135 | 136 | .shadow { 137 | height: 40px; 138 | width: 210px; 139 | background-color: rgba(153, 130, 0, 0.2); 140 | position: absolute; 141 | bottom: -60px; 142 | right: -40px; 143 | border-radius: 50%; 144 | z-index: 0; 145 | } --------------------------------------------------------------------------------