kazhnuz/kazhnuz.css
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity
kazhnuz.css/preview.html

248 lines
12 KiB
HTML
Raw Normal View History

chore: rebase on blueskye
2019-10-08 13:06:59 +02:00
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Kazhnuz Space</title>
<!-- meta -->
<meta name="description" content="">
<meta name="author" content="">
<!-- mon icon -->
<link rel="shortcut icon" href="img/favicon.png">
<!-- framework utilisés -->
chore: first broken attempt at adding mod scaling
2019-10-16 14:23:38 +02:00
<link href="https://fonts.googleapis.com/css?family=Amatic+SC&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Work+Sans&display=swap" rel="stylesheet">
chore: use spectre as a base instead of bootstrap
2019-10-09 10:16:47 +02:00
<link href="css/spectre.min.css" rel="stylesheet">
chore: rebase on blueskye
2019-10-08 13:06:59 +02:00
<link href="css/fork-awesome.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<div id="wrapper">
chore: use spectre as a base instead of bootstrap
2019-10-09 10:16:47 +02:00
<header class="container-fluid" id="page-header">
<div class="columns">
<div class="column col-6">
<h1>Blue Sky</h1>
</div>
<div class="column col-md-6">
<nav class="navbar">
<section class="navbar-section">
</section>
<section class="navbar-section">
chore: add future kazhnuz.space links
2019-10-17 16:03:42 +02:00
<a href="..." class="btn btn-link">Blog</a>
<a href="..." class="btn btn-link">Gallerie</a>
<a href="..." class="btn btn-link">A propos</a>
chore: use spectre as a base instead of bootstrap
2019-10-09 10:16:47 +02:00
</section>
</nav>
</div>
chore: rebase on blueskye
2019-10-08 13:06:59 +02:00
</div>
chore: use spectre as a base instead of bootstrap
2019-10-09 10:16:47 +02:00
</header>
chore: rebase on blueskye
2019-10-08 13:06:59 +02:00
feat: rework menus
2019-10-17 14:04:20 +02:00
<section class="container-big">
chore: use spectre as a base instead of bootstrap
2019-10-09 10:16:47 +02:00
<div class="columns">
chore: rebase on blueskye
2019-10-08 13:06:59 +02:00
chore: use spectre as a base instead of bootstrap
2019-10-09 10:16:47 +02:00
<aside class="sidebar column col-3">
chore: rebase on blueskye
2019-10-08 13:06:59 +02:00
feat: rework menus
2019-10-17 14:04:20 +02:00
<section class="card card-info">
chore: rebase on blueskye
2019-10-08 13:06:59 +02:00
<div class="card-header">
<i class="fa fa-fw fa-info"></i>&nbsp; #Inktober2017
</div>
<div class="card-body">
<p>Toutes les publications contenant le mot-clé « <a href="">Inktober2017</a> »</p>
<p>Un mot-clé peut servir à désigner soit l'univers dans laquelle la création se déroule, soit l'objectif dans lequel a été fait la publication (tel que le 100 Thème Challenge)</p>
</div>
</section>
feat: rework menus
2019-10-17 14:04:20 +02:00
<section class="card card-green">
<div class="card-header bg-green">
chore: rebase on blueskye
2019-10-08 13:06:59 +02:00
<i class="fa fa-fw fa-feed"></i>&nbsp; Dernières publications
</div>
feat: rework menus
2019-10-17 14:04:20 +02:00
<div class="card-menu">
<a href="#" class="menu-element">#Inktober2017 - Test</a>
<a href="#" class="menu-element">#Inktober2017 - Test</a>
<a href="#" class="menu-element">#Inktober2017 - Test</a>
chore: rebase on blueskye
2019-10-08 13:06:59 +02:00
</div>
</section>
feat: rework menus
2019-10-17 14:04:20 +02:00
<section class="card card-secondary">
<div class="card-header">
chore: rebase on blueskye
2019-10-08 13:06:59 +02:00
<i class="fa fa-fw fa-folder-open"></i>&nbsp; Catégories
</div>
feat: rework menus
2019-10-17 14:04:20 +02:00
<div class="card-menu">
<a href="#" class="menu-element">
chore: rebase on blueskye
2019-10-08 13:06:59 +02:00
Cras justo odio
feat: rework menus
2019-10-17 14:04:20 +02:00
<span class="menu-label label-primary">14</span>
chore: rebase on blueskye
2019-10-08 13:06:59 +02:00
</a>
feat: rework menus
2019-10-17 14:04:20 +02:00
<a href="#" class="menu-element">Images</a>
<a href="#" class="menu-element">Canard</a>
<a href="#" class="menu-element">Test</a>
<a href="#" class="menu-element">Fak u garon</a>
chore: rebase on blueskye
2019-10-08 13:06:59 +02:00
</div>
</section>
feat: rework menus
2019-10-17 14:04:20 +02:00
<section class="card menu-orange">
<div class="card-header">
chore: rebase on blueskye
2019-10-08 13:06:59 +02:00
<i class="fa fa-fw fa-calendar-o"></i>&nbsp; Archive
</div>
feat: rework menus
2019-10-17 14:04:20 +02:00
<div class="card-menu">
<a href="#" class="menu-element">
2017 <span class="menu-label label-primary">14</span>
chore: rebase on blueskye
2019-10-08 13:06:59 +02:00
</a>
feat: rework menus
2019-10-17 14:04:20 +02:00
<a href="#" class="menu-element">
chore: rebase on blueskye
2019-10-08 13:06:59 +02:00
2016
feat: rework menus
2019-10-17 14:04:20 +02:00
<span class="menu-label label-primary">2</span>
chore: rebase on blueskye
2019-10-08 13:06:59 +02:00
</a>
feat: rework menus
2019-10-17 14:04:20 +02:00
<a href="#" class="menu-element">
chore: rebase on blueskye
2019-10-08 13:06:59 +02:00
2015
feat: rework menus
2019-10-17 14:04:20 +02:00
<span class="menu-label label-primary">3</span>
chore: rebase on blueskye
2019-10-08 13:06:59 +02:00
</a>
</div>
</section>
</aside>
chore: use spectre as a base instead of bootstrap
2019-10-09 10:16:47 +02:00
<div class="column col-9">
chore: rebase on blueskye
2019-10-08 13:06:59 +02:00
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#"><i class="fa fa-fw fa-home"></i>&nbsp; Accueil</a></li>
<li class="breadcrumb-item active" aria-current="page">Catégorie</li>
</ol>
</nav>
<div class="previews-section prev-col-3">
feat: add new preview elements
2019-10-17 15:23:55 +02:00
<article class="card card-preview card-primary">
<a href="#" class="preview-link">
<div class="preview-item">
<div class="preview-content"><p>Proin bibendum felis sit amet nisl iaculis, <strong>vel blandit purus dictum</strong>. Maecenas ullamcorper tortor ac dolor pulvinar, id imperdiet arcu suscipit. Sed posuere lectus eu orci tristique maximus. Nulla facilisi. Aenean sed fermentum nisl. Donec sodales ligula eu est finibus, eu posuere ligula condimentum. Morbi arcu magna, varius id justo ac, aliquam luctus magna. Pellentesque a velit et ipsum euismod congue eget eu sem. <del>Nulla luctus est nec arcu volutpat blandit.</del> Quisque egestas, elit eu tempus tincidunt, mi libero porta purus, eget lobortis metus erat a dolor. Integer ac turpis lacinia, interdum nisl non, feugiat libero.</p></div>
<div class="preview-overlay">
<h1 class="card-header">Exemple titre</h1>
<div class="preview-metadata">
<div class="align-right"><time><small>Le 27/02/2017</small></time></div>
<div class="align-left"><span class="chip chip-primary">video</span></div>
<div class="align-center comment-text">3 commentaires</div>
</div>
</div>
</div>
</a>
</article>
<article class="card card-preview card-primary">
<a href="#" class="preview-link">
<div class="preview-item">
<div class="preview-content"><p>Proin bibendum felis sit amet nisl iaculis, <strong>vel blandit purus dictum</strong>. Maecenas ullamcorper tortor ac dolor pulvinar, id imperdiet arcu suscipit. Sed posuere lectus eu orci tristique maximus. Nulla facilisi. Aenean sed fermentum nisl. Donec sodales ligula eu est finibus, eu posuere ligula condimentum. Morbi arcu magna, varius id justo ac, aliquam luctus magna. Pellentesque a velit et ipsum euismod congue eget eu sem. <del>Nulla luctus est nec arcu volutpat blandit.</del> Quisque egestas, elit eu tempus tincidunt, mi libero porta purus, eget lobortis metus erat a dolor. Integer ac turpis lacinia, interdum nisl non, feugiat libero.</p></div>
<div class="preview-overlay">
<h1 class="card-header">Exemple titre</h1>
<div class="preview-metadata">
<div class="align-right"><time><small>Le 27/02/2017</small></time></div>
<div class="align-left"><span class="chip chip-primary">video</span></div>
<div class="align-center comment-text">3 commentaires</div>
</div>
</div>
</div>
</a>
</article>
<article class="card card-preview card-primary">
<a href="#" class="preview-link">
<div class="preview-item">
<div class="preview-content"><p>Proin bibendum felis sit amet nisl iaculis, <strong>vel blandit purus dictum</strong>. Maecenas ullamcorper tortor ac dolor pulvinar, id imperdiet arcu suscipit. Sed posuere lectus eu orci tristique maximus. Nulla facilisi. Aenean sed fermentum nisl. Donec sodales ligula eu est finibus, eu posuere ligula condimentum. Morbi arcu magna, varius id justo ac, aliquam luctus magna. Pellentesque a velit et ipsum euismod congue eget eu sem. <del>Nulla luctus est nec arcu volutpat blandit.</del> Quisque egestas, elit eu tempus tincidunt, mi libero porta purus, eget lobortis metus erat a dolor. Integer ac turpis lacinia, interdum nisl non, feugiat libero.</p></div>
<div class="preview-overlay">
<h1 class="card-header">Exemple titre</h1>
<div class="preview-metadata">
<div class="align-right"><time><small>Le 27/02/2017</small></time></div>
<div class="align-left"><span class="chip chip-primary">video</span></div>
<div class="align-center comment-text">3 commentaires</div>
</div>
</div>
</div>
</a>
</article>
<article class="card card-preview card-primary">
<a href="#" class="preview-link">
<div class="preview-item">
<div class="preview-content"><p>Proin bibendum felis sit amet nisl iaculis, <strong>vel blandit purus dictum</strong>. Maecenas ullamcorper tortor ac dolor pulvinar, id imperdiet arcu suscipit. Sed posuere lectus eu orci tristique maximus. Nulla facilisi. Aenean sed fermentum nisl. Donec sodales ligula eu est finibus, eu posuere ligula condimentum. Morbi arcu magna, varius id justo ac, aliquam luctus magna. Pellentesque a velit et ipsum euismod congue eget eu sem. <del>Nulla luctus est nec arcu volutpat blandit.</del> Quisque egestas, elit eu tempus tincidunt, mi libero porta purus, eget lobortis metus erat a dolor. Integer ac turpis lacinia, interdum nisl non, feugiat libero.</p></div>
<div class="preview-overlay">
<h1 class="card-header">Exemple titre</h1>
<div class="preview-metadata">
<div class="align-right"><time><small>Le 27/02/2017</small></time></div>
<div class="align-left"><span class="chip chip-primary">video</span></div>
<div class="align-center comment-text">3 commentaires</div>
</div>
</div>
</div>
</a>
</article>
chore: rebase on blueskye
2019-10-08 13:06:59 +02:00
feat: add new preview elements
2019-10-17 15:23:55 +02:00
<article class="card card-preview card-primary">
<a href="#" class="preview-link">
<div class="preview-item">
<div class="preview-content"><p>Proin bibendum felis sit amet nisl iaculis, <strong>vel blandit purus dictum</strong>. Maecenas ullamcorper tortor ac dolor pulvinar, id imperdiet arcu suscipit. Sed posuere lectus eu orci tristique maximus. Nulla facilisi. Aenean sed fermentum nisl. Donec sodales ligula eu est finibus, eu posuere ligula condimentum. Morbi arcu magna, varius id justo ac, aliquam luctus magna. Pellentesque a velit et ipsum euismod congue eget eu sem. <del>Nulla luctus est nec arcu volutpat blandit.</del> Quisque egestas, elit eu tempus tincidunt, mi libero porta purus, eget lobortis metus erat a dolor. Integer ac turpis lacinia, interdum nisl non, feugiat libero.</p></div>
<div class="preview-overlay">
<h1 class="card-header">Exemple titre</h1>
<div class="preview-metadata">
<div class="align-right"><time><small>Le 27/02/2017</small></time></div>
<div class="align-left"><span class="chip chip-primary">video</span></div>
<div class="align-center comment-text">3 commentaires</div>
</div>
</div>
</div>
</a>
</article>
chore: rebase on blueskye
2019-10-08 13:06:59 +02:00
</div>
</div>
</div>
</section>
</div>
<footer class="container">
chore: use spectre as a base instead of bootstrap
2019-10-09 10:16:47 +02:00
<ul class="social">
<li class="social-li"><a class="social-link" href="https://twitter.com/kazhnuz" alt="Twitter"><i class="fa fa-fw fa-twitter"></i></a></li>
<li class="social-li"><a class="social-link" href="https://octodon.social/users/kazhnuz" alt="Mastodon"><i class="fa fa-fw fa-mastodon"></i></a></li>
<li class="social-li"><a class="social-link" href="#" alt="Diaspora"><i class="fa fa-fw fa-diaspora"></i></a></li>
<li class="social-li"><a class="social-link" href="#" alt="DeviantART"><i class="fa fa-fw fa-deviantart"></i></a></li>
<li class="social-li"><a class="social-link" href="#" alt="Github"><i class="fa fa-fw fa-github"></i></a></li>
<li class="social-li"><a class="social-link" href="#" alt="Gitlab"><i class="fa fa-fw fa-gitlab"></i></a></li>
</ul>
<div class="columns">
<div class="column col-md-4">
<p>Ce theme est diffusé sous licence <strong>Creative Common Attribution - Partage à l'Identique 4.0</strong> - hors mention contraire.</p>
<p>Cette licence vous autorise à partager et copier mes travaux, tant que vous me citiez en source, et que vous autorisez la même chose pour les travaux qui en seraient dérivés. N'hésitez pas à partager ! <i style="color:#FF0000" class="fa fa-heart"></i></p>
</div>
<div class="column col-md-4">
<p>Theme réalisé avec le quadriciel <a href="https://getbootstrap.com/">Bootstrap4</a> et la banque d'icone <a href="https://forkawesome.github.io/Fork-Awesome/">Fork-Awesome</a>.</p>
</div>
<div class="column col-md-4">
<p>Lorem Ipsum.</p>
</div>
chore: rebase on blueskye
2019-10-08 13:06:59 +02:00
</div>
chore: use spectre as a base instead of bootstrap
2019-10-09 10:16:47 +02:00
</footer>
chore: rebase on blueskye
2019-10-08 13:06:59 +02:00
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Reference in a new issue Copy permalink