meta: use gulp for compiling the mockups
This commit is contained in:
Kazhnuz
parent
30f013ab76
commit
332bc8f0e3
|
Before Width: | Height: | Size: 1.2 KiB After Width: | Height: | Size: 1.2 KiB |
|
Before Width: | Height: | Size: 4.1 KiB After Width: | Height: | Size: 4.1 KiB |
|
Before Width: | Height: | Size: 147 KiB After Width: | Height: | Size: 147 KiB |
|
Before Width: | Height: | Size: 27 KiB After Width: | Height: | Size: 27 KiB |
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
|
|
@ -0,0 +1,446 @@
|
|||
/*!
|
||||
Fork Awesome 1.1.7
|
||||
License - https://forkaweso.me/Fork-Awesome/license
|
||||
|
||||
Copyright 2018 Dave Gandy & Fork Awesome
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
||||
*/
|
||||
.fas,
|
||||
.fab,
|
||||
.far {
|
||||
display: inline-block;
|
||||
font: normal normal normal 14px/1 ForkAwesome;
|
||||
font-size: inherit;
|
||||
text-rendering: auto;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
.fas.fa-chart-area:before {
|
||||
content: "\f1fe";
|
||||
}
|
||||
.fas.fa-arrows-alt:before {
|
||||
content: "\f047";
|
||||
}
|
||||
.fas.fa-expand-arrows-alt:before {
|
||||
content: "\f0b2";
|
||||
}
|
||||
.fas.fa-arrows-alt-h:before {
|
||||
content: "\f07e";
|
||||
}
|
||||
.fas.fa-arrows-alt-v:before {
|
||||
content: "\f07d";
|
||||
}
|
||||
.fas.fa-calendar-alt:before {
|
||||
content: "\f073";
|
||||
}
|
||||
.fas.fa-circle-notch:before {
|
||||
content: "\f1ce";
|
||||
}
|
||||
.fas.fa-cloud-download-alt:before {
|
||||
content: "\f0ed";
|
||||
}
|
||||
.fas.fa-cloud-upload-alt:before {
|
||||
content: "\f0ee";
|
||||
}
|
||||
.fas.fa-credit-card:before {
|
||||
content: "\f283";
|
||||
}
|
||||
.fas.fa-dollar-sign:before {
|
||||
content: "\f155";
|
||||
}
|
||||
.fas.fa-euro-sign:before {
|
||||
content: "\f153";
|
||||
}
|
||||
.fas.fa-exchange-alt:before {
|
||||
content: "\f0ec";
|
||||
}
|
||||
.fas.fa-external-link-alt:before {
|
||||
content: "\f08e";
|
||||
}
|
||||
.fas.fa-external-link-square-alt:before {
|
||||
content: "\f14c";
|
||||
}
|
||||
.fas.fa-eye-dropper:before {
|
||||
content: "\f1fb";
|
||||
}
|
||||
.fas.fa-pound-sign:before {
|
||||
content: "\f154";
|
||||
}
|
||||
.fas.fa-glass-martini:before {
|
||||
content: "\f000";
|
||||
}
|
||||
.fas.fa-shekel-sign:before {
|
||||
content: "\f20b";
|
||||
}
|
||||
.fas.fa-rupee-sign:before {
|
||||
content: "\f156";
|
||||
}
|
||||
.fas.fa-won-sign:before {
|
||||
content: "\f159";
|
||||
}
|
||||
.fas.fa-level-down-alt:before {
|
||||
content: "\f149";
|
||||
}
|
||||
.fas.fa-level-up-alt:before {
|
||||
content: "\f148";
|
||||
}
|
||||
.fas.fa-chart-line:before {
|
||||
content: "\f201";
|
||||
}
|
||||
.fas.fa-long-arrow-alt-down:before {
|
||||
content: "\f175";
|
||||
}
|
||||
.fas.fa-long-arrow-alt-left:before {
|
||||
content: "\f177";
|
||||
}
|
||||
.fas.fa-long-arrow-alt-right:before {
|
||||
content: "\f178";
|
||||
}
|
||||
.fas.fa-long-arrow-alt-up:before {
|
||||
content: "\f176";
|
||||
}
|
||||
.fas.fa-map-marker-alt:before {
|
||||
content: "\f041";
|
||||
}
|
||||
.fas.fa-mobile-alt:before {
|
||||
content: "\f10b";
|
||||
}
|
||||
.fas.fa-pencil-alt:before {
|
||||
content: "\f040";
|
||||
}
|
||||
.fas.fa-pen-square:before {
|
||||
content: "\f14b";
|
||||
}
|
||||
.fas.fa-chart-pie:before {
|
||||
content: "\f200";
|
||||
}
|
||||
.fas.fa-yen-sign:before {
|
||||
content: "\f157";
|
||||
}
|
||||
.fas.fa-ruble-sign:before {
|
||||
content: "\f158";
|
||||
}
|
||||
.fas.fa-shield-alt:before {
|
||||
content: "\f132";
|
||||
}
|
||||
.fas.fa-sign-in-alt:before {
|
||||
content: "\f090";
|
||||
}
|
||||
.fas.fa-sign-out-alt:before {
|
||||
content: "\f08b";
|
||||
}
|
||||
.fas.fa-sliders-h:before {
|
||||
content: "\f1de";
|
||||
}
|
||||
.fas.fa-tablet-alt:before {
|
||||
content: "\f10a";
|
||||
}
|
||||
.fas.fa-tachometer-alt:before {
|
||||
content: "\f0e4";
|
||||
}
|
||||
.fas.fa-thumbtack:before {
|
||||
content: "\f08d";
|
||||
}
|
||||
.fas.fa-ticket-alt:before {
|
||||
content: "\f145";
|
||||
}
|
||||
.fas.fa-trash-alt:before {
|
||||
content: "\f1f8";
|
||||
}
|
||||
.fas.fa-lira-sign:before {
|
||||
content: "\f195";
|
||||
}
|
||||
.fab.fa-linkedin-in:before {
|
||||
content: "\fe01";
|
||||
}
|
||||
.fab.fa-linkedin:before {
|
||||
content: "\f08c";
|
||||
}
|
||||
.far.fa-address-book:before {
|
||||
content: "\f2ba";
|
||||
}
|
||||
.far.fa-address-card:before {
|
||||
content: "\f2bc";
|
||||
}
|
||||
.far.fa-arrow-alt-circle-down:before {
|
||||
content: "\f01a";
|
||||
}
|
||||
.far.fa-arrow-alt-circle-left:before {
|
||||
content: "\f190";
|
||||
}
|
||||
.far.fa-arrow-alt-circle-right:before {
|
||||
content: "\f18e";
|
||||
}
|
||||
.far.fa-arrow-alt-circle-up:before {
|
||||
content: "\f01b";
|
||||
}
|
||||
.far.fa-bell:before {
|
||||
content: "\f0f3";
|
||||
}
|
||||
.far.fa-bell-slash:before {
|
||||
content: "\f1f7";
|
||||
}
|
||||
.far.fa-bookmark:before {
|
||||
content: "\f097";
|
||||
}
|
||||
.far.fa-building:before {
|
||||
content: "\f0f7";
|
||||
}
|
||||
.far.fa-calendar-check:before {
|
||||
content: "\f274";
|
||||
}
|
||||
.far.fa-calendar-minus:before {
|
||||
content: "\f272";
|
||||
}
|
||||
.far.fa-calendar:before {
|
||||
content: "\f133";
|
||||
}
|
||||
.far.fa-calendar-plus:before {
|
||||
content: "\f271";
|
||||
}
|
||||
.far.fa-calendar-times:before {
|
||||
content: "\f273";
|
||||
}
|
||||
.far.fa-caret-square-down:before {
|
||||
content: "\f150";
|
||||
}
|
||||
.far.fa-caret-square-left:before {
|
||||
content: "\f191";
|
||||
}
|
||||
.far.fa-caret-square-right:before {
|
||||
content: "\f152";
|
||||
}
|
||||
.far.fa-caret-square-up:before {
|
||||
content: "\f151";
|
||||
}
|
||||
.far.fa-check-circle:before {
|
||||
content: "\f05d";
|
||||
}
|
||||
.far.fa-check-square:before {
|
||||
content: "\f046";
|
||||
}
|
||||
.far.fa-circle:before {
|
||||
content: "\f10c";
|
||||
}
|
||||
.far.fa-clock:before {
|
||||
content: "\f017";
|
||||
}
|
||||
.far.fa-comment:before {
|
||||
content: "\f0e5";
|
||||
}
|
||||
.far.fa-comment-dots:before {
|
||||
content: "\f27b";
|
||||
}
|
||||
.far.fa-comments:before {
|
||||
content: "\f0e6";
|
||||
}
|
||||
.far.fa-dot-circle:before {
|
||||
content: "\f192";
|
||||
}
|
||||
.far.fa-id-card:before {
|
||||
content: "\f2c3";
|
||||
}
|
||||
.far.fa-envelope:before {
|
||||
content: "\f003";
|
||||
}
|
||||
.far.fa-envelope-open:before {
|
||||
content: "\f2b7";
|
||||
}
|
||||
.far.fa-file-archive:before {
|
||||
content: "\f1c6";
|
||||
}
|
||||
.far.fa-file-audio:before {
|
||||
content: "\f1c7";
|
||||
}
|
||||
.far.fa-file-code:before {
|
||||
content: "\f1c9";
|
||||
}
|
||||
.far.fa-file-excel:before {
|
||||
content: "\f1c3";
|
||||
}
|
||||
.far.fa-file-image:before {
|
||||
content: "\f1c5";
|
||||
}
|
||||
.far.fa-file-video:before {
|
||||
content: "\f1c8";
|
||||
}
|
||||
.far.fa-copy:before,
|
||||
.far.fa-file:before {
|
||||
content: "\f016";
|
||||
}
|
||||
.far.fa-file-pdf:before {
|
||||
content: "\f1c1";
|
||||
}
|
||||
.far.fa-file-powerpoint:before {
|
||||
content: "\f1c4";
|
||||
}
|
||||
.far.fa-file-alt:before {
|
||||
content: "\f0f6";
|
||||
}
|
||||
.far.fa-file-word:before {
|
||||
content: "\f1c2";
|
||||
}
|
||||
.far.fa-flag:before {
|
||||
content: "\f11d";
|
||||
}
|
||||
.far.fa-save:before {
|
||||
content: "\f0c7";
|
||||
}
|
||||
.far.fa-folder:before {
|
||||
content: "\f114";
|
||||
}
|
||||
.far.fa-folder-open:before {
|
||||
content: "\f115";
|
||||
}
|
||||
.far.fa-frown:before {
|
||||
content: "\f119";
|
||||
}
|
||||
.far.fa-futbol:before {
|
||||
content: "\f1e3";
|
||||
}
|
||||
.far.fa-hand-rock:before {
|
||||
content: "\f255";
|
||||
}
|
||||
.far.fa-hand-lizard:before {
|
||||
content: "\f258";
|
||||
}
|
||||
.far.fa-hand-point-down:before {
|
||||
content: "\f0a7";
|
||||
}
|
||||
.far.fa-hand-point-left:before {
|
||||
content: "\f0a5";
|
||||
}
|
||||
.far.fa-hand-point-right:before {
|
||||
content: "\f0a4";
|
||||
}
|
||||
.far.fa-hand-point-up:before {
|
||||
content: "\f0a6";
|
||||
}
|
||||
.far.fa-hand-paper:before {
|
||||
content: "\256";
|
||||
}
|
||||
.far.fa-hand-pointer:before {
|
||||
content: "\f25a";
|
||||
}
|
||||
.far.fa-hand-scissors:before {
|
||||
content: "\f257";
|
||||
}
|
||||
.far.fa-hand-spock:before {
|
||||
content: "\f259";
|
||||
}
|
||||
.far.fa-handshake:before {
|
||||
content: "\f2b5";
|
||||
}
|
||||
.far.fa-hdd:before {
|
||||
content: "\f0a0";
|
||||
}
|
||||
.far.fa-heart:before {
|
||||
content: "\f08a";
|
||||
}
|
||||
.far.fa-hospital:before {
|
||||
content: "\f0f8";
|
||||
}
|
||||
.far.fa-hourglass:before {
|
||||
content: "\f250";
|
||||
}
|
||||
.far.fa-id-card:before {
|
||||
content: "\f2c3";
|
||||
}
|
||||
.far.fa-keyboard:before {
|
||||
content: "\f11c";
|
||||
}
|
||||
.far.fa-lemon:before {
|
||||
content: "\f094";
|
||||
}
|
||||
.far.fa-lightbulb:before {
|
||||
content: "\f0eb";
|
||||
}
|
||||
.far.fa-meh:before {
|
||||
content: "\f11a";
|
||||
}
|
||||
.far.fa-minus-square:before {
|
||||
content: "\f147";
|
||||
}
|
||||
.far.fa-money-bill-alt:before {
|
||||
content: "\f0d6";
|
||||
}
|
||||
.far.fa-moon:before {
|
||||
content: "\f186";
|
||||
}
|
||||
.far.fa-newspaper:before {
|
||||
content: "\f1ea";
|
||||
}
|
||||
.far.fa-paper-plane:before {
|
||||
content: "\f1d9";
|
||||
}
|
||||
.far.fa-pause-circle:before {
|
||||
content: "\f28c";
|
||||
}
|
||||
.far.fa-edit:before {
|
||||
content: "\f044";
|
||||
}
|
||||
.far.fa-image:before {
|
||||
content: "\f03e";
|
||||
}
|
||||
.far.fa-play-circle:before {
|
||||
content: "\f01d";
|
||||
}
|
||||
.far.fa-plus-square:before {
|
||||
content: "\f196";
|
||||
}
|
||||
.far.fa-question-circle:before {
|
||||
content: "\f92c";
|
||||
}
|
||||
.far.fa-share-square:before {
|
||||
content: "\f045";
|
||||
}
|
||||
.far.fa-smile:before {
|
||||
content: "\f118";
|
||||
}
|
||||
.far.fa-snowflake:before {
|
||||
content: "\f2dc";
|
||||
}
|
||||
.far.fa-futbol:before {
|
||||
content: "\f1e3";
|
||||
}
|
||||
.far.fa-star-half:before {
|
||||
content: "\f089";
|
||||
}
|
||||
.far.fa-star:before {
|
||||
content: "\f006";
|
||||
}
|
||||
.far.fa-sticky-note:before {
|
||||
content: "\f24a";
|
||||
}
|
||||
.far.fa-stop-circle:before {
|
||||
content: "\f28e";
|
||||
}
|
||||
.far.fa-sun:before {
|
||||
content: "\f185";
|
||||
}
|
||||
.far.fa-thumbs-down:before {
|
||||
content: "\f088";
|
||||
}
|
||||
.far.fa-thumbs-up:before {
|
||||
content: "\f087";
|
||||
}
|
||||
.far.fa-times-circle:before {
|
||||
content: "\f05c";
|
||||
}
|
||||
.far.fa-window-close:before {
|
||||
content: "\f2d4";
|
||||
}
|
||||
.far.fa-trash-alt:before {
|
||||
content: "\f014";
|
||||
}
|
||||
.far.fa-user-circle:before {
|
||||
content: "\f2be";
|
||||
}
|
||||
.far.fa-user:before {
|
||||
content: "\f2c0";
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1 @@
|
|||
{"version":3,"sources":["v5-compat.css"],"names":[],"mappings":";;;;;;;;;;;AAaA,KACA,KAFA,KAGE,QAAA,aACA,KAAA,OAAA,OAAA,OAAA,KAAA,EAAA,YACA,UAAA,QACA,eAAA,KACA,uBAAA,YACA,wBAAA,UAEgB,0BAChB,QAAA,QAEgB,0BAChB,QAAA,QAEuB,iCACvB,QAAA,QAEkB,4BAClB,QAAA,QAEkB,4BAClB,QAAA,QAEkB,4BAClB,QAAA,QAEkB,4BAClB,QAAA,QAEwB,kCACxB,QAAA,QAEsB,gCACtB,QAAA,QAEiB,2BACjB,QAAA,QAEiB,2BACjB,QAAA,QAEe,yBACf,QAAA,QAEkB,4BAClB,QAAA,QAEuB,iCACvB,QAAA,QAE8B,wCAC9B,QAAA,QAEiB,2BACjB,QAAA,QAEgB,0BAChB,QAAA,QAEmB,6BACnB,QAAA,QAEiB,2BACjB,QAAA,QAEgB,0BAChB,QAAA,QAEc,wBACd,QAAA,QAEoB,8BACpB,QAAA,QAEkB,4BAClB,QAAA,QAEgB,0BAChB,QAAA,QAEyB,mCACzB,QAAA,QAEyB,mCACzB,QAAA,QAE0B,oCAC1B,QAAA,QAEuB,iCACvB,QAAA,QAEoB,8BACpB,QAAA,QAEgB,0BAChB,QAAA,QAEgB,0BAChB,QAAA,QAEgB,0BAChB,QAAA,QAEe,yBACf,QAAA,QAEc,wBACd,QAAA,QAEgB,0BAChB,QAAA,QAEgB,0BAChB,QAAA,QAEiB,2BACjB,QAAA,QAEkB,4BAClB,QAAA,QAEe,yBACf,QAAA,QAEgB,0BAChB,QAAA,QAEoB,8BACpB,QAAA,QAEe,yBACf,QAAA,QAEgB,0BAChB,QAAA,QAEe,yBACf,QAAA,QAEe,yBACf,QAAA,QAEiB,2BACjB,QAAA,QAEc,wBACd,QAAA,QAEkB,4BAClB,QAAA,QAEkB,4BAClB,QAAA,QAE2B,qCAC3B,QAAA,QAE2B,qCAC3B,QAAA,QAE4B,sCAC5B,QAAA,QAEyB,mCACzB,QAAA,QAEU,oBACV,QAAA,QAEgB,0BAChB,QAAA,QAEc,wBACd,QAAA,QAEc,wBACd,QAAA,QAEoB,8BACpB,QAAA,QAEoB,8BACpB,QAAA,QAEc,wBACd,QAAA,QAEmB,6BACnB,QAAA,QAEoB,8BACpB,QAAA,QAEuB,iCACvB,QAAA,QAEuB,iCACvB,QAAA,QAEwB,kCACxB,QAAA,QAEqB,+BACrB,QAAA,QAEkB,4BAClB,QAAA,QAEkB,4BAClB,QAAA,QAEY,sBACZ,QAAA,QAEW,qBACX,QAAA,QAEa,uBACb,QAAA,QAEkB,4BAClB,QAAA,QAEc,wBACd,QAAA,QAEgB,0BAChB,QAAA,QAEa,uBACb,QAAA,QAEc,wBACd,QAAA,QAEmB,6BACnB,QAAA,QAEkB,4BAClB,QAAA,QAEgB,0BAChB,QAAA,QAEe,yBACf,QAAA,QAEgB,0BAChB,QAAA,QAEgB,0BAChB,QAAA,QAEgB,0BAChB,QAAA,QAEU,oBACA,oBACV,QAAA,QAEc,wBACd,QAAA,QAEqB,+BACrB,QAAA,QAEc,wBACd,QAAA,QAEe,yBACf,QAAA,QAEU,oBACV,QAAA,QAEU,oBACV,QAAA,QAEY,sBACZ,QAAA,QAEiB,2BACjB,QAAA,QAEW,qBACX,QAAA,QAEY,sBACZ,QAAA,QAEe,yBACf,QAAA,QAEiB,2BACjB,QAAA,QAEqB,+BACrB,QAAA,QAEqB,+BACrB,QAAA,QAEsB,gCACtB,QAAA,QAEmB,6BACnB,QAAA,QAEgB,0BAChB,QAAA,OAEkB,4BAClB,QAAA,QAEmB,6BACnB,QAAA,QAEgB,0BAChB,QAAA,QAEe,yBACf,QAAA,QAES,mBACT,QAAA,QAEW,qBACX,QAAA,QAEc,wBACd,QAAA,QAEe,yBACf,QAAA,QAEa,uBACb,QAAA,QAEc,wBACd,QAAA,QAEW,qBACX,QAAA,QAEe,yBACf,QAAA,QAES,mBACT,QAAA,QAEkB,4BAClB,QAAA,QAEoB,8BACpB,QAAA,QAEU,oBACV,QAAA,QAEe,yBACf,QAAA,QAEiB,2BACjB,QAAA,QAEkB,4BAClB,QAAA,QAEU,oBACV,QAAA,QAEW,qBACX,QAAA,QAEiB,2BACjB,QAAA,QAEiB,2BACjB,QAAA,QAEqB,+BACrB,QAAA,QAEkB,4BAClB,QAAA,QAEW,qBACX,QAAA,QAEe,yBACf,QAAA,QAEY,sBACZ,QAAA,QAEe,yBACf,QAAA,QAEU,oBACV,QAAA,QAEiB,2BACjB,QAAA,QAEiB,2BACjB,QAAA,QAES,mBACT,QAAA,QAEiB,2BACjB,QAAA,QAEe,yBACf,QAAA,QAEkB,4BAClB,QAAA,QAEkB,4BAClB,QAAA,QAEe,yBACf,QAAA,QAEiB,2BACjB,QAAA,QAEU,oBACV,QAAA"}
|
||||
Binary file not shown.
File diff suppressed because it is too large
Load Diff
|
After Width: | Height: | Size: 469 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,597 @@
|
|||
/*! Spectre.css Icons v0.5.8 | MIT License | github.com/picturepan2/spectre */
|
||||
.icon {
|
||||
box-sizing: border-box;
|
||||
display: inline-block;
|
||||
font-size: inherit;
|
||||
font-style: normal;
|
||||
height: 1em;
|
||||
position: relative;
|
||||
text-indent: -9999px;
|
||||
vertical-align: middle;
|
||||
width: 1em;
|
||||
}
|
||||
|
||||
.icon::before,
|
||||
.icon::after {
|
||||
content: "";
|
||||
display: block;
|
||||
left: 50%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.icon.icon-2x {
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
|
||||
.icon.icon-3x {
|
||||
font-size: 2.4rem;
|
||||
}
|
||||
|
||||
.icon.icon-4x {
|
||||
font-size: 3.2rem;
|
||||
}
|
||||
|
||||
.accordion .icon,
|
||||
.btn .icon,
|
||||
.toast .icon,
|
||||
.menu .icon {
|
||||
vertical-align: -10%;
|
||||
}
|
||||
|
||||
.btn-lg .icon {
|
||||
vertical-align: -15%;
|
||||
}
|
||||
|
||||
.icon-arrow-down::before,
|
||||
.icon-arrow-left::before,
|
||||
.icon-arrow-right::before,
|
||||
.icon-arrow-up::before,
|
||||
.icon-downward::before,
|
||||
.icon-back::before,
|
||||
.icon-forward::before,
|
||||
.icon-upward::before {
|
||||
border: .1rem solid currentColor;
|
||||
border-bottom: 0;
|
||||
border-right: 0;
|
||||
height: .65em;
|
||||
width: .65em;
|
||||
}
|
||||
|
||||
.icon-arrow-down::before {
|
||||
transform: translate(-50%, -75%) rotate(225deg);
|
||||
}
|
||||
|
||||
.icon-arrow-left::before {
|
||||
transform: translate(-25%, -50%) rotate(-45deg);
|
||||
}
|
||||
|
||||
.icon-arrow-right::before {
|
||||
transform: translate(-75%, -50%) rotate(135deg);
|
||||
}
|
||||
|
||||
.icon-arrow-up::before {
|
||||
transform: translate(-50%, -25%) rotate(45deg);
|
||||
}
|
||||
|
||||
.icon-back::after,
|
||||
.icon-forward::after {
|
||||
background: currentColor;
|
||||
height: .1rem;
|
||||
width: .8em;
|
||||
}
|
||||
|
||||
.icon-downward::after,
|
||||
.icon-upward::after {
|
||||
background: currentColor;
|
||||
height: .8em;
|
||||
width: .1rem;
|
||||
}
|
||||
|
||||
.icon-back::after {
|
||||
left: 55%;
|
||||
}
|
||||
|
||||
.icon-back::before {
|
||||
transform: translate(-50%, -50%) rotate(-45deg);
|
||||
}
|
||||
|
||||
.icon-downward::after {
|
||||
top: 45%;
|
||||
}
|
||||
|
||||
.icon-downward::before {
|
||||
transform: translate(-50%, -50%) rotate(-135deg);
|
||||
}
|
||||
|
||||
.icon-forward::after {
|
||||
left: 45%;
|
||||
}
|
||||
|
||||
.icon-forward::before {
|
||||
transform: translate(-50%, -50%) rotate(135deg);
|
||||
}
|
||||
|
||||
.icon-upward::after {
|
||||
top: 55%;
|
||||
}
|
||||
|
||||
.icon-upward::before {
|
||||
transform: translate(-50%, -50%) rotate(45deg);
|
||||
}
|
||||
|
||||
.icon-caret::before {
|
||||
border-left: .3em solid transparent;
|
||||
border-right: .3em solid transparent;
|
||||
border-top: .3em solid currentColor;
|
||||
height: 0;
|
||||
transform: translate(-50%, -25%);
|
||||
width: 0;
|
||||
}
|
||||
|
||||
.icon-menu::before {
|
||||
background: currentColor;
|
||||
box-shadow: 0 -.35em, 0 .35em;
|
||||
height: .1rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.icon-apps::before {
|
||||
background: currentColor;
|
||||
box-shadow: -.35em -.35em, -.35em 0, -.35em .35em, 0 -.35em, 0 .35em, .35em -.35em, .35em 0, .35em .35em;
|
||||
height: 3px;
|
||||
width: 3px;
|
||||
}
|
||||
|
||||
.icon-resize-horiz::before,
|
||||
.icon-resize-horiz::after,
|
||||
.icon-resize-vert::before,
|
||||
.icon-resize-vert::after {
|
||||
border: .1rem solid currentColor;
|
||||
border-bottom: 0;
|
||||
border-right: 0;
|
||||
height: .45em;
|
||||
width: .45em;
|
||||
}
|
||||
|
||||
.icon-resize-horiz::before,
|
||||
.icon-resize-vert::before {
|
||||
transform: translate(-50%, -90%) rotate(45deg);
|
||||
}
|
||||
|
||||
.icon-resize-horiz::after,
|
||||
.icon-resize-vert::after {
|
||||
transform: translate(-50%, -10%) rotate(225deg);
|
||||
}
|
||||
|
||||
.icon-resize-horiz::before {
|
||||
transform: translate(-90%, -50%) rotate(-45deg);
|
||||
}
|
||||
|
||||
.icon-resize-horiz::after {
|
||||
transform: translate(-10%, -50%) rotate(135deg);
|
||||
}
|
||||
|
||||
.icon-more-horiz::before,
|
||||
.icon-more-vert::before {
|
||||
background: currentColor;
|
||||
border-radius: 50%;
|
||||
box-shadow: -.4em 0, .4em 0;
|
||||
height: 3px;
|
||||
width: 3px;
|
||||
}
|
||||
|
||||
.icon-more-vert::before {
|
||||
box-shadow: 0 -.4em, 0 .4em;
|
||||
}
|
||||
|
||||
.icon-plus::before,
|
||||
.icon-minus::before,
|
||||
.icon-cross::before {
|
||||
background: currentColor;
|
||||
height: .1rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.icon-plus::after,
|
||||
.icon-cross::after {
|
||||
background: currentColor;
|
||||
height: 100%;
|
||||
width: .1rem;
|
||||
}
|
||||
|
||||
.icon-cross::before {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.icon-cross::after {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.icon-cross::before,
|
||||
.icon-cross::after {
|
||||
transform: translate(-50%, -50%) rotate(45deg);
|
||||
}
|
||||
|
||||
.icon-check::before {
|
||||
border: .1rem solid currentColor;
|
||||
border-right: 0;
|
||||
border-top: 0;
|
||||
height: .5em;
|
||||
transform: translate(-50%, -75%) rotate(-45deg);
|
||||
width: .9em;
|
||||
}
|
||||
|
||||
.icon-stop {
|
||||
border: .1rem solid currentColor;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.icon-stop::before {
|
||||
background: currentColor;
|
||||
height: .1rem;
|
||||
transform: translate(-50%, -50%) rotate(45deg);
|
||||
width: 1em;
|
||||
}
|
||||
|
||||
.icon-shutdown {
|
||||
border: .1rem solid currentColor;
|
||||
border-radius: 50%;
|
||||
border-top-color: transparent;
|
||||
}
|
||||
|
||||
.icon-shutdown::before {
|
||||
background: currentColor;
|
||||
content: "";
|
||||
height: .5em;
|
||||
top: .1em;
|
||||
width: .1rem;
|
||||
}
|
||||
|
||||
.icon-refresh::before {
|
||||
border: .1rem solid currentColor;
|
||||
border-radius: 50%;
|
||||
border-right-color: transparent;
|
||||
height: 1em;
|
||||
width: 1em;
|
||||
}
|
||||
|
||||
.icon-refresh::after {
|
||||
border: .2em solid currentColor;
|
||||
border-left-color: transparent;
|
||||
border-top-color: transparent;
|
||||
height: 0;
|
||||
left: 80%;
|
||||
top: 20%;
|
||||
width: 0;
|
||||
}
|
||||
|
||||
.icon-search::before {
|
||||
border: .1rem solid currentColor;
|
||||
border-radius: 50%;
|
||||
height: .75em;
|
||||
left: 5%;
|
||||
top: 5%;
|
||||
transform: translate(0, 0) rotate(45deg);
|
||||
width: .75em;
|
||||
}
|
||||
|
||||
.icon-search::after {
|
||||
background: currentColor;
|
||||
height: .1rem;
|
||||
left: 80%;
|
||||
top: 80%;
|
||||
transform: translate(-50%, -50%) rotate(45deg);
|
||||
width: .4em;
|
||||
}
|
||||
|
||||
.icon-edit::before {
|
||||
border: .1rem solid currentColor;
|
||||
height: .4em;
|
||||
transform: translate(-40%, -60%) rotate(-45deg);
|
||||
width: .85em;
|
||||
}
|
||||
|
||||
.icon-edit::after {
|
||||
border: .15em solid currentColor;
|
||||
border-right-color: transparent;
|
||||
border-top-color: transparent;
|
||||
height: 0;
|
||||
left: 5%;
|
||||
top: 95%;
|
||||
transform: translate(0, -100%);
|
||||
width: 0;
|
||||
}
|
||||
|
||||
.icon-delete::before {
|
||||
border: .1rem solid currentColor;
|
||||
border-bottom-left-radius: .1rem;
|
||||
border-bottom-right-radius: .1rem;
|
||||
border-top: 0;
|
||||
height: .75em;
|
||||
top: 60%;
|
||||
width: .75em;
|
||||
}
|
||||
|
||||
.icon-delete::after {
|
||||
background: currentColor;
|
||||
box-shadow: -.25em .2em, .25em .2em;
|
||||
height: .1rem;
|
||||
top: .05rem;
|
||||
width: .5em;
|
||||
}
|
||||
|
||||
.icon-share {
|
||||
border: .1rem solid currentColor;
|
||||
border-radius: .1rem;
|
||||
border-right: 0;
|
||||
border-top: 0;
|
||||
}
|
||||
|
||||
.icon-share::before {
|
||||
border: .1rem solid currentColor;
|
||||
border-left: 0;
|
||||
border-top: 0;
|
||||
height: .4em;
|
||||
left: 100%;
|
||||
top: .25em;
|
||||
transform: translate(-125%, -50%) rotate(-45deg);
|
||||
width: .4em;
|
||||
}
|
||||
|
||||
.icon-share::after {
|
||||
border: .1rem solid currentColor;
|
||||
border-bottom: 0;
|
||||
border-radius: 75% 0;
|
||||
border-right: 0;
|
||||
height: .5em;
|
||||
width: .6em;
|
||||
}
|
||||
|
||||
.icon-flag::before {
|
||||
background: currentColor;
|
||||
height: 1em;
|
||||
left: 15%;
|
||||
width: .1rem;
|
||||
}
|
||||
|
||||
.icon-flag::after {
|
||||
border: .1rem solid currentColor;
|
||||
border-bottom-right-radius: .1rem;
|
||||
border-left: 0;
|
||||
border-top-right-radius: .1rem;
|
||||
height: .65em;
|
||||
left: 60%;
|
||||
top: 35%;
|
||||
width: .8em;
|
||||
}
|
||||
|
||||
.icon-bookmark::before {
|
||||
border: .1rem solid currentColor;
|
||||
border-bottom: 0;
|
||||
border-top-left-radius: .1rem;
|
||||
border-top-right-radius: .1rem;
|
||||
height: .9em;
|
||||
width: .8em;
|
||||
}
|
||||
|
||||
.icon-bookmark::after {
|
||||
border: .1rem solid currentColor;
|
||||
border-bottom: 0;
|
||||
border-left: 0;
|
||||
border-radius: .1rem;
|
||||
height: .5em;
|
||||
transform: translate(-50%, 35%) rotate(-45deg) skew(15deg, 15deg);
|
||||
width: .5em;
|
||||
}
|
||||
|
||||
.icon-download,
|
||||
.icon-upload {
|
||||
border-bottom: .1rem solid currentColor;
|
||||
}
|
||||
|
||||
.icon-download::before,
|
||||
.icon-upload::before {
|
||||
border: .1rem solid currentColor;
|
||||
border-bottom: 0;
|
||||
border-right: 0;
|
||||
height: .5em;
|
||||
transform: translate(-50%, -60%) rotate(-135deg);
|
||||
width: .5em;
|
||||
}
|
||||
|
||||
.icon-download::after,
|
||||
.icon-upload::after {
|
||||
background: currentColor;
|
||||
height: .6em;
|
||||
top: 40%;
|
||||
width: .1rem;
|
||||
}
|
||||
|
||||
.icon-upload::before {
|
||||
transform: translate(-50%, -60%) rotate(45deg);
|
||||
}
|
||||
|
||||
.icon-upload::after {
|
||||
top: 50%;
|
||||
}
|
||||
|
||||
.icon-copy::before {
|
||||
border: .1rem solid currentColor;
|
||||
border-bottom: 0;
|
||||
border-radius: .1rem;
|
||||
border-right: 0;
|
||||
height: .8em;
|
||||
left: 40%;
|
||||
top: 35%;
|
||||
width: .8em;
|
||||
}
|
||||
|
||||
.icon-copy::after {
|
||||
border: .1rem solid currentColor;
|
||||
border-radius: .1rem;
|
||||
height: .8em;
|
||||
left: 60%;
|
||||
top: 60%;
|
||||
width: .8em;
|
||||
}
|
||||
|
||||
.icon-time {
|
||||
border: .1rem solid currentColor;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.icon-time::before {
|
||||
background: currentColor;
|
||||
height: .4em;
|
||||
transform: translate(-50%, -75%);
|
||||
width: .1rem;
|
||||
}
|
||||
|
||||
.icon-time::after {
|
||||
background: currentColor;
|
||||
height: .3em;
|
||||
transform: translate(-50%, -75%) rotate(90deg);
|
||||
transform-origin: 50% 90%;
|
||||
width: .1rem;
|
||||
}
|
||||
|
||||
.icon-mail::before {
|
||||
border: .1rem solid currentColor;
|
||||
border-radius: .1rem;
|
||||
height: .8em;
|
||||
width: 1em;
|
||||
}
|
||||
|
||||
.icon-mail::after {
|
||||
border: .1rem solid currentColor;
|
||||
border-right: 0;
|
||||
border-top: 0;
|
||||
height: .5em;
|
||||
transform: translate(-50%, -90%) rotate(-45deg) skew(10deg, 10deg);
|
||||
width: .5em;
|
||||
}
|
||||
|
||||
.icon-people::before {
|
||||
border: .1rem solid currentColor;
|
||||
border-radius: 50%;
|
||||
height: .45em;
|
||||
top: 25%;
|
||||
width: .45em;
|
||||
}
|
||||
|
||||
.icon-people::after {
|
||||
border: .1rem solid currentColor;
|
||||
border-radius: 50% 50% 0 0;
|
||||
height: .4em;
|
||||
top: 75%;
|
||||
width: .9em;
|
||||
}
|
||||
|
||||
.icon-message {
|
||||
border: .1rem solid currentColor;
|
||||
border-bottom: 0;
|
||||
border-radius: .1rem;
|
||||
border-right: 0;
|
||||
}
|
||||
|
||||
.icon-message::before {
|
||||
border: .1rem solid currentColor;
|
||||
border-bottom-right-radius: .1rem;
|
||||
border-left: 0;
|
||||
border-top: 0;
|
||||
height: .8em;
|
||||
left: 65%;
|
||||
top: 40%;
|
||||
width: .7em;
|
||||
}
|
||||
|
||||
.icon-message::after {
|
||||
background: currentColor;
|
||||
border-radius: .1rem;
|
||||
height: .3em;
|
||||
left: 10%;
|
||||
top: 100%;
|
||||
transform: translate(0, -90%) rotate(45deg);
|
||||
width: .1rem;
|
||||
}
|
||||
|
||||
.icon-photo {
|
||||
border: .1rem solid currentColor;
|
||||
border-radius: .1rem;
|
||||
}
|
||||
|
||||
.icon-photo::before {
|
||||
border: .1rem solid currentColor;
|
||||
border-radius: 50%;
|
||||
height: .25em;
|
||||
left: 35%;
|
||||
top: 35%;
|
||||
width: .25em;
|
||||
}
|
||||
|
||||
.icon-photo::after {
|
||||
border: .1rem solid currentColor;
|
||||
border-bottom: 0;
|
||||
border-left: 0;
|
||||
height: .5em;
|
||||
left: 60%;
|
||||
transform: translate(-50%, 25%) rotate(-45deg);
|
||||
width: .5em;
|
||||
}
|
||||
|
||||
.icon-link::before,
|
||||
.icon-link::after {
|
||||
border: .1rem solid currentColor;
|
||||
border-radius: 5em 0 0 5em;
|
||||
border-right: 0;
|
||||
height: .5em;
|
||||
width: .75em;
|
||||
}
|
||||
|
||||
.icon-link::before {
|
||||
transform: translate(-70%, -45%) rotate(-45deg);
|
||||
}
|
||||
|
||||
.icon-link::after {
|
||||
transform: translate(-30%, -55%) rotate(135deg);
|
||||
}
|
||||
|
||||
.icon-location::before {
|
||||
border: .1rem solid currentColor;
|
||||
border-radius: 50% 50% 50% 0;
|
||||
height: .8em;
|
||||
transform: translate(-50%, -60%) rotate(-45deg);
|
||||
width: .8em;
|
||||
}
|
||||
|
||||
.icon-location::after {
|
||||
border: .1rem solid currentColor;
|
||||
border-radius: 50%;
|
||||
height: .2em;
|
||||
transform: translate(-50%, -80%);
|
||||
width: .2em;
|
||||
}
|
||||
|
||||
.icon-emoji {
|
||||
border: .1rem solid currentColor;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.icon-emoji::before {
|
||||
border-radius: 50%;
|
||||
box-shadow: -.17em -.1em, .17em -.1em;
|
||||
height: .15em;
|
||||
width: .15em;
|
||||
}
|
||||
|
||||
.icon-emoji::after {
|
||||
border: .1rem solid currentColor;
|
||||
border-bottom-color: transparent;
|
||||
border-radius: 50%;
|
||||
border-right-color: transparent;
|
||||
height: .5em;
|
||||
transform: translate(-50%, -40%) rotate(-135deg);
|
||||
width: .5em;
|
||||
}
|
||||
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
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 147 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 27 KiB |
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,41 @@
|
|||
const { src, dest, parallel } = require('gulp');
|
||||
const include = require('gulp-include');
|
||||
const sass = require('gulp-sass');
|
||||
|
||||
sass.compiler = require('node-sass');
|
||||
|
||||
function html() {
|
||||
return src('src/*.html')
|
||||
.pipe(include())
|
||||
.pipe(dest('dist'))
|
||||
}
|
||||
|
||||
function css() {
|
||||
return src('src/scss/style.scss')
|
||||
.pipe(sass().on('error', sass.logError))
|
||||
.pipe(dest('dist'))
|
||||
}
|
||||
|
||||
function js() {
|
||||
return src('src/js/*.js')
|
||||
.pipe(dest('dist/js'))
|
||||
}
|
||||
|
||||
function dep() {
|
||||
return src(['dep/**/*'])
|
||||
.pipe(dest('dist/dep'));
|
||||
|
||||
}
|
||||
|
||||
function assets() {
|
||||
return src(['assets/**/*'])
|
||||
.pipe(dest('dist'));
|
||||
|
||||
}
|
||||
|
||||
exports.html = html;
|
||||
exports.css = css;
|
||||
exports.js = js;
|
||||
exports.dep = dep;
|
||||
exports.assets = assets;
|
||||
exports.default = parallel(html, css, js, dep, assets);
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,204 @@
|
|||
<!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="..." class="btn btn-link">Blog</a>
|
||||
<a href="..." class="btn btn-link">Gallerie</a>
|
||||
<a href="..." 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>
|
||||
|
||||
<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>
|
||||
|
||||
</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="#" class="menu-element">Nouvelles et formats courts <span class="menu-label label-secondary">40</span></a>
|
||||
<a href="#" class="menu-element">Contes et légendes <span class="menu-label label-secondary">11</span></a>
|
||||
<a href="#" class="menu-element">Poèmes <span class="menu-label label-secondary">11</span></a>
|
||||
<a href="#" class="menu-element">Romans <span class="menu-label label-secondary">0</span></a>
|
||||
<a href="#" class="menu-element">Logo et Design <span class="menu-label label-secondary">0</span></a>
|
||||
<a href="#" 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="#" class="menu-element">Niouzes site et perso <span class="menu-label label-secondary">2</span></a>
|
||||
<a href="#" class="menu-element">Réflexions et pensées <span class="menu-label label-secondary">0</span></a>
|
||||
<a href="#" class="menu-element">Militantisme <span class="menu-label label-secondary">4</span></a>
|
||||
<a href="#" 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 class="container">
|
||||
<ul class="social">
|
||||
<li class="social-li"><a class="social-link" href="https://twitter.com/kazhnuz" alt="Twitter"><i class="fa fa-fw fa-twitter"></i></a></li>
|
||||
<li class="social-li"><a class="social-link" href="https://octodon.social/users/kazhnuz" alt="Mastodon"><i class="fa fa-fw fa-mastodon"></i></a></li>
|
||||
<li class="social-li"><a class="social-link" href="#" alt="Diaspora"><i class="fa fa-fw fa-diaspora"></i></a></li>
|
||||
<li class="social-li"><a class="social-link" href="#" alt="DeviantART"><i class="fa fa-fw fa-deviantart"></i></a></li>
|
||||
<li class="social-li"><a class="social-link" href="#" alt="Github"><i class="fa fa-fw fa-github"></i></a></li>
|
||||
<li class="social-li"><a class="social-link" href="#" alt="Gitlab"><i class="fa fa-fw fa-gitlab"></i></a></li>
|
||||
</ul>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column col-md-4">
|
||||
<p>Ce theme est diffusé sous licence <strong>Creative Common Attribution - Partage à l'Identique 4.0</strong> - hors mention contraire.</p>
|
||||
<p>Cette licence vous autorise à partager et copier mes travaux, tant que vous me citiez en source, et que vous autorisez la même chose pour les travaux qui en seraient dérivés. N'hésitez pas à partager ! <i style="color:#FF0000" class="fa fa-heart"></i></p>
|
||||
</div>
|
||||
|
||||
<div class="column col-md-4">
|
||||
<p>Theme réalisé avec le quadriciel <a href="https://getbootstrap.com/">Bootstrap4</a> et la banque d'icone <a href="https://forkawesome.github.io/Fork-Awesome/">Fork-Awesome</a>.</p>
|
||||
</div>
|
||||
|
||||
<div class="column col-md-4">
|
||||
<p>Lorem Ipsum.</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
|
||||
<script src="js/trim.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,227 @@
|
|||
<!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="..." class="btn btn-link">Blog</a>
|
||||
<a href="..." class="btn btn-link">Gallerie</a>
|
||||
<a href="..." 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="#">Accueil</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="#" class="menu-element">Nouvelles et formats courts <span class="menu-label label-secondary">40</span></a>
|
||||
<a href="#" class="menu-element">Contes et légendes <span class="menu-label label-secondary">11</span></a>
|
||||
<a href="#" class="menu-element">Poèmes <span class="menu-label label-secondary">11</span></a>
|
||||
<a href="#" class="menu-element">Romans <span class="menu-label label-secondary">0</span></a>
|
||||
<a href="#" class="menu-element">Logo et Design <span class="menu-label label-secondary">0</span></a>
|
||||
<a href="#" 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="#" class="menu-element">Niouzes site et perso <span class="menu-label label-secondary">2</span></a>
|
||||
<a href="#" class="menu-element">Réflexions et pensées <span class="menu-label label-secondary">0</span></a>
|
||||
<a href="#" class="menu-element">Militantisme <span class="menu-label label-secondary">4</span></a>
|
||||
<a href="#" 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>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
|
||||
<script src="js/trim.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,205 @@
|
|||
<!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 class="container-fluid" 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="..." class="btn btn-link">Blog</a>
|
||||
<a href="..." class="btn btn-link">Gallerie</a>
|
||||
<a href="..." 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="#">Home</a></li>
|
||||
<li class="breadcrumb-item"><a href="#">Library</a></li>
|
||||
<li class="breadcrumb-item active" aria-current="page">Data</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>
|
||||
|
||||
<section class="partager" style="text-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>
|
||||
</section>
|
||||
|
||||
</article>
|
||||
|
||||
</div>
|
||||
<aside class="column col-3">
|
||||
|
||||
</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>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
|
||||
<!-- Include all compiled plugins (below), or include individual files as needed -->
|
||||
<script src="js/bootstrap.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,247 @@
|
|||
<!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="..." class="btn btn-link">Blog</a>
|
||||
<a href="..." class="btn btn-link">Gallerie</a>
|
||||
<a href="..." 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>Derniers articles 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="#" class="btn btn-readmore">Lire l'article</a> </p>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
<div class="previews-section">
|
||||
|
||||
<article class="card card-preview card-primary">
|
||||
<a href="#" 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="#" class="preview-link">
|
||||
<div class="preview-item">
|
||||
<div class="preview-content"><p>Proin bibendum felis sit amet nisl iaculis, <strong>vel blandit purus dictum</strong>. Maecenas ullamcorper tortor ac dolor pulvinar, id imperdiet arcu suscipit. Sed posuere lectus eu orci tristique maximus. Nulla facilisi. Aenean sed fermentum nisl. Donec sodales ligula eu est finibus, eu posuere ligula condimentum. Morbi arcu magna, varius id justo ac, aliquam luctus magna. Pellentesque a velit et ipsum euismod congue eget eu sem. <del>Nulla luctus est nec arcu volutpat blandit.</del> Quisque egestas, elit eu tempus tincidunt, mi libero porta purus, eget lobortis metus erat a dolor. Integer ac turpis lacinia, interdum nisl non, feugiat libero.</p></div>
|
||||
<div class="preview-overlay">
|
||||
<h1 class="card-header">Exemple titre</h1>
|
||||
<div class="preview-metadata">
|
||||
<div class="align-right"><time><small>Le 27/02/2017</small></time></div>
|
||||
<div class="align-left"><span class="chip chip-primary">video</span></div>
|
||||
<div class="align-center comment-text">3 commentaires</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</article>
|
||||
|
||||
<article class="card card-preview card-primary">
|
||||
<a href="#" class="preview-link">
|
||||
<div class="preview-item">
|
||||
<div class="preview-content"><p>Proin bibendum felis sit amet nisl iaculis, <strong>vel blandit purus dictum</strong>. Maecenas ullamcorper tortor ac dolor pulvinar, id imperdiet arcu suscipit. Sed posuere lectus eu orci tristique maximus. Nulla facilisi. Aenean sed fermentum nisl. Donec sodales ligula eu est finibus, eu posuere ligula condimentum. Morbi arcu magna, varius id justo ac, aliquam luctus magna. Pellentesque a velit et ipsum euismod congue eget eu sem. <del>Nulla luctus est nec arcu volutpat blandit.</del> Quisque egestas, elit eu tempus tincidunt, mi libero porta purus, eget lobortis metus erat a dolor. Integer ac turpis lacinia, interdum nisl non, feugiat libero.</p></div>
|
||||
<div class="preview-overlay">
|
||||
<h1 class="card-header">Exemple titre</h1>
|
||||
<div class="preview-metadata">
|
||||
<div class="align-right"><time><small>Le 27/02/2017</small></time></div>
|
||||
<div class="align-left"><span class="chip chip-primary">video</span></div>
|
||||
<div class="align-center comment-text">3 commentaires</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</article>
|
||||
|
||||
<article class="card card-preview card-primary">
|
||||
<a href="#" class="preview-link">
|
||||
<div class="preview-item">
|
||||
<div class="preview-content"><p>Proin bibendum felis sit amet nisl iaculis, <strong>vel blandit purus dictum</strong>. Maecenas ullamcorper tortor ac dolor pulvinar, id imperdiet arcu suscipit. Sed posuere lectus eu orci tristique maximus. Nulla facilisi. Aenean sed fermentum nisl. Donec sodales ligula eu est finibus, eu posuere ligula condimentum. Morbi arcu magna, varius id justo ac, aliquam luctus magna. Pellentesque a velit et ipsum euismod congue eget eu sem. <del>Nulla luctus est nec arcu volutpat blandit.</del> Quisque egestas, elit eu tempus tincidunt, mi libero porta purus, eget lobortis metus erat a dolor. Integer ac turpis lacinia, interdum nisl non, feugiat libero.</p></div>
|
||||
<div class="preview-overlay">
|
||||
<h1 class="card-header">Exemple titre</h1>
|
||||
<div class="preview-metadata">
|
||||
<div class="align-right"><time><small>Le 27/02/2017</small></time></div>
|
||||
<div class="align-left"><span class="chip chip-primary">video</span></div>
|
||||
<div class="align-center comment-text">3 commentaires</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</article>
|
||||
|
||||
</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="#" class="menu-element">Nouvelles et formats courts <span class="menu-label label-secondary">40</span></a>
|
||||
<a href="#" class="menu-element">Contes et légendes <span class="menu-label label-secondary">11</span></a>
|
||||
<a href="#" class="menu-element">Poèmes <span class="menu-label label-secondary">11</span></a>
|
||||
<a href="#" class="menu-element">Romans <span class="menu-label label-secondary">0</span></a>
|
||||
<a href="#" class="menu-element">Logo et Design <span class="menu-label label-secondary">0</span></a>
|
||||
<a href="#" 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="#" class="menu-element">Niouzes site et perso <span class="menu-label label-secondary">2</span></a>
|
||||
<a href="#" class="menu-element">Réflexions et pensées <span class="menu-label label-secondary">0</span></a>
|
||||
<a href="#" class="menu-element">Militantisme <span class="menu-label label-secondary">4</span></a>
|
||||
<a href="#" 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>
|
||||
|
||||
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
|
||||
<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="..." class="btn btn-link">Blog</a>
|
||||
<a href="..." class="btn btn-link">Gallerie</a>
|
||||
<a href="..." 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>
|
||||
|
||||
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
|
||||
<script src="js/trim.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,221 @@
|
|||
<!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 class="container-fluid" 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="..." class="btn btn-link">Blog</a>
|
||||
<a href="..." class="btn btn-link">Gallerie</a>
|
||||
<a href="..." 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="#">Accueil</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="#" 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="#" class="preview-link">
|
||||
<div class="preview-item">
|
||||
<div class="preview-content"><p>Proin bibendum felis sit amet nisl iaculis, <strong>vel blandit purus dictum</strong>. Maecenas ullamcorper tortor ac dolor pulvinar, id imperdiet arcu suscipit. Sed posuere lectus eu orci tristique maximus. Nulla facilisi. Aenean sed fermentum nisl. Donec sodales ligula eu est finibus, eu posuere ligula condimentum. Morbi arcu magna, varius id justo ac, aliquam luctus magna. Pellentesque a velit et ipsum euismod congue eget eu sem. <del>Nulla luctus est nec arcu volutpat blandit.</del> Quisque egestas, elit eu tempus tincidunt, mi libero porta purus, eget lobortis metus erat a dolor. Integer ac turpis lacinia, interdum nisl non, feugiat libero.</p></div>
|
||||
<div class="preview-overlay">
|
||||
<h1 class="card-header">Exemple titre</h1>
|
||||
<div class="preview-metadata">
|
||||
<div class="align-right"><time><small>Le 27/02/2017</small></time></div>
|
||||
<div class="align-left"><span class="chip chip-primary">video</span></div>
|
||||
<div class="align-center comment-text">3 commentaires</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</article>
|
||||
|
||||
<article class="card card-preview card-primary">
|
||||
<a href="#" class="preview-link">
|
||||
<div class="preview-item">
|
||||
<div class="preview-content"><p>Proin bibendum felis sit amet nisl iaculis, <strong>vel blandit purus dictum</strong>. Maecenas ullamcorper tortor ac dolor pulvinar, id imperdiet arcu suscipit. Sed posuere lectus eu orci tristique maximus. Nulla facilisi. Aenean sed fermentum nisl. Donec sodales ligula eu est finibus, eu posuere ligula condimentum. Morbi arcu magna, varius id justo ac, aliquam luctus magna. Pellentesque a velit et ipsum euismod congue eget eu sem. <del>Nulla luctus est nec arcu volutpat blandit.</del> Quisque egestas, elit eu tempus tincidunt, mi libero porta purus, eget lobortis metus erat a dolor. Integer ac turpis lacinia, interdum nisl non, feugiat libero.</p></div>
|
||||
<div class="preview-overlay">
|
||||
<h1 class="card-header">Exemple titre</h1>
|
||||
<div class="preview-metadata">
|
||||
<div class="align-right"><time><small>Le 27/02/2017</small></time></div>
|
||||
<div class="align-left"><span class="chip chip-primary">video</span></div>
|
||||
<div class="align-center comment-text">3 commentaires</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</article>
|
||||
|
||||
<article class="card card-preview card-primary">
|
||||
<a href="#" class="preview-link">
|
||||
<div class="preview-item">
|
||||
<div class="preview-content"><p>Proin bibendum felis sit amet nisl iaculis, <strong>vel blandit purus dictum</strong>. Maecenas ullamcorper tortor ac dolor pulvinar, id imperdiet arcu suscipit. Sed posuere lectus eu orci tristique maximus. Nulla facilisi. Aenean sed fermentum nisl. Donec sodales ligula eu est finibus, eu posuere ligula condimentum. Morbi arcu magna, varius id justo ac, aliquam luctus magna. Pellentesque a velit et ipsum euismod congue eget eu sem. <del>Nulla luctus est nec arcu volutpat blandit.</del> Quisque egestas, elit eu tempus tincidunt, mi libero porta purus, eget lobortis metus erat a dolor. Integer ac turpis lacinia, interdum nisl non, feugiat libero.</p></div>
|
||||
<div class="preview-overlay">
|
||||
<h1 class="card-header">Exemple titre</h1>
|
||||
<div class="preview-metadata">
|
||||
<div class="align-right"><time><small>Le 27/02/2017</small></time></div>
|
||||
<div class="align-left"><span class="chip chip-primary">video</span></div>
|
||||
<div class="align-center comment-text">3 commentaires</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</article>
|
||||
|
||||
</div>
|
||||
|
||||
</main>
|
||||
|
||||
<section class="sidebar">
|
||||
<div class="card card-info">
|
||||
<div class="card-header">
|
||||
<i class="fa fa-fw fa-info"></i> #Inktober2017
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p>Toutes les publications contenant le mot-clé « <a href="">Inktober2017</a> »</p>
|
||||
|
||||
<p>Un mot-clé peut servir à désigner soit l'univers dans laquelle la création se déroule, soit l'objectif dans lequel a été fait la publication (tel que le 100 Thème Challenge)</p>
|
||||
</div>
|
||||
</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="#" class="menu-element">Nouvelles et formats courts <span class="menu-label label-secondary">40</span></a>
|
||||
<a href="#" class="menu-element">Contes et légendes <span class="menu-label label-secondary">11</span></a>
|
||||
<a href="#" class="menu-element">Poèmes <span class="menu-label label-secondary">11</span></a>
|
||||
<a href="#" class="menu-element">Romans <span class="menu-label label-secondary">0</span></a>
|
||||
<a href="#" class="menu-element">Logo et Design <span class="menu-label label-secondary">0</span></a>
|
||||
<a href="#" 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="#" class="menu-element">Niouzes site et perso <span class="menu-label label-secondary">2</span></a>
|
||||
<a href="#" class="menu-element">Réflexions et pensées <span class="menu-label label-secondary">0</span></a>
|
||||
<a href="#" class="menu-element">Militantisme <span class="menu-label label-secondary">4</span></a>
|
||||
<a href="#" 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>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
|
||||
<!-- Include all compiled plugins (below), or include individual files as needed -->
|
||||
<script src="js/trim.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,169 @@
|
|||
<!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 class="container-fluid" 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="..." class="btn btn-link">Blog</a>
|
||||
<a href="..." class="btn btn-link">Gallerie</a>
|
||||
<a href="..." 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="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>
|
||||
|
||||
</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>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
|
||||
<!-- Include all compiled plugins (below), or include individual files as needed -->
|
||||
<script src="js/bootstrap.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because one or more lines are too long
Reference in New Issue