Ce que j'aime @kyvamo - Tumblr Blog

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display&display=swap');

body {

background-color:#232426;

background-repeat:no-repeat;

background-attachment:fixed;

margin: 0;

overflow:auto;

background-image:url('https://oimg.photobucket.com/images/i/editsbym/pexels-stephane-hurbe-4198029.jpg');

background-size:cover;

}

table, tr, td, li, p, div, .profileInfo td.text {

font-size: 12px;

color: #000;

font-family: 'Playfair Display', sans-serif;

}

.container {

width:950px;

height:430px;

position:absolute;

left:0;

right:0;

top:0;

bottom:0;

overflow:hidden;

margin:auto;

color:#fff;

background-color:#f0f0ee;

padding:20px;

}

a.credit:link, a.credit:visited {

background-color: #ffffff;

color: #2d0707;

padding: 5px 3px;

text-align: center;

text-decoration: none;

display: inline-block;

margin-top: 9px;

font-family: 'Playfair Display', serif;

font-weight: 100;

font-size: 11px;

text-transform: uppercase;

width: 78px;

letter-spacing: 2px;

margin-left: 5px;

margin-top: 15px;

}

a.credit:hover, a.credit:active {

background-color: #131313;

}

a.navigationLinks:link, a.navigationLinks:visited {

background-color: #ffffff;

color: #2d0707;

padding: 15px 3px;

text-align: center;

text-decoration: none;

display: inline-block;

font-family: 'Playfair Display', serif;

font-weight: 100;

font-size: 11px;

text-transform: uppercase;

width: 173px;

letter-spacing: 2px;

margin-top: 6px;

}

a.navigationLinks:hover, a.navigationLinks:active {

background-color: #19464c;

color:#fff;

}

.creditHolder{

position:fixed;

bottom:15;

left:15;

}

.sidewaysContainer {

margin-top: 55px;

}

.leftPicture {

background-image:url('https://via.placeholder.com/251x430.png');

background-size:cover;

height: 430px;

width: 251px;

display: inline-block;

vertical-align: top;

}

.threePictureHolder {

width: 150px;

height: 430px;

display: inline-block;

vertical-align: top;

margin-left: 20px;

}

.firstStacked {

width: 150px;

height: 130px;

margin-bottom: 20px;

background-image:url('https://via.placeholder.com/150x130.png');

background-size:cover;

}

.secondStacked {

width: 150px;

height: 130px;

margin-bottom: 20px;

background-image:url('https://via.placeholder.com/150x130.png');

}

.thirdStacked {

width: 150px;

height: 130px;

margin-bottom: 20px;

background-image:url('https://via.placeholder.com/150x130.png');

}

.middleSectionContainer {

height: 430px;

width: 300px;

display: inline-block;

vertical-align: top;

margin-left: 20px;

}

.rightImage {

height: 430px;

width: 179px;

display: inline-block;

vertical-align: top;

margin-left: 20px;

background-image:url('https://via.placeholder.com/179x430.png');

}

b {

background: #d4e4ec;

padding: 5px;

line-height: 35px;

color: #55666f;

font-weight: 100;

text-transform: uppercase;

}

h1 {

margin: 0;

text-align: center;

font-weight: 100;

text-transform: uppercase;

font-size: 16px;

background: #a4c0cb85;

padding-top: 10px;

padding-bottom: 10px;

display: inline-block;

width: 150px;

margin-top: 74px;

color: #1a4c53;

}

h2 {

margin: 0;

text-align: center;

display: inline-block;

vertical-align: top;

width: 300px;

text-transform: uppercase;

font-weight: 100;

font-size: 32px;

color: #99b6c2;

margin-top: 40px;

}

h3 {

width: 300px;

display: inline-block;

vertical-align: top;

margin: 0;

font-size: 18px;

text-transform: uppercase;

font-weight: 100;

text-align: center;

margin-top: -8px;

margin-bottom: 10px;

color: #988479;

letter-spacing: 2px;

}

.bioHolder {

width: 195px;

text-align: justify;

height: 255px;

overflow: auto;

display: inline-block;

margin-left: 50px;

padding-right:5px;

}

#basicInfo{

display:none;

}

#basicInfo:target{

display:block;

width: 195px;

text-align: justify;

height: 255px;

overflow: auto;

display: inline-block;

margin-left: 50px;

padding-right:5px;

margin-top:-255px;

background-color:#f0f0ee;

}

#connections{

display:none;

}

#connections:target{

display:block;

width: 195px;

text-align: justify;

height: 255px;

overflow: auto;

