Mail Element Concept

Developer
Andreas Neeven
Size
3,609 Kb
Views
24,288
  1. Mail Element Concept Previews
  2. Mail Element Concept HTML Codes
  3. Mail Element Concept CSS Codes
  4. Mail Element Concept JS Codes

How do I make an mail element concept?

A quick concept for a mail element ui.. What is a mail element concept? How do you make a mail element concept? This script and codes were developed by Andreas Neeven on 18 September 2022, Sunday.

Mail Element Concept Previews
IQ Test

Mail Element Concept - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Mail Element Concept</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="mail"> <h1>Shoot me an e-mail!</h1> <div class="trigger"> <textarea name="name" rows="4" cols="40"></textarea> <button type="button" name="button">send</button> </div> <svg id="check" height="30px" version="1.1" viewBox="0 0 18 15" width="18px" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <g fill="none" fill-rule="evenodd" id="Page-1" stroke="none" stroke-width="1"> <g fill="#000000" id="Core" transform="translate(-423.000000, -47.000000)"> <g transform="translate(423.000000, 47.500000)"> <path id="path" d="M6,10.2 L1.8,6 L0.4,7.4 L6,13 L18,1 L16.6,-0.4 L6,10.2 Z" id="Shape"/> </g> </g> </g> </svg> </div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.3.0/snap.svg-min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Mail Element Concept - Script Codes CSS Codes

* { padding: 0; margin: 0; box-sizing: border-box;
}
html { width: 100%; height: 100%;
}
body { width: 100%; height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; background: #F3F3F3;
}
.mail { display: -webkit-box; display: -ms-flexbox; display: flex; width: 450px; height: 300px; background-color: #292B33; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; cursor: pointer;
}
h1 { display: -webkit-box; display: -ms-flexbox; display: flex; font-family: Arial; font-size: 28px; font-weight: 300; color: white; -ms-flex-item-align: center; align-self: center;
}
.trigger { position: relative; width: 100px; height: 100px; background-color: #F2674A; border-radius: 50%; margin-left: 25px; -webkit-transition: height .3s ease; transition: height .3s ease; cursor: pointer;
}
.trigger:after { position: absolute; content: ''; top: 38px; left: 32px; width: 50px; height: 50px; background: url("http://i58.tinypic.com/ngdksw.png") no-repeat; display: inline;
}
.trigger button { opacity: 0;
}
.trigger textarea { display: none;
}
.open { width: 450px; height: 300px; border-radius: 0; margin-left: 0; cursor: auto;
}
.open:after { top: 25px; left: 25px;
}
.open button { position: absolute; opacity: 1; bottom: 25px; right: 25px; outline: none;
}
.open textarea { position: relative; width: 400px; height: 175px; display: block; background: transparent; border: none; resize: none; top: 75px; left: 25px; font-size: 24px;
}
.open textarea:focus { outline: 0;
}
.close { width: 450px; height: 0px; -webkit-transition: height .3s ease; transition: height .3s ease;
}
.close:after,
.close button,
.close textarea { display: none;
}
button { width: 75px; height: 25px; background-color: transparent; cursor: pointer; border: none; color: white; font-size: 20px; -webkit-transition: color .2s ease; transition: color .2s ease;
}
button:hover { color: #292B33;
}
svg { display: none;
}
#check { width: 75px;
}

Mail Element Concept - Script Codes JS Codes

$('.mail').on('click', function() { $('h1').css('display', 'none'); $('.trigger').addClass('open'); $('.mail').addClass('active'); $('textarea').focus();
});
$('button').on('click', function() { $('.trigger').addClass('close'); $('.close').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(e) { $(this).css('display', 'none'); $('svg').css('display', 'block'); $('#line').css('display', 'block'); var check = Snap.select('#path'); check.animate({ 'fill': '#F2674A' }, 1000, mina.easeinout); });
});
Mail Element Concept - Script Codes
Mail Element Concept - Script Codes
Home Page Home
Developer Andreas Neeven
Username aneeven
Uploaded September 18, 2022
Rating 4.5
Size 3,609 Kb
Views 24,288
Do you need developer help for Mail Element Concept?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Andreas Neeven (aneeven) Script Codes
Name
Yet another card...
Spinning Loader
Flexbox Demo
Custom Profile
Sass loop
Neon Hexagons SVG Image-Fill
Flexbox Order
Fun stuff with transforms, transitions and border radius
Digital Sucks
Yay for blend-modes
Create amazing Facebook ads with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!