File size: 4.95Kb
<!DOCTYPE html>
<html lang="ru">
<head>
<title>SiteTop</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="#8e24aa">
<meta name="mobile-web-app-capable" content="yes">
<meta name="application-name" content="SiteTop">
<link href="libs/style.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
<header class="head">
<div class="c_bar">SiteTop</div>
<div class="r_bar">
<a href="#">
<i class="material-icons">person_add</i>
</a>
</div>
<div class="r_bar">
<a href="#">
<i class="material-icons">person</i>
</a>
</div>
</header>
<main>
<section>
<nav class="tab-nav">
<a class="tab active" href="#">Top 100</a>
<a class="tab" href="cat.html">Categories</a>
</nav>
<div class="post">
<div class="post-content">
<div class="post-top">
<div class="number">1</div>
<span class="site">
<img class="favicon" src="http://www.google.com/s2/favicons?domain=null">
<a href="#" class="post_link">site.com</a>
</span>
</div>
<p class="post_text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris velit lacus, faucibus sit amet tempus vel, interdum ut sem.</p>
<ul class="list-midl">
<li>
<span>999</span> <i class="material-icons">arrow_upward</i>
<span class="left-12">99</span> <i class="material-icons">arrow_downward</i>
</li>
<li class="more">
<a href="#" class="more"><i class="material-icons">timeline</i>В статистику</a>
</li>
</ul>
</div>
</div>
<div class="post">
<div class="post-content">
<div class="post-top">
<div class="number">2</div>
<span class="site">
<img class="favicon" src="http://www.google.com/s2/favicons?domain=null">
<a href="#" class="post_link">site.com</a>
</span>
</div>
<p class="post_text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris velit lacus, faucibus sit amet tempus vel, interdum ut sem.</p>
<ul class="list-midl">
<li>
<span>999</span> <i class="material-icons">arrow_upward</i>
<span class="left-12">99</span> <i class="material-icons">arrow_downward</i>
</li>
<li class="more">
<a href="#" class="more"><i class="material-icons">timeline</i>В статистику</a>
</li>
</ul>
</div>
</div>
<div class="post">
<div class="post-content">
<div class="post-top">
<div class="number">3</div>
<span class="site">
<img class="favicon" src="http://www.google.com/s2/favicons?domain=null">
<a href="#" class="post_link">site.com</a>
</span>
</div>
<p class="post_text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris velit lacus, faucibus sit amet tempus vel, interdum ut sem.</p>
<ul class="list-midl">
<li>
<span>999</span> <i class="material-icons">arrow_upward</i>
<span class="left-12">99</span> <i class="material-icons">arrow_downward</i>
</li>
<li class="more">
<a href="#" class="more"><i class="material-icons">timeline</i>В статистику</a>
</li>
</ul>
</div>
</div>
<div class="post">
<div class="post-content">
<div class="post-top">
<div class="number">4</div>
<span class="site">
<img class="favicon" src="http://www.google.com/s2/favicons?domain=null">
<a href="#" class="post_link">site.com</a>
</span>
</div>
<p class="post_text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris velit lacus, faucibus sit amet tempus vel, interdum ut sem.</p>
<ul class="list-midl">
<li>
<span>999</span> <i class="material-icons">arrow_upward</i>
<span class="left-12">99</span> <i class="material-icons">arrow_downward</i>
</li>
<li class="more">
<a href="#" class="more"><i class="material-icons">timeline</i>В статистику</a>
</li>
</ul>
</div>
</div>
<ul class="pagination">
<a href="#" class="pagination-arrow arrow-left">
<i class="material-icons">keyboard_arrow_left</i>
</a>
<a href="#" class="pagination-number">1</a>
<a href="#" class="pagination-number">2</a>
<li class="pagination-number current-number">3</li>
<a href="#" class="pagination-number">4</a>
<a href="#" class="pagination-number">5</a>
<a href="#" class="pagination-arrow arrow-right">
<i class="material-icons">keyboard_arrow_right</i>
</a>
</ul>
</section>
</main>
<footer>
<div class="copyr">Copyright 2018, SiteTop by xrystalll</div>
<ul class="links">
<li class="link">
<a href="#">link</a>
</li>
<li class="link">
<a href="#">link</a>
</li>
</ul>
</footer>
</body>
</html>