Project MMetro beta

Developer
Size
5,157 Kb
Views
12,144

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 Previews

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="&#xe00c;" 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="&#xe00d;"></span> </div> <div class="small last cpanel-thumb" data-page="random-page"> <span class="icon-font" aria-hidden="true" data-icon="&#xe016;"></span> </div> <div class="big notes-thumb" data-page="random-page"> <span class="icon-font" aria-hidden="true" data-icon="&#xe000;"></span> <p> Notes</p> </div> <div class="big calculator-thumb" data-page="random-page"><span class="icon-font" aria-hidden="true" data-icon="&#xe017;"></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="&#xe015;"></span><p>Contacts</p></div> <div class="big news-thumb" data-page="random-page"><span class="icon-font" aria-hidden="true" data-icon="&#xe00f;"></span><p>News</p></div> <div class="small calendar-thumb" data-page="random-page"><span class="icon-font" aria-hidden="true" data-icon="&#xe00a;"></span><p>Calender</p></div> <div class="small last paint-thumb" data-page="paint-page"><span class="icon-font" aria-hidden="true" data-icon="&#xe014;"></span><p> Paint</p></div> <div class="big weather-thumb" data-page="random-page"><span class="icon-font" aria-hidden="true" data-icon="&#xe012;"></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="&#xe001;"></span><p> Photos</p></div> <div class="small alarm-thumb" data-page="random-page"><span class="icon-font" aria-hidden="true" data-icon="&#xe009;"></span></div> <div class="small last favorites-thumb" data-page="random-page"><span class="icon-font" aria-hidden="true" data-icon="&#xe018;"></span></div> <div class="big games-thumb" data-page="random-page"><span class="icon-font" aria-hidden="true" data-icon="&#xe002;"></span><p>Games</p></div> <div class="small git-thumb" data-page="random-page"><span class="icon-font" aria-hidden="true" data-icon="&#xe010;"></span></div> <div class="small last code-thumb" data-page="random-page"><span class="icon-font" aria-hidden="true" data-icon="&#xe011;"></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% }
}
Project MMetro beta - Script Codes
Project MMetro beta - Script Codes
Home Page Home
Developer Freddie Gray
Username atomicsong
Uploaded November 22, 2022
Rating 3.5
Size 5,157 Kb
Views 12,144
Do you need developer help for Project MMetro beta?

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!

Freddie Gray (atomicsong) Script Codes
Create amazing marketing copy 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!