Luis Garcia C.@luisgarciac
Hola Comunidad!,
Quiero compartir este codigo festivo de Año Nuevo y desearles lo mejor.
¡Feliz año nuevo 2019!
Ejecutar Codigo
html
1<!DOCTYPE html> 2<html> 3<head> 4 <title>Feliz Año Nuevo</title> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <link href="https://fonts.googleapis.com/css?family=Montserrat:900|Raleway:600,0" rel="stylesheet"> 8<link rel="stylesheet" href="css/main.css"> 9</head> 10<body> 11 <div class="backg"> 12 <div class="text1">feliz</div><br> 13 <div class="text2">Año</div><br> 14 <div class="text3">Nuevo</div> 15 <div class="contentglass"> 16 <div class="glass1"> 17 <div class="b1"></div> 18 <div class="b2"></div> 19 <div class="champagne"></div> 20 </div> 21 <div class="glass2"> 22 <div class="b1"></div> 23 <div class="b2"></div> 24 <div class="champagne"></div> 25 </div> 26 </div> 27 <div class="text4">2019</div> 28 </div> 29</body> 30</html>
css
1body{ 2 background-color: #5fc8c9; 3 padding:0; 4 margin:0; 5 display: flex; 6 justify-content:center; 7 align-items:center; 8 width: 100%; 9} 10.backg{ 11 12 height: 500px; 13 width: 350px; 14 display: flex; 15 flex-direction: column; 16 align-items: center; 17 18} 19.text1,.text2,.text3{ 20 color:#e6043c; 21 font-size:60px; 22 text-transform: uppercase; 23 font-family: 'Raleway', sans-serif; 24 background-color: white; 25 padding-right: 20px; 26 padding-left: 20px; 27 margin-top:5px; 28 text-align: center; 29 display: inline-block; 30 position: relative; 31 font-weight: 600; 32} 33.contentglass{ 34 display: flex; 35 flex-direction:row; 36 justify-content: center; 37 align-items: center; 38 width: 100%; 39 height: 100%; 40} 41 42.glass1,.glass2{ 43 bottom: 28px; 44 background-color:rgba(255,255,255,0.5); 45 height: 70px; 46 width: 30px; 47 border-radius: 0 0 9px 9px; 48 position: relative; 49 50} 51.glass1{ 52 left:-40px; 53 animation:cheers 2s infinite; 54 -webkit-animation:cheers 2s infinite; 55} 56@keyframes cheers{ 57 50%{ 58 transform:rotate(20deg) translate(30px); 59 60 } 61} 62@-webkit-keyframes cheers{ 63 50%{ 64 -webkit-transform:rotate(20deg) translate(30px); 65 66 } 67} 68.glass2{ 69 left: 40px; 70 animation:cheers1 2s infinite; 71 -webkit-animation:cheers1 2s infinite; 72} 73@keyframes cheers1{ 74 50%{ 75 transform:rotate(-20deg) translate(-30px); 76 77 } 78} 79@-webkit-keyframes cheers1{ 80 50%{ 81 -webkit-transform:rotate(-20deg) translate(-30px); 82 83 } 84} 85.b1{ 86 background-color:rgba(255,255,255,0.5); 87 height: 40px; 88 width: 7px; 89 position: relative; 90 top:69px; 91 left:12px; 92} 93.b2{ 94 height: 6px; 95 width: 30px; 96 background-color:rgba(255,255,255,0.5); 97 position: relative; 98 top:69px; 99 border-radius: 10px 10px 0 0; 100} 101.champagne{ 102 background-color: #f0ff00; 103 height: 45px; 104 width: 22px; 105 position: relative; 106 bottom:25px; 107 left:4.1px; 108 border-radius:0 0 6px 6px; 109 z-index: -1; 110} 111.text4{ 112 color: #ffffff; 113 font-size: 60px; 114 font-family: 'Montserrat', sans-serif; 115 position: relative; 116 text-align: center; 117 display: inline-block; 118} 119a{ 120 position: relative; 121 top:15px; 122 left:32px; 123 font-size: 30px; 124 font-family: 'Raleway', sans-serif; 125 color: #262626; 126}
PSDT: Ya pase a ver el tutorial de markdown (Borren mi primer post , Im Sorry )
Escribe una respuesta