Project MMetro beta
How do I make an project mmetro beta?
Hey, this is my new project ive started called 'MMetro' the idea is too create a fully functioning metro ui website with an app store and loads of apps.. What is a project mmetro beta? How do you make a project mmetro beta? This script and codes were developed by Freddie Gray on 22 November 2022, Tuesday.
Project MMetro beta - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Project MMetro beta</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <title>WordDump.net Hub</title>
</head>
<body> <header> <a href="#" class="tutorial-link">Welcome... Please remember this site is in demo. Enjoy :)</a> </header> <!--===============================Start Demo====================================================-->
<div class="demo-wrapper"> <div class="login-screen"> <p>Log In</p> <div class="myform"> <input type="text" placeholder="Password" /> <button data-icon="" id="unlock-button"></button> </div> </div> <div class="page todos"> <h2 class="page-title">My Todos</h2> <ul contenteditable> <li>Welcome</li> <li>To</li> <li>The</li> <li>Great</li> <li>WordDump</li> </ul> <div class="close-button">x</div> </div> <div class="page random-page"> <h2 class="page-title">App in development!</h2> <div class="close-button">x</div> </div> <div class="dashboard clearfix"> <div class="col1 clearfix"> <div class="big todos-thumb" data-page="todos"> <p>My To dos <span class="todos-thumb-span">My things to do...</span> </p> </div> <div class="small lock-thumb"> <span class="icon-font center" aria-hidden="true" data-icon=""></span> </div> <div class="small last cpanel-thumb" data-page="random-page"> <span class="icon-font" aria-hidden="true" data-icon=""></span> </div> <div class="big notes-thumb" data-page="random-page"> <span class="icon-font" aria-hidden="true" data-icon=""></span> <p> Notes</p> </div> <div class="big calculator-thumb" data-page="random-page"><span class="icon-font" aria-hidden="true" data-icon=""></span><p>Calculator</p></div> </div> <div class="col2 clearfix"> <div class="big organizer-thumb" data-page="random-page"><span class="icon-font" aria-hidden="true" data-icon=""></span><p>Contacts</p></div> <div class="big news-thumb" data-page="random-page"><span class="icon-font" aria-hidden="true" data-icon=""></span><p>News</p></div> <div class="small calendar-thumb" data-page="random-page"><span class="icon-font" aria-hidden="true" data-icon=""></span><p>Calender</p></div> <div class="small last paint-thumb" data-page="paint-page"><span class="icon-font" aria-hidden="true" data-icon=""></span><p> Paint</p></div> <div class="big weather-thumb" data-page="random-page"><span class="icon-font" aria-hidden="true" data-icon=""></span><p> Weather</p></div> </div> <div class="col3 clearfix"> <div class="big photos-thumb" data-page="random-page"><span class="icon-font" aria-hidden="true" data-icon=""></span><p> Photos</p></div> <div class="small alarm-thumb" data-page="random-page"><span class="icon-font" aria-hidden="true" data-icon=""></span></div> <div class="small last favorites-thumb" data-page="random-page"><span class="icon-font" aria-hidden="true" data-icon=""></span></div> <div class="big games-thumb" data-page="random-page"><span class="icon-font" aria-hidden="true" data-icon=""></span><p>Games</p></div> <div class="small git-thumb" data-page="random-page"><span class="icon-font" aria-hidden="true" data-icon=""></span></div> <div class="small last code-thumb" data-page="random-page"><span class="icon-font" aria-hidden="true" data-icon=""></span></div> </div> </div>
</div>
<!--====================================end demo wrapper================================================--> <script src="js/jquery-1.8.2.min.js"></script> <script src="js/modernizr-1.5.min.js"></script> <script src="js/scripts.js"></script>
</body>
</body>
</html>
Project MMetro beta - Script Codes CSS Codes
@font-face { font-family: 'Lato'; font-style: normal; font-weight: 100; src: local('Lato Hairline'), local('Lato-Hairline'), url(http://themes.googleusercontent.com/static/fonts/lato/v6/boeCNmOCCh-EWFLSfVffDg.woff) format('woff')
}
@font-face { font-family: 'Lato'; font-style: normal; font-weight: 300; src: local('Lato Light'), local('Lato-Light'), url(http://themes.googleusercontent.com/static/fonts/lato/v6/KT3KS9Aol4WfR6Vas8kNcg.woff) format('woff')
}
@font-face { font-family: 'Lato'; font-style: normal; font-weight: 400; src: local('Lato Regular'), local('Lato-Regular'), url(http://themes.googleusercontent.com/static/fonts/lato/v6/9k-RPmcnxYEPm8CNFsH2gg.woff) format('woff')
}
@font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 400; src: local('Open Sans'), local('OpenSans'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff) format('woff')
}
@font-face { font-family: 'demo-icomoon'; src: url('../fonts/demo-icomoon.eot'); src: url('../fonts/demo-icomoon.eot?#iefix') format('embedded-opentype'), url('../fonts/demo-icomoon.woff') format('woff'), url('../fonts/demo-icomoon.ttf') format('truetype'), url('../fonts/demo-icomoon.svg#demo-icomoon') format('svg'); font-weight: normal; font-style: normal
}
[data-icon]:before { font-family: 'demo-icomoon'; content: attr(data-icon); speak: none; font-weight: normal; line-height: 1; -webkit-font-smoothing: antialiased
}
/*/////////////////////////////////////////////////////////////////////////////////////////////////////////*/
* { -moz-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0
}
.clearfix:before,
.clearfix:after { content: " "; display: table
}
.clearfix:after { clear: both
}
.clearfix { *zoom: 1
}
html { height: 100%; overflow-y: scroll; overflow-x: hidden
}
body { width: 100%; height: 100%; line-height: 1.5; font-family: 'Lato', sans-serif; font-weight: 300; font-size: 16px
}
ul { list-style-type: none
}
header { background-color: white; height: 35px; line-height: 35px; padding: 0 30px
}
header a { text-decoration: none; color: inherit; font-size: 20px
}
.demo-wrapper { background: url("http://www.worddump.net/images/1.png"); background-size: cover; padding: 4em .5em; width: 100%; -webkit-perspective: 3300px; -ms-perspective: 3300px; -o-perspective: 3300px; perspective: 3300px; position: relative; overflow: hidden; border-bottom: 1px solid #eee
}
.dashboard { margin: 0 auto; width: 100%; padding: 1em
}
.col1,
.col2,
.col3 { width: 99%; margin: 1em auto
}
.page { width: 0; width: 100%; height: 100%; color: white; text-align: center; font-size: 3em; font-weight: 300; position: absolute; right: 0; top: 0; opacity: 0; -webkit-transform-origin: 100% 0%; -ms-transform-origin: 100% 0%; -o-transform-origin: 100% 0%; transform-origin: 100% 0%; -webkit-transform: rotateY(-90deg) translateZ(5em); -ms-transform: rotateY(-90deg) translateZ(5em); -o-transform: rotateY(-90deg) translateZ(5em); transform: rotateY(-90deg) translateZ(5em)
}
.page-title { margin-top: 1em; font-weight: 100; font-size: 2.5em
}
.close-button { font-size: 1em; width: 1em; height: 1em; position: absolute; top: 1.25em; right: 1.25em; cursor: pointer; border: 1px solid white; line-height: .8em; text-align: center
}
.big,
.small { float: left; margin: 0 auto 1%; color: white; font-size: 2em; text-align: center; height: 4.5em; font-weight: 300; overflow: hidden; padding: .75em 1em; cursor: pointer; -webkit-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out
}
.big:hover,
.small:hover { background: white
}
.big { width: 100%
}
.small { width: 49%; margin-right: 2%
}
.big p { line-height: 1.5; margin-top: .6em; padding: 0 .3em; -webkit-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out
}
.small.last { margin-right: 0
}
/*icon fonts styles*/
.icon-font { font-size: 2em; line-height: 1.6 !important
}
.big .icon-font { float: left
}
.lock-thumb .icon-font { margin-left: 25%
}
/*styling the boxes/thumbs*/
.weather-thumb { background: #F2854C
}
.weather-thumb:hover { color: #F2854C
}
.paint-thumb { background: #85A9C3
}
.paint-thumb:hover { color: #85A9C3
}
.cpanel-thumb { background: #83A8C3
}
.cpanel-thumb:hover { color: #83A8C3
}
.games-thumb { background: #04ACAD
}
.games-thumb:hover { color: #04ACAD
}
.news-thumb,
.calculator-thumb { background: #EBB741
}
.news-thumb:hover,
.calculator-thumb:hover { color: #EBB741
}
.videos-thumb,
.code-thumb { background: #BEA881
}
.videos-thumb:hover,
.code-thumb:hover { color: #BEA881
}
.lock-thumb,
.alarm-thumb { background: #EF3A5B
}
.lock-thumb:hover,
.alarm-thumb:hover { color: #EF3A5B
}
.git-thumb,
.favorites-thumb,
.notes-thumb { background: #385E82
}
.git-thumb:hover,
.favorites-thumb:hover,
.notes-thumb:hover { color: #385E82
}
.photos-thumb { background: #BEA881
}
.photos-thumb:hover { color: #BEA881
}
.calendar-thumb,
.organizer-thumb { background: #8BBA30
}
.calendar-thumb:hover,
.organizer-thumb:hover { color: #8BBA30
}
.todos-thumb { background: #2FB1BE
}
.todos-thumb:hover { color: #2FB1BE
}
.todos-thumb p { margin-top: .8em
}
.todos-thumb-span { display: block; margin-top: 1.5em
}
.todos-thumb:hover p { margin-top: -2.7em
}
/*styling log in screen*/
.login-screen { background: #EF3A5B; height: 100%; width: 100%; position: absolute; top: 0; left: -150%; color: white; text-align: center; font-weight: 300; z-index: 1
}
.login-screen p { font-size: 6em; margin-top: 2em; font-weight: 100
}
.myform { margin: 2em auto; width: 300px
}
input { display: block; line-height: 40px; padding: 0 10px; width: 260px; height: 40px; float: left
}
#unlock-button { background: black; color: white; font-size: 1em; float: left; border: 0; height: 2.5em; width: 2.5em; padding: .3125em; text-align: center; cursor: pointer; border-radius: 2px
}
/*styling the pages*/
.page.random-page { background: #DFD4C1
}
.page.todos { background: #2FB1BE
}
.todos ul { margin: 50px auto; width: 60%; list-style-type: none
}
.todos li { padding: 5px 10px; text-align: left; background: white; border-left: 5px solid #EF3A5B; color: #444; font-weight: 300; font-size: 0.5em; margin-bottom: 15px
}
.delete-button { font-size: 0.7em; float: right; line-height: 25px
}
/*======================= media queries =======================*/
@media screen and (min-width: 43.75em) { .col1, .col2, .col3 { float: left; margin-right: 1%; width: 49% }
}
@media screen and (min-width: 64em) { .col1, .col2, .col3 { float: left; margin-right: .5%; width: 32% } .col3 { margin-right: 0 } .col1 { margin-left: 2em }
}
/*/////////////////////////////////////// animation classes and keyframes /////////////////////////////////////////*/
.slidePageInFromLeft { -webkit-animation: slidePageInFromLeft .8s cubic-bezier(.01,1,.22,.99) 1 0.25s normal forwards; -o-animation: slidePageInFromLeft .8s cubic-bezier(.01,1,.22,.99) 1 0.25s normal forwards; animation: slidePageInFromLeft .8s cubic-bezier(.01,1,.22,.99) 1 0.25s normal forwards
}
.openpage { -webkit-animation: rotatePageInFromRight 1s cubic-bezier(.66,.04,.36,1.03) 1 normal forwards; -o-animation: rotatePageInFromRight 1s cubic-bezier(.66,.04,.36,1.03) 1 normal forwards; animation: rotatePageInFromRight 1s cubic-bezier(.66,.04,.36,1.03) 1 normal forwards
}
.slidePageBackLeft { opacity: 1; left: 0; -webkit-animation: slidePageBackLeft .8s ease-out 1 normal forwards; -o-animation: slidePageBackLeft .8s ease-out 1 normal forwards; animation: slidePageBackLeft .8s ease-out 1 normal forwards
}
.slidePageLeft { opacity: 1; -webkit-transform: rotateY(0) translateZ(0); -ms-transform: rotateY(0) translateZ(0); -o-transform: rotateY(0) translateZ(0); transform: rotateY(0) translateZ(0); -webkit-animation: slidePageLeft .8s ease-out 1 normal forwards; -o-animation: slidePageLeft .8s ease-out 1 normal forwards; animation: slidePageLeft .8s ease-out 1 normal forwards
}
.fadeOutback { -webkit-animation: fadeOutBack 0.3s ease-out 1 normal forwards; -o-animation: fadeOutBack 0.3s ease-out 1 normal forwards; animation: fadeOutBack 0.3s ease-out 1 normal forwards
}
.fadeInForward-1,
.fadeInForward-2,
.fadeInForward-3 { opacity: 0; -webkit-transform: translateZ(-5em) scale(0.75); -ms-transform: translateZ(-5em) scale(0.75); -o-transform: translateZ(-5em) scale(0.75); transform: translateZ(-5em) scale(0.75); -webkit-animation: fadeInForward .5s cubic-bezier(.03,.93,.43,.77) .4s normal forwards; -o-animation: fadeInForward .5s cubic-bezier(.03,.93,.43,.77) .4s normal forwards; animation: fadeInForward .5s cubic-bezier(.03,.93,.43,.77) .4s normal forwards
}
.fadeInForward-2 { -webkit-animation-delay: .55s; -o-animation-delay: .55s; animation-delay: .55s
}
.fadeInForward-3 { -webkit-animation-delay: .7s; -o-animation-delay: .7s; animation-delay: .7s
}
@keyframes fadeOutBack { 0% { -webkit-transform: translateX(-2em) scale(1); -ms-transform: translateX(-2em) scale(1); -o-transform: translateX(-2em) scale(1); transform: translateX(-2em) scale(1); opacity: 1 } 70% { -webkit-transform: translateZ(-5em) scale(0.6); -ms-transform: translateZ(-5em) scale(0.6); -o-transform: translateZ(-5em) scale(0.6); transform: translateZ(-5em) scale(0.6); opacity: 0.5 } 95% { -webkit-transform: translateZ(-5em) scale(0.6); -ms-transform: translateZ(-5em) scale(0.6); -o-transform: translateZ(-5em) scale(0.6); transform: translateZ(-5em) scale(0.6); opacity: 0.5 } 100% { -webkit-transform: translateZ(-5em) scale(0); -ms-transform: translateZ(-5em) scale(0); -o-transform: translateZ(-5em) scale(0); transform: translateZ(-5em) scale(0); opacity: 0 }
}
@keyframes fadeInForward { 0% { -webkit-transform: translateZ(-5em) scale(0); -ms-transform: translateZ(-5em) scale(0); -o-transform: translateZ(-5em) scale(0); transform: translateZ(-5em) scale(0); opacity: 0 } 100% { -webkit-transform: translateZ(0) scale(1); -ms-transform: translateZ(0) scale(1); -o-transform: translateZ(0) scale(1); transform: translateZ(0) scale(1); opacity: 1 }
}
@keyframes rotatePageInFromRight { 0% { -webkit-transform: rotateY(-90deg) translateZ(5em); -ms-transform: rotateY(-90deg) translateZ(5em); -o-transform: rotateY(-90deg) translateZ(5em); transform: rotateY(-90deg) translateZ(5em); opacity: 0 } 30% { opacity: 1 } 100% { -webkit-transform: rotateY(0deg) translateZ(0); -ms-transform: rotateY(0deg) translateZ(0); -o-transform: rotateY(0deg) translateZ(0); transform: rotateY(0deg) translateZ(0); opacity: 1 }
}
@keyframes slidePageLeft { 0% { left: 0; -webkit-transform: rotateY(0deg) translateZ(0); -ms-transform: rotateY(0deg) translateZ(0); -o-transform: rotateY(0deg) translateZ(0); transform: rotateY(0deg) translateZ(0); opacity: 1 } 70% { opacity: 1 } 100% { opacity: 0; left: -150%; -webkit-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg) }
}
@keyframes slidePageInFromLeft { 0% { opacity: 0 } 30% { opacity: 1 } 100% { opacity: 1; left: 0 }
}
@keyframes slidePageBackLeft { 0% { opacity: 1; left: 0; -webkit-transform: scale(0.95); -ms-transform: scale(0.95); -o-transform: scale(0.95); transform: scale(0.95) } 10% { -webkit-transform: scale(0.9); -ms-transform: scale(0.9); -o-transform: scale(0.9); transform: scale(0.9) } 70% { opacity: 1 } 100% { opacity: 0; left: -150% }
}
@-webkit-keyframes fadeOutBack { 0% { -webkit-transform: translateX(-2em) scale(1); transform: translateX(-2em) scale(1); opacity: 1 } 70% { -webkit-transform: translateZ(-5em) scale(0.6); transform: translateZ(-5em) scale(0.6); opacity: 0.5 } 95% { -webkit-transform: translateZ(-5em) scale(0.6); transform: translateZ(-5em) scale(0.6); opacity: 0.5 } 100% { -webkit-transform: translateZ(-5em) scale(0); transform: translateZ(-5em) scale(0); opacity: 0 }
}
@-webkit-keyframes fadeInForward { 0% { -webkit-transform: translateZ(-5em) scale(0); transform: translateZ(-5em) scale(0); opacity: 0 } 100% { -webkit-transform: translateZ(0) scale(1); transform: translateZ(0) scale(1); opacity: 1 }
}
@-webkit-keyframes rotatePageInFromRight { 0% { -webkit-transform: rotateY(-90deg) translateZ(5em); transform: rotateY(-90deg) translateZ(5em); opacity: 0 } 30% { opacity: 1 } 100% { -webkit-transform: rotateY(0deg) translateZ(0); transform: rotateY(0deg) translateZ(0); opacity: 1 }
}
@-webkit-keyframes slidePageLeft { 0% { left: 0; -webkit-transform: rotateY(0deg) translateZ(0); transform: rotateY(0deg) translateZ(0); opacity: 1 } 70% { opacity: 1 } 100% { opacity: 0; left: -150%; -webkit-transform: rotateY(0deg); transform: rotateY(0deg) }
}
@-webkit-keyframes slidePageInFromLeft { 0% { opacity: 0 } 30% { opacity: 1 } 100% { opacity: 1; left: 0 }
}
@-webkit-keyframes slidePageBackLeft { 0% { opacity: 1; left: 0; -webkit-transform: scale(0.95); transform: scale(0.95) } 10% { -webkit-transform: scale(0.9); transform: scale(0.9) } 70% { opacity: 1 } 100% { opacity: 0; left: -150% }
}
/*======================= media queries for animations=======================*/
@media screen and (min-width: 64em) {
@keyframes fadeInForward { 80% { opacity: 0.9 } 100% { -webkit-transform: translateZ(0) scale(1) translateX(-2em); -ms-transform: translateZ(0) scale(1) translateX(-2em); -o-transform: translateZ(0) scale(1) translateX(-2em); transform: translateZ(0) scale(1) translateX(-2em); opacity: 1 }
}
}
@-o-keyframes fadeOutBack { 0% { -webkit-transform: translateX(-2em) scale(1); -ms-transform: translateX(-2em) scale(1); -o-transform: translateX(-2em) scale(1); transform: translateX(-2em) scale(1); opacity: 1 } 70% { -webkit-transform: translateZ(-5em) scale(0.6); -ms-transform: translateZ(-5em) scale(0.6); -o-transform: translateZ(-5em) scale(0.6); transform: translateZ(-5em) scale(0.6); opacity: 0.5 } 95% { -webkit-transform: translateZ(-5em) scale(0.6); -ms-transform: translateZ(-5em) scale(0.6); -o-transform: translateZ(-5em) scale(0.6); transform: translateZ(-5em) scale(0.6); opacity: 0.5 } 100% { -webkit-transform: translateZ(-5em) scale(0); -ms-transform: translateZ(-5em) scale(0); -o-transform: translateZ(-5em) scale(0); transform: translateZ(-5em) scale(0); opacity: 0 }
}
@-o-keyframes fadeInForward { 0% { -webkit-transform: translateZ(-5em) scale(0); -ms-transform: translateZ(-5em) scale(0); -o-transform: translateZ(-5em) scale(0); transform: translateZ(-5em) scale(0); opacity: 0 } 100% { -webkit-transform: translateZ(0) scale(1); -ms-transform: translateZ(0) scale(1); -o-transform: translateZ(0) scale(1); transform: translateZ(0) scale(1); opacity: 1 }
}
@-o-keyframes rotatePageInFromRight { 0% { -webkit-transform: rotateY(-90deg) translateZ(5em); -ms-transform: rotateY(-90deg) translateZ(5em); -o-transform: rotateY(-90deg) translateZ(5em); transform: rotateY(-90deg) translateZ(5em); opacity: 0 } 30% { opacity: 1 } 100% { -webkit-transform: rotateY(0deg) translateZ(0); -ms-transform: rotateY(0deg) translateZ(0); -o-transform: rotateY(0deg) translateZ(0); transform: rotateY(0deg) translateZ(0); opacity: 1 }
}
@-o-keyframes slidePageLeft { 0% { left: 0; -webkit-transform: rotateY(0deg) translateZ(0); -ms-transform: rotateY(0deg) translateZ(0); -o-transform: rotateY(0deg) translateZ(0); transform: rotateY(0deg) translateZ(0); opacity: 1 } 70% { opacity: 1 } 100% { opacity: 0; left: -150%; -webkit-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg) }
}
@-o-keyframes slidePageInFromLeft { 0% { opacity: 0 } 30% { opacity: 1 } 100% { opacity: 1; left: 0 }
}
@-o-keyframes slidePageBackLeft { 0% { opacity: 1; left: 0; -webkit-transform: scale(0.95); -ms-transform: scale(0.95); -o-transform: scale(0.95); transform: scale(0.95) } 10% { -webkit-transform: scale(0.9); -ms-transform: scale(0.9); -o-transform: scale(0.9); transform: scale(0.9) } 70% { opacity: 1 } 100% { opacity: 0; left: -150% }
}
Developer | Freddie Gray |
Username | atomicsong |
Uploaded | November 22, 2022 |
Rating | 3.5 |
Size | 5,157 Kb |
Views | 12,144 |
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 |
Cityprison Finale Tribute | 16,653 Kb |
My Website | 1,445 Kb |
A Pen by Freddie Gray | 2,828 Kb |
Forms 2 - Fully responsive | 17,796 Kb |
Project MMetro App Store | 1,750 Kb |
V for Vertical | 4,388 Kb |
Coming Soon Page | 3,533 Kb |
Oil Paining | 3,131 Kb |
A Pen by Atomicsong | 1,151 Kb |
Flexbox css-tricks | 1,870 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 |
Click Based Rotation Demo | Zeaklous | 2,086 Kb |
Modular Flip Card | Bbodine1 | 4,009 Kb |
Starfield old school style | Bolloxim | 5,214 Kb |
ECharts Version 3.0 - Bar Marker Chart | WebCodePro | 2,726 Kb |
Wrap_Test | Mscfourn | 7,503 Kb |
A Pen by Brendan Skousen | Bskousen | 2,954 Kb |
Learning canvas drawing | Aurer | 2,204 Kb |
Transition | Shayhowe | 1,632 Kb |
Canvas Fireworks | Jackrugile | 6,200 Kb |
A Pen by Stan Williams | Stanssongs | 6,706 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!