¡Feliz año nuevo 2019!
Hola Comunidad!,
Quiero compartir este codigo festivo de Año Nuevo y desearles lo mejor.
¡Feliz año nuevo 2019!
Ejecutar Codigo
html
<!DOCTYPE html>
<html>
<head>
<title>Feliz Año Nuevo</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href="https://fonts.googleapis.com/css?family=Montserrat:900|Raleway:600,0" rel="stylesheet">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div class="backg">
<div class="text1">feliz</div><br>
<div class="text2">Año</div><br>
<div class="text3">Nuevo</div>
<div class="contentglass">
<div class="glass1">
<div class="b1"></div>
<div class="b2"></div>
<div class="champagne"></div>
</div>
<div class="glass2">
<div class="b1"></div>
<div class="b2"></div>
<div class="champagne"></div>
</div>
</div>
<div class="text4">2019</div>
</div>
</body>
</html>
css
body{
background-color: <a href="/comunidad/publicaciones?q=%235fc8c9" data-community-hashtag="true">#5fc8c9</a>;
padding:0;
margin:0;
display: flex;
justify-content:center;
align-items:center;
width: 100%;
}
.backg{
height: 500px;
width: 350px;
display: flex;
flex-direction: column;
align-items: center;
}
.text1,.text2,.text3{
color:#e6043c;
font-size:60px;
text-transform: uppercase;
font-family: 'Raleway', sans-serif;
background-color: white;
padding-right: 20px;
padding-left: 20px;
margin-top:5px;
text-align: center;
display: inline-block;
position: relative;
font-weight: 600;
}
.contentglass{
display: flex;
flex-direction:row;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
}
.glass1,.glass2{
bottom: 28px;
background-color:rgba(255,255,255,0.5);
height: 70px;
width: 30px;
border-radius: 0 0 9px 9px;
position: relative;
}
.glass1{
left:-40px;
animation:cheers 2s infinite;
-webkit-animation:cheers 2s infinite;
}
<a href="/u/keyframescheers" data-community-mention="USER" data-community-mention-slug="keyframescheers">@keyframescheers</a>{
50%{
transform:rotate(20deg) translate(30px);
}
}
<a href="/u/-webkit-keyframescheers" data-community-mention="USER" data-community-mention-slug="-webkit-keyframescheers">@-webkit-keyframescheers</a>{
50%{
-webkit-transform:rotate(20deg) translate(30px);
}
}
.glass2{
left: 40px;
animation:cheers1 2s infinite;
-webkit-animation:cheers1 2s infinite;
}
<a href="/u/keyframescheers1" data-community-mention="USER" data-community-mention-slug="keyframescheers1">@keyframescheers1</a>{
50%{
transform:rotate(-20deg) translate(-30px);
}
}
<a href="/u/-webkit-keyframescheers1" data-community-mention="USER" data-community-mention-slug="-webkit-keyframescheers1">@-webkit-keyframescheers1</a>{
50%{
-webkit-transform:rotate(-20deg) translate(-30px);
}
}
.b1{
background-color:rgba(255,255,255,0.5);
height: 40px;
width: 7px;
position: relative;
top:69px;
left:12px;
}
.b2{
height: 6px;
width: 30px;
background-color:rgba(255,255,255,0.5);
position: relative;
top:69px;
border-radius: 10px 10px 0 0;
}
.champagne{
background-color: <a href="/comunidad/publicaciones?q=%23f0ff00" data-community-hashtag="true">#f0ff00</a>;
height: 45px;
width: 22px;
position: relative;
bottom:25px;
left:4.1px;
border-radius:0 0 6px 6px;
z-index: -1;
}
.text4{
color: <a href="/comunidad/publicaciones?q=%23ffffff" data-community-hashtag="true">#ffffff</a>;
font-size: 60px;
font-family: 'Montserrat', sans-serif;
position: relative;
text-align: center;
display: inline-block;
}
a{
position: relative;
top:15px;
left:32px;
font-size: 30px;
font-family: 'Raleway', sans-serif;
color: <a href="/comunidad/publicaciones?q=%23262626" data-community-hashtag="true">#262626</a>;
}
PSDT: Ya pase a ver el tutorial de markdown (Borren mi primer post , Im Sorry )
