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
332 lines (300 loc) • 17.2 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="Are you tired of Bootstrap? Get started with Metro 4, the popular framework for building responsive, mobile-first sites in Metro style, with the Metro CDN and a template starter page. 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="highlight/styles/github.css" rel="stylesheet">
<link href="docsearch/docsearch.min.css" rel="stylesheet">
<link href="css/site.css" rel="stylesheet">
<title>Metro 4 Support - Popular HTML, CSS and JS library</title>
<style>
@media all and (min-width: 768px) {
.hero {
padding: 160px 80px 120px;
}
.neb-white {
height: auto;
z-index: 4;
}
}
</style>
</head>
<body class="m4-cloak" style="padding-top: 50px">
<div class="container-fluid bg-darkMagenta fg-white pos-fixed fixed-top z-top">
<header class="app-bar container bg-darkMagenta fg-white pos-relative" data-role="appbar" data-expand-point="md">
<a href="index.html" class="brand fg-white no-hover">METRO 4</a>
<ul class="app-bar-menu ml-auto text-upper">
<li><a href="intro.html">Guide</a></li>
<li><a href="https://sandbox.org.ua">Sandbox</a></li>
<li><a href="https://builder.metroui.org.ua">Builder</a></li>
<li><a href="examples.html">Examples</a></li>
<li><a href="support.html" class="text-bold fg-yellow"><span class="d-block ani-vertical">Support Me</span></a></li>
<li><a href="https://forum.metroui.org.ua">Forum</a></li>
<li>
<a href="https://github.com/olton/Metro-UI-CSS" target="_blank">
<span class="mif-github mif-2x d-none d-block-md"></span>
<span class="d-block d-none-md">Github</span>
</a>
</li>
</ul>
</header>
</div>
<div class="hero hero-bg text-center neb neb-hero" style="padding-top: 40px">
<h1 class="fg-white mt-10"><span class="reduce-1 enlarge-1-md">Support <span class="no-wrap">Metro 4</span> Development</span></h1>
<div class="container mt-10 text-leader fg-white pl-5-fs pr-5-fs pl-20-md pr-20-md">
<p class=" reduce-1 enlarge-1-md">
Metro 4 is an MIT licensed open source project and completely free to use.
However, the amount of effort needed to maintain and develop new features for the project is not sustainable without proper financial backing.
</p>
</div>
</div>
<div class="container-fluid bg-white fg-dark pt-10 pb-20 neb neb-white">
<div class="container text-center">
<div class="h1 text-light text-center">Support methods:</div>
<div class="row mt-10">
<div class="cell-md-6 mt-4">
<div class="border bd-default p-4 h-100">
<h3 class="mt-5 mb-5">Patreon</h3>
<hr>
<p>
Recurring pledges come with exclusive perks, e.g. having your name listed in the Metro 4 GitHub repository, or have your company logo placed on this website.
</p>
<div class="mt-4">
<a href="https://www.patreon.com/bePatron?u=8975658" class="button alert large text-upper d-inline-flex flex-align-center flex-justify-center"><img src="images/patreon.png" class="mr-2"> Become a Patron</a>
</div>
<p class="text-bold">
With your help, I can make Metro 4 even better!
</p>
</div>
</div>
<div class="cell-md-6 mt-4">
<div class="border bd-default p-4 h-100">
<h3 class="mt-5 mb-5">Open collective</h3>
<hr>
<p>
Recurring pledges come with exclusive perks, e.g. having your name listed in the Metro 4 GitHub repository, or have your company logo placed on this website.
</p>
<div class="mt-4">
<a href="https://opencollective.com/metro4" class="button info large text-upper d-inline-flex flex-align-center flex-justify-center"><img src="images/open-collective.png" class="mr-2"> Become a Patron</a>
</div>
<p class="text-bold">
With your help, I can make Metro 4 even better!
</p>
</div>
</div>
<!--<div class="cell-md-4 mt-4">-->
<!--<div class="border bd-default p-4">-->
<!--<h3 class="mt-5">Liberpay</h3>-->
<!--<hr>-->
<!--<p>-->
<!--Recurring pledges come with exclusive perks, e.g. having your name listed in the Metro 4 GitHub repository, or have your company logo placed on this website.-->
<!--</p>-->
<!--<ul class="mt-5 unstyled-list">-->
<!--<li><a href="https://en.liberapay.com/olton" class="h2 fg-red">Become a backer or sponsor via Liberpay</a></li>-->
<!--</ul>-->
<!--<p class="text-bold">-->
<!--With your help, I can make Metro 4 even better!-->
<!--</p>-->
<!--</div>-->
<!--</div>-->
</div>
<div class="row mt-10">
<div class="cell-md-6 mt-4">
<div class="border bd-default p-4 h-100">
<h3 class="mt-5 mb-5">Swift USD</h3>
<hr>
<table class="table text-left striped">
<thead>
<tr>
<th>BENEFICIARY: </th>
<th>PIMENOV SERHII, index 01001, Ukraine,city Kyiv,street Anny Akhmatovoi,building 33,flat 12</th>
</tr>
</thead>
<tbody>
<tr>
<td>ACCOUNT:</td>
<td>4149629300193935</td>
</tr>
<tr>
<td>BANK OF BENEFICIARY:</td>
<td>PRIVATBANK, 1D HRUSHEVSKOHO STR., KYIV, 01001, UKRAINESWIFT CODE/BIC: PBANUA2X</td>
</tr>
<tr>
<td>CORRESPONDENT ACCOUNT: </td>
<td>0011000080</td>
</tr>
<tr>
<td>INTERMEDIARY BANK: </td>
<td>JP MORGAN CHASE BANK SWIFT CODE/BIC: CHASUS33</td>
</tr>
<tr>
<td>IBAN:</td>
<td>UA463052990004149629300193935</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="cell-md-6 mt-4">
<div class="border bd-default p-4 h-100">
<h3 class="mt-5 mb-5">Swift EURO</h3>
<hr>
<table class="table text-left striped">
<thead>
<tr>
<th>BENEFICIARY:</th>
<th>PIMENOV SERHII, index 01001, Ukraine,city Kyiv,street Anny Akhmatovoi,building 33,flat 12</th>
</tr>
</thead>
<tbody>
<tr>
<td>ACCOUNT:</td>
<td>5168742209763014</td>
</tr>
<tr>
<td>BANK OF BENEFICIARY: </td>
<td>PRIVATBANK, 1D HRUSHEVSKOHO STR., KYIV, 01001, UKRAINESWIFT CODE/BIC: PBANUA2X</td>
</tr>
<tr>
<td>CORRESPONDENT ACCOUNT: </td>
<td>400 8867004 01</td>
</tr>
<tr>
<td>INTERMEDIARY BANK: </td>
<td>Commerzbank AG Frankfurt am Main Germany SWIFT CODE/BIC: COBADEFF</td>
</tr>
<tr>
<td>IBAN:</td>
<td>UA553052990005168742209763014</td>
</tr>
</tbody>
</table> </div>
</div>
</div>
</div>
</div>
<div class="container-fluid bg-light pt-10 pb-20 neb neb-light">
<div class="container text-center">
<h3 class="mt-10">Gold sponsor</h3>
<ul class="mt-5 unstyled-list">
<li><a href="https://openbuilds.com/"><img src="images/OpenBuilds_logo.png" style="height: 160px"></a></li>
</ul>
<!--
<h5 class="mt-10">Silver sponsors</h5>
<ul class="mt-5 unstyled-list d-flex flex-justify-center">
</ul>
-->
<h6 class="mt-10">Backers via Patreon</h6>
<ul class="mt-5 unstyled-list">
<li><a href="https://www.patreon.com/user/creators?u=10019621">Jonathan</a></li>
<li><a href="https://www.patreon.com/user/creators?u=13947239">Arnaud Dagnelies</a></li>
</ul>
<!--<h6 class="mt-10">Project Donors (One pay or former patron)</h6>-->
<!--<ul class="mt-5 unstyled-list">-->
<!--</ul>-->
</div>
</div>
<div class="container-fluid feature-bg pt-10 pb-20 neb neb-feature">
<div class="container text-center">
<div class="h1 m-10"><span class="reduce-1 enlarge-1-md">Why sponsor?</span></div>
<div class="text-leader">
<p class="reduce-1 enlarge-1-md pl-5-fs pr-5-fs pl-20-md pr-20-md">
If you run a business and is using Metro 4 (Metro UI CSS) in a revenue-generating product, it would make business sense to sponsor Metro 4 development: it ensures the project that your product relies on stays healthy and actively maintained.
</p>
</div>
<hr class="mt-10 mb-10 w-50" style="background-color: #E1E1E1">
<!-- ads-html -->
<hr class="mt-10 mb-10 w-50" style="background-color: #E1E1E1">
<div class="text-leader2">
<p class="reduce-1 enlarge-1-md pl-5-fs pr-5-fs pl-20-md pr-20-md">
Of course, individual users are also welcome to make a recurring pledge if Metro 4 (Metro UI CSS) has helped you in your work or personal projects.
</p>
</div>
</div>
</div>
<div class="container-fluid bg-white fg-dark">
<div class="container pt-10 pb-20">
<div class="h1 mt-10 text-center"><span class="reduce-1 enlarge-1-md">Special thanks to</span></div>
<div class="row special-thanks">
<div class="cell-md-2">
<a href="https://olshansky.ua/"><img src="images/olshansky.svg"></a>
</div>
<div class="cell-md-2">
<a href="https://www.imena.ua/"><img src="images/imena_logo.png"></a>
</div>
<div class="cell-md-2">
<a href="https://mirohost.net/"><img src="images/mirohost_logo.svg"></a>
</div>
<div class="cell-md-2">
<a href="https://www.keycdn.com/"><img src="images/keycdn-logo.svg"></a>
</div>
<div class="cell-md-2">
<a href="https://www.jetbrains.com/"><img src="images/jetbrains.svg"></a>
</div>
</div>
</div>
</div>
<footer class="footer-bg">
<div class="container pt-20 pb-20">
<div class="text-center">
<ul class="inline-list reduce-1" id="social-menu">
<li><a href="https://www.facebook.com/metrouicss/"><span class="mif-facebook"></span></a></li>
<li><a href="https://twitter.com/MetroUI"><span class="mif-twitter"></span></a></li>
<li><a href="#"><span class="mif-youtube"></span></a></li>
<li><a href="https://github.com/olton/Metro-UI-CSS"><span class="mif-github"></span></a></li>
</ul>
</div>
<div class="text-center mt-10">
<ul class="inline-list reduce-1" id="footer-menu">
<li><a href="https://github.com/olton/Metro-UI-CSS/blob/master/LICENSE">License</a></li>
<li><a href="mailto:sergey@pimenov.com.ua">Author</a></li>
<li><a href="https://forum.metroui.org.ua">Forum</a></li>
<li><a href="https://github.com/olton/Metro-UI-CSS/issues">Issues</a></li>
<li><a href="https://github.com/olton/Metro-UI-CSS/releases">Releases</a></li>
</ul>
</div>
<div class="text-center mt-10 reduce-1">
Metro 4 (Metro UI CSS) © 2012-2018 by <a href="mailto:sergey@pimenov.com.ua" class="no-wrap">Sergey Pimenov</a>.
<br />
<span class="no-wrap">Domain by <a href="https://imena.ua/">Imena.ua</a>.</span>
<span class="no-wrap">Hosting by <a href="https://mirohost.net/">Mirohost</a>.</span>
<br/>
<span class="no-wrap">Metro CDN by <a href="https://www.keycdn.com/">KeyCDN</a>.</span>
<br/>
<span class="no-wrap">IDE PhpStorm by <a href="https://www.jetbrains.com/">JetBrains</a>.</span>
<br />
Currently <span class="version-number"></span>. Code licensed <a href="https://github.com/olton/Metro-UI-CSS/blob/master/LICENSE">MIT</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.
</div>
</div>
</footer>
<script src="js/jquery-3.3.1.min.js"></script>
<script src="metro/js/metro.js?ver=@@b-version"></script>
<script>
$(".version-number").html(Metro.ver());
</script>
<!-- ads-script -->
<!-- ga-script -->
<!-- hit-ua -->
</body>
</html>