Other version Windows 8 Metro UI Like @ashx89 for icon i use FontAwesome, i can't find IE logo and any stuff logo in FontAwesome make bad :p
A Pen by Patrick BIYAGA on CodePen.
Created
August 14, 2019 07:40
-
-
Save patbi/be6883c21158209c2370f48d4e6f783e to your computer and use it in GitHub Desktop.
Windows 8 metro UI
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="container"> | |
| <h1>Start</h1> | |
| <img src="https://graph.facebook.com/freakout.jq/picture?type=small" width="50px" class="prof"/> | |
| <div class="right"> | |
| <h2>Martabak</h2> | |
| <p>Gosong</p> | |
| </div> | |
| <div class='spacer'> | |
| <a href="javascript://" class='wide blue'> | |
| <i class="icon-home"></i> | |
| <h2>Show Desktop</h2> | |
| </a> | |
| <a href="javascript://" class='wide orange'> | |
| <i class="icon-cog"></i> | |
| <h2>Settings</h2> | |
| </a> | |
| <a href="javascript://" class='box redgay'> | |
| <i class="icon-camera"></i> | |
| <h2>Camera</h2> | |
| </a> | |
| <a href="javascript://" class='box lime'> | |
| <i class="icon-heart"></i> | |
| <h2>Favorite</h2> | |
| </a> | |
| <a href="javascript://" class='box bluefish'> | |
| <i class="icon-twitter"></i> | |
| <h2>Twitter</h2> | |
| </a> | |
| <a href="javascript://" class='box yellow'> | |
| <i class="icon-map-marker"></i> | |
| <h2>Places</h2> | |
| </a> | |
| <a href="javascript://" class='wide magenta gallery'> | |
| <h2>Gallery</h2> | |
| </a> | |
| <a href="javascript://" class='box redgay'> | |
| <i class="icon-globe"></i> | |
| <h2>Browser</h2> | |
| </a> | |
| <a href="javascript://" class='box orange'> | |
| <i class="icon-envelope-alt"></i> | |
| <h2>E-mail</h2> | |
| </a> | |
| <a href="javascript://" class='wide blue cal_e'> | |
| <h1>25</h1><p>Monday</p> | |
| <h2 class="top cal_i">Sena Birthday Party At Jack House on 07:00 PM</h2> | |
| <i class="icon-calendar"></i> | |
| </a> | |
| <a href="javascript://" class='box lime'> | |
| <i class="icon-cloud"></i> | |
| <h2>SkyDrive</h2> | |
| </a> | |
| </div> | |
| <div class='spacer spacer3x'> | |
| <a href="javascript://" class='box blue'> | |
| <i class="icon-facebook"></i> | |
| <h2>Facebook</h2> | |
| </a> | |
| <a href="javascript://" class='box bluefish'> | |
| <i class="icon-facetime-video"></i> | |
| <h2>FaceTime</h2> | |
| </a> | |
| <a href="javascript://" class='box redgay'> | |
| <i class="icon-tasks"></i> | |
| <h2>Task</h2> | |
| </a> | |
| <a href="javascript://" class='box magenta'> | |
| <i class="icon-list-alt"></i> | |
| <h2>Windows Explorer</h2> | |
| </a> | |
| <a href="javascript://" class='wide yellow'> | |
| <i class="icon-play"></i> | |
| <h2>Media</h2> | |
| </a> | |
| </div> | |
| </div> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| //Windows 8 Metro UI By Martabak |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @import url(https://netdna.bootstrapcdn.com/font-awesome/2.0/css/font-awesome.css); | |
| @import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300); | |
| * { -webkit-font-smoothing:antialiased; -moz-font-smoothing:antialiased; -ms-font-smoothing:antialiased; -o-font-smoothing:antialiased; font-smoothing:antialiased; } | |
| body{ | |
| margin:0px; | |
| padding:0px; | |
| font-family: "Open Sans", arial; | |
| background:#0f6d39; | |
| color:#fff; | |
| font-weight:300; | |
| } | |
| h1{ | |
| font-family: "Open Sans", arial; | |
| font-weight:300; | |
| float: left; | |
| width: 55%; | |
| margin-left: 5px; | |
| font-size: 40px; | |
| margin-bottom: 40px; | |
| } | |
| h2{ | |
| margin:0px; | |
| font-family: "Open Sans", arial; | |
| font-weight:300; | |
| } | |
| .container{ | |
| margin:50px; | |
| width: 1251px; | |
| margin-top: -30px; | |
| margin-left:10px; | |
| -webkit-transform:scale(0.9); | |
| } | |
| a.wide, a.box{ | |
| text-decoration:none; | |
| color:#fff; | |
| -webkit-transition: -webkit-transform 0.1s; | |
| position:relative; | |
| overflow:hidden; | |
| } | |
| a.wide h2, a.box h2{ | |
| position:absolute; | |
| bottom:5px; | |
| font-size:14px; | |
| } | |
| a.wide h2.top, a.box h2.top{ | |
| position:static; | |
| font-size:14px; | |
| } | |
| a.wide i, a.box i{ | |
| font-size: 60px; | |
| text-align: center; | |
| display: block; | |
| margin-top: 10px; /* outside Codepen is actually 30px */ | |
| } | |
| a.wide:hover, a.box:hover{ | |
| -webkit-transform: scale(1.05); | |
| } | |
| a.wide:active, a.box:active{ | |
| -webkit-transform: scale(1); | |
| } | |
| .wide{ | |
| width:270px; | |
| height:120px; | |
| overflow:hidden; | |
| font-size:13px; | |
| padding:10px; | |
| display:block; | |
| float:left; | |
| margin:5px; | |
| } | |
| .box{ | |
| width:120px; | |
| height:120px; | |
| overflow:hidden; | |
| font-size:13px; | |
| padding:10px; | |
| display:block; | |
| float:left; | |
| margin:5px; | |
| } | |
| .lime{background:#61b812;} | |
| .orange{background:#e76022;} | |
| .blue{background:#1E90FF;} | |
| .redgay{background:#DA312E;} | |
| .yellow{background:#dbb701;} | |
| .bluefish{background:#02b9e3;} | |
| .magenta{background:#d22a4e;} | |
| .spacer{ | |
| width:770px; | |
| margin-right: 50px; | |
| float:left; | |
| } | |
| .spacer3x{ | |
| width:300px; | |
| } | |
| @-webkit-keyframes galeri | |
| { | |
| 1% {background-position: 0px 0px;} | |
| 10%{background-position: 0px 140px;} | |
| 20%{background-position: 0px 140px;} | |
| 30%{background-position: 0px 280px;} | |
| 40%{background-position: 0px 280px;} | |
| 50%{background-position: 0px 420px;} | |
| 60%{background-position: 0px 420px;} | |
| 70%{background-position: 0px 560px;} | |
| 80%{background-position: 0px 560px;} | |
| 100% {background-position: 0px 560px;} | |
| } | |
| .gallery{ | |
| background: url(https://dl.dropbox.com/u/39272011/image_metro.png); | |
| -webkit-animation: galeri 15s infinite; | |
| } | |
| .right{ | |
| float:right; | |
| text-align:right; | |
| margin-top: 30px; | |
| } | |
| .right p{ | |
| margin: 5px 0px; | |
| } | |
| img.prof{ | |
| float: right; | |
| margin: 10px; | |
| margin-top: 40px; | |
| } | |
| .i_bot{ | |
| font-size: 30px; | |
| text-align: left; | |
| position: absolute; | |
| bottom: 0px; | |
| } | |
| .cal_i{ | |
| margin-top: 20px; | |
| margin-left: 15px; | |
| width: 155px; | |
| } | |
| .cal_e h1{ | |
| position: absolute; | |
| right: 0px; | |
| width: 115px; | |
| text-align: center; | |
| margin: 0px; | |
| font-size: 60px; | |
| } | |
| .cal_e p{ | |
| position: absolute; | |
| right: 0px; | |
| width: 115px; | |
| text-align: center; | |
| margin-top: 75px; | |
| text-transform: uppercase; | |
| } | |
| .cal_e i{ | |
| text-align: left; | |
| font-size: 25px !important; | |
| position: absolute; | |
| bottom: 0px; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment