<!DOCTYPE html>
<html>
<head>
<style>
.flip-box { position: relative;
transform-style: preserve-3d;
perspective: 1000px;
height:200px;
margin:0 80px;
}
.flip-box:hover .front { transform: rotateX(180deg);
}
.flip-box:hover .back { transform: rotateX(360deg);
}
.front, .back { box-sizing: border-box;
width: 100%;
min-height: 100%;
border-radius: 30px;
padding:30px;
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
color:white;
font-family: Arial;
}
.front { z-index: 2;
transition: all 0.3s linear;
background-color: #1abc9c;
}
.back { transition: all 0.3s linear;
transform: rotateX(180deg);
background-color: #4054b2;
}
.center { position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
text-align: center;
width: 100%;
}
a:link, a:visited, a:hover { color:white;
}
.xx-large { font-size:42px;
}
.x-large { font-size:32px;
}
.large { font-size:20px;
}
</style>
</head>
<head>
<body>
<div class="flip-box">
<div class="front">
<div class="center xx-large">Disponemos del mejor equipo...</div>
</div>
<div class="back">
<div class="center">
<p class='x-large'>Puedes contactarnos por:</p>
<p class='large'>
600 00 00 00
<br><a href="mailto:mail@domain.com">mail@domain.com</a>
<br><a href="https://www.lawebdelprogramador.com">https://www.lawebdelprogramador.com</a>
</p>
</div>
</div>
</div>
</body>
</html>
Crear cuenta
Comentarios sobre la versión: 1 (0)
No hay comentarios