all reset
☀ Lights
Netbax Online Editor Try it Yourself
Run
HTML
reset
copy
<link rel="stylesheet" href="https://www.netbax.net/pages/truit/css/animated.css"> <div id="content" class="animated zoomIn"> <h1><underline>Thank you!</underline></h1><br><br> <p>This is Animated Page!</p> <h2> Contrary to popular belief, Lorem. <br><br>Nullam volutpat risus nec leo.<br><br> Sed non consequat odio.<br><br> Suco de cevadiss deixa as pessoas. </h2> </div>
CSS
reset
copy
body, html { background: #0cf; } #content { width: 600px; margin: 0 auto; margin-top: 15%; } h1 { color: #000; text-shadow: -1px -2px 3px rgba(17, 17, 17, 0.3); text-align: center; font-family: "Monsterrat", sans-serif; font-weight: 900; text-transform: uppercase; font-size: 80px; margin-bottom: -5px; } h1 underline { border-top: 5px solid #ff3800; border-bottom: 5px solid #008000; } h2 { width: 570px; margin-left: 16px; font-family: "Lato", sans-serif; font-weight: 600; color: #000; } p{ font-weight: 600; font-family: "Lato", sans-serif; color: #ff3800; font-size:32px; text-align:center;}
Js
JAVASCRIPT
reset
copy
$(document).ready(function () { $("h1").hover(function () { $(this).addClass("animated infinite pulse"); }, function () { $(this).removeClass("animated infinite pulse"); }); });
