mirror of
https://github.com/Mibew/simple-icons.git
synced 2025-10-31 10:31:06 +03:00
Adds static layout for grid, ad and footer
This commit is contained in:
Dan Leech
parent
e498a8d8c3
commit
e5b29922a1
@ -15,8 +15,711 @@
|
||||
</ul>
|
||||
</header>
|
||||
<main role="main">
|
||||
<ul class="grid">
|
||||
<li class="grid-item grid-item--ad">
|
||||
<div id="carbonads">
|
||||
<span>
|
||||
<span class="carbon-wrap">
|
||||
<a class="carbon-img" href="#">
|
||||
<img src="http://placehold.it/130x100&text=Ad">
|
||||
</a>
|
||||
<a class="carbon-text" href="#">Create your website with a beautiful Squarespace template. Start a free trial.</a>
|
||||
</span>
|
||||
<a class="carbon-poweredby" href="#">ads via Carbon</a>
|
||||
</span>
|
||||
</div>
|
||||
</li>
|
||||
<li class="grid-item">
|
||||
<a class="grid-item__link" href="#">
|
||||
<img class="grid-item__image" src="http://placehold.it/24x24" alt="Icon name">
|
||||
<h2 class="grid-item__title">Icon name</h2>
|
||||
</a>
|
||||
<p class="grid-item__subtitle">#AABBCC</p>
|
||||
</li>
|
||||
<li class="grid-item">
|
||||
<a class="grid-item__link" href="#">
|
||||
<img class="grid-item__image" src="http://placehold.it/24x24" alt="Icon name">
|
||||
<h2 class="grid-item__title">Icon name</h2>
|
||||
</a>
|
||||
<p class="grid-item__subtitle">#AABBCC</p>
|
||||
</li>
|
||||
<li class="grid-item">
|
||||
<a class="grid-item__link" href="#">
|
||||
<img class="grid-item__image" src="http://placehold.it/24x24" alt="Icon name">
|
||||
<h2 class="grid-item__title">Icon name</h2>
|
||||
</a>
|
||||
<p class="grid-item__subtitle">#AABBCC</p>
|
||||
</li>
|
||||
<li class="grid-item">
|
||||
<a class="grid-item__link" href="#">
|
||||
<img class="grid-item__image" src="http://placehold.it/24x24" alt="Icon name">
|
||||
<h2 class="grid-item__title">Icon name</h2>
|
||||
</a>
|
||||
<p class="grid-item__subtitle">#AABBCC</p>
|
||||
</li>
|
||||
<li class="grid-item">
|
||||
<a class="grid-item__link" href="#">
|
||||
<img class="grid-item__image" src="http://placehold.it/24x24" alt="Icon name">
|
||||
<h2 class="grid-item__title">Icon name</h2>
|
||||
</a>
|
||||
<p class="grid-item__subtitle">#AABBCC</p>
|
||||
</li>
|
||||
<li class="grid-item">
|
||||
<a class="grid-item__link" href="#">
|
||||
<img class="grid-item__image" src="http://placehold.it/24x24" alt="Icon name">
|
||||
<h2 class="grid-item__title">Icon name</h2>
|
||||
</a>
|
||||
<p class="grid-item__subtitle">#AABBCC</p>
|
||||
</li>
|
||||
<li class="grid-item">
|
||||
<a class="grid-item__link" href="#">
|
||||
<img class="grid-item__image" src="http://placehold.it/24x24" alt="Icon name">
|
||||
<h2 class="grid-item__title">Icon name</h2>
|
||||
</a>
|
||||
<p class="grid-item__subtitle">#AABBCC</p>
|
||||
</li>
|
||||
<li class="grid-item">
|
||||
<a class="grid-item__link" href="#">
|
||||
<img class="grid-item__image" src="http://placehold.it/24x24" alt="Icon name">
|
||||
<h2 class="grid-item__title">Icon name</h2>
|
||||
</a>
|
||||
<p class="grid-item__subtitle">#AABBCC</p>
|
||||
</li>
|
||||
<li class="grid-item">
|
||||
<a class="grid-item__link" href="#">
|
||||
<img class="grid-item__image" src="http://placehold.it/24x24" alt="Icon name">
|
||||
<h2 class="grid-item__title">Icon name</h2>
|
||||
</a>
|
||||
<p class="grid-item__subtitle">#AABBCC</p>
|
||||
</li>
|
||||
<li class="grid-item">
|
||||
<a class="grid-item__link" href="#">
|
||||
<img class="grid-item__image" src="http://placehold.it/24x24" alt="Icon name">
|
||||
<h2 class="grid-item__title">Icon name</h2>
|
||||
</a>
|
||||
<p class="grid-item__subtitle">#AABBCC</p>
|
||||
</li>
|
||||
<li class="grid-item">
|
||||
<a class="grid-item__link" href="#">
|
||||
<img class="grid-item__image" src="http://placehold.it/24x24" alt="Icon name">
|
||||
<h2 class="grid-item__title">Icon name</h2>
|
||||
</a>
|
||||
<p class="grid-item__subtitle">#AABBCC</p>
|
||||
</li>
|
||||
<li class="grid-item">
|
||||
<a class="grid-item__link" href="#">
|
||||
<img class="grid-item__image" src="http://placehold.it/24x24" alt="Icon name">
|
||||
<h2 class="grid-item__title">Icon name</h2>
|
||||
</a>
|
||||
<p class="grid-item__subtitle">#AABBCC</p>
|
||||
</li>
|
||||
<li class="grid-item">
|
||||
<a class="grid-item__link" href="#">
|
||||
<img class="grid-item__image" src="http://placehold.it/24x24" alt="Icon name">
|
||||
<h2 class="grid-item__title">Icon name</h2>
|
||||
</a>
|
||||
<p class="grid-item__subtitle">#AABBCC</p>
|
||||
</li>
|
||||
<li class="grid-item">
|
||||
<a class="grid-item__link" href="#">
|
||||
<img class="grid-item__image" src="http://placehold.it/24x24" alt="Icon name">
|
||||
<h2 class="grid-item__title">Icon name</h2>
|
||||
</a>
|
||||
<p class="grid-item__subtitle">#AABBCC</p>
|
||||
</li>
|
||||
<li class="grid-item">
|
||||
<a class="grid-item__link" href="#">
|
||||
<img class="grid-item__image" src="http://placehold.it/24x24" alt="Icon name">
|
||||
<h2 class="grid-item__title">Icon name</h2>
|
||||
</a>
|
||||
<p class="grid-item__subtitle">#AABBCC</p>
|
||||
</li>
|
||||
<li class="grid-item">
|
||||
<a class="grid-item__link" href="#">
|
||||
<img class="grid-item__image" src="http://placehold.it/24x24" alt="Icon name">
|
||||
<h2 class="grid-item__title">Icon name</h2>
|
||||
</a>
|
||||
<p class="grid-item__subtitle">#AABBCC</p>
|
||||
</li>
|
||||
<li class="grid-item">
|
||||
<a class="grid-item__link" href="#">
|
||||
<img class="grid-item__image" src="http://placehold.it/24x24" alt="Icon name">
|
||||
<h2 class="grid-item__title">Icon name</h2>
|
||||
</a>
|
||||
<p class="grid-item__subtitle">#AABBCC</p>
|
||||
</li>
|
||||
<li class="grid-item">
|
||||
<a class="grid-item__link" href="#">
|
||||
<img class="grid-item__image" src="http://placehold.it/24x24" alt="Icon name">
|
||||
<h2 class="grid-item__title">Icon name</h2>
|
||||
</a>
|
||||
<p class="grid-item__subtitle">#AABBCC</p>
|
||||
</li>
|
||||
<li class="grid-item">
|
||||
<a class="grid-item__link" href="#">
|
||||
<img class="grid-item__image" src="http://placehold.it/24x24" alt="Icon name">
|
||||
<h2 class="grid-item__title">Icon name</h2>
|
||||
</a>
|
||||
<p class="grid-item__subtitle">#AABBCC</p>
|
||||
</li>
|
||||
<li class="grid-item">
|
||||
<a class="grid-item__link" href="#">
|
||||
<img class="grid-item__image" src="http://placehold.it/24x24" alt="Icon name">
|
||||
<h2 class="grid-item__title">Icon name</h2>
|
||||
</a>
|
||||
<p class="grid-item__subtitle">#AABBCC</p>
|
||||
</li>
|
||||
<li class="grid-item">
|
||||
<a class="grid-item__link" href="#">
|
||||
<img class="grid-item__image" src="http://placehold.it/24x24" alt="Icon name">
|
||||
<h2 class="grid-item__title">Icon name</h2>
|
||||
</a>
|
||||
<p class="grid-item__subtitle">#AABBCC</p>
|
||||
</li>
|
||||
<li class="grid-item">
|
||||
<a class="grid-item__link" href="#">
|
||||
<img class="grid-item__image" src="http://placehold.it/24x24" alt="Icon name">
|
||||
<h2 class="grid-item__title">Icon name</h2>
|
||||
</a>
|
||||
<p class="grid-item__subtitle">#AABBCC</p>
|
||||
</li>
|
||||
<li class="grid-item">
|
||||
<a class="grid-item__link" href="#">
|
||||
<img class="grid-item__image" src="http://placehold.it/24x24" alt="Icon name">
|
||||
<h2 class="grid-item__title">Icon name</h2>
|
||||
</a>
|
||||
<p class="grid-item__subtitle">#AABBCC</p>
|
||||
</li>
|
||||
<li class="grid-item">
|
||||
<a class="grid-item__link" href="#">
|
||||
<img class="grid-item__image" src="http://placehold.it/24x24" alt="Icon name">
|
||||
<h2 class="grid-item__title">Icon name</h2>
|
||||
</a>
|
||||
<p class="grid-item__subtitle">#AABBCC</p>
|
||||
</li>
|
||||
<li class="grid-item">
|
||||
<a class="grid-item__link" href="#">
|
||||
<img class="grid-item__image" src="http://placehold.it/24x24" alt="Icon name">
|
||||
<h2 class="grid-item__title">Icon name</h2>
|
||||
</a>
|
||||
<p class="grid-item__subtitle">#AABBCC</p>
|
||||
</li>
|
||||
<li class="grid-item">
|
||||
<a class="grid-item__link" href="#">
|
||||
<img class="grid-item__image" src="http://placehold.it/24x24" alt="Icon name">
|
||||
<h2 class="grid-item__title">Icon name</h2>
|
||||
</a>
|
||||
<p class="grid-item__subtitle">#AABBCC</p>
|
||||
</li>
|
||||
<li class="grid-item">
|
||||
<a class="grid-item__link" href="#">
|
||||
<img class="grid-item__image" src="http://placehold.it/24x24" alt="Icon name">
|
||||
<h2 class="grid-item__title">Icon name</h2>
|
||||
</a>
|
||||
<p class="grid-item__subtitle">#AABBCC</p>
|
||||
</li>
|
||||
<li class="grid-item">
|
||||
<a class="grid-item__link" href="#">
|
||||
<img class="grid-item__image" src="http://placehold.it/24x24" alt="Icon name">
|
||||
<h2 class="grid-item__title">Icon name</h2>
|
||||
</a>
|
||||
<p class="grid-item__subtitle">#AABBCC</p>
|
||||
</li>
|
||||
<li class="grid-item">
|
||||
<a class="grid-item__link" href="#">
|
||||
<img class="grid-item__image" src="http://placehold.it/24x24" alt="Icon name">
|
||||
<h2 class="grid-item__title">Icon name</h2>
|
||||
</a>
|
||||
<p class="grid-item__subtitle">#AABBCC</p>
|
||||
</li>
|
||||
<li class="grid-item">
|
||||
<a class="grid-item__link" href="#">
|
||||
<img class="grid-item__image" src="http://placehold.it/24x24" alt="Icon name">
|
||||
<h2 class="grid-item__title">Icon name</h2>
|
||||
</a>
|
||||
<p class="grid-item__subtitle">#AABBCC</p>
|
||||
</li>
|
||||
<li class="grid-item">
|
||||
<a class="grid-item__link" href="#">
|
||||
<img class="grid-item__image" src="http://placehold.it/24x24" alt="Icon name">
|
||||
<h2 class="grid-item__title">Icon name</h2>
|
||||
</a>
|
||||
<p class="grid-item__subtitle">#AABBCC</p>
|
||||
</li>
|
||||
<li class="grid-item">
|
||||
<a class="grid-item__link" href="#">
|
||||
<img class="grid-item__image" src="http://placehold.it/24x24" alt="Icon name">
|
||||
<h2 class="grid-item__title">Icon name</h2>
|
||||
</a>
|
||||
<p class="grid-item__subtitle">#AABBCC</p>
|
||||
</li>
|
||||
<li class="grid-item">
|
||||
<a class="grid-item__link" href="#">
|
||||
<img class="grid-item__image" src="http://placehold.it/24x24" alt="Icon name">
|
||||
<h2 class="grid-item__title">Icon name</h2>
|
||||
</a>
|
||||
<p class="grid-item__subtitle">#AABBCC</p>
|
||||
</li>
|
||||
<li class="grid-item">
|
||||
<a class="grid-item__link" href="#">
|
||||
<img class="grid-item__image" src="http://placehold.it/24x24" alt="Icon name">
|
||||
<h2 class="grid-item__title">Icon name</h2>
|
||||
</a>
|
||||
<p class="grid-item__subtitle">#AABBCC</p>
|
||||
</li>
|
||||
<li class="grid-item">
|
||||
<a class="grid-item__link" href="#">
|
||||
<img class="grid-item__image" src="http://placehold.it/24x24" alt="Icon name">
|
||||
<h2 class="grid-item__title">Icon name</h2>
|
||||
</a>
|
||||
<p class="grid-item__subtitle">#AABBCC</p>
|
||||
</li>
|
||||
<li class="grid-item">
|
||||
<a class="grid-item__link" href="#">
|
||||
<img class="grid-item__image" src="http://placehold.it/24x24" alt="Icon name">
|
||||
<h2 class="grid-item__title">Icon name</h2>
|
||||
</a>
|
||||
<p class="grid-item__subtitle">#AABBCC</p>
|
||||
</li>
|
||||
<li class="grid-item">
|
||||
<a class="grid-item__link" href="#">
|
||||
<img class="grid-item__image" src="http://placehold.it/24x24" alt="Icon name">
|
||||
<h2 class="grid-item__title">Icon name</h2>
|
||||
</a>
|
||||
<p class="grid-item__subtitle">#AABBCC</p>
|
||||
</li>
|
||||
<li class="grid-item">
|
||||
<a class="grid-item__link" href="#">
|
||||
<img class="grid-item__image" src="http://placehold.it/24x24" alt="Icon name">
|
||||
<h2 class="grid-item__title">Icon name</h2>
|
||||
</a>
|
||||
<p class="grid-item__subtitle">#AABBCC</p>
|
||||
</li>
|
||||
<li class="grid-item">
|
||||
<a class="grid-item__link" href="#">
|
||||
<img class="grid-item__image" src="http://placehold.it/24x24" alt="Icon name">
|
||||
<h2 class="grid-item__title">Icon name</h2>
|
||||
</a>
|
||||
<p class="grid-item__subtitle">#AABBCC</p>
|
||||
</li>
|
||||
<li class="grid-item">
|
||||
<a class="grid-item__link" href="#">
|
||||
<img class="grid-item__image" src="http://placehold.it/24x24" alt="Icon name">
|
||||
<h2 class="grid-item__title">Icon name</h2>
|
||||
</a>
|
||||
<p class="grid-item__subtitle">#AABBCC</p>
|
||||
</li>
|
||||
<li class="grid-item">
|
||||
<a class="grid-item__link" href="#">
|
||||
<img class="grid-item__image" src="http://placehold.it/24x24" alt="Icon name">
|
||||
<h2 class="grid-item__title">Icon name</h2>
|
||||
</a>
|
||||
<p class="grid-item__subtitle">#AABBCC</p>
|
||||
</li>
|
||||
<li class="grid-item">
|
||||
<a class="grid-item__link" href="#">
|
||||
<img class="grid-item__image" src="http://placehold.it/24x24" alt="Icon name">
|
||||
<h2 class="grid-item__title">Icon name</h2>
|
||||
</a>
|
||||
<p class="grid-item__subtitle">#AABBCC</p>
|
||||
</li>
|
||||
<li class="grid-item">
|
||||
<a class="grid-item__link" href="#">
|
||||
<img class="grid-item__image" src="http://placehold.it/24x24" alt="Icon name">
|
||||
<h2 class="grid-item__title">Icon name</h2>
|
||||
</a>
|
||||
<p class="grid-item__subtitle">#AABBCC</p>
|
||||
</li>
|
||||
<li class="grid-item">
|
||||
<a class="grid-item__link" href="#">
|
||||
<img class="grid-item__image" src="http://placehold.it/24x24" alt="Icon name">
|
||||
<h2 class="grid-item__title">Icon name</h2>
|
||||
</a>
|
||||
<p class="grid-item__subtitle">#AABBCC</p>
|
||||
</li>
|
||||
<li class="grid-item">
|
||||
<a class="grid-item__link" href="#">
|
||||
<img class="grid-item__image" src="http://placehold.it/24x24" alt="Icon name">
|
||||
<h2 class="grid-item__title">Icon name</h2>
|
||||
</a>
|
||||
<p class="grid-item__subtitle">#AABBCC</p>
|
||||
</li>
|
||||
<li class="grid-item">
|
||||
<a class="grid-item__link" href="#">
|
||||
<img class="grid-item__image" src="http://placehold.it/24x24" alt="Icon name">
|
||||
<h2 class="grid-item__title">Icon name</h2>
|
||||
</a>
|
||||
<p class="grid-item__subtitle">#AABBCC</p>
|
||||
</li>
|
||||
<li class="grid-item">
|
||||
<a class="grid-item__link" href="#">
|
||||
<img class="grid-item__image" src="http://placehold.it/24x24" alt="Icon name">
|
||||
<h2 class="grid-item__title">Icon name</h2>
|
||||
</a>
|
||||
<p class="grid-item__subtitle">#AABBCC</p>
|
||||
</li>
|
||||
<li class="grid-item">
|
||||
<a class="grid-item__link" href="#">
|
||||
<img class="grid-item__image" src="http://placehold.it/24x24" alt="Icon name">
|
||||
<h2 class="grid-item__title">Icon name</h2>
|
||||
</a>
|
||||
<p class="grid-item__subtitle">#AABBCC</p>
|
||||
</li>
|
||||
<li class="grid-item">
|
||||
<a class="grid-item__link" href="#">
|
||||
<img class="grid-item__image" src="http://placehold.it/24x24" alt="Icon name">
|
||||
<h2 class="grid-item__title">Icon name</h2>
|
||||
</a>
|
||||
<p class="grid-item__subtitle">#AABBCC</p>
|
||||
</li>
|
||||
<li class="grid-item">
|
||||
<a class="grid-item__link" href="#">
|
||||
<img class="grid-item__image" src="http://placehold.it/24x24" alt="Icon name">
|
||||
<h2 class="grid-item__title">Icon name</h2>
|
||||
</a>
|
||||
<p class="grid-item__subtitle">#AABBCC</p>
|
||||
</li>
|
||||
<li class="grid-item">
|
||||
<a class="grid-item__link" href="#">
|
||||
<img class="grid-item__image" src="http://placehold.it/24x24" alt="Icon name">
|
||||
<h2 class="grid-item__title">Icon name</h2>
|
||||
</a>
|
||||
<p class="grid-item__subtitle">#AABBCC</p>
|
||||
</li>
|
||||
<li class="grid-item">
|
||||
<a class="grid-item__link" href="#">
|
||||
<img class="grid-item__image" src="http://placehold.it/24x24" alt="Icon name">
|
||||
<h2 class="grid-item__title">Icon name</h2>
|
||||
</a>
|
||||
<p class="grid-item__subtitle">#AABBCC</p>
|
||||
</li>
|
||||
<li class="grid-item">
|
||||
<a class="grid-item__link" href="#">
|
||||
<img class="grid-item__image" src="http://placehold.it/24x24" alt="Icon name">
|
||||
<h2 class="grid-item__title">Icon name</h2>
|
||||
</a>
|
||||
<p class="grid-item__subtitle">#AABBCC</p>
|
||||
</li>
|
||||
<li class="grid-item">
|
||||
<a class="grid-item__link" href="#">
|
||||
<img class="grid-item__image" src="http://placehold.it/24x24" alt="Icon name">
|
||||
<h2 class="grid-item__title">Icon name</h2>
|
||||
</a>
|
||||
<p class="grid-item__subtitle">#AABBCC</p>
|
||||
</li>
|
||||
<li class="grid-item">
|
||||
<a class="grid-item__link" href="#">
|
||||
<img class="grid-item__image" src="http://placehold.it/24x24" alt="Icon name">
|
||||
<h2 class="grid-item__title">Icon name</h2>
|
||||
</a>
|
||||
<p class="grid-item__subtitle">#AABBCC</p>
|
||||
</li>
|
||||
<li class="grid-item">
|
||||
<a class="grid-item__link" href="#">
|
||||
<img class="grid-item__image" src="http://placehold.it/24x24" alt="Icon name">
|
||||
<h2 class="grid-item__title">Icon name</h2>
|
||||
</a>
|
||||
<p class="grid-item__subtitle">#AABBCC</p>
|
||||
</li>
|
||||
<li class="grid-item">
|
||||
<a class="grid-item__link" href="#">
|
||||
<img class="grid-item__image" src="http://placehold.it/24x24" alt="Icon name">
|
||||
<h2 class="grid-item__title">Icon name</h2>
|
||||
</a>
|
||||
<p class="grid-item__subtitle">#AABBCC</p>
|
||||
</li>
|
||||
<li class="grid-item">
|
||||
<a class="grid-item__link" href="#">
|
||||
<img class="grid-item__image" src="http://placehold.it/24x24" alt="Icon name">
|
||||
<h2 class="grid-item__title">Icon name</h2>
|
||||
</a>
|
||||
<p class="grid-item__subtitle">#AABBCC</p>
|
||||
</li>
|
||||
<li class="grid-item">
|
||||
<a class="grid-item__link" href="#">
|
||||
<img class="grid-item__image" src="http://placehold.it/24x24" alt="Icon name">
|
||||
<h2 class="grid-item__title">Icon name</h2>
|
||||
</a>
|
||||
<p class="grid-item__subtitle">#AABBCC</p>
|
||||
</li>
|
||||
<li class="grid-item">
|
||||
<a class="grid-item__link" href="#">
|
||||
<img class="grid-item__image" src="http://placehold.it/24x24" alt="Icon name">
|
||||
<h2 class="grid-item__title">Icon name</h2>
|
||||
</a>
|
||||
<p class="grid-item__subtitle">#AABBCC</p>
|
||||
</li>
|
||||
<li class="grid-item">
|
||||
<a class="grid-item__link" href="#">
|
||||
<img class="grid-item__image" src="http://placehold.it/24x24" alt="Icon name">
|
||||
<h2 class="grid-item__title">Icon name</h2>
|
||||
</a>
|
||||
<p class="grid-item__subtitle">#AABBCC</p>
|
||||
</li>
|
||||
<li class="grid-item">
|
||||
<a class="grid-item__link" href="#">
|
||||
<img class="grid-item__image" src="http://placehold.it/24x24" alt="Icon name">
|
||||
<h2 class="grid-item__title">Icon name</h2>
|
||||
</a>
|
||||
<p class="grid-item__subtitle">#AABBCC</p>
|
||||
</li>
|
||||
<li class="grid-item">
|
||||
<a class="grid-item__link" href="#">
|
||||
<img class="grid-item__image" src="http://placehold.it/24x24" alt="Icon name">
|
||||
<h2 class="grid-item__title">Icon name</h2>
|
||||
</a>
|
||||
<p class="grid-item__subtitle">#AABBCC</p>
|
||||
</li>
|
||||
<li class="grid-item">
|
||||
<a class="grid-item__link" href="#">
|
||||
<img class="grid-item__image" src="http://placehold.it/24x24" alt="Icon name">
|
||||
<h2 class="grid-item__title">Icon name</h2>
|
||||
</a>
|
||||
<p class="grid-item__subtitle">#AABBCC</p>
|
||||
</li>
|
||||
<li class="grid-item">
|
||||
<a class="grid-item__link" href="#">
|
||||
<img class="grid-item__image" src="http://placehold.it/24x24" alt="Icon name">
|
||||
<h2 class="grid-item__title">Icon name</h2>
|
||||
</a>
|
||||
<p class="grid-item__subtitle">#AABBCC</p>
|
||||
</li>
|
||||
<li class="grid-item">
|
||||
<a class="grid-item__link" href="#">
|
||||
<img class="grid-item__image" src="http://placehold.it/24x24" alt="Icon name">
|
||||
<h2 class="grid-item__title">Icon name</h2>
|
||||
</a>
|
||||
<p class="grid-item__subtitle">#AABBCC</p>
|
||||
</li>
|
||||
<li class="grid-item">
|
||||
<a class="grid-item__link" href="#">
|
||||
<img class="grid-item__image" src="http://placehold.it/24x24" alt="Icon name">
|
||||
<h2 class="grid-item__title">Icon name</h2>
|
||||
</a>
|
||||
<p class="grid-item__subtitle">#AABBCC</p>
|
||||
</li>
|
||||
<li class="grid-item">
|
||||
<a class="grid-item__link" href="#">
|
||||
<img class="grid-item__image" src="http://placehold.it/24x24" alt="Icon name">
|
||||
<h2 class="grid-item__title">Icon name</h2>
|
||||
</a>
|
||||
<p class="grid-item__subtitle">#AABBCC</p>
|
||||
</li>
|
||||
<li class="grid-item">
|
||||
<a class="grid-item__link" href="#">
|
||||
<img class="grid-item__image" src="http://placehold.it/24x24" alt="Icon name">
|
||||
<h2 class="grid-item__title">Icon name</h2>
|
||||
</a>
|
||||
<p class="grid-item__subtitle">#AABBCC</p>
|
||||
</li>
|
||||
<li class="grid-item">
|
||||
<a class="grid-item__link" href="#">
|
||||
<img class="grid-item__image" src="http://placehold.it/24x24" alt="Icon name">
|
||||
<h2 class="grid-item__title">Icon name</h2>
|
||||
</a>
|
||||
<p class="grid-item__subtitle">#AABBCC</p>
|
||||
</li>
|
||||
<li class="grid-item">
|
||||
<a class="grid-item__link" href="#">
|
||||
<img class="grid-item__image" src="http://placehold.it/24x24" alt="Icon name">
|
||||
<h2 class="grid-item__title">Icon name</h2>
|
||||
</a>
|
||||
<p class="grid-item__subtitle">#AABBCC</p>
|
||||
</li>
|
||||
<li class="grid-item">
|
||||
<a class="grid-item__link" href="#">
|
||||
<img class="grid-item__image" src="http://placehold.it/24x24" alt="Icon name">
|
||||
<h2 class="grid-item__title">Icon name</h2>
|
||||
</a>
|
||||
<p class="grid-item__subtitle">#AABBCC</p>
|
||||
</li>
|
||||
<li class="grid-item">
|
||||
<a class="grid-item__link" href="#">
|
||||
<img class="grid-item__image" src="http://placehold.it/24x24" alt="Icon name">
|
||||
<h2 class="grid-item__title">Icon name</h2>
|
||||
</a>
|
||||
<p class="grid-item__subtitle">#AABBCC</p>
|
||||
</li>
|
||||
<li class="grid-item">
|
||||
<a class="grid-item__link" href="#">
|
||||
<img class="grid-item__image" src="http://placehold.it/24x24" alt="Icon name">
|
||||
<h2 class="grid-item__title">Icon name</h2>
|
||||
</a>
|
||||
<p class="grid-item__subtitle">#AABBCC</p>
|
||||
</li>
|
||||
<li class="grid-item">
|
||||
<a class="grid-item__link" href="#">
|
||||
<img class="grid-item__image" src="http://placehold.it/24x24" alt="Icon name">
|
||||
<h2 class="grid-item__title">Icon name</h2>
|
||||
</a>
|
||||
<p class="grid-item__subtitle">#AABBCC</p>
|
||||
</li>
|
||||
<li class="grid-item">
|
||||
<a class="grid-item__link" href="#">
|
||||
<img class="grid-item__image" src="http://placehold.it/24x24" alt="Icon name">
|
||||
<h2 class="grid-item__title">Icon name</h2>
|
||||
</a>
|
||||
<p class="grid-item__subtitle">#AABBCC</p>
|
||||
</li>
|
||||
<li class="grid-item">
|
||||
<a class="grid-item__link" href="#">
|
||||
<img class="grid-item__image" src="http://placehold.it/24x24" alt="Icon name">
|
||||
<h2 class="grid-item__title">Icon name</h2>
|
||||
</a>
|
||||
<p class="grid-item__subtitle">#AABBCC</p>
|
||||
</li>
|
||||
<li class="grid-item">
|
||||
<a class="grid-item__link" href="#">
|
||||
<img class="grid-item__image" src="http://placehold.it/24x24" alt="Icon name">
|
||||
<h2 class="grid-item__title">Icon name</h2>
|
||||
</a>
|
||||
<p class="grid-item__subtitle">#AABBCC</p>
|
||||
</li>
|
||||
<li class="grid-item">
|
||||
<a class="grid-item__link" href="#">
|
||||
<img class="grid-item__image" src="http://placehold.it/24x24" alt="Icon name">
|
||||
<h2 class="grid-item__title">Icon name</h2>
|
||||
</a>
|
||||
<p class="grid-item__subtitle">#AABBCC</p>
|
||||
</li>
|
||||
<li class="grid-item">
|
||||
<a class="grid-item__link" href="#">
|
||||
<img class="grid-item__image" src="http://placehold.it/24x24" alt="Icon name">
|
||||
<h2 class="grid-item__title">Icon name</h2>
|
||||
</a>
|
||||
<p class="grid-item__subtitle">#AABBCC</p>
|
||||
</li>
|
||||
<li class="grid-item">
|
||||
<a class="grid-item__link" href="#">
|
||||
<img class="grid-item__image" src="http://placehold.it/24x24" alt="Icon name">
|
||||
<h2 class="grid-item__title">Icon name</h2>
|
||||
</a>
|
||||
<p class="grid-item__subtitle">#AABBCC</p>
|
||||
</li>
|
||||
<li class="grid-item">
|
||||
<a class="grid-item__link" href="#">
|
||||
<img class="grid-item__image" src="http://placehold.it/24x24" alt="Icon name">
|
||||
<h2 class="grid-item__title">Icon name</h2>
|
||||
</a>
|
||||
<p class="grid-item__subtitle">#AABBCC</p>
|
||||
</li>
|
||||
<li class="grid-item">
|
||||
<a class="grid-item__link" href="#">
|
||||
<img class="grid-item__image" src="http://placehold.it/24x24" alt="Icon name">
|
||||
<h2 class="grid-item__title">Icon name</h2>
|
||||
</a>
|
||||
<p class="grid-item__subtitle">#AABBCC</p>
|
||||
</li>
|
||||
<li class="grid-item">
|
||||
<a class="grid-item__link" href="#">
|
||||
<img class="grid-item__image" src="http://placehold.it/24x24" alt="Icon name">
|
||||
<h2 class="grid-item__title">Icon name</h2>
|
||||
</a>
|
||||
<p class="grid-item__subtitle">#AABBCC</p>
|
||||
</li>
|
||||
<li class="grid-item">
|
||||
<a class="grid-item__link" href="#">
|
||||
<img class="grid-item__image" src="http://placehold.it/24x24" alt="Icon name">
|
||||
<h2 class="grid-item__title">Icon name</h2>
|
||||
</a>
|
||||
<p class="grid-item__subtitle">#AABBCC</p>
|
||||
</li>
|
||||
<li class="grid-item">
|
||||
<a class="grid-item__link" href="#">
|
||||
<img class="grid-item__image" src="http://placehold.it/24x24" alt="Icon name">
|
||||
<h2 class="grid-item__title">Icon name</h2>
|
||||
</a>
|
||||
<p class="grid-item__subtitle">#AABBCC</p>
|
||||
</li>
|
||||
<li class="grid-item">
|
||||
<a class="grid-item__link" href="#">
|
||||
<img class="grid-item__image" src="http://placehold.it/24x24" alt="Icon name">
|
||||
<h2 class="grid-item__title">Icon name</h2>
|
||||
</a>
|
||||
<p class="grid-item__subtitle">#AABBCC</p>
|
||||
</li>
|
||||
<li class="grid-item">
|
||||
<a class="grid-item__link" href="#">
|
||||
<img class="grid-item__image" src="http://placehold.it/24x24" alt="Icon name">
|
||||
<h2 class="grid-item__title">Icon name</h2>
|
||||
</a>
|
||||
<p class="grid-item__subtitle">#AABBCC</p>
|
||||
</li>
|
||||
<li class="grid-item">
|
||||
<a class="grid-item__link" href="#">
|
||||
<img class="grid-item__image" src="http://placehold.it/24x24" alt="Icon name">
|
||||
<h2 class="grid-item__title">Icon name</h2>
|
||||
</a>
|
||||
<p class="grid-item__subtitle">#AABBCC</p>
|
||||
</li>
|
||||
<li class="grid-item">
|
||||
<a class="grid-item__link" href="#">
|
||||
<img class="grid-item__image" src="http://placehold.it/24x24" alt="Icon name">
|
||||
<h2 class="grid-item__title">Icon name</h2>
|
||||
</a>
|
||||
<p class="grid-item__subtitle">#AABBCC</p>
|
||||
</li>
|
||||
<li class="grid-item">
|
||||
<a class="grid-item__link" href="#">
|
||||
<img class="grid-item__image" src="http://placehold.it/24x24" alt="Icon name">
|
||||
<h2 class="grid-item__title">Icon name</h2>
|
||||
</a>
|
||||
<p class="grid-item__subtitle">#AABBCC</p>
|
||||
</li>
|
||||
<li class="grid-item">
|
||||
<a class="grid-item__link" href="#">
|
||||
<img class="grid-item__image" src="http://placehold.it/24x24" alt="Icon name">
|
||||
<h2 class="grid-item__title">Icon name</h2>
|
||||
</a>
|
||||
<p class="grid-item__subtitle">#AABBCC</p>
|
||||
</li>
|
||||
<li class="grid-item">
|
||||
<a class="grid-item__link" href="#">
|
||||
<img class="grid-item__image" src="http://placehold.it/24x24" alt="Icon name">
|
||||
<h2 class="grid-item__title">Icon name</h2>
|
||||
</a>
|
||||
<p class="grid-item__subtitle">#AABBCC</p>
|
||||
</li>
|
||||
<li class="grid-item">
|
||||
<a class="grid-item__link" href="#">
|
||||
<img class="grid-item__image" src="http://placehold.it/24x24" alt="Icon name">
|
||||
<h2 class="grid-item__title">Icon name</h2>
|
||||
</a>
|
||||
<p class="grid-item__subtitle">#AABBCC</p>
|
||||
</li>
|
||||
<li class="grid-item">
|
||||
<a class="grid-item__link" href="#">
|
||||
<img class="grid-item__image" src="http://placehold.it/24x24" alt="Icon name">
|
||||
<h2 class="grid-item__title">Icon name</h2>
|
||||
</a>
|
||||
<p class="grid-item__subtitle">#AABBCC</p>
|
||||
</li>
|
||||
<li class="grid-item">
|
||||
<a class="grid-item__link" href="#">
|
||||
<img class="grid-item__image" src="http://placehold.it/24x24" alt="Icon name">
|
||||
<h2 class="grid-item__title">Icon name</h2>
|
||||
</a>
|
||||
<p class="grid-item__subtitle">#AABBCC</p>
|
||||
</li>
|
||||
<li class="grid-item">
|
||||
<a class="grid-item__link" href="#">
|
||||
<img class="grid-item__image" src="http://placehold.it/24x24" alt="Icon name">
|
||||
<h2 class="grid-item__title">Icon name</h2>
|
||||
</a>
|
||||
<p class="grid-item__subtitle">#AABBCC</p>
|
||||
</li>
|
||||
<li class="grid-item">
|
||||
<a class="grid-item__link" href="#">
|
||||
<img class="grid-item__image" src="http://placehold.it/24x24" alt="Icon name">
|
||||
<h2 class="grid-item__title">Icon name</h2>
|
||||
</a>
|
||||
<p class="grid-item__subtitle">#AABBCC</p>
|
||||
</li>
|
||||
</ul>
|
||||
</main>
|
||||
<footer role="contentinfo">
|
||||
<footer class="footer" role="contentinfo">
|
||||
<p>A <a href="https://github.com/danleech/simple-icons/blob/master/LICENSE.md">CC0</a> project maintained by <a href="https://twitter.com/bathtype">Dan Leech</a>.</p>
|
||||
<p>Use <a href="https://github.com/danleech/simple-icons">GitHub</a> for requests, corrections and contributions.</p>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
34
_sass/_components.ad.scss
Normal file
34
_sass/_components.ad.scss
Normal file
@ -0,0 +1,34 @@
|
||||
#carbonads {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
a {
|
||||
color: $color-black;
|
||||
}
|
||||
& > span {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
|
||||
.carbon-img {
|
||||
display: block;
|
||||
padding: 1rem 1rem 0.5rem;
|
||||
}
|
||||
|
||||
.carbon-text {
|
||||
display: block;
|
||||
font-size: 0.75rem;
|
||||
line-height: 1rem;
|
||||
margin: 0 auto;
|
||||
max-width: 15rem;
|
||||
}
|
||||
|
||||
.carbon-poweredby {
|
||||
font-size: 0.625rem;
|
||||
font-weight: 700;
|
||||
line-height: 1.5rem;
|
||||
opacity: 0.25;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
15
_sass/_components.footer.scss
Normal file
15
_sass/_components.footer.scss
Normal file
@ -0,0 +1,15 @@
|
||||
.footer {
|
||||
background-color: #EEE;
|
||||
padding: 1.5rem;
|
||||
@media (min-width: 720px) {
|
||||
padding: 3rem;
|
||||
}
|
||||
a {
|
||||
color: $color-black;
|
||||
text-decoration: underline;
|
||||
}
|
||||
p {
|
||||
margin: 0;
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
58
_sass/_components.grid.scss
Normal file
58
_sass/_components.grid.scss
Normal file
@ -0,0 +1,58 @@
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(9rem,1fr));
|
||||
grid-auto-rows: 6rem;
|
||||
grid-column-gap: 0.75rem;
|
||||
grid-row-gap: 0.75rem;
|
||||
grid-auto-flow: dense;
|
||||
list-style: none;
|
||||
margin: 1.5rem;
|
||||
padding: 0;
|
||||
@media (min-width: 720px) {
|
||||
margin: 3rem;
|
||||
}
|
||||
}
|
||||
|
||||
.grid-item {
|
||||
background-color: #757575;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.grid-item--ad {
|
||||
background-color: #EEE;
|
||||
grid-column: -2 / -1;
|
||||
grid-row-end: span 2;
|
||||
height: auto;
|
||||
@media (min-width: 21.75rem) {
|
||||
// 21.75rem is the minimum viewport
|
||||
// width with multiple columns
|
||||
grid-column: -3 / -1;
|
||||
}
|
||||
}
|
||||
|
||||
.grid-item__link {
|
||||
color: $color-white;
|
||||
display: block;
|
||||
padding: 1rem 1rem 0;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.grid-item__image {
|
||||
|
||||
}
|
||||
|
||||
.grid-item__title {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 400;
|
||||
line-height: 1rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.grid-item__subtitle {
|
||||
color: $color-white;
|
||||
font-size: 0.75rem;
|
||||
line-height: 1rem;
|
||||
margin: 0;
|
||||
opacity: 0.5;
|
||||
}
|
||||
@ -1,3 +1,7 @@
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:root {
|
||||
font-size: 100%;
|
||||
}
|
||||
|
||||
@ -5,4 +5,7 @@
|
||||
|
||||
@import "elements";
|
||||
|
||||
@import "components.ad";
|
||||
@import "components.footer";
|
||||
@import "components.grid";
|
||||
@import "components.navbar";
|
||||
|
||||
Loading…
Reference in New Issue
Block a user