├── .gitattributes ├── LICENSE ├── README.md ├── gif-30dayscss.gif ├── header.css ├── index.html ├── project1 ├── project1.html └── style.css ├── project10 ├── project10.html └── style.css ├── project11 ├── img │ └── hand.png ├── project11.html └── style.css ├── project12 ├── project12.html └── style.css ├── project13 ├── project13.html └── style.css ├── project14 ├── project14.html └── style.css ├── project15 ├── img │ ├── 1.png │ ├── 2.png │ └── 3.png ├── project15.html └── style.css ├── project16 ├── project16.html └── style.css ├── project17 ├── project17.html └── style.css ├── project18 ├── project18.html └── style.css ├── project19 ├── project19.html └── style.css ├── project2 ├── project2.html └── style.css ├── project20 ├── project20.html └── style.css ├── project21 ├── project21.html └── style.css ├── project22 ├── img │ └── down-arrow2.png ├── project22.html └── style.css ├── project23 ├── img │ └── building.png ├── project23.html └── style.css ├── project24 ├── project24.html └── style.css ├── project25 ├── project25.html └── style.css ├── project26 ├── project26.html └── style.css ├── project27 ├── img │ ├── background.png │ ├── earth.png │ ├── jupiter.png │ ├── mars.png │ ├── mercury.png │ ├── neptune.png │ ├── saturn.png │ ├── uranus.png │ └── venus.png ├── project27.html └── style.css ├── project28 ├── img │ ├── pants-blue.png │ ├── pants-orange.png │ ├── pants-pink.png │ └── pants-yellow.png ├── project28.html └── style.css ├── project29 ├── project29.html └── style.css ├── project3 ├── project3.html └── style.css ├── project30 ├── project30.html └── style.css ├── project4 ├── project4.html └── style.css ├── project5 ├── img │ └── lampada.png ├── project5.html └── style.css ├── project6 ├── img │ └── image.jpg ├── project6.html └── style.css ├── project7 ├── project7.html └── style.css ├── project8 ├── project8.html └── style.css ├── project9 ├── project9.html └── style.css ├── projects.html └── style.css /.gitattributes: -------------------------------------------------------------------------------- 1 | # Auto detect text files and perform LF normalization 2 | * text=auto 3 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2020 Pamela Caffa 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # 🚀 30 dias de CSS 2 | 3 | ![Projects](gif-30dayscss.gif) 4 | 5 |

6 | Demo on Netlify 7 | 8 |

9 | 10 | 11 |

  

12 | 13 | ## 🎯 Objetivo 14 | Comecei o desafio no dia 1º de Dezembro de 2020 com o objetivo de aprimorar os meus conhecimentos em HTML5 e CSS3. Fui inspirada por várias pessoas do meu LinkedIn e 2 delas são [Juliane Pires](https://github.com/JulianePires/30diasDeCSS) e [Milena Carecho](https://github.com/MilenaCarecho/30diasDeCSS#id01) também segui alguns tutoriais desses canais: [Coding Artist](https://www.youtube.com/channel/UC15exV5s79D_aYGADudlwpQ) e [DarkCode](https://www.youtube.com/channel/UCD3KVjbb7aq2OiOffuungzw) 15 | 16 |

  

17 | 18 | --- 19 | 20 |

  

21 | 22 | ## 📖 Regras gerais 23 | * Realizar um projeto por dia 24 | * Compartilhe seu progresso nas mídias sociais (Twitter, Facebook, Linkedin etc.) usando a hashtag #30diasDeCSS 25 | * O projeto deve ser concluído até 23:59 26 | 27 |

  

28 | 29 | --- 30 | 31 |

  

32 | 33 | ## 💜 Regras pra mim 34 | * Criar uma página e disponibilizar todos os projetos deste desafio. 35 | * Compartilhar os projetos nas redes a cada 5 concluídos. 36 | * Para cada dia sem postar um projeto, fazer um resumo em inglês do projeto atrasado. (estudar mais um pouco de inglês não faz mal 😉) 37 | * No final do desafio adicionar responsividade aos projetos que ainda não possuir. 38 | 39 |

  

40 | 41 | --- 42 | 43 |

  

44 | 45 | ## 📂 Licença 46 | 47 | Distribuído sob a licença MIT. Veja `LICENSE` para mais informações. -------------------------------------------------------------------------------- /gif-30dayscss.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pcaffa/30daysCSS/836fa30c209f60ff6140f3f1a3580425a234c6a3/gif-30dayscss.gif -------------------------------------------------------------------------------- /header.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | } 5 | 6 | body { 7 | height: 100vh; 8 | display: inline; 9 | 10 | font: 18px 'Nunito', sans-serif; 11 | color: rgb(42, 1, 109); 12 | } 13 | 14 | header { 15 | font: 22px 'Nunito', sans-serif; 16 | font-weight: bold; 17 | padding: 2vw; 18 | text-align: center; 19 | background:#ffadc8; 20 | border-bottom: 2px solid #fd76a3; 21 | } 22 | 23 | .links a { 24 | padding:1vh; 25 | text-decoration: none; 26 | transition: color 0.2s linear; 27 | } 28 | 29 | .links a:hover { 30 | color: rgb(137, 97, 207); 31 | } 32 | 33 | main { 34 | height: 80vh; 35 | display: flex; 36 | align-items: center; 37 | justify-content: center; 38 | } -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 30 Dias de CSS - Pamela Caffa 7 | 8 | 9 | 10 | 11 | 12 |
13 |
14 | Sobre 15 | Projetos 16 |
17 |
18 |
19 |
20 |
21 |

Pamela Caffa

22 |

Uma eterna estudante de tecnologia!

23 |

Me formei em Análise e Desenvolvimento pela Fatec em 2018, mas iniciei meus estudos desde os 9 anos onde tive contato pela primeira vez com HTML e CSS e desde então esse era/é o caminho que eu queria seguir, o caminho da tecnologia!

24 |
25 |
26 |

30 dias de CSS

27 |

Sempre temos algo novo para aprender!

28 |

O desafio é criar 30 mini projetos, 1 a cada dia com o objetivo de aprimorar os conhecimentos em HTML e CSS.

