About/Navigation Page: Picnic

<!--

// Picnic

about page by espoirthemes //

    + instructions are throughout the code
    + please do not remove or edit the credit
    + do not redistribute or claim as your own
    + edit as much as you like, without removing credit

icons from font awesome
-->

<html>
    <head>
        <title>{Title}</title>
        <link rel="shortcut icon" href="{Favicon}">
        <link rel="alternate" type="application/rss+xml" href="{RSS}">

      <link href="https://fonts.googleapis.com/css?family=Roboto:100,300" rel="stylesheet">
        <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
    </head>


    <style type="text/css">


/* scrollbar */
           ::-webkit-scrollbar {
  width: 10px;
  height:10px;

}
::-webkit-scrollbar-button {
  width: 0px;
  height: 0px;
}
::-webkit-scrollbar-thumb {
  background: #dae3f1;

  border-radius: 2px;
}
::-webkit-scrollbar-track {
  background:#444;
  border: 4px solid #fff;


}

/* Body styling */
    body{
        margin:0;
       font-size:1.12em;
        font-family:roboto;
}


#bodycon {

     height:calc(100vh - 40px);
     position:relative;
     width:calc(100% - 40px);
     padding:20px;
}

#bodycon:before {
    /*this is the gradient around the entire page, matches gradients throughout page */
      background:radial-gradient(220% 105% at top center, #ff6b86 20%,#5b8fe7 );
      position:absolute;
      content:'';
      width:100%;
      height:100%;
      left:0px;
      top:0px;
      z-index:-9;
      opacity:.9;
}

.con {
    background:#f9f9f9; /*background of body */
    height:100%;
    width:100%;
}

/*about section */
    #about article {
        width:50%;
        top:20%;
        left:50%;
        margin-left:-25%;
        background:white;
        min-height:200px;
        position: absolute;
        border-radius:8px;
        box-shadow:6px 6px 30px rgba(0,0,0,.024);
    }

    /*avatar image */
            .circle {
            position: absolute;
            width:200px;
            margin-left:-10px;
            margin-top:-10px;
        }
        .circle img {
             width:100px;
            height:100px;
            float:left;
            background:radial-gradient(200% 100% at top right, #ff6b86, #5b8fe7); /*gradient around image, matches other gradients */
            padding:6px;
            box-shadow:2px 4px 10px rgba(0,0,0,.08);
            border-radius:100%;
        }

        .abouttitle {
            padding-left:120px;
            font-size:1.2em;
            padding-top:40px;
        }

   /*links at bottom of about section */
   .links {
       padding:20px;
   }
         .links a {

      margin:10px;


  }

/*navigation icons */

.navi {
    position: absolute;
    right:-80px;
    top:10px;
    z-index:9;
    font-size:1.4em;

}


.navi li {
    display: block;
    margin:30px 10px;
	display: relative;
    border-radius:100%;
    padding:8px;
}

.navi li a {
    color: white;
    border: none;
}


/* this makes the navigation icons appear as a gradient. since there are 5 icons, I put it to where the first and second and 3rd and last colors are the same, with the middle one being a gradient.

If you want more or less links, you can adjust these to where the middle is still the gradient by changing the numbers around.  */

.navi li:first-child, .navi li:nth-child(2) {
    background:#ff6b86;
}

.navi li:nth-child(3) {
       background:linear-gradient(to bottom, #ff6b86, #5b8fe7);
}

.navi li:nth-child(4), .navi li:last-child {
    background:#5b8fe7;
}


 /* links */

    a {
        text-decoration:none;
        color:#ff6b86;
        border-bottom:2px solid #5b8fe7;

    }


/* title */

.title{
    font-size:1.4em;
    padding:0px 30px;

}

/* username */

.name {
    padding:0px 30px 10px 30px;
    font-size:1em;
    font-style:italic;
    font-weight:100;
}


  #egg {right:10px; bottom:10px; position:fixed;display:block; width: 18px; height: 22px; background-color:#FFFEFC; -webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
           font-family: "bitxmap";
border:2px solid  #5b8fe7;  z-index:9999;

            }
 #egg:hover   { animation-name: egg;
    animation-duration: 1s;
    animation-iteration-count: infinite;}
    @keyframes egg{
        0%{}
        10%{transform:rotate(20deg)}
        80%{transform:rotate(-20deg)}
        100%{}
    }


    </style>
    <body>
    <div id="bodycon">
    <div class="con">

<!-- container -->


<div id="about">

 <article>

<div class="circle">
<!-- you can replace the image here, the default is your account's icon -->
<img src="{PortraitUrl-128}">

</div>

<div class="abouttitle">
<!-- here is the title of the about, followed by your username -->
About <br>{name}

</div>

<!-- navigation icons -->
       <div class="navi">
       <!-- you can change the icons by using any of the font awesome icons. go to http://fontawesome.io/icons/ for a full list -->
        <li> <a class="fa fa-home" href="/"></a> </li>
        <li> <a class="fa fa-comments" href="/ask"></a> </li>
        <li> <a class="fa fa-list"></a> </li>
        <li> <a class="fa fa-star" href="/"></a> </li>
        <li> <a class="fa fa-link" href="/"></a> </li>
    </div>
     <div style="padding:40px 40px 0px 40px; max-height:250px; width:84%; overflow:auto">
         <!-- actual about goes here -->
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque auctor augue enim, non gravida diam blandit a. Aenean ac tincidunt arcu. Mauris porta facilisis erat, blandit efficitur turpis commodo tincidunt. Sed sagittis consectetur tincidunt. Cras viverra quam vel arcu hendrerit facilisis. </p>

Mauris ornare lorem pulvinar mauris imperdiet iaculis. Etiam varius semper hendrerit. Aenean fringilla risus eget magna aliquet, vitae tincidunt nisi tempus. Nam non lacinia ante. Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas accumsan, felis aliquet ullamcorper scelerisque, magna tortor interdum ex, vel auctor enim risus eu enim. Fusce a lectus metus.


     </div>

     <!-- any extra links or tags will go here -->
<div class="links">

<a href="">lorem ipsum</a>
</div>

 </article>
 </div><!-- end container -->


</div>
</div>
     <a href="http://espoirthemes.com"><div id="egg"></div></a>
    </body>
</html>