JSFiddle - React, Tailwind, and code Playground
by Miklos Nagy
HTML
<!DOCTYPE html>
<html lang="hu">
<head>
<title>Intelligensweboldal.hu - a keresőt uraljuk. </title>
<meta property="og:title" content="Weboldal készítés" />
<script class="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script class="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/jquery-ui.js"></script>
<script class="text/javascript" src="script.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="interface">
<div class="card">
<span class="logo fa-stack fa-4x">
<i class="fa fa-circle fa-stack-2x" style="color: #343434;"></i>
<i class="fa fa-key fa-stack-1x" style="color: #fff;"></i>
</span>
<div class="block">
<span class="email-button fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x" style="color: #FF5569;"></i>
<i class="p-plane fa fa-paper-plane fa-stack-1x" style="color: #fff; font-size: 16px;"></i>
</span>
<svg class="p-plane-smoke none" height="30" width="30">
<path stroke="#fff" fill="none" stroke-width="2px" style="stroke-dasharray:40% 140%; stroke-dashoffset: 220%" d=" M 25 0
L 15 10
Q 11.25 14 7.5 10
5.5 7.5 7.5 5
11 1.5 10 7
M 30 5
L 20 15
Q 15.5 18.75 20 22.5
22.5 24.5 25 22.5
28.5 19 23 20">
</path>
</svg>
<div class="block-content">
<p>Nagy Miklós</p>
<p>Web-designer, UX designer</p>
<ul class="socials">
<li><a href="https://www.facebook.com/intelligensweboldal.hu/"><i class="fa fa-facebook"></i></a> </li>
</ul>
</div>
</div>
</div>
<div class="email none">
<div class="email-outter">
<div class="email-center">
<div class="email-rotate">
<svg height="50px" width="50px" id="email">
<path stroke="#fff" fill="#fff"...CSS
@import url("https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css");
@import url(https://fonts.googleapis.com/css?family=Roboto:300);
body {
background: #EBEBEB;
font-family: Roboto, 'sans-serif';
}
* {
padding: 0;
margin: 0;
}
body,
html {
margin: 0;
}
.interface {
height: 370px;
width: 270px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 5px;
overflow: hidden;
-webkit-box-shadow: 1px 1px 5px -1px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 1px 1px 5px -1px rgba(0, 0, 0, 0.75);
box-shadow: 1px 1px 5px -1px rgba(0, 0, 0, 0.75);
}
@media only screen and (max-width:667px){
.interface{
transform: translate(-50%, -50%) scale(3.5);
}
}
.card,
.email,
.send {
height: 100%;
width: 100%;
position: absolute;
}
/**********************/
.card {
background: #F7F7F7;
}
.logo {
position: absolute;
left: 50%;
top: 125px;
transform: translate(-50%, -50%);
}
.block {
height: 120px;
width: 270px;
background: #fff;
position: absolute;
bottom: 0px;
}
.block-content {
width: 270px;
text-align: center;
margin-top: 25px;
}
.block-content p:nth-child(1) {
font-weight: bold;
font-size: 1em;
padding: 3px;
}
.block-content p:nth-child(2) {
font-size: 0.8em;
padding: 3px;
}
.socials {
display: block;
max-width: 36px;
margin: 0 auto;
}
.socials li {
display: block;
width: 10px;
text-align: center;
float: left;
padding: 8px 4px 0px 4px;
cursor: pointer;
}
.email-button {
position: absolute;
right: 21px;
top: -21px;
cursor: pointer;
}
.p-plane {
position: relative;
z-index: 101;
}
.p-plane-smoke {
position: absolute;
right: 40px;
top: 5px;
z-index: 105;
}
.p-plane-smoke path.hover {
animation: smoke 1s;
}
@keyframes smoke {
to {
stroke-dashoffset: 40%;
}
}
/**********************/
.email {
background: #FF5569;
width: 25px;
height: 25px;
position: absolute;
right: 30px;
...JavaScript
$(document).ready(function() {
var $email = $('.email-button'),
$send = $('.send-button');
$email.click(function() {
$('.p-plane-smoke').attr("class", "p-plane-smoke");
$('.p-plane-smoke path').attr("class", "hover");
$('.email').removeClass('none');
$('.email').animate({
bottom: "0px",
right: "0px",
height: "100%",
width: "100%"
});
setTimeout(function() {
$('.p-plane').animate({
left: "50px",
bottom: "50px"
});
}, 300);
setTimeout(function() {
$('.p-plane-smoke').hide();
}, 1100);
setTimeout(function() {
var svg = $('#email'),
path = $('#email path'),
animation = document.createElementNS('http://www.w3.org/2000/svg', 'animate');
animation.setAttributeNS(null, 'id', 'a_email');
animation.setAttributeNS(null, 'attributeName', 'd');
animation.setAttributeNS(null, 'begin', 'indefinite');
animation.setAttributeNS(null, 'dur', '600ms');
animation.setAttributeNS(null, 'fill', 'freeze');
animation.setAttributeNS(null, 'from', 'M 7.5 25 Q 45 7.5 45 7.5 42.5 22.5 42.5 22.5 7.75 25 7.75 25 45 27.5 45 7.5 42.5 29 42.5 29 45 42.5 45 42.5 7.5 25 7.5 25z');
animation.setAttributeNS(null, 'to', 'M 7.5 25 Q 17.5 5 17.5 5 17.5 7.75 17.5 7.75 27.5 25 27.5 25 27.5 25 27.5 25 17.5 42.5 17.5 42.5 17.5 45 17.5 45 7.5 25 7.5 25z');
animation.setAttributeNS(null, 'values', 'M 7.5 25 Q 45 7.5 45 7.5 42.5 22.5 42.5 22.5 7.75 25 7.75 25 45 27.5 5 27.5 42.5 29 42.5 29 45 42.5 45 42.5 7.5 25 7.5 25z;M 7.5 30 Q 15 -10 45 7.5 37.5 15 37.5 15 37.5 15 37.5 15 37.5 15 37.5 15 37.5 15 37.5 15 37.5 22.5 37.5 22.5 20 2.5 7.5 30z;M 7.5 25 Q 45 7.5 45 7.5 42.5 22.5 42.5 22.5 45 27.5 45 27.5 45 27.5 45 27.5 42.5 29 42.5 29 45 42.5 45 42.5 7.5 25 7.5 25z; M 7.5 25 Q 17.5 5 17.5 5 17.5 7.75 17.5 7.75 27.5 25 27.5 25 27.5 25 27.5 25 17.5 42.5 17.5 42.5 17.5 45 17.5 45 7.5 25 7.5 25z');
path.append(animation);
...