About / Contact Animation
How do I make an about / contact animation?
Created an about and contact section for my portfolio site. Wanted something a little animated to better illustrate my style.. What is a about / contact animation? How do you make a about / contact animation? This script and codes were developed by Mark Thomes on 04 July 2022, Monday.
About / Contact Animation - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>About / Contact Animation</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='css/7534eb3fb62294822de9eace9.css'> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}
body { background: #333; position: relative; font-family: 'Quicksand', sans-serif;
}
.ima { font-family: 'Asap', sans-serif; font-size: 40px; text-transform: uppercase;
}
.body, .arm, .head, .eyes, .mug, .steam, .contactme, .arrow, .thoughts, .bubble, .formtoggle { background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/15979/about-character.png) 0 0 no-repeat;
}
.character, .body, .arm, .head, .eyes, .mug, .steam, .contactme, .arrow, .thoughts, .bubble, .formtoggle { background-size: 1070px; position: absolute; display: block;
}
.contactcharacter { position: relative; display: block; overflow: hidden; background: #efefef;
}
.contactcharacter .contentwrapper { width: 1280px; height: 750px; margin: 10px auto 0; position: relative; transition: height 1s ease-in-out;
}
.contactcharacter .character { width: 100%; height: 750px; margin: 0 auto; bottom: 0px; transition: height 1s ease-in-out;
}
.contactcharacter .body { width: 900px; height: 425px; bottom: -9px; left: 0; background-position: 0px 0px;
}
.contactcharacter .arm { width: 445px; height: 115px; bottom: -50px; left: 25px; background-position: -19px -1094px; transform: rotateZ(-58deg); transform-origin: 2% 50%; transition: all .5s ease-in-out;
}
.contactcharacter .arm.active { transform: rotateZ(0deg);
}
.contactcharacter .head { width: 235px; height: 337px; bottom: 294px; left: 250px; background-position: -506px -1093px; transform: rotateZ(-24deg); transform-origin: 50% 82%; transition: all 0.75s cubic-bezier(0.34, -0.305, 0, 1);
}
.contactcharacter .head.caffeine { animation: twitch 1s ease-in-out infinite;
}
.contactcharacter .head.active { transform: rotateZ(0deg);
}
.contactcharacter .eyes { width: 110px; height: 25px; top: 160px; left: 63px; background-position: -788px -1246px; animation: blink 10s steps(2) infinite;
}
.contactcharacter .caffeine .eyes { animation: blink-fast 1s steps(2) infinite;
}
.contactcharacter .mug { width: 184px; height: 188px; bottom: -3px; right: 180px; background-position: -732px -857px;
}
.contactcharacter .mug .steam { animation: steam 3s ease-in-out infinite alternate; opacity: 0.5;
}
.contactcharacter .mug .steam:nth-child(1) { width: 34px; height: 158px; top: -140px; left: 30px; background-position: -537px -855px; animation-delay: 0s;
}
.contactcharacter .mug .steam:nth-child(2) { width: 37px; height: 194px; top: -187px; left: 80px; background-position: -594px -855px; animation-delay: 2s;
}
.contactcharacter .mug .steam:nth-child(3) { width: 38px; height: 187px; top: -170px; left: 131px; background-position: -658px -855px; animation-delay: 1s;
}
.contactcharacter .thoughts { width: 751px; height: 390px; top: 0px; right: 0px; background-position: -321px -459px; animation: bob 4s ease-in-out infinite alternate; transition: all 1s cubic-bezier(0.76, -0.265, 0.195, 1.26); transition-property: left, right, top, bottom;
}
.contactcharacter .thoughts .abouttype { text-align: center; padding: 90px 80px 60px 100px;
}
.contactcharacter .thoughts .abouttype #ima { font-size: 40px; text-transform: uppercase;
}
.contactcharacter .thoughts .abouttype p { font-size: 24px; line-height: 1.45em;
}
.contactcharacter .thoughts .abouttype p:nth-child(1) { margin-bottom: 0;
}
.contactcharacter .thoughts .abouttype p:nth-child(3) { margin-top: 0;
}
.contactcharacter .thoughts .imawhat { display: none;
}
.contactcharacter .thoughts .bubble { animation: bob 2s ease-in-out infinite alternate;
}
.contactcharacter .thoughts .bubble:nth-child(2) { width: 120px; height: 116px; top: 40px; left: -100px; background-position: -191px -472px; animation-delay: 0s; transition: all 1s cubic-bezier(0.76, -0.265, 0.195, 1.26); transition-property: left, right, top, bottom;
}
.contactcharacter .thoughts .bubble:nth-child(3) { width: 91px; height: 86px; top: 80px; left: -190px; background-position: -86px -472px; animation-delay: 2s; transition: all 1s cubic-bezier(0.76, -0.265, 0.195, 1.26); transition-property: left, right, top, bottom;
}
.contactcharacter .thoughts .bubble:nth-child(4) { width: 67px; height: 65px; top: 120px; left: -260px; background-position: 0px -474px; animation-delay: 1s; transition: all 1s cubic-bezier(0.76, -0.265, 0.195, 1.26); transition-property: left, right, top, bottom;
}
.contactcharacter .contactme { width: 207px; height: 196px; bottom: -3px; right: 309px; background-position: -300px -856px; cursor: pointer;
}
.contactcharacter .contactme .arrow { width: 263px; height: 146px; top: -95px; left: -23px; background-position: -17px -856px; animation: bob 1s ease-in-out infinite alternate; cursor: arrow;
}
.contactcharacter button { position: absolute; bottom: 0; right: 0;
}
.contactcharacter .contact { width: 750px; position: absolute; left: 50%; bottom: -40px; transform: translateY(360px); margin-left: -375px;
}
.contactcharacter .contact.inactive { animation: popout 0.5s forwards linear;
}
.contactcharacter .contact.active { animation: popin 0.35s forwards linear;
}
.contactcharacter .contact.active .closer { background: #333; border: 2px solid white; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5); top: -15px; left: -15px; width: 30px; height: 30px; position: absolute; cursor: pointer; border-radius: 15px;
}
.contactcharacter .contact.active .closer:after, .contactcharacter .contact.active .closer:before { content: " "; position: absolute; top: 11px; left: 4px; width: 18px; height: 4px; background: white;
}
.contactcharacter .contact.active .closer:after { transform: rotate(45deg);
}
.contactcharacter .contact.active .closer:before { transform: rotate(-45deg);
}
@keyframes blink { 0% { background-position: -788px -1246px; } 90% { background-position: -788px -1246px; } 100% { background-position: -788px -1294px; }
}
@keyframes blink-fast { 0% { background-position: -788px -1246px; } 50% { background-position: -788px -1246px; } 100% { background-position: -788px -1294px; }
}
@keyframes blink-fast-small { 0% { background-position: -559px -884px; } 50% { background-position: -559px -884px; } 100% { background-position: -559px -920px; }
}
@keyframes blink-medium { 0% { background-position: -559px -884px; } 90% { background-position: -559px -884px; } 100% { background-position: -559px -920px; }
}
@keyframes twitch { 0% { transform: rotateZ(-24deg); } 25% { transform: rotateZ(-25deg); } 50% { transform: rotateZ(-23deg); } 75% { transform: rotateZ(-25deg); } 100% { transform: rotateZ(-24deg); }
}
@keyframes twitch-medium { 0% { background-position: -578px -1px; } 50% { background-position: -578px -1px; } 100% { background-position: -720px -1px; }
}
@keyframes bob { 0% { transform: translateY(0); } 100% { transform: translateY(20px); }
}
@keyframes steam { 0% { opacity: 0.5; } 100% { opacity: 1; }
}
@keyframes popin { 0% { transform: translateY(350px) rotateZ(2.2deg); } 38% { transform: translateY(100px) rotateZ(7deg); } 52% { transform: translateY(25px) rotateZ(7deg); } 71% { transform: translateY(-70px) rotateZ(-0.8deg); } 86% { transform: translateY(-65px) rotateZ(-4.1deg); } 90% { transform: translateY(-54px) rotateZ(-3.3deg); } 100% { transform: translateY(-40px) rotateZ(0deg); }
}
@keyframes popout { 0% { transform: translateY(-40px) rotateZ(0deg); } 38% { transform: translateY(-54px) rotateZ(-3.3deg); } 52% { transform: translateY(-65px) rotateZ(-4.1deg); } 71% { transform: translateY(-70px) rotateZ(-0.8deg); } 86% { transform: translateY(25px) rotateZ(7deg); } 90% { transform: translateY(100px) rotateZ(7deg); } 100% { transform: translateY(360px) rotateZ(0deg); }
}
@keyframes wiggle { 0% { transform: translateY(-5px) rotateZ(5deg); } 100% { transform: translateY(-5px) rotateZ(-5deg); }
}
@keyframes pulse-hover { 0% { fill-opacity: 0.8; } 100% { fill-opacity: 1; }
}
.contact { width: 600px;
}
form { background: #b3c33a; padding: 20px; transition: all 2s ease;
}
input[type="text"], input[type="email"], textarea { padding: 10px; margin-bottom: 10px; display: block; width: 100%; border: none; background: #8f9c2e; color: #eff3d6; letter-spacing: 1px;
}
input[type="text"]:focus, input[type="email"]:focus, textarea:focus { background: #6b7423; outline: none;
}
input[type="text"], input[type="email"] { width: 100%;
}
.input { width: 100%;
}
textarea { height: 200px; resize: none;
}
.contact .input.error { border-left: 5px solid red; animation: borderColor 0.5s ease-in-out infinite alternate;
}
::-webkit-input-placeholder { color: #b3c33a; text-transform: uppercase; letter-spacing: 2px;
}
input[type="submit"] { background: #8f9c2e; margin-top: 10px; border: none; padding: 6.66667px 20px; text-transform: uppercase; letter-spacing: 2px; color: white; position: relative;
}
input[type="submit"]:hover, input[type="submit"]:focus { outline: none; transform: translateY(-3px); box-shadow: 0 3px 0 #6b7423;
}
input[type="submit"]:active { transform: translateY(0); box-shadow: none; background: #7d8828;
}
@keyframes borderColor { 0% { border-color: red; } 100% { border-color: #990000; }
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <link href='http://fonts.googleapis.com/css?family=Quicksand|Asap:700' rel='stylesheet' type='text/css'>
<section class="contactcharacter" id="about"> <div class="contentwrapper" id="contact"> <div class="character"> <div class="body"></div> <div class="arm"></div> <div class="head"> <div class="eyes"></div> </div> <div class="mug"> <div class="steam"></div> <div class="steam"></div> <div class="steam"></div> </div> <div class="contactme"> <div class="arrow"></div> </div> <div class="thoughts"> <div class="abouttype"> <p>My name is Mark Thomes. I am a...</p> <div class="imacontainer"><span class="ima"></span></div> <p>I live in the Twin Cities metro area. I like to craft solutions.</p> <span class="imawhat">web designer</span> <span class="imawhat">wordpress plugin author</span> <span class="imawhat">web developer</span> <span class="imawhat">animator</span> </div> <div class="bubble"></div> <div class="bubble"></div> <div class="bubble"></div> </div> </div> </div> <div class="contact"> <span class="closer"></span> <form> <input class="input name" name="name" type="text" value="" placeholder="name"> <input class="input email" name="email" type="email" value="" placeholder="email"> <textarea class="input message" name="message" placeholder="my awesome message!"></textarea> <input name="commit" type="submit" value="submit" class="submit"> </form> </div>
</section> <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/15979/footer-inject.js'></script> <script src="js/index.js"></script>
</body>
</html>
About / Contact Animation - Script Codes CSS Codes
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}
body { background: #333; position: relative; font-family: 'Quicksand', sans-serif;
}
.ima { font-family: 'Asap', sans-serif; font-size: 40px; text-transform: uppercase;
}
.body, .arm, .head, .eyes, .mug, .steam, .contactme, .arrow, .thoughts, .bubble, .formtoggle { background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/15979/about-character.png) 0 0 no-repeat;
}
.character, .body, .arm, .head, .eyes, .mug, .steam, .contactme, .arrow, .thoughts, .bubble, .formtoggle { background-size: 1070px; position: absolute; display: block;
}
.contactcharacter { position: relative; display: block; overflow: hidden; background: #efefef;
}
.contactcharacter .contentwrapper { width: 1280px; height: 750px; margin: 10px auto 0; position: relative; transition: height 1s ease-in-out;
}
.contactcharacter .character { width: 100%; height: 750px; margin: 0 auto; bottom: 0px; transition: height 1s ease-in-out;
}
.contactcharacter .body { width: 900px; height: 425px; bottom: -9px; left: 0; background-position: 0px 0px;
}
.contactcharacter .arm { width: 445px; height: 115px; bottom: -50px; left: 25px; background-position: -19px -1094px; transform: rotateZ(-58deg); transform-origin: 2% 50%; transition: all .5s ease-in-out;
}
.contactcharacter .arm.active { transform: rotateZ(0deg);
}
.contactcharacter .head { width: 235px; height: 337px; bottom: 294px; left: 250px; background-position: -506px -1093px; transform: rotateZ(-24deg); transform-origin: 50% 82%; transition: all 0.75s cubic-bezier(0.34, -0.305, 0, 1);
}
.contactcharacter .head.caffeine { animation: twitch 1s ease-in-out infinite;
}
.contactcharacter .head.active { transform: rotateZ(0deg);
}
.contactcharacter .eyes { width: 110px; height: 25px; top: 160px; left: 63px; background-position: -788px -1246px; animation: blink 10s steps(2) infinite;
}
.contactcharacter .caffeine .eyes { animation: blink-fast 1s steps(2) infinite;
}
.contactcharacter .mug { width: 184px; height: 188px; bottom: -3px; right: 180px; background-position: -732px -857px;
}
.contactcharacter .mug .steam { animation: steam 3s ease-in-out infinite alternate; opacity: 0.5;
}
.contactcharacter .mug .steam:nth-child(1) { width: 34px; height: 158px; top: -140px; left: 30px; background-position: -537px -855px; animation-delay: 0s;
}
.contactcharacter .mug .steam:nth-child(2) { width: 37px; height: 194px; top: -187px; left: 80px; background-position: -594px -855px; animation-delay: 2s;
}
.contactcharacter .mug .steam:nth-child(3) { width: 38px; height: 187px; top: -170px; left: 131px; background-position: -658px -855px; animation-delay: 1s;
}
.contactcharacter .thoughts { width: 751px; height: 390px; top: 0px; right: 0px; background-position: -321px -459px; animation: bob 4s ease-in-out infinite alternate; transition: all 1s cubic-bezier(0.76, -0.265, 0.195, 1.26); transition-property: left, right, top, bottom;
}
.contactcharacter .thoughts .abouttype { text-align: center; padding: 90px 80px 60px 100px;
}
.contactcharacter .thoughts .abouttype #ima { font-size: 40px; text-transform: uppercase;
}
.contactcharacter .thoughts .abouttype p { font-size: 24px; line-height: 1.45em;
}
.contactcharacter .thoughts .abouttype p:nth-child(1) { margin-bottom: 0;
}
.contactcharacter .thoughts .abouttype p:nth-child(3) { margin-top: 0;
}
.contactcharacter .thoughts .imawhat { display: none;
}
.contactcharacter .thoughts .bubble { animation: bob 2s ease-in-out infinite alternate;
}
.contactcharacter .thoughts .bubble:nth-child(2) { width: 120px; height: 116px; top: 40px; left: -100px; background-position: -191px -472px; animation-delay: 0s; transition: all 1s cubic-bezier(0.76, -0.265, 0.195, 1.26); transition-property: left, right, top, bottom;
}
.contactcharacter .thoughts .bubble:nth-child(3) { width: 91px; height: 86px; top: 80px; left: -190px; background-position: -86px -472px; animation-delay: 2s; transition: all 1s cubic-bezier(0.76, -0.265, 0.195, 1.26); transition-property: left, right, top, bottom;
}
.contactcharacter .thoughts .bubble:nth-child(4) { width: 67px; height: 65px; top: 120px; left: -260px; background-position: 0px -474px; animation-delay: 1s; transition: all 1s cubic-bezier(0.76, -0.265, 0.195, 1.26); transition-property: left, right, top, bottom;
}
.contactcharacter .contactme { width: 207px; height: 196px; bottom: -3px; right: 309px; background-position: -300px -856px; cursor: pointer;
}
.contactcharacter .contactme .arrow { width: 263px; height: 146px; top: -95px; left: -23px; background-position: -17px -856px; animation: bob 1s ease-in-out infinite alternate; cursor: arrow;
}
.contactcharacter button { position: absolute; bottom: 0; right: 0;
}
.contactcharacter .contact { width: 750px; position: absolute; left: 50%; bottom: -40px; transform: translateY(360px); margin-left: -375px;
}
.contactcharacter .contact.inactive { animation: popout 0.5s forwards linear;
}
.contactcharacter .contact.active { animation: popin 0.35s forwards linear;
}
.contactcharacter .contact.active .closer { background: #333; border: 2px solid white; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5); top: -15px; left: -15px; width: 30px; height: 30px; position: absolute; cursor: pointer; border-radius: 15px;
}
.contactcharacter .contact.active .closer:after, .contactcharacter .contact.active .closer:before { content: " "; position: absolute; top: 11px; left: 4px; width: 18px; height: 4px; background: white;
}
.contactcharacter .contact.active .closer:after { transform: rotate(45deg);
}
.contactcharacter .contact.active .closer:before { transform: rotate(-45deg);
}
@keyframes blink { 0% { background-position: -788px -1246px; } 90% { background-position: -788px -1246px; } 100% { background-position: -788px -1294px; }
}
@keyframes blink-fast { 0% { background-position: -788px -1246px; } 50% { background-position: -788px -1246px; } 100% { background-position: -788px -1294px; }
}
@keyframes blink-fast-small { 0% { background-position: -559px -884px; } 50% { background-position: -559px -884px; } 100% { background-position: -559px -920px; }
}
@keyframes blink-medium { 0% { background-position: -559px -884px; } 90% { background-position: -559px -884px; } 100% { background-position: -559px -920px; }
}
@keyframes twitch { 0% { transform: rotateZ(-24deg); } 25% { transform: rotateZ(-25deg); } 50% { transform: rotateZ(-23deg); } 75% { transform: rotateZ(-25deg); } 100% { transform: rotateZ(-24deg); }
}
@keyframes twitch-medium { 0% { background-position: -578px -1px; } 50% { background-position: -578px -1px; } 100% { background-position: -720px -1px; }
}
@keyframes bob { 0% { transform: translateY(0); } 100% { transform: translateY(20px); }
}
@keyframes steam { 0% { opacity: 0.5; } 100% { opacity: 1; }
}
@keyframes popin { 0% { transform: translateY(350px) rotateZ(2.2deg); } 38% { transform: translateY(100px) rotateZ(7deg); } 52% { transform: translateY(25px) rotateZ(7deg); } 71% { transform: translateY(-70px) rotateZ(-0.8deg); } 86% { transform: translateY(-65px) rotateZ(-4.1deg); } 90% { transform: translateY(-54px) rotateZ(-3.3deg); } 100% { transform: translateY(-40px) rotateZ(0deg); }
}
@keyframes popout { 0% { transform: translateY(-40px) rotateZ(0deg); } 38% { transform: translateY(-54px) rotateZ(-3.3deg); } 52% { transform: translateY(-65px) rotateZ(-4.1deg); } 71% { transform: translateY(-70px) rotateZ(-0.8deg); } 86% { transform: translateY(25px) rotateZ(7deg); } 90% { transform: translateY(100px) rotateZ(7deg); } 100% { transform: translateY(360px) rotateZ(0deg); }
}
@keyframes wiggle { 0% { transform: translateY(-5px) rotateZ(5deg); } 100% { transform: translateY(-5px) rotateZ(-5deg); }
}
@keyframes pulse-hover { 0% { fill-opacity: 0.8; } 100% { fill-opacity: 1; }
}
.contact { width: 600px;
}
form { background: #b3c33a; padding: 20px; transition: all 2s ease;
}
input[type="text"], input[type="email"], textarea { padding: 10px; margin-bottom: 10px; display: block; width: 100%; border: none; background: #8f9c2e; color: #eff3d6; letter-spacing: 1px;
}
input[type="text"]:focus, input[type="email"]:focus, textarea:focus { background: #6b7423; outline: none;
}
input[type="text"], input[type="email"] { width: 100%;
}
.input { width: 100%;
}
textarea { height: 200px; resize: none;
}
.contact .input.error { border-left: 5px solid red; animation: borderColor 0.5s ease-in-out infinite alternate;
}
::-webkit-input-placeholder { color: #b3c33a; text-transform: uppercase; letter-spacing: 2px;
}
input[type="submit"] { background: #8f9c2e; margin-top: 10px; border: none; padding: 6.66667px 20px; text-transform: uppercase; letter-spacing: 2px; color: white; position: relative;
}
input[type="submit"]:hover, input[type="submit"]:focus { outline: none; transform: translateY(-3px); box-shadow: 0 3px 0 #6b7423;
}
input[type="submit"]:active { transform: translateY(0); box-shadow: none; background: #7d8828;
}
@keyframes borderColor { 0% { border-color: red; } 100% { border-color: #990000; }
}
About / Contact Animation - Script Codes JS Codes
var cnt=0, texts=[];
var $fclick = false;
$(".imawhat").each(function() { texts[cnt++]=$(this).text();
});
function fadeText() { if (cnt>=texts.length) { cnt=0; } $('.ima').html(texts[cnt++]); $('.ima') .fadeIn('fast').animate({opacity: 1.0}, 5000).fadeOut('fast', function() { return fadeText(); } );
}
function toggleForm() { if ($fclick === true) { $(".contact, .head, .arm").toggleClass("active inactive"); } else { $(".contact, .head, .arm").addClass("active"); $fclick = true; }
}
$(".contactme, .arrow, .closer, .submit").on("click", toggleForm);
fadeText();
Developer | Mark Thomes |
Username | WithAnEs |
Uploaded | July 04, 2022 |
Rating | 4 |
Size | 13,077 Kb |
Views | 46,552 |
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!
Name | Size |
SVG Stroke Pie Chart | 10,209 Kb |
404 Animated Character | 8,559 Kb |
CSS3 Gradient Stripes | 6,259 Kb |
Twitter Feed Loading Animation | 6,763 Kb |
CSS Colorado Flag | 6,649 Kb |
Pharmacy Loader | 3,425 Kb |
SVG Search... | 7,601 Kb |
CSS Birthday Cake | 8,353 Kb |
Aperture | 4,706 Kb |
Running Character | 6,843 Kb |
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!
Name | Username | Size |
Content Changer | Cliffpyles | 4,538 Kb |
Minimal Material Design Form Input | Koenigsegg1 | 3,076 Kb |
Z-index demo | Kblh | 1,534 Kb |
RRC wrapSwitch | Pshrmn | 2,922 Kb |
Donut Chart example - MorrisJS | Capelo | 2,385 Kb |
A Pen by Manoz | Manoz | 2,424 Kb |
Client-side Email Validation | Collizo4sky | 1,538 Kb |
Canvas stripes | Adrianparr | 1,948 Kb |
CSS3 Snow Animation | NickyCDK | 1,695 Kb |
Word Wrap Algorithm for Multiline Canvas Text | Peterhry | 2,349 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!