BIJOU // code

[nobr][div class=background][div class=second]

[div class=topimg][br][/br]
[div class=back][fa]fa-angle-double-left[/fa] go back [fa]fa-angle-double-right[/fa][/div][/div]

[div class=border][div class=opacitybg][/div]
[div class=box][font=Hind][div class=over]overview[/div]
[br][/br]LOREM ipsum dolor sit amet, consectetur adipiscing elit. Erat enim Polemonis. Sed ne, dum huic obsequor, vobis molestus sim. Summus dolor plures dies manere non potest? Omnes enim iucundum motum, quo sensus hilaretur. Est, ut dicis, inquit; Duo Reges: constructio interrete. Haec quo modo conveniant, non sane intellego.Illis videtur, qui illud non dubitant bonum dicere; Unum est sine dolore esse, alterum cum voluptate. Nam et complectitur verbis, quod vult, et dicit plane, quod intellegam; Oculorum, inquit Plato, est in nobis sensus acerrimus, quibus sapientiam non cernimus. Illi enim inter se dissentiunt. Quo plebiscito decreta a senatu est consuli quaestio Cn. Quid enim?De ingenio eius in his disputationibus, non de moribus quaeritur. Quis non odit sordidos, vanos, leves, futtiles? Hic quoque suus est de summoque bono dissentiens dici vere Peripateticus non potest. Tu autem negas fortem esse quemquam posse, qui dolorem malum putet. Quae cum dixisset paulumque institisset, Quid est?
[br][/br][br][/br]
[div class=over]rules[/div]
[br][/br]
[div class=num]1.[/div] LOREM ipsum dolor sit amet, consectetur adipiscing elit. Erat enim Polemonis. Sed ne, dum huic obsequor, vobis molestus sim. Summus dolor plures dies manere non potest?
[br][/br][br][/br]
[div class=num]2.[/div] Omnes enim iucundum motum, quo sensus hilaretur. Est, ut dicis, inquit; Duo Reges: constructio interrete. Haec quo modo conveniant, non sane intellego.
[br][/br][br][/br]
[div class=num]3.[/div] Illis videtur, qui illud non dubitant bonum dicere; Unum est sine dolore esse, alterum cum voluptate. Nam et complectitur verbis, quod vult, et dicit plane, quod intellegam.
[br][/br][br][/br]
[div class=over]links[/div]
[br][/br]
[center]CHARACTERS - MAIN - OOC[/center]
[/font][/div][/div][/div]

[div class=first]

[div class=words][div class=i]t[/div]itle
[br][/br]
[div class=bottomwords]lorem ipsum
dolor sit amet;
[br][/br]consectetur adipisci velit
[br][/br]sed ac eleifend felis mollis;
[br][/br]efficitur magna.
[/div][/div]

[div class=line][div class=fimgb][div class=input]

[div class=block][div class=inputwords][fa]fa-angle-double-left[/fa] go forward [fa]fa-angle-double-right[/fa][/div][/div][/div][/div][/div]

[/div][/div]
[div class=c]made by: @undine[/div]

[script class=input on=click]
slideUp 2000 first
fadeIn 1000 second
[/script]

[script class=back on=click]
slideDown 2000 first
[/script]

[script class=input on=mouseenter]
addClass op inputwords
[/script]

[script class=input on=mouseleave]
removeClass op inputwords
[/script]

[class=background]height: 400px;
max-width: 600px;
boz-sixing: border-box;
margin: auto;
position: relative;
overflow: hidden;
border: 1px solid #f1f1f1
[/class]

[class=first]height: 100%;
width: 100%;
background: #CFCFCF;
opacity: 0.99;
position: relative;
top: -400px
[/class]

[class=second]height: 100%;
width: 100%;
background-image:url(http://i.pinimg.com/originals/78/3a/19/783a198a811f72ede159e2b6d8f44ce9.jpg);
background-size:105%;
background-position: 0% 30%;
opacity: 1;
position: relative;
top: 0px
[/class]

[class=back]width:100%; height: 40px; padding: 20px 0px 0px 0px; margin: auto; font-weight: 700; letter-spacing: 1.5px; word-spacing: 1.5px; font-size: 13px; color: white; position: relative; top: 305px; text-align: center; text-transform: uppercase; cursor: pointer
[/class]

[class=line]height: 2px;
width: 100%;
background: white;
position: relative;
top: 130px
[/class]

[class=fimgb]position: relative;
top: -95px;
margin: auto;
clip-path: polygon(0 50%, 50% 0, 100% 50%, 50% 100%); height: 180px; width: 180px; background: #fff; padding: 7px
[/class]

[class=input]cursor: pointer;
height: 180px;
width: 180px;
background-image: url(http://vignette.wikia.nocookie.net/wingsoffirefanon/images/4/42/1§.jpg/revision/latest?cb=20180806190151); background-size: 120%; background-position: 55% 100%; clip-path: polygon(0 50%, 50% 0, 100% 50%, 50% 100%); filter: saturate(70%)
[/class]

[class=inputwords]height: 10px;
padding: 5px 5px 10px 5px;
width: 100%;
display: block;
background: #fff;
color: #444444;
position: relative;
top: 85px;
font-size: 10px;
font-family: 'Playfair Display', serif;
text-align: center;
transition: all .4s ease-in-out;
opacity: 0;
position: relative
[/class]

[class name=op]opacity: 1
[/class]

[class name=words]height:100px;
width: 100%;
font-size: 25px;
font-family: 'Playfair Display', serif;
position: absolute;
color: #444444;
top: 250px;
text-align: center;
letter-spacing: 4.5px;
text-transform: uppercase
[/class]

[class=topimg]height:100%;
width:100%;
filter: saturate(110%);
transition: all .5s ease-in-out;
position: relative;
top: 0px;
left: 0px
[/class]

[class name=topimg state=hover]filter: saturate(150%);
[/class]

[class=topwords]width:130px;
height: 7%;
border-bottom: 1px solid #94A12C;
font-size: 12px;
color: black;
position: relative;
top: 220px;
margin: auto;
font-family: 'Montserrat', sans-serif;
font-weight: 700;
word-spacing: 1px;
letter-spacing: 1px;
[/class]

[class=bottomwords]height: 100%; width: 100%; font-size: 0.45em; text-transform: lowercase; text-align: center; font-style: oblique; top: -5px; line-height: 14px; letter-spacing: 0.2px; position: relative; top: 10px
[/class]

[class=border]height: 300px;
width: 345px;
position: relative;
margin:auto;
top: -371px;
left: 0px
[/class]

[class name=opacitybg]height: 289px;
width: 350px;
border: 1px solid white;
background: white;
opacity: 0.8;
margin: auto;
position: relative;
top: 5px
[/class]

[class=i]display: inline-block; font-size: 30px; font-style: italic
[/class]

[class=box]height: 80%; width: 90%; padding: 5px; font-size: 11px; font-family: 'Hind', sans-serif; margin: auto; position: relative; top: -265px; line-height:16px; word-spacing: -0px; overflow: auto; text-align: justify
[/class]

[class=over]height: 25px; padding: 10px 0px 0px 0px; width: 100%; background: #ACACAC; font-size: 10px; font-weight: 700; text-transform: uppercase; position: sticky; top: 0px; text-align: center; letter-spacing: 2px;
[/class]

[class=num]display: inline-block; font-size: 11px; font-weight: 700
[/class]

[class=c]width: 100%; text-align: center; opacity: 0; font-size: 10px
[/class]
[/nobr]