¡Feliz año nuevo 2019!

hace 7 años

Hola Comunidad!,

Quiero compartir este codigo festivo de Año Nuevo y desearles lo mejor. ¡Feliz año nuevo 2019! Ejecutar Codigo result html

1<!DOCTYPE html>
2<html>
3<head>
4    <title>Feliz A&ntilde;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&ntilde;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 ) cry

Escribe una respuesta