metro4
Version:
The front-end framework for Build responsive, mobile-first projects on the web with the first front-end component library in Metro Style
175 lines (160 loc) • 9.43 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="twitter:site" content="@metroui">
<meta name="twitter:creator" content="@pimenov_sergey">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="Metro 4 Components Library">
<meta name="twitter:description" content="Metro 4 is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery.">
<meta name="twitter:image" content="https://metroui.org.ua/images/m4-logo-social.png">
<meta property="og:url" content="https://metroui.org.ua/v4/index.html">
<meta property="og:title" content="Metro 4 Components Library">
<meta property="og:description" content="Metro 4 is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery.">
<meta property="og:type" content="website">
<meta property="og:image" content="https://metroui.org.ua/images/m4-logo-social.png">
<meta property="og:image:secure_url" content="https://metroui.org.ua/images/m4-logo-social.png">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="968">
<meta property="og:image:height" content="504">
<meta name="author" content="Sergey Pimenov">
<meta name="description" content="The most popular HTML, CSS, and JS library in Metro style.">
<meta name="keywords" content="HTML, CSS, JS, Metro, CSS3, Javascript, HTML5, UI, Library, Web, Development, Framework">
<link rel="shortcut icon" href="../../favicon.ico" type="image/x-icon">
<link rel="icon" href="../../favicon.ico" type="image/x-icon">
<link href="../../metro/css/metro-all.css?ver=@@b-version" rel="stylesheet">
<link href="start.css" rel="stylesheet">
<title>Start screen demo - Metro 4 :: Popular HTML, CSS and JS library</title>
</head>
<body class="bg-dark fg-white h-vh-100 m4-cloak">
<div class="container-fluid start-screen h-100">
<h1 class="start-screen-title">Start</h1>
<div class="tiles-area clear">
<div class="tiles-grid tiles-group size-2 fg-white" data-group-title="General">
<a href="https://github.com/olton/Metro-UI-CSS" data-role="tile" class="bg-indigo fg-white">
<span class="mif-github icon"></span>
<span class="branding-bar">Github</span>
<span class="badge-bottom">30</span>
</a>
<div data-role="tile" class="bg-cyan fg-white">
<span class="mif-envelop icon"></span>
<span class="branding-bar">Email</span>
<span class="badge-bottom">10</span>
</div>
<div data-role="tile" class="bg-orange fg-white" data-size="wide">
<span class="mif-chrome icon"></span>
<span class="branding-bar">Chrome</span>
</div>
<div data-role="tile" data-size="small">
<span class="mif-apple icon"></span>
</div>
<div data-role="tile" data-size="small" class="bg-red fg-white">
<span class="mif-bell icon"></span>
</div>
<div data-role="tile" data-size="small" class="bg-teal fg-white col-1 row-6">
<span class="mif-windows icon"></span>
</div>
<div data-role="tile" data-size="small" class="bg-brown fg-white col-2 row-6">
<span class="mif-wind icon"></span>
</div>
<div data-role="tile" class="bg-cyan fg-white">
<span class="mif-table icon"></span>
<span class="branding-bar">Tables</span>
</div>
</div>
<div class="tiles-grid tiles-group size-2 fg-white" data-group-title="Images">
<div data-role="tile" data-cover="../../images/me.jpg">
<span class="branding-bar">Sergey Pimenov</span>
</div>
<div data-role="tile" data-effect="animate-fade" data-effect-duration="1000">
<div class="slide" data-cover="../../images/me2.jpg"></div>
<div class="slide" data-cover="../../images/me.jpg"></div>
<div class="slide" data-cover="../../images/me3.jpg"></div>
<span class="branding-bar">Gallery</span>
</div>
<div data-role="tile" data-size="wide" data-effect="animate-slide-left">
<div class="slide" data-cover="../../images/1.jpg"></div>
<div class="slide" data-cover="../../images/2.jpg"></div>
<div class="slide" data-cover="../../images/3.jpg"></div>
<div class="slide" data-cover="../../images/4.jpg"></div>
<div class="slide" data-cover="../../images/5.jpg"></div>
<span class="branding-bar">Gallery</span>
</div>
<div data-role="tile" data-size="wide" data-effect="image-set">
<img src="../../images/jeki_chan.jpg">
<img src="../../images/shvarcenegger.jpg">
<img src="../../images/vin_d.jpg">
<img src="../../images/jolie.jpg">
<img src="../../images/jek_vorobey.jpg">
</div>
</div>
<div class="tiles-grid tiles-group size-1 fg-white" data-group-title="Office">
<div data-role="tile" data-size="small">
<img src="../../images/outlook.png" class="icon">
</div>
<div data-role="tile" data-size="small" class="bg-brown">
<img src="../../images/word.png" class="icon">
</div>
<div data-role="tile" data-size="small" class="bg-green">
<img src="../../images/excel.png" class="icon">
</div>
<div data-role="tile" data-size="small" class="bg-red">
<img src="../../images/access.png" class="icon">
</div>
<div data-role="tile" data-size="small" class="bg-teal">
<img src="../../images/powerpoint.png" class="icon">
</div>
</div>
<div class="tiles-grid tiles-group size-2 fg-white" data-group-title="Games">
<div data-role="tile" data-cover="../../images/Battlefield_4_Icon.png">
<span class="branding-bar">Battlefield 4</span>
</div>
<div data-role="tile" class="bg-green">
<img src="../../images/x-box.png" class="icon">
<span class="branding-bar">XBOX ONE</span>
</div>
<div data-role="tile" data-size="wide" data-cover="../../images/x-box.png">
<span class="branding-bar">XBOX LIVE</span>
<span class="badge-top">5</span>
</div>
</div>
<div class="tiles-grid tiles-group size-2 fg-white" data-group-title="General">
<a href="https://github.com/olton/Metro-UI-CSS" data-role="tile" class="bg-indigo fg-white">
<span class="mif-github icon"></span>
<span class="branding-bar">Github</span>
<span class="badge-bottom">30</span>
</a>
<div data-role="tile" class="bg-cyan fg-white">
<span class="mif-envelop icon"></span>
<span class="branding-bar">Email</span>
<span class="badge-bottom">10</span>
</div>
<div data-role="tile" class="bg-orange fg-white" data-size="wide">
<span class="mif-chrome icon"></span>
<span class="branding-bar">Chrome</span>
</div>
<div data-role="tile" data-size="small">
<span class="mif-apple icon"></span>
</div>
<div data-role="tile" data-size="small" class="bg-red fg-white">
<span class="mif-bell icon"></span>
</div>
<div data-role="tile" data-size="small" class="bg-teal fg-white col-1 row-6">
<span class="mif-windows icon"></span>
</div>
<div data-role="tile" data-size="small" class="bg-brown fg-white col-2 row-6">
<span class="mif-wind icon"></span>
</div>
<div data-role="tile" class="bg-cyan fg-white">
<span class="mif-table icon"></span>
<span class="branding-bar">Tables</span>
</div>
</div>
</div>
</div>
<script src="../../js/jquery-3.3.1.min.js"></script>
<script src="../../metro/js/metro.js"></script>
<script src="start.js"></script>
</body>
</html>