<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>FLUOR OPTIMAL | Lamenta</title>
<meta name="description" content="Fluor Optimal website | videos, sounds, pictures, texts, hopes." />
<meta name="author" content="FLUOR OPTIMAL" />
<link rel="apple-touch-icon" href="apple-touch-icon.png" />
<link data-require="bootstrap@*" data-semver="4.0.0-alpha.2" rel="stylesheet" href="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script data-require="bootstrap@*" data-semver="4.0.0-alpha.2" src="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/js/bootstrap.js"></script>
<link href="style.css" rel="stylesheet" />
<style>
/*CHANGES*/
::-webkit-scrollbar {
width: 10px;
background: #ffed27 url('http://assets.tumblr.com/images/x.gif?v=1')top right repeat;
}
::-webkit-scrollbar-thumb {
background-color: #ff0000;
border: 0px solid #ffed27;
}
#rightcol {
background-color: #0069ff;
}
#leftcol {
background-color: white;
}
</style>
</head>
<body>
<!--[if lt IE 8]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<div class="container-fluid">
<div class="row">
<div class="col-xs-8" id="leftcol">
<div id="pubpoem">
<p style="font-size:2em">
<b>Lamenta</b>
</p>
<p> Encore un truc bizarre,
<br />
Peut-être au mois de Mars.
<br />
C’était elle.
<br />
Pas un seul élèment de commun.
<br />
<br />
J’ai pas trop compris,
<br />
Mais rien.
<br />
On est parti sur l’autoroute.
<br />
Tu peux pas me le dire avant ?
<br />
<br />
J’ai rien dit.
<br />
Dormir la semaine en bas.
<br />
A la fin ça a été l’apothéose,
<br />
J’ai jamais dit un mot.
<br />
<br />
C’est pas normal autant d’emprise.
<br />
Longtemps, longtemps que je l’ai remarqué,
<br />
J’ai pris mes distances.
<br />
Putain qu’est ce qu’il faut faire ?
<br />
</p>
</div>
</div>
<div class="col-xs-4" id="rightcol">
<div class="decoborder">
<h2>
<a href="index.html" title="Fluor Optimal" rel="home">
<span class="glyphicon glyphicon-arrow-left" aria-hidden="true"></span>
</a>
</h2>
</div>
<div class="box1">
<p class="pw0">Lamenta</p>
<p class="pw1">
<i>2016 <br />
</i>
<i>Poem <br />
</i>
</p>
<p class="pw2">J’arrache une herbe
<br />
Sa profonde et blanche racine
<br />
À voir me fait mal.</p>
</div>
<div class="decoborder">
<h2 data-toggle="collapse" data-target="#contactcollapse">✚</h2>
</div>
<div id="contactcollapse" class="collapse">
<h3>
<a href="me.html" title="ME" class="subm">
Me
</a>
</h3>
<h3>
<a href="links.html" title="LINKS" class="subm">
Links
</a>
</h3>
<h3>
<a href="contact.html" title="CONTACT" class="subm">
Contact
</a>
</h3>
</div>
</div>
</div>
</div>
</body>
</html>
/* Styles go here */
html,
body {
position: relative; /* Added */
height: 100%; /* Added */
width: 100%; /* Added */
margin: 0;
padding: 0;
}
body {
font-size: 16px;
cursor: url(http://i.imgur.com/ZOrzC.png), auto;
}
/*FONTS*/
body,
h1,
h2,
h3,
h4,
h5,
h6,
p {
font-family: 'Noe Display';
}
h1 {
font-size: 4.236em;
}
h2 {
color: black;
font-weight: lighter;
font-size: 2.618em;
}
h2 a:hover,
h2:hover {
color: white;
text-shadow: 2px 2px 2px black;
font-weight: lighter;
text-decoration: none;
cursor: pointer;
}
h3 {
font-size: 1em;
line-height: 1.618em;
}
p {
font-size: 1em;
line-height: 1.618em;
}
a:link,
a:visited {
color: black;
}
a.subm:hover {
text-decoration: line-through;
}
/*MENU/HOME*/
.decoborder {
border-top: 1px solid #000;
border-bottom: 1px solid #000;
margin-top: 1em;
margin-bottom: 1em;
}
#flashtext {
font-weight: bold;
color: black;
text-shadow: 2px 2px 2px black;
font-weight: lighter;
text-decoration: none;
animation: changecolor 0.2s infinite;
-moz-animation: changecolor 0.2s infinite;
-webkit-animation: changecolor 0.2s infinite;
-ms-animation: changecolor 0.2s infinite;
-o-animation: changecolor 0.2s infinite;
}
@keyframes changecolor {
0% {
color: white;
}
25% {
color: #ff0000;
}
50% {
color: #0069ff;
}
100% {
color: #ffed27;
}
}
/* Mozilla Browser */
@-moz-keyframes changecolor {
0% {
color: white;
}
25% {
color: #ff0000;
}
50% {
color: #0069ff;
}
100% {
color: #ffed27;
}
}
/* WebKit browser Safari and Chrome */
@-webkit-keyframes changecolor {
0% {
color: white;
}
25% {
color: #ff0000;
}
50% {
color: #0069ff;
}
100% {
color: #ffed27;
}
}
/* IE 9,10*/
@-ms-keyframes changecolor {
0% {
color: white;
}
25% {
color: #ff0000;
}
50% {
color: #0069ff;
}
100% {
color: #ffed27;
}
}
/* Opera Browser*/
@-o-keyframes changecolor {
0% {
color: white;
}
25% {
color: #ff0000;
}
50% {
color: #0069ff;
}
100% {
color: #ffed27;
}
}
/*POSTS*/
.pw0,
.pw1,
.pw2 {
color: white;
}
.pb0,
.pb1,
.pb2 {
color: black;
}
.pw0,
.pb0 {
font-size: 1.7em;
margin-bottom: -0.2em;
margin-right: 0.5em;
margin-top: 0.1em;
}
.pw1,
.pb1 {
margin-right: 1em;
}
.pw2,
.pb2 {
text-align: left;
font-size: .8em;
margin-left: 0.5em;
margin-right: 0.5em;
}
.box1,
.box2,
.box3 {
border: 1px solid #000000;
}
.box1 {
-webkit-box-shadow: 5px 5px 0px 1px rgba(255, 0, 0, 1);
-moz-box-shadow: 5px 5px 0px 1px rgba(255, 0, 0, 1);
box-shadow: 5px 5px 0px 1px rgba(255, 0, 0, 1);
}
.box2 {
-webkit-box-shadow: 5px 5px 0px 1px rgba(255, 237, 39, 1);
-moz-box-shadow: 5px 5px 0px 1px rgba(255, 237, 39, 1);
box-shadow: 5px 5px 0px 1px rgba(255, 237, 39, 1);
}
.box3 {
-webkit-box-shadow: 5px 5px 0px 1px rgba(255, 255, 255, 1);
-moz-box-shadow: 5px 5px 0px 1px rgba(255, 255, 255, 1);
box-shadow: 5px 5px 0px 1px rgba(255, 255, 255, 1);
}
#pubpoem,
#pubimg,
#pubvid,
#pubsound {
margin-top: 1em;
margin-bottom: 1em;
}
/*YT*/
.embed-container {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
max-width: 100%;
}
.embed-container iframe,
.embed-container object,
.embed-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/*COLUMNS*/
#rightcol {
position: absolute;
top: 0;
bottom: 0;
right: 0;
overflow-y: scroll;
height: 100vh; /* Added */
}
#leftcol {
position: absolute;
top: 0;
bottom: 0;
left: 0;
overflow-y: scroll;
height: 100vh; /* Added */
}
#pubpoem {/* Added */
position: absolute;
left: 50%;
top: 50%;
bottom: -50%; /* This was added to offset the top: 50% which was keeping the #inner from scrolling any further to the top. */
transform: translate(-50%, -50%);
z-index: 9999;
}
/*MEDIASCREEN*/
@media all and (min-width: 960px) {
body {
font-size: 18px;
}
}
@media all and (max-width: 959px) and (min-width: 600px) {
body {
font-size: 16px;
}
.pw0,
.pb0 {
line-height: 1em;
margin-bottom: 0.3em;
margin-top: 0.5em;
}
}
@media all and (max-width: 599px) and (min-width: 320px) {
body {
font-size: 10px;
}
h3 {
line-height: 1em;
}
.pw0,
.pb0 {
font-size: 1.4em;
line-height: 1em;
margin-bottom: 0.3em;
margin-top: 0.5em;
}
}