├── .github ├── Untitled_ Nov 16, 2020 11_41 PM.gif ├── Untitled_ Nov 17, 2020 11_49 PM.gif ├── Untitled_ Nov 18, 2020 11_35 PM.gif ├── Untitled_ Nov 20, 2020 12_05 AM.gif └── assets │ ├── Untitled_ Nov 1, 2020 9_40 PM.gif │ ├── Untitled_ Nov 10, 2020 11_13 PM.gif │ ├── Untitled_ Nov 10, 2020 5_38 AM.gif │ ├── Untitled_ Nov 12, 2020 11_05 PM.gif │ ├── Untitled_ Nov 13, 2020 11_39 PM.gif │ ├── Untitled_ Nov 14, 2020 11_56 PM.gif │ ├── Untitled_ Nov 15, 2020 5_56 PM.gif │ ├── Untitled_ Nov 3, 2020 11_53 PM.gif │ ├── Untitled_ Nov 4, 2020 11_45 PM.gif │ ├── Untitled_ Nov 5, 2020 11_22 PM.gif │ ├── Untitled_ Nov 7, 2020 10_43 PM.gif │ ├── Untitled_ Oct 22, 2020 8_34 PM.gif │ ├── Untitled_ Oct 22, 2020 8_38 PM.gif │ ├── Untitled_ Oct 24, 2020 12_20 PM.gif │ ├── Untitled_ Oct 26, 2020 3_44 PM.gif │ ├── Untitled_ Oct 27, 2020 11_46 PM.gif │ ├── Untitled_ Oct 28, 2020 10_47 PM.gif │ ├── Untitled_ Oct 28, 2020 10_49 PM.gif │ ├── Untitled_ Oct 28, 2020 10_51 PM.gif │ ├── Untitled_ Oct 28, 2020 10_53 PM.gif │ ├── Untitled_ Oct 28, 2020 10_54 PM.gif │ ├── Untitled_ Oct 28, 2020 10_56 PM.gif │ ├── Untitled_ Oct 28, 2020 7_58 PM.gif │ ├── Untitled_ Oct 29, 2020 10_52 PM.gif │ ├── Untitled_ Oct 30, 2020 11_19 PM.gif │ └── Untitled_ Oct 31, 2020 11_48 PM.gif ├── Desafios ├── dia1 │ ├── index.html │ └── style.css ├── dia10 │ ├── img │ │ └── hakuna.jpg │ ├── index.html │ └── style.css ├── dia11 │ ├── index.html │ └── style.css ├── dia12 │ ├── index.html │ └── style.css ├── dia13 │ ├── index.html │ └── style.css ├── dia14 │ ├── img │ │ ├── pumpkin.png │ │ ├── pumpkin_1.png │ │ ├── pumpkin_2.png │ │ └── pumpkin_3.png │ ├── index.html │ └── style.css ├── dia15 │ ├── index.html │ └── style.css ├── dia16 │ ├── img │ │ ├── RiotX_ChampionList_ahri.jpg │ │ ├── RiotX_ChampionList_ashe.jpg │ │ ├── RiotX_ChampionList_blitzcrank.jpg │ │ ├── RiotX_ChampionList_braum.jpg │ │ ├── RiotX_ChampionList_darius.jpg │ │ ├── RiotX_ChampionList_drmundo.jpg │ │ ├── RiotX_ChampionList_ekko.jpg │ │ ├── RiotX_ChampionList_garen.jpg │ │ └── RiotX_ChampionList_janna.jpg │ ├── index.html │ └── style.css ├── dia17 │ ├── index.html │ └── style.css ├── dia18 │ ├── index.html │ └── style.css ├── dia19 │ ├── index.html │ └── style.css ├── dia2 │ ├── index.html │ └── style.css ├── dia20 │ ├── index.html │ └── style.css ├── dia21 │ ├── index.html │ └── style.css ├── dia22 │ ├── index.html │ └── style.css ├── dia23 │ ├── index.html │ ├── main.js │ └── style.css ├── dia24 │ ├── Art.jpg │ ├── Art2.png │ ├── index.html │ ├── main.js │ └── styles.css ├── dia25 │ ├── index.html │ └── style.css ├── dia26 │ ├── index.html │ ├── main.js │ └── style.css ├── dia27 │ ├── index.html │ └── style.css ├── dia28 │ ├── index.html │ └── style.css ├── dia29 │ ├── index.html │ └── style.css ├── dia3 │ ├── index.html │ └── style.css ├── dia30 │ ├── index.html │ ├── main.js │ └── style.css ├── dia4 │ ├── index.html │ └── style.css ├── dia5 │ ├── img │ │ ├── animado.png │ │ ├── bigode.png │ │ ├── emoji.png │ │ └── facebook.png │ ├── index.html │ └── style.css ├── dia6 │ ├── img │ │ └── tanjiro_.png │ ├── index.html │ └── style.css ├── dia7 │ ├── index.html │ └── style.css ├── dia8 │ ├── index.html │ └── style.css └── dia9 │ ├── index.html │ └── style.css ├── LICENSE └── README.md /.github/Untitled_ Nov 16, 2020 11_41 PM.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mattheussAL/30diasCSS/9005a646783c277fa8b6779c23de2963dc27755d/.github/Untitled_ Nov 16, 2020 11_41 PM.gif -------------------------------------------------------------------------------- /.github/Untitled_ Nov 17, 2020 11_49 PM.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mattheussAL/30diasCSS/9005a646783c277fa8b6779c23de2963dc27755d/.github/Untitled_ Nov 17, 2020 11_49 PM.gif -------------------------------------------------------------------------------- /.github/Untitled_ Nov 18, 2020 11_35 PM.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mattheussAL/30diasCSS/9005a646783c277fa8b6779c23de2963dc27755d/.github/Untitled_ Nov 18, 2020 11_35 PM.gif -------------------------------------------------------------------------------- /.github/Untitled_ Nov 20, 2020 12_05 AM.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mattheussAL/30diasCSS/9005a646783c277fa8b6779c23de2963dc27755d/.github/Untitled_ Nov 20, 2020 12_05 AM.gif -------------------------------------------------------------------------------- /.github/assets/Untitled_ Nov 1, 2020 9_40 PM.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mattheussAL/30diasCSS/9005a646783c277fa8b6779c23de2963dc27755d/.github/assets/Untitled_ Nov 1, 2020 9_40 PM.gif -------------------------------------------------------------------------------- /.github/assets/Untitled_ Nov 10, 2020 11_13 PM.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mattheussAL/30diasCSS/9005a646783c277fa8b6779c23de2963dc27755d/.github/assets/Untitled_ Nov 10, 2020 11_13 PM.gif -------------------------------------------------------------------------------- /.github/assets/Untitled_ Nov 10, 2020 5_38 AM.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mattheussAL/30diasCSS/9005a646783c277fa8b6779c23de2963dc27755d/.github/assets/Untitled_ Nov 10, 2020 5_38 AM.gif -------------------------------------------------------------------------------- /.github/assets/Untitled_ Nov 12, 2020 11_05 PM.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mattheussAL/30diasCSS/9005a646783c277fa8b6779c23de2963dc27755d/.github/assets/Untitled_ Nov 12, 2020 11_05 PM.gif -------------------------------------------------------------------------------- /.github/assets/Untitled_ Nov 13, 2020 11_39 PM.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mattheussAL/30diasCSS/9005a646783c277fa8b6779c23de2963dc27755d/.github/assets/Untitled_ Nov 13, 2020 11_39 PM.gif -------------------------------------------------------------------------------- /.github/assets/Untitled_ Nov 14, 2020 11_56 PM.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mattheussAL/30diasCSS/9005a646783c277fa8b6779c23de2963dc27755d/.github/assets/Untitled_ Nov 14, 2020 11_56 PM.gif -------------------------------------------------------------------------------- /.github/assets/Untitled_ Nov 15, 2020 5_56 PM.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mattheussAL/30diasCSS/9005a646783c277fa8b6779c23de2963dc27755d/.github/assets/Untitled_ Nov 15, 2020 5_56 PM.gif -------------------------------------------------------------------------------- /.github/assets/Untitled_ Nov 3, 2020 11_53 PM.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mattheussAL/30diasCSS/9005a646783c277fa8b6779c23de2963dc27755d/.github/assets/Untitled_ Nov 3, 2020 11_53 PM.gif -------------------------------------------------------------------------------- /.github/assets/Untitled_ Nov 4, 2020 11_45 PM.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mattheussAL/30diasCSS/9005a646783c277fa8b6779c23de2963dc27755d/.github/assets/Untitled_ Nov 4, 2020 11_45 PM.gif -------------------------------------------------------------------------------- /.github/assets/Untitled_ Nov 5, 2020 11_22 PM.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mattheussAL/30diasCSS/9005a646783c277fa8b6779c23de2963dc27755d/.github/assets/Untitled_ Nov 5, 2020 11_22 PM.gif -------------------------------------------------------------------------------- /.github/assets/Untitled_ Nov 7, 2020 10_43 PM.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mattheussAL/30diasCSS/9005a646783c277fa8b6779c23de2963dc27755d/.github/assets/Untitled_ Nov 7, 2020 10_43 PM.gif -------------------------------------------------------------------------------- /.github/assets/Untitled_ Oct 22, 2020 8_34 PM.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mattheussAL/30diasCSS/9005a646783c277fa8b6779c23de2963dc27755d/.github/assets/Untitled_ Oct 22, 2020 8_34 PM.gif -------------------------------------------------------------------------------- /.github/assets/Untitled_ Oct 22, 2020 8_38 PM.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mattheussAL/30diasCSS/9005a646783c277fa8b6779c23de2963dc27755d/.github/assets/Untitled_ Oct 22, 2020 8_38 PM.gif -------------------------------------------------------------------------------- /.github/assets/Untitled_ Oct 24, 2020 12_20 PM.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mattheussAL/30diasCSS/9005a646783c277fa8b6779c23de2963dc27755d/.github/assets/Untitled_ Oct 24, 2020 12_20 PM.gif -------------------------------------------------------------------------------- /.github/assets/Untitled_ Oct 26, 2020 3_44 PM.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mattheussAL/30diasCSS/9005a646783c277fa8b6779c23de2963dc27755d/.github/assets/Untitled_ Oct 26, 2020 3_44 PM.gif -------------------------------------------------------------------------------- /.github/assets/Untitled_ Oct 27, 2020 11_46 PM.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mattheussAL/30diasCSS/9005a646783c277fa8b6779c23de2963dc27755d/.github/assets/Untitled_ Oct 27, 2020 11_46 PM.gif -------------------------------------------------------------------------------- /.github/assets/Untitled_ Oct 28, 2020 10_47 PM.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mattheussAL/30diasCSS/9005a646783c277fa8b6779c23de2963dc27755d/.github/assets/Untitled_ Oct 28, 2020 10_47 PM.gif -------------------------------------------------------------------------------- /.github/assets/Untitled_ Oct 28, 2020 10_49 PM.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mattheussAL/30diasCSS/9005a646783c277fa8b6779c23de2963dc27755d/.github/assets/Untitled_ Oct 28, 2020 10_49 PM.gif -------------------------------------------------------------------------------- /.github/assets/Untitled_ Oct 28, 2020 10_51 PM.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mattheussAL/30diasCSS/9005a646783c277fa8b6779c23de2963dc27755d/.github/assets/Untitled_ Oct 28, 2020 10_51 PM.gif -------------------------------------------------------------------------------- /.github/assets/Untitled_ Oct 28, 2020 10_53 PM.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mattheussAL/30diasCSS/9005a646783c277fa8b6779c23de2963dc27755d/.github/assets/Untitled_ Oct 28, 2020 10_53 PM.gif -------------------------------------------------------------------------------- /.github/assets/Untitled_ Oct 28, 2020 10_54 PM.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mattheussAL/30diasCSS/9005a646783c277fa8b6779c23de2963dc27755d/.github/assets/Untitled_ Oct 28, 2020 10_54 PM.gif -------------------------------------------------------------------------------- /.github/assets/Untitled_ Oct 28, 2020 10_56 PM.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mattheussAL/30diasCSS/9005a646783c277fa8b6779c23de2963dc27755d/.github/assets/Untitled_ Oct 28, 2020 10_56 PM.gif -------------------------------------------------------------------------------- /.github/assets/Untitled_ Oct 28, 2020 7_58 PM.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mattheussAL/30diasCSS/9005a646783c277fa8b6779c23de2963dc27755d/.github/assets/Untitled_ Oct 28, 2020 7_58 PM.gif -------------------------------------------------------------------------------- /.github/assets/Untitled_ Oct 29, 2020 10_52 PM.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mattheussAL/30diasCSS/9005a646783c277fa8b6779c23de2963dc27755d/.github/assets/Untitled_ Oct 29, 2020 10_52 PM.gif -------------------------------------------------------------------------------- /.github/assets/Untitled_ Oct 30, 2020 11_19 PM.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mattheussAL/30diasCSS/9005a646783c277fa8b6779c23de2963dc27755d/.github/assets/Untitled_ Oct 30, 2020 11_19 PM.gif -------------------------------------------------------------------------------- /.github/assets/Untitled_ Oct 31, 2020 11_48 PM.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mattheussAL/30diasCSS/9005a646783c277fa8b6779c23de2963dc27755d/.github/assets/Untitled_ Oct 31, 2020 11_48 PM.gif -------------------------------------------------------------------------------- /Desafios/dia1/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | First Challenge | 30 Day CSS 7 | 8 | 9 | 10 | 11 | 12 | 13 | 60 | 61 | 62 | 63 | 64 | 65 | -------------------------------------------------------------------------------- /Desafios/dia1/style.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --face-color: #3B5999; 3 | --twitter-color: #55ACEE; 4 | --whatsapp-color: #25d366; 5 | --linkedin-color: #0077B5; 6 | --instagram-color: #E4405F; 7 | 8 | --bg-color: #fff; 9 | --icon-color: #ccc; 10 | } 11 | 12 | * { 13 | margin: 0; 14 | padding: 0; 15 | } 16 | 17 | body { 18 | display: flex; 19 | justify-content: center; 20 | align-items: center; 21 | 22 | min-height: 100vh; 23 | 24 | background: var(--bg-color); 25 | } 26 | 27 | ul { 28 | position: relative; 29 | display: flex; 30 | 31 | transform-style: preserve-3d; 32 | } 33 | 34 | ul li { 35 | position: relative; 36 | 37 | list-style: none; 38 | 39 | width: 100px; 40 | height: 100px; 41 | margin: 0 70px; 42 | 43 | transform: rotate(-30deg) skew(25deg); 44 | } 45 | 46 | ul li span { 47 | position: absolute; 48 | 49 | top: 0; 50 | left: 0; 51 | width: 100%; 52 | height: 100%; 53 | 54 | display: flex !important; 55 | justify-content: center; 56 | align-items: center; 57 | 58 | background-color: #222; 59 | color: var(--icon-color); 60 | 61 | font-size: 30px !important; 62 | 63 | transition: 0.5S; 64 | } 65 | 66 | ul li:hover span { 67 | box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.05); 68 | } 69 | 70 | ul li:hover span:nth-child(5) { 71 | transform: translate( 40px, -40px ); 72 | opacity: 1; 73 | } 74 | 75 | ul li:hover span:nth-child(4) { 76 | transform: translate( 30px,-30px ); 77 | opacity: 0.8; 78 | } 79 | 80 | ul li:hover span:nth-child(3) { 81 | transform: translate( 20px,-20px ); 82 | opacity: 0.6; 83 | } 84 | 85 | ul li:hover span:nth-child(2) { 86 | transform: translate( 10px,-10px ); 87 | opacity: 0.4; 88 | } 89 | 90 | ul li:hover span:nth-child(1) { 91 | transform: translate( 0px,-0px ); 92 | opacity: .2; 93 | } 94 | 95 | 96 | ul li:nth-child(1):hover span { 97 | background-color: var(--face-color); 98 | } 99 | 100 | ul li:nth-child(2):hover span { 101 | background-color: var(--twitter-color); 102 | } 103 | 104 | ul li:nth-child(3):hover span { 105 | background-color: var(--instagram-color); 106 | } 107 | 108 | ul li:nth-child(4):hover span { 109 | background-color: var(--linkedin-color); 110 | } 111 | 112 | ul li:nth-child(5):hover span { 113 | background-color: var(--whatsapp-color); 114 | } -------------------------------------------------------------------------------- /Desafios/dia10/img/hakuna.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mattheussAL/30diasCSS/9005a646783c277fa8b6779c23de2963dc27755d/Desafios/dia10/img/hakuna.jpg -------------------------------------------------------------------------------- /Desafios/dia10/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 |
11 | 12 | 13 | 14 |
15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 |
25 | 26 | 27 | 28 | 29 |
30 | 31 |
32 | 33 | 34 | 35 | 36 |
37 | 38 | -------------------------------------------------------------------------------- /Desafios/dia10/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | } 5 | 6 | body { 7 | display: flex; 8 | justify-content: center; 9 | align-items: center; 10 | 11 | width: 100%; 12 | min-height: 100vh; 13 | 14 | background: url('./img/hakuna.jpg') no-repeat; 15 | background-position: center; 16 | background-size: 100%; 17 | 18 | overflow: hidden; 19 | } 20 | 21 | .particle { 22 | position: relative; 23 | 24 | min-width: 750px; 25 | height: 750px; 26 | 27 | margin: -150px; 28 | 29 | transform-origin: right; 30 | 31 | animation: colorChange 5s linear infinite; 32 | } 33 | 34 | .particle:nth-child(even) { 35 | transform-origin: left; 36 | } 37 | 38 | @keyframes colorChange { 39 | 0% { 40 | filter: hue-rotate(0deg); 41 | transform: rotate(0deg); 42 | } 43 | 100% { 44 | filter: hue-rotate(360deg); 45 | transform: rotate(360deg); 46 | } 47 | } 48 | 49 | .particle span { 50 | position: absolute; 51 | 52 | top: calc(80px * var(--i)); 53 | left: calc(80px * var(--i)); 54 | bottom: calc(80px * var(--i)); 55 | right: calc(80px * var(--i)); 56 | } 57 | 58 | .particle span:before { 59 | content: ''; 60 | position: absolute; 61 | 62 | top: 50%; 63 | left: -8px; 64 | width: 2px; 65 | height: 2px; 66 | 67 | padding: 8px; 68 | box-shadow: 0 0 55px rgb(154, 197, 236); 69 | 70 | border-radius: 50%; 71 | } 72 | 73 | .particle span:nth-child(3n + 1):before { 74 | background: rgba(134, 255, 0, 1); 75 | 76 | box-shadow: 77 | 0 0 20px rgba(134, 255, 0, 1), 78 | 0 0 40px rgba(134, 255, 0, 1), 79 | 0 0 60px rgba(134, 255, 0, 1), 80 | 0 0 80px rgba(134, 255, 0, 1), 81 | 0 0 0 8px rgba(134, 255, 0, .1), 82 | } 83 | 84 | .particle span:nth-child(3n + 2):before { 85 | background: rgba(255, 214, 0, 1); 86 | 87 | box-shadow: 88 | 0 0 20px rgba(255, 214, 0, 1), 89 | 0 0 40px rgba(255, 214, 0, 1), 90 | 0 0 60px rgba(255, 214, 0, 1), 91 | 0 0 80px rgba(255, 214, 0, 1), 92 | 0 0 0 8px rgba(255, 214, 0, .1), 93 | } 94 | 95 | .particle span:nth-child(3n + 3):before { 96 | background: rgba(0, 266, 255, 1); 97 | 98 | box-shadow: 99 | 0 0 20px rgba(0, 266, 255, 1), 100 | 0 0 40px rgba(0, 266, 255, 1), 101 | 0 0 60px rgba(0, 266, 255, 1), 102 | 0 0 80px rgba(0, 266, 255, 1), 103 | 0 0 0 8px rgba(0, 266, 255, .1), 104 | } 105 | 106 | .particle span:nth-child(3n + 1) { 107 | animation: animate 3s alternate infinite 108 | } 109 | 110 | .particle span:nth-child(3n + 2) { 111 | animation: animate-reverse 0.2s alternate infinite 112 | } 113 | 114 | .particle span:nth-child(3n + 3) { 115 | animation: animate-reverse 1s alternate infinite 116 | } 117 | 118 | @keyframes animate { 119 | 0% { 120 | transform: rotate(360deg); 121 | } 122 | 100% { 123 | transform: rotate(0deg); 124 | } 125 | } 126 | 127 | @keyframes animate { 128 | 0% { 129 | transform: rotate(60deg); 130 | } 131 | 100% { 132 | transform: rotate(0deg); 133 | } 134 | } 135 | 136 | 137 | 138 | 139 | 140 | 141 | 142 | 143 | 144 | 145 | 146 | 147 | 148 | 149 | 150 | 151 | 152 | 153 | 154 | 155 | 156 | 157 | 158 | 159 | 160 | 161 | 162 | -------------------------------------------------------------------------------- /Desafios/dia11/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Button HoverEffect 7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 |
15 |
16 | Facebook 17 |
18 |
19 |
20 | Twitter 21 |
22 |
23 |
24 | Github 25 |
26 |
27 |
28 | Instagram 29 |
30 |
31 |
32 | Youtube 33 |
34 |
35 | 36 | 37 | -------------------------------------------------------------------------------- /Desafios/dia11/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | html, 8 | body { 9 | display: grid; 10 | height: 100%; 11 | width: 100%; 12 | place-items: center; 13 | background: linear-gradient(315deg, #fff 0%, #d7e1ec 74%); 14 | font-family: 'Roboto', sans-serif; 15 | } 16 | 17 | .wrapper .button { 18 | display: inline-block; 19 | width: 60px; 20 | height: 60px; 21 | float: left; 22 | margin: 0 5px; 23 | background: #fff; 24 | overflow: hidden; 25 | border-radius: 50px; 26 | cursor: pointer; 27 | box-shadow: 0 10px 10px rgba(0,0,0,.1); 28 | transition: all .3s ease-out; 29 | } 30 | 31 | .wrapper .button .icon { 32 | display: inline-block; 33 | width: 60px; 34 | height: 60px; 35 | text-align: center; 36 | border-radius: 50px; 37 | box-sizing: border-box; 38 | line-height: 60px; 39 | transition: all .3s ease-out; 40 | 41 | } 42 | 43 | .wrapper .button:hover { 44 | width: 200px; 45 | } 46 | 47 | .wrapper .button:nth-child(1):hover .icon { 48 | background: #4267B2; 49 | color: #fff; 50 | } 51 | 52 | .wrapper .button:nth-child(2):hover .icon { 53 | background: #1DA1F2; 54 | color: #fff; 55 | } 56 | 57 | .wrapper .button:nth-child(3):hover .icon { 58 | background: #333; 59 | color: #fff; 60 | } 61 | 62 | .wrapper .button:nth-child(4):hover .icon { 63 | background: #E1306C; 64 | color: #fff; 65 | } 66 | 67 | .wrapper .button:nth-child(5):hover .icon { 68 | background: #FF0000; 69 | color: #fff; 70 | } 71 | 72 | .wrapper .button .icon i { 73 | font-size: 25px; 74 | line-height: 60px; 75 | } 76 | 77 | .wrapper .button .icon i:hover { 78 | animation: rotateAnimate 2s linear infinite; 79 | } 80 | 81 | @keyframes rotateAnimate { 82 | 0%{ 83 | transform: rotate(0deg); 84 | } 85 | 100% { 86 | transform: rotate(360deg); 87 | } 88 | } 89 | 90 | .wrapper .button span { 91 | font-size: 20px; 92 | font-weight: 500; 93 | line-height: 60px; 94 | margin-left: 10px; 95 | transition: all .3s ease-out; 96 | } 97 | 98 | 99 | .wrapper .button:nth-child(1):hover span { 100 | color: #4267B2; 101 | } 102 | 103 | .wrapper .button:nth-child(2):hover span { 104 | color: #1DA1F2; 105 | } 106 | 107 | .wrapper .button:nth-child(3):hover span { 108 | color: #333; 109 | } 110 | 111 | .wrapper .button:nth-child(4):hover span { 112 | color: #E1306C; 113 | } 114 | 115 | .wrapper .button:nth-child(5):hover span { 116 | color: #FF0000; 117 | } -------------------------------------------------------------------------------- /Desafios/dia12/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 |
12 | 19 |
20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /Desafios/dia12/style.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --color-one: #24edffee; 3 | --color-two: #ff22e2ee; 4 | --color-three: #22ff2dee; 5 | --color-four: #fbff22ee; 6 | --color-five: #ff2222ee; 7 | } 8 | 9 | * { 10 | margin: 0; 11 | padding: 0; 12 | box-sizing: border-box; 13 | } 14 | 15 | body { 16 | background: #222; 17 | } 18 | 19 | .balls { 20 | height: 100vh; 21 | display: flex; 22 | justify-content: center; 23 | align-items: center; 24 | } 25 | 26 | .balls ul { 27 | border-bottom: 10px solid rgb(255, 255, 255); 28 | display: flex; 29 | } 30 | 31 | .balls ul li { 32 | width: 50px; 33 | height: 50px; 34 | background: #000; 35 | list-style: none; 36 | margin: 0 10px; 37 | border-radius: 50%; 38 | animation: jump 1s linear infinite; 39 | } 40 | /* 41 | @keyframes rotateAnimate { 42 | 0%{ 43 | transform: rotate(0deg); 44 | } 45 | 100% { 46 | transform: rotate(360deg); 47 | } 48 | } */ 49 | 50 | @keyframes jump { 51 | 0% { 52 | transform: translateY(0); 53 | } 54 | 55 | 50% { 56 | transform: translateY(-150px); 57 | } 58 | 59 | 100% { 60 | transform: translateY(0); 61 | } 62 | 63 | } 64 | 65 | .balls ul li:nth-child(1) { 66 | animation-delay: .2s; 67 | background: var(--color-one); 68 | } 69 | .balls ul li:nth-child(1):hover { 70 | box-shadow: 0 0 60px var(--color-one); 71 | } 72 | 73 | .balls ul li:nth-child(2) { 74 | animation-delay: .4s; 75 | background: var(--color-two); 76 | } 77 | 78 | .balls ul li:nth-child(2):hover { 79 | box-shadow: 0 0 60px var(--color-two); 80 | } 81 | 82 | .balls ul li:nth-child(3) { 83 | animation-delay: .6s; 84 | background: var(--color-three); 85 | } 86 | 87 | .balls ul li:nth-child(3):hover { 88 | box-shadow: 0 0 60px var(--color-three); 89 | } 90 | 91 | .balls ul li:nth-child(4) { 92 | animation-delay: .8s; 93 | background: var(--color-four); 94 | } 95 | 96 | .balls ul li:nth-child(4):hover { 97 | box-shadow: 0 0 60px var(--color-four); 98 | } 99 | 100 | .balls ul li:nth-child(5) { 101 | animation-delay: 1s; 102 | background: var(--color-five); 103 | } 104 | 105 | .balls ul li:nth-child(5):hover { 106 | box-shadow: 0 0 60px var(--color-five); 107 | } 108 | 109 | 110 | -------------------------------------------------------------------------------- /Desafios/dia13/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Dia 26 8 | 9 | 10 | 11 |
12 |
13 |
14 | 15 | 16 | -------------------------------------------------------------------------------- /Desafios/dia13/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | display: flex; 4 | align-items: center; 5 | justify-content: center; 6 | height: 100vh; 7 | background-color: #131212; 8 | } 9 | 10 | .base { 11 | width: 300px; 12 | border-bottom: 4px solid #fff; 13 | position: relative; 14 | animation: animateline 3s linear infinite; 15 | padding-bottom: 20px; 16 | -webkit-box-reflect: below .1px linear-gradient(transparent, #fff); 17 | } 18 | 19 | .hexagon { 20 | position: absolute; 21 | left: 0; 22 | bottom: 14px; 23 | width: 50px; 24 | height: 30px; 25 | background: #fff; 26 | animation: animatehexagon 3s linear infinite; 27 | box-shadow: 0 0 60px rgb(184, 250, 245); 28 | } 29 | 30 | .hexagon:before { 31 | content: ""; 32 | position: absolute; 33 | top: 0; 34 | left: 0; 35 | width: 100%; 36 | height: 100%; 37 | background: #fff; 38 | transform: rotate(60deg); 39 | } 40 | 41 | 42 | .hexagon:after { 43 | content: ""; 44 | position: absolute; 45 | top: 0; 46 | left: 0; 47 | width: 100%; 48 | height: 100%; 49 | background: #fff; 50 | transform: rotate(-60deg); 51 | } 52 | 53 | @keyframes animatehexagon { 54 | 0% { 55 | left: 0; 56 | } 57 | 58 | 50% { 59 | left: calc(100% - 50px); 60 | transform: rotate(720deg); 61 | } 62 | 63 | 100% { 64 | left: 0; 65 | } 66 | } 67 | 68 | @keyframes animateline { 69 | 0% { 70 | transform: rotate(30deg); 71 | } 72 | 73 | 25% { 74 | transform: rotate(0deg); 75 | } 76 | 77 | 50% { 78 | transform: rotate(-30deg); 79 | } 80 | 81 | 75% { 82 | transform: rotate(0deg); 83 | } 84 | 85 | 100% { 86 | transform: rotate(30deg); 87 | } 88 | } -------------------------------------------------------------------------------- /Desafios/dia14/img/pumpkin.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mattheussAL/30diasCSS/9005a646783c277fa8b6779c23de2963dc27755d/Desafios/dia14/img/pumpkin.png -------------------------------------------------------------------------------- /Desafios/dia14/img/pumpkin_1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mattheussAL/30diasCSS/9005a646783c277fa8b6779c23de2963dc27755d/Desafios/dia14/img/pumpkin_1.png -------------------------------------------------------------------------------- /Desafios/dia14/img/pumpkin_2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mattheussAL/30diasCSS/9005a646783c277fa8b6779c23de2963dc27755d/Desafios/dia14/img/pumpkin_2.png -------------------------------------------------------------------------------- /Desafios/dia14/img/pumpkin_3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mattheussAL/30diasCSS/9005a646783c277fa8b6779c23de2963dc27755d/Desafios/dia14/img/pumpkin_3.png -------------------------------------------------------------------------------- /Desafios/dia14/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 |
12 |
13 |
14 | pumpkin 15 |
16 |
17 | pumpkin 18 |
19 |
20 | 21 |
22 |
23 | pumpkin 24 |
25 |
26 | pumpkin 27 |
28 |
29 | 30 |
31 |
32 | pumpkin 33 |
34 |
35 | pumpkin 36 |
37 |
38 | 39 |
40 | 41 | 42 | -------------------------------------------------------------------------------- /Desafios/dia14/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | background: #222; 9 | } 10 | 11 | .wrapper { 12 | display: flex; 13 | justify-content: center; 14 | align-items: center; 15 | } 16 | 17 | .flip { 18 | width: 10px; 19 | height: 10px; 20 | float: left; 21 | perspective: 1000px; 22 | padding: 420px 320px 0 380px; 23 | } 24 | 25 | .flip:last-child{ 26 | margin-right: 600px; 27 | } 28 | 29 | .flip .frente { 30 | position: absolute; 31 | transform: rotateY(0deg); 32 | backface-visibility: hidden; 33 | transition: all .4s linear; 34 | box-shadow: 0 0 50px rgb(219, 114, 16); 35 | border-radius: 50px; 36 | padding: 20px; 37 | } 38 | 39 | .flip .fundo { 40 | position: absolute; 41 | transform: rotateY(180deg); 42 | backface-visibility: hidden; 43 | transition: all .4s linear; 44 | filter: grayscale(100%); 45 | -webkit-filter: grayscale(100%); 46 | box-shadow: 0 0 50px rgb(219, 114, 16); 47 | border-radius: 50px; 48 | padding: 20px; 49 | } 50 | 51 | .flip:hover .frente { 52 | transform: rotateY(-180deg); 53 | cursor: pointer; 54 | } 55 | 56 | .flip:hover .fundo { 57 | transform: rotateY(0deg); 58 | cursor: pointer; 59 | } -------------------------------------------------------------------------------- /Desafios/dia15/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Dia 30 8 | 9 | 10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
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 | 67 | -------------------------------------------------------------------------------- /Desafios/dia15/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | height: 100vh; 5 | display: flex; 6 | justify-content: center; 7 | align-items: center; 8 | background-color: rgb(34, 31, 30); 9 | } 10 | .firework { 11 | position: absolute; 12 | } 13 | 14 | .explosion { 15 | position: absolute; 16 | left: -2px; 17 | bottom: 0; 18 | width: 4px; 19 | height: 80px; 20 | transform-origin: 50% 100%; 21 | overflow: hidden; 22 | } 23 | .explosion:nth-child(1) { 24 | transform: rotate(0deg)translateY(-15px); 25 | } 26 | .explosion:nth-child(2) { 27 | transform: rotate(30deg)translateY(-15px); 28 | } 29 | .explosion:nth-child(3) { 30 | transform: rotate(60deg)translateY(-15px); 31 | } 32 | .explosion:nth-child(4) { 33 | transform: rotate(90deg)translateY(-15px); 34 | } 35 | .explosion:nth-child(5) { 36 | transform: rotate(120deg)translateY(-15px); 37 | } 38 | .explosion:nth-child(6) { 39 | transform: rotate(150deg)translateY(-15px); 40 | } 41 | .explosion:nth-child(7) { 42 | transform: rotate(180deg)translateY(-15px); 43 | } 44 | .explosion:nth-child(8) { 45 | transform: rotate(210deg)translateY(-15px); 46 | } 47 | .explosion:nth-child(9) { 48 | transform: rotate(240deg)translateY(-15px); 49 | } 50 | .explosion:nth-child(10) { 51 | transform: rotate(270deg)translateY(-15px); 52 | } 53 | .explosion:nth-child(11) { 54 | transform: rotate(300deg)translateY(-15px); 55 | } 56 | .explosion:nth-child(12) { 57 | transform: rotate(330deg)translateY(-15px); 58 | } 59 | 60 | .explosion::before { 61 | content: ""; 62 | position: absolute; 63 | left: 0; 64 | right: 0; 65 | top: 100%; 66 | height: 40px; 67 | background-color: rgb(238, 238, 101); 68 | } 69 | 70 | @keyframes explosion { 71 | 0% { 72 | top: 100%; 73 | } 74 | 75 | 33%, 100% { 76 | top: -50%; 77 | background-color: #9b5de5; 78 | } 79 | } 80 | 81 | #firework1 { 82 | left: 50%; 83 | top: 50%; 84 | transform: scale(1); 85 | } 86 | 87 | #firework1 .explosion::before { 88 | animation: explosion 2s ease-in-out infinite; 89 | } 90 | 91 | #firework2 { 92 | left: 40%; 93 | top: 40%; 94 | transform: scale(.7); 95 | } 96 | #firework2 .explosion::before { 97 | animation: explosion 2s .6s ease-in-out infinite; 98 | } 99 | 100 | #firework3 { 101 | left: 60%; 102 | top:60% ; 103 | transform: scale(.4); 104 | } 105 | #firework3 .explosion::before { 106 | animation: explosion 2s .4s ease-in-out infinite; 107 | } -------------------------------------------------------------------------------- /Desafios/dia16/img/RiotX_ChampionList_ahri.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mattheussAL/30diasCSS/9005a646783c277fa8b6779c23de2963dc27755d/Desafios/dia16/img/RiotX_ChampionList_ahri.jpg -------------------------------------------------------------------------------- /Desafios/dia16/img/RiotX_ChampionList_ashe.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mattheussAL/30diasCSS/9005a646783c277fa8b6779c23de2963dc27755d/Desafios/dia16/img/RiotX_ChampionList_ashe.jpg -------------------------------------------------------------------------------- /Desafios/dia16/img/RiotX_ChampionList_blitzcrank.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mattheussAL/30diasCSS/9005a646783c277fa8b6779c23de2963dc27755d/Desafios/dia16/img/RiotX_ChampionList_blitzcrank.jpg -------------------------------------------------------------------------------- /Desafios/dia16/img/RiotX_ChampionList_braum.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mattheussAL/30diasCSS/9005a646783c277fa8b6779c23de2963dc27755d/Desafios/dia16/img/RiotX_ChampionList_braum.jpg -------------------------------------------------------------------------------- /Desafios/dia16/img/RiotX_ChampionList_darius.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mattheussAL/30diasCSS/9005a646783c277fa8b6779c23de2963dc27755d/Desafios/dia16/img/RiotX_ChampionList_darius.jpg -------------------------------------------------------------------------------- /Desafios/dia16/img/RiotX_ChampionList_drmundo.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mattheussAL/30diasCSS/9005a646783c277fa8b6779c23de2963dc27755d/Desafios/dia16/img/RiotX_ChampionList_drmundo.jpg -------------------------------------------------------------------------------- /Desafios/dia16/img/RiotX_ChampionList_ekko.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mattheussAL/30diasCSS/9005a646783c277fa8b6779c23de2963dc27755d/Desafios/dia16/img/RiotX_ChampionList_ekko.jpg -------------------------------------------------------------------------------- /Desafios/dia16/img/RiotX_ChampionList_garen.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mattheussAL/30diasCSS/9005a646783c277fa8b6779c23de2963dc27755d/Desafios/dia16/img/RiotX_ChampionList_garen.jpg -------------------------------------------------------------------------------- /Desafios/dia16/img/RiotX_ChampionList_janna.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mattheussAL/30diasCSS/9005a646783c277fa8b6779c23de2963dc27755d/Desafios/dia16/img/RiotX_ChampionList_janna.jpg -------------------------------------------------------------------------------- /Desafios/dia16/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 |
12 |
13 |
14 |
15 | 16 |
17 | 18 |
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 | -------------------------------------------------------------------------------- /Desafios/dia16/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | overflow: hidden; 9 | } 10 | 11 | .slideshow { 12 | margin: 0; 13 | height: 1000px; 14 | padding-top: 200px; 15 | 16 | background: url('https://images.contentstack.io/v3/assets/blt731acb42bb3d1659/bltc28d43095579c8b5/5d87c24e8d8a3163705e3070/summonersrift.jpg') no-repeat 10%; 17 | } 18 | 19 | .content { 20 | position: relative; 21 | 22 | margin: auto; 23 | width: 190px; 24 | padding-top: 80px; 25 | 26 | perspective: 900px; 27 | } 28 | 29 | .content-carrousel { 30 | position: absolute; 31 | 32 | width: 180px; 33 | float: right; 34 | 35 | transform-style: preserve-3d; 36 | 37 | animation: 15s rotar linear infinite; 38 | } 39 | 40 | .content-carrousel:hover { 41 | animation-play-state: paused; 42 | cursor: pointer; 43 | } 44 | 45 | .content-carrousel figure { 46 | position: absolute; 47 | 48 | width: 100%; 49 | height: 120px; 50 | 51 | border: 1px solid #4D444D; 52 | 53 | overflow: hidden; 54 | 55 | } 56 | 57 | .content-carrousel figure:last-child { 58 | margin-top: -200px; 59 | border: none; 60 | box-shadow: none; 61 | 62 | } 63 | 64 | 65 | .content-carrousel figure:nth-child(1) { 66 | transform: rotateY(0deg) translateZ(300px); 67 | 68 | } 69 | 70 | .content-carrousel figure:nth-child(2) { 71 | transform: rotateY(40deg) translateZ(300px); 72 | } 73 | 74 | .content-carrousel figure:nth-child(3) { 75 | transform: rotateY(80deg) translateZ(300px); 76 | } 77 | 78 | .content-carrousel figure:nth-child(4) { 79 | transform: rotateY(120deg) translateZ(300px); 80 | } 81 | 82 | .content-carrousel figure:nth-child(5) { 83 | transform: rotateY(160deg) translateZ(300px); 84 | } 85 | 86 | .content-carrousel figure:nth-child(6) { 87 | transform: rotateY(200deg) translateZ(300px); 88 | } 89 | 90 | .content-carrousel figure:nth-child(7) { 91 | transform: rotateY(240deg) translateZ(300px); 92 | } 93 | 94 | .content-carrousel figure:nth-child(8) { 95 | transform: rotateY(280deg) translateZ(300px); 96 | } 97 | 98 | .content-carrousel figure:nth-child(9) { 99 | transform: rotateY(320deg) translateZ(300px); 100 | } 101 | 102 | .shadow { 103 | position: absolute; 104 | box-shadow: 0 0 20px 0 #000; 105 | border-radius: 8px; 106 | 107 | } 108 | 109 | .content-carrousel img { 110 | image-rendering: auto; 111 | transition: all 300ms; 112 | width: 100%; 113 | height: 100%; 114 | } 115 | 116 | .content-carrousel img:hover { 117 | transform: scale(1.2); 118 | transform: all 300ms; 119 | } 120 | 121 | @keyframes rotar { 122 | from { 123 | transform: rotateY(0deg); 124 | } 125 | 126 | to{ 127 | transform: rotateY(360deg); 128 | } 129 | } -------------------------------------------------------------------------------- /Desafios/dia17/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 | 12 |
13 | 3 14 | 0 15 | D 16 | i 17 | a 18 | s 19 | D 20 | e 21 | C 22 | S 23 | S 24 |
25 | 26 |
27 |
28 |
29 |
30 |
31 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /Desafios/dia17/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | font-family: 'Press Start 2P', cursive; 6 | } 7 | 8 | body { 9 | display: flex; 10 | justify-content: center; 11 | align-items: center; 12 | 13 | min-height: 100vh; 14 | 15 | background: #221E1E; 16 | } 17 | 18 | .content { 19 | position: relative; 20 | display: flex; 21 | 22 | -webkit-box-reflect: below -12px linear-gradient( 23 | transparent, rgba(0, 0, 0, .2) 24 | ); 25 | 26 | } 27 | 28 | .content span { 29 | position: relative; 30 | 31 | display: inline-block; 32 | 33 | padding: 22px; 34 | margin: 0 5px; 35 | 36 | 37 | font-size: 4em; 38 | text-transform: uppercase; 39 | 40 | transform: scale(.2); 41 | 42 | color: #FFF; 43 | box-shadow: 0 0 6px #fff; 44 | 45 | animation: animateJump 1.5s ease-in-out infinite; 46 | animation-delay: calc(.1s * var(--i)); 47 | } 48 | 49 | 50 | /* Jump */ 51 | @keyframes animateJump { 52 | 0% { 53 | transform: translateY(0px); 54 | } 55 | 56 | 20% { 57 | transform: translateY(-50px); 58 | 59 | } 60 | 61 | 40%, 100% { 62 | transform: translateY(0px); 63 | } 64 | } 65 | 66 | /* Dance */ 67 | @keyframes animateDance { 68 | 0% { 69 | transform: rotate(0deg); 70 | } 71 | 72 | 50% { 73 | transform: rotate(30deg); 74 | } 75 | 76 | 100% { 77 | transform: rotate(0deg); 78 | } 79 | } 80 | -------------------------------------------------------------------------------- /Desafios/dia18/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 30 Dias CSS 6 | 7 | 8 | 9 | 10 | 11 |
12 |
13 |
14 | 15 | 16 | -------------------------------------------------------------------------------- /Desafios/dia18/style.css: -------------------------------------------------------------------------------- 1 | body{ 2 | background:#232242 3 | } 4 | 5 | /* <== Loader ==> */ 6 | .load { 7 | position: absolute; 8 | 9 | top: 50%; 10 | left: 50%; 11 | width: 120px; 12 | height: 160px; 13 | 14 | transform:translate(-50%, -50%); 15 | } 16 | 17 | .load hr { 18 | position: absolute; 19 | 20 | margin: 0; 21 | 22 | height: 40%; 23 | width: 40%; 24 | 25 | border: 0; 26 | border-radius: 50%; 27 | 28 | animation: spin 2s ease infinite 29 | } 30 | 31 | .load :first-child { 32 | background:#19A68C; 33 | box-shadow: 0 0 20px #19A68C;; 34 | animation-delay: -1.5s 35 | } 36 | 37 | .load :nth-child(2) { 38 | background:#F63D3A; 39 | box-shadow: 0 0 20px #F63D3A;; 40 | animation-delay: -1s 41 | } 42 | 43 | .load :nth-child(3) { 44 | background:#FDA543; 45 | box-shadow: 0 0 20px #FDA543;; 46 | animation-delay: -0.5s 47 | } 48 | 49 | .load :last-child { 50 | background:#3ba0c9; 51 | box-shadow: 0 0 20px #3ba0c9; 52 | } 53 | 54 | @keyframes spin { 55 | 0%, 100%{ 56 | transform: translate(0); 57 | } 58 | 59 | 25% { 60 | transform: translate(160%); 61 | } 62 | 63 | 50% { 64 | transform: translate(160%, 160%); 65 | } 66 | 67 | 75% { 68 | transform: translate(0, 160%); 69 | } 70 | } 71 | -------------------------------------------------------------------------------- /Desafios/dia19/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 | 12 |
13 |

30 dias CSS Background Animated

14 |
15 | 16 | 17 |
18 | 24 |
25 | 26 | 27 | -------------------------------------------------------------------------------- /Desafios/dia19/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0px; 3 | padding: 0px; 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | font-family: 'Roboto', sans-serif; 9 | } 10 | 11 | .context { 12 | width: 100%; 13 | position: absolute; 14 | top:50vh; 15 | } 16 | 17 | .context h1{ 18 | font-size: 50px; 19 | text-align: center; 20 | 21 | margin-left: 160px; 22 | width: 1100px; 23 | 24 | color: #fff; 25 | 26 | box-shadow: 0 15px 20px rgba(0, 0, 0, 0.2); 27 | } 28 | 29 | .area { 30 | width: 100vw; 31 | height:100vh; 32 | 33 | background: -webkit-linear-gradient(160deg, #509b72 50%, #1f202e 50%); 34 | } 35 | 36 | .circles { 37 | position: absolute; 38 | 39 | top: 0; 40 | left: 0; 41 | 42 | width: 100%; 43 | height: 100%; 44 | 45 | overflow: hidden; 46 | } 47 | 48 | .circles li { 49 | position: absolute; 50 | 51 | display: block; 52 | 53 | list-style: none; 54 | 55 | bottom: -250px; 56 | perspective: 1000px; 57 | 58 | background: rgba(255, 255, 255, 0.2); 59 | box-shadow: 0 0 20px rgba(0, 0, 0, .10); 60 | 61 | animation: animate 25s linear infinite; 62 | } 63 | 64 | .circles li:nth-child(1){ 65 | left: 25%; 66 | width: 80px; 67 | height: 80px; 68 | 69 | animation-delay: 0s; 70 | box-shadow: 0 0 20px #509b72; 71 | } 72 | 73 | 74 | .circles li:nth-child(2){ 75 | left: 10%; 76 | width: 20px; 77 | height: 20px; 78 | animation-delay: 2s; 79 | animation-duration: 12s; 80 | box-shadow: 0 0 20px #509b72; 81 | } 82 | 83 | .circles li:nth-child(3){ 84 | left: 70%; 85 | width: 20px; 86 | height: 20px; 87 | animation-delay: 4s; 88 | } 89 | 90 | .circles li:nth-child(4){ 91 | left: 40%; 92 | width: 60px; 93 | height: 60px; 94 | animation-delay: 0s; 95 | animation-duration: 18s; 96 | box-shadow: 0 0 20px #509b72; 97 | } 98 | 99 | .circles li:nth-child(5){ 100 | left: 65%; 101 | width: 20px; 102 | height: 20px; 103 | animation-delay: 0s; 104 | } 105 | 106 | .circles li:nth-child(6){ 107 | left: 75%; 108 | width: 110px; 109 | height: 110px; 110 | animation-delay: 3s; 111 | } 112 | 113 | .circles li:nth-child(7){ 114 | left: 35%; 115 | width: 150px; 116 | height: 150px; 117 | animation-delay: 7s; 118 | box-shadow: 0 0 20px #509b72; 119 | } 120 | 121 | .circles li:nth-child(8){ 122 | left: 50%; 123 | width: 25px; 124 | height: 25px; 125 | animation-delay: 15s; 126 | animation-duration: 45s; 127 | } 128 | 129 | .circles li:nth-child(9){ 130 | left: 20%; 131 | width: 15px; 132 | height: 15px; 133 | animation-delay: 2s; 134 | animation-duration: 35s; 135 | box-shadow: 0 0 20px #509b72; 136 | } 137 | 138 | .circles li:nth-child(10){ 139 | left: 85%; 140 | width: 150px; 141 | height: 150px; 142 | animation-delay: 0s; 143 | animation-duration: 11s; 144 | } 145 | 146 | @keyframes animate { 147 | 148 | 0% { 149 | transform: translateY(0) rotate(0deg); 150 | opacity: 1; 151 | border-radius: 0; 152 | } 153 | 154 | 100% { 155 | transform: translateY(-1000px) rotate(720deg); 156 | opacity: 0; 157 | border-radius: 50%; 158 | } 159 | 160 | } -------------------------------------------------------------------------------- /Desafios/dia2/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Loading Animation 7 | 8 | 9 | 10 | 11 | 12 |
13 |

Loading

14 | 15 |
16 | 17 | 18 |
19 |

Loading

20 | 21 |
22 | 23 |
24 |

Loading

25 | 26 |
27 | 28 | 29 | -------------------------------------------------------------------------------- /Desafios/dia2/style.css: -------------------------------------------------------------------------------- 1 | 2 | :root { 3 | --bg: #262626; 4 | --bg-circle: transparent; 5 | --color-border: #3C3C3C; 6 | 7 | --first-color: #fff000; 8 | --second-color: #00B3FE; 9 | --third-color: #FE00FE; 10 | 11 | } 12 | 13 | body { 14 | margin: 0; 15 | padding: 0; 16 | 17 | background: var(--bg); 18 | } 19 | 20 | .circle { 21 | position: absolute; 22 | 23 | top: 50%; 24 | left: 50%; 25 | transform: translate(-50%, -50%); 26 | 27 | width: 150px; 28 | height: 150px; 29 | 30 | background: var(--bg-circle); 31 | 32 | border: 3px solid var(--color-border); 33 | border-radius: 50%; 34 | 35 | 36 | text-transform: uppercase; 37 | text-shadow: 0 0 10px var(--first-color); 38 | 39 | box-shadow: 0 0 20px rgba(0, 0, 0, 0.5); 40 | } 41 | 42 | .circle2 { 43 | position: absolute; 44 | 45 | top: 50%; 46 | left: 30%; 47 | transform: translate(-50%, -50%); 48 | 49 | width: 150px; 50 | height: 150px; 51 | 52 | background: var(--bg-circle); 53 | 54 | border: 3px solid var(--color-border); 55 | border-radius: 50%; 56 | 57 | 58 | text-transform: uppercase; 59 | text-shadow: 0 0 10px var(--text-color); 60 | 61 | box-shadow: 0 0 20px rgba(0, 0, 0, 0.5); 62 | } 63 | 64 | .circle3 { 65 | position: absolute; 66 | 67 | top: 50%; 68 | left: 70%; 69 | transform: translate(-50%, -50%); 70 | 71 | width: 150px; 72 | height: 150px; 73 | 74 | background: var(--bg-circle); 75 | 76 | border: 3px solid var(--color-border); 77 | border-radius: 50%; 78 | 79 | 80 | text-transform: uppercase; 81 | text-shadow: 0 0 10px var(--text-color); 82 | 83 | box-shadow: 0 0 20px rgba(0, 0, 0, 0.5); 84 | } 85 | 86 | .circle4 { 87 | position: absolute; 88 | 89 | top: 50%; 90 | left: 90%; 91 | transform: translate(-50%, -50%); 92 | 93 | width: 150px; 94 | height: 150px; 95 | 96 | background: var(--bg-circle); 97 | 98 | border: 3px solid var(--color-border); 99 | border-radius: 50%; 100 | 101 | 102 | text-transform: uppercase; 103 | text-shadow: 0 0 10px var(--text-color); 104 | 105 | box-shadow: 0 0 20px rgba(0, 0, 0, 0.5); 106 | } 107 | 108 | .circle p { 109 | display: flex; 110 | justify-content: center; 111 | 112 | padding: 40px; 113 | 114 | font-family: 'Knewave', cursive, sans-serif; 115 | 116 | font-size: 20px; 117 | color: var(--first-color); 118 | letter-spacing: 4px; 119 | } 120 | 121 | .circle2 p { 122 | display: flex; 123 | justify-content: center; 124 | 125 | padding: 40px; 126 | 127 | font-family: 'Knewave', cursive, sans-serif; 128 | 129 | font-size: 20px; 130 | color: var(--second-color); 131 | letter-spacing: 4px; 132 | } 133 | 134 | .circle3 p { 135 | display: flex; 136 | justify-content: center; 137 | 138 | padding: 40px; 139 | 140 | font-family: 'Knewave', cursive, sans-serif; 141 | 142 | font-size: 20px; 143 | color: var(--third-color); 144 | letter-spacing: 4px; 145 | } 146 | 147 | .circle:before{ 148 | content: ''; 149 | 150 | position: absolute; 151 | 152 | top: -3px; 153 | left: -3px; 154 | width: 100%; 155 | height: 100%; 156 | 157 | border: 3px solid var(--bg-circle); 158 | border-top: 3px solid var(--first-color); 159 | border-right: 3px solid var(--first-color); 160 | border-radius: 50%; 161 | 162 | animation: rotateAnimate 2s linear infinite; 163 | } 164 | 165 | .circle2:before{ 166 | content: ''; 167 | 168 | position: absolute; 169 | 170 | top: -3px; 171 | left: -3px; 172 | width: 100%; 173 | height: 100%; 174 | 175 | border: 3px solid var(--bg-circle); 176 | border-top: 3px solid var(--second-color); 177 | border-right: 3px solid var(--second-color); 178 | border-radius: 50%; 179 | 180 | animation: rotateAnimate 2s linear infinite; 181 | } 182 | 183 | .circle3:before{ 184 | content: ''; 185 | 186 | position: absolute; 187 | 188 | top: -3px; 189 | left: -3px; 190 | width: 100%; 191 | height: 100%; 192 | 193 | border: 3px solid var(--bg-circle); 194 | border-top: 3px solid var(--third-color); 195 | border-right: 3px solid var(--third-color); 196 | border-radius: 50%; 197 | 198 | animation: rotateAnimate 2s linear infinite; 199 | } 200 | 201 | 202 | @keyframes rotateAnimate { 203 | 0%{ 204 | transform: rotate(0deg); 205 | } 206 | 100% { 207 | transform: rotate(360deg); 208 | } 209 | } 210 | 211 | 212 | 213 | 214 | 215 | 216 | 217 | 218 | 219 | 220 | 221 | 222 | 223 | 224 | 225 | 226 | 227 | 228 | 229 | 230 | 231 | 232 | 233 | -------------------------------------------------------------------------------- /Desafios/dia20/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 |
12 |
13 | 14 |
15 |
16 | 17 | 18 | -------------------------------------------------------------------------------- /Desafios/dia20/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | background: #DDD; 3 | } 4 | 5 | .contener_box { 6 | perspective: 1000px; 7 | } 8 | 9 | .box { 10 | display: block; 11 | 12 | width: 100px; 13 | height: 100px; 14 | 15 | margin: 250px auto; 16 | 17 | transform-style: preserve-3d; 18 | transition: transform 350ms; 19 | 20 | animation: spin 2.5s infinite linear; 21 | } 22 | 23 | .box:before, .box:after, 24 | .box i, .box i:before, 25 | .box i:after { 26 | content: ''; 27 | position: absolute; 28 | 29 | display: block; 30 | 31 | width: 100px; 32 | height: 100px; 33 | 34 | animation: lighting 2s infinite linear; 35 | } 36 | 37 | .box:before { 38 | content:''; 39 | 40 | background: rgb(238, 242, 2); 41 | transform: rotateY(90deg) translate3D(-50px, 0, 50px); 42 | } 43 | 44 | .box:after { 45 | content:''; 46 | background-color: hsl(0, 100%, 52%); 47 | 48 | transform: rotateY(90deg) rotateZ(180deg) translate3D(50px, 0, -50px); 49 | } 50 | 51 | .box i { 52 | transform-style: preserve-3d; 53 | 54 | transform: translate3D(0, 0, 100px); 55 | animation-delay: 1s; 56 | 57 | background-color: hsl(251, 100%, 50%); 58 | } 59 | 60 | .box i:before { 61 | transform: rotate(180deg) translate3D(0, 0, -100px); 62 | 63 | animation-delay: 1s; 64 | 65 | background-color: hsl(120, 100%, 50%); 66 | } 67 | 68 | .box i:after { 69 | background-color: #999999; 70 | 71 | box-shadow: 0 0 30px rgba(0,0,0,1); 72 | 73 | opacity: 0.5; 74 | 75 | transform: rotateX(90deg) translate3D(0,-50px,-100px); 76 | filter: blur(15px); 77 | } 78 | 79 | @keyframes spin { 80 | 0% { 81 | transform: rotateY(0deg) translateZ(-50px); 82 | } 83 | 84 | 100% { 85 | transform: rotateY(360deg) translateZ(-50px); 86 | } 87 | 88 | } 89 | 90 | @keyframes lighting { 91 | 0% { 92 | box-shadow: inset 100px 0 150px rgba(0,0,0,0.4), inset 0 0 150px rgba(255,255,0255,0.3); 93 | } 94 | 95 | 100% { 96 | box-shadow: inset 0 0 150px rgba(0,0,0,0.4), inset -100px 0 150px rgba(255,255,0255,0.3); 97 | } 98 | 99 | } 100 | -------------------------------------------------------------------------------- /Desafios/dia21/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 | 12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
30 Dias de CSS
29 |
30 | 31 | 32 | 33 | 34 | 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 | 67 | -------------------------------------------------------------------------------- /Desafios/dia21/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | font-family: Roboto, sans-serif; 6 | } 7 | 8 | body { 9 | width: 100vw; 10 | height: 100vh; 11 | 12 | background: #4d4e4d22; 13 | 14 | overflow: hidden; 15 | } 16 | 17 | .container { 18 | position: relative; 19 | 20 | width: 100%; 21 | height: 100%; 22 | 23 | overflow: hidden; 24 | 25 | filter: url(#goo); 26 | } 27 | 28 | .particles { 29 | position: absolute; 30 | 31 | width: 100px; 32 | height: 100px; 33 | top: -20%; 34 | 35 | background: #1d1c1c; 36 | 37 | box-shadow: 0 0 5px #1d1c1c; 38 | 39 | border-radius: 50%; 40 | animation: fall 15s infinite; 41 | } 42 | 43 | .particles:nth-of-type(2n) { 44 | width: 60px; 45 | height: 60px; 46 | } 47 | 48 | .particles:nth-of-type(3n) { 49 | width: 120px; 50 | height: 120px; 51 | } 52 | 53 | .particles:nth-of-type(1) { 54 | left: 30%; 55 | animation-delay: 1s; 56 | } 57 | 58 | .particles:nth-of-type(2) { 59 | left: 60%; 60 | animation-delay: 2s; 61 | } 62 | 63 | .particles:nth-of-type(3) { 64 | left: 25%; 65 | animation-delay: 3s; 66 | } 67 | 68 | .particles:nth-of-type(4) { 69 | left: 75%; 70 | animation-delay: 4s; 71 | } 72 | 73 | .particles:nth-of-type(5) { 74 | left: 35%; 75 | animation-delay: 5s; 76 | } 77 | 78 | .particles:nth-of-type(6) { 79 | left: 50%; 80 | animation-delay: 6s; 81 | } 82 | 83 | .particles:nth-of-type(7) { 84 | left: 65%; 85 | animation-delay: 7s; 86 | } 87 | 88 | .particles:nth-of-type(8) { 89 | left: 35%; 90 | animation-delay: 8s; 91 | } 92 | 93 | .particles:nth-of-type(9) { 94 | left: 55%; 95 | animation-delay: 9s; 96 | } 97 | 98 | .particles:nth-of-type(10) { 99 | left: 55%; 100 | animation-delay: 10s; 101 | } 102 | 103 | .particles:nth-of-type(11) { 104 | left: 35%; 105 | animation-delay: 11s; 106 | } 107 | 108 | .particles:nth-of-type(12) { 109 | left: 50%; 110 | animation-delay: 12s; 111 | } 112 | 113 | .particles:nth-of-type(13) { 114 | left: 65%; 115 | animation-delay: 13s; 116 | } 117 | 118 | .particles:nth-of-type(14) { 119 | left: 40%; 120 | animation-delay: 14s; 121 | } 122 | 123 | .particles:nth-of-type(15) { 124 | left: 60%; 125 | animation-delay: 15s; 126 | } 127 | 128 | .border { 129 | position: absolute; 130 | 131 | width: 100%; 132 | height: 10%; 133 | 134 | top: 0; 135 | left: 0; 136 | 137 | padding-top: 15px; 138 | 139 | background: #1d1c1c; 140 | color: #fff; 141 | 142 | text-transform: uppercase; 143 | text-align: center; 144 | font-size: 30px; 145 | } 146 | 147 | 148 | @keyframes fall { 149 | 0% { 150 | top: -20%; 151 | } 152 | 153 | 20% { 154 | top: 0%; 155 | } 156 | 157 | 80% { 158 | top: 80%; 159 | } 160 | 161 | 100% { 162 | top: 100%; 163 | } 164 | } -------------------------------------------------------------------------------- /Desafios/dia22/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 | 12 | 44 | 45 | 46 | -------------------------------------------------------------------------------- /Desafios/dia22/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | display: flex; 9 | justify-content: center; 10 | align-items: center; 11 | min-height: 100vh; 12 | background-color: #18191F; 13 | } 14 | 15 | ul { 16 | position: relative; 17 | display: flex; 18 | } 19 | 20 | ul li { 21 | list-style: none; 22 | } 23 | 24 | ul li label { 25 | position: relative; 26 | } 27 | 28 | ul li label input[type='checkbox'] { 29 | position: absolute; 30 | opacity: 0; 31 | cursor: pointer; 32 | } 33 | 34 | ul li label .icon { 35 | position: relative; 36 | width: 120px; 37 | height: 120px; 38 | background-color: #18191F; 39 | color: #555; 40 | font-size: 60px; 41 | display: flex; 42 | justify-content: center; 43 | align-items: center; 44 | cursor: pointer; 45 | margin: 0 10px; 46 | border-radius: 10px; 47 | overflow: hidden; 48 | box-shadow: -1px -1px 4px rgba(255,255,255,0.05), 49 | 4px 4px 6px rgba(0,0,0,0.2), 50 | inset -1px -1px 4px rgba(255,255,255,0.05), 51 | inset 1px 1px 1px rgba(0,0,0,0.1); 52 | } 53 | 54 | ul li label .icon:before { 55 | content: ''; 56 | position: absolute; 57 | top: 2px; 58 | left: 2px; 59 | width: calc(100% - 5px); 60 | height: calc(50% - 2px); 61 | border-top-left-radius: 8px; 62 | border-top-right-radius: 8px; 63 | background-color: rgba(255,255,255,0.05); 64 | } 65 | 66 | ul li label input[type="checkbox"]:checked ~ .icon { 67 | box-shadow: inset 0px 0px 2px rgba(255,255,255,0.05), 68 | inset 4px 4px 6px rgba(0,0,0,0.2); 69 | } 70 | 71 | ul li label input[type="checkbox"]:checked ~ .icon .fa { 72 | color: #00F3FF; 73 | text-shadow: 0 0 15px #00F3FF, 74 | 0 0 15px #00F3FF; 75 | animation: animate 5s linear infinite; 76 | } 77 | 78 | @keyframes animate { 79 | 0%{ 80 | filter: hue-rotate(0deg) 81 | } 82 | 100%{ 83 | filter: hue-rotate(360deg) 84 | } 85 | } -------------------------------------------------------------------------------- /Desafios/dia23/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 |

30 Dias

15 |

De CSS

16 |
17 |
18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /Desafios/dia23/main.js: -------------------------------------------------------------------------------- 1 | const pos = document.documentElement; 2 | 3 | pos.addEventListener('mousemove', e => { 4 | pos.style.setProperty('--x', e.clientX + 'px'); 5 | pos.style.setProperty('--y', e.clientY + 'px'); 6 | }) -------------------------------------------------------------------------------- /Desafios/dia23/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | font-family: 'Roboto', sans-serif; 6 | } 7 | 8 | section { 9 | position: relative; 10 | 11 | width: 100%; 12 | height: 100vh; 13 | 14 | background: #111; 15 | 16 | display: flex; 17 | flex-direction: column; 18 | justify-content: center; 19 | align-items: center; 20 | } 21 | 22 | section h2 { 23 | position: relative; 24 | 25 | font-size: 14em; 26 | font-weight: 700; 27 | 28 | color: #111; 29 | 30 | 31 | cursor: default; 32 | 33 | z-index: 1; 34 | } 35 | 36 | section h2:hover ~ .circle { 37 | background: #4775b9; 38 | clip-path: circle(200px at var(--x) var(--y)); 39 | } 40 | 41 | .circle { 42 | position: absolute; 43 | 44 | width: 100%; 45 | height: 100%; 46 | 47 | background: #FF2562; 48 | 49 | pointer-events: none; 50 | transition: .1s; 51 | clip-path: circle(50px at var(--x) var(--y)); 52 | } 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | -------------------------------------------------------------------------------- /Desafios/dia24/Art.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mattheussAL/30diasCSS/9005a646783c277fa8b6779c23de2963dc27755d/Desafios/dia24/Art.jpg -------------------------------------------------------------------------------- /Desafios/dia24/Art2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mattheussAL/30diasCSS/9005a646783c277fa8b6779c23de2963dc27755d/Desafios/dia24/Art2.png -------------------------------------------------------------------------------- /Desafios/dia24/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Dia 26 | Animação de loading liquido 8 | 9 | 10 | 11 |
12 | 13 |
14 | 15 | -------------------------------------------------------------------------------- /Desafios/dia24/main.js: -------------------------------------------------------------------------------- 1 | const card = document.querySelector('.card'); 2 | 3 | function rotateCard() { 4 | card.classList.toggle('rotate'); 5 | } 6 | 7 | card.addEventListener('click', rotateCard) -------------------------------------------------------------------------------- /Desafios/dia24/styles.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | body{ 8 | display: flex; 9 | justify-content: center; 10 | align-items: center; 11 | min-height: 100vh; 12 | background: black; 13 | } 14 | 15 | .loader{ 16 | position: relative; 17 | width: 200px; 18 | height: 200px; 19 | background: #2196f3; 20 | border-radius: 50%; 21 | box-shadow: inset 0 0 50px black; 22 | overflow: hidden; 23 | } 24 | 25 | .loader:before{ 26 | content: ''; 27 | position: absolute; 28 | top: -150%; 29 | left: -50%; 30 | width: 200%; 31 | height: 200%; 32 | border-radius: 40%; 33 | background: #111; 34 | opacity: 0.8; 35 | animation: animate 12s linear infinite; 36 | } 37 | 38 | @keyframes animate{ 39 | 0%{ 40 | transform: rotate(0deg); 41 | } 42 | 43 | 100%{ 44 | transform: rotate(360deg); 45 | } 46 | } 47 | 48 | .loader:after{ 49 | content: ''; 50 | position: absolute; 51 | top: -150%; 52 | left: -50%; 53 | width: 200%; 54 | height: 200%; 55 | border-radius: 40%; 56 | background: #111; 57 | opacity: 0.8; 58 | animation: animate 5s linear infinite; 59 | } 60 | 61 | @keyframes animate2{ 62 | 0%{ 63 | transform: rotate(360deg); 64 | } 65 | 66 | 100%{ 67 | transform: rotate(0deg); 68 | } 69 | } -------------------------------------------------------------------------------- /Desafios/dia25/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Coração 8 | 9 | 10 |
11 | 12 | -------------------------------------------------------------------------------- /Desafios/dia25/style.css: -------------------------------------------------------------------------------- 1 | body 2 | { 3 | height: 100vh; 4 | display: flex; 5 | justify-content: center; 6 | align-items: center; 7 | font-family: 'Lato', sans-serif; 8 | background-color: #262626; 9 | 10 | overflow: hidden; 11 | } 12 | .coracao 13 | { 14 | position: relative; 15 | width: 100px; 16 | height: 100px; 17 | background-color: rgb(247, 72, 72); 18 | transform: rotate(45deg); 19 | animation: batidao 1.4s linear infinite; 20 | box-shadow: 0 0 160px rgb(247, 72, 72); 21 | } 22 | .coracao:before 23 | { 24 | content: ''; 25 | position: absolute; 26 | top: 0; 27 | left: 0; 28 | width: 100%; 29 | height: 100%; 30 | background-color: rgb(247, 72, 72); 31 | transform: translateY(-50%); 32 | border-radius: 50%; 33 | } 34 | .coracao:after 35 | { 36 | content:'' ; 37 | position: absolute; 38 | top: 0; 39 | left: 0; 40 | width: 100%; 41 | height: 100%; 42 | background-color: rgb(247, 72, 72); 43 | transform: translateX(-50%); 44 | border-radius: 50%; 45 | } 46 | 47 | @keyframes batidao 48 | { 49 | 0% {transform: rotate(45deg) scale(1);} 50 | 25% {transform: rotate(45deg) scale(1);} 51 | 30% {transform: rotate(45deg) scale(1.4);} 52 | 50% {transform: rotate(45deg) scale(1.2);} 53 | 70% {transform: rotate(45deg) scale(1.4);} 54 | 100% {transform: rotate(45deg) scale(1);} 55 | } 56 | -------------------------------------------------------------------------------- /Desafios/dia26/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 |
12 |
13 |
14 |
15 |
16 |
17 | 18 |
19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 |
33 |
34 | 35 | 36 | 37 | 38 | -------------------------------------------------------------------------------- /Desafios/dia26/main.js: -------------------------------------------------------------------------------- 1 | [...document.getElementsByTagName("button")].forEach(function (item) { 2 | item.addEventListener("click", function () { 3 | obj[this.id](); 4 | }); 5 | }); 6 | 7 | var obj = { 8 | 1: function () { 9 | document.documentElement.style.setProperty("--player", "#ea1616"); 10 | document.documentElement.style.setProperty("--player-shadow", "#840931"); 11 | }, 12 | 13 | 2: function () { 14 | document.documentElement.style.setProperty("--player", "#132fd2"); 15 | document.documentElement.style.setProperty("--player-shadow", "#09158e"); 16 | }, 17 | 18 | 3: function () { 19 | document.documentElement.style.setProperty("--player", "#107f2c"); 20 | document.documentElement.style.setProperty("--player-shadow", "#0a4d2d"); 21 | }, 22 | 23 | 4: function () { 24 | document.documentElement.style.setProperty("--player", "#ed53b9"); 25 | document.documentElement.style.setProperty("--player-shadow", "#ac2cad"); 26 | }, 27 | 28 | 5: function () { 29 | document.documentElement.style.setProperty("--player", "#ef7d0e"); 30 | document.documentElement.style.setProperty("--player-shadow", "#b53f15"); 31 | }, 32 | 33 | 6: function () { 34 | document.documentElement.style.setProperty("--player", "#f5f558"); 35 | document.documentElement.style.setProperty("--player-shadow", "#c28722"); 36 | }, 37 | 38 | 7: function () { 39 | document.documentElement.style.setProperty("--player", "#3f484e"); 40 | document.documentElement.style.setProperty("--player-shadow", "#1e1f25"); 41 | }, 42 | 43 | 8: function () { 44 | document.documentElement.style.setProperty("--player", "#d5e0ef"); 45 | document.documentElement.style.setProperty("--player-shadow", "#8295bc"); 46 | }, 47 | 48 | 9: function () { 49 | document.documentElement.style.setProperty("--player", "#6b30bc"); 50 | document.documentElement.style.setProperty("--player-shadow", "#3c177c"); 51 | }, 52 | 53 | 10: function () { 54 | document.documentElement.style.setProperty("--player", "#72491e"); 55 | document.documentElement.style.setProperty("--player-shadow", "#5e2613"); 56 | }, 57 | 58 | 11: function () { 59 | document.documentElement.style.setProperty("--player", "#39fedb"); 60 | document.documentElement.style.setProperty("--player-shadow", "#24a9be"); 61 | }, 62 | 63 | 12: function () { 64 | document.documentElement.style.setProperty("--player", "#50ef3a"); 65 | document.documentElement.style.setProperty("--player-shadow", "#16a941"); 66 | } 67 | 68 | }; 69 | 70 | -------------------------------------------------------------------------------- /Desafios/dia26/style.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --player-shadow: #840931; --player: #c71111; 3 | 4 | --red: #C71111; --blue: #142ED2; 5 | --green: #12812E; --pink: #EE54BC; 6 | --orange: #EF7D10; --yellow: #F9F75A; 7 | --black: #3F484E; --white: #D7E2F3; 8 | --purple: #6B30BC; --brown: #704A1E; 9 | --cyan: #44fCD7; --lime: #4FF03A; 10 | } 11 | 12 | *,* :before, *:after { 13 | box-sizing: border-box; 14 | padding: 0; 15 | margin: 0; 16 | } 17 | 18 | body { 19 | background: #fcdb1f; 20 | } 21 | 22 | /* <== Player ==> */ 23 | 24 | .player { 25 | position: absolute; 26 | 27 | top: 0; 28 | right: 0; 29 | bottom: 0; 30 | left: 0; 31 | 32 | width: 140px; 33 | height: 200px; 34 | 35 | margin: auto; 36 | 37 | background: var(--player-shadow); 38 | 39 | border: 10px solid #000000; 40 | border-bottom: none; 41 | border-radius: 60px 80px 0 0; 42 | 43 | transition: background 2s ease; 44 | 45 | z-index: 1; 46 | } 47 | 48 | .player:after { 49 | content: ""; 50 | position: absolute; 51 | 52 | top: 2.5px; 53 | left: 6px; 54 | width: 92%; 55 | height: 85%; 56 | 57 | background: var(--player); 58 | 59 | border-radius:58% 70% 28% 42% / 28% 56% 88% 89%; 60 | 61 | transition: background 2s ease; 62 | } 63 | 64 | .legs { 65 | position: absolute; 66 | 67 | left: -10px; 68 | bottom: -50px; 69 | width: 60px; 70 | height: 50px; 71 | 72 | background: var(--player-shadow); 73 | 74 | border: 10px solid black; 75 | border-top: none; 76 | border-radius: 0 0 22px 22px; 77 | 78 | transition: background 2s ease; 79 | 80 | z-index: 1; 81 | } 82 | 83 | .legs:before { 84 | content: ""; 85 | position: absolute; 86 | 87 | right: -90px; 88 | width: 60px; 89 | height: 45px; 90 | 91 | background: var(--player-shadow); 92 | 93 | border: 10px solid black; 94 | border-top: none; 95 | border-radius: 0 0 22px 22px; 96 | 97 | transition: background 2s ease; 98 | } 99 | 100 | .legs:after { 101 | content: ""; 102 | position: absolute; 103 | 104 | top: -10px; 105 | left: 40px; 106 | width: 55px; 107 | height: 10px; 108 | 109 | background: black; 110 | 111 | border-radius: 0 0 10px 0; 112 | } 113 | 114 | .back { 115 | position: absolute; 116 | 117 | top: 65px; 118 | left: -45px; 119 | width: 35px; 120 | height: 120px; 121 | 122 | background: var(--player); 123 | 124 | border: 10px solid black; 125 | border-right: none; 126 | border-radius: 20px 0 0 20px; 127 | 128 | transition: background 2s ease; 129 | } 130 | 131 | .back:before { 132 | content: ""; 133 | 134 | position: absolute; 135 | 136 | bottom: -0.5px; 137 | left: -1px; 138 | width: 26px; 139 | height: 78px; 140 | 141 | background: var(--player-shadow); 142 | 143 | border-radius: 12px 0 0 8px; 144 | 145 | transition: background 2s ease; 146 | } 147 | 148 | .glass { 149 | position: absolute; 150 | 151 | top: 30px; 152 | left: 40px; 153 | height: 75px; 154 | width: 110px; 155 | 156 | background: #225381; 157 | 158 | border: 10px solid black; 159 | border-radius: 25px 50px 30px 30px ; 160 | 161 | z-index: 2; 162 | } 163 | 164 | .glass:before { 165 | content: ""; 166 | 167 | position: absolute; 168 | 169 | top: 0px; 170 | right: 0px; 171 | width: 85%; 172 | height: 65%; 173 | 174 | background: #71D4EC; 175 | 176 | border-radius: 0 28px 3px 30px ; 177 | } 178 | 179 | .glass:after { 180 | content: ""; 181 | 182 | position: absolute; 183 | 184 | left: 39px; 185 | top: 5px; 186 | width: 45%; 187 | height: 22%; 188 | 189 | background: #F7F7F7; 190 | 191 | border-radius: 25px; 192 | 193 | transform: rotate(6deg); 194 | } 195 | 196 | .shadow { 197 | position: absolute; 198 | 199 | bottom: -60px; 200 | right: -40px; 201 | height: 40px; 202 | width: 210px; 203 | 204 | background:#99820033; 205 | 206 | 207 | border-radius: 50%; 208 | 209 | z-index: 0; 210 | } 211 | 212 | /* <== Custom ==> */ 213 | 214 | .right { 215 | width: 27%; 216 | height: 60vh; 217 | 218 | border-radius: 20px; 219 | } 220 | 221 | .grid-container { 222 | display: grid; 223 | 224 | grid-template-columns: 1fr 1fr 1fr; 225 | grid-template-rows: 1fr 1fr 1fr 1fr; 226 | gap: 2% 2%; 227 | 228 | cursor: pointer; 229 | 230 | height: 75%; 231 | 232 | margin: 5% 15% 20% 15%; 233 | } 234 | 235 | .grid-container > button { 236 | border: 8px solid black; 237 | 238 | border-radius: 40px; 239 | 240 | cursor: pointer; 241 | 242 | outline: none; 243 | } 244 | 245 | /* <== Colors ==> */ 246 | 247 | .red { 248 | background: var(--red); 249 | } 250 | 251 | .blue { 252 | background: var(--blue); 253 | } 254 | 255 | .green { 256 | background: var(--green); 257 | } 258 | 259 | .pink { 260 | background: var(--pink); 261 | } 262 | 263 | .orange { 264 | background: var(--orange); 265 | } 266 | 267 | .yellow { 268 | background: var(--yellow); 269 | } 270 | 271 | .black { 272 | background: var(--black); 273 | } 274 | 275 | .white { 276 | background: var(--white); 277 | } 278 | 279 | .purple { 280 | background: var(--purple); 281 | } 282 | 283 | .brown { 284 | background: var(--brown); 285 | } 286 | 287 | .cyan { 288 | background: var(--cyan); 289 | } 290 | 291 | .lime { 292 | background: var(--lime); 293 | } -------------------------------------------------------------------------------- /Desafios/dia27/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Infinite Road 8 | 9 | 10 |
11 |
12 |
13 | 14 | -------------------------------------------------------------------------------- /Desafios/dia27/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | text-decoration: none; 6 | } 7 | 8 | body { 9 | display: flex; 10 | justify-content: center; 11 | align-items: center; 12 | min-height: 100vh; 13 | 14 | background: radial-gradient(#9bdfff, #009be4); 15 | } 16 | 17 | .infinite { 18 | position: relative; 19 | width: 800px; 20 | height: 160px; 21 | background: #525252; 22 | transform-origin: bottom; 23 | transform-style: preserve-3d; 24 | transform: perspective(500px) rotateX(30deg); 25 | } 26 | 27 | .infinite:before { 28 | content: ''; 29 | position: absolute; 30 | top: 50%; 31 | transform: translateY(-50%); 32 | left: 0; 33 | width: 100%; 34 | height: 10px; 35 | background: linear-gradient( 36 | 90deg, 37 | #fff 0%, 38 | #fff 70%, 39 | #525252 70%, 40 | #525252 100% 41 | ); 42 | background-size: 120px; 43 | animation: animate 0.5s linear infinite; 44 | } 45 | 46 | @keyframes animate { 47 | 0% { 48 | background-position: 0px; 49 | } 50 | 100% { 51 | background-position: -120px; 52 | } 53 | } 54 | 55 | .infinite:after { 56 | content: ''; 57 | position: absolute; 58 | width: 100%; 59 | height: 30px; 60 | background: #333; 61 | bottom: -30px; 62 | transform-origin: top; 63 | transform: perspective(500px) rotateX(-25deg); 64 | } 65 | 66 | .shadow { 67 | position: absolute; 68 | bottom: -93px; 69 | left: 50%; 70 | transform: translateX(-50%); 71 | width: 95%; 72 | height: 60px; 73 | background: linear-gradient(#000, transparent); 74 | opacity: 0.5; 75 | } -------------------------------------------------------------------------------- /Desafios/dia28/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Infinite Road 8 | 9 | 10 | 11 | 12 |

Dia 28 #30DiasCSS

13 | 14 | 15 | -------------------------------------------------------------------------------- /Desafios/dia28/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | padding: 0; 3 | margin: 0; 4 | 5 | box-sizing: border-box; 6 | } 7 | 8 | html{ 9 | min-height: 100%; 10 | overflow: hidden; 11 | } 12 | 13 | body{ 14 | height: calc(100vh - 8em); 15 | padding: 2em; 16 | color: rgba(255,255, 255, 0.75); 17 | font-family: 'Anonymous Pro', monospace; 18 | background-color: rgb(3, 3, 8); 19 | } 20 | 21 | .linha{ 22 | position: relative; 23 | top: 50%; 24 | width: 11em; 25 | margin: 0 14em; 26 | border-right: 2px solid rgba(255,255,255,0.75); 27 | font-size: 300%; 28 | text-align: center; 29 | white-space: nowrap; 30 | overflow: hidden; 31 | transform: translateX(-50%); 32 | color: #F2F2F2; 33 | } 34 | 35 | .anim-typewriter{ 36 | animation: 37 | typewriter 4s steps(40) 1s 1 normal both, 38 | blinkTextCursor 500ms steps(40) infinite normal; 39 | } 40 | 41 | @keyframes typewriter{ 42 | from{ 43 | width: 0; 44 | } 45 | to{ 46 | width: 11em; 47 | } 48 | } 49 | 50 | @keyframes blinkTextCursor{ 51 | from{ 52 | border-right-color: rgba(255,255, 255, 0.75); 53 | } 54 | to{ 55 | border-right-color: transparent; 56 | } 57 | } 58 | -------------------------------------------------------------------------------- /Desafios/dia29/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 | 22 | 23 | -------------------------------------------------------------------------------- /Desafios/dia29/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | padding: 0; 3 | margin: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | background: #d3d2d3; 9 | height: 100vh; 10 | } 11 | 12 | .clock { 13 | position: absolute; 14 | 15 | top: 0; 16 | right: 0; 17 | bottom: 0; 18 | left: 0; 19 | 20 | width: 200px; 21 | height: 200px; 22 | 23 | margin: auto; 24 | 25 | background: linear-gradient(to right, #FFF, #d8d4d4); 26 | 27 | border-radius: 50%; 28 | border: 10px solid #2a3128; 29 | 30 | box-shadow: 0 0 15px #000; 31 | } 32 | 33 | .clock .top { 34 | position: absolute; 35 | 36 | left: 0; 37 | right: 0; 38 | 39 | width: 3px; 40 | height: 8px; 41 | 42 | margin: 0 auto; 43 | 44 | background: #262626; 45 | } 46 | 47 | .clock .right { 48 | position: absolute; 49 | 50 | top: 0; 51 | right: 0; 52 | bottom: 0; 53 | 54 | width: 8px; 55 | height: 3px; 56 | 57 | margin: auto; 58 | 59 | background: #262626; 60 | } 61 | 62 | .clock .bottom { 63 | position: absolute; 64 | 65 | left: 0; 66 | right: 0; 67 | bottom: 0; 68 | 69 | width: 3px; 70 | height: 8px; 71 | 72 | margin: 0 auto; 73 | 74 | background: #262626; 75 | } 76 | 77 | .clock .left { 78 | position: absolute; 79 | 80 | top: 0; 81 | left: 0; 82 | bottom: 0; 83 | 84 | width: 8px; 85 | height: 3px; 86 | 87 | margin: auto; 88 | 89 | background: #262626; 90 | } 91 | 92 | .clock .center { 93 | position: absolute; 94 | 95 | top: 0; 96 | left: 0; 97 | right: 0; 98 | bottom: 0; 99 | 100 | width: 6px; 101 | height: 6px; 102 | 103 | margin: auto; 104 | 105 | background: #262626; 106 | 107 | border-radius: 50%; 108 | } 109 | 110 | .clock .hour { 111 | position: absolute; 112 | 113 | left: 0; 114 | right: 0; 115 | 116 | width: 3px; 117 | height: 100%; 118 | 119 | margin: 0 auto; 120 | 121 | animation: time 60s infinite linear; 122 | } 123 | 124 | .clock .hour::before { 125 | content: ''; 126 | 127 | position: absolute; 128 | 129 | top: 30px; 130 | 131 | width: 2px; 132 | height: 60px; 133 | 134 | background: #262626; 135 | } 136 | 137 | .clock .minute { 138 | position: absolute; 139 | 140 | left: 0; 141 | right: 0; 142 | 143 | width: 1px; 144 | height: 100%; 145 | 146 | margin: 0 auto; 147 | 148 | animation: time 30s infinite linear; 149 | } 150 | 151 | .clock .minute::before { 152 | content: ''; 153 | 154 | position: absolute; 155 | 156 | top: 50px; 157 | 158 | width: 1px; 159 | height: 40px; 160 | 161 | background: #262626; 162 | } 163 | 164 | .clock .second { 165 | position: absolute; 166 | 167 | left: 0; 168 | right: 0; 169 | 170 | width: 2px; 171 | height: 100%; 172 | 173 | margin: 0 auto; 174 | 175 | 176 | animation: time 15s infinite linear; 177 | } 178 | 179 | .clock .second::before { 180 | content: ''; 181 | 182 | position: absolute; 183 | 184 | top: 45px; 185 | 186 | width: 2px; 187 | height: 43px; 188 | 189 | background: #FD1111; 190 | } 191 | 192 | @keyframes time { 193 | to { 194 | transform: rotate(360deg); 195 | } 196 | } 197 | 198 | 199 | 200 | 201 | 202 | 203 | 204 | 205 | 206 | 207 | 208 | 209 | 210 | 211 | 212 | 213 | 214 | 215 | 216 | 217 | 218 | 219 | 220 | 221 | 222 | 223 | 224 | 225 | 226 | 227 | 228 | 229 | 230 | 231 | 232 | 233 | 234 | 235 | 236 | 237 | 238 | 239 | 240 | 241 | 242 | 243 | 244 | 245 | 246 | 247 | 248 | 249 | 250 | 251 | 252 | 253 | 254 | 255 | 256 | 257 | 258 | 259 | 260 | 261 | 262 | 263 | 264 | 265 | 266 | 267 | 268 | 269 | 270 | 271 | 272 | 273 | 274 | 275 | 276 | 277 | 278 | 279 | 280 | 281 | 282 | 283 | 284 | 285 | 286 | 287 | 288 | 289 | 290 | 291 | 292 | 293 | 294 | 295 | 296 | 297 | 298 | 299 | 300 | 301 | 302 | 303 | 304 | 305 | 306 | 307 | 308 | 309 | 310 | 311 | 312 | 313 | 314 | 315 | 316 | 317 | 318 | 319 | 320 | 321 | 322 | 323 | 324 | 325 | 326 | 327 | 328 | 329 | 330 | 331 | 332 | 333 | 334 | 335 | 336 | 337 | 338 | 339 | 340 | 341 | 342 | 343 | 344 | 345 | 346 | 347 | 348 | 349 | 350 | 351 | 352 | 353 | 354 | 355 | 356 | 357 | 358 | 359 | 360 | 361 | 362 | 363 | 364 | 365 | 366 | 367 | 368 | 369 | 370 | 371 | 372 | 373 | 374 | 375 | 376 | 377 | 378 | 379 | 380 | 381 | 382 | 383 | 384 | 385 | 386 | 387 | 388 | 389 | 390 | 391 | 392 | 393 | 394 | 395 | 396 | 397 | 398 | 399 | 400 | 401 | 402 | 403 | 404 | 405 | 406 | 407 | 408 | 409 | 410 | 411 | 412 | 413 | -------------------------------------------------------------------------------- /Desafios/dia3/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Mudança de cor de texto 7 | 8 | 9 | 10 | 11 |
12 | 13 | Desafio 30 Dias CSS 😉 Desafio 30 Dias CSS 14 | 15 |
16 | 17 | Desafio 30 Dias CSS 😉 Desafio 30 Dias CSS 18 | 19 |
20 |
21 | 22 | -------------------------------------------------------------------------------- /Desafios/dia3/style.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --color-one:#222; 3 | --color-two: #f2f2f2; 4 | --color-three: #ff005b; 5 | 6 | --color-text: #fff; 7 | --border: #262626; 8 | } 9 | 10 | body { 11 | margin: 0; 12 | padding: 0; 13 | } 14 | 15 | section { 16 | position: absolute; 17 | 18 | width: 100%; 19 | height: 100%; 20 | 21 | background-color: var(--color-one); 22 | color: var(--color-text); 23 | 24 | box-sizing: border-box; 25 | 26 | overflow: hidden; 27 | } 28 | 29 | .content { 30 | position: absolute; 31 | top: 45%; 32 | 33 | font-family: 'Roboto', cursive; 34 | font-size: 12em; 35 | line-height: 220px; 36 | 37 | white-space: nowrap; 38 | 39 | text-shadow: 0 0 20px var(--color-three); 40 | 41 | overflow: hidden; 42 | animation: animateScroll 10s linear infinite; 43 | } 44 | 45 | 46 | .wrapper { 47 | position: absolute; 48 | 49 | top: 0; 50 | left: 0; 51 | height: 100%; 52 | width: 50%; 53 | 54 | background-color: var(--color-two); 55 | color: var(--color-three); 56 | 57 | border-right: 2px solid var(--border); 58 | 59 | overflow: hidden; 60 | } 61 | 62 | @keyframes animateScroll { 63 | 0% { 64 | transform: translate(25%, -50%); 65 | } 66 | 67 | 100% { 68 | transform: translate(-50%, -50%); 69 | } 70 | } -------------------------------------------------------------------------------- /Desafios/dia30/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Card Hover Effect 8 | 9 | 10 |
11 |
12 |
13 |
14 |

FINALIZADO

15 |

E agora chegamos ao fim desses 30 dias maravilhososs de muita evolução e conhecimento !!

16 |
17 |
18 |
19 |

01

20 |
21 |
22 | 23 |
24 |
25 |
26 |

Evoluir Sempre !!!

27 |

Dar um passo de cada vez foi o que fiz durante todos esses 30 dias, aprende muito e sinto completa evolução e novos conhecimentos

28 |
29 |
30 |
31 |

02

32 |
33 |
34 | 35 |
36 |
37 |
38 |

Comunidade !!!

39 |

Obrigado a todos você que também fizeram parte disso, cada like cada comentário e star no github foi de muita ajuda VOCÊS SÃO SHOW

40 |
41 |
42 |
43 |

03

44 |
45 |
46 |
47 | 48 | -------------------------------------------------------------------------------- /Desafios/dia30/main.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mattheussAL/30diasCSS/9005a646783c277fa8b6779c23de2963dc27755d/Desafios/dia30/main.js -------------------------------------------------------------------------------- /Desafios/dia30/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400&display=swap'); 2 | 3 | * { 4 | padding: 0; 5 | margin: 0; 6 | box-sizing: border-box; 7 | text-decoration: none; 8 | 9 | font-family: 'Poppins', sans-serif; 10 | } 11 | 12 | body { 13 | display: flex; 14 | justify-content: center; 15 | align-items: center; 16 | min-height: 100vh; 17 | background: linear-gradient(45deg, #24006b, #f42f8c); 18 | } 19 | 20 | .container { 21 | width: 1200px; 22 | display: grid; 23 | grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); 24 | grid-gap: 15px; 25 | margin: 0 auto; 26 | } 27 | 28 | .container .card { 29 | position: relative; 30 | width: 300px; 31 | height: 400px; 32 | margin: 0 auto; 33 | background: #fff; 34 | box-shadow: 0 15px 60px rgba(0, 0, 0, 0.5); 35 | } 36 | 37 | .container .card .face { 38 | position: absolute; 39 | bottom: 0; 40 | left: 0; 41 | width: 100%; 42 | height: 100%; 43 | 44 | display: flex; 45 | justify-content: center; 46 | align-items: center; 47 | } 48 | 49 | .container .card .face.face1 { 50 | padding: 20px; 51 | } 52 | 53 | .container .card .face.face2 { 54 | background: #111; 55 | transition: 0.5s; 56 | } 57 | 58 | .container .card .face.face2:before { 59 | content: ''; 60 | position: absolute; 61 | width: 50%; 62 | height: 100%; 63 | top: 0; 64 | left: 0; 65 | background: rgba(255, 255, 255, 0.1); 66 | } 67 | 68 | .container .card:hover .face.face2 { 69 | height: 60px; 70 | } 71 | 72 | .container .card:nth-child(1) .face.face2 { 73 | background: linear-gradient(45deg, #3503ad, #f7308c); 74 | } 75 | 76 | .container .card:nth-child(2) .face.face2 { 77 | background: linear-gradient(45deg, #ccff00, #09afff); 78 | } 79 | 80 | .container .card:nth-child(3) .face.face2 { 81 | background: linear-gradient(45deg, #e91e63, #ffeb3b); 82 | } 83 | 84 | .container .card:hover .face.face2 h1 { 85 | font-size: 2em; 86 | } 87 | 88 | .container .card .face.face2 h1 { 89 | font-size: 10em; 90 | color: #fff; 91 | transition: 0.5s; 92 | text-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); 93 | } -------------------------------------------------------------------------------- /Desafios/dia4/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Efeito hover 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /Desafios/dia4/style.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --bg: #353b48; 3 | --color-button: #ff005b; 4 | --color-button2: #F300F3; 5 | --color-button3: #DEFE47; 6 | --color-button4: #00B3FE; 7 | } 8 | 9 | * { 10 | margin: 0; 11 | padding: 0; 12 | font-family: "montserrat", sans-serif; 13 | } 14 | 15 | body { 16 | background: var(--bg); 17 | height: 100vh; 18 | display: flex; 19 | align-items: center; 20 | justify-content: center; 21 | } 22 | 23 | .btn { 24 | position: relative; 25 | 26 | width: 200px; 27 | height: 60px; 28 | 29 | margin: 20px; 30 | 31 | background: none; 32 | color: var(--color-button); 33 | 34 | border: 4px solid; 35 | 36 | font-weight: 700; 37 | font-size: 16px; 38 | text-transform: uppercase; 39 | 40 | cursor: pointer; 41 | } 42 | 43 | .btn2 { 44 | color: var(--color-button2) ; 45 | } 46 | 47 | .btn3 { 48 | color: var(--color-button3) ; 49 | } 50 | 51 | .btn4 { 52 | color: var(--color-button4) ; 53 | } 54 | 55 | .btn::before, .btn::after { 56 | content: ""; 57 | 58 | position: absolute; 59 | 60 | width: 14px; 61 | height: 4px; 62 | 63 | background: var(--bg); 64 | 65 | transform: skewX(50deg); 66 | transition: .4s linear; 67 | } 68 | 69 | .btn::before { 70 | top: -4px; 71 | left: 10%; 72 | } 73 | 74 | .btn::after { 75 | bottom: -4px; 76 | right: 10%; 77 | } 78 | 79 | .btn:hover::before { 80 | left: 80%; 81 | } 82 | 83 | .btn:hover::after { 84 | right: 80%; 85 | } -------------------------------------------------------------------------------- /Desafios/dia5/img/animado.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mattheussAL/30diasCSS/9005a646783c277fa8b6779c23de2963dc27755d/Desafios/dia5/img/animado.png -------------------------------------------------------------------------------- /Desafios/dia5/img/bigode.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mattheussAL/30diasCSS/9005a646783c277fa8b6779c23de2963dc27755d/Desafios/dia5/img/bigode.png -------------------------------------------------------------------------------- /Desafios/dia5/img/emoji.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mattheussAL/30diasCSS/9005a646783c277fa8b6779c23de2963dc27755d/Desafios/dia5/img/emoji.png -------------------------------------------------------------------------------- /Desafios/dia5/img/facebook.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mattheussAL/30diasCSS/9005a646783c277fa8b6779c23de2963dc27755d/Desafios/dia5/img/facebook.png -------------------------------------------------------------------------------- /Desafios/dia5/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Effet Pulser 7 | 8 | 9 | 10 | 11 | 12 |
13 |
14 | 15 | 16 | 17 |
18 |
19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /Desafios/dia5/style.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --bg-page: #2e2e2be0; 3 | --bg: #309cee; 4 | --text-color: #f2f2f2; 5 | } 6 | 7 | body { 8 | margin: 0; 9 | padding: 0; 10 | 11 | font-family: "Roboto", sans-serif; 12 | 13 | background: var(--bg-page); 14 | } 15 | 16 | .button { 17 | position: absolute; 18 | 19 | top: 50%; 20 | left: 50%; 21 | 22 | transform: translate(-50%, -50%); 23 | } 24 | 25 | .pulsar { 26 | width: 100%; 27 | height: 100%; 28 | padding: 20px; 29 | 30 | background-color: var(--bg); 31 | 32 | border-radius: 40%; 33 | 34 | color: var(--text-color); 35 | 36 | line-height: 100px; 37 | text-align: center; 38 | 39 | cursor: pointer; 40 | 41 | animation: animate 1.8s linear infinite; 42 | } 43 | 44 | .pulsar span img { 45 | position: relative; 46 | 47 | top: 1.2rem; 48 | 49 | width: 6rem; 50 | height: 6rem; 51 | 52 | animation: rotate 4s linear infinite; 53 | } 54 | 55 | @keyframes rotate { 56 | 0% { 57 | transform: rotate(0deg); 58 | } 59 | 100% { 60 | transform: rotate(360deg); 61 | } 62 | } 63 | 64 | @keyframes animate { 65 | 0% { 66 | box-shadow: 67 | 0 0 0 10px rgb(42, 137, 201), 68 | 0 0 0 0 rgb(41, 143, 197); 69 | } 70 | 71 | 40% { 72 | box-shadow: 73 | 0 0 0 100px rgba(255, 109, 74, 0), 74 | 0 0 0 20px rgb(18, 162, 240); 75 | } 76 | 77 | 80% { 78 | box-shadow: 79 | 0 0 0 80px rgba(255, 80, 74, 0), 80 | 0 0 0 30px rgba(255, 50, 74, 0); 81 | } 82 | 83 | 100% { 84 | box-shadow: 85 | 0 0 0 10px rgba(255, 109, 74, 0), 86 | 0 0 0 30px rgba(255, 109, 74, 0); 87 | } 88 | 89 | } 90 | 91 | 92 | -------------------------------------------------------------------------------- /Desafios/dia6/img/tanjiro_.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mattheussAL/30diasCSS/9005a646783c277fa8b6779c23de2963dc27755d/Desafios/dia6/img/tanjiro_.png -------------------------------------------------------------------------------- /Desafios/dia6/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Day 06 - Texto Esfumaçado 7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 28 |
29 | 30 | 31 | -------------------------------------------------------------------------------- /Desafios/dia6/style.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --bg: #27303d; 3 | --color-text: #f2f2f2; 4 | } 5 | 6 | * { 7 | padding: 0; 8 | margin: 0; 9 | box-sizing: border-box; 10 | } 11 | 12 | body { 13 | width: 100vw; 14 | height: 100vh; 15 | 16 | background: var(--bg); 17 | 18 | display: flex; 19 | justify-content: center; 20 | align-items: center; 21 | 22 | overflow: hidden; 23 | } 24 | 25 | ul { 26 | font-family: 'Patua One', cursive, sans-serif; 27 | font-size: 8em; 28 | 29 | margin: 0; 30 | padding: 0; 31 | 32 | display: flex; 33 | 34 | cursor: pointer; 35 | } 36 | 37 | ul li { 38 | color: var(--color-text); 39 | margin-top: -1.3em; 40 | 41 | list-style: none; 42 | 43 | display: flex; 44 | justify-content: center; 45 | align-items: center; 46 | 47 | transition: 2s; 48 | } 49 | 50 | img { 51 | height: 3.8em; 52 | margin-top: 2em; 53 | } 54 | 55 | ul:hover li { 56 | transform: rotate(45deg) translateY(-2em); 57 | opacity: 0; 58 | filter: blur(.1em); 59 | } 60 | -------------------------------------------------------------------------------- /Desafios/dia7/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 | 12 |

13 | 3 14 | 0 15 | D 16 | i 17 | a 18 | s 19 | C 20 | S 21 | S 22 |

23 | 24 | 25 | -------------------------------------------------------------------------------- /Desafios/dia7/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | display: flex; 9 | justify-content: center; 10 | align-items: center; 11 | 12 | height: 100vh; 13 | background: #222; 14 | 15 | font-family: 'Fredoka One', sans-serif; 16 | } 17 | 18 | h1 { 19 | margin: 0; 20 | padding: 0; 21 | font-size: 8em; 22 | letter-spacing: .2em; 23 | } 24 | 25 | h1 span { 26 | display: table-cell; 27 | margin: 0; 28 | padding: 0; 29 | animation: animate 2s linear infinite; 30 | } 31 | 32 | h1 span:nth-child(1) { 33 | animation-delay: 2s; 34 | } 35 | h1 span:nth-child(2) { 36 | animation-delay: 2.25s; 37 | } 38 | h1 span:nth-child(3) { 39 | animation-delay: 2.5s; 40 | } 41 | h1 span:nth-child(4) { 42 | animation-delay: 2.75s; 43 | } 44 | h1 span:nth-child(5) { 45 | animation-delay: 3s; 46 | } 47 | h1 span:nth-child(6) { 48 | animation-delay: 3.25s; 49 | } 50 | h1 span:nth-child(7) { 51 | animation-delay: 3.5s; 52 | } 53 | h1 span:nth-child(8) { 54 | animation-delay: 3.75s; 55 | } 56 | h1 span:nth-child(9) { 57 | animation-delay: 4s; 58 | } 59 | 60 | @keyframes animate { 61 | 0%{ 62 | color: rgb(206, 21, 243); 63 | filter: blur(2px); 64 | } 65 | 66 | 100% { 67 | color:#111; 68 | filter: blur(0px); 69 | } 70 | } 71 | -------------------------------------------------------------------------------- /Desafios/dia8/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | preloader animation 8 | 9 | 10 |
11 | 12 | 13 | 14 |
15 | 16 | -------------------------------------------------------------------------------- /Desafios/dia8/style.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --bg: #333; 3 | --loading-one:#ffff00; 4 | --loading-two:#ff12e3; 5 | --loading-three:#169ffa; 6 | } 7 | 8 | body { 9 | margin: 0; 10 | padding: 0; 11 | 12 | height: 100vh; 13 | 14 | background: var(--bg); 15 | 16 | display: flex; 17 | align-items: center; 18 | justify-content: center; 19 | } 20 | 21 | .loader { 22 | position: relative; 23 | 24 | width: 150px; 25 | height: 150px; 26 | } 27 | 28 | span { 29 | position: absolute; 30 | 31 | width: 50px; 32 | height: 50px; 33 | 34 | border-radius: 4px; 35 | animation: chase 2s linear infinite; 36 | 37 | } 38 | 39 | span:nth-child(1) { 40 | animation-delay: 1.4s; 41 | background: var(--loading-one); 42 | } 43 | 44 | span:nth-child(2) { 45 | animation-delay: 0.7s; 46 | background: var(--loading-two); 47 | } 48 | 49 | span:nth-child(3) { 50 | background: var(--loading-three); 51 | } 52 | 53 | 54 | 55 | @keyframes chase { 56 | 0% { 57 | top: 0; left: 0; 58 | } 59 | 60 | 10% { 61 | top: 0; left: 50%; 62 | } 63 | 64 | 25% { 65 | top: 0; left: 50%; 66 | } 67 | 68 | 30% { 69 | top: 50%; left: 50%; 70 | } 71 | 72 | 50% { 73 | top: 50%; left: 50%; 74 | } 75 | 76 | 60% { 77 | top: 50% ; left: 0; 78 | } 79 | 80 | 75% { 81 | top: 50% ; left: 0; 82 | } 83 | 84 | 80% { 85 | top: 0; left: 0; 86 | } 87 | 88 | 100% { 89 | top: 0; left: 0; 90 | } 91 | } -------------------------------------------------------------------------------- /Desafios/dia9/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Pendulo de Newton 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | -------------------------------------------------------------------------------- /Desafios/dia9/style.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --bg: #181818; 3 | 4 | --border: #fff; 5 | --pendulo: #fff; 6 | 7 | --light-one: #59fa53; 8 | --light-two: #fa53d0; 9 | --light-three: #effa53; 10 | } 11 | 12 | body { 13 | margin: 0; 14 | padding: 0; 15 | box-sizing: border-box; 16 | 17 | background-color: var(--bg); 18 | overflow: hidden; 19 | 20 | display: flex; 21 | justify-content: center; 22 | align-items: center; 23 | } 24 | 25 | .pendulo { 26 | display: flex; 27 | 28 | margin-top: 160px; 29 | padding: 0 0 20px 0; 30 | 31 | border-top: 18px solid var(--border); 32 | } 33 | 34 | .pendulo span { 35 | position: relative; 36 | 37 | display: block; 38 | width: 5px; 39 | height: 300px; 40 | margin: 0 29px; 41 | 42 | background: var(--pendulo); 43 | transform-origin: top; 44 | } 45 | 46 | .pendulo span:before { 47 | content: ""; 48 | 49 | position: absolute; 50 | 51 | bottom: 0; 52 | left: 0; 53 | 54 | width: 60px; 55 | height: 60px; 56 | 57 | border-radius: 50%; 58 | 59 | background: var(--pendulo); 60 | 61 | transform: translateX(-50%); 62 | animation: color-ball 2s linear infinite; 63 | } 64 | 65 | .pendulo span:first-child { 66 | animation: left-ball 2s ease-in infinite; 67 | } 68 | 69 | .pendulo span:last-child { 70 | animation: right-ball 2s ease-in infinite 1s; 71 | } 72 | 73 | @keyframes left-ball { 74 | 0% { 75 | transform: rotate(0deg); 76 | box-shadow: 2px 0 60px var(--light-one); 77 | } 78 | 79 | 25% { 80 | transform: rotate(60deg); 81 | box-shadow: 2px 0 60px var(--light-two); 82 | } 83 | 84 | 50% { 85 | transform: rotate(0deg); 86 | box-shadow: 2px 0 60px var(--light-three); 87 | } 88 | 89 | 100% { 90 | transform: rotate(0deg); 91 | } 92 | } 93 | 94 | @keyframes right-ball { 95 | 0% { 96 | transform: rotate(0deg); 97 | box-shadow: 2px 0 60px var(--light-one); 98 | } 99 | 100 | 25% { 101 | transform: rotate(-60deg); 102 | box-shadow: 2px 0 60px var(--light-two); 103 | } 104 | 105 | 50% { 106 | transform: rotate(0deg); 107 | box-shadow: 2px 0 60px var(--light-three); 108 | } 109 | 110 | 100% { 111 | transform: rotate(0deg); 112 | } 113 | } 114 | 115 | @keyframes color-ball { 116 | 0% { 117 | box-shadow: 0 0 60px var(--light-one); 118 | } 119 | 120 | 50% { 121 | box-shadow: 0 0 60px var(--light-two); 122 | } 123 | 124 | 100% { 125 | box-shadow: 0 0 60px var(--light-three); 126 | } 127 | } 128 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2020 Milena Carecho 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. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ## 🚀 30diasCSS 🚀 2 | ![GitHub](https://img.shields.io/github/license/mattheussAL/30diasCSS?color=red) 3 | ![GitHub last commit](https://img.shields.io/github/last-commit/mattheussAL/30diasCSS) 4 | 5 | Fala Devs, beleza? 🖖 6 | 7 | 30 dias de CSS3, é um desafio que visa ajudá-lo a melhorar suas habilidades de codificação fazendo mini projetos diarios utilizando HTML5 e CSS3 8 | 9 | ## Objetivo 10 | 11 | 30 dias de CSS3 é um desafio que vou aceitar (e você também pode participar) a partir de 20 de Julho de 2020, que visa melhorar minhas habilidades em HTML5 e CSS3 através da realização de projetos 12 | 13 | ## Regras gerais 14 | 15 | * Realizar um projeto por dia 16 | * Compartilhe seu progresso nas mídias sociais (Twitter, Facebook, Linkedin etc.) usando a hashtag #30diasCSS 17 | * O projeto deve ser concluído até 23:59 18 | 19 | Gostou da ideia? 20 | [Clique aqui](https://github.com/mattheussAL/30diasCSS/issues/1) para participar. 21 | 22 | * [Dia 01 - Ícone de mídia social em camadas](#id01) 23 | * [Dia 02 - Loader animado](#id02) 24 | * [Dia 03 - Mudança de cor de texto quando entra em outra div](#id03) 25 | * [Dia 04 - Botão com efeito](#id04) 26 | * [Dia 05 - Efeito pulsar](#id05) 27 | * [Dia 06 - Efeito Smoke text](#id06) 28 | * [Dia 07 - Efeito lightning text](#id07) 29 | * [Dia 08 - Preloader Animado](#id08) 30 | * [Dia 09 - Pendulo de Newton](#id09) 31 | * [Dia 10 - Particle Effects](#id10) 32 | * [Dia 11 - Button Effect Hover and Animation](#id11) 33 | * [Dia 12 - Bouncing Balls](#id12) 34 | * [Dia 13 - Loading with Effect](#id12) 35 | * [Dia 14 - Pumpkins (Halloween)](#id14) 36 | * [Dia 15 - Fogos de Artifício](#id15) 37 | * [Dia 16 - Carrousel 3D](#id16) 38 | * [Dia 17 - 30 Dias de CSS](#id17) 39 | * [Dia 18 - Loading Animated Light](#id18) 40 | * [Dia 19 - Background Animado](#id19) 41 | * [Dia 20 - Cube 3D](#id20) 42 | * [Dia 21 - Dripping Liquid](#id21) 43 | * [Dia 22 - Buttons Neon Shadow](#id22) 44 | * [Dia 23 - Mouse Move](#id23) 45 | * [Dia 24 - Efeito Liquido](#id24) 46 | * [Dia 25 - Coração Pulsar](#id25) 47 | * [Dia 26 - Amoung Us](#id26) 48 | * [Dia 27 - Rua Animation](#id27) 49 | * [Dia 28 - Máquina de Escrever](#id28) 50 | * [Dia 29 - Relógio](#id29) 51 | * [Dia 30 - Cards Finais](#id30) 52 | 53 | ## Desafio dia 01 - Ícone de mídia social em camadas 54 | 55 | 56 | [Meu codigo](https://github.com/mattheussAL/30diasCSS/tree/main/Desafios/dia1) 57 | 58 | [Post LinkedIn](https://www.linkedin.com/posts/matheus-alves-dos-santos-b5038a184_30diascss-css-html-activity-6719032959489339392-riUC) 59 | 60 | 61 | ##### O que eu aprendi 62 | 63 | * *Criar as camadas utilizando a tag ``* 64 | * *tranformação 2D ou 3D de um elemento [aqui](https://www.w3schools.com/cssref/css3_pr_transform.asp)* 65 | * *[Transições CSS](https://www.w3schools.com/css/css3_transitions.asp)* 66 | * *[Opacidade / transparência do CSS](https://www.w3schools.com/css/css_image_transparency.asp)* 67 | * *[hover](https://www.w3schools.com/cssref/sel_hover.asp)* 68 | * *[nth-child ()](https://www.w3schools.com/cssref/sel_nth-child.asp)* 69 | 70 | 71 | 72 | ## Desafio dia 02 - Loader animado 73 | 74 | 75 | [Meu código](https://github.com/mattheussAL/30diasCSS/tree/main/Desafios/dia2) 76 | 77 | [Post LinkedIn](https://www.linkedin.com/posts/matheus-alves-dos-santos-b5038a184_30diasdecs-incentivo-aprender-activity-6719431125221036033-tnA2) 78 | 79 | ##### O que eu aprendi 80 | 81 | * *[animations](https://www.w3schools.com/css/css3_animations.asp)* 82 | 83 | 84 | ## Desafio dia 03 - Mudança de cor de texto quando entra em outra div 85 | 86 | 87 | [Meu código](https://github.com/mattheussAL/30diasCSS/tree/main/Desafios/dia3) 88 | 89 | [Post LinkedIn](https://www.linkedin.com/posts/matheus-alves-dos-santos-b5038a184_30diascss-web-frontend-activity-6719792266447220736-QiF0) 90 | 91 | 92 | ##### Dicas 93 | 94 | * *[CSS Overflow](https://www.w3schools.com/css/css_overflow.asp)* 95 | * *Use [animations](https://www.w3schools.com/css/css3_animations.asp)* 96 | 97 | 98 | ## Desafio dia 04 - Botão com efeito 99 | 100 | 101 | 102 | [Meu codigo](https://github.com/mattheussAL/30diasCSS/tree/main/Desafios/dia4) 103 | 104 | [Post LinkedIn](https://www.linkedin.com/posts/matheus-alves-dos-santos-b5038a184_30diascss-frontend-web-activity-6720164432560840704-k5Xq) 105 | 106 | ##### O que eu aprendi 107 | 108 | * *[:hover](https://www.w3schools.com/cssref/sel_hover.asp)* 109 | * *[::before](https://www.w3schools.com/cssref/sel_before.asp)* 110 | * *[::after](https://www.w3schools.com/cssref/sel_after.asp)* 111 | * *[Transições ](https://www.w3schools.com/css/css3_transitions.asp)* 112 | * *[transformação](https://www.w3schools.com/cssref/css3_pr_transform.asp)* 113 | 114 | 115 | ## Desafio dia 05 - Efeito pulsar 116 | 117 | 118 | [Meu codigo](https://github.com/mattheussAL/30diasCSS/tree/main/Desafios/dia5) 119 | 120 | [Post LinkedIn](https://www.linkedin.com/posts/matheus-alves-dos-santos-b5038a184_web-frontend-30diascss-activity-6720740891012685825-q3CJ) 121 | 122 | ##### O que eu aprendi 123 | 124 | * *[animations](https://www.w3schools.com/css/css3_animations.asp)* 125 | * *[transformação](https://www.w3schools.com/cssref/css3_pr_transform.asp)* 126 | 127 | ## Desafio dia 06 - Efeito Smoke text 128 | 129 | 130 | 131 | [Meu codigo](https://github.com/mattheussAL/30diasCSS/tree/main/Desafios/dia6) 132 | 133 | [Post LinkedIn](https://www.linkedin.com/posts/matheus-alves-dos-santos-b5038a184_30diascss-css-html-activity-6724476197276786688-kySp) 134 | 135 | ##### O que eu aprendi 136 | 137 | * *[animations](https://www.w3schools.com/css/css3_animations.asp)* 138 | 139 | ## Desafio dia 07 - Efeito lightning text 140 | 141 | 142 | 143 | [Meu codigo](https://github.com/mattheussAL/30diasCSS/tree/main/Desafios/dia7) 144 | 145 | [Post LinkedIn](https://www.linkedin.com/posts/matheus-alves-dos-santos-b5038a184_web-dev-frontend-activity-6724875807656812544-uAWJ) 146 | 147 | ##### O que eu aprendi 148 | 149 | * *[animations](https://www.w3schools.com/css/css3_animations.asp)* 150 | 151 | ## Desafio dia 08 - Preloader Animado 152 | 153 | 154 | 155 | [Meu codigo](https://github.com/mattheussAL/30diasCSS/tree/main/Desafios/dia8) 156 | 157 | [Post LinkedIn](https://www.linkedin.com/posts/matheus-alves-dos-santos-b5038a184_web-frontend-css-activity-6725180960171679744-vtF0) 158 | 159 | ##### O que eu aprendi 160 | 161 | * *[animations](https://www.w3schools.com/css/css3_animations.asp)* 162 | * *[animation-delay](https://www.w3schools.com/css/css3_animations.asp)* 163 | * *[keyframes](https://www.w3schools.com/css/css3_animations.asp)* 164 | * *[transition](https://www.w3schools.com/css/css3_animations.asp)* 165 | 166 | 167 | ## Desafio dia 09 - Pendulo de Newton 168 | 169 | 170 | 171 | [Meu codigo](https://github.com/mattheussAL/30diasCSS/tree/main/Desafios/dia9) 172 | 173 | [Post LinkedIn](https://www.linkedin.com/posts/matheus-alves-dos-santos-b5038a184_web-frontend-30diascss-activity-6725542220952424448-UePt) 174 | 175 | ##### O que eu aprendi 176 | 177 | * *[animations](https://www.w3schools.com/css/css3_animations.asp)* 178 | * *[animation-delay](https://www.w3schools.com/css/css3_animations.asp)* 179 | * *[keyframes](https://www.w3schools.com/css/css3_animations.asp)* 180 | * *[transition](https://www.w3schools.com/css/css3_animations.asp)* 181 | * *[::before](https://www.w3schools.com/cssref/sel_before.asp)* 182 | * *[::after](https://www.w3schools.com/cssref/sel_after.asp)* 183 | 184 | 185 | ## Desafio dia 10 - Particle Effects 186 | 187 | 188 | [Meu codigo](https://github.com/mattheussAL/30diasCSS/tree/main/Desafios/dia10) 189 | 190 | [Post LinkedIn](https://www.linkedin.com/posts/matheus-alves-dos-santos-b5038a184_30diascss-web-desenvolvimento-activity-6726565037755928576-m4oC) 191 | 192 | ##### O que eu aprendi 193 | 194 | * *[animations](https://www.w3schools.com/css/css3_animations.asp)* 195 | * *[keyframes](https://www.w3schools.com/css/css3_animations.asp)* 196 | * *[::before](https://www.w3schools.com/cssref/sel_before.asp)* 197 | * *[::after](https://www.w3schools.com/cssref/sel_after.asp)* 198 | 199 | ## Desafio dia 11 - Button Effect Hover and Animation 200 | 201 | 202 | [Meu codigo](https://github.com/mattheussAL/30diasCSS/tree/main/Desafios/dia11) 203 | 204 | [Post LinkedIn](https://www.linkedin.com/posts/matheus-alves-dos-santos-b5038a184_web-developer-css-activity-6727046616785682432-_OjA) 205 | 206 | ##### O que eu aprendi 207 | 208 | * *[animations](https://www.w3schools.com/css/css3_animations.asp)* 209 | * *[keyframes](https://www.w3schools.com/css/css3_animations.asp)* 210 | * *[::before](https://www.w3schools.com/cssref/sel_before.asp)* 211 | * *[::after](https://www.w3schools.com/cssref/sel_after.asp)* 212 | 213 | ## Desafio dia 12 - Bouncing Balls 214 | 215 | 216 | [Meu codigo](https://github.com/mattheussAL/30diasCSS/tree/main/Desafios/dia12) 217 | 218 | [Post LinkedIn](https://www.linkedin.com/posts/matheus-alves-dos-santos-b5038a184_30diascss-evoluir-web-activity-6727362289105702912-xyMC) 219 | 220 | ##### O que eu aprendi 221 | 222 | * *[animations](https://www.w3schools.com/css/css3_animations.asp)* 223 | * *[keyframes](https://www.w3schools.com/css/css3_animations.asp)* 224 | 225 | ## Desafio dia 13 - Loading with Effect 226 | 227 | 228 | [Meu codigo](https://github.com/mattheussAL/30diasCSS/tree/main/Desafios/dia13) 229 | 230 | [Post LinkedIn](https://www.linkedin.com/posts/matheus-alves-dos-santos-b5038a184_30diascss-web-frontend-activity-6727759620468690944-H2cn) 231 | 232 | ##### O que eu aprendi 233 | 234 | * *[animations](https://www.w3schools.com/css/css3_animations.asp)* 235 | * *[-webkit-box-reflect](https://www.w3schools.com/css/css3_animations.asp)* 236 | 237 | ## Desafio dia 14 - Pumpkins (Halloween) 238 | 239 | 240 | [Meu codigo](https://github.com/mattheussAL/30diasCSS/tree/main/Desafios/dia14) 241 | 242 | [Post LinkedIn](https://www.linkedin.com/posts/matheus-alves-dos-santos-b5038a184_javascript-30diascss-web-activity-6728127860969631744-QYe4) 243 | 244 | ##### O que eu aprendi 245 | 246 | * *[transform](https://www.w3schools.com/css/css3_animations.asp)* 247 | * *[perspective](https://www.w3schools.com/css/css3_animations.asp)* 248 | * *[backface-visibility](https://www.w3schools.com/css/css3_animations.asp)* 249 | 250 | ## Desafio dia 15 - Fogos de Artifício 251 | 252 | 253 | [Meu codigo](https://github.com/mattheussAL/30diasCSS/tree/main/Desafios/dia15) 254 | 255 | [Post LinkedIn](https://www.linkedin.com/posts/matheus-alves-dos-santos-b5038a184_30diascss-html-css-activity-6728497015795290112-zsQd) 256 | 257 | ##### O que eu aprendi 258 | 259 | * *[Animation](https://www.w3schools.com/css/css3_animations.asp)* 260 | 261 | ## Desafio dia 16 - Carrousel 3D 262 | 263 | 264 | [Meu codigo](https://github.com/mattheussAL/30diasCSS/tree/main/Desafios/dia16) 265 | 266 | [Post LinkedIn](https://www.linkedin.com/posts/matheus-alves-dos-santos-b5038a184_30diascss-css-html-activity-6728840610993729536-_0jQ) 267 | 268 | ##### O que eu aprendi 269 | 270 | * *[transform](https://www.w3schools.com/css/css3_animations.asp)* 271 | * *[perspective](https://www.w3schools.com/css/css3_animations.asp)* 272 | * *[3d](https://www.w3schools.com/css/css3_animations.asp)* 273 | * *[animated](https://www.w3schools.com/css/css3_animations.asp)* 274 | 275 | 276 | ## Desafio dia 17 - 30 Dias de CSS 277 | 278 | 279 | [Meu codigo](https://github.com/mattheussAL/30diasCSS/tree/main/Desafios/dia17) 280 | 281 | [Post LinkedIn](https://www.linkedin.com/posts/matheus-alves-dos-santos-b5038a184_30diascss-css-html-activity-6729584854339473408-5RdU) 282 | 283 | ##### O que eu aprendi 284 | 285 | * *[animação](https://www.w3schools.com/css/css3_animations.asp)* 286 | * *[nth-child()](https://www.w3schools.com/css/css3_animations.asp)* 287 | 288 | 289 | ## Desafio dia 18 - Loading Animated Light 290 | 291 | 292 | [Meu codigo](https://github.com/mattheussAL/30diasCSS/tree/main/Desafios/dia18) 293 | 294 | [Post LinkedIn](https://www.linkedin.com/posts/matheus-alves-dos-santos-b5038a184_30diascss-web-frontend-activity-6729945202418581504-rLiG) 295 | 296 | ##### O que eu aprendi 297 | 298 | * *[animação](https://www.w3schools.com/css/css3_animations.asp)* 299 | * *[rotate 360](https://www.w3schools.com/css/css3_animations.asp)* 300 | 301 | ## Desafio dia 19 - Background Animado 302 | 303 | 304 | [Meu codigo](https://github.com/mattheussAL/30diasCSS/tree/main/Desafios/dia19) 305 | 306 | [Post LinkedIn](https://www.linkedin.com/posts/matheus-alves-dos-santos-b5038a184_aprender-30diascss-web-activity-6730651645551636480-O4Dz) 307 | 308 | ##### O que eu aprendi 309 | 310 | * *[animação](https://www.w3schools.com/css/css3_animations.asp)* 311 | * *[colors](https://www.w3schools.com/css/css3_animations.asp)* 312 | 313 | 314 | ## Desafio dia 20 - Cube 3D 315 | 316 | 317 | [Meu codigo](https://github.com/mattheussAL/30diasCSS/tree/main/Desafios/dia20) 318 | 319 | [Post LinkedIn](https://www.linkedin.com/posts/matheus-alves-dos-santos-b5038a184_30diascss-web-css-activity-6731017467293908992-5kHy) 320 | 321 | ##### O que eu aprendi 322 | 323 | * *[animação](https://www.w3schools.com/css/css3_animations.asp)* 324 | * *[perspective](https://www.w3schools.com/css/css3_animations.asp)* 325 | * *[3D](https://www.w3schools.com/css/css3_animations.asp)* 326 | 327 | ## Desafio dia 21 - Dripping Liquid 328 | 329 | 330 | [Meu codigo](https://github.com/mattheussAL/30diasCSS/tree/main/Desafios/dia21) 331 | 332 | [Post LinkedIn](https://www.linkedin.com/posts/matheus-alves-dos-santos-b5038a184_30diascss-css-web-activity-6731846798299680768-TtKL) 333 | 334 | ##### O que eu aprendi 335 | 336 | * *[transform](https://www.w3schools.com/css/css3_animations.asp)* 337 | * *[svg](https://www.w3schools.com/css/css3_animations.asp)* 338 | * *[backface](https://www.w3schools.com/css/css3_animations.asp)* 339 | 340 | ## Desafio dia 22 - Buttons Neon Shadow 341 | 342 | 343 | [Meu codigo](https://github.com/mattheussAL/30diasCSS/tree/main/Desafios/dia22) 344 | 345 | [Post LinkedIn](https://www.linkedin.com/posts/matheus-alves-dos-santos_30diascss-css-web-activity-6732111756719595520-RUDx) 346 | 347 | ##### O que eu aprendi 348 | 349 | * *[transform](https://www.w3schools.com/css/css3_animations.asp)* 350 | * *[animation](https://www.w3schools.com/css/css3_animations.asp)* 351 | * *[shadow](https://www.w3schools.com/css/css3_animations.asp)* 352 | * *[transition](https://www.w3schools.com/css/css3_animations.asp)* 353 | 354 | ## Desafio dia 23 - Mouse Move 355 | 356 | 357 | [Meu codigo](https://github.com/mattheussAL/30diasCSS/tree/main/Desafios/dia23) 358 | 359 | [Post LinkedIn](https://www.linkedin.com/posts/matheus-alves-dos-santos_30diasdecss-javascript-css-activity-6732835908724264960-CKyi) 360 | 361 | ##### O que eu aprendi 362 | 363 | * *[transform](https://www.w3schools.com/css/css3_animations.asp)* 364 | * *[svg](https://www.w3schools.com/css/css3_animations.asp)* 365 | * *[backface](https://www.w3schools.com/css/css3_animations.asp)* 366 | 367 | ## Desafio dia 24 - Efeito Liquido 368 | 369 | 370 | [Meu codigo](https://github.com/mattheussAL/30diasCSS/tree/main/Desafios/dia24) 371 | 372 | [Post LinkedIn](https://www.linkedin.com/posts/matheus-alves-dos-santos_30diascss-frontend-css-activity-6733204636922073088-t2jv) 373 | 374 | ##### O que eu aprendi 375 | 376 | * *[transform](https://www.w3schools.com/css/css3_animations.asp)* 377 | * *[animation](https://www.w3schools.com/css/css3_animations.asp)* 378 | * *[transition](https://www.w3schools.com/css/css3_animations.asp)* 379 | 380 | 381 | ## Desafio dia 25 - Coração Pulsar 382 | 383 | 384 | [Meu codigo](https://github.com/mattheussAL/30diasCSS/tree/main/Desafios/dia25) 385 | 386 | [Post LinkedIn](https://www.linkedin.com/posts/matheus-alves-dos-santos_30diascss-css-web-activity-6733571137730555904-RXHo) 387 | 388 | ##### O que eu aprendi 389 | 390 | * *[transform](https://www.w3schools.com/css/css3_animations.asp)* 391 | * *[animation](https://www.w3schools.com/css/css3_animations.asp)* 392 | * *[box-shadow](https://www.w3schools.com/css/css3_animations.asp)* 393 | 394 | 395 | ## Desafio dia 26 - Amoung Us 396 | 397 | 398 | [Meu codigo](https://github.com/mattheussAL/30diasCSS/tree/main/Desafios/dia26) 399 | 400 | [Post LinkedIn](https://www.linkedin.com/posts/matheus-alves-dos-santos-b5038a184_30diascss-css-web-activity-6731846798299680768-TtKL) 401 | 402 | ##### O que eu aprendi 403 | 404 | * *[colors](https://www.w3schools.com/css/css3_animations.asp)* 405 | * *[::before](https://www.w3schools.com/css/css3_animations.asp)* 406 | * *[::after](https://www.w3schools.com/css/css3_animations.asp)* 407 | * *[transform](https://www.w3schools.com/css/css3_animations.asp)* 408 | 409 | 410 | ## Desafio dia 27 - Rua Animation 411 | 412 | 413 | [Meu codigo](https://github.com/mattheussAL/30diasCSS/tree/main/Desafios/dia27) 414 | 415 | [Post LinkedIn](https://www.linkedin.com/posts/matheus-alves-dos-santos_30diascss-web-css-activity-6734293086328909824-mnqe) 416 | 417 | ##### O que eu aprendi 418 | 419 | * *[colors](https://www.w3schools.com/css/css3_animations.asp)* 420 | * *[::before](https://www.w3schools.com/css/css3_animations.asp)* 421 | * *[::after](https://www.w3schools.com/css/css3_animations.asp)* 422 | * *[transform](https://www.w3schools.com/css/css3_animations.asp)* 423 | 424 | ## Desafio dia 28 - Máquina de Escrever 425 | 426 | 427 | [Meu codigo](https://github.com/mattheussAL/30diasCSS/tree/main/Desafios/dia28) 428 | 429 | [Post LinkedIn](https://www.linkedin.com/posts/matheus-alves-dos-santos_30diascss-css-web-activity-6734656632023740416-8fXR) 430 | 431 | ##### O que eu aprendi 432 | 433 | * *[colors](https://www.w3schools.com/css/css3_animations.asp)* 434 | * *[::before](https://www.w3schools.com/css/css3_animations.asp)* 435 | * *[::after](https://www.w3schools.com/css/css3_animations.asp)* 436 | * *[transform](https://www.w3schools.com/css/css3_animations.asp)* 437 | 438 | ## Desafio dia 29 - Relógio 439 | 440 | 441 | [Meu codigo](https://github.com/mattheussAL/30diasCSS/tree/main/Desafios/dia30) 442 | 443 | [Post LinkedIn](https://www.linkedin.com/posts/matheus-alves-dos-santos_30diascss-css-web-activity-6735015600063578112-OeoU) 444 | 445 | ##### O que eu aprendi 446 | 447 | * *[colors](https://www.w3schools.com/css/css3_animations.asp)* 448 | * *[::before](https://www.w3schools.com/css/css3_animations.asp)* 449 | * *[::after](https://www.w3schools.com/css/css3_animations.asp)* 450 | * *[transform](https://www.w3schools.com/css/css3_animations.asp)* 451 | 452 | ## Desafio dia 30 - Cards Finais 453 | 454 | 455 | [Meu codigo](https://github.com/mattheussAL/30diasCSS/tree/main/Desafios/dia30) 456 | 457 | [Post LinkedIn](https://www.linkedin.com/posts/matheus-alves-dos-santos_30diascss-fim-css-activity-6735388911490625536-yq8S) 458 | 459 | ##### O que eu aprendi 460 | 461 | * *[colors](https://www.w3schools.com/css/css3_animations.asp)* 462 | * *[::before](https://www.w3schools.com/css/css3_animations.asp)* 463 | * *[::after](https://www.w3schools.com/css/css3_animations.asp)* 464 | * *[transform](https://www.w3schools.com/css/css3_animations.asp)* 465 | --------------------------------------------------------------------------------