feat: add first draft of admin area
This commit is contained in:
Kazhnuz
parent
d14c8cb330
commit
b1a273a6b4
|
|
@ -0,0 +1,190 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Blue Sky, by Kazhnuz</title>
|
||||
|
||||
<!-- meta -->
|
||||
<meta name="description" content="">
|
||||
<meta name="author" content="">
|
||||
|
||||
<!-- mon icon -->
|
||||
<link rel="shortcut icon" href="img/favicon.png">
|
||||
|
||||
<!-- framework utilisés -->
|
||||
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,400i,600,800&display=swap" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css?family=Amatic+SC&display=swap" rel="stylesheet">
|
||||
<link href="dep/spectre/css/spectre.min.css" rel="stylesheet">
|
||||
<link href="dep/fork-awesome/css/fork-awesome.css" rel="stylesheet">
|
||||
|
||||
<link href="style.css" rel="stylesheet">
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="wrapper">
|
||||
<header id="page-header">
|
||||
<div class="columns">
|
||||
<div class="column col-6">
|
||||
<h1><img src="img/logo.png" alt="Kazhnuz"/></h1>
|
||||
</div>
|
||||
|
||||
<div class="column col-md-6">
|
||||
<nav class="navbar">
|
||||
<section class="navbar-section">
|
||||
|
||||
</section>
|
||||
<section class="navbar-section">
|
||||
<a href="blog.html" class="btn btn-link">Blog</a>
|
||||
<a href="crea.html" class="btn btn-link">Gallerie</a>
|
||||
<a href="apropos.html" class="btn btn-link">A propos</a>
|
||||
</section>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
|
||||
<div class="container-blog" id="page-content">
|
||||
|
||||
<main class="mainpane">
|
||||
<nav aria-label="breadcrumb">
|
||||
<ol class="breadcrumb">
|
||||
<li class="breadcrumb-item"><a href="#">kazhnuz.space</a></li><li class="breadcrumb-item" aria-current="page"><span class="active">A propos</span></li>
|
||||
</ol>
|
||||
</nav>
|
||||
|
||||
<article class="main-article">
|
||||
<h1>A propos</h1>
|
||||
|
||||
<p>Bonjour et bienvenue sur kazhnuz.space. Je suis Kazhnuz, juste quelqu'un qui s'amuse à faire des petites créations et à les partager sur internet. Ce site est mon site créatif, où je publie tout cela (avec mon compte deviantART). Sur cette page, j'aimerais un peu me présenter, mes productions, ma vision de la création, etc.</p>
|
||||
|
||||
<p>Bref, bienvenue dans la page "à propos", que j'aurais aussi pu nommer la page "égo-trip" :D</p>
|
||||
|
||||
<h2>Yep, je suis un.e créatif.ve, deal with it.</h2>
|
||||
|
||||
<p>J'ai appris en autodidacte. Mon orthographe est pas parfaite. Je suis loin d'être excellent en scénarisation. Mes design ont des bugs, et sont pas hyper imaginatifs. Mes jeux-vidéos seront souvent assez classiques. Je ne révolutionnerais rien. Mes œuvres sont politiquement correct et visent à célébrer la diversité. De plus, tu pourras pleins de fois décrire ce que j'ai fais avec une série de référence à TVTropes.</p>
|
||||
|
||||
<p><em>Je fais du "divertissement".</em></p>
|
||||
|
||||
<p>Mais ouais, malgré tout cela, je me dis être un.e créateurice, un.e creatif.ve. Et je m'en bat les courges si tu considères que je ne mérite pas ce terme.</p>
|
||||
|
||||
<p>Toute personne qui créer est un créateur, un artiste. Qu'il soit un grand artiste encensé par une élite, le concepteur de quelque chose adoré par les masses, ou un petit créateur. Tous méritent ce titre. Tous ont une vision. Qu'elle soit commune ou rare, elle a une valeur. Qu'il débute ou est accompli. Être artiste est un processus constant d'évolution, de changement. Débuter, ne pas faire des trucs parfait fait partie du processus.</p>
|
||||
|
||||
<p>Cela ne veut pas dire que mes créations ou que ce que je fais serait non-criticable. On peut me critiquer, et j'accepte volontier les critiques constructives. Cela veut dire qu'avec tout mes défauts, malgré le fait que je suis dans un processus pour m'améliorer, j'ai l'outrecuidance de me considérer comme un créateur. Parce que j'estime qu'à partir du moment où l'on fait des productions artistiques, on en est un, et qu'il n'y a aucune prétention à le dire.</p>
|
||||
|
||||
<p>Je dis notamment cela pour tous les artistes qui font un gros syndrome de l'imposteur. Vous êtes des artistes. Cœur sur vous.</p>
|
||||
|
||||
<h3>Creative Common</h3>
|
||||
|
||||
<p>Une particularité de ce blog est qu'une majeure produit des contenus que je place ici sont diffusés sous diverses variations de <a href="http://creativecommons.fr/licences/">la licence <em>Creative Common</em></a>. Le plus souvent, la licence choisie est celle Attribution - Partage à l'Identique. Cela signifie que vous pouvez vous baser sur mon travail, tant que vous me créditez et partager tout travail dérivé dans les mêmes conditions - c'est à dire sous la même licence. C'est ce qu'on appelle un copyleft.</p>
|
||||
|
||||
<p>De plus, ce site et mes créations sont réalisées presque entièrement à l'aide d'outil libre et open-source (voir <a href="https://kazhnuz.space/index.php?static9/remerciements">remerciements</a>).</p>
|
||||
|
||||
<p>Ces choix sont des choix <em>personnels</em>, liés à mon expérience de l'art et ma vision de ce que je veux faire avec mes oeuvres. Je n'estime pas que ces choix doivent être faits par tout.e.s, ni que c'est une vision universelle. Pour moi, chaque artiste devrait être libre de la manière dont iel produit et vis son art. Cette liberté inclue celle de vouloir/pouvoir protéger ses créations et de ne pas vouloir qu'elles soient réutilisées. J'estime de ce fait que je n'ai pas le droit d'imposer ma vision à qui que ce soit.</p>
|
||||
|
||||
<p>De mon côté, le choix du copyleft est fait pour deux principales raisons : </p>
|
||||
|
||||
<p>La première est que je ne vis pas de ce que je créer. Je suis effectivement développeur en informatique le jour, et je préfère garder la création uniquement comme un hobby, afin de ne pas subir de contraintes par rapport à ce que je fais. Je n'ai pas envie d'entrer dans le monde "professionnel" de l'art à cause de la pression qu'on peut y trouver, et des rapports de dominations qu'on peut y trouver envers les artistes. En cela, diffuser mes créations sous licence libres fait partie d'une volonté de garder aussi MA liberté, que j'estime que je n'aurais plus si je créais de manière plus "pro".</p>
|
||||
|
||||
<p>De plus, j'estime que mes créations sont déjà le produit de modification, reprise et remixe d'oeuvre antérieur, que ce soit directement (en reprenant des éléments venant du domaine public et d'autres créations libres) et de beaucoup d'inspiration d'autres auteurs. Je n'aurais jamais pu créer quoi que ce soit sans toutes ces bases qui m'ont permis d'évoluer et de créer mes propres univers. C'est pour cela que je diffuse aussi mes oeuvres sous copyleft : c'est ma contribution à un univers qui m'offre bien plus de possibilité que j'en aurais eu sans.</p>
|
||||
|
||||
<p>Et j'avoue que j'espère que d'autres vont pouvoir s'inspirer et avoir envie de créer à partir de ce que j'ai fait. Si par hasard vous faisiez quelque chose à partir de quelque chose que vous voyez ici, ce serait d'ailleurs cool de me le montrer, je serais trop content.e :3 !</p>
|
||||
|
||||
<h2>Ma liste de choses à faire</h2>
|
||||
|
||||
<p>Voici quelques rêves que j'ai en tant que créatif.ve.</p>
|
||||
|
||||
<ul>
|
||||
<li>Écrire les paroles d'un opéra-rock complet</li>
|
||||
<li>Faire une collaboration avec eux, genre pleins d'artiste.</li>
|
||||
<li>Terminer un roman et le publier.</li>
|
||||
<li>Terminer un jeu-vidéo.</li>
|
||||
<li>Écrire une bande-dessiné.</li>
|
||||
<li>Écrire pour une des licences de mon enfance (Sonic, Pokémon, Spirou et Fantasio…).</li>
|
||||
</ul>
|
||||
|
||||
</article>
|
||||
|
||||
</main>
|
||||
|
||||
<section class="sidebar">
|
||||
<div class="card card-primary">
|
||||
<div class="card-header"><i class="fa fa-rss"></i> Publications</div>
|
||||
<div class="card-menu">
|
||||
<a href="#" class="menu-element"><span class="trim-that">#WRITOBER2019 - Ring</span></a>
|
||||
<a href="#" class="menu-element"><span class="trim-that">Petite histoire uchronique du système solaire (4)</span></a>
|
||||
<a href="#" class="menu-element"><span class="trim-that">#WRITOBER2019 - Ring</span></a>
|
||||
<a href="#" class="menu-element"><span class="trim-that">#WRITOBER2019 - Ring</span></a>
|
||||
<a href="#" class="menu-element"><span class="trim-that">#WRITOBER2019 - Ring</span></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card card-primary">
|
||||
<div class="card-header"><i class="fa fa-folder"></i> Catégories</div>
|
||||
<div class="card-menu">
|
||||
<a href="crea-category.html" class="menu-element">Nouvelles et formats courts <span class="menu-label label-secondary">40</span></a>
|
||||
<a href="crea-category.html" class="menu-element">Contes et légendes <span class="menu-label label-secondary">11</span></a>
|
||||
<a href="crea-category.html" class="menu-element">Poèmes <span class="menu-label label-secondary">11</span></a>
|
||||
<a href="crea-category.html" class="menu-element">Romans <span class="menu-label label-secondary">0</span></a>
|
||||
<a href="crea-category.html" class="menu-element">Logo et Design <span class="menu-label label-secondary">0</span></a>
|
||||
<a href="crea-category.html" class="menu-element">Mapping et Pixel Art <span class="menu-label label-secondary">0</span></a>
|
||||
<div class="menu-divider">FICHES</div>
|
||||
<a href="#" class="menu-element">Univers <span class="menu-label label-secondary">4</span></a>
|
||||
<a href="#" class="menu-element">Personnages <span class="menu-label label-secondary">uwu</span></a>
|
||||
<div class="menu-divider">BLOG</div>
|
||||
<a href="blog-category.html" class="menu-element">Niouzes site et perso <span class="menu-label label-secondary">2</span></a>
|
||||
<a href="blog-category.html" class="menu-element">Réflexions et pensées <span class="menu-label label-secondary">0</span></a>
|
||||
<a href="blog-category.html" class="menu-element">Militantisme <span class="menu-label label-secondary">4</span></a>
|
||||
<a href="blog-category.html" class="menu-element">Conseils et partages <span class="menu-label label-secondary">-1</span></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card card-primary">
|
||||
<div class="card-header"><i class="fa fa-calendar-o"></i> Archives</div>
|
||||
<div class="card-menu">
|
||||
<a href="#" class="menu-element">Octobre 2019 <span class="menu-label label-secondary">1</span></a>
|
||||
<a href="#" class="menu-element">2018 <span class="menu-label label-secondary">3</span></a>
|
||||
<a href="#" class="menu-element">2017 <span class="menu-label label-secondary">50</span></a>
|
||||
<a href="#" class="menu-element">2016 <span class="menu-label label-secondary">8</span></a>
|
||||
<a href="#" class="menu-element">2015 <span class="menu-label label-secondary">2</span></a>
|
||||
<a href="#" class="menu-element">2010 - 2014 <span class="menu-label label-secondary">27</span></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<footer>
|
||||
<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">
|
||||
<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">
|
||||
<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">
|
||||
<p>Lorem Ipsum.</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Insert title here</title>
|
||||
<link rel="stylesheet" href="../dep/bootstrap/css/bootstrap.min.css">
|
||||
<link rel="stylesheet" href="../dep/fork-awesome/css/fork-awesome.min.css">
|
||||
<link rel="stylesheet" href="style.css">
|
||||
|
||||
<script src="jquery/jquery.js"></script>
|
||||
<script src="bootstrap/js/bootstrap.min.js"></script>
|
||||
<script src="script.js"></script>
|
||||
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div id="main-area">
|
||||
<nav class="navbar navbar-expand-lg navbar-light bg-light mb-4">
|
||||
<a class="navbar-brand" href="#">ESPACE ADMIN</a>
|
||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
|
||||
<div class="collapse navbar-collapse" id="navbarSupportedContent">
|
||||
<span class="navbar-text mr-auto">
|
||||
Connecté en tant que Kazhnuz
|
||||
</span>
|
||||
<ul class="navbar-nav my-2 my-lg-0">
|
||||
<li class="nav-item">
|
||||
<a class="btn btn-danger" href="#">Déconnexion</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="container">
|
||||
<!-- debut de la partie modifiable -->
|
||||
|
||||
|
||||
<!-- fin de la partie modifiable -->
|
||||
</div>
|
||||
<nav class="nav justify-content-end">
|
||||
<span class="nav-link disabled">Created with <i class="text-danger fa fa-heart"></i> with Bootstrap4 and Fork-Awesome</span>
|
||||
</nav>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,225 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Blue Sky, by Kazhnuz</title>
|
||||
|
||||
<!-- meta -->
|
||||
<meta name="description" content="">
|
||||
<meta name="author" content="">
|
||||
|
||||
<!-- mon icon -->
|
||||
<link rel="shortcut icon" href="img/favicon.png">
|
||||
|
||||
<!-- framework utilisés -->
|
||||
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,400i,600,800&display=swap" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css?family=Amatic+SC&display=swap" rel="stylesheet">
|
||||
<link href="dep/spectre/css/spectre.min.css" rel="stylesheet">
|
||||
<link href="dep/fork-awesome/css/fork-awesome.css" rel="stylesheet">
|
||||
|
||||
<link href="style.css" rel="stylesheet">
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="wrapper">
|
||||
|
||||
<header id="page-header">
|
||||
<div class="columns">
|
||||
<div class="column col-6">
|
||||
<h1><img src="img/logo.png" alt="Kazhnuz"/></h1>
|
||||
</div>
|
||||
|
||||
<div class="column col-md-6">
|
||||
<nav class="navbar">
|
||||
<section class="navbar-section">
|
||||
|
||||
</section>
|
||||
<section class="navbar-section">
|
||||
<a href="blog.html" class="btn btn-link">Blog</a>
|
||||
<a href="crea.html" class="btn btn-link">Gallerie</a>
|
||||
<a href="apropos.html" class="btn btn-link">A propos</a>
|
||||
</section>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
|
||||
<div class="container-blog" id="page-content">
|
||||
|
||||
<main class="mainpane">
|
||||
<nav aria-label="breadcrumb">
|
||||
<ol class="breadcrumb">
|
||||
<li class="breadcrumb-item"><a href="index.html">kazhnuz.space</a></li><li class="breadcrumb-item"><a href="#">Contenus</a></li><li class="breadcrumb-item" aria-current="page"><span class="active">Article exemple</span></li>
|
||||
</ol>
|
||||
</nav>
|
||||
|
||||
|
||||
<div class="toast toast-warning" role="toast">
|
||||
<p>Attention, cet article a été importé automatiquement des mes précédants blogs/journaux/etc. Il s'agit donc donc de quelque chose d'ancien, et qui n'est peut-être plus pertinent.</p>
|
||||
</div>
|
||||
|
||||
<article class="main-article">
|
||||
<h1>Nom de l'article :</h1>
|
||||
|
||||
<ul>
|
||||
<li>1 - Titre de niveau 3
|
||||
<ul>
|
||||
<li>1.1 - Titre de niveau 4</li>
|
||||
<li>1.2 - Titre de niveau 4</li>
|
||||
<li>1.3 - Titre de niveau 4</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>2 - Titre de niveau 3</li>
|
||||
</ul>
|
||||
|
||||
<h2>Introduction : Lorem Ipsum</h2>
|
||||
|
||||
<p><em>Lorem ipsum dolor sit amet<sup><a href="#1">[1]</a></sup>, consectetur adipiscing elit. Praesent varius ullamcorper diam, non sagittis lectus rutrum id. Integer eros urna, egestas et libero a, finibus egestas odio. Nunc vel hendrerit quam, eget malesuada sem. Sed hendrerit ligula pharetra leo aliquam volutpat. Integer auctor urna ac convallis laoreet. Nunc vestibulum ipsum sed tortor aliquam porta. Cras nunc est, lobortis in est at, rhoncus auctor nunc. Sed dignissim erat non sollicitudin ultricies. Integer vel consectetur urna. Etiam fermentum ligula vitae nunc viverra, a fringilla sem aliquam. Suspendisse potenti. Morbi sem mi, malesuada quis odio vitae, suscipit congue metus. Sed ut ullamcorper urna, eget molestie est. Sed pulvinar justo ac urna consectetur fringilla. Donec tristique eget leo sit amet mollis.</em></p>
|
||||
|
||||
<p class="align-center"><a href="#" class="btn btn-warning">Télécharger ce thème</a></p>
|
||||
|
||||
<h2>Contenu : Lorem Ipsum. Ceci est un titre long afin de tester comment la longueur d'un titre peut poser soucis d'un point de vue de l'alignement vertical.</h2>
|
||||
|
||||
<h3>Titre de niveau 3</h3>
|
||||
<h4>Titre de niveau 4</h4>
|
||||
<h4>Titre de niveau 4</h4>
|
||||
<h4>Titre de niveau 4</h4>
|
||||
<h3>Titre de niveau 3</h3>
|
||||
|
||||
<p>Proin bibendum felis sit amet nisl iaculis, <strong>vel blandit purus dictum</strong>. Maecenas ullamcorper tortor ac dolor pulvinar, id imperdiet arcu suscipit. <mark>Sed posuere lectus eu orci tristique maximus</mark>. 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>
|
||||
|
||||
<blockquote><p>Cras malesuada, metus at viverra molestie, mi ligula sodales tellus, vitae facilisis ante est vitae dolor. Donec feugiat non est eget elementum. Nullam in erat et arcu tincidunt maximus. Nullam nibh orci, egestas eu ex non, viverra pretium magna. Proin convallis, risus eu condimentum luctus, ante dui mattis eros, a varius risus diam sed nisl. Ut malesuada ipsum in augue accumsan ullamcorper. Phasellus efficitur augue in venenatis sollicitudin. Integer at consectetur arcu.</p></blockquote>
|
||||
|
||||
<pre><code>Vivamus tincidunt dolor quis consectetur dapibus.
|
||||
Ut metus risus, lobortis non venenatis in, ultricies a orci.
|
||||
In suscipit ante et aliquet pretium.
|
||||
Integer diam dui, rutrum vitae risus ultricies, varius vulputate magna.
|
||||
In id suscipit elit.</code></pre>
|
||||
|
||||
|
||||
<p id="1">[1] : Sed et odio volutpat, convallis est et, interdum sapien.</p>
|
||||
</article>
|
||||
|
||||
<div class="share-buttons align-right">
|
||||
<a href="#" class="btn btn-facebook"><i class="fa fa-fw fa-facebook"></i></a>
|
||||
<a href="#" class="btn btn-twitter"><i class="fa fa-fw fa-twitter"></i></a>
|
||||
<a href="#" class="btn btn-googleplus"><i class="fa fa-fw fa-google-plus"></i></a>
|
||||
<a href="#" class="btn btn-diaspora"><i class="fa fa-fw fa-diaspora"></i></a>
|
||||
<a href="#" class="btn btn-mastodon"><i class="fa fa-fw fa-mastodon"></i></a>
|
||||
<a href="#" class="btn btn-light"><i class="fa fa-fw fa-envelope"></i></a>
|
||||
</div>
|
||||
|
||||
<section class="card card-noheader">
|
||||
<div class="author-area">
|
||||
<img src="img/avatar.png" class="author-avatar" alt="...">
|
||||
<div class="author-metadata">
|
||||
<div class="author-pseudo">Écrit par <a href="" >Pseudo</a></div>
|
||||
<small class="author-date">Le vendredi 19 septembre 2014 à 07:16</small>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="commentaires">
|
||||
<h1>Commentaires :</h1>
|
||||
|
||||
<article class="card comment">
|
||||
<div class="author-area">
|
||||
<img src="img/avatar.png" class="author-avatar" alt="...">
|
||||
<div class="author-metadata">
|
||||
<div class="author-pseudo">Écrit par <a href="" >Pseudo</a></div>
|
||||
<small class="author-date">Le vendredi 19 septembre 2014 à 07:16</small>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p><em>Lorem ipsum dolor sit amet<sup><a href="#1">[1]</a></sup>, consectetur adipiscing elit. Praesent varius ullamcorper diam, non sagittis lectus rutrum id. Integer eros urna, egestas et libero a, finibus egestas odio. Nunc vel hendrerit quam, eget malesuada sem. Sed hendrerit ligula pharetra leo aliquam volutpat. Integer auctor urna ac convallis laoreet. Nunc vestibulum ipsum sed tortor aliquam porta. Cras nunc est, lobortis in est at, rhoncus auctor nunc. Sed dignissim erat non sollicitudin ultricies. Integer vel consectetur urna. Etiam fermentum ligula vitae nunc viverra, a fringilla sem aliquam. Suspendisse potenti. Morbi sem mi, malesuada quis odio vitae, suscipit congue metus. Sed ut ullamcorper urna, eget molestie est. Sed pulvinar justo ac urna consectetur fringilla. Donec tristique eget leo sit amet mollis.</em></p>
|
||||
<p>Proin bibendum felis sit amet nisl iaculis, <strong>vel blandit purus dictum</strong>. Maecenas ullamcorper tortor ac dolor pulvinar, id imperdiet arcu suscipit. <mark>Sed posuere lectus eu orci tristique maximus</mark>. 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>
|
||||
</article>
|
||||
</section>
|
||||
|
||||
|
||||
</main>
|
||||
|
||||
<section class="sidebar">
|
||||
<div class="card card-primary">
|
||||
<div class="card-header"><i class="fa fa-rss"></i> Publications</div>
|
||||
<div class="card-menu">
|
||||
<a href="#" class="menu-element"><span class="trim-that">#WRITOBER2019 - Ring</span></a>
|
||||
<a href="#" class="menu-element"><span class="trim-that">Petite histoire uchronique du système solaire (4)</span></a>
|
||||
<a href="#" class="menu-element"><span class="trim-that">#WRITOBER2019 - Ring</span></a>
|
||||
<a href="#" class="menu-element"><span class="trim-that">#WRITOBER2019 - Ring</span></a>
|
||||
<a href="#" class="menu-element"><span class="trim-that">#WRITOBER2019 - Ring</span></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card card-primary">
|
||||
<div class="card-header"><i class="fa fa-folder"></i> Catégories</div>
|
||||
<div class="card-menu">
|
||||
<a href="crea-category.html" class="menu-element">Nouvelles et formats courts <span class="menu-label label-secondary">40</span></a>
|
||||
<a href="crea-category.html" class="menu-element">Contes et légendes <span class="menu-label label-secondary">11</span></a>
|
||||
<a href="crea-category.html" class="menu-element">Poèmes <span class="menu-label label-secondary">11</span></a>
|
||||
<a href="crea-category.html" class="menu-element">Romans <span class="menu-label label-secondary">0</span></a>
|
||||
<a href="crea-category.html" class="menu-element">Logo et Design <span class="menu-label label-secondary">0</span></a>
|
||||
<a href="crea-category.html" class="menu-element">Mapping et Pixel Art <span class="menu-label label-secondary">0</span></a>
|
||||
<div class="menu-divider">FICHES</div>
|
||||
<a href="#" class="menu-element">Univers <span class="menu-label label-secondary">4</span></a>
|
||||
<a href="#" class="menu-element">Personnages <span class="menu-label label-secondary">uwu</span></a>
|
||||
<div class="menu-divider">BLOG</div>
|
||||
<a href="blog-category.html" class="menu-element">Niouzes site et perso <span class="menu-label label-secondary">2</span></a>
|
||||
<a href="blog-category.html" class="menu-element">Réflexions et pensées <span class="menu-label label-secondary">0</span></a>
|
||||
<a href="blog-category.html" class="menu-element">Militantisme <span class="menu-label label-secondary">4</span></a>
|
||||
<a href="blog-category.html" class="menu-element">Conseils et partages <span class="menu-label label-secondary">-1</span></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card card-primary">
|
||||
<div class="card-header"><i class="fa fa-calendar-o"></i> Archives</div>
|
||||
<div class="card-menu">
|
||||
<a href="#" class="menu-element">Octobre 2019 <span class="menu-label label-secondary">1</span></a>
|
||||
<a href="#" class="menu-element">2018 <span class="menu-label label-secondary">3</span></a>
|
||||
<a href="#" class="menu-element">2017 <span class="menu-label label-secondary">50</span></a>
|
||||
<a href="#" class="menu-element">2016 <span class="menu-label label-secondary">8</span></a>
|
||||
<a href="#" class="menu-element">2015 <span class="menu-label label-secondary">2</span></a>
|
||||
<a href="#" class="menu-element">2010 - 2014 <span class="menu-label label-secondary">27</span></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<footer>
|
||||
<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">
|
||||
<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">
|
||||
<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">
|
||||
<p>Lorem Ipsum.</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="js/trim.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,186 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Blue Sky, by Kazhnuz</title>
|
||||
|
||||
<!-- meta -->
|
||||
<meta name="description" content="">
|
||||
<meta name="author" content="">
|
||||
|
||||
<!-- mon icon -->
|
||||
<link rel="shortcut icon" href="img/favicon.png">
|
||||
|
||||
<!-- framework utilisés -->
|
||||
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,400i,600,800&display=swap" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css?family=Amatic+SC&display=swap" rel="stylesheet">
|
||||
<link href="dep/spectre/css/spectre.min.css" rel="stylesheet">
|
||||
<link href="dep/fork-awesome/css/fork-awesome.css" rel="stylesheet">
|
||||
|
||||
<link href="style.css" rel="stylesheet">
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="wrapper">
|
||||
|
||||
<header id="page-header">
|
||||
<div class="columns">
|
||||
<div class="column col-6">
|
||||
<h1><img src="img/logo.png" alt="Kazhnuz"/></h1>
|
||||
</div>
|
||||
|
||||
<div class="column col-md-6">
|
||||
<nav class="navbar">
|
||||
<section class="navbar-section">
|
||||
|
||||
</section>
|
||||
<section class="navbar-section">
|
||||
<a href="blog.html" class="btn btn-link">Blog</a>
|
||||
<a href="crea.html" class="btn btn-link">Gallerie</a>
|
||||
<a href="apropos.html" class="btn btn-link">A propos</a>
|
||||
</section>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
|
||||
<div class="container-blog" id="page-content">
|
||||
|
||||
<main class="mainpane">
|
||||
<nav aria-label="breadcrumb">
|
||||
<ol class="breadcrumb">
|
||||
<li class="breadcrumb-item"><a href="index.html">kazhnuz.space</a></li><li class="breadcrumb-item"><a href="#">Contenus</a></li><li class="breadcrumb-item" aria-current="page"><span class="active">Article exemple</span></li>
|
||||
</ol>
|
||||
</nav>
|
||||
|
||||
|
||||
<div class="card card-primary">
|
||||
<div class="card-header"><h1>Test article de blog</h1></div>
|
||||
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Repudiandae rerum, sapiente possimus ullam laboriosam dolorum dicta quas laborum maiores, accusantium eveniet sunt, dolor necessitatibus quo! Ducimus a consequuntur vero sapiente.</p>
|
||||
|
||||
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Repudiandae rerum, sapiente possimus ullam laboriosam dolorum dicta quas laborum maiores, accusantium eveniet sunt, dolor necessitatibus quo! Ducimus a consequuntur vero sapiente.</p>
|
||||
<p class="align-center"> <a href="blog-article.html" class="btn btn-readmore">Lire l'article</a> </p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="card card-primary">
|
||||
<div class="card-header"><h1>Test article de blog</h1></div>
|
||||
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Repudiandae rerum, sapiente possimus ullam laboriosam dolorum dicta quas laborum maiores, accusantium eveniet sunt, dolor necessitatibus quo! Ducimus a consequuntur vero sapiente.</p>
|
||||
|
||||
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Repudiandae rerum, sapiente possimus ullam laboriosam dolorum dicta quas laborum maiores, accusantium eveniet sunt, dolor necessitatibus quo! Ducimus a consequuntur vero sapiente.</p>
|
||||
<p class="align-center"> <a href="blog-article.html" class="btn btn-readmore">Lire l'article</a> </p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="card card-primary">
|
||||
<div class="card-header"><h1>Test article de blog</h1></div>
|
||||
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Repudiandae rerum, sapiente possimus ullam laboriosam dolorum dicta quas laborum maiores, accusantium eveniet sunt, dolor necessitatibus quo! Ducimus a consequuntur vero sapiente.</p>
|
||||
|
||||
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Repudiandae rerum, sapiente possimus ullam laboriosam dolorum dicta quas laborum maiores, accusantium eveniet sunt, dolor necessitatibus quo! Ducimus a consequuntur vero sapiente.</p>
|
||||
<p class="align-center"> <a href="blog-article.html" class="btn btn-readmore">Lire l'article</a> </p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="card card-primary">
|
||||
<div class="card-header"><h1>Test article de blog</h1></div>
|
||||
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Repudiandae rerum, sapiente possimus ullam laboriosam dolorum dicta quas laborum maiores, accusantium eveniet sunt, dolor necessitatibus quo! Ducimus a consequuntur vero sapiente.</p>
|
||||
|
||||
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Repudiandae rerum, sapiente possimus ullam laboriosam dolorum dicta quas laborum maiores, accusantium eveniet sunt, dolor necessitatibus quo! Ducimus a consequuntur vero sapiente.</p>
|
||||
<p class="align-center"> <a href="blog-article.html" class="btn btn-readmore">Lire l'article</a> </p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="card card-primary">
|
||||
<div class="card-header"><h1>Test article de blog</h1></div>
|
||||
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Repudiandae rerum, sapiente possimus ullam laboriosam dolorum dicta quas laborum maiores, accusantium eveniet sunt, dolor necessitatibus quo! Ducimus a consequuntur vero sapiente.</p>
|
||||
|
||||
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Repudiandae rerum, sapiente possimus ullam laboriosam dolorum dicta quas laborum maiores, accusantium eveniet sunt, dolor necessitatibus quo! Ducimus a consequuntur vero sapiente.</p>
|
||||
<p class="align-center"> <a href="blog-article.html" class="btn btn-readmore">Lire l'article</a> </p>
|
||||
</div>
|
||||
|
||||
|
||||
</main>
|
||||
|
||||
<section class="sidebar">
|
||||
<div class="card card-primary">
|
||||
<div class="card-header"><i class="fa fa-rss"></i> Publications</div>
|
||||
<div class="card-menu">
|
||||
<a href="#" class="menu-element"><span class="trim-that">#WRITOBER2019 - Ring</span></a>
|
||||
<a href="#" class="menu-element"><span class="trim-that">Petite histoire uchronique du système solaire (4)</span></a>
|
||||
<a href="#" class="menu-element"><span class="trim-that">#WRITOBER2019 - Ring</span></a>
|
||||
<a href="#" class="menu-element"><span class="trim-that">#WRITOBER2019 - Ring</span></a>
|
||||
<a href="#" class="menu-element"><span class="trim-that">#WRITOBER2019 - Ring</span></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card card-primary">
|
||||
<div class="card-header"><i class="fa fa-folder"></i> Catégories</div>
|
||||
<div class="card-menu">
|
||||
<a href="crea-category.html" class="menu-element">Nouvelles et formats courts <span class="menu-label label-secondary">40</span></a>
|
||||
<a href="crea-category.html" class="menu-element">Contes et légendes <span class="menu-label label-secondary">11</span></a>
|
||||
<a href="crea-category.html" class="menu-element">Poèmes <span class="menu-label label-secondary">11</span></a>
|
||||
<a href="crea-category.html" class="menu-element">Romans <span class="menu-label label-secondary">0</span></a>
|
||||
<a href="crea-category.html" class="menu-element">Logo et Design <span class="menu-label label-secondary">0</span></a>
|
||||
<a href="crea-category.html" class="menu-element">Mapping et Pixel Art <span class="menu-label label-secondary">0</span></a>
|
||||
<div class="menu-divider">FICHES</div>
|
||||
<a href="#" class="menu-element">Univers <span class="menu-label label-secondary">4</span></a>
|
||||
<a href="#" class="menu-element">Personnages <span class="menu-label label-secondary">uwu</span></a>
|
||||
<div class="menu-divider">BLOG</div>
|
||||
<a href="blog-category.html" class="menu-element">Niouzes site et perso <span class="menu-label label-secondary">2</span></a>
|
||||
<a href="blog-category.html" class="menu-element">Réflexions et pensées <span class="menu-label label-secondary">0</span></a>
|
||||
<a href="blog-category.html" class="menu-element">Militantisme <span class="menu-label label-secondary">4</span></a>
|
||||
<a href="blog-category.html" class="menu-element">Conseils et partages <span class="menu-label label-secondary">-1</span></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card card-primary">
|
||||
<div class="card-header"><i class="fa fa-calendar-o"></i> Archives</div>
|
||||
<div class="card-menu">
|
||||
<a href="#" class="menu-element">Octobre 2019 <span class="menu-label label-secondary">1</span></a>
|
||||
<a href="#" class="menu-element">2018 <span class="menu-label label-secondary">3</span></a>
|
||||
<a href="#" class="menu-element">2017 <span class="menu-label label-secondary">50</span></a>
|
||||
<a href="#" class="menu-element">2016 <span class="menu-label label-secondary">8</span></a>
|
||||
<a href="#" class="menu-element">2015 <span class="menu-label label-secondary">2</span></a>
|
||||
<a href="#" class="menu-element">2010 - 2014 <span class="menu-label label-secondary">27</span></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<footer>
|
||||
<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">
|
||||
<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">
|
||||
<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">
|
||||
<p>Lorem Ipsum.</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="js/trim.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,193 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Blue Sky, by Kazhnuz</title>
|
||||
|
||||
<!-- meta -->
|
||||
<meta name="description" content="">
|
||||
<meta name="author" content="">
|
||||
|
||||
<!-- mon icon -->
|
||||
<link rel="shortcut icon" href="img/favicon.png">
|
||||
|
||||
<!-- framework utilisés -->
|
||||
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,400i,600,800&display=swap" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css?family=Amatic+SC&display=swap" rel="stylesheet">
|
||||
<link href="dep/spectre/css/spectre.min.css" rel="stylesheet">
|
||||
<link href="dep/fork-awesome/css/fork-awesome.css" rel="stylesheet">
|
||||
|
||||
<link href="style.css" rel="stylesheet">
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="wrapper">
|
||||
|
||||
<header id="page-header">
|
||||
<div class="columns">
|
||||
<div class="column col-6">
|
||||
<h1><img src="img/logo.png" alt="Kazhnuz"/></h1>
|
||||
</div>
|
||||
|
||||
<div class="column col-md-6">
|
||||
<nav class="navbar">
|
||||
<section class="navbar-section">
|
||||
|
||||
</section>
|
||||
<section class="navbar-section">
|
||||
<a href="blog.html" class="btn btn-link">Blog</a>
|
||||
<a href="crea.html" class="btn btn-link">Gallerie</a>
|
||||
<a href="apropos.html" class="btn btn-link">A propos</a>
|
||||
</section>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
|
||||
<div class="container-blog" id="page-content">
|
||||
|
||||
<main class="mainpane">
|
||||
<nav aria-label="breadcrumb">
|
||||
<ol class="breadcrumb">
|
||||
<li class="breadcrumb-item"><a href="index.html">kazhnuz.space</a></li><li class="breadcrumb-item"><a href="#">Contenus</a></li><li class="breadcrumb-item" aria-current="page"><span class="active">Article exemple</span></li>
|
||||
</ol>
|
||||
</nav>
|
||||
|
||||
|
||||
<section>
|
||||
<h1>Édito</h1>
|
||||
<div class="card card-primary">
|
||||
<div class="card-header"><h1>Test article de blog</h1></div>
|
||||
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Repudiandae rerum, sapiente possimus ullam laboriosam dolorum dicta quas laborum maiores, accusantium eveniet sunt, dolor necessitatibus quo! Ducimus a consequuntur vero sapiente.</p>
|
||||
|
||||
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Repudiandae rerum, sapiente possimus ullam laboriosam dolorum dicta quas laborum maiores, accusantium eveniet sunt, dolor necessitatibus quo! Ducimus a consequuntur vero sapiente.</p>
|
||||
<p class="align-center"> <a href="blog-article.html" class="btn btn-readmore">Lire l'article</a> </p>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h1>Derniers articles</h1>
|
||||
<div class="card card-primary">
|
||||
<div class="card-header"><h1>Test article de blog</h1></div>
|
||||
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Repudiandae rerum, sapiente possimus ullam laboriosam dolorum dicta quas laborum maiores, accusantium eveniet sunt, dolor necessitatibus quo! Ducimus a consequuntur vero sapiente.</p>
|
||||
|
||||
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Repudiandae rerum, sapiente possimus ullam laboriosam dolorum dicta quas laborum maiores, accusantium eveniet sunt, dolor necessitatibus quo! Ducimus a consequuntur vero sapiente.</p>
|
||||
<p class="align-center"> <a href="blog-article.html" class="btn btn-readmore">Lire l'article</a> </p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="card card-primary">
|
||||
<div class="card-header"><h1>Test article de blog</h1></div>
|
||||
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Repudiandae rerum, sapiente possimus ullam laboriosam dolorum dicta quas laborum maiores, accusantium eveniet sunt, dolor necessitatibus quo! Ducimus a consequuntur vero sapiente.</p>
|
||||
|
||||
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Repudiandae rerum, sapiente possimus ullam laboriosam dolorum dicta quas laborum maiores, accusantium eveniet sunt, dolor necessitatibus quo! Ducimus a consequuntur vero sapiente.</p>
|
||||
<p class="align-center"> <a href="blog-article.html" class="btn btn-readmore">Lire l'article</a> </p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="card card-primary">
|
||||
<div class="card-header"><h1>Test article de blog</h1></div>
|
||||
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Repudiandae rerum, sapiente possimus ullam laboriosam dolorum dicta quas laborum maiores, accusantium eveniet sunt, dolor necessitatibus quo! Ducimus a consequuntur vero sapiente.</p>
|
||||
|
||||
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Repudiandae rerum, sapiente possimus ullam laboriosam dolorum dicta quas laborum maiores, accusantium eveniet sunt, dolor necessitatibus quo! Ducimus a consequuntur vero sapiente.</p>
|
||||
<p class="align-center"> <a href="blog-article.html" class="btn btn-readmore">Lire l'article</a> </p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="card card-primary">
|
||||
<div class="card-header"><h1>Test article de blog</h1></div>
|
||||
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Repudiandae rerum, sapiente possimus ullam laboriosam dolorum dicta quas laborum maiores, accusantium eveniet sunt, dolor necessitatibus quo! Ducimus a consequuntur vero sapiente.</p>
|
||||
|
||||
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Repudiandae rerum, sapiente possimus ullam laboriosam dolorum dicta quas laborum maiores, accusantium eveniet sunt, dolor necessitatibus quo! Ducimus a consequuntur vero sapiente.</p>
|
||||
<p class="align-center"> <a href="blog-article.html" class="btn btn-readmore">Lire l'article</a> </p>
|
||||
</div>
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
</main>
|
||||
|
||||
<section class="sidebar">
|
||||
<div class="card card-primary">
|
||||
<div class="card-header"><i class="fa fa-rss"></i> Publications</div>
|
||||
<div class="card-menu">
|
||||
<a href="#" class="menu-element"><span class="trim-that">#WRITOBER2019 - Ring</span></a>
|
||||
<a href="#" class="menu-element"><span class="trim-that">Petite histoire uchronique du système solaire (4)</span></a>
|
||||
<a href="#" class="menu-element"><span class="trim-that">#WRITOBER2019 - Ring</span></a>
|
||||
<a href="#" class="menu-element"><span class="trim-that">#WRITOBER2019 - Ring</span></a>
|
||||
<a href="#" class="menu-element"><span class="trim-that">#WRITOBER2019 - Ring</span></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card card-primary">
|
||||
<div class="card-header"><i class="fa fa-folder"></i> Catégories</div>
|
||||
<div class="card-menu">
|
||||
<a href="crea-category.html" class="menu-element">Nouvelles et formats courts <span class="menu-label label-secondary">40</span></a>
|
||||
<a href="crea-category.html" class="menu-element">Contes et légendes <span class="menu-label label-secondary">11</span></a>
|
||||
<a href="crea-category.html" class="menu-element">Poèmes <span class="menu-label label-secondary">11</span></a>
|
||||
<a href="crea-category.html" class="menu-element">Romans <span class="menu-label label-secondary">0</span></a>
|
||||
<a href="crea-category.html" class="menu-element">Logo et Design <span class="menu-label label-secondary">0</span></a>
|
||||
<a href="crea-category.html" class="menu-element">Mapping et Pixel Art <span class="menu-label label-secondary">0</span></a>
|
||||
<div class="menu-divider">FICHES</div>
|
||||
<a href="#" class="menu-element">Univers <span class="menu-label label-secondary">4</span></a>
|
||||
<a href="#" class="menu-element">Personnages <span class="menu-label label-secondary">uwu</span></a>
|
||||
<div class="menu-divider">BLOG</div>
|
||||
<a href="blog-category.html" class="menu-element">Niouzes site et perso <span class="menu-label label-secondary">2</span></a>
|
||||
<a href="blog-category.html" class="menu-element">Réflexions et pensées <span class="menu-label label-secondary">0</span></a>
|
||||
<a href="blog-category.html" class="menu-element">Militantisme <span class="menu-label label-secondary">4</span></a>
|
||||
<a href="blog-category.html" class="menu-element">Conseils et partages <span class="menu-label label-secondary">-1</span></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card card-primary">
|
||||
<div class="card-header"><i class="fa fa-calendar-o"></i> Archives</div>
|
||||
<div class="card-menu">
|
||||
<a href="#" class="menu-element">Octobre 2019 <span class="menu-label label-secondary">1</span></a>
|
||||
<a href="#" class="menu-element">2018 <span class="menu-label label-secondary">3</span></a>
|
||||
<a href="#" class="menu-element">2017 <span class="menu-label label-secondary">50</span></a>
|
||||
<a href="#" class="menu-element">2016 <span class="menu-label label-secondary">8</span></a>
|
||||
<a href="#" class="menu-element">2015 <span class="menu-label label-secondary">2</span></a>
|
||||
<a href="#" class="menu-element">2010 - 2014 <span class="menu-label label-secondary">27</span></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<footer>
|
||||
<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">
|
||||
<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">
|
||||
<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">
|
||||
<p>Lorem Ipsum.</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="js/trim.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,274 @@
|
|||
<!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 -->
|
||||
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,400i,600,800&display=swap" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css?family=Amatic+SC&display=swap" rel="stylesheet">
|
||||
<link href="dep/spectre/css/spectre.min.css" rel="stylesheet">
|
||||
<link href="dep/fork-awesome/css/fork-awesome.css" rel="stylesheet">
|
||||
|
||||
<link href="style.css" rel="stylesheet">
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="wrapper">
|
||||
|
||||
<header id="page-header">
|
||||
<div class="columns">
|
||||
<div class="column col-6">
|
||||
<h1><img src="img/logo.png" alt="Kazhnuz"/></h1>
|
||||
</div>
|
||||
|
||||
<div class="column col-md-6">
|
||||
<nav class="navbar">
|
||||
<section class="navbar-section">
|
||||
|
||||
</section>
|
||||
<section class="navbar-section">
|
||||
<a href="blog.html" class="btn btn-link">Blog</a>
|
||||
<a href="crea.html" class="btn btn-link">Gallerie</a>
|
||||
<a href="apropos.html" class="btn btn-link">A propos</a>
|
||||
</section>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
|
||||
<section class="container-big">
|
||||
<div class="columns">
|
||||
|
||||
|
||||
<div class="column col-9">
|
||||
<nav aria-label="breadcrumb">
|
||||
<ol class="breadcrumb">
|
||||
<li class="breadcrumb-item"><a href="index.html">kazhnuz.space</a></li><li class="breadcrumb-item"><a href="#">Contenus</a></li><li class="breadcrumb-item" aria-current="page"><span class="active">Article exemple</span></li>
|
||||
</ol>
|
||||
</nav>
|
||||
|
||||
|
||||
<div class="toast toast-primary" role="toast">
|
||||
A simple primary toast with <a href="#" class="toast-link">an example link</a>. Give it a click if you like.
|
||||
</div>
|
||||
<div class="toast toast-secondary" role="toast">
|
||||
A simple secondary toast with <a href="#" class="toast-link">an example link</a>. Give it a click if you like.
|
||||
</div>
|
||||
<div class="toast toast-success" role="toast">
|
||||
A simple success toast with <a href="#" class="toast-link">an example link</a>. Give it a click if you like.
|
||||
</div>
|
||||
<div class="toast toast-danger" role="toast">
|
||||
A simple danger toast with <a href="#" class="toast-link">an example link</a>. Give it a click if you like.
|
||||
</div>
|
||||
<div class="toast toast-warning" role="toast">
|
||||
A simple warning toast with <a href="#" class="toast-link">an example link</a>. Give it a click if you like.
|
||||
</div>
|
||||
<div class="toast toast-info" role="toast">
|
||||
A simple info toast with <a href="#" class="toast-link">an example link</a>. Give it a click if you like.
|
||||
</div>
|
||||
<div class="toast toast-light" role="toast">
|
||||
A simple light toast with <a href="#" class="toast-link">an example link</a>. Give it a click if you like.
|
||||
</div>
|
||||
<div class="toast toast-dark" role="toast">
|
||||
A simple dark toast with <a href="#" class="toast-link">an example link</a>. Give it a click if you like.
|
||||
</div>
|
||||
|
||||
<article>
|
||||
|
||||
<section class="card">
|
||||
<div class="card-header">
|
||||
<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
|
||||
<div class="btn-group mr-2" role="group" aria-label="First group">
|
||||
<button type="button" class="btn btn-primary">1</button>
|
||||
<button type="button" class="btn btn-secondary">2</button>
|
||||
<button type="button" class="btn btn-danger">3</button>
|
||||
<button type="button" class="btn btn-info">4</button>
|
||||
</div>
|
||||
<div class="btn-group mr-2" role="group" aria-label="Second group">
|
||||
<button type="button" class="btn btn-dark">5</button>
|
||||
<button type="button" class="btn btn-success">6</button>
|
||||
<button type="button" class="btn btn-turquoise">7</button>
|
||||
</div>
|
||||
<div class="btn-group" role="group" aria-label="Third group">
|
||||
<button type="button" class="btn btn-violet">8</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card-body">
|
||||
<ul>
|
||||
<li>1 - Filmographie de Joachim du Poulet
|
||||
<ul>
|
||||
<li>1.1 - Pour une poignée de Poulet</li>
|
||||
<li>1.2 - Pour quelques Poulet de plus</li>
|
||||
<li>1.3 - Le bon, la brute et le Poulet</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>2 - Les Cocotes : Etude de leur Violence</li>
|
||||
</ul>
|
||||
|
||||
<h3>Introduction : Lorem Ipsum</h3>
|
||||
|
||||
<p><em>Lorem ipsum dolor sit amet<sup><a href="#1">[1]</a></sup>, consectetur adipiscing elit. Praesent varius ullamcorper diam, non sagittis lectus rutrum id. Integer eros urna, egestas et libero a, finibus egestas odio. Nunc vel hendrerit quam, eget malesuada sem. Sed hendrerit ligula pharetra leo aliquam volutpat. Integer auctor urna ac convallis laoreet. Nunc vestibulum ipsum sed tortor aliquam porta. Cras nunc est, lobortis in est at, rhoncus auctor nunc. Sed dignissim erat non sollicitudin ultricies. Integer vel consectetur urna. Etiam fermentum ligula vitae nunc viverra, a fringilla sem aliquam. Suspendisse potenti. Morbi sem mi, malesuada quis odio vitae, suscipit congue metus. Sed ut ullamcorper urna, eget molestie est. Sed pulvinar justo ac urna consectetur fringilla. Donec tristique eget leo sit amet mollis.</em></p>
|
||||
|
||||
<p class="align-center"><a href="#" class="btn btn-primary">Télécharger ce thème</a></p>
|
||||
|
||||
<h3>Filmographie de Joachim du Poulet</h3>
|
||||
<h4>Pour une poignée de poulets</h4>
|
||||
<h4>Pour quelques Poulet de plus</h4>
|
||||
<h4>Le bon, la brute et le Poulet</h4>
|
||||
<h3>Les Cocotes : Etude de leur Violence</h3>
|
||||
|
||||
<p>Proin bibendum felis sit amet nisl iaculis, <strong>vel blandit purus dictum</strong>. Maecenas ullamcorper tortor ac dolor pulvinar, id imperdiet arcu suscipit. <mark>Sed posuere lectus eu orci tristique maximus</mark>. 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>
|
||||
|
||||
<blockquote><p>Cras malesuada, metus at viverra molestie, mi ligula sodales tellus, vitae facilisis ante est vitae dolor. Donec feugiat non est eget elementum. Nullam in erat et arcu tincidunt maximus. Nullam nibh orci, egestas eu ex non, viverra pretium magna. Proin convallis, risus eu condimentum luctus, ante dui mattis eros, a varius risus diam sed nisl. Ut malesuada ipsum in augue accumsan ullamcorper. Phasellus efficitur augue in venenatis sollicitudin. Integer at consectetur arcu.</p></blockquote>
|
||||
|
||||
<pre><code>Vivamus tincidunt dolor quis consectetur dapibus.
|
||||
Ut metus risus, lobortis non venenatis in, ultricies a orci.
|
||||
In suscipit ante et aliquet pretium.
|
||||
Integer diam dui, rutrum vitae risus ultricies, varius vulputate magna.
|
||||
In id suscipit elit.</code></pre>
|
||||
|
||||
|
||||
<p id="1">[1] : Sed et odio volutpat, convallis est et, interdum sapien.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="card card-primary">
|
||||
<div class="card-header"><i class="fa fa-rss"></i> Publications</div>
|
||||
<div class="card-menu">
|
||||
<a href="#" class="menu-element"><span class="trim-that">#WRITOBER2019 - Ring</span></a>
|
||||
<a href="#" class="menu-element"><span class="trim-that">Petite histoire uchronique du système solaire (4)</span></a>
|
||||
<a href="#" class="menu-element"><span class="trim-that">#WRITOBER2019 - Ring</span></a>
|
||||
<a href="#" class="menu-element"><span class="trim-that">#WRITOBER2019 - Ring</span></a>
|
||||
<a href="#" class="menu-element"><span class="trim-that">#WRITOBER2019 - Ring</span></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card card-primary">
|
||||
<div class="card-header"><i class="fa fa-folder"></i> Catégories</div>
|
||||
<div class="card-menu">
|
||||
<a href="crea-category.html" class="menu-element">Nouvelles et formats courts <span class="menu-label label-secondary">40</span></a>
|
||||
<a href="crea-category.html" class="menu-element">Contes et légendes <span class="menu-label label-secondary">11</span></a>
|
||||
<a href="crea-category.html" class="menu-element">Poèmes <span class="menu-label label-secondary">11</span></a>
|
||||
<a href="crea-category.html" class="menu-element">Romans <span class="menu-label label-secondary">0</span></a>
|
||||
<a href="crea-category.html" class="menu-element">Logo et Design <span class="menu-label label-secondary">0</span></a>
|
||||
<a href="crea-category.html" class="menu-element">Mapping et Pixel Art <span class="menu-label label-secondary">0</span></a>
|
||||
<div class="menu-divider">FICHES</div>
|
||||
<a href="#" class="menu-element">Univers <span class="menu-label label-secondary">4</span></a>
|
||||
<a href="#" class="menu-element">Personnages <span class="menu-label label-secondary">uwu</span></a>
|
||||
<div class="menu-divider">BLOG</div>
|
||||
<a href="blog-category.html" class="menu-element">Niouzes site et perso <span class="menu-label label-secondary">2</span></a>
|
||||
<a href="blog-category.html" class="menu-element">Réflexions et pensées <span class="menu-label label-secondary">0</span></a>
|
||||
<a href="blog-category.html" class="menu-element">Militantisme <span class="menu-label label-secondary">4</span></a>
|
||||
<a href="blog-category.html" class="menu-element">Conseils et partages <span class="menu-label label-secondary">-1</span></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card card-primary">
|
||||
<div class="card-header"><i class="fa fa-calendar-o"></i> Archives</div>
|
||||
<div class="card-menu">
|
||||
<a href="#" class="menu-element">Octobre 2019 <span class="menu-label label-secondary">1</span></a>
|
||||
<a href="#" class="menu-element">2018 <span class="menu-label label-secondary">3</span></a>
|
||||
<a href="#" class="menu-element">2017 <span class="menu-label label-secondary">50</span></a>
|
||||
<a href="#" class="menu-element">2016 <span class="menu-label label-secondary">8</span></a>
|
||||
<a href="#" class="menu-element">2015 <span class="menu-label label-secondary">2</span></a>
|
||||
<a href="#" class="menu-element">2010 - 2014 <span class="menu-label label-secondary">27</span></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</article>
|
||||
|
||||
</div>
|
||||
<aside class="column col-3">
|
||||
<div class="card card-primary">
|
||||
<div class="card-header"><i class="fa fa-rss"></i> Publications</div>
|
||||
<div class="card-menu">
|
||||
<a href="#" class="menu-element"><span class="trim-that">#WRITOBER2019 - Ring</span></a>
|
||||
<a href="#" class="menu-element"><span class="trim-that">Petite histoire uchronique du système solaire (4)</span></a>
|
||||
<a href="#" class="menu-element"><span class="trim-that">#WRITOBER2019 - Ring</span></a>
|
||||
<a href="#" class="menu-element"><span class="trim-that">#WRITOBER2019 - Ring</span></a>
|
||||
<a href="#" class="menu-element"><span class="trim-that">#WRITOBER2019 - Ring</span></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card card-primary">
|
||||
<div class="card-header"><i class="fa fa-folder"></i> Catégories</div>
|
||||
<div class="card-menu">
|
||||
<a href="crea-category.html" class="menu-element">Nouvelles et formats courts <span class="menu-label label-secondary">40</span></a>
|
||||
<a href="crea-category.html" class="menu-element">Contes et légendes <span class="menu-label label-secondary">11</span></a>
|
||||
<a href="crea-category.html" class="menu-element">Poèmes <span class="menu-label label-secondary">11</span></a>
|
||||
<a href="crea-category.html" class="menu-element">Romans <span class="menu-label label-secondary">0</span></a>
|
||||
<a href="crea-category.html" class="menu-element">Logo et Design <span class="menu-label label-secondary">0</span></a>
|
||||
<a href="crea-category.html" class="menu-element">Mapping et Pixel Art <span class="menu-label label-secondary">0</span></a>
|
||||
<div class="menu-divider">FICHES</div>
|
||||
<a href="#" class="menu-element">Univers <span class="menu-label label-secondary">4</span></a>
|
||||
<a href="#" class="menu-element">Personnages <span class="menu-label label-secondary">uwu</span></a>
|
||||
<div class="menu-divider">BLOG</div>
|
||||
<a href="blog-category.html" class="menu-element">Niouzes site et perso <span class="menu-label label-secondary">2</span></a>
|
||||
<a href="blog-category.html" class="menu-element">Réflexions et pensées <span class="menu-label label-secondary">0</span></a>
|
||||
<a href="blog-category.html" class="menu-element">Militantisme <span class="menu-label label-secondary">4</span></a>
|
||||
<a href="blog-category.html" class="menu-element">Conseils et partages <span class="menu-label label-secondary">-1</span></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card card-primary">
|
||||
<div class="card-header"><i class="fa fa-calendar-o"></i> Archives</div>
|
||||
<div class="card-menu">
|
||||
<a href="#" class="menu-element">Octobre 2019 <span class="menu-label label-secondary">1</span></a>
|
||||
<a href="#" class="menu-element">2018 <span class="menu-label label-secondary">3</span></a>
|
||||
<a href="#" class="menu-element">2017 <span class="menu-label label-secondary">50</span></a>
|
||||
<a href="#" class="menu-element">2016 <span class="menu-label label-secondary">8</span></a>
|
||||
<a href="#" class="menu-element">2015 <span class="menu-label label-secondary">2</span></a>
|
||||
<a href="#" class="menu-element">2010 - 2014 <span class="menu-label label-secondary">27</span></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</aside>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<footer>
|
||||
<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">
|
||||
<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">
|
||||
<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">
|
||||
<p>Lorem Ipsum.</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,44 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Insert title here</title>
|
||||
<link rel="stylesheet" href="../dep/bootstrap/css/bootstrap.min.css">
|
||||
<link rel="stylesheet" href="../dep/fork-awesome/css/fork-awesome.min.css">
|
||||
<link rel="stylesheet" href="style.css">
|
||||
|
||||
<script src="jquery/jquery.js"></script>
|
||||
<script src="bootstrap/js/bootstrap.min.js"></script>
|
||||
<script src="script.js"></script>
|
||||
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div id="main-area">
|
||||
<div class="container container-password">
|
||||
<!-- debut de la partie modifiable -->
|
||||
<div class="card card-connection">
|
||||
<div class="card-header">
|
||||
Se connecter
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="form-group">
|
||||
<input type="text" class="form-control" id="pseudo" aria-describedby="pseudo" placeholder="Pseudonyme">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<input type="password" class="form-control" id="password" aria-describedby="password" placeholder="Password">
|
||||
</div>
|
||||
|
||||
<a href="#" class="btn btn-success btn-block">CONNEXION</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- fin de la partie modifiable -->
|
||||
</div>
|
||||
<nav class="nav justify-content-end">
|
||||
<span class="nav-link disabled">Created with <i class="text-danger fa fa-heart"></i> with Bootstrap4 and Fork-Awesome</span>
|
||||
</nav>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,322 @@
|
|||
<!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 -->
|
||||
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,400i,600,800&display=swap" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css?family=Amatic+SC&display=swap" rel="stylesheet">
|
||||
<link href="dep/spectre/css/spectre.min.css" rel="stylesheet">
|
||||
<link href="dep/fork-awesome/css/fork-awesome.css" rel="stylesheet">
|
||||
|
||||
<link href="style.css" rel="stylesheet">
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="wrapper">
|
||||
|
||||
<header id="page-header">
|
||||
<div class="columns">
|
||||
<div class="column col-6">
|
||||
<h1><img src="img/logo.png" alt="Kazhnuz"/></h1>
|
||||
</div>
|
||||
|
||||
<div class="column col-md-6">
|
||||
<nav class="navbar">
|
||||
<section class="navbar-section">
|
||||
|
||||
</section>
|
||||
<section class="navbar-section">
|
||||
<a href="blog.html" class="btn btn-link">Blog</a>
|
||||
<a href="crea.html" class="btn btn-link">Gallerie</a>
|
||||
<a href="apropos.html" class="btn btn-link">A propos</a>
|
||||
</section>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
|
||||
<div class="container-preview">
|
||||
<main class="mainpane">
|
||||
<nav aria-label="breadcrumb">
|
||||
<ol class="breadcrumb">
|
||||
<li class="breadcrumb-item"><a href="index.html">kazhnuz.space</a></li><li class="breadcrumb-item"><a href="#">Contenus</a></li><li class="breadcrumb-item" aria-current="page"><span class="active">Article exemple</span></li>
|
||||
</ol>
|
||||
</nav>
|
||||
|
||||
|
||||
<div class="previews-section">
|
||||
|
||||
<article class="card card-preview card-primary">
|
||||
<a href="crea-ecrit.html" 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="crea-ecrit.html" 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="crea-ecrit.html" 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="crea-image.html" class="preview-link">
|
||||
<div class="preview-item">
|
||||
<div class="preview-content"><p class="p-img"><img src="img/wmap.png" alt="Card image cap"></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="crea-ecrit.html" 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="crea-image.html" class="preview-link">
|
||||
<div class="preview-item">
|
||||
<div class="preview-content"><p class="p-img"><img src="img/wmap.png" alt="Card image cap"></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="crea-ecrit.html" 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="crea-ecrit.html" 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="crea-image.html" class="preview-link">
|
||||
<div class="preview-item">
|
||||
<div class="preview-content"><p class="p-img"><img src="img/wmap.png" alt="Card image cap"></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="crea-image.html" class="preview-link">
|
||||
<div class="preview-item">
|
||||
<div class="preview-content"><p class="p-img"><img src="img/wmap.png" alt="Card image cap"></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>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</main>
|
||||
|
||||
<section class="sidebar">
|
||||
<div class="card card-info">
|
||||
<div class="card-header">
|
||||
<i class="fa fa-fw fa-info"></i> Poèmes
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p> Tous mes textes écrits en vers. Ils sont généralement une entrée dans l'esprit d'un personnage, mais peuvent parler de thèmes divers et plus variés suivant ce que j'avais envie d'écrire au moment ou je les ai rédigés. </p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card card-primary">
|
||||
<div class="card-header"><i class="fa fa-rss"></i> Publications</div>
|
||||
<div class="card-menu">
|
||||
<a href="#" class="menu-element"><span class="trim-that">#WRITOBER2019 - Ring</span></a>
|
||||
<a href="#" class="menu-element"><span class="trim-that">Petite histoire uchronique du système solaire (4)</span></a>
|
||||
<a href="#" class="menu-element"><span class="trim-that">#WRITOBER2019 - Ring</span></a>
|
||||
<a href="#" class="menu-element"><span class="trim-that">#WRITOBER2019 - Ring</span></a>
|
||||
<a href="#" class="menu-element"><span class="trim-that">#WRITOBER2019 - Ring</span></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card card-primary">
|
||||
<div class="card-header"><i class="fa fa-folder"></i> Catégories</div>
|
||||
<div class="card-menu">
|
||||
<a href="crea-category.html" class="menu-element">Nouvelles et formats courts <span class="menu-label label-secondary">40</span></a>
|
||||
<a href="crea-category.html" class="menu-element">Contes et légendes <span class="menu-label label-secondary">11</span></a>
|
||||
<a href="crea-category.html" class="menu-element">Poèmes <span class="menu-label label-secondary">11</span></a>
|
||||
<a href="crea-category.html" class="menu-element">Romans <span class="menu-label label-secondary">0</span></a>
|
||||
<a href="crea-category.html" class="menu-element">Logo et Design <span class="menu-label label-secondary">0</span></a>
|
||||
<a href="crea-category.html" class="menu-element">Mapping et Pixel Art <span class="menu-label label-secondary">0</span></a>
|
||||
<div class="menu-divider">FICHES</div>
|
||||
<a href="#" class="menu-element">Univers <span class="menu-label label-secondary">4</span></a>
|
||||
<a href="#" class="menu-element">Personnages <span class="menu-label label-secondary">uwu</span></a>
|
||||
<div class="menu-divider">BLOG</div>
|
||||
<a href="blog-category.html" class="menu-element">Niouzes site et perso <span class="menu-label label-secondary">2</span></a>
|
||||
<a href="blog-category.html" class="menu-element">Réflexions et pensées <span class="menu-label label-secondary">0</span></a>
|
||||
<a href="blog-category.html" class="menu-element">Militantisme <span class="menu-label label-secondary">4</span></a>
|
||||
<a href="blog-category.html" class="menu-element">Conseils et partages <span class="menu-label label-secondary">-1</span></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card card-primary">
|
||||
<div class="card-header"><i class="fa fa-calendar-o"></i> Archives</div>
|
||||
<div class="card-menu">
|
||||
<a href="#" class="menu-element">Octobre 2019 <span class="menu-label label-secondary">1</span></a>
|
||||
<a href="#" class="menu-element">2018 <span class="menu-label label-secondary">3</span></a>
|
||||
<a href="#" class="menu-element">2017 <span class="menu-label label-secondary">50</span></a>
|
||||
<a href="#" class="menu-element">2016 <span class="menu-label label-secondary">8</span></a>
|
||||
<a href="#" class="menu-element">2015 <span class="menu-label label-secondary">2</span></a>
|
||||
<a href="#" class="menu-element">2010 - 2014 <span class="menu-label label-secondary">27</span></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<footer>
|
||||
<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">
|
||||
<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">
|
||||
<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">
|
||||
<p>Lorem Ipsum.</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="js/trim.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,212 @@
|
|||
<!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 -->
|
||||
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,400i,600,800&display=swap" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css?family=Amatic+SC&display=swap" rel="stylesheet">
|
||||
<link href="dep/spectre/css/spectre.min.css" rel="stylesheet">
|
||||
<link href="dep/fork-awesome/css/fork-awesome.css" rel="stylesheet">
|
||||
|
||||
<link href="style.css" rel="stylesheet">
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="wrapper">
|
||||
|
||||
<header id="page-header">
|
||||
<div class="columns">
|
||||
<div class="column col-6">
|
||||
<h1><img src="img/logo.png" alt="Kazhnuz"/></h1>
|
||||
</div>
|
||||
|
||||
<div class="column col-md-6">
|
||||
<nav class="navbar">
|
||||
<section class="navbar-section">
|
||||
|
||||
</section>
|
||||
<section class="navbar-section">
|
||||
<a href="blog.html" class="btn btn-link">Blog</a>
|
||||
<a href="crea.html" class="btn btn-link">Gallerie</a>
|
||||
<a href="apropos.html" class="btn btn-link">A propos</a>
|
||||
</section>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
|
||||
<section class="container-onecolumn">
|
||||
|
||||
<article class="container-typographic">
|
||||
<h1 class="page-title">Nom de l'article :</h1>
|
||||
|
||||
<ul>
|
||||
<li>1 - Titre de niveau 3
|
||||
<ul>
|
||||
<li>1.1 - Titre de niveau 4</li>
|
||||
<li>1.2 - Titre de niveau 4</li>
|
||||
<li>1.3 - Titre de niveau 4</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>2 - Titre de niveau 3</li>
|
||||
</ul>
|
||||
|
||||
<h2>Introduction : Lorem Ipsum</h2>
|
||||
|
||||
<p><em>Lorem ipsum dolor sit amet<sup><a href="#1">[1]</a></sup>, consectetur adipiscing elit. Praesent varius ullamcorper diam, non sagittis lectus rutrum id. Integer eros urna, egestas et libero a, finibus egestas odio. Nunc vel hendrerit quam, eget malesuada sem. Sed hendrerit ligula pharetra leo aliquam volutpat. Integer auctor urna ac convallis laoreet. Nunc vestibulum ipsum sed tortor aliquam porta. Cras nunc est, lobortis in est at, rhoncus auctor nunc. Sed dignissim erat non sollicitudin ultricies. Integer vel consectetur urna. Etiam fermentum ligula vitae nunc viverra, a fringilla sem aliquam. Suspendisse potenti. Morbi sem mi, malesuada quis odio vitae, suscipit congue metus. Sed ut ullamcorper urna, eget molestie est. Sed pulvinar justo ac urna consectetur fringilla. Donec tristique eget leo sit amet mollis.</em></p>
|
||||
|
||||
<p class="align-center"><a href="#" class="btn btn-warning">Télécharger ce thème</a></p>
|
||||
|
||||
<h2>Contenu : Lorem Ipsum. Ceci est un titre long afin de tester comment la longueur d'un titre peut poser soucis d'un point de vue de l'alignement vertical.</h2>
|
||||
|
||||
<h3>Titre de niveau 3</h3>
|
||||
<h4>Titre de niveau 4</h4>
|
||||
<h4>Titre de niveau 4</h4>
|
||||
<h4>Titre de niveau 4</h4>
|
||||
<h3>Titre de niveau 3</h3>
|
||||
|
||||
<p>Proin bibendum felis sit amet nisl iaculis, <strong>vel blandit purus dictum</strong>. Maecenas ullamcorper tortor ac dolor pulvinar, id imperdiet arcu suscipit. <mark>Sed posuere lectus eu orci tristique maximus</mark>. 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>
|
||||
|
||||
<blockquote><p>Cras malesuada, metus at viverra molestie, mi ligula sodales tellus, vitae facilisis ante est vitae dolor. Donec feugiat non est eget elementum. Nullam in erat et arcu tincidunt maximus. Nullam nibh orci, egestas eu ex non, viverra pretium magna. Proin convallis, risus eu condimentum luctus, ante dui mattis eros, a varius risus diam sed nisl. Ut malesuada ipsum in augue accumsan ullamcorper. Phasellus efficitur augue in venenatis sollicitudin. Integer at consectetur arcu.</p></blockquote>
|
||||
|
||||
<pre><code>Vivamus tincidunt dolor quis consectetur dapibus.
|
||||
Ut metus risus, lobortis non venenatis in, ultricies a orci.
|
||||
In suscipit ante et aliquet pretium.
|
||||
Integer diam dui, rutrum vitae risus ultricies, varius vulputate magna.
|
||||
In id suscipit elit.</code></pre>
|
||||
|
||||
|
||||
<p id="1">[1] : Sed et odio volutpat, convallis est et, interdum sapien.</p>
|
||||
</article>
|
||||
|
||||
<div class="container-blog">
|
||||
<div class="mainpane">
|
||||
<section class="card card-noheader">
|
||||
<div class="author-area">
|
||||
<img src="img/avatar.png" class="author-avatar" alt="...">
|
||||
<div class="author-metadata">
|
||||
<div class="author-pseudo">Écrit par <a href="" >Pseudo</a></div>
|
||||
<small class="author-date">Le vendredi 19 septembre 2014 à 07:16</small>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="card card-noheader">
|
||||
<p>Lorem Ipsum...</p>
|
||||
</section>
|
||||
|
||||
<section class="commentaires">
|
||||
<h1>Commentaires :</h1>
|
||||
|
||||
<article class="card comment">
|
||||
<div class="author-area">
|
||||
<img src="img/avatar.png" class="author-avatar" alt="...">
|
||||
<div class="author-metadata">
|
||||
<div class="author-pseudo">Écrit par <a href="" >Pseudo</a></div>
|
||||
<small class="author-date">Le vendredi 19 septembre 2014 à 07:16</small>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p><em>Lorem ipsum dolor sit amet<sup><a href="#1">[1]</a></sup>, consectetur adipiscing elit. Praesent varius ullamcorper diam, non sagittis lectus rutrum id. Integer eros urna, egestas et libero a, finibus egestas odio. Nunc vel hendrerit quam, eget malesuada sem. Sed hendrerit ligula pharetra leo aliquam volutpat. Integer auctor urna ac convallis laoreet. Nunc vestibulum ipsum sed tortor aliquam porta. Cras nunc est, lobortis in est at, rhoncus auctor nunc. Sed dignissim erat non sollicitudin ultricies. Integer vel consectetur urna. Etiam fermentum ligula vitae nunc viverra, a fringilla sem aliquam. Suspendisse potenti. Morbi sem mi, malesuada quis odio vitae, suscipit congue metus. Sed ut ullamcorper urna, eget molestie est. Sed pulvinar justo ac urna consectetur fringilla. Donec tristique eget leo sit amet mollis.</em></p>
|
||||
<p>Proin bibendum felis sit amet nisl iaculis, <strong>vel blandit purus dictum</strong>. Maecenas ullamcorper tortor ac dolor pulvinar, id imperdiet arcu suscipit. <mark>Sed posuere lectus eu orci tristique maximus</mark>. 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>
|
||||
</article>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<div class="sidebar">
|
||||
<div class="card card-primary">
|
||||
<div class="card-header"><i class="fa fa-rss"></i> Publications</div>
|
||||
<div class="card-menu">
|
||||
<a href="#" class="menu-element"><span class="trim-that">#WRITOBER2019 - Ring</span></a>
|
||||
<a href="#" class="menu-element"><span class="trim-that">Petite histoire uchronique du système solaire (4)</span></a>
|
||||
<a href="#" class="menu-element"><span class="trim-that">#WRITOBER2019 - Ring</span></a>
|
||||
<a href="#" class="menu-element"><span class="trim-that">#WRITOBER2019 - Ring</span></a>
|
||||
<a href="#" class="menu-element"><span class="trim-that">#WRITOBER2019 - Ring</span></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card card-primary">
|
||||
<div class="card-header"><i class="fa fa-folder"></i> Catégories</div>
|
||||
<div class="card-menu">
|
||||
<a href="crea-category.html" class="menu-element">Nouvelles et formats courts <span class="menu-label label-secondary">40</span></a>
|
||||
<a href="crea-category.html" class="menu-element">Contes et légendes <span class="menu-label label-secondary">11</span></a>
|
||||
<a href="crea-category.html" class="menu-element">Poèmes <span class="menu-label label-secondary">11</span></a>
|
||||
<a href="crea-category.html" class="menu-element">Romans <span class="menu-label label-secondary">0</span></a>
|
||||
<a href="crea-category.html" class="menu-element">Logo et Design <span class="menu-label label-secondary">0</span></a>
|
||||
<a href="crea-category.html" class="menu-element">Mapping et Pixel Art <span class="menu-label label-secondary">0</span></a>
|
||||
<div class="menu-divider">FICHES</div>
|
||||
<a href="#" class="menu-element">Univers <span class="menu-label label-secondary">4</span></a>
|
||||
<a href="#" class="menu-element">Personnages <span class="menu-label label-secondary">uwu</span></a>
|
||||
<div class="menu-divider">BLOG</div>
|
||||
<a href="blog-category.html" class="menu-element">Niouzes site et perso <span class="menu-label label-secondary">2</span></a>
|
||||
<a href="blog-category.html" class="menu-element">Réflexions et pensées <span class="menu-label label-secondary">0</span></a>
|
||||
<a href="blog-category.html" class="menu-element">Militantisme <span class="menu-label label-secondary">4</span></a>
|
||||
<a href="blog-category.html" class="menu-element">Conseils et partages <span class="menu-label label-secondary">-1</span></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card card-primary">
|
||||
<div class="card-header"><i class="fa fa-calendar-o"></i> Archives</div>
|
||||
<div class="card-menu">
|
||||
<a href="#" class="menu-element">Octobre 2019 <span class="menu-label label-secondary">1</span></a>
|
||||
<a href="#" class="menu-element">2018 <span class="menu-label label-secondary">3</span></a>
|
||||
<a href="#" class="menu-element">2017 <span class="menu-label label-secondary">50</span></a>
|
||||
<a href="#" class="menu-element">2016 <span class="menu-label label-secondary">8</span></a>
|
||||
<a href="#" class="menu-element">2015 <span class="menu-label label-secondary">2</span></a>
|
||||
<a href="#" class="menu-element">2010 - 2014 <span class="menu-label label-secondary">27</span></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
</div>
|
||||
<footer>
|
||||
<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">
|
||||
<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">
|
||||
<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">
|
||||
<p>Lorem Ipsum.</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,174 @@
|
|||
<!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 -->
|
||||
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,400i,600,800&display=swap" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css?family=Amatic+SC&display=swap" rel="stylesheet">
|
||||
<link href="dep/spectre/css/spectre.min.css" rel="stylesheet">
|
||||
<link href="dep/fork-awesome/css/fork-awesome.css" rel="stylesheet">
|
||||
|
||||
<link href="style.css" rel="stylesheet">
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="wrapper">
|
||||
|
||||
<header id="page-header">
|
||||
<div class="columns">
|
||||
<div class="column col-6">
|
||||
<h1><img src="img/logo.png" alt="Kazhnuz"/></h1>
|
||||
</div>
|
||||
|
||||
<div class="column col-md-6">
|
||||
<nav class="navbar">
|
||||
<section class="navbar-section">
|
||||
|
||||
</section>
|
||||
<section class="navbar-section">
|
||||
<a href="blog.html" class="btn btn-link">Blog</a>
|
||||
<a href="crea.html" class="btn btn-link">Gallerie</a>
|
||||
<a href="apropos.html" class="btn btn-link">A propos</a>
|
||||
</section>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
|
||||
<section class="container-onecolumn">
|
||||
|
||||
<article class="container-typographic align-center">
|
||||
<img src="img/wmap.png" alt="Card image cap">
|
||||
</article>
|
||||
|
||||
<div class="container-blog">
|
||||
<div class="mainpane">
|
||||
<section class="card card-noheader">
|
||||
<div class="author-area">
|
||||
<img src="img/avatar.png" class="author-avatar" alt="...">
|
||||
<div class="author-metadata">
|
||||
<div class="author-pseudo">Écrit par <a href="" >Pseudo</a></div>
|
||||
<small class="author-date">Le vendredi 19 septembre 2014 à 07:16</small>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="card card-noheader">
|
||||
<p>Lorem Ipsum...</p>
|
||||
</section>
|
||||
|
||||
<section class="commentaires">
|
||||
<h1>Commentaires :</h1>
|
||||
|
||||
<article class="card comment">
|
||||
<div class="author-area">
|
||||
<img src="img/avatar.png" class="author-avatar" alt="...">
|
||||
<div class="author-metadata">
|
||||
<div class="author-pseudo">Écrit par <a href="" >Pseudo</a></div>
|
||||
<small class="author-date">Le vendredi 19 septembre 2014 à 07:16</small>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p><em>Lorem ipsum dolor sit amet<sup><a href="#1">[1]</a></sup>, consectetur adipiscing elit. Praesent varius ullamcorper diam, non sagittis lectus rutrum id. Integer eros urna, egestas et libero a, finibus egestas odio. Nunc vel hendrerit quam, eget malesuada sem. Sed hendrerit ligula pharetra leo aliquam volutpat. Integer auctor urna ac convallis laoreet. Nunc vestibulum ipsum sed tortor aliquam porta. Cras nunc est, lobortis in est at, rhoncus auctor nunc. Sed dignissim erat non sollicitudin ultricies. Integer vel consectetur urna. Etiam fermentum ligula vitae nunc viverra, a fringilla sem aliquam. Suspendisse potenti. Morbi sem mi, malesuada quis odio vitae, suscipit congue metus. Sed ut ullamcorper urna, eget molestie est. Sed pulvinar justo ac urna consectetur fringilla. Donec tristique eget leo sit amet mollis.</em></p>
|
||||
<p>Proin bibendum felis sit amet nisl iaculis, <strong>vel blandit purus dictum</strong>. Maecenas ullamcorper tortor ac dolor pulvinar, id imperdiet arcu suscipit. <mark>Sed posuere lectus eu orci tristique maximus</mark>. 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>
|
||||
</article>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<div class="sidebar">
|
||||
<div class="card card-primary">
|
||||
<div class="card-header"><i class="fa fa-rss"></i> Publications</div>
|
||||
<div class="card-menu">
|
||||
<a href="#" class="menu-element"><span class="trim-that">#WRITOBER2019 - Ring</span></a>
|
||||
<a href="#" class="menu-element"><span class="trim-that">Petite histoire uchronique du système solaire (4)</span></a>
|
||||
<a href="#" class="menu-element"><span class="trim-that">#WRITOBER2019 - Ring</span></a>
|
||||
<a href="#" class="menu-element"><span class="trim-that">#WRITOBER2019 - Ring</span></a>
|
||||
<a href="#" class="menu-element"><span class="trim-that">#WRITOBER2019 - Ring</span></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card card-primary">
|
||||
<div class="card-header"><i class="fa fa-folder"></i> Catégories</div>
|
||||
<div class="card-menu">
|
||||
<a href="crea-category.html" class="menu-element">Nouvelles et formats courts <span class="menu-label label-secondary">40</span></a>
|
||||
<a href="crea-category.html" class="menu-element">Contes et légendes <span class="menu-label label-secondary">11</span></a>
|
||||
<a href="crea-category.html" class="menu-element">Poèmes <span class="menu-label label-secondary">11</span></a>
|
||||
<a href="crea-category.html" class="menu-element">Romans <span class="menu-label label-secondary">0</span></a>
|
||||
<a href="crea-category.html" class="menu-element">Logo et Design <span class="menu-label label-secondary">0</span></a>
|
||||
<a href="crea-category.html" class="menu-element">Mapping et Pixel Art <span class="menu-label label-secondary">0</span></a>
|
||||
<div class="menu-divider">FICHES</div>
|
||||
<a href="#" class="menu-element">Univers <span class="menu-label label-secondary">4</span></a>
|
||||
<a href="#" class="menu-element">Personnages <span class="menu-label label-secondary">uwu</span></a>
|
||||
<div class="menu-divider">BLOG</div>
|
||||
<a href="blog-category.html" class="menu-element">Niouzes site et perso <span class="menu-label label-secondary">2</span></a>
|
||||
<a href="blog-category.html" class="menu-element">Réflexions et pensées <span class="menu-label label-secondary">0</span></a>
|
||||
<a href="blog-category.html" class="menu-element">Militantisme <span class="menu-label label-secondary">4</span></a>
|
||||
<a href="blog-category.html" class="menu-element">Conseils et partages <span class="menu-label label-secondary">-1</span></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card card-primary">
|
||||
<div class="card-header"><i class="fa fa-calendar-o"></i> Archives</div>
|
||||
<div class="card-menu">
|
||||
<a href="#" class="menu-element">Octobre 2019 <span class="menu-label label-secondary">1</span></a>
|
||||
<a href="#" class="menu-element">2018 <span class="menu-label label-secondary">3</span></a>
|
||||
<a href="#" class="menu-element">2017 <span class="menu-label label-secondary">50</span></a>
|
||||
<a href="#" class="menu-element">2016 <span class="menu-label label-secondary">8</span></a>
|
||||
<a href="#" class="menu-element">2015 <span class="menu-label label-secondary">2</span></a>
|
||||
<a href="#" class="menu-element">2010 - 2014 <span class="menu-label label-secondary">27</span></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
</div>
|
||||
<footer>
|
||||
<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">
|
||||
<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">
|
||||
<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">
|
||||
<p>Lorem Ipsum.</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,317 @@
|
|||
<!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 -->
|
||||
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,400i,600,800&display=swap" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css?family=Amatic+SC&display=swap" rel="stylesheet">
|
||||
<link href="dep/spectre/css/spectre.min.css" rel="stylesheet">
|
||||
<link href="dep/fork-awesome/css/fork-awesome.css" rel="stylesheet">
|
||||
|
||||
<link href="style.css" rel="stylesheet">
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="wrapper">
|
||||
|
||||
<header id="page-header">
|
||||
<div class="columns">
|
||||
<div class="column col-6">
|
||||
<h1><img src="img/logo.png" alt="Kazhnuz"/></h1>
|
||||
</div>
|
||||
|
||||
<div class="column col-md-6">
|
||||
<nav class="navbar">
|
||||
<section class="navbar-section">
|
||||
|
||||
</section>
|
||||
<section class="navbar-section">
|
||||
<a href="blog.html" class="btn btn-link">Blog</a>
|
||||
<a href="crea.html" class="btn btn-link">Gallerie</a>
|
||||
<a href="apropos.html" class="btn btn-link">A propos</a>
|
||||
</section>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
|
||||
<div class="container-preview">
|
||||
<main class="mainpane">
|
||||
<nav aria-label="breadcrumb">
|
||||
<ol class="breadcrumb">
|
||||
<li class="breadcrumb-item"><a href="index.html">kazhnuz.space</a></li><li class="breadcrumb-item"><a href="#">Contenus</a></li><li class="breadcrumb-item" aria-current="page"><span class="active">Article exemple</span></li>
|
||||
</ol>
|
||||
</nav>
|
||||
|
||||
|
||||
<div class="toast toast-info" role="toast">
|
||||
<p>Toutes mes créations mises en avant, celles que je trouve les plus pertinente à regarder</p>
|
||||
</div>
|
||||
|
||||
<div class="previews-section">
|
||||
|
||||
<article class="card card-preview card-primary">
|
||||
<a href="crea-ecrit.html" 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="crea-ecrit.html" 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="crea-ecrit.html" 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="crea-image.html" class="preview-link">
|
||||
<div class="preview-item">
|
||||
<div class="preview-content"><p class="p-img"><img src="img/wmap.png" alt="Card image cap"></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="crea-ecrit.html" 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="crea-image.html" class="preview-link">
|
||||
<div class="preview-item">
|
||||
<div class="preview-content"><p class="p-img"><img src="img/wmap.png" alt="Card image cap"></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="crea-ecrit.html" 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="crea-ecrit.html" 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="crea-image.html" class="preview-link">
|
||||
<div class="preview-item">
|
||||
<div class="preview-content"><p class="p-img"><img src="img/wmap.png" alt="Card image cap"></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="crea-image.html" class="preview-link">
|
||||
<div class="preview-item">
|
||||
<div class="preview-content"><p class="p-img"><img src="img/wmap.png" alt="Card image cap"></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>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</main>
|
||||
|
||||
<section class="sidebar">
|
||||
<div class="card card-primary">
|
||||
<div class="card-header"><i class="fa fa-rss"></i> Publications</div>
|
||||
<div class="card-menu">
|
||||
<a href="#" class="menu-element"><span class="trim-that">#WRITOBER2019 - Ring</span></a>
|
||||
<a href="#" class="menu-element"><span class="trim-that">Petite histoire uchronique du système solaire (4)</span></a>
|
||||
<a href="#" class="menu-element"><span class="trim-that">#WRITOBER2019 - Ring</span></a>
|
||||
<a href="#" class="menu-element"><span class="trim-that">#WRITOBER2019 - Ring</span></a>
|
||||
<a href="#" class="menu-element"><span class="trim-that">#WRITOBER2019 - Ring</span></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card card-primary">
|
||||
<div class="card-header"><i class="fa fa-folder"></i> Catégories</div>
|
||||
<div class="card-menu">
|
||||
<a href="crea-category.html" class="menu-element">Nouvelles et formats courts <span class="menu-label label-secondary">40</span></a>
|
||||
<a href="crea-category.html" class="menu-element">Contes et légendes <span class="menu-label label-secondary">11</span></a>
|
||||
<a href="crea-category.html" class="menu-element">Poèmes <span class="menu-label label-secondary">11</span></a>
|
||||
<a href="crea-category.html" class="menu-element">Romans <span class="menu-label label-secondary">0</span></a>
|
||||
<a href="crea-category.html" class="menu-element">Logo et Design <span class="menu-label label-secondary">0</span></a>
|
||||
<a href="crea-category.html" class="menu-element">Mapping et Pixel Art <span class="menu-label label-secondary">0</span></a>
|
||||
<div class="menu-divider">FICHES</div>
|
||||
<a href="#" class="menu-element">Univers <span class="menu-label label-secondary">4</span></a>
|
||||
<a href="#" class="menu-element">Personnages <span class="menu-label label-secondary">uwu</span></a>
|
||||
<div class="menu-divider">BLOG</div>
|
||||
<a href="blog-category.html" class="menu-element">Niouzes site et perso <span class="menu-label label-secondary">2</span></a>
|
||||
<a href="blog-category.html" class="menu-element">Réflexions et pensées <span class="menu-label label-secondary">0</span></a>
|
||||
<a href="blog-category.html" class="menu-element">Militantisme <span class="menu-label label-secondary">4</span></a>
|
||||
<a href="blog-category.html" class="menu-element">Conseils et partages <span class="menu-label label-secondary">-1</span></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card card-primary">
|
||||
<div class="card-header"><i class="fa fa-calendar-o"></i> Archives</div>
|
||||
<div class="card-menu">
|
||||
<a href="#" class="menu-element">Octobre 2019 <span class="menu-label label-secondary">1</span></a>
|
||||
<a href="#" class="menu-element">2018 <span class="menu-label label-secondary">3</span></a>
|
||||
<a href="#" class="menu-element">2017 <span class="menu-label label-secondary">50</span></a>
|
||||
<a href="#" class="menu-element">2016 <span class="menu-label label-secondary">8</span></a>
|
||||
<a href="#" class="menu-element">2015 <span class="menu-label label-secondary">2</span></a>
|
||||
<a href="#" class="menu-element">2010 - 2014 <span class="menu-label label-secondary">27</span></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<footer>
|
||||
<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">
|
||||
<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">
|
||||
<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">
|
||||
<p>Lorem Ipsum.</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="js/trim.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,269 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Blue Sky, by Kazhnuz</title>
|
||||
|
||||
<!-- meta -->
|
||||
<meta name="description" content="">
|
||||
<meta name="author" content="">
|
||||
|
||||
<!-- mon icon -->
|
||||
<link rel="shortcut icon" href="img/favicon.png">
|
||||
|
||||
<!-- framework utilisés -->
|
||||
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,400i,600,800&display=swap" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css?family=Amatic+SC&display=swap" rel="stylesheet">
|
||||
<link href="dep/spectre/css/spectre.min.css" rel="stylesheet">
|
||||
<link href="dep/fork-awesome/css/fork-awesome.css" rel="stylesheet">
|
||||
|
||||
<link href="style.css" rel="stylesheet">
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="wrapper">
|
||||
|
||||
<header id="page-header">
|
||||
<div class="columns">
|
||||
<div class="column col-6">
|
||||
<h1><img src="img/logo.png" alt="Kazhnuz"/></h1>
|
||||
</div>
|
||||
|
||||
<div class="column col-md-6">
|
||||
<nav class="navbar">
|
||||
<section class="navbar-section">
|
||||
|
||||
</section>
|
||||
<section class="navbar-section">
|
||||
<a href="blog.html" class="btn btn-link">Blog</a>
|
||||
<a href="crea.html" class="btn btn-link">Gallerie</a>
|
||||
<a href="apropos.html" class="btn btn-link">A propos</a>
|
||||
</section>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
|
||||
<div class="container-blog" id="page-content">
|
||||
<main class="mainpane">
|
||||
<article class="maintext">
|
||||
<h1>Bienvenue sur kazhnuz.space !</h1>
|
||||
<p>Bonjour, et bienvenue sur Kazhnuz Space, mon blog créatif et personnel ! Je suis le tenancier de ce blog, et juste une personne qui aime bien créer des choses, et les partager sur internet. C'est ici que je poste toute mes créations - qu'elles soient graphiques, textuelles, voir vidéoludiques - mais également quelques textes personelles ou des pensées plus ou moins "philosophiques".</p>
|
||||
<p>J'espère que vous passerez un bon moment sur ce blog, à lire mes petites bétises :)</p>
|
||||
</article>
|
||||
|
||||
<section>
|
||||
|
||||
<h1>Dernier article sur le blog</h1>
|
||||
|
||||
<div class="card card-primary">
|
||||
<div class="card-header"><h1>Test article de blog</h1></div>
|
||||
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Repudiandae rerum, sapiente possimus ullam laboriosam dolorum dicta quas laborum maiores, accusantium eveniet sunt, dolor necessitatibus quo! Ducimus a consequuntur vero sapiente.</p>
|
||||
|
||||
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Repudiandae rerum, sapiente possimus ullam laboriosam dolorum dicta quas laborum maiores, accusantium eveniet sunt, dolor necessitatibus quo! Ducimus a consequuntur vero sapiente.</p>
|
||||
<p class="align-center"> <a href="blog-article.html" class="btn btn-readmore">Lire l'article</a> </p>
|
||||
</div>
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
<div class="previews-section">
|
||||
|
||||
<article class="card card-preview card-primary">
|
||||
<a href="crea-image.html" class="preview-link">
|
||||
<div class="preview-item">
|
||||
<div class="preview-content"><p class="p-img"><img src="img/wmap.png" alt="Card image cap"></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="crea-ecrit.html" 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="crea-ecrit.html" 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="crea-image.html" class="preview-link">
|
||||
<div class="preview-item">
|
||||
<div class="preview-content"><p class="p-img"><img src="img/wmap.png" alt="Card image cap"></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="crea-ecrit.html" 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>
|
||||
|
||||
</div>
|
||||
|
||||
<img src="https://kazhnuz.space/data/medias/incoming____by_kazhnuz-d5o055l.gif" alt="Une armée de cochon regarde de manière menaçante." class="pigimg" />
|
||||
|
||||
</main>
|
||||
<section class="sidebar">
|
||||
<div class="card card-primary">
|
||||
<div class="card-header">Cémwha</div>
|
||||
<p class="mwarea"><img src="https://kazhnuz.space/data/medias/spritemwah.png" alt="Une armée de cochon regarde de manière menaçante." class="mwaimg" /></p>
|
||||
<table style="width:100%" class="table-primary">
|
||||
<tr>
|
||||
<th>PSEUDO</th>
|
||||
<td>Kazhnuz</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Age</th>
|
||||
<td>26</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Pronoms</th>
|
||||
<td>iel/il</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>OS</th>
|
||||
<td>Fedora</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Outils</th>
|
||||
<td>LibreOffice & Krita</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="card card-primary">
|
||||
<div class="card-header"><i class="fa fa-rss"></i> Publications</div>
|
||||
<div class="card-menu">
|
||||
<a href="#" class="menu-element"><span class="trim-that">#WRITOBER2019 - Ring</span></a>
|
||||
<a href="#" class="menu-element"><span class="trim-that">Petite histoire uchronique du système solaire (4)</span></a>
|
||||
<a href="#" class="menu-element"><span class="trim-that">#WRITOBER2019 - Ring</span></a>
|
||||
<a href="#" class="menu-element"><span class="trim-that">#WRITOBER2019 - Ring</span></a>
|
||||
<a href="#" class="menu-element"><span class="trim-that">#WRITOBER2019 - Ring</span></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card card-primary">
|
||||
<div class="card-header"><i class="fa fa-folder"></i> Catégories</div>
|
||||
<div class="card-menu">
|
||||
<a href="crea-category.html" class="menu-element">Nouvelles et formats courts <span class="menu-label label-secondary">40</span></a>
|
||||
<a href="crea-category.html" class="menu-element">Contes et légendes <span class="menu-label label-secondary">11</span></a>
|
||||
<a href="crea-category.html" class="menu-element">Poèmes <span class="menu-label label-secondary">11</span></a>
|
||||
<a href="crea-category.html" class="menu-element">Romans <span class="menu-label label-secondary">0</span></a>
|
||||
<a href="crea-category.html" class="menu-element">Logo et Design <span class="menu-label label-secondary">0</span></a>
|
||||
<a href="crea-category.html" class="menu-element">Mapping et Pixel Art <span class="menu-label label-secondary">0</span></a>
|
||||
<div class="menu-divider">FICHES</div>
|
||||
<a href="#" class="menu-element">Univers <span class="menu-label label-secondary">4</span></a>
|
||||
<a href="#" class="menu-element">Personnages <span class="menu-label label-secondary">uwu</span></a>
|
||||
<div class="menu-divider">BLOG</div>
|
||||
<a href="blog-category.html" class="menu-element">Niouzes site et perso <span class="menu-label label-secondary">2</span></a>
|
||||
<a href="blog-category.html" class="menu-element">Réflexions et pensées <span class="menu-label label-secondary">0</span></a>
|
||||
<a href="blog-category.html" class="menu-element">Militantisme <span class="menu-label label-secondary">4</span></a>
|
||||
<a href="blog-category.html" class="menu-element">Conseils et partages <span class="menu-label label-secondary">-1</span></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card card-primary">
|
||||
<div class="card-header"><i class="fa fa-calendar-o"></i> Archives</div>
|
||||
<div class="card-menu">
|
||||
<a href="#" class="menu-element">Octobre 2019 <span class="menu-label label-secondary">1</span></a>
|
||||
<a href="#" class="menu-element">2018 <span class="menu-label label-secondary">3</span></a>
|
||||
<a href="#" class="menu-element">2017 <span class="menu-label label-secondary">50</span></a>
|
||||
<a href="#" class="menu-element">2016 <span class="menu-label label-secondary">8</span></a>
|
||||
<a href="#" class="menu-element">2015 <span class="menu-label label-secondary">2</span></a>
|
||||
<a href="#" class="menu-element">2010 - 2014 <span class="menu-label label-secondary">27</span></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</section>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<footer>
|
||||
<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">
|
||||
<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">
|
||||
<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">
|
||||
<p>Lorem Ipsum.</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="js/trim.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
var length = 35;
|
||||
|
||||
var texts = document.getElementsByClassName('trim-that');
|
||||
|
||||
for (var i = 0; i < texts.length; i++) {
|
||||
var text = texts[i];
|
||||
var string = text.innerHTML
|
||||
var trimmedString = string.length > length ?
|
||||
string.substring(0, length - 3) + "..." :
|
||||
string
|
||||
|
||||
text.innerHTML = trimmedString
|
||||
console.log(text.innerHTML);
|
||||
}
|
||||
|
|
@ -0,0 +1,190 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Blue Sky, by Kazhnuz</title>
|
||||
|
||||
<!-- meta -->
|
||||
<meta name="description" content="">
|
||||
<meta name="author" content="">
|
||||
|
||||
<!-- mon icon -->
|
||||
<link rel="shortcut icon" href="img/favicon.png">
|
||||
|
||||
<!-- framework utilisés -->
|
||||
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,400i,600,800&display=swap" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css?family=Amatic+SC&display=swap" rel="stylesheet">
|
||||
<link href="dep/spectre/css/spectre.min.css" rel="stylesheet">
|
||||
<link href="dep/fork-awesome/css/fork-awesome.css" rel="stylesheet">
|
||||
|
||||
<link href="style.css" rel="stylesheet">
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="wrapper">
|
||||
|
||||
<header id="page-header">
|
||||
<div class="columns">
|
||||
<div class="column col-6">
|
||||
<h1><img src="img/logo.png" alt="Kazhnuz"/></h1>
|
||||
</div>
|
||||
|
||||
<div class="column col-md-6">
|
||||
<nav class="navbar">
|
||||
<section class="navbar-section">
|
||||
|
||||
</section>
|
||||
<section class="navbar-section">
|
||||
<a href="blog.html" class="btn btn-link">Blog</a>
|
||||
<a href="crea.html" class="btn btn-link">Gallerie</a>
|
||||
<a href="apropos.html" class="btn btn-link">A propos</a>
|
||||
</section>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
|
||||
<div class="container-personnage" id="page-content">
|
||||
<h1 class="personnage-nomp">Katos Skelfing</h1>
|
||||
<div class="card card-primary personnage-meta">
|
||||
<h2 class="card-header">Méta</h2>
|
||||
<img src="" />
|
||||
<table class="table-primary">
|
||||
<tr>
|
||||
<th>Prénom</th>
|
||||
<td>Katos</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Nom</th>
|
||||
<td>Skelfing</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Genre</th>
|
||||
<td>Garçon</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Espèce</th>
|
||||
<td>Lëonth</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Âge</th>
|
||||
<td>16 ans</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Anniversaire</th>
|
||||
<td>18 Aout</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Univers</th>
|
||||
<td>Radiant Skies</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="card card-primary personnage-info">
|
||||
<h2 class="card-header">Informations principales</h2>
|
||||
<table class="table-primary">
|
||||
<tr>
|
||||
<th>Pouvoirs</th>
|
||||
<td>Guilde de l'Energie (healer/dps)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Rôle/Emploi</th>
|
||||
<td>Prince (en fuite) de l'Empire Skelfing</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Affiliation</th>
|
||||
<td>Les Cieux Radiants</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Lieu d'habitation</th>
|
||||
<td>Les grandes espaces de l'Empire</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="card card-primary personnage-goss">
|
||||
<h2 class="card-header">gossip</h2>
|
||||
<table class="table-primary">
|
||||
<tr>
|
||||
<th>Orientation</th>
|
||||
<td>Bisexuel</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Situation</th>
|
||||
<td>Célibataire</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="card card-primary personnage-look">
|
||||
<h2 class="card-header">Apparence</h2>
|
||||
<table class="table-primary">
|
||||
<tr>
|
||||
<th>Corpulence</th>
|
||||
<td>Petit et trapu</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="card card-success personnage-aime">
|
||||
<h2 class="card-header">Aime</h2>
|
||||
<ul class="card-list list-success list-check">
|
||||
<li class="list-element">Se balader</li>
|
||||
<li class="list-element">Manger</li>
|
||||
<li class="list-element">Se cacher</li>
|
||||
<li class="list-element">Être happy de la vie</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="card card-danger personnage-dete">
|
||||
<h2 class="card-header">N'aime pas</h2>
|
||||
<ul class="card-list list-danger list-cross">
|
||||
<li class="list-element">Se faire poursuivre</li>
|
||||
<li class="list-element">L'empire</li>
|
||||
<li class="list-element">La guerre</li>
|
||||
<li class="list-element">Réussir à s'enfermer dans un coffre :<</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="card card-primary personnage-hist">
|
||||
<h2 class="card-header">Histoire</h2>
|
||||
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate, voluptate. Expedita nostrum earum soluta voluptatem, dolorum architecto necessitatibus laudantium obcaecati rerum maiores neque esse, quas corporis debitis at? Qui, rem!</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<footer>
|
||||
<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">
|
||||
<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">
|
||||
<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">
|
||||
<p>Lorem Ipsum.</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="js/trim.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
body {
|
||||
background-color: #f8f9fa; }
|
||||
|
||||
#main-area {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100vh; }
|
||||
#main-area > .container {
|
||||
flex: 1; }
|
||||
|
||||
.card-connection {
|
||||
margin: auto;
|
||||
max-width: 360px; }
|
||||
|
||||
.container-password {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
width: 100%; }
|
||||
|
|
@ -181,7 +181,7 @@
|
|||
</div>
|
||||
|
||||
<div class="column">
|
||||
<p>Lorem Ipsum.</p>
|
||||
<p>Connection à <a href="admin/connection.html">l'interface administrateur</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
|
|
|||
|
|
@ -65,7 +65,7 @@
|
|||
</div>
|
||||
|
||||
<div class="column">
|
||||
<p>Lorem Ipsum.</p>
|
||||
<p>Connection à <a href="admin/connection.html">l'interface administrateur</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
|
|
|||
|
|
@ -215,7 +215,7 @@
|
|||
</div>
|
||||
|
||||
<div class="column">
|
||||
<p>Lorem Ipsum.</p>
|
||||
<p>Connection à <a href="admin/connection.html">l'interface administrateur</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
|
|
|||
|
|
@ -176,7 +176,7 @@
|
|||
</div>
|
||||
|
||||
<div class="column">
|
||||
<p>Lorem Ipsum.</p>
|
||||
<p>Connection à <a href="admin/connection.html">l'interface administrateur</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
|
|
|||
|
|
@ -183,7 +183,7 @@
|
|||
</div>
|
||||
|
||||
<div class="column">
|
||||
<p>Lorem Ipsum.</p>
|
||||
<p>Connection à <a href="admin/connection.html">l'interface administrateur</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
|
|
|||
|
|
@ -265,7 +265,7 @@ In id suscipit elit.</code></pre>
|
|||
</div>
|
||||
|
||||
<div class="column">
|
||||
<p>Lorem Ipsum.</p>
|
||||
<p>Connection à <a href="admin/connection.html">l'interface administrateur</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
|
|
|||
|
|
@ -312,7 +312,7 @@
|
|||
</div>
|
||||
|
||||
<div class="column">
|
||||
<p>Lorem Ipsum.</p>
|
||||
<p>Connection à <a href="admin/connection.html">l'interface administrateur</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
|
|
|||
|
|
@ -202,7 +202,7 @@
|
|||
</div>
|
||||
|
||||
<div class="column">
|
||||
<p>Lorem Ipsum.</p>
|
||||
<p>Connection à <a href="admin/connection.html">l'interface administrateur</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
|
|
|||
|
|
@ -164,7 +164,7 @@
|
|||
</div>
|
||||
|
||||
<div class="column">
|
||||
<p>Lorem Ipsum.</p>
|
||||
<p>Connection à <a href="admin/connection.html">l'interface administrateur</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
|
|
|||
|
|
@ -307,7 +307,7 @@
|
|||
</div>
|
||||
|
||||
<div class="column">
|
||||
<p>Lorem Ipsum.</p>
|
||||
<p>Connection à <a href="admin/connection.html">l'interface administrateur</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,331 @@
|
|||
/*!
|
||||
* Bootstrap Reboot v4.3.1 (https://getbootstrap.com/)
|
||||
* Copyright 2011-2019 The Bootstrap Authors
|
||||
* Copyright 2011-2019 Twitter, Inc.
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
|
||||
* Forked from Normalize.css, licensed MIT (https://github.com/necolas/normalize.css/blob/master/LICENSE.md)
|
||||
*/
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html {
|
||||
font-family: sans-serif;
|
||||
line-height: 1.15;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
|
||||
article, aside, figcaption, figure, footer, header, hgroup, main, nav, section {
|
||||
display: block;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
||||
font-size: 1rem;
|
||||
font-weight: 400;
|
||||
line-height: 1.5;
|
||||
color: #212529;
|
||||
text-align: left;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
[tabindex="-1"]:focus {
|
||||
outline: 0 !important;
|
||||
}
|
||||
|
||||
hr {
|
||||
box-sizing: content-box;
|
||||
height: 0;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-top: 0;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
abbr[title],
|
||||
abbr[data-original-title] {
|
||||
text-decoration: underline;
|
||||
-webkit-text-decoration: underline dotted;
|
||||
text-decoration: underline dotted;
|
||||
cursor: help;
|
||||
border-bottom: 0;
|
||||
-webkit-text-decoration-skip-ink: none;
|
||||
text-decoration-skip-ink: none;
|
||||
}
|
||||
|
||||
address {
|
||||
margin-bottom: 1rem;
|
||||
font-style: normal;
|
||||
line-height: inherit;
|
||||
}
|
||||
|
||||
ol,
|
||||
ul,
|
||||
dl {
|
||||
margin-top: 0;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
ol ol,
|
||||
ul ul,
|
||||
ol ul,
|
||||
ul ol {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
dt {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
dd {
|
||||
margin-bottom: .5rem;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
margin: 0 0 1rem;
|
||||
}
|
||||
|
||||
b,
|
||||
strong {
|
||||
font-weight: bolder;
|
||||
}
|
||||
|
||||
small {
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
sub,
|
||||
sup {
|
||||
position: relative;
|
||||
font-size: 75%;
|
||||
line-height: 0;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
sub {
|
||||
bottom: -.25em;
|
||||
}
|
||||
|
||||
sup {
|
||||
top: -.5em;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #007bff;
|
||||
text-decoration: none;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: #0056b3;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
a:not([href]):not([tabindex]) {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:not([href]):not([tabindex]):hover, a:not([href]):not([tabindex]):focus {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:not([href]):not([tabindex]):focus {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
pre,
|
||||
code,
|
||||
kbd,
|
||||
samp {
|
||||
font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
pre {
|
||||
margin-top: 0;
|
||||
margin-bottom: 1rem;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
figure {
|
||||
margin: 0 0 1rem;
|
||||
}
|
||||
|
||||
img {
|
||||
vertical-align: middle;
|
||||
border-style: none;
|
||||
}
|
||||
|
||||
svg {
|
||||
overflow: hidden;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
caption {
|
||||
padding-top: 0.75rem;
|
||||
padding-bottom: 0.75rem;
|
||||
color: #6c757d;
|
||||
text-align: left;
|
||||
caption-side: bottom;
|
||||
}
|
||||
|
||||
th {
|
||||
text-align: inherit;
|
||||
}
|
||||
|
||||
label {
|
||||
display: inline-block;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
button {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
button:focus {
|
||||
outline: 1px dotted;
|
||||
outline: 5px auto -webkit-focus-ring-color;
|
||||
}
|
||||
|
||||
input,
|
||||
button,
|
||||
select,
|
||||
optgroup,
|
||||
textarea {
|
||||
margin: 0;
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
line-height: inherit;
|
||||
}
|
||||
|
||||
button,
|
||||
input {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
button,
|
||||
select {
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
select {
|
||||
word-wrap: normal;
|
||||
}
|
||||
|
||||
button,
|
||||
[type="button"],
|
||||
[type="reset"],
|
||||
[type="submit"] {
|
||||
-webkit-appearance: button;
|
||||
}
|
||||
|
||||
button:not(:disabled),
|
||||
[type="button"]:not(:disabled),
|
||||
[type="reset"]:not(:disabled),
|
||||
[type="submit"]:not(:disabled) {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button::-moz-focus-inner,
|
||||
[type="button"]::-moz-focus-inner,
|
||||
[type="reset"]::-moz-focus-inner,
|
||||
[type="submit"]::-moz-focus-inner {
|
||||
padding: 0;
|
||||
border-style: none;
|
||||
}
|
||||
|
||||
input[type="radio"],
|
||||
input[type="checkbox"] {
|
||||
box-sizing: border-box;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
input[type="date"],
|
||||
input[type="time"],
|
||||
input[type="datetime-local"],
|
||||
input[type="month"] {
|
||||
-webkit-appearance: listbox;
|
||||
}
|
||||
|
||||
textarea {
|
||||
overflow: auto;
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
min-width: 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
legend {
|
||||
display: block;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
padding: 0;
|
||||
margin-bottom: .5rem;
|
||||
font-size: 1.5rem;
|
||||
line-height: inherit;
|
||||
color: inherit;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
progress {
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
[type="number"]::-webkit-inner-spin-button,
|
||||
[type="number"]::-webkit-outer-spin-button {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
[type="search"] {
|
||||
outline-offset: -2px;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
[type="search"]::-webkit-search-decoration {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
::-webkit-file-upload-button {
|
||||
font: inherit;
|
||||
-webkit-appearance: button;
|
||||
}
|
||||
|
||||
output {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
summary {
|
||||
display: list-item;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
template {
|
||||
display: none;
|
||||
}
|
||||
|
||||
[hidden] {
|
||||
display: none !important;
|
||||
}
|
||||
/*# sourceMappingURL=bootstrap-reboot.css.map */
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,8 @@
|
|||
/*!
|
||||
* Bootstrap Reboot v4.3.1 (https://getbootstrap.com/)
|
||||
* Copyright 2011-2019 The Bootstrap Authors
|
||||
* Copyright 2011-2019 Twitter, Inc.
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
|
||||
* Forked from Normalize.css, licensed MIT (https://github.com/necolas/normalize.css/blob/master/LICENSE.md)
|
||||
*/*,::after,::before{box-sizing:border-box}html{font-family:sans-serif;line-height:1.15;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}article,aside,figcaption,figure,footer,header,hgroup,main,nav,section{display:block}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";font-size:1rem;font-weight:400;line-height:1.5;color:#212529;text-align:left;background-color:#fff}[tabindex="-1"]:focus{outline:0!important}hr{box-sizing:content-box;height:0;overflow:visible}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:.5rem}p{margin-top:0;margin-bottom:1rem}abbr[data-original-title],abbr[title]{text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;cursor:help;border-bottom:0;-webkit-text-decoration-skip-ink:none;text-decoration-skip-ink:none}address{margin-bottom:1rem;font-style:normal;line-height:inherit}dl,ol,ul{margin-top:0;margin-bottom:1rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}dt{font-weight:700}dd{margin-bottom:.5rem;margin-left:0}blockquote{margin:0 0 1rem}b,strong{font-weight:bolder}small{font-size:80%}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}a{color:#007bff;text-decoration:none;background-color:transparent}a:hover{color:#0056b3;text-decoration:underline}a:not([href]):not([tabindex]){color:inherit;text-decoration:none}a:not([href]):not([tabindex]):focus,a:not([href]):not([tabindex]):hover{color:inherit;text-decoration:none}a:not([href]):not([tabindex]):focus{outline:0}code,kbd,pre,samp{font-family:SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;font-size:1em}pre{margin-top:0;margin-bottom:1rem;overflow:auto}figure{margin:0 0 1rem}img{vertical-align:middle;border-style:none}svg{overflow:hidden;vertical-align:middle}table{border-collapse:collapse}caption{padding-top:.75rem;padding-bottom:.75rem;color:#6c757d;text-align:left;caption-side:bottom}th{text-align:inherit}label{display:inline-block;margin-bottom:.5rem}button{border-radius:0}button:focus{outline:1px dotted;outline:5px auto -webkit-focus-ring-color}button,input,optgroup,select,textarea{margin:0;font-family:inherit;font-size:inherit;line-height:inherit}button,input{overflow:visible}button,select{text-transform:none}select{word-wrap:normal}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]:not(:disabled),[type=reset]:not(:disabled),[type=submit]:not(:disabled),button:not(:disabled){cursor:pointer}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{padding:0;border-style:none}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=date],input[type=datetime-local],input[type=month],input[type=time]{-webkit-appearance:listbox}textarea{overflow:auto;resize:vertical}fieldset{min-width:0;padding:0;margin:0;border:0}legend{display:block;width:100%;max-width:100%;padding:0;margin-bottom:.5rem;font-size:1.5rem;line-height:inherit;color:inherit;white-space:normal}progress{vertical-align:baseline}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{outline-offset:-2px;-webkit-appearance:none}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{font:inherit;-webkit-appearance:button}output{display:inline-block}summary{display:list-item;cursor:pointer}template{display:none}[hidden]{display:none!important}
|
||||
/*# sourceMappingURL=bootstrap-reboot.min.css.map */
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -259,7 +259,7 @@
|
|||
</div>
|
||||
|
||||
<div class="column">
|
||||
<p>Lorem Ipsum.</p>
|
||||
<p>Connection à <a href="admin/connection.html">l'interface administrateur</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
|
|
|||
|
|
@ -180,7 +180,7 @@
|
|||
</div>
|
||||
|
||||
<div class="column">
|
||||
<p>Lorem Ipsum.</p>
|
||||
<p>Connection à <a href="admin/connection.html">l'interface administrateur</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
|
|
|||
21
gulpfile.js
21
gulpfile.js
|
|
@ -21,16 +21,31 @@ function js() {
|
|||
.pipe(dest('dist/js'))
|
||||
}
|
||||
|
||||
function htmladmin() {
|
||||
return src('src-admin/*.html')
|
||||
.pipe(include())
|
||||
.pipe(dest('dist/admin'))
|
||||
}
|
||||
|
||||
function cssadmin() {
|
||||
return src('src-admin/scss/style.scss')
|
||||
.pipe(sass().on('error', sass.logError))
|
||||
.pipe(dest('dist/admin'))
|
||||
}
|
||||
|
||||
function jsadmin() {
|
||||
return src('src-admin/js/*.js')
|
||||
.pipe(dest('dist/admin/js'))
|
||||
}
|
||||
|
||||
function dep() {
|
||||
return src(['dep/**/*'])
|
||||
.pipe(dest('dist/dep'));
|
||||
|
||||
}
|
||||
|
||||
function assets() {
|
||||
return src(['assets/**/*'])
|
||||
.pipe(dest('dist'));
|
||||
|
||||
}
|
||||
|
||||
exports.html = html;
|
||||
|
|
@ -38,4 +53,4 @@ exports.css = css;
|
|||
exports.js = js;
|
||||
exports.dep = dep;
|
||||
exports.assets = assets;
|
||||
exports.default = parallel(html, css, js, dep, assets);
|
||||
exports.default = parallel(html, css, js, dep, assets, htmladmin, cssadmin, jsadmin);
|
||||
|
|
|
|||
|
|
@ -0,0 +1,21 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Insert title here</title>
|
||||
<!--=include includes/_links.html -->
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div id="main-area">
|
||||
<!--=include includes/_navbar.html -->
|
||||
<div class="container">
|
||||
<!-- debut de la partie modifiable -->
|
||||
|
||||
|
||||
<!-- fin de la partie modifiable -->
|
||||
</div>
|
||||
<!--=include includes/_footer.html -->
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Insert title here</title>
|
||||
<!--=include includes/_links.html -->
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div id="main-area">
|
||||
<div class="container container-password">
|
||||
<!-- debut de la partie modifiable -->
|
||||
<div class="card card-connection">
|
||||
<div class="card-header">
|
||||
Se connecter
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="form-group">
|
||||
<input type="text" class="form-control" id="pseudo" aria-describedby="pseudo" placeholder="Pseudonyme">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<input type="password" class="form-control" id="password" aria-describedby="password" placeholder="Password">
|
||||
</div>
|
||||
|
||||
<a href="#" class="btn btn-success btn-block">CONNEXION</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- fin de la partie modifiable -->
|
||||
</div>
|
||||
<!--=include includes/_footer.html -->
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
<nav class="nav justify-content-end">
|
||||
<span class="nav-link disabled">Created with <i class="text-danger fa fa-heart"></i> with Bootstrap4 and Fork-Awesome</span>
|
||||
</nav>
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
<link rel="stylesheet" href="../dep/bootstrap/css/bootstrap.min.css">
|
||||
<link rel="stylesheet" href="../dep/fork-awesome/css/fork-awesome.min.css">
|
||||
<link rel="stylesheet" href="style.css">
|
||||
|
||||
<script src="jquery/jquery.js"></script>
|
||||
<script src="bootstrap/js/bootstrap.min.js"></script>
|
||||
<script src="script.js"></script>
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
<nav class="navbar navbar-expand-lg navbar-light bg-light mb-4">
|
||||
<a class="navbar-brand" href="#">ESPACE ADMIN</a>
|
||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
|
||||
<div class="collapse navbar-collapse" id="navbarSupportedContent">
|
||||
<span class="navbar-text mr-auto">
|
||||
Connecté en tant que Kazhnuz
|
||||
</span>
|
||||
<ul class="navbar-nav my-2 my-lg-0">
|
||||
<li class="nav-item">
|
||||
<a class="btn btn-danger" href="#">Déconnexion</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
body {
|
||||
background-color: #f8f9fa;
|
||||
}
|
||||
|
||||
#main-area {
|
||||
flex:1;
|
||||
display:flex;
|
||||
flex-direction:column;
|
||||
min-height: 100vh;
|
||||
|
||||
&>.container {
|
||||
flex:1;
|
||||
}
|
||||
}
|
||||
|
||||
// Password-specific stuff
|
||||
|
||||
.card-connection {
|
||||
margin: auto;
|
||||
max-width: 360px;
|
||||
}
|
||||
|
||||
.container-password {
|
||||
flex:1;
|
||||
display:flex;
|
||||
justify-content: center;
|
||||
width:100%;
|
||||
}
|
||||
|
|
@ -19,7 +19,7 @@
|
|||
</div>
|
||||
|
||||
<div class="column">
|
||||
<p>Lorem Ipsum.</p>
|
||||
<p>Connection à <a href="admin/connection.html">l'interface administrateur</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
|
|
|||
Reference in New Issue