display: inline-block;

margin-left: 50px;

padding-right:5px;

margin-top:-255px;

background-color:#f0f0ee;

}

#writing{

display:none;

}

#writing:target{

display:block;

width: 195px;

text-align: justify;

height: 255px;

overflow: auto;

display: inline-block;

margin-left: 50px;

padding-right:5px;

margin-top:-255px;

background-color:#f0f0ee;

}

::-webkit-scrollbar-thumb {background-color:#c1bdb1;}

::-webkit-scrollbar {background-color:transparent; width:2px; height:5px;}

.contacttable, .whitetext12, .nametext, .lightbluetext8, .orangetext15, .blacktext12, .btext, .redtext, .redbtext {display:none;height:0px;!important;visibility:hidden} td td td td {border:0px;width:0px;text-align:left;} table, td, tr {padding:0px;width:;background-color:transparent} table table table {padding:1px;height:.01%;width:100%;} table table,table table table table,table,tr,td {height:0px;!important;border:0px;!important} a.text, table div font a, .navbar font, tr td font {visibility:hidden;display:none;height:0px;!important;} #footerWarpper{display: none;} table table table table,table table table table td.text, td.text td.text table{display:none;} td.text table table{display:inline;visibility:visible;} table td table tr td.text table{visibility:hidden;} table td table tr td.text table table,table td table tr td.text table table td.text{visibility:visible;} table.footer {display: none;} div table a.navbar img {display:none;} div table.navigationBar {margin-bottom:-30px;} .profileInfo {display:none;} .profileInfo td {text-align:left;} .profileInfo a img {position:relative; margin-bottom:-1px; margin-bottom:-2px; width:125px; margin-right:-6px; margin-top:4px; _margin-top:3px; display:block;} .profileInfo td td, .nametext, .msOnlineNow img {display:none;} .profileInfo td td.text {display:table-cell; _display:inline;} .profileInfo .text {font-size:7px; line-height:8px; text-transform:uppercase; font-family:small fonts;} .msOnlineNow {font-family:small fonts; letter-spacing:0px; font-size:7px; line-height:8px; padding:2px; padding-left:0px; text-transform:uppercase; font-weight:normal; display:none; text-decoration:blink; letter-spacing:2px;} .userAlbums {display:none;} div td {display:none;} </span>

</style>

<html>

<body>

</div>

<h1>Basic Info</h1>

</div>

</a>

<h1>Connections</h1>

</div>

</a>

<h1>Writing</h1>

</div>

</a>

</div>

<h2>Display Name</h2>

<h3>First Middle Last</h3>

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sit amet nisl suscipit adipiscing bibendum est. Amet luctus venenatis lectus magna fringilla urna porttitor rhoncus dolor. Egestas integer eget aliquet nibh praesent tristique magna sit amet. Tincidunt nunc pulvinar sapien et ligula ullamcorper malesuada proin libero. Faucibus vitae aliquet nec ullamcorper sit. Hac habitasse platea dictumst quisque sagittis. Elementum sagittis vitae et leo duis ut. Massa placerat duis ultricies lacus sed turpis. Purus sit amet luctus venenatis lectus. Feugiat in ante metus dictum at tempor commodo. Vestibulum lectus mauris ultrices eros in cursus. Nisl suscipit adipiscing bibendum est ultricies integer quis auctor. Non diam phasellus vestibulum lorem.

Purus ut faucibus pulvinar elementum integer enim neque volutpat ac. Nunc aliquet bibendum enim facilisis gravida neque convallis a. Pretium lectus quam id leo in vitae turpis massa. In pellentesque massa placerat duis ultricies. Mauris commodo quis imperdiet massa tincidunt nunc pulvinar sapien et. Ipsum dolor sit amet consectetur adipiscing elit. Ut etiam sit amet nisl purus in mollis nunc sed. Non quam lacus suspendisse faucibus interdum posuere. Malesuada pellentesque elit eget gravida cum sociis natoque penatibus. Quam elementum pulvinar etiam non quam lacus suspendisse faucibus. Amet commodo nulla facilisi nullam vehicula. Velit dignissim sodales ut eu sem. Id neque aliquam vestibulum morbi blandit cursus risus at ultrices.

Mauris pellentesque pulvinar pellentesque habitant. Tristique nulla aliquet enim tortor. Et malesuada fames ac turpis egestas maecenas pharetra. Elit at imperdiet dui accumsan sit. Faucibus vitae aliquet nec ullamcorper sit amet risus nullam eget. Sagittis id consectetur purus ut faucibus pulvinar. Senectus et netus et malesuada fames ac turpis egestas. Aliquam sem et tortor consequat id. Tincidunt id aliquet risus feugiat in. Velit aliquet sagittis id consectetur purus ut faucibus pulvinar. Felis donec et odio pellentesque diam volutpat commodo. Ultricies lacus sed turpis tincidunt id aliquet risus feugiat in. Diam in arcu cursus euismod quis viverra nibh cras. Rhoncus est pellentesque elit ullamcorper dignissim cras tincidunt lobortis. Auctor urna nunc id cursus metus aliquam. Aenean sed adipiscing diam donec. Quam lacus suspendisse faucibus interdum. Id ornare arcu odio ut sem. Vel facilisis volutpat est velit egestas. Risus at ultrices mi tempus.

Faucibus ornare suspendisse sed nisi lacus. Semper risus in hendrerit gravida rutrum quisque non tellus. Duis convallis convallis tellus id interdum velit laoreet. Euismod elementum nisi quis eleifend quam adipiscing vitae proin. Mi bibendum neque egestas congue quisque egestas. Consectetur adipiscing elit duis tristique sollicitudin nibh sit amet commodo. Integer malesuada nunc vel risus commodo viverra maecenas. Accumsan lacus vel facilisis volutpat est velit egestas dui id. Viverra aliquet eget sit amet. In ornare quam viverra orci sagittis. Massa vitae tortor condimentum lacinia. Praesent elementum facilisis leo vel fringilla est ullamcorper eget. Lacus viverra vitae congue eu consequat ac felis donec. Viverra aliquet eget sit amet tellus cras adipiscing enim eu. Tincidunt nunc pulvinar sapien et ligula ullamcorper malesuada proin libero. Imperdiet sed euismod nisi porta lorem mollis. Nunc eget lorem dolor sed viverra ipsum nunc aliquet. Ipsum dolor sit amet consectetur. Eget felis eget nunc lobortis mattis aliquam faucibus. Sed risus ultricies tristique nulla aliquet.

Est sit amet facilisis magna etiam tempor orci eu. Velit sed ullamcorper morbi tincidunt. Lorem ipsum dolor sit amet consectetur adipiscing. Nullam ac tortor vitae purus faucibus ornare suspendisse sed. Leo a diam sollicitudin tempor id. Neque aliquam vestibulum morbi blandit. Arcu cursus euismod quis viverra nibh cras. Vitae suscipit tellus mauris a. Sed augue lacus viverra vitae. Eget dolor morbi non arcu risus quis varius quam. Aliquam ut porttitor leo a diam. Faucibus nisl tincidunt eget nullam non nisi est sit. Vulputate sapien nec sagittis aliquam malesuada bibendum. Pellentesque nec nam aliquam sem et tortor. Nisi lacus sed viverra tellus in hac habitasse platea dictumst. Elementum facilisis leo vel fringilla est ullamcorper eget nulla facilisi. Nibh mauris cursus mattis molestie a iaculis at erat. Vel eros donec ac odio tempor. Leo urna molestie at elementum eu facilisis sed.

</div>

<div style="text-align:right;"><a style="position: absolute; margin-top: -100px; margin-left: -28px;" href="#close" class="credit">close</a></div>

<b>Pronunciation</b> here<br>

<b>Nickname/Alias</b> here<br>

<b>Gender</b> here<br>

<b>Orientation</b> here<br>

<b>Birthday</b> here<br>

<b>Birthplace</b> here<br>

<b>Astrological Sign</b> here<br>

<b>Species</b> here<br>

<b>Ethnicity</b> here<br>

<b>Preferred Hand</b> here<br>

<b>Eye Color</b> here<br>

<b>Hair Color</b> here<br>

<b>Hairstyle</b> here<br>

<b>Makeup</b> here<br>

<b>Build</b> here<br>

<b>Height</b> here<br>

<b>Weight</b> here<br>

<b>Birthmarks/scars</b> here<br>

<b>Distinguishing Features</b> here<br>

<b>Health</b> here<br>

<b>Allergies</b> here<br>

</div>

<div style="text-align:right;"><a style="position: absolute; margin-top: -100px; margin-left: -28px;" href="#close" class="credit">close</a></div>

<b>connections name</b> / / <i>connection title</i> / /Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Integer malesuada nunc vel risus. Elit ut aliquam purus sit. Porttitor rhoncus dolor purus non enim praesent elementum facilisis. Ipsum suspendisse ultrices gravida dictum fusce. Enim praesent elementum facilisis leo vel fringilla est.