Young Love Layout

LIVE PREVIEW

Please read the rules before using and leave all credit.
Contact me if you use. You can leave it in the comments here.

Looks best in Google Chrome.

-Sanity Layouts. xo.

<style type="text/css">

/*All coding is property of kclove5. Please do not remove any credit. Be courteous and leave all coding alone except for editing it for yourself. This layout is made for personal use ONLY and is not permitted for redistribution. You can alter the codes but credit still goes to kclove5. -kclove5 (Owner of Sanity Layouts)*/

  .do_not_remove_any_credit {

  all credit:goes to kclove5;

  }

  body {

  background:#fff;

  }

  .meatcol,.row{

  background:#fff;

  }

  .meat {

  left:210px;

  width:800px;

  position:absolute;

  top:-150px;

  background:#fff;

  }

  h1,h2,h3,td,.breadcrumbs,header,.mesg,error,.block {

  display:none

  }

  .footer {

  max-height:0px;

  }

  .grid_5 {

  width:16px;

  height:40px;

  line-height:10px;

  position:relative;

  left:-10px;

  }

  .grid_11 {

  opacity:0.2;

  -webkit-transition:all 0.5s ease-in-out; 

  -moz-transition:all 0.5s ease-in-out;

  }

  .grid_11:hover {

  opacity:1;

  -webkit-transition:all 0.5s ease-in-out; 

  -moz-transition:all 0.5s ease-in-out;

  }

  .overlined{

  border:1px #fff solid;

  width:400px;

  }

  .quote_action_sep {

  border:0px solid #000;

  height:10px;

  }

/*sidebar*/

  .sidebar {

  width:200px;

  height:540px;

  top:50px;

  left:170px;

  position:fixed;

  border-radius:10px;

  }

/*sidebar content*/

  .pic {

  border-radius:360px;

  height:180px;

  width:180px;

  margin:10px;

  }

  .about { 

  height:12px;

  padding:5px;

  width:170px;

  color:transparent;

  text-align:justify;

  line-height:0px;

  font-size:0px;

  background:transparent;

  position:absolute;

  top:120px;

  -webkit-transition:all 0.5s ease-in-out; 

  -moz-transition:all 0.5s ease-in-out;

  }

  .about:hover { 

  height:510px;

  color:black;

  line-height:8px;

  font-size:10px;

  background:#fff;

  letter-spacing:-1px;

  -webkit-transition:all 0.5s ease-in-out; 

  -moz-transition:all 0.5s ease-in-out;

  }

  .navigation {

  border-radius:360px;

  height:130px;

  width:180px;

  position:absolute;

  top:10px;

  padding-top:50px;

  left:10px;

  opacity:0;

  -webkit-transition:all 0.5s ease-in-out; 

  -moz-transition:all 0.5s ease-in-out;

  }

  .navigation:hover{

  opacity:1;

  -webkit-transition:all 0.5s ease-in-out; 

  -moz-transition:all 0.5s ease-in-out;

  }

  .nav {

  display:block;

  height:12px;

  background:#fff;

  width:180px;

  letter-spacing:-1px;

  line-height:10px;

  font-size:10px;

  color:black;

  text-align:center;

  -webkit-transition:all 0.5s ease-in-out; 

  -moz-transition:all 0.5s ease-in-out;

  }

  .nav:hover {

  text-decoration:italic;

  opacity:0.8;

  text-decoration:none;

  -webkit-transition:all 0.5s ease-in-out; 

  -moz-transition:all 0.5s ease-in-out;

  }

/*scrollbar*/

  ::-webkit-scrollbar-thumb:vertical {

  background-color:#000;

  border-radius:300px;

  }

  ::-webkit-scrollbar {

  width:3px;

  height:0px;

  background-color: #fff;

  }

  ::-webkit-scrollbar-thumb:horizontal {

  display:none;

  }

/*comments*/

  textarea {

  padding:5px;

  text-align:justify;

  line-height:8px;

  font-size:10px;

  background:#fff;

  letter-spacing:-1px;

  border:1px solid black;

  }

  .comment {

  padding:5px;

  text-align:justify;

  line-height:8px;

  font-size:10px;

  letter-spacing:-1px;

  border-bottom:0px solid #000;

  } 

  .comment_avatar { 

  display:none;

  }

  button.add_user_comment_btn,button.report_user_comment_btn,button.delete_user_comment_btn,#more_user_comments_btn {

  line-height:9px;

  font-family:arial;

  background-color:#fff;

  border:0px #000 solid;

  border-radius:90px;

  color:#000;

  font-size:11px;

  letter-spacing:-1px;

  }

  button.add_user_comment_btn:hover,button.report_user_comment_btn:hover,button.delete_user_comment_btn:hover,#more_user_comments_btn:hover {

  font-family:arial;

  background-color:#fff;

  border:0px #000 solid;

  border-radius:90px;

  color:#000;

  }

/*links*/

  a,a:active,a:visited {

  color:black;

  letter-spacing:-1px;

  font-size:10px;

  font-family:arial;

  text-decoration:none;

  }

  a:hover {

  color:dimgrey;

  text-decoration:none;

  }</style>

<div class="sidebar">

<img class="pic" src="http://data.whicdn.com/images/26983730/tumblr_lzcluy3Gqt1qlvaayo1_500_large.jpg" />

<div class="navigation">

<a class="nav" href="http://www.wittyprofiles.com/">Home</a> <a class="nav" href="http://www.wittyprofiles.com/author/ADDUSERNAMEHERE/">Quotes</a> <a class="nav" href="http://www.wittyprofiles.com/author/ADDUSERNAMEHERE/comments">Comments</a> <a class="nav" href="http://www.wittyprofiles.com/author/ADDUSERNAMEHERE/following">Followers</a> <a class="nav" href="http://www.s-anity.blogspot.com/">Credit</a> <a class="nav" href="#follow" id="follow_USERIDHERE" onclick="javascript:follow.startfollowing(USERIDHERE);">Follow</a>

<div class="nav">

About+</div>

<div class="about">

About me goes here. Please leave all credit and tell me if you use the layout. Get the code here.<br />

<br />

Hover over the image for links.<br />

<br />

This does not scroll so limit your writing or politely ask me to make it scroll.<br />

<br />

Don&#39;t forget to add your username and userid in the code if you use it.<br />

-kclove5</div>

</div>

</div>