1.1K views
CSSAdd prefixes
1form { 2 background-color: #fcd0a1; 3 border-radius: 10px; 4 padding: 20px; 5 width: 300px; 6 margin: 50px auto; 7} 8 9label { 10 display: block; 11 margin-bottom: 10px; 12 font-size: 18px; 13 font-weight: bold; 14 color: #de5959; 15} 16 17.infos[type="text"], input[type="email"] { 18 width: 100%; 19 padding: 10px; 20 font-size: 16px; 21 border-radius: 5px; 22 border: none; 23 margin-bottom: 20px; 24} 25 26button { 27 background-color: #de5959; 28 color: white; 29 font-size: 18px; 30 padding: 10px 20px; 31 border: none; 32 border-radius: 5px; 33 cursor: pointer; 34 margin-right: 10px; 35} 36 37button:hover { 38 background-color: #b54141; 39} 40 41#limpar { 42 background-color: #fcb13e; 43 color: white; 44 font-size: 18px; 45 padding: 10px 20px; 46 border: none; 47 border-radius: 5px; 48 cursor: pointer; 49} 50 51#limpar:hover { 52 background-color: #c78d35; 53} 54 55.mario { 56 width: 5px; 57 height: 5px; 58 position: relative; 59 left: 100px; 60 box-shadow: 0px 0px 0px transparent, 130px 5px #ffa500, 135px 5px #ffa500, 61140px 5px #ffa500, 95px 10px #de4513, 100px 10px #de4513, 105px 10px #de4513, 62110px 10px #de4513, 115px 10px #de4513, 130px 10px #ffa500, 63135px 10px #ffa500, 140px 10px #ffa500, 90px 15px #de4513, 95px 15px #de4513, 64100px 15px #de4513, 105px 15px #de4513, 110px 15px #de4513, 65115px 15px #de4513, 120px 15px #de4513, 125px 15px #de4513, 66130px 15px hsl(15, 84%, 47%), 135px 15px #ffa500, 140px 15px #ffa500, 6790px 20px #a52a2a, 95px 20px #a52a2a, 100px 20px #a52a2a, 105px 20px #ffa500, 68110px 20px #ffa500, 115px 20px #000, 120px 20px #ffa500, 130px 20px #4545bb, 69135px 20px #4545bb, 140px 20px #4545bb, 85px 25px #a52a2a, 90px 25px #ffa500, 7095px 25px #a52a2a, 100px 25px #ffa500, 105px 25px #ffa500, 71110px 25px #ffa500, 115px 25px #000, 120px 25px #ffa500, 125px 25px #ffa500, 72130px 25px #4545bb, 135px 25px #4545bb, 140px 25px #4545bb, 7385px 30px #a52a2a, 90px 30px #ffa500, 95px 30px #a52a2a, 100px 30px #a52a2a, 74105px 30px #ffa500, 110px 30px #ffa500, 115px 30px #ffa500, 75120px 30px #a52a2a, 125px 30px #ffa500, 130px 30px #ffa500, 76135px 30px #ffa500, 140px 30px #4545bb, 85px 35px #a52a2a, 90px 35px #a52a2a, 7795px 35px #ffa500, 100px 35px #ffa500, 105px 35px #ffa500, 78110px 35px #ffa500, 115px 35px #a52a2a, 120px 35px #a52a2a, 79125px 35px #a52a2a, 130px 35px #a52a2a, 135px 35px #a52a2a, 8095px 40px #ffa500, 100px 40px #ffa500, 105px 40px #ffa500, 81110px 40px #ffa500, 115px 40px #ffa500, 120px 40px #ffa500, 82125px 40px #ffa500, 130px 40px #4545bb, 75px 45px #4545bb, 80px 45px #4545bb, 8385px 45px #4545bb, 90px 45px #4545bb, 95px 45px #4545bb, 100px 45px #de4513, 84105px 45px #4545bb, 110px 45px #4545bb, 115px 45px #4545bb, 85120px 45px #de4513, 125px 45px #4545bb, 70px 50px #4545bb, 75px 50px #4545bb, 8680px 50px #4545bb, 85px 50px #4545bb, 90px 50px #4545bb, 95px 50px #4545bb, 87100px 50px #4545bb, 105px 50px #de4513, 110px 50px #4545bb, 88115px 50px #4545bb, 120px 50px #4545bb, 125px 50px #de4513, 140px 50px #000, 8965px 55px #ffa500, 70px 55px #ffa500, 75px 55px #4545bb, 80px 55px #4545bb, 9085px 55px #4545bb, 90px 55px #4545bb, 95px 55px #4545bb, 100px 55px #4545bb, 91105px 55px #de4513, 110px 55px #de4513, 115px 55px #de4513, 92120px 55px #de4513, 125px 55px #de4513, 140px 55px #000, 65px 60px #ffa500, 9370px 60px #ffa500, 75px 60px #ffa500, 85px 60px #de4513, 90px 60px #de4513, 9495px 60px #4545bb, 100px 60px #de4513, 105px 60px #de4513, 110px 60px #ff0, 95115px 60px #de4513, 120px 60px #de4513, 125px 60px #ff0, 130px 60px #de4513, 96135px 60px #000, 140px 60px #000, 70px 65px #ffa500, 80px 65px #000, 9785px 65px #de4513, 90px 65px #de4513, 95px 65px #de4513, 100px 65px #de4513, 98105px 65px #de4513, 110px 65px #de4513, 115px 65px #de4513, 99120px 65px #de4513, 125px 65px #de4513, 130px 65px #de4513, 135px 65px #000, 100140px 65px #000, 75px 70px #000, 80px 70px #000, 85px 70px #000, 10190px 70px #de4513, 95px 70px #de4513, 100px 70px #de4513, 105px 70px #de4513, 102110px 70px #de4513, 115px 70px #de4513, 120px 70px #de4513, 103125px 70px #de4513, 130px 70px #de4513, 135px 70px #000, 140px 70px #000, 10470px 75px #000, 75px 75px #000, 80px 75px #000, 85px 75px #de4513, 10590px 75px #de4513, 95px 75px #de4513, 100px 75px #de4513, 105px 75px #de4513, 106110px 75px #de4513, 115px 75px #de4513, 70px 80px #000, 85px 80px #de4513, 10790px 80px #de4513, 95px 80px #de4513; 108}
HTML
1 2<form class="form"> 3 4 <label for="nome">Name:</label> 5 6 <input type="text" class="infos" id="nome" name="nome"> 7 <div class="mario"></div> 8 <label for="email">E-mail:</label> 9 <input type="email" id="email" name="email"> 10 11 <button type="submit">Send</button> 12 <button type="reset" id="limpar">Clear</button> 13 14 15</form>