<meta http-equiv="refresh" content="0.1; url=/"><style type='text/css'>
@keyframes hvr-wobble-vertical {
16.65% { transform: translateY(8px); }
33.3% { transform: translateY(-6px); }
49.95% { transform: translateY(4px); }
66.6% { transform: translateY(-2px); }
83.25% { transform: translateY(1px); }
100% { transform: translateY(0); }
}
.wp-to-top:active,
.wp-to-top:focus,
.wp-to-top:hover {
animation-name: hvr-wobble-vertical;
animation-duration: 1s;
animation-timing-function: ease-in-out;
animation-iteration-count: 1;
}
.wp-to-top {
display: inline-block;
position: fixed;
bottom: 40px;
left: 10px;
padding: 10px;
background: #000;
color: #fff;
z-index: 999;
}
</style>
<a href="#top" class="wp-to-top">go top</a><a href="http://commodore.ca/arcade/tetris2.swf" download>download</a><style>
.mvs {
margin: 2px;
display: inline-flex;
background-color: #fff;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.16), 0 0 0 1px rgba(0, 0, 0, 0.08);
border-radius: 4px;
overflow: hidden;
}
.mvs a {
color: #555;
text-decoration: none;
padding: 12.5px 8px 12.5px 8px;
box-shadow: 0 0 1px rgba(0, 0, 0, .1);
overflow: hidden;
}
</style>
<div class="mvs">
<a href="/">Accueil</a>
<a href="http://pastebin.com/wXxRjLSN">Roboto</a>
</div><style>
#comment {
min-height: 50px;
max-height: 100px;
width: 500px;
}
.edit {
box-sizing: border-box;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.16), 0 0 0 1px rgba(0, 0, 0, 0.08);
}
</style>
<div id="comment" contenteditable="false">Text for test editable element</div>
<button onClick="toggleEdit(event)">Edit</button>
<script>
function toggleEdit(e){
let comment = document.querySelector("#comment");
if (comment.contentEditable == "true") {
comment.contentEditable = "false";
e.target.innerHTML = "Edit";
comment.classList.remove("edit");
} else {
comment.contentEditable = "true";
e.target.innerHTML = "Done";
comment.classList.add("edit");
}
}
</script>Text for test editable element
<style>
.page-wrapper {
position: relative;
overflow: hidden;
height: 100%;
width: 100%;
}
.page-wrapper .page-content {
display: inline-block;
overflow-x: hidden;
width: 100%;
height: 100%;
padding: 0px;
}
.page-wrapper .sidePanel-wrapper {
position: absolute;
}
.sidePanel-wrapper.left,
.sidePanel-wrapper.right {
width: 260px;
height: 100%;
top: 0;
}
.sidePanel-wrapper.top,
.sidePanel-wrapper.bottom {
width: 100%;
height: 260px;
left: 0;
}
.sidePanel-wrapper.left {
left: -260px;
}
.sidePanel-wrapper.right {
right: -260px;
}
.sidePanel-wrapper.top {
top: -260px;
}
.sidePanel-wrapper.bottom {
bottom: -260px;
}
.page-wrapper.toggled > .sidePanel-wrapper.left {
left: 0px;
}
.page-wrapper.toggled > .sidePanel-wrapper.right {
right: 0px;
}
.page-wrapper.toggled > .sidePanel-wrapper.top {
top: 0px;
}
.page-wrapper.toggled > .sidePanel-wrapper.bottom {
bottom: 0px;
}
@media screen and (min-width: 768px) {
.page-wrapper.toggled > .sidePanel-wrapper.left + .page-content {
padding-left: 260px;
}
.page-wrapper.toggled > .sidePanel-wrapper.right + .page-content {
padding-right: 260px;
}
.page-wrapper.toggled > .sidePanel-wrapper.top + .page-content {
padding-top: 260px;
}
.page-wrapper.toggled > .sidePanel-wrapper.bottom + .page-content {
padding-bottom: 260px;
}
}
.toggle-sidePanel {
position: absolute;
cursor: pointer;
z-index: 1000;
}
.sidePanel-wrapper.left .toggle-sidePanel {
border-radius: 0 4px 4px 0;
border-right: 1px solid #dee2e6 !important;
border-top: 1px solid #dee2e6 !important;
border-bottom: 1px solid #dee2e6 !important;
width: 24px;
top: 10px;
right: -24px;
}
.sidePanel-wrapper.right .toggle-sidePanel {
border-radius: 4px 0 0 4px;
border-left: 1px solid #dee2e6 !important;
border-top: 1px solid #dee2e6 !important;
border-bottom: 1px solid #dee2e6 !important;
width: 24px;
top: 10px;
left: -24px;
}
.sidePanel-wrapper.top .toggle-sidePanel {
border-radius: 0 0 4px 4px;
border-left: 1px solid #dee2e6 !important;
border-right: 1px solid #dee2e6 !important;
border-top: 1px solid #dee2e6 !important;
height: 24px;
left: 10px;
bottom: -24px;
}
.sidePanel-wrapper.bottom .toggle-sidePanel {
border-radius: 4px 4px 0 0;
border-left: 1px solid #dee2e6 !important;
border-right: 1px solid #dee2e6 !important;
border-bottom: 1px solid #dee2e6 !important;
height: 24px;
left: 10px;
top: -24px;
}
.sidePanel-wrapper .sidePanel-header {
padding: 10px 20px;
align-items: center;
}
.sidePanel-wrapper .sidePanel-header > a,
.sidePanel-wrapper .sidePanel-header > span {
font-weight: bold;
}
.sidePanel-content {
overflow-y: auto;
position: relative;
}
.sidePanel-wrapper.left .sidePanel-content,
.sidePanel-wrapper.right .sidePanel-content {
height: 100%;
}
.sidePanel-wrapper.top .sidePanel-content,
.sidePanel-wrapper.bottom .sidePanel-content {
width: 100%;
}
.page-wrapper .sidePanel-wrapper,
.page-wrapper .page-content {
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
</style>
<div style="height: 500px;background-color: gray;margin: 10px;">
<div class="page-wrapper toggled">
<nav class="sidePanel-wrapper left bg-white border-right shadow">
<!-- Side panel toggler -->
<div class="btn btn-sm text-body bg-white shadow-sm toggle-sidePanel"
onclick="this.parentNode.parentNode.classList.toggle('toggled');" title="toggle">
<i class="fas fa-chevron-left"></i>
</div>
<!-- Panel title -->
<div class="sidePanel-header border-bottom">
<span class="text-body mr-4">Title</span>
</div>
<!-- Panel content -->
<div class="sidePanel-content" style="word-wrap: break-word;">
totoooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo
</div>
</nav>
<main class="page-content" style="word-wrap: break-word;">
totoooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo
</main>
</div>
</div>
<div style="height: 500px;background-color: gray;margin: 10px;">
<div class="page-wrapper toggled">
<nav class="sidePanel-wrapper right bg-white border-left shadow">
<!-- Side panel toggler -->
<div class="btn btn-sm text-body bg-white shadow-sm toggle-sidePanel"
onclick="this.parentNode.parentNode.classList.toggle('toggled');" title="toggle">
<i class="fas fa-chevron-left"></i>
</div>
<!-- Panel title -->
<div class="sidePanel-header border-bottom">
<span class="text-body mr-4">Title</span>
</div>
<!-- Panel content -->
<div class="sidePanel-content" style="word-wrap: break-word;">
totoooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo
</div>
</nav>
<main class="page-content" style="word-wrap: break-word;">
totoooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo
</main>
</div>
</div>
<div style="height: 500px;background-color: gray;margin: 10px;">
<div class="page-wrapper toggled">
<nav class="sidePanel-wrapper top bg-white border-bottom shadow">
<!-- Side panel toggler -->
<div class="btn btn-sm text-body bg-white shadow-sm toggle-sidePanel"
onclick="this.parentNode.parentNode.classList.toggle('toggled');" title="toggle">
<i class="fas fa-chevron-left"></i>
</div>
<!-- Panel title -->
<div class="sidePanel-header border-bottom">
<span class="text-body mr-4">Title</span>
</div>
<!-- Panel content -->
<div class="sidePanel-content" style="word-wrap: break-word;">
totoooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo
</div>
</nav>
<main class="page-content" style="word-wrap: break-word;">
totoooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo
</main>
</div>
</div>
<div style="height: 500px;background-color: gray;margin: 10px;">
<div class="page-wrapper toggled">
<nav class="sidePanel-wrapper bottom bg-white border-top shadow">
<!-- Side panel toggler -->
<div class="btn btn-sm text-body bg-white shadow-sm toggle-sidePanel"
onclick="this.parentNode.parentNode.classList.toggle('toggled');" title="toggle">
<i class="fas fa-chevron-left"></i>
</div>
<!-- Panel title -->
<div class="sidePanel-header border-bottom">
<span class="text-body mr-4">Title</span>
</div>
<!-- Panel content -->
<div class="sidePanel-content" style="word-wrap: break-word;">
totoooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo
</div>
</nav>
<main class="page-content" style="word-wrap: break-word;">
totoooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo
</main>
</div>
</div>