29 |
30 | 34 | 35 |
36 |
37 | 38 | -------------------------------------------------------------------------------- /project1/project1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Projeto 1 - Ícones em camadas 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 |
16 | Sobre 17 | Projetos 18 |
19 |
20 |
21 | 43 |
44 | -------------------------------------------------------------------------------- /project1/style.css: -------------------------------------------------------------------------------- 1 | ul { 2 | position: relative; 3 | margin: 0; 4 | padding: 0; 5 | display: flex; 6 | } 7 | 8 | ul li { 9 | position: relative; 10 | list-style: none; 11 | width: 12vw; 12 | height: 24vh; 13 | margin: 0 15vh; 14 | transform: rotate(-30deg) skew(25deg); 15 | background:#ccc; 16 | border-radius: 24px; 17 | } 18 | 19 | ul li span { 20 | position: absolute; 21 | width: 12vw; 22 | height: 24vh; 23 | background: #000; 24 | transition: 0.5s; 25 | display: flex !important; 26 | align-items: center; 27 | justify-content: center; 28 | color: #fff; 29 | font-size: 60px !important; 30 | border-radius: 24px; 31 | } 32 | 33 | ul li:hover span 34 | { 35 | box-shadow: -1px 1px 1px rgba(0,0,0,.1); 36 | } 37 | 38 | ul li:hover span:nth-child(6) 39 | { 40 | transform: translate(50px, -50px); 41 | opacity: 1; 42 | } 43 | 44 | ul li:hover span:nth-child(5) 45 | { 46 | transform: translate(40px, -40px); 47 | opacity: 0.8; 48 | } 49 | 50 | ul li:hover span:nth-child(4) 51 | { 52 | transform: translate(30px, -30px); 53 | opacity: 0.6; 54 | } 55 | 56 | ul li:hover span:nth-child(3) 57 | { 58 | transform: translate(20px, -20px); 59 | opacity: 0.4; 60 | } 61 | 62 | ul li:hover span:nth-child(2) 63 | { 64 | transform: translate(10px,-10px); 65 | opacity: .2; 66 | } 67 | 68 | ul li:hover span:nth-child(1) 69 | { 70 | transform: translate(0,0); 71 | opacity: .1; 72 | } 73 | 74 | ul li:nth-child(1) span 75 | { 76 | background: #24292E; 77 | } 78 | 79 | ul li:nth-child(2) span 80 | { 81 | background: #0A66C2; 82 | } 83 | 84 | 85 | /*PHONE VERSION*/ 86 | @media (max-width: 800px) { 87 | ul li { 88 | width: 20vw; 89 | height: 15vh; 90 | margin: 0 8vh; 91 | border-radius: 13px; 92 | transform: rotate(-30deg) skew(15deg); 93 | } 94 | 95 | ul li span { 96 | width: 20vw; 97 | height: 15vh; 98 | font-size: 25px !important; 99 | border-radius: 10px; 100 | } 101 | } 102 | -------------------------------------------------------------------------------- /project10/project10.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Projeto 6 - Tela de carregamento circular 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 |
16 | Sobre 17 | Projetos 18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 | 28 | -------------------------------------------------------------------------------- /project10/style.css: -------------------------------------------------------------------------------- 1 | 2 | .container { 3 | -webkit-box-reflect: below 0 linear-gradient(transparent,rgba(10, 10, 10, 0.3)); 4 | } 5 | 6 | .container .ring { 7 | position: relative; 8 | width: 250px; 9 | height: 250px; 10 | border: 20px solid #f84480; 11 | border-radius: 50%; 12 | animation: animate 3s infinite linear; 13 | } 14 | 15 | .container .ring .ball { 16 | width: 100%; 17 | height: 100%; 18 | } 19 | 20 | .container .ring .ball::before { 21 | content: ''; 22 | position: absolute; 23 | right:0%; 24 | bottom: 50%; 25 | width: 30px; 26 | height: 30px; 27 | background: #5b6fdf; 28 | border-radius: 50%; 29 | } 30 | 31 | @keyframes animate{ 32 | 0% { 33 | box-shadow: 0 0 2px 2px #f84480, inset 0 0 2px 2px #f779a3; 34 | transform: rotate(0deg); 35 | } 36 | 25%{ 37 | box-shadow: 0 0 6px 6px #f779a3, inset 0 0 6px 6px #f779a3; 38 | } 39 | 50%{ 40 | box-shadow: 0 0 8px 8px #ffadc8, inset 0 0 8px 8px #ffadc8; 41 | } 42 | 75%{ 43 | box-shadow: 0 0 6px 6px #f779a3, inset 0 0 6px 6px #f779a3; 44 | } 45 | 100%{ 46 | box-shadow: 0 0 2px 2px #f84480, inset 0 0 2px 2px #f84480; 47 | transform: rotate(360deg); 48 | } 49 | } 50 | -------------------------------------------------------------------------------- /project11/img/hand.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pcaffa/30daysCSS/836fa30c209f60ff6140f3f1a3580425a234c6a3/project11/img/hand.png -------------------------------------------------------------------------------- /project11/project11.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Projeto 11 - The power of the hand 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 |
16 | Sobre 17 | Projetos 18 |
19 |
20 |
21 | hand 22 |
23 |
24 | 25 | -------------------------------------------------------------------------------- /project11/style.css: -------------------------------------------------------------------------------- 1 | .body-hand { 2 | background: radial-gradient(farthest-corner, #b267d4 0%, #5e0488 100%) fixed; 3 | } 4 | 5 | .ball { 6 | width: 50px; 7 | height: 50px; 8 | background: #ffffff; 9 | box-shadow: inset 0px 4px 0px #001000; 10 | border-radius: 50%; 11 | 12 | border: 0.5px solid #32059c; 13 | box-shadow: 0px 0px 20px #32059c, inset -10px -10px 10px darkgray, inset 3px 3px 5px #FFF; 14 | position: absolute; 15 | top: 52%; 16 | left: 50%; 17 | animation: bounce 5s ease-in-out infinite; 18 | } 19 | 20 | @keyframes bounce { 21 | 0% {transform: scale(1,1) translateY(0);} 22 | 5% {transform: scale(1.1,0.9) translateY(0);} 23 | 25% {transform: scale(0.9,1.1) translateY(-200px);} 24 | 50% {transform: scale(1.1,0.9) translateY(0);} 25 | 75% {transform: scale(0.9,1.1) translateY(-200px);} 26 | 95% {transform: scale(1.1,0.9) translateY(0);} 27 | 100% {transform: scale(1,1) translateY(0);} 28 | } 29 | 30 | .hand { 31 | position: relative; 32 | top: 13vh; 33 | left: 3vw; 34 | animation: pushing 5s ease-in-out infinite; 35 | } 36 | 37 | @keyframes pushing { 38 | 0% {transform: translateY(0);} 39 | 5% {transform: rotateX(35deg) translateY(0);} 40 | 25% {transform: translateY(-120px);} 41 | 50% {transform: rotateX(35deg) translateY(0);} 42 | 75% {transform: translateY(-120px);} 43 | 95% {transform: skewY(-10deg) translateY(0);} 44 | 98% {transform: skewX(20px) translateY(0);} 45 | 100% {transform: translateY(0);} 46 | } 47 | 48 | 49 | 50 | 51 | /*PHONE VERSION*/ 52 | @media (max-width: 800px) { 53 | .ball { 54 | top: 55%; 55 | left: 40%; 56 | } 57 | 58 | .hand { 59 | top: 20vh; 60 | } 61 | } -------------------------------------------------------------------------------- /project12/project12.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Projeto 12 - MC1 Win The Market 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 |
18 | Sobre 19 | Projetos 20 |
21 |
22 |
23 | 49 |
50 | 51 | -------------------------------------------------------------------------------- /project12/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #e2f4f8; 3 | } 4 | 5 | .logo { 6 | position: absolute; 7 | width: 80vw; 8 | height: 80vh; 9 | margin-left: 15vw; 10 | display: flex; 11 | align-items: center; 12 | justify-content: center; 13 | } 14 | 15 | .bars ,.letter, .number, .slogan { 16 | position: absolute; 17 | margin: auto; 18 | width: 500px; 19 | height: 300px; 20 | left: 0; 21 | right: 0; 22 | top: 0; 23 | bottom: 0; 24 | display: flex; 25 | align-items:baseline; 26 | gap: 5px; 27 | transition-timing-function: ease; 28 | } 29 | 30 | .bars .bar-1{ 31 | background-color: #009CC0; 32 | width: 2%; 33 | height: 5%; 34 | transition-duration: 1s; 35 | } 36 | 37 | .bars .bar-2{ 38 | background-color: #009CC0; 39 | width: 2%; 40 | height: 10%; 41 | transition-duration: 2s; 42 | } 43 | 44 | .bars .bar-3{ 45 | background-color: #009CC0; 46 | width: 2%; 47 | height: 15%; 48 | transition-duration: 3s; 49 | } 50 | 51 | .bars .bar-4{ 52 | background-color: #009CC0; 53 | width: 2%; 54 | height: 20%; 55 | transition-duration: 4s; 56 | } 57 | 58 | .bars .bar-5{ 59 | background-color: #009CC0; 60 | width: 2%; 61 | height: 25%; 62 | transition-duration: 5s; 63 | } 64 | 65 | .bars .bar-6{ 66 | background-color: #009CC0; 67 | width: 2%; 68 | height: 20%; 69 | transform: rotate(-45deg); 70 | position: absolute; 71 | left: 17%; 72 | top: -1%; 73 | transition-duration: 6s; 74 | } 75 | 76 | .bars .bar-7{ 77 | background-color: #009CC0; 78 | width: 2%; 79 | height: 22.2%; 80 | transform: rotate(45deg); 81 | position: absolute; 82 | left: 25%; 83 | top: -2.2%; 84 | border-radius: 1.5px 0 0 0; 85 | transition-duration: 6s; 86 | } 87 | 88 | .bars .bar-8{ 89 | background-color: #e2f4f8; 90 | width: 1%; 91 | height: 25%; 92 | position: absolute; 93 | left: 14%; 94 | transition-duration: 6s; 95 | } 96 | 97 | .bars .bar-9{ 98 | background-color: #009CC0; 99 | width: 2%; 100 | height: 25%; 101 | position: absolute; 102 | left: 30%; 103 | transition-duration: 6s; 104 | } 105 | 106 | .letter .cicle-1{ 107 | background-color: #242222; 108 | width: 85px; 109 | height: 74px; 110 | border-radius: 50%; 111 | position: absolute; 112 | left: 33%; 113 | transition-duration: 6s; 114 | } 115 | 116 | .letter .cicle-2{ 117 | background-color: #e2f4f8; 118 | width: 58px; 119 | height: 48px; 120 | border-radius: 50%; 121 | position: absolute; 122 | left: 36%; 123 | top: 13px; 124 | transition-duration: 6s; 125 | } 126 | 127 | .letter .trapezium { 128 | border-bottom: 45px solid #e2f4f8; 129 | border-left: 25px solid transparent; 130 | border-right: 25px solid transparent; 131 | 132 | position: absolute; 133 | left: 45%; 134 | top:8px; 135 | 136 | transform: rotate(35deg); 137 | transition-duration: 6s; 138 | 139 | } 140 | 141 | .number .bar-1{ 142 | background-color: #009CC0; 143 | width: 2%; 144 | height: 6%; 145 | transform: rotate(45deg); 146 | position: absolute; 147 | left: 50.5%; 148 | top: 0.1%; 149 | border-radius: 2px 0px 0px 0px; 150 | transition-duration: 6s; 151 | } 152 | 153 | .number .bar-2{ 154 | background-color: #009CC0; 155 | width: 2%; 156 | height: 25%; 157 | position: absolute; 158 | left: 52%; 159 | transition-duration: 6s; 160 | } 161 | 162 | .slogan { 163 | left: -0.6%; 164 | top: 25%; 165 | } 166 | 167 | p { 168 | font-size: 35px; 169 | font-family: 'Rubik', sans-serif; 170 | color: #000000; 171 | transition-duration: 6s; 172 | } 173 | 174 | /*PHONE VERSION*/ 175 | @media (max-width: 800px) { 176 | .logo { 177 | width: 100vw; 178 | margin-left: 0; 179 | } 180 | 181 | .bars ,.letter, .number, .slogan { 182 | width: 90vw; 183 | gap:0; 184 | } 185 | 186 | .bars .bar-1{ 187 | width: 2.2vw; 188 | margin-right: 1.5vw; 189 | } 190 | 191 | .bars .bar-2{ 192 | width: 2.2vw; 193 | margin-right: 1.5vw; 194 | } 195 | 196 | .bars .bar-3{ 197 | width: 2.2vw; 198 | margin-right: 1.5vw; 199 | } 200 | 201 | .bars .bar-4{ 202 | width: 2.2vw; 203 | margin-right: 1.5vw; 204 | } 205 | 206 | .bars .bar-5{ 207 | width: 2.2vw; 208 | } 209 | 210 | .bars .bar-6{ 211 | width: 2.2vw; 212 | left: 20.3vw; 213 | top: -1vh; 214 | } 215 | 216 | .bars .bar-7{ 217 | width: 2.2vw; 218 | height: 10.1vh; 219 | left: 31.8vw; 220 | top: -1.1vh; 221 | } 222 | 223 | .bars .bar-8{ 224 | width: 1.3vw; 225 | left: 16.9vw; 226 | } 227 | 228 | .bars .bar-9{ 229 | width: 2.2vw; 230 | left: 38vw; 231 | margin-right: 1.5vw; 232 | } 233 | 234 | .letter .cicle-1{ 235 | width: 85px; 236 | left: 41vw; 237 | } 238 | 239 | .letter .cicle-2{ 240 | left: 45vw; 241 | top: 2vh; 242 | } 243 | 244 | .letter .trapezium { 245 | left: 56vw; 246 | top: 1vh; 247 | } 248 | 249 | .number .bar-1{ 250 | width: 2.2vw; 251 | height: 6%; 252 | left: 65vw; 253 | top: 0.1%; 254 | } 255 | 256 | .number .bar-2{ 257 | width: 2.2vw; 258 | height: 25%; 259 | left: 67vw; 260 | } 261 | 262 | p { 263 | font-size: 32px; 264 | } 265 | 266 | .slogan { 267 | top: 30%; 268 | } 269 | } 270 | 271 | /*PHONE VERSION*/ 272 | @media (max-width: 800px) and (min-width: 370px){ 273 | .bars .bar-6 { 274 | top: -1.1vh; 275 | left: 21.5vw; 276 | height: 9.9vh; 277 | border-radius: 4px 4px 0 0; 278 | } 279 | 280 | .bars .bar-7{ 281 | top: -1.2vh; 282 | border-radius: 3px 0 0 0; 283 | height: 10vh; 284 | } 285 | 286 | .letter .cicle-2{ 287 | width: 60px; 288 | left: 44.5vw; 289 | } 290 | 291 | .letter .trapezium { 292 | left: 55vw; 293 | } 294 | 295 | p { 296 | font-size: 37px; 297 | } 298 | } 299 | -------------------------------------------------------------------------------- /project13/project13.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Projeto 13 - Preloader Animado 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 |
16 | Sobre 17 | Projetos 18 |
19 |
20 |
21 |
22 | 23 | 24 | 25 | 26 |
27 |
28 | 29 | 30 | -------------------------------------------------------------------------------- /project13/style.css: -------------------------------------------------------------------------------- 1 | .container { 2 | width: 12vw; 3 | height: 24vh; 4 | position: relative; 5 | animation: animate 1s linear infinite; 6 | transform: rotate(45deg); 7 | } 8 | 9 | span { 10 | width: 6vw; 11 | height: 12vh; 12 | position: absolute; 13 | animation: rotate 1s linear infinite; 14 | } 15 | 16 | span:nth-child(1) { 17 | top: 0; 18 | left: 0; 19 | background: radial-gradient(farthest-corner, #b12222 0%, #4e0303 80%); 20 | } 21 | 22 | span:nth-child(2) { 23 | top: 0; 24 | right: 0; 25 | background: radial-gradient(farthest-corner, #e45454 0%, #b12222 80%); 26 | } 27 | 28 | span:nth-child(3) { 29 | bottom: 0; 30 | left: 0; 31 | background: radial-gradient(farthest-corner, #ffa3a3 0%, #e45454 80%); 32 | } 33 | 34 | span:nth-child(4) { 35 | bottom: 0; 36 | right: 0; 37 | background: radial-gradient(farthest-corner, #f5cece 0%, #ffa3a3 80%); 38 | } 39 | 40 | @keyframes rotate { 41 | 0% { 42 | transform: rotate(0deg); 43 | } 44 | 50% { 45 | transform: rotate(90deg); 46 | } 47 | 100% { 48 | transform: rotate(90deg); 49 | } 50 | } 51 | 52 | @keyframes animate { 53 | 0% { 54 | width: 12vw; 55 | height: 24vh; 56 | } 57 | 50% { 58 | width: 16vw; 59 | height: 30vh; 60 | } 61 | 100% { 62 | width: 12vw; 63 | height: 24vh; 64 | } 65 | } 66 | 67 | 68 | /*PHONE VERSION*/ 69 | @media (max-width:800px) { 70 | .container { 71 | width: 34vw; 72 | height: 18vh; 73 | } 74 | 75 | span { 76 | width: 17vw; 77 | height: 9vh; 78 | } 79 | 80 | @keyframes animate { 81 | 0% { 82 | width: 34vw; 83 | height: 18vh; 84 | } 85 | 50% { 86 | width: 40vw; 87 | height: 25vh; 88 | } 89 | 100% { 90 | width: 34vw; 91 | height: 18vh; 92 | } 93 | } 94 | 95 | } -------------------------------------------------------------------------------- /project14/project14.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Projeto 14 - Botão em camadas efeito hover 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 |
17 | Sobre 18 | Projetos 19 |
20 |
21 |
22 | 23 |
24 | 25 | -------------------------------------------------------------------------------- /project14/style.css: -------------------------------------------------------------------------------- 1 | button { 2 | width: 14vw; 3 | height: 10vh; 4 | background: #8d9fbd; 5 | border: 3px solid #2d334d; 6 | position: relative; 7 | cursor: pointer; 8 | } 9 | 10 | button:before, 11 | button:after { 12 | content: ''; 13 | position: absolute; 14 | background: #8d9fbd; 15 | width: 100%; 16 | height: 100%; 17 | border: 3px solid #202538; 18 | transition: 0.3s; 19 | } 20 | 21 | button:before { 22 | bottom: -1.5vh; 23 | left: -0.7vw; 24 | z-index: -1; 25 | } 26 | 27 | button:hover:before { 28 | bottom: -0.4vh; 29 | left: -0.2vw; 30 | } 31 | 32 | button:after { 33 | content: attr(data-text); 34 | color: #202538; 35 | font: 1.5em 'Poppins', sans-serif; 36 | letter-spacing: 3px; 37 | display:grid; 38 | place-items: center; 39 | top: -1.5vh; 40 | right: -0.7vw; 41 | z-index: 1; 42 | } 43 | 44 | button:hover:after { 45 | top: -0.4vh; 46 | right: -0.2vw; 47 | background: #31374e; 48 | color: #8e9db6; 49 | } 50 | 51 | 52 | /*PHONE VERSION*/ 53 | @media(max-width: 800px) { 54 | button { 55 | width: 36vw; 56 | height: 8vh; 57 | } 58 | 59 | button:before { 60 | left: -2.7vw; 61 | } 62 | 63 | button:after { 64 | font: 1em 'Poppins', sans-serif; 65 | right: -2.7vw; 66 | } 67 | 68 | button:hover:before { 69 | left: -0.8vw; 70 | } 71 | 72 | button:hover:after { 73 | right: -0.8vw; 74 | } 75 | } -------------------------------------------------------------------------------- /project15/img/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pcaffa/30daysCSS/836fa30c209f60ff6140f3f1a3580425a234c6a3/project15/img/1.png -------------------------------------------------------------------------------- /project15/img/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pcaffa/30daysCSS/836fa30c209f60ff6140f3f1a3580425a234c6a3/project15/img/2.png -------------------------------------------------------------------------------- /project15/img/3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pcaffa/30daysCSS/836fa30c209f60ff6140f3f1a3580425a234c6a3/project15/img/3.png -------------------------------------------------------------------------------- /project15/project15.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Projeto 15 - Cards responsivos 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 |
17 |
18 | Sobre 19 | Projetos 20 |
21 |
22 |
23 |
24 |
25 |
26 | Cachorro 27 |
28 |
29 |

Cachorro

30 |

O cão, no Brasil também chamado de cachorro, é um mamífero carnívoro da família dos canídeos, 31 | subespécie do lobo, e talvez o mais antigo animal domesticado pelo ser humano

32 | Detalhes 33 |
34 |
35 | 36 |
37 |
38 | Gato 39 |
40 |
41 |

Gato

42 |

O gato, também conhecido como gato caseiro, gato urbano ou gato doméstico, 43 | é um mamífero carnívoro da família dos felídeos, muito popular como animal de estimação.

44 | Detalhes 45 |
46 |
47 | 48 |
49 |
50 | Pássaro 51 |
52 |
53 |

Pássaro

54 |

Aves possuem personalidade variadas e você pode encontrar um pouco de tudo de acordo com a espécie escolhida. 55 | Alguns passarinhos amam cantar e assobiar. Outros são quietos e ainda tem aqueles que adoram falar.

56 | Detalhes 57 |
58 |
59 |
60 |
61 | 62 | 63 | -------------------------------------------------------------------------------- /project15/style.css: -------------------------------------------------------------------------------- 1 | .container { 2 | font: 1em 'Lato', sans-serif; 3 | position: relative; 4 | width: 80vw; 5 | top: 2vh; 6 | 7 | display: flex; 8 | justify-content: center; 9 | align-items: center; 10 | flex-wrap: wrap; 11 | padding: 3vw; 12 | } 13 | 14 | .card { 15 | max-width: 20vw; 16 | height: 35vh; 17 | 18 | margin: 2vh 1vh; 19 | padding: 2vh 1.5vw; 20 | 21 | position: relative; 22 | background: whitesmoke; 23 | 24 | display: flex; 25 | flex-direction: column; 26 | box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5); 27 | transition: 0.3s ease-in-out; 28 | } 29 | 30 | .card:hover{ 31 | height: 70vh; 32 | background: rgba(230, 230, 230, 0.774); 33 | box-shadow: 0 5px 20px rgb(102, 4, 4); 34 | } 35 | 36 | .card .cardImg { 37 | width: 18vw; 38 | height: 30vh; 39 | top: -5vh; 40 | left: 1vw; 41 | 42 | position: relative; 43 | z-index: 1; 44 | border-radius: 5%; 45 | box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5); 46 | } 47 | 48 | .card .cardImg img { 49 | max-width: 100%; 50 | border-radius: 5%; 51 | } 52 | 53 | .card .cardContent { 54 | position: relative; 55 | margin-top: -14vw; 56 | padding: 1vh 1.5vw; 57 | text-align: center; 58 | color: #111111; 59 | visibility: hidden; 60 | opacity: 0; 61 | transition: 0.3s ease-in-out; 62 | } 63 | 64 | .card:hover .cardContent{ 65 | margin-top: 2vw; 66 | visibility: visible; 67 | opacity: 1; 68 | transition-delay: 0.3s; 69 | } 70 | 71 | .cardContent h2{ 72 | font-family: 'Pangolin', sans-serif; 73 | } 74 | 75 | .cardContent p { 76 | margin-bottom: 3vh; 77 | } 78 | 79 | .cardContent a { 80 | text-decoration: none; 81 | font: 1em 'Pangolin', sans-serif; 82 | color: white; 83 | background: rgb(105, 101, 101); 84 | 85 | padding: 1vh 3vw; 86 | border-radius: 10%; 87 | } 88 | 89 | .cardContent a:hover { 90 | background: rgb(146, 145, 145); 91 | box-shadow: 0 5px 20px rgba(51, 51, 51, 0.575); 92 | } 93 | 94 | 95 | /*PHONE VERSION*/ 96 | @media (max-width:800px) { 97 | .container { 98 | font: .5em 'Lato', sans-serif; 99 | } 100 | 101 | .card { 102 | max-width: 70vw; 103 | height: 9vh; 104 | } 105 | 106 | .card:hover{ 107 | height: 20vh; 108 | } 109 | 110 | .card .cardImg { 111 | height: 6vh; 112 | } 113 | 114 | .card:hover .cardContent { 115 | margin-top: -2vw; 116 | } 117 | } -------------------------------------------------------------------------------- /project16/project16.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Projeto 16 - Cards direcionados com efeito hover 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 |
16 | Sobre 17 | Projetos 18 |
19 |
20 |
21 |
22 |
23 |

1

24 |
25 |
26 |

2

27 |
28 |
29 |

3

30 |
31 |
32 |

4

33 |
34 |
35 |
36 | 37 | -------------------------------------------------------------------------------- /project16/style.css: -------------------------------------------------------------------------------- 1 | .container { 2 | max-width: 80vw; 3 | display: flex; 4 | } 5 | 6 | .container .card { 7 | width: 13vw; 8 | height: 35vh; 9 | margin: 0 1vw; 10 | background: #f779a3; 11 | border-radius: 5px; 12 | box-shadow: 0 5px 15px rgba(0, 0, 0, .3); 13 | 14 | display: flex; 15 | justify-content: center; 16 | align-items: center; 17 | 18 | transition: 0.5s; 19 | overflow: hidden; 20 | transform-style: preserve-3d; 21 | transform: perspective(0); 22 | } 23 | 24 | .container:hover .card { 25 | transform: perspective(500px) rotateY(30deg); 26 | } 27 | 28 | .container .card:hover{ 29 | transform: perspective(500px) rotateY(0deg); 30 | } 31 | 32 | .container .card:hover ~ .card { 33 | transform: perspective(500px) rotateY(-30deg); 34 | } 35 | 36 | .container .card:hover h2 { 37 | background: #f779a3; 38 | color: rgb(42, 1, 109); 39 | box-shadow: 0 0 0 150px; 40 | } 41 | 42 | .container .card h2{ 43 | width: 6vw; 44 | height: 12vh; 45 | line-height: 12vh; 46 | font-size: 3em; 47 | background: rgb(42, 1, 109); 48 | color: #f779a3; 49 | text-align: center; 50 | border-radius: 50%; 51 | transition: box-shadow 0.5s; 52 | } 53 | 54 | 55 | /*TABLET VERSION*/ 56 | @media (max-width: 1100px) { 57 | .container .card { 58 | width: 18vw; 59 | height: 20vh; 60 | } 61 | 62 | .container .card h2 { 63 | width: 8vw; 64 | height: 7vh; 65 | line-height: 7vh; 66 | font-size: 2em; 67 | } 68 | } 69 | 70 | /*PHONE VERSION*/ 71 | @media (max-width: 600px) { 72 | .container .card h2 { 73 | font-size: 1em; 74 | } 75 | } -------------------------------------------------------------------------------- /project17/project17.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Projeto 17 - Efeito hover com empilhamento 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 |
17 | Sobre 18 | Projetos 19 |
20 |
21 |
22 |
23 |
24 |
25 |

Divergente

26 |

"Uma escolha decide quem são seus amigos, define suas crenças, determina sua lealdade para sempre. UMA ESCOLHA PODE TE TRANSFORMAR." -Veronica Roth

27 |
28 |
29 | 30 |
31 |
32 |

Insurgente

33 |

"Uma escolha se torna um sacrifício, uma perda, um fardo, uma batalha. UMA ESCOLHA PODE TE DESTRUIR." -Veronica Roth

34 |
35 |
36 | 37 |
38 |
39 |

Convergente

40 |

"Uma escolha pode te transformar, uma escolha pode de destruir. UMA ESCOLHA VAI TE DEFINIR." -Veronica Roth

41 |
42 |
43 | 44 |
45 |
46 | 47 | -------------------------------------------------------------------------------- /project17/style.css: -------------------------------------------------------------------------------- 1 | .container { 2 | position: relative; 3 | width:80vw; 4 | height: 50vh; 5 | 6 | display: flex; 7 | align-items: center; 8 | justify-content: center; 9 | } 10 | 11 | .container .card { 12 | position: absolute; 13 | width: 18vw; 14 | height: 38vh; 15 | top: 15vh; 16 | left: 40vw; 17 | background: #1cad7d; 18 | box-shadow: 25px 25px 100px rgba(0, 0, 0, 0.2); 19 | 20 | display: flex; 21 | justify-content: center; 22 | align-items: center; 23 | 24 | transform: translate(-10vw,calc(5vh * var(--i))) rotate(40deg) skew(-20deg,-10deg); 25 | z-index: calc(-1 * var(--i)); 26 | transition: .7s; 27 | } 28 | 29 | .container .card:nth-child(1) { 30 | opacity: 1; 31 | } 32 | 33 | .container .card:nth-child(2) { 34 | opacity: 0.6; 35 | } 36 | 37 | .container .card:nth-child(3) { 38 | opacity: 0.4; 39 | } 40 | 41 | .container:hover .card { 42 | position: absolute; 43 | left: 30vw; 44 | 45 | z-index: 1; 46 | opacity: 1; 47 | box-shadow: 0px 25px 50px rgba(0, 0, 0, 0.5); 48 | transform: translate(calc(20vw * var(--i)) ,-5vh) rotate(0) skew(0deg, 0deg); 49 | } 50 | 51 | .container .card .content { 52 | text-align: center; 53 | color: rgb(252, 252, 252); 54 | font: 15px 'Poppins', sans-serif; 55 | padding: 2vw; 56 | 57 | opacity: 0; 58 | transition: .5s; 59 | } 60 | 61 | .container:hover .card .content { 62 | opacity: 1; 63 | transform: translateY(0px); 64 | transition-delay: calc(0.2s * var(--j)); 65 | } 66 | 67 | .card .content h2 { 68 | margin-bottom: 1vh; 69 | } 70 | 71 | .card .content p span { 72 | color:rgb(156, 224, 182);; 73 | font-weight: bold; 74 | } 75 | 76 | @media (max-width:800px) { 77 | 78 | .container { 79 | width:90vw; 80 | height: 50vh; 81 | } 82 | .container .card { 83 | width: 27vw; 84 | height: 24vh; 85 | } 86 | 87 | .container:hover .card { 88 | transform: translate(calc(30vw * var(--i)) ,5vh) rotate(0) skew(0deg, 0deg); 89 | } 90 | 91 | .container .card .content { 92 | font: 7px 'Poppins', sans-serif; 93 | } 94 | 95 | } -------------------------------------------------------------------------------- /project18/project18.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Projeto 18 - Pêndulo de Newton 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 |
16 | Sobre 17 | Projetos 18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 | 30 | -------------------------------------------------------------------------------- /project18/style.css: -------------------------------------------------------------------------------- 1 | .container { 2 | position: absolute; 3 | width: 19vw; 4 | height: 28vh; 5 | margin:auto; 6 | border-top: 1.5vw solid #fbb226; 7 | border-radius: 5%; 8 | 9 | display: flex; 10 | align-items: center; 11 | justify-content: space-around; 12 | } 13 | 14 | .ball { 15 | position: relative; 16 | width: .4vw; 17 | height: 31vh; 18 | background-color:#fbb226; 19 | transform-origin: top; 20 | } 21 | 22 | .ball:after { 23 | position: absolute; 24 | content: " "; 25 | background-color:rgb(223, 49, 49); 26 | border-radius: 50%; 27 | width: 3.8vw; 28 | height: 7.5vh; 29 | left: -1.6vw; 30 | bottom: -6vh; 31 | } 32 | 33 | .ball:first-child { 34 | animation: swing1 2s infinite linear; 35 | } 36 | 37 | .ball:last-child { 38 | animation: swing2 2s 1s infinite linear; 39 | } 40 | 41 | @keyframes swing1 { 42 | 25% { 43 | transform: rotate(50deg); 44 | } 45 | 50% { 46 | transform: rotate(0deg); 47 | } 48 | 100% { 49 | transform: rotate(0deg); 50 | } 51 | } 52 | 53 | @keyframes swing2 { 54 | 25% { 55 | transform: rotate(-50deg); 56 | } 57 | 50% { 58 | transform: rotate(0deg); 59 | } 60 | 100% { 61 | transform: rotate(0deg); 62 | } 63 | } 64 | 65 | 66 | /*PHONE VERSION*/ 67 | @media (max-width:800px) { 68 | 69 | .container { 70 | width: 35vw; 71 | height: 23vh; 72 | border-top: 3vw solid #fbb226 73 | } 74 | 75 | .ball { 76 | position: relative; 77 | width: .8vw; 78 | height: 24vh; 79 | } 80 | 81 | .ball:after { 82 | width: 7vw; 83 | height: 4.5vh; 84 | left: -3vw; 85 | bottom: -4vh; 86 | } 87 | } -------------------------------------------------------------------------------- /project19/project19.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Projeto 19 - Loading 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 |
16 | Sobre 17 | Projetos 18 |
19 |
20 |
21 |
22 |
23 | 24 | -------------------------------------------------------------------------------- /project19/style.css: -------------------------------------------------------------------------------- 1 | .loading { 2 | width: 100px; 3 | height: 100px; 4 | border-radius: 12px; 5 | animation: loading 5s linear infinite; 6 | } 7 | 8 | @keyframes loading { 9 | 0% { 10 | transform: rotateX(0deg) rotateY(0deg); 11 | background-color: rgb(72, 3, 94); 12 | } 13 | 50% { 14 | transform: rotateX(0deg) rotateY(180deg); 15 | background-color: rgb(203, 120, 228); 16 | } 17 | 100% { 18 | transform: rotateX(180deg) rotateY(180deg); 19 | background-color: rgb(72, 3, 94); 20 | } 21 | } -------------------------------------------------------------------------------- /project2/project2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Projeto 2 - Botão com efeito hover 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 |
16 | Sobre 17 | Projetos 18 |
19 |
20 |
21 | 22 |
23 | -------------------------------------------------------------------------------- /project2/style.css: -------------------------------------------------------------------------------- 1 | button { 2 | width: 45vw; 3 | height: 20vh; 4 | background:none; 5 | border: .8vh solid rgb(42, 1, 109); 6 | 7 | color: #ffadc8; 8 | text-transform: uppercase; 9 | font: 30px 'Nunito', sans-serif; 10 | font-weight: 700; 11 | 12 | cursor: pointer; 13 | position: relative; 14 | } 15 | 16 | button::before, button::after { 17 | content: " "; 18 | position: absolute; 19 | width: 5vw; 20 | height: .8vh; 21 | background:white; 22 | transform: skewX(50deg); 23 | transition: .8s linear; 24 | } 25 | 26 | button::before 27 | { 28 | top: -0.8vh; 29 | left: 10%; 30 | } 31 | 32 | button::after 33 | { 34 | bottom: -0.8vh; 35 | right: 10%; 36 | } 37 | 38 | button:hover::before 39 | { 40 | left: 80%; 41 | } 42 | 43 | button:hover::after 44 | { 45 | right: 80%; 46 | } 47 | 48 | 49 | /*PHONE VERSION*/ 50 | @media (max-width: 800px) { 51 | button { 52 | width: 80vw; 53 | height: 10vh; 54 | font-size: 15px; 55 | } 56 | 57 | button::before, button::after { 58 | content: " "; 59 | position: absolute; 60 | width: 9vw; 61 | height: 1vh; 62 | background:rgb(255, 255, 255); 63 | } 64 | 65 | button::before 66 | { 67 | top: -0.88vh; 68 | } 69 | button::after 70 | { 71 | bottom: -0.9vh; 72 | } 73 | } -------------------------------------------------------------------------------- /project20/project20.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Projeto 20 - Pac Man 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 |
17 | Sobre 18 | Projetos 19 |
20 |
21 |
22 |

PAC-MAN

23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 | 35 | -------------------------------------------------------------------------------- /project20/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | background: #171717; 3 | } 4 | 5 | main { 6 | display: flex; 7 | flex-direction: column; 8 | } 9 | 10 | main h2 { 11 | font: 2em 'Bungee Outline', cursive; 12 | color: #facc15; 13 | margin: -2vh 0 0 0; 14 | } 15 | 16 | .container { 17 | width: 80vh; 18 | height: 60vh; 19 | border: 12px solid #4c1d95; 20 | border-radius: 10px; 21 | box-shadow: 0px 0px 10px 10px #5b21b6, inset 0px 0px 10px 8px #5b21b6; 22 | } 23 | 24 | .container .pacman{ 25 | width: 100px; 26 | height: 100px; 27 | border-radius: 50%; 28 | background: #facc15; 29 | position: relative; 30 | margin-top: 22px; 31 | transform: translateX(15px); 32 | animation: round 10s ease-in-out infinite; 33 | } 34 | 35 | .container .pacman .pacmanOlho { 36 | position: absolute; 37 | width: 10px; 38 | height: 10px; 39 | border-radius: 50%; 40 | top: 20px; 41 | right: 40px; 42 | background: #262626; 43 | } 44 | 45 | .container .pacman .pacmanBoca { 46 | background: #171717; 47 | position: absolute; 48 | width: 100%; 49 | height: 100%; 50 | clip-path: polygon(100% 74%, 44% 48%, 100% 21%); 51 | animation: eat .7s infinite; 52 | } 53 | 54 | .container .pacmanComida { 55 | position: absolute; 56 | width: 15px; 57 | height: 15px; 58 | background: #22d3ee; 59 | border-radius: 50%; 60 | top: 38%; 61 | left: 50%; 62 | animation: food1 10s infinite; 63 | } 64 | 65 | .container .pacmanComida:nth-child(2){ 66 | background: #a3e635; 67 | top: 50%; 68 | left: 62%; 69 | animation: food2 10s infinite; 70 | } 71 | 72 | .container .pacmanComida:nth-child(3){ 73 | background: #f87171; 74 | top: 70%; 75 | left: 50%; 76 | animation: food3 10s infinite; 77 | } 78 | 79 | .container .pacmanComida:nth-child(4){ 80 | background: #f97316; 81 | top: 55%; 82 | left: 35%; 83 | animation: food4 10s infinite; 84 | } 85 | 86 | /*ANIMATIONS*/ 87 | 88 | @keyframes round { 89 | 0% {left: 5%; top: 0;} 90 | 20% {left: 75%; top: 0;} 91 | 22% {transform: rotate(90deg);} 92 | 40% {left: 75%; top: 60%;} 93 | 42% {transform: rotate(180deg);} 94 | 60% {left: 5%; top: 60%;} 95 | 62% {transform: rotate(270deg);} 96 | 80% {left: 5%; top: 0;} 97 | 81% {transform: rotate(360deg);} 98 | 100% {left: 5%; top: 0;} 99 | } 100 | 101 | @keyframes eat { 102 | 0% {clip-path: polygon(100% 74%, 44% 48%, 100% 21%);} 103 | 25% {clip-path: polygon(100% 60%, 44% 48%, 100% 40%);} 104 | 50% {clip-path: polygon(100% 50%, 44% 48%, 100% 50%);} 105 | 75% {clip-path: polygon(100% 59%, 44% 48%, 100% 35%);} 106 | 100% {clip-path: polygon(100% 74%, 44% 48%, 100% 21%);} 107 | } 108 | 109 | @keyframes food1{ 110 | 0% {opacity: 1;} 111 | 9% { opacity: 1;} 112 | 10% {opacity: 0;} 113 | 100% {opacity: 0;} 114 | } 115 | 116 | @keyframes food2{ 117 | 0% {opacity: 1;} 118 | 27% { opacity: 1;} 119 | 28% {opacity: 0;} 120 | 100% {opacity: 0;} 121 | } 122 | 123 | @keyframes food3{ 124 | 0% {opacity: 1;} 125 | 48% { opacity: 1;} 126 | 49% {opacity: 0;} 127 | 100% {opacity: 0;} 128 | } 129 | 130 | @keyframes food4{ 131 | 0% {opacity: 1;} 132 | 67% { opacity: 1;} 133 | 68% {opacity: 0;} 134 | 100% {opacity: 0;} 135 | } 136 | 137 | 138 | /*PHONE VERSION*/ 139 | @media (max-width: 800px){ 140 | 141 | main h2 { 142 | font: 2em 'Bungee Outline', cursive; 143 | margin-top: -12vh; 144 | } 145 | 146 | .container { 147 | width: 45vh; 148 | height: 50vh; 149 | } 150 | 151 | .container .pacman { 152 | width: 50px; 153 | height: 50px; 154 | margin-top: 15px; 155 | } 156 | 157 | .container .pacman .pacmanOlho { 158 | width: 5px; 159 | height: 5px; 160 | top: 12px; 161 | right: 21px; 162 | } 163 | 164 | .container .pacman .pacmanBoca { 165 | width: 53px; 166 | height: 53px; 167 | } 168 | 169 | .container .pacmanComida { 170 | width: 10px; 171 | height: 10px; 172 | top: 28vh; 173 | left: 50vw; 174 | } 175 | 176 | .container .pacmanComida:nth-child(2){ 177 | top: 45vh; 178 | left: 80vw; 179 | } 180 | 181 | .container .pacmanComida:nth-child(3){ 182 | top: 66vh; 183 | left: 50vw; 184 | } 185 | 186 | .container .pacmanComida:nth-child(4){ 187 | top: 48vh; 188 | left: 21vw; 189 | } 190 | 191 | /*ANIMATIONS*/ 192 | 193 | @keyframes round { 194 | 0% {left: 5vw; top: 0;} 195 | 20% {left: 62vw; top: 0;} 196 | 30% {transform: rotate(90deg);} 197 | 40% {left: 62vw; top: 40vh;} 198 | 42% {transform: rotate(180deg);} 199 | 60% {left: 5vw; top: 40vh;} 200 | 62% {transform: rotate(270deg);} 201 | 80% {left: 5vw; top: 0;} 202 | 81% {transform: rotate(360deg);} 203 | 100% {left: 5vw; top: 0;} 204 | } 205 | 206 | @keyframes food1{ 207 | 0% {opacity: 1;} 208 | 8% { opacity: 1;} 209 | 9% {opacity: 0;} 210 | 100% {opacity: 0;} 211 | } 212 | 213 | @keyframes food2{ 214 | 0% {opacity: 1;} 215 | 29% { opacity: 1;} 216 | 30% {opacity: 0;} 217 | 100% {opacity: 0;} 218 | } 219 | 220 | @keyframes food4{ 221 | 0% {opacity: 1;} 222 | 69% { opacity: 1;} 223 | 70% {opacity: 0;} 224 | 100% {opacity: 0;} 225 | } 226 | } 227 | -------------------------------------------------------------------------------- /project21/project21.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Projeto 21 - Firework 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 |
17 | Sobre 18 | Projetos 19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 |
55 |
56 |
57 |
58 |
59 |
60 |
61 |
62 |
63 |
64 |
65 | 66 | -------------------------------------------------------------------------------- /project21/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | background: #171717; 3 | } 4 | 5 | .firework { 6 | position: absolute; 7 | } 8 | 9 | .explosion { 10 | position: absolute; 11 | left: -2px; 12 | bottom: 0; 13 | width: 4px; 14 | height: 80px; 15 | transform-origin: 50% 100%; 16 | overflow: hidden; 17 | } 18 | 19 | .explosion:nth-child(1) { 20 | transform: rotate(0deg) translateY(-15px); 21 | } 22 | 23 | .explosion:nth-child(2) { 24 | transform: rotate(30deg) translateY(-15px); 25 | } 26 | 27 | .explosion:nth-child(3) { 28 | transform: rotate(60deg) translateY(-15px); 29 | } 30 | 31 | .explosion:nth-child(4) { 32 | transform: rotate(90deg) translateY(-15px); 33 | } 34 | 35 | .explosion:nth-child(5) { 36 | transform: rotate(120deg )translateY(-15px); 37 | } 38 | 39 | .explosion:nth-child(6) { 40 | transform: rotate(150deg) translateY(-15px); 41 | } 42 | 43 | .explosion:nth-child(7) { 44 | transform: rotate(180deg) translateY(-15px); 45 | } 46 | 47 | .explosion:nth-child(8) { 48 | transform: rotate(210deg) translateY(-15px); 49 | } 50 | 51 | .explosion:nth-child(9) { 52 | transform: rotate(240deg) translateY(-15px); 53 | } 54 | 55 | .explosion:nth-child(10) { 56 | transform: rotate(270deg) translateY(-15px); 57 | } 58 | 59 | .explosion:nth-child(11) { 60 | transform: rotate(300deg) translateY(-15px); 61 | } 62 | 63 | .explosion:nth-child(12) { 64 | transform: rotate(330deg) translateY(-15px); 65 | } 66 | 67 | .explosion::before { 68 | content: ""; 69 | position: absolute; 70 | left: 0; 71 | right: 0; 72 | top: 100%; 73 | height: 40px; 74 | background-color: rgb(238, 238, 101); 75 | } 76 | 77 | #firework1 { 78 | left: 50%; 79 | top: 50%; 80 | transform: scale(1); 81 | } 82 | 83 | #firework1 .explosion::before { 84 | animation: explosion 2s ease-in-out infinite; 85 | } 86 | 87 | #firework2 { 88 | left: 40%; 89 | top: 40%; 90 | transform: scale(.7); 91 | } 92 | 93 | #firework2 .explosion::before { 94 | animation: explosion 2s .6s ease-in-out infinite; 95 | } 96 | 97 | #firework3 { 98 | left: 60%; 99 | top:60% ; 100 | transform: scale(.4); 101 | } 102 | 103 | #firework3 .explosion::before { 104 | animation: explosion 2s .4s ease-in-out infinite; 105 | } 106 | 107 | @keyframes explosion { 108 | 0% {top: 100%;} 109 | 33% {top: -40%; background:purple;} 110 | 43% {top: -45%; background:red;} 111 | 100% {top: -100%;} 112 | } 113 | 114 | 115 | 116 | 117 | -------------------------------------------------------------------------------- /project22/img/down-arrow2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pcaffa/30daysCSS/836fa30c209f60ff6140f3f1a3580425a234c6a3/project22/img/down-arrow2.png -------------------------------------------------------------------------------- /project22/project22.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Projeto 22 - Custom select menu 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 |
17 | Sobre 18 | Projetos 19 |
20 |
21 |
22 | 30 |
31 | 32 | -------------------------------------------------------------------------------- /project22/style.css: -------------------------------------------------------------------------------- 1 | select { 2 | -webkit-appearance: none; 3 | -moz-appearance: none; 4 | appearance: none; 5 | 6 | width: 20vw; 7 | padding: 2vh 1vw; 8 | 9 | 10 | font: 15px 'Poppins', sans-serif; 11 | font-weight: 600; 12 | letter-spacing: .5px; 13 | 14 | background-color: rgb(88, 5, 99); 15 | color: rgb(255, 255, 255); 16 | background-image: url('img/down-arrow2.png'); 17 | background-repeat: no-repeat; 18 | background-size: 2.5em; 19 | background-position: 16.5vw 1vh; 20 | 21 | border: 4px solid rgb(88, 5, 99); 22 | border-radius: 5px; 23 | box-shadow:0 0 20px rgba(20, 20, 30, .25); 24 | 25 | outline: none; 26 | cursor: pointer; 27 | } 28 | 29 | select::-ms-expand { 30 | display: none; 31 | } 32 | 33 | select:hover{ 34 | border: 4px solid rgb(149, 30, 165); 35 | } 36 | 37 | select option { 38 | background-color:rgb(149, 30, 165); 39 | 40 | font: 11px 'Poppins', sans-serif; 41 | font-weight: 400; 42 | letter-spacing: 1.2px; 43 | } 44 | 45 | .selected { 46 | display: none 47 | } 48 | 49 | 50 | /*PHONE VERSION*/ 51 | @media (max-width: 800px){ 52 | select { 53 | width: 64vw; 54 | 55 | font: 13px 'Poppins', sans-serif; 56 | background-size: 2em; 57 | background-position: 52vw 1.5v; 58 | } 59 | } 60 | -------------------------------------------------------------------------------- /project23/img/building.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pcaffa/30daysCSS/836fa30c209f60ff6140f3f1a3580425a234c6a3/project23/img/building.png -------------------------------------------------------------------------------- /project23/project23.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Projeto 23 - Sunset Animation 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 |
17 | Sobre 18 | Projetos 19 |
20 |
21 |
22 |
23 | building 24 |
25 |
26 | 27 | -------------------------------------------------------------------------------- /project23/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #ccccff; 3 | overflow: hidden; 4 | animation: sky 5.5s 2s forwards; 5 | } 6 | 7 | img { 8 | position: absolute; 9 | bottom: 0; 10 | width: 100%; 11 | } 12 | 13 | .sun { 14 | width: 8vw; 15 | height: 15vh; 16 | background-color: #ff8c1a; 17 | border-radius: 50%; 18 | position: absolute; 19 | left: 40vw; 20 | top: 15vh; 21 | box-shadow: 0 0 20px 5px #ff8c1a; 22 | animation: sunset 13s forwards; 23 | } 24 | 25 | .moon { 26 | width: 8vw; 27 | height: 15vh; 28 | background-color: transparent; 29 | border-radius: 50%; 30 | position: absolute; 31 | left: 10vw; 32 | top: 15vh; 33 | box-shadow: -20px 10px 2px white; 34 | opacity: 0; 35 | animation: night .8s 10s forwards; 36 | } 37 | 38 | @keyframes sky { 39 | 50% {background-color: #ffd700;} 40 | 65% {background-color: #ffb90f;} 41 | 85% {background-color: #b39800;} 42 | 100% {background-color: #3e228b;} 43 | } 44 | 45 | @keyframes sunset { 46 | 100% {transform: translateY(72vh);} 47 | } 48 | 49 | @keyframes night { 50 | 100% {opacity: 1;} 51 | } 52 | 53 | 54 | /*PHONE VERSION*/ 55 | @media (max-width:800px){ 56 | .sun { 57 | width: 19vw; 58 | height: 11vh; 59 | } 60 | 61 | .moon { 62 | width: 19vw; 63 | height: 11vh; 64 | } 65 | 66 | @keyframes sunset { 67 | 100% { 68 | transform: translateY(85vh); 69 | width: 13vw; 70 | height: 7vh; 71 | } 72 | } 73 | } -------------------------------------------------------------------------------- /project24/project24.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Projeto 24 - Navigation Bar Hover Effec 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 |
17 | Sobre 18 | Projetos 19 |
20 |
21 |
22 | 31 |
32 | 33 | -------------------------------------------------------------------------------- /project24/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #0a1e29; 3 | } 4 | 5 | nav { 6 | width: 80vw; 7 | } 8 | 9 | nav ul { 10 | list-style-type: none; 11 | margin: 0; 12 | padding: 0; 13 | display: flex; 14 | align-items: center; 15 | flex-direction: row; 16 | justify-content: space-around; 17 | } 18 | 19 | nav ul li { 20 | position: relative; 21 | padding: 0 20px; 22 | height: 100%; 23 | display: flex; 24 | } 25 | 26 | nav ul li a { 27 | color: white; 28 | text-decoration: none; 29 | font: 18px 'Poppins', sans-serif; 30 | font-weight: 400; 31 | padding: 10px 15px; 32 | z-index: 1; 33 | } 34 | 35 | nav ul li:before { 36 | content: ''; 37 | position: absolute; 38 | height: 33.33%; 39 | width: 0; 40 | background-color: #0D7CFF; 41 | right: 0; 42 | z-index: 0; 43 | top: 33.33%; 44 | transition: all .5s; 45 | } 46 | 47 | nav ul li:after { 48 | content: ''; 49 | position: absolute; 50 | height: 33.33%; 51 | width: 0; 52 | background-color: #0D7CFF; 53 | left: 0; 54 | z-index: 0; 55 | bottom: 0; 56 | transition: all .5s; 57 | } 58 | 59 | nav ul li a:before { 60 | content: ''; 61 | position: absolute; 62 | height: 33.33%; 63 | width: 0; 64 | background-color: #0D7CFF; 65 | bottom: 66.66%; 66 | left: 0; 67 | transition: all .5s; 68 | } 69 | 70 | nav ul li:hover:before, 71 | nav ul li:hover:after, 72 | nav ul li:hover a::before { 73 | width: 100%; 74 | } -------------------------------------------------------------------------------- /project25/project25.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Projeto 25 - Merry Christmas 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 |
17 | Sobre 18 | Projetos 19 |
20 |
21 |
22 |
23 |
24 |

Merry Christmas

25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 | 37 | -------------------------------------------------------------------------------- /project25/style.css: -------------------------------------------------------------------------------- 1 | *, *:before, *:after { 2 | box-sizing: border-box; 3 | padding: 0; 4 | margin: 0; 5 | } 6 | 7 | body { 8 | background-color: #000022; 9 | } 10 | 11 | .card { 12 | position: absolute; 13 | margin: auto; 14 | 15 | width: 570px; 16 | height: 400px; 17 | left: 0; 18 | right: 0; 19 | top: 0; 20 | bottom: 0; 21 | cursor: pointer; 22 | 23 | -webkit-perspective: 1200px; 24 | perspective: 1200px; 25 | } 26 | 27 | .card:hover { 28 | transform: rotate(-5deg); 29 | } 30 | 31 | .card:hover .outside { 32 | transform: rotateY(-130deg); 33 | } 34 | 35 | .outside { 36 | width: 50%; 37 | height: 100%; 38 | position: absolute; 39 | left: 50.1%; 40 | -webkit-transform-style: preserve-3d; 41 | transform-style: preserve-3d; 42 | transform-origin: left; 43 | transition: 2s; 44 | } 45 | 46 | .front, 47 | .back { 48 | width: 100%; 49 | height: 100%; 50 | position: absolute; 51 | -webkit-backface-visibility: hidden; 52 | backface-visibility: hidden; 53 | transform: rotateX(0deg); 54 | 55 | } 56 | 57 | .front { 58 | background-color: #be0f04; 59 | z-index: 1; 60 | } 61 | 62 | .front:before { 63 | content: ''; 64 | width: 100%; 65 | height: 80px; 66 | position: absolute; 67 | background-color: #101010;; 68 | top: 240px; 69 | } 70 | 71 | .belt { 72 | width: 120px; 73 | height: 120px; 74 | border: 20px solid #e5a037; 75 | border-radius: 10px; 76 | position: absolute; 77 | margin: auto; 78 | left: 0; 79 | right: 0; 80 | top: 220px; 81 | z-index: 1; 82 | } 83 | 84 | .belt:after { 85 | content: ''; 86 | width: 95px; 87 | height: 18px; 88 | position: absolute; 89 | background-color: #d6932e;; 90 | top: 31px; 91 | right: 13px; 92 | border-radius: 13px; 93 | } 94 | 95 | .mouth { 96 | width: 85px; 97 | height: 55px; 98 | position: absolute; 99 | background-color: #efbeab; 100 | z-index: 1; 101 | border-radius: 0 0 50% 50%; 102 | margin: auto; 103 | left: 0; 104 | right: 0; 105 | top: 20px; 106 | } 107 | 108 | .beard { 109 | width: 100%; 110 | height: 180px; 111 | position: absolute; 112 | background-color: #f5f5f5; 113 | border-radius: 0 0 50% 50%; 114 | } 115 | 116 | .beard:before, 117 | .beard:after { 118 | content: ''; 119 | width: 130px; 120 | height: 50px; 121 | position: absolute; 122 | background-color: #f5f5f5; 123 | box-shadow: 0 10px #d3d3d3; 124 | border-radius: 0 0 50% 50%; 125 | top: 0x; 126 | z-index: 2; 127 | } 128 | 129 | .beard:before { 130 | left: 13px; 131 | } 132 | 133 | .beard:after { 134 | right: 13px; 135 | } 136 | 137 | .back { 138 | background: linear-gradient(to right, #be0f04 50%, #7d0b03); 139 | transform: rotateY(180deg); 140 | } 141 | 142 | .inside { 143 | position: absolute; 144 | background: linear-gradient(to left, #be0f04 50%, #7d0b03); 145 | width: 50%; 146 | height: 100%; 147 | left: 50%; 148 | font: 70px 'Parisienne', cursive; 149 | color: white; 150 | text-align: center; 151 | padding: 90px 10px; 152 | line-height: 100px; 153 | box-shadow: 25px 25px 35px rgba(0,0,0,0.3); 154 | 155 | } 156 | 157 | .inside p { 158 | border-bottom: 10px dotted white; 159 | } 160 | 161 | 162 | /*PHONE VERSION*/ 163 | @media (max-width: 800px){ 164 | .card { 165 | width: 70vw; 166 | height: 35vh; 167 | } 168 | 169 | .front:before { 170 | height: 28px; 171 | top: 200px; 172 | } 173 | 174 | .belt { 175 | width: 60px; 176 | height: 60px; 177 | border: 10px solid #e5a037; 178 | top: 184px; 179 | } 180 | 181 | .belt:after { 182 | width: 45px; 183 | height: 8px; 184 | top: 16px; 185 | } 186 | 187 | .mouth { 188 | width: 55px; 189 | height: 35px; 190 | } 191 | 192 | 193 | .beard { 194 | height: 120px; 195 | } 196 | 197 | .beard:before, 198 | .beard:after { 199 | width: 70px; 200 | height: 30px; 201 | } 202 | 203 | .beard:before { 204 | left: 5px; 205 | } 206 | 207 | .beard:after { 208 | right: 5px; 209 | } 210 | 211 | .inside { 212 | font: 25px 'Parisienne', cursive; 213 | line-height: 50px; 214 | } 215 | } -------------------------------------------------------------------------------- /project26/project26.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Projeto 26 - Emoticon Toggle 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 |
16 | Sobre 17 | Projetos 18 |
19 |
20 |
21 | 22 |
23 | 24 | -------------------------------------------------------------------------------- /project26/style.css: -------------------------------------------------------------------------------- 1 | input[type="checkbox"] { 2 | width: 180px; 3 | height: 80px; 4 | position: relative; 5 | -webkit-appearance: none; 6 | background-color: rgb(75, 73, 73); 7 | border-radius: 80px; 8 | outline: none; 9 | cursor: pointer; 10 | } 11 | 12 | input[type="checkbox"]:before { 13 | position: absolute; 14 | content: ''; 15 | background-color: white; 16 | width: 10px; 17 | height: 10px; 18 | top: 30px; 19 | left: 20px; 20 | border-radius: 50%; 21 | box-shadow: 26px 0 0 0 white, 22 | 13px 5px 0 25px #f779a3; 23 | transition: .5s; 24 | } 25 | 26 | input[type="checkbox"]:after { 27 | position: absolute; 28 | content: ''; 29 | background-color: white; 30 | width: 28px; 31 | height: 13px; 32 | top: 45px; 33 | left: 24px; 34 | border-radius: 0 0 28px 28px; 35 | transition: .5s; 36 | } 37 | 38 | input:checked[type="checkbox"]:before { 39 | box-shadow: 26px 0 0 0 white, 40 | 13px 5px 0 25px #7096e7 ; 41 | transform: translateX(105px); 42 | } 43 | 44 | input:checked[type="checkbox"]:after { 45 | border-radius: 28px 28px 0 0; 46 | transform: translateX(105px); 47 | } -------------------------------------------------------------------------------- /project27/img/background.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pcaffa/30daysCSS/836fa30c209f60ff6140f3f1a3580425a234c6a3/project27/img/background.png -------------------------------------------------------------------------------- /project27/img/earth.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pcaffa/30daysCSS/836fa30c209f60ff6140f3f1a3580425a234c6a3/project27/img/earth.png -------------------------------------------------------------------------------- /project27/img/jupiter.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pcaffa/30daysCSS/836fa30c209f60ff6140f3f1a3580425a234c6a3/project27/img/jupiter.png -------------------------------------------------------------------------------- /project27/img/mars.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pcaffa/30daysCSS/836fa30c209f60ff6140f3f1a3580425a234c6a3/project27/img/mars.png -------------------------------------------------------------------------------- /project27/img/mercury.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pcaffa/30daysCSS/836fa30c209f60ff6140f3f1a3580425a234c6a3/project27/img/mercury.png -------------------------------------------------------------------------------- /project27/img/neptune.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pcaffa/30daysCSS/836fa30c209f60ff6140f3f1a3580425a234c6a3/project27/img/neptune.png -------------------------------------------------------------------------------- /project27/img/saturn.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pcaffa/30daysCSS/836fa30c209f60ff6140f3f1a3580425a234c6a3/project27/img/saturn.png -------------------------------------------------------------------------------- /project27/img/uranus.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pcaffa/30daysCSS/836fa30c209f60ff6140f3f1a3580425a234c6a3/project27/img/uranus.png -------------------------------------------------------------------------------- /project27/img/venus.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pcaffa/30daysCSS/836fa30c209f60ff6140f3f1a3580425a234c6a3/project27/img/venus.png -------------------------------------------------------------------------------- /project27/project27.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Projeto 27 - Planetário 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 |
17 | Sobre 18 | Projetos 19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 | 27 |
28 |
29 |

Mercúrio

30 |

Distância do Sol: 57.910.000 km

31 |

Período orbital: 88 dias

32 |

Área da superfície: 74.800.000 km²

33 |

Raio: 2.439,7 km

34 |

Gravidade: 3,7 m/s²

35 |
36 |
37 | 38 |
39 |
40 | 41 |
42 |
43 |

Vênus

44 |

Distância do Sol: 108.200.000 km

45 |

Período orbital: 225 dias

46 |

Área da superfície: 460.200.000 km²

47 |

Raio: 6.051,8 km

48 |

Gravidade: 8,87 m/s²

49 |
50 |
51 | 52 |
53 |
54 | 55 |
56 |
57 |

Terra

58 |

Distância do Sol: 149.600.000 km

59 |

Período orbital: 365 dias

60 |

Área da superfície: 510 072 000 km²

61 |

Raio: 6.371 km

62 |

Gravidade: 9,807 m/s²

63 |
64 |
65 | 66 |
67 |
68 | 69 |
70 |
71 |

Marte

72 |

Distância do Sol: 227.900.000 km

73 |

Período orbital: 687 dias

74 |

Área da superfície: 144.800.000 km²

75 |

Raio: 3.389,5 km

76 |

Gravidade: 3,711 m/s²

77 |
78 |
79 | 80 |
81 |
82 | 83 |
84 |
85 |

Jupiter

86 |

Distância do Sol: 778.500.000 km

87 |

Período orbital: 12 anos

88 |

Área da superfície: 6,142 × 10^10 km²

89 |

Raio: 69.911 km

90 |

Gravidade: 24,79 m/s²

91 |
92 |
93 | 94 |
95 |
96 | 97 |
98 |
99 |

Saturno

100 |

Distância do Sol: 1,434 × 10^9 km

101 |

Período orbital: 29 anos

102 |

Área da superfície: 4,27 × 10^10 km²

103 |

Raio: 58.232 km

104 |

Gravidade: 10,44 m/s²

105 |
106 |
107 | 108 |
109 |
110 | 111 |
112 |
113 |

Urano

114 |

Distância do Sol: 2,871 × 10^9 km

115 |

Período orbital: 84 anos

116 |

Área da superfície: 8,083 × 10^9 km²

117 |

Raio: 25.362 km

118 |

Gravidade: 8,87 m/s²

119 |
120 |
121 | 122 |
123 |
124 | 125 |
126 |
127 |

Netuno

128 |

Distância do Sol: 4,495 × 10^9 km

129 |

Período orbital: 165 anos

130 |

Área da superfície: 7,618 × 10^9 km²

131 |

Raio: 24.622 km

132 |

Gravidade: 11,15 m/s²

133 |
134 |
135 |
136 |
137 | 138 | -------------------------------------------------------------------------------- /project27/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | background: url('img/background.png'); 3 | } 4 | 5 | .container { 6 | width: 90vw; 7 | height: 70vh; 8 | position: relative; 9 | 10 | display: flex; 11 | justify-content: space-around; 12 | align-items: flex-start; 13 | flex-wrap: wrap; 14 | } 15 | 16 | .sun { 17 | width: 10vw; 18 | height: 18vh; 19 | background-color: #ffc21a; 20 | border-radius: 0 200px 200px 0; 21 | box-shadow: 0 0 50px 5px #ff8c1a; 22 | position: absolute; 23 | left: -6vw; 24 | top: 13vh; 25 | } 26 | 27 | .card:nth-child(1) { 28 | margin-top: 4vh; 29 | } 30 | 31 | .card:nth-child(2) { 32 | margin-top: 10vh; 33 | } 34 | 35 | .card:nth-child(3) { 36 | margin-top: 16vh; 37 | } 38 | 39 | .card:nth-child(4) { 40 | margin-top: 24vh; 41 | } 42 | 43 | .card:nth-child(5) { 44 | margin-top: 32vh; 45 | } 46 | 47 | .card:nth-child(6) { 48 | margin-top: 38vh; 49 | } 50 | 51 | .card:nth-child(7) { 52 | margin-top: 44vh; 53 | } 54 | 55 | .card:nth-child(8) { 56 | margin-top: 50vh; 57 | } 58 | 59 | .cardImg img { 60 | max-width: 50px; 61 | height: auto; 62 | z-index: 1; 63 | cursor: pointer; 64 | } 65 | 66 | .cardContent { 67 | width: 0px; 68 | height: 0px; 69 | border-radius: 50%; 70 | background: white; 71 | padding-left: 20px; 72 | 73 | display: flex; 74 | justify-content: center; 75 | align-items: start; 76 | flex-direction: column; 77 | 78 | visibility: hidden; 79 | z-index: 0; 80 | } 81 | 82 | .cardContent h2 { 83 | align-self: center; 84 | margin-bottom: 20px; 85 | margin-left: -30px; 86 | font-family: 'Nerko One', sans-serif; 87 | font-size: 30px; 88 | } 89 | 90 | .cardContent p { 91 | font-family: 'Montserrat', sans-serif; 92 | font-size: 15px; 93 | } 94 | 95 | .cardImg:hover img { 96 | max-width: 160px; 97 | position: absolute; 98 | top: 35%; 99 | left: 35%; 100 | } 101 | 102 | .cardImg:hover ~ .cardContent { 103 | width: 300px; 104 | height: 300px; 105 | visibility: visible; 106 | position: absolute; 107 | top: 50%; 108 | left: 40%; 109 | } 110 | 111 | 112 | /*PHONE VERSION*/ 113 | @media (max-width: 800px){ 114 | .sun { 115 | width: 17vw; 116 | height: 15vh; 117 | border-radius: 0 103px 110px 0; 118 | left: -5vw; 119 | top: 8vh; 120 | } 121 | 122 | .card:nth-child(1) { 123 | margin-top: 10vh; 124 | } 125 | 126 | .card:nth-child(2) { 127 | margin-top: 15vh; 128 | } 129 | 130 | .card:nth-child(3) { 131 | margin-top: 19vh; 132 | } 133 | 134 | .card:nth-child(4) { 135 | margin-top: 24vh; 136 | } 137 | 138 | .card:nth-child(5) { 139 | margin-top: 30vh; 140 | } 141 | 142 | .card:nth-child(6) { 143 | margin-top: 36vh; 144 | } 145 | 146 | .card:nth-child(7) { 147 | margin-top: 41vh; 148 | } 149 | 150 | .card:nth-child(8) { 151 | margin-top: 46vh; 152 | } 153 | 154 | .cardImg img { 155 | max-width: 20px; 156 | } 157 | 158 | .cardImg:hover img { 159 | max-width: 60px; 160 | } 161 | 162 | .cardImg:hover ~ .cardContent { 163 | width: 150px; 164 | height: 150px; 165 | } 166 | 167 | .cardContent h2 { 168 | margin-bottom: 7px; 169 | font-size: 15px; 170 | } 171 | 172 | .cardContent p { 173 | font-size: 7px; 174 | } 175 | } -------------------------------------------------------------------------------- /project28/img/pants-blue.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pcaffa/30daysCSS/836fa30c209f60ff6140f3f1a3580425a234c6a3/project28/img/pants-blue.png -------------------------------------------------------------------------------- /project28/img/pants-orange.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pcaffa/30daysCSS/836fa30c209f60ff6140f3f1a3580425a234c6a3/project28/img/pants-orange.png -------------------------------------------------------------------------------- /project28/img/pants-pink.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pcaffa/30daysCSS/836fa30c209f60ff6140f3f1a3580425a234c6a3/project28/img/pants-pink.png -------------------------------------------------------------------------------- /project28/img/pants-yellow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pcaffa/30daysCSS/836fa30c209f60ff6140f3f1a3580425a234c6a3/project28/img/pants-yellow.png -------------------------------------------------------------------------------- /project28/project28.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Projeto 28 - Card com efeitos hover e focus 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 |
17 | Sobre 18 | Projetos 19 |
20 |
21 |
22 |
23 | Pink 24 | Blue 25 | Yellow 26 | Orange 27 | 28 |
29 |
30 |
31 | 32 |
33 |
Pants
34 |

Pick a Color

35 | 36 |
37 |
38 |
39 |
40 |
41 | 42 | -------------------------------------------------------------------------------- /project28/style.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --pink: #FDA4AF; 3 | --darkPink: #BE123C; 4 | --lightPink:#FFE4E6; 5 | --lightBlue:#dbeafe; 6 | --darkBlue: #1D4ED8; 7 | --blue: #93c5fd; 8 | --lightYellow: #fef08a; 9 | --darkYellow: #FFE500; 10 | --yellow: #fbbf24; 11 | --orange:#fb923c; 12 | --lightOrange: #fdba74; 13 | --darkOrange:#ea580c; 14 | } 15 | 16 | body { 17 | background: #1c1917; 18 | } 19 | 20 | .general { 21 | font-family: 'Quicksand', sans-serif; 22 | width: 300px; 23 | height: 400px; 24 | } 25 | 26 | .general a { 27 | position: absolute; 28 | z-index: 10; 29 | text-decoration: none; 30 | font-size: 15px; 31 | color: #BE123C; 32 | font-weight: 600; 33 | top: 67%; 34 | left: 41%; 35 | transition: 0.5s ease-in-out; 36 | } 37 | 38 | .general:hover a { 39 | transform: translateY(-45px) scale(1.1,1.1); 40 | } 41 | 42 | .general a:nth-child(2){ 43 | color: #1D4ED8; 44 | left: 45.5%; 45 | } 46 | 47 | .general a:nth-child(3){ 48 | color: #eab308; 49 | left: 50%; 50 | } 51 | 52 | .general a:nth-child(4){ 53 | color: #EA580C; 54 | left: 55%; 55 | } 56 | 57 | .general a:focus ~ .container { 58 | --color: var(--pink); 59 | --darkColor: var(--darkPink); 60 | --lightColor: var(--lightPink); 61 | } 62 | 63 | .general a:focus ~ .container .card .productImg{ 64 | background: url('img/pants-pink.png'); 65 | } 66 | 67 | .general a:nth-child(2):focus ~ .container { 68 | --color: var(--blue); 69 | --darkColor: var(--darkBlue); 70 | --lightColor: var(--lightBlue); 71 | } 72 | 73 | .general a:nth-child(2):focus ~ .container .card .productImg{ 74 | background: url('img/pants-blue.png'); 75 | } 76 | 77 | .general a:nth-child(3):focus ~ .container { 78 | --color: var(--yellow); 79 | --darkColor: var(--darkYellow); 80 | --lightColor: var(--lightYellow); 81 | } 82 | 83 | .general a:nth-child(3):focus ~ .container .card .productImg{ 84 | background: url('img/pants-yellow.png'); 85 | } 86 | 87 | .general a:nth-child(4):focus ~ .container { 88 | --color: var(--orange); 89 | --darkColor: var(--darkOrange); 90 | --lightColor: var(--lightOrange); 91 | } 92 | 93 | .general a:nth-child(4):focus ~ .container .card .productImg{ 94 | background: url('img/pants-orange.png'); 95 | } 96 | 97 | .general .container { 98 | width: 300px; 99 | height: 400px; 100 | --color: var(--pink); 101 | --darkColor: var(--darkPink); 102 | --lightColor: var(--lightPink); 103 | } 104 | 105 | .general .container .card { 106 | width: 300px; 107 | height: 400px; 108 | background: var(--lightColor); 109 | border-radius: 10px; 110 | z-index: -10; 111 | display: flex; 112 | justify-content: space-around; 113 | align-items: center; 114 | flex-direction: column; 115 | } 116 | 117 | .general .container .card::before { 118 | content: ''; 119 | position: absolute; 120 | top: 25%; 121 | width: 300px; 122 | height: 84px; 123 | border-radius: 10px 10px 90px 90px; 124 | background: var(--color); 125 | transition: 0.5s ease-in-out; 126 | } 127 | 128 | .general:hover .container .card::before { 129 | height: 210px; 130 | border-radius: 10px 10px 50px 50px; 131 | } 132 | 133 | .general .container .card .productImg{ 134 | width: 200px; 135 | height: 200px; 136 | background: url('img/pants-pink.png'); 137 | z-index: 10; 138 | transition: 0.5s ease-in-out; 139 | } 140 | 141 | .general:hover .container .card .productImg { 142 | transform: translateY(-13px) scale(0.7,0.7); 143 | } 144 | 145 | .general .container .content { 146 | display: flex; 147 | align-items: center; 148 | justify-content: space-around; 149 | flex-direction: column; 150 | margin: 10px; 151 | } 152 | 153 | .general .container .content .productName{ 154 | font-size: 30px; 155 | font-family: 'Montserrat', sans-serif; 156 | font-weight: 500; 157 | color: var(--darkColor); 158 | text-transform: uppercase; 159 | margin: 3px; 160 | transition: 0.5s ease-in-out; 161 | } 162 | 163 | .general:hover .container .content .productName { 164 | transform: translateY(-60px) scale(1.2,1.2); 165 | } 166 | 167 | .container .content h3 { 168 | font-family: 'Quicksand', sans-serif; 169 | color: white; 170 | text-shadow: 1px 1px 5px var(--darkColor); 171 | margin-bottom: 35px; 172 | transition: 0.5s ease-in-out; 173 | } 174 | 175 | .general:hover .container .content h3 { 176 | transform: translateY(-36px) scale(1.2,1.2); 177 | margin-bottom: 50px; 178 | } 179 | 180 | .general .container .content .colors { 181 | font-family: 'Quicksand', sans-serif; 182 | font-size: 15px; 183 | font-weight: 600; 184 | margin-bottom: 15px; 185 | transition: 0.5s ease-in-out; 186 | } 187 | 188 | .general:hover .container .content .colors{ 189 | transform: translateY(-40px) 190 | } 191 | 192 | .general .container .content .colors input[type="radio"] { 193 | background-color: initial; 194 | cursor: pointer; 195 | margin: 5px; 196 | } 197 | 198 | .general .container .content button { 199 | font-family: 'Quicksand', sans-serif; 200 | font-weight: 600; 201 | width: 80px; 202 | height: 30px; 203 | margin-bottom: 10px; 204 | margin-top: 20px; 205 | border-radius: 5px; 206 | background: white; 207 | color: var(--darkColor); 208 | border: 1px solid var(--darkColor); 209 | cursor: pointer; 210 | transition: 0.5s ease-in-out; 211 | } 212 | 213 | .general:hover .container .content button { 214 | transform: translateY(-30px) scale(1.2,1.2); 215 | } 216 | 217 | /*PHONE VERSION*/ 218 | @media (max-width: 800px){ 219 | .general a { 220 | left: 24%; 221 | } 222 | 223 | .general a:nth-child(2) { 224 | left: 36.5%; 225 | } 226 | 227 | .general a:nth-child(3) { 228 | left: 48%; 229 | } 230 | 231 | .general a:nth-child(4) { 232 | left: 63%; 233 | } 234 | 235 | .general .container .card::before { 236 | top: 16%; 237 | } 238 | } 239 | 240 | /*PHONE VERSION*/ 241 | @media (max-width: 800px) and (min-width: 370px){ 242 | .general a { 243 | top: 62%; 244 | } 245 | 246 | .general .container .card::before { 247 | top: 19%; 248 | } 249 | } -------------------------------------------------------------------------------- /project29/project29.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Projeto 29 - Icones com efeito 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 |
17 | Sobre 18 | Projetos 19 |
20 |
21 |
22 | 28 |
29 | 30 | -------------------------------------------------------------------------------- /project29/style.css: -------------------------------------------------------------------------------- 1 | ul { 2 | padding: 0; 3 | margin: 0; 4 | display: flex; 5 | flex-wrap: wrap; 6 | } 7 | 8 | ul li { 9 | list-style-type: none; 10 | width: 120px; 11 | height: 120px; 12 | margin: 0 20px; 13 | border:2px solid #7096e7; 14 | border-radius: 50%; 15 | transition: all 0.5s; 16 | position: relative; 17 | 18 | display: flex; 19 | align-items: center; 20 | justify-content: center; 21 | } 22 | 23 | ul li:before { 24 | content: ''; 25 | position: absolute; 26 | top: 0; 27 | left: 0; 28 | width: 100%; 29 | height: 100%; 30 | background-color: #7096e7; 31 | border-radius: 50%; 32 | transition: all 0.5s; 33 | opacity: 0; 34 | z-index: -1; 35 | } 36 | 37 | ul li:hover:before { 38 | opacity: 1; 39 | transform: scale(0.8); 40 | } 41 | 42 | ul li:after { 43 | content: ''; 44 | position: absolute; 45 | top: 0; 46 | left: 0; 47 | width: 100%; 48 | height: 100%; 49 | background-color: transparent; 50 | border-radius: 50%; 51 | border:2px dashed #2e86de; 52 | box-sizing: border-box; 53 | transition: all 0.5s; 54 | opacity: 0; 55 | z-index: -1; 56 | } 57 | 58 | 59 | ul li:hover:after { 60 | opacity: 1; 61 | animation: rotating 10s linear infinite; 62 | } 63 | 64 | ul li i { 65 | font-size: 48px; 66 | color: #7096e7; 67 | transition: .5s; 68 | } 69 | 70 | ul li:hover i { 71 | color: #f779a3; 72 | } 73 | 74 | @keyframes rotating { 75 | 0% { transform:scale(0.92) rotate(0deg); } 76 | 100% { transform:scale(0.92) rotate(360deg); } 77 | } -------------------------------------------------------------------------------- /project3/project3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Projeto 3 - Ícones Saltitantes 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 |
16 | Sobre 17 | Projetos 18 |
19 |
20 |
21 |
22 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 |
38 |
39 | 40 | 41 | -------------------------------------------------------------------------------- /project3/style.css: -------------------------------------------------------------------------------- 1 | main .icons { 2 | display: flex; 3 | align-items: center; 4 | justify-content: space-around; 5 | width: 80vw; 6 | height: 70vh; 7 | } 8 | 9 | span { 10 | width: 7vw; 11 | height: 13vh; 12 | border-radius: 50%; 13 | background: lavender; 14 | border: 0.5px solid darkgray; 15 | box-shadow: 2px 5px 10px black, inset -10px -10px 10px darkgray, inset 3px 3px 5px #FFF; 16 | 17 | display: flex; 18 | justify-content: center; 19 | align-items: center; 20 | } 21 | 22 | span:hover { 23 | animation: bounce 2.5s ease-in-out infinite; 24 | } 25 | 26 | span a { 27 | font-size: 30px; 28 | text-decoration: none; 29 | color: black; 30 | } 31 | 32 | span:hover a.fa-html5{ 33 | color: #DD4B25; 34 | } 35 | 36 | span:hover a.fa-css3-alt{ 37 | color: #0273B7; 38 | } 39 | 40 | span:hover a.fa-js-square{ 41 | color: #DD9D27; 42 | } 43 | 44 | span:hover a.fa-react{ 45 | color: #5DD3F3; 46 | } 47 | 48 | span:hover a.fa-bootstrap{ 49 | color: #533C78; 50 | } 51 | 52 | @keyframes bounce { 53 | 0% {transform: scale(1,1) translateY(0);} 54 | 5% {transform: scale(1.1,0.9) translateY(0);} 55 | 25% {transform: scale(0.9,1.1) translateY(-150px);} 56 | 50% {transform: scale(1.1,0.9) translateY(0);} 57 | 60% {transform: scale(0.9,1.1) translateY(-100px);} 58 | 70% {transform: scale(1.1,0.9) translateY(0);} 59 | 100% {transform: scale(1,1) translateY(0);} 60 | } 61 | 62 | 63 | /*PHONE VERSION*/ 64 | @media (max-width: 800px) { 65 | span { 66 | height: 5vh; 67 | } 68 | 69 | span a { 70 | font-size: 12px; 71 | } 72 | } -------------------------------------------------------------------------------- /project30/project30.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Projeto 30 - Kitty in the Box Animation 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 |
17 | Sobre 18 | Projetos 19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 | 50 |
51 | 52 |
53 |

Happy New Year!

54 |
55 |
56 |
57 | 58 | -------------------------------------------------------------------------------- /project30/style.css: -------------------------------------------------------------------------------- 1 | body{ 2 | background-color: #c9acd1; 3 | } 4 | 5 | .container { 6 | width: 500px; 7 | height: 500px; 8 | position: absolute; 9 | margin: auto; 10 | top: 0; 11 | bottom: 0; 12 | left: 0; 13 | right: 0; 14 | } 15 | 16 | .box { 17 | width: 200px; 18 | height: 120px; 19 | background-color: #ffff9d; 20 | position: relative; 21 | top: 200px; 22 | left: 150px; 23 | background-image: radial-gradient(#f7dd5e 5px, transparent 5px); 24 | background-size: 35px 35px; 25 | background-position: -5px -12px; 26 | } 27 | 28 | .b1, .b2 { 29 | background-color: #ffff9d; 30 | width: 50px; 31 | height: 8px; 32 | position: relative; 33 | } 34 | 35 | .b1 { 36 | right: 48px; 37 | transform: rotate(-20deg); 38 | transform-origin: right; 39 | } 40 | 41 | .b2 { 42 | left: 198px; 43 | bottom: 8px; 44 | transform: rotate(20deg); 45 | transform-origin: left; 46 | } 47 | 48 | .cat { 49 | position: relative; 50 | bottom: 40px; 51 | left: 40px; 52 | z-index: -1; 53 | transition: 1s; 54 | } 55 | 56 | .box:hover .cat { 57 | transform: translateY(-60px); 58 | } 59 | 60 | .face { 61 | width: 120px; 62 | height: 140px; 63 | background-color: white; 64 | border-radius: 50%; 65 | } 66 | 67 | .lower { 68 | width: 140px; 69 | height: 40px; 70 | background-color: white; 71 | border-radius: 0 0 140px 140px; 72 | position: relative; 73 | top: 60px; 74 | right: 10px; 75 | } 76 | 77 | .ear-l, .ear-r { 78 | width: 0; 79 | height: 0; 80 | border-bottom: 35px solid white; 81 | border-left: 18px solid transparent; 82 | border-right: 18px solid transparent; 83 | position: relative; 84 | } 85 | 86 | .ear-l { 87 | bottom: 55px; 88 | transform: rotate(-40deg); 89 | } 90 | 91 | .ear-r { 92 | bottom: 90px; 93 | left: 87px; 94 | transform: rotate(40deg); 95 | } 96 | 97 | .eye-l, .eye-r { 98 | width: 13px; 99 | height: 15px; 100 | position: relative; 101 | } 102 | 103 | .eye-l { 104 | bottom: 65px; 105 | left: 20px; 106 | } 107 | 108 | .eye-r { 109 | bottom: 80px; 110 | left: 83px; 111 | } 112 | 113 | .eye { 114 | width: 100%; 115 | height: 100%; 116 | background-color: black; 117 | border-radius: 50%; 118 | animation: blink 2s infinite; 119 | } 120 | 121 | .nose { 122 | width: 0; 123 | height: 0; 124 | border-top: 10px solid pink; 125 | border-left: 10px solid transparent; 126 | border-right: 10px solid transparent; 127 | position: relative; 128 | bottom: 72px; 129 | left: 48px; 130 | } 131 | 132 | .hat { 133 | width: 0; 134 | height: 0; 135 | border-bottom: 100px solid #ff6347; 136 | border-left: 35px solid transparent; 137 | border-right: 35px solid transparent; 138 | position: relative; 139 | bottom: 220px; 140 | left: 40px; 141 | transform: rotate(10deg); 142 | } 143 | 144 | .deco { 145 | position: relative; 146 | right: 2px; 147 | top: 2px; 148 | } 149 | 150 | .d1, .d2, .d3, .d4 { 151 | width: 5px; 152 | height: 40px; 153 | background-color: #ffff9d; 154 | position: relative; 155 | } 156 | 157 | .d1 { 158 | bottom: 20px; 159 | } 160 | 161 | .d2 { 162 | bottom: 60px; 163 | transform: rotate(45deg); 164 | } 165 | 166 | .d3 { 167 | bottom: 100px; 168 | transform: rotate(90deg); 169 | } 170 | 171 | .d4 { 172 | bottom: 140px; 173 | transform: rotate(135deg); 174 | } 175 | 176 | .shadow { 177 | width: 250px; 178 | height: 30px; 179 | position: relative; 180 | background-color: #97819d; 181 | border-radius: 50%; 182 | top: 185px; 183 | left: 125px; 184 | opacity: .3; 185 | z-index: -1; 186 | } 187 | 188 | .message { 189 | width: 460px; 190 | height: 100px; 191 | position: relative; 192 | top: 205px; 193 | left: 25px; 194 | opacity: 0; 195 | } 196 | 197 | .message h2 { 198 | font: 60px 'Parisienne', cursive; 199 | color: #ffff9d; 200 | text-shadow: #585853 2px 5px 5px; 201 | } 202 | 203 | .box:hover ~ .message{ 204 | opacity: 1; 205 | transition: 1.5s; 206 | } 207 | 208 | @keyframes blink{ 209 | 20% {transform: scaleY(0)} 210 | } -------------------------------------------------------------------------------- /project4/project4.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Projeto 4 - Preloader Animado 7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 |
15 | Sobre 16 | Projetos 17 |
18 |
19 |
20 |
21 | 22 | 23 | 24 |
25 |
26 | 27 | -------------------------------------------------------------------------------- /project4/style.css: -------------------------------------------------------------------------------- 1 | main .loader { 2 | width: 80vw; 3 | height: 70vh; 4 | margin-top: 20vw; 5 | margin-left: 90vh; 6 | 7 | position: relative; 8 | } 9 | 10 | span { 11 | position: absolute; 12 | width: 5vw; 13 | height: 10vh; 14 | 15 | background: rgb(146, 58, 247); 16 | border-radius: 4px; 17 | animation: chase 2s linear infinite; 18 | } 19 | 20 | span:nth-child(2) 21 | { 22 | background: rgb(167, 96, 248); 23 | animation-delay: 0.7s; 24 | } 25 | 26 | span:nth-child(1) 27 | { 28 | background: rgb(206, 170, 247); 29 | animation-delay: 1.4s; 30 | } 31 | 32 | @keyframes chase 33 | { 34 | 0% {top: 0; left: 0;} 35 | 12.5% { top: 0; left: 6vw;} 36 | 25% { top: 0; left: 6vw;} 37 | 37.5% { top: 13vh; left: 6vw;} 38 | 50% { top: 13vh; left: 6vw;} 39 | 62.5% { top: 13vh ; left: 0;} 40 | 75% { top: 13vh ; left: 0;} 41 | 82.5% { top: 0; left: 0;} 42 | 100% { top: 0; left: 0;} 43 | } 44 | 45 | 46 | /*PHONE VERSION*/ 47 | @media (max-width: 800px) { 48 | 49 | main .loader { 50 | margin-top: 80vw; 51 | margin-left: 20vh; 52 | } 53 | 54 | span { 55 | width: 12vw; 56 | height: 7vh; 57 | } 58 | 59 | @keyframes chase 60 | { 61 | 0% {top: 0; left: 0;} 62 | 12.5% { top: 0; left: 15vw;} 63 | 25% { top: 0; left: 15vw;} 64 | 37.5% { top: 10vh; left: 15vw;} 65 | 50% { top: 10vh; left: 15vw;} 66 | 62.5% { top: 10vh ; left: 0;} 67 | 75% { top: 10vh ; left: 0;} 68 | 82.5% { top: 0; left: 0;} 69 | 100% { top: 0; left: 0;} 70 | } 71 | } -------------------------------------------------------------------------------- /project5/img/lampada.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pcaffa/30daysCSS/836fa30c209f60ff6140f3f1a3580425a234c6a3/project5/img/lampada.png -------------------------------------------------------------------------------- /project5/project5.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Projeto 5 - Acenda a Luz! 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 |
17 | Sobre 18 | Projetos 19 |
20 |
21 |
22 |
23 | lamp 24 |

Passe o mouse para acender a luz

25 |
26 |

27 |

28 |

29 |

30 |

31 |
32 |
Ícones feitos por Good Ware from www.flaticon.com
33 |
34 |
35 | 36 | -------------------------------------------------------------------------------- /project5/style.css: -------------------------------------------------------------------------------- 1 | #body-lamp { 2 | background: #131313; 3 | } 4 | 5 | .container { 6 | max-width: 100vw; 7 | height: 80vh; 8 | 9 | display: inline-flex; 10 | justify-content: center; 11 | align-items: center; 12 | flex-direction: column; 13 | } 14 | 15 | .container img { 16 | width: 20vw; 17 | height: auto; 18 | filter: grayscale(100%); 19 | } 20 | 21 | .container h2 { 22 | margin-top: 3vw; 23 | font-size: 2em; 24 | color: #6C6A6A; 25 | } 26 | 27 | .container .icones { 28 | margin-top: 8vh; 29 | width: 60vw; 30 | 31 | display: flex; 32 | justify-content: space-between; 33 | align-items: center; 34 | 35 | visibility: hidden; 36 | } 37 | 38 | .container .icones .fab { 39 | font-size: 3em; 40 | text-decoration: none; 41 | } 42 | 43 | .container .icones .fa-html5 { 44 | color: #F16529; 45 | } 46 | 47 | .container .icones .fa-css3-alt { 48 | color: #2965F1; 49 | } 50 | 51 | .container .icones .fa-js-square { 52 | color: #F7DF1E; 53 | } 54 | 55 | .container .icones .fa-bootstrap { 56 | color: #563D7C; 57 | } 58 | 59 | .container .icones .fa-react { 60 | color: #00D8FF; 61 | } 62 | 63 | .container .credits { 64 | font-size: .5em; 65 | text-decoration: none; 66 | color: #6C6A6A; 67 | margin-top: 5vh; 68 | } 69 | 70 | .container .credits a { 71 | text-decoration: none; 72 | color: #292929; 73 | position: relative; 74 | } 75 | 76 | .container img:hover { 77 | filter: drop-shadow(0px -6px 11px rgba(253, 243, 152, 0.95)); 78 | } 79 | 80 | .container img:hover ~ h2 { 81 | color: white; 82 | text-shadow: 0px 4px 6px #F7DF1E; 83 | } 84 | 85 | .container img:hover ~ .icones { 86 | visibility: visible; 87 | } 88 | 89 | 90 | /*PHONE VERSION*/ 91 | @media (max-width: 800px) { 92 | .container h2 { 93 | font-size: 1em; 94 | } 95 | 96 | .container .icones .fab{ 97 | font-size: 1.5em; 98 | } 99 | 100 | .container .credits { 101 | font-size: .4em; 102 | } 103 | } -------------------------------------------------------------------------------- /project6/img/image.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pcaffa/30daysCSS/836fa30c209f60ff6140f3f1a3580425a234c6a3/project6/img/image.jpg -------------------------------------------------------------------------------- /project6/project6.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Projeto 6 - Fundo de texto animado 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 |
16 | Sobre 17 | Projetos 18 |
19 |
20 |
21 |

Desafio CSS

22 |
23 | 24 | -------------------------------------------------------------------------------- /project6/style.css: -------------------------------------------------------------------------------- 1 | h1 { 2 | 3 | font-size: 10em; 4 | text-transform: uppercase; 5 | background: url(img/image.jpg); 6 | background-size: 10vw 15vh; 7 | background-clip: text; 8 | -webkit-background-clip: text; 9 | color: transparent; 10 | animation: text-background 40s linear infinite; 11 | } 12 | 13 | @keyframes text-background { 14 | from { background-position: 0 0 } 15 | to { background-position: 100% 100% } 16 | } 17 | 18 | 19 | /*PHONE VERSION*/ 20 | @media (max-width: 800px) { 21 | h1 { 22 | font-size: 2.5em; 23 | background-size: 10vw 10vh; 24 | } 25 | } -------------------------------------------------------------------------------- /project7/project7.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Projeto 7 - Loading Screen Animation 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 |
16 | Sobre 17 | Projetos 18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 | 26 |
27 |
28 |
29 | 30 |
31 |
32 |
33 |
34 |
35 | 36 | -------------------------------------------------------------------------------- /project7/style.css: -------------------------------------------------------------------------------- 1 | .loading { 2 | position: absolute; 3 | width: 40vw; 4 | height: 40vh; 5 | 6 | display: flex; 7 | align-items:center; 8 | justify-content:center; 9 | } 10 | 11 | .obj { 12 | width: .5vw; 13 | height: 0; 14 | background: rgb(42, 1, 109); 15 | margin: 0 .4vh; 16 | border-radius: 10px; 17 | animation: loading .9s infinite; 18 | } 19 | 20 | .obj:nth-child(2) {animation-delay: .1s;} 21 | .obj:nth-child(3) {animation-delay: .2s;} 22 | .obj:nth-child(4) {animation-delay: .3s;} 23 | .obj:nth-child(5) {animation-delay: .4s;} 24 | .obj:nth-child(6) {animation-delay: .5s;} 25 | .obj:nth-child(7) {animation-delay: .6s;} 26 | .obj:nth-child(8) {animation-delay: .7s;} 27 | .obj:nth-child(9) {animation-delay: .8s;} 28 | 29 | @keyframes loading { 30 | 0% { 31 | height: 0; 32 | } 33 | 25% { 34 | background: rgb(128, 71, 219); 35 | } 36 | 50% { 37 | background: rgb(42, 1, 109); 38 | height: 10vh; 39 | } 40 | 75% { 41 | background: rgb(128, 71, 219); 42 | } 43 | 100% { 44 | height: 0; 45 | } 46 | } 47 | 48 | /*PHONE VERSION*/ 49 | @media (max-width: 800px) { 50 | .obj { 51 | width: 1.5vw; 52 | margin: 0 .5vh; 53 | } 54 | 55 | } -------------------------------------------------------------------------------- /project8/project8.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Projeto 8 - Loading 3D Animation 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 |
17 | Sobre 18 | Projetos 19 |
20 |
21 |
22 |
23 |
24 |
25 | Loading... 26 |
27 |
28 | Loading... 29 |
30 |
31 | Loading... 32 |
33 |
34 | Loading... 35 |
36 |
37 |
38 |
39 | 40 | -------------------------------------------------------------------------------- /project8/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | } 4 | 5 | .contain { 6 | display: grid; 7 | height: 100vh; 8 | -webkit-perspective: 1000px; 9 | perspective: 1000px; 10 | -webkit-perspective-origin: 50%; 11 | perspective-origin: 50%; 12 | place-items: center; 13 | } 14 | 15 | .loader { 16 | height: 140px; 17 | width: 550px; 18 | position: relative; 19 | transform-style: preserve-3d; 20 | animation: spin 4s infinite linear; 21 | } 22 | 23 | 24 | @keyframes spin { 25 | 0% { 26 | transform: rotateX(0deg); 27 | } 28 | 20% { 29 | transform: rotateX(0deg); 30 | } 31 | 25% { 32 | transform: rotateX(-90deg); 33 | } 34 | 45% { 35 | transform: rotateX(-90deg); 36 | } 37 | 50% { 38 | transform: rotateX(-180deg); 39 | } 40 | 70% { 41 | transform: rotateX(-180deg); 42 | } 43 | 75% { 44 | transform: rotateX(-270deg); 45 | } 46 | 95% { 47 | transform: rotateX(-270deg); 48 | } 49 | 100% { 50 | transform: rotateX(-360deg); 51 | } 52 | } 53 | 54 | .face { 55 | height: 100%; 56 | width: 100%; 57 | font: 60px 'Poppins', sans-serif; 58 | text-transform: uppercase; 59 | text-align: center; 60 | position: absolute; 61 | padding: 26px; 62 | letter-spacing: 20px; 63 | } 64 | 65 | .front { 66 | background-color: #888ae9; 67 | color: #ffffff; 68 | transform: translateZ(70px); 69 | } 70 | 71 | .back { 72 | background-color: #888ae9 ; 73 | color: #ffffff; 74 | transform: translateZ(-70px) rotateX(180deg) ; 75 | } 76 | 77 | .top { 78 | background-color: #ffadc8; 79 | color: #000000; 80 | transform: rotateX(-270deg) translateY(-70px); 81 | transform-origin: top center; 82 | } 83 | 84 | .bottom { 85 | background-color: #ffadc8; 86 | color: #000000; 87 | transform: rotateX(-90deg) translateY(70px) ; 88 | transform-origin: bottom center; 89 | } 90 | 91 | /*PHONE VERSION*/ 92 | @media (max-width: 800px) { 93 | .loader { 94 | height: 70px; 95 | width: 330px; 96 | } 97 | 98 | .face { 99 | font: 20px 'Poppins', sans-serif; 100 | padding: 20px; 101 | } 102 | 103 | .front { 104 | transform: translateZ(35px); 105 | } 106 | 107 | .back { 108 | transform: translateZ(-35px) rotateX(180deg) ; 109 | } 110 | 111 | .top { 112 | transform: rotateX(-270deg) translateY(-35px); 113 | } 114 | 115 | .bottom { 116 | transform: rotateX(-90deg) translateY(35px) ; 117 | } 118 | } -------------------------------------------------------------------------------- /project9/project9.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Projeto 9 - Botão com efeito hover 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 |
17 | Sobre 18 | Projetos 19 |
20 |
21 |
22 | 23 |
24 | 25 | -------------------------------------------------------------------------------- /project9/style.css: -------------------------------------------------------------------------------- 1 | .btn { 2 | border: 2px solid rgb(139, 23, 8); 3 | background: none; 4 | color: rgb(139, 23, 8); 5 | padding: 3vh 4vw; 6 | font: 2em 'Poppins', sans-serif; 7 | text-transform: uppercase; 8 | cursor: pointer; 9 | position: relative; 10 | 11 | overflow: hidden; 12 | transition: all 0.8s ease .1s; 13 | } 14 | 15 | .btn:hover 16 | { 17 | color: white; 18 | border-radius: 2px; 19 | } 20 | 21 | .btn::before 22 | { 23 | content: ''; 24 | position: absolute; 25 | width: 100%; 26 | height: 0%; 27 | background: linear-gradient(170deg, rgb(139, 23, 8) 0% , rgb(245, 109, 92) 100%); 28 | border-radius: 0 0 75% 75%; 29 | 30 | top: 0; 31 | left: 0; 32 | z-index: -1; 33 | 34 | transition: all 0.8s; 35 | } 36 | 37 | .btn:hover::before{ 38 | height: 190%; 39 | } 40 | 41 | 42 | /*PHONE VERSION*/ 43 | @media (max-width: 800px) { 44 | .btn { 45 | padding: 2vh 3vw; 46 | font: 1em 'Poppins', sans-serif; 47 | } 48 | } -------------------------------------------------------------------------------- /projects.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 30 Dias de CSS - Projetos 7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 |
15 | Sobre 16 | Projetos 17 |
18 |
19 |
20 |
21 | 22 | Projeto 01 23 | Projeto 02 24 | Projeto 03 25 | Projeto 04 26 | Projeto 05 27 | 28 | Projeto 06 29 | Projeto 07 30 | Projeto 08 31 | Projeto 09 32 | Projeto 10 33 | 34 | Projeto 11 35 | Projeto 12 36 | Projeto 13 37 | Projeto 14 38 | Projeto 15 39 | 40 | Projeto 16 41 | Projeto 17 42 | Projeto 18 43 | Projeto 19 44 | Projeto 20 45 | 46 | Projeto 21 47 | Projeto 22 48 | Projeto 23 49 | Projeto 24 50 | Projeto 25 51 | 52 | Projeto 26 53 | Projeto 27 54 | Projeto 28 55 | Projeto 29 56 | Projeto 30 57 |
58 |
59 | 60 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | } 5 | 6 | body { 7 | height: 100vh; 8 | display: inline; 9 | 10 | font: 18px 'Nunito', sans-serif; 11 | background: #ffadc8; 12 | color: rgb(42, 1, 109); 13 | } 14 | 15 | 16 | header { 17 | font: 22px 'Nunito', sans-serif; 18 | font-weight: bold; 19 | padding: 2vw; 20 | text-align: center; 21 | background:#ffadc8; 22 | } 23 | 24 | .links a { 25 | padding:1vh; 26 | text-decoration: none; 27 | transition: color 0.2s linear; 28 | } 29 | 30 | .links a:hover { 31 | color: rgb(137, 97, 207); 32 | } 33 | 34 | main { 35 | width: 80vw; 36 | height: 80vh; 37 | background: linear-gradient(329.54deg, #f779a3 0%, #7096e7 100%); 38 | border-radius: 4px; 39 | margin: auto; 40 | 41 | display: flex; 42 | align-items: center; 43 | justify-content: center; 44 | } 45 | 46 | main .container { 47 | text-align: center; 48 | max-width: 33vw; 49 | } 50 | 51 | .about-challenge { 52 | margin: 10vh 0 15vh 0; 53 | } 54 | 55 | main .content { 56 | display: grid; 57 | grid-template-columns: repeat(6, 1fr); 58 | gap: 8vh; 59 | } 60 | 61 | .content a { 62 | padding: 2vh; 63 | border: 1.5px solid rgb(42, 1, 109); 64 | border-radius: 4px; 65 | 66 | font: 18px 'Nunito', sans-serif; 67 | font-weight: bold; 68 | color: rgb(42, 1, 109); 69 | 70 | text-decoration: none; 71 | transition: background-color .5s; 72 | 73 | } 74 | 75 | .content a:hover { 76 | background: #5b6fdf ; 77 | color:#f84480 78 | 79 | } 80 | 81 | .content .disable { 82 | border: 2px solid rgba(42, 1, 109, 0.24); 83 | color: rgba(42, 1, 109, 0.13); 84 | pointer-events: none; 85 | } 86 | 87 | 88 | 89 | /*PHONE VERSION*/ 90 | @media (max-width: 800px) { 91 | 92 | main .container { 93 | font-size: 14px; 94 | max-width: 73vw; 95 | } 96 | 97 | main .content { 98 | display: grid; 99 | grid-template-columns: repeat(3, 1fr); 100 | gap: 2vh; 101 | } 102 | 103 | .content a { 104 | padding: 1.5vh; 105 | font-size: 10px; 106 | } 107 | 108 | } 109 | 110 | @media (max-width: 400px) { 111 | main .container { 112 | font-size: 12px; 113 | max-width: 70vw; 114 | } 115 | 116 | } --------------------------------------------------------------------------------