Profile Page

by Rian .N Herdian

HTML

<div id="profile">
  <div class="cover">
    <img src="https://scontent-sit4-1.xx.fbcdn.net/v/t1.0-1/p160x160/21740592_1960684750624975_3016927865836805101_n.jpg?_nc_cat=0&oh=4c8549fc5108ed259d8a18fb2ddd964e&oe=5B9C4D0C"/>
  </div>
  <div class="stay">
    <h3>
      Rian Nurherdian
    </h3>
    <small><b>Bandung, Indonesia</b> 0896-1888-xxxx</small>
  </div>
  <div class="scroll">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
    <br/><br/>
    Doloremque veniam blanditiis fugiat dolorem, corrupti eaque praesentium neque consectetur quod placeat laudantium aliquam maiores error mollitia debitis ipsam laborum iste quae.
    <br/><br/>
    Doloremque veniam blanditiis fugiat dolorem, corrupti eaque praesentium neque consectetur quod placeat laudantium aliquam maiores error mollitia debitis ipsam laborum iste quae.
    <br/><br/>
  </div>
</div>

CSS

* {
  margin:0;padding:0;
}
#profile {
  display:block;
  width:100%;
  max-width:600px;
}
#profile .cover {
  background:#464646;
  padding-top:50px;
  margin-bottom:75px;
}
#profile img {
  position:relative;
  bottom:-75px;
  width:150px;
  height:150px;
  border-radius:150px;
  margin:auto;
  display:block;
  border:5px solid #fff;
  box-shadow:0 0 0 1px rgba(0,0,0,.1), 0 5px 0 0 rgba(0,0,0,.1);
}
#profile .stay {
  text-align:center;
  padding:20px;
}
#profile .stay h3 {
  margin-bottom:10px;
}
#profile .scroll {
  border-top:1px solid rgba(0,0,0,.1);
  padding:20px;
  max-height:100px;
  overflow-y:auto;
}