<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="card"> <div class="header"> <i class="material-icons md-48">menu</i> <div class="details"> <h3>alexandra smith</h3> <span>designer, nyc</span> </div> <div class="notification"><span>3</span></div> </div> <div class="card-container"> <div class="profile-card"> <div class="profile-card__image"> <img src="http://unsplash.it/200/200" alt="" /> </div> <div class="profile-details"> <div class="numbers"> <div class="follower"> <div>763</div> <div>Followers</div> </div> <div class="travels"> <div>26</div> <div>Travels</div> </div> </div> <button>+ Follow</button> </div> </div> <label class="pinned-trip__label">Pinned trip</label> <div class="pinned-trip"> <div class="pinned-trip__photographs"> <span class="pinned-trip__description">Lisbon for photographers</span> <div class="pinned-trip__itenary"> <span>7</span><span>Days</span> <span>56 <i class="fa fa-camera-retro"></i></span> <span>10 <i class="fa fa-institution"></i></span> </div> <div class="pinned-trip__moredetails">see details</div> </div> <div class="pinned-trip__map"> </div> </div> <label class="pinned-trip__label">Planned trips</label> <div class="planned-trips"> <div class="planned-trips__card"> <div class="planned-trip__image"> <img src="http://unsplash.it/300/300?image=1069" alt="some image" /> </div> <div class="planned-trip__description"> <span>Paris in a nutshell</span> <div class="pinned-trip__itenary"> <span>7</span><span>Days</span> <span>56 <i class="fa fa-camera-retro"></i></span> <span>10 <i class="fa fa-institution"></i></span> </div> </div> <div class="planned-trip__date"> <span>25</span> <span>June</span> </div> </div> <div class="planned-trips__card"> <div class="planned-trip__image"> <img src="http://unsplash.it/300/300?image=1074" alt="some image" /> </div> <div class="planned-trip__description"> <span>Roman holiday</span> <div class="pinned-trip__itenary"> <span>7</span><span>Days</span> <span>56 <i class="fa fa-camera-retro"></i></span> <span>10 <i class="fa fa-institution"></i></span> </div> </div> <div class="planned-trip__date"> <span>08</span> <span>august</span> </div> </div> <div class="planned-trips__card"> <div class="planned-trip__image"> <img src="http://unsplash.it/300/300?image=1050" alt="some image" /> </div> <div class="planned-trip__description"> <span>Namibia on my mind</span> <div class="pinned-trip__itenary"> <span>7</span><span>Days</span> <span>56 <i class="fa fa-camera-retro"></i></span> <span>10 <i class="fa fa-institution"></i></span> </div> </div> <div class="planned-trip__date"> <span>16</span> <span>September</span> </div> </div> <div class="planned-trips__card"> <div class="planned-trip__image"> <img src="http://unsplash.it/300/300?image=34" alt="some image" /> </div> <div class="planned-trip__description"> <span>Cape Town delights</span> <div class="pinned-trip__itenary"> <span>7</span><span>Days</span> <span>56 <i class="fa fa-camera-retro"></i></span> <span>10 <i class="fa fa-institution"></i></span> </div> </div> <div class="planned-trip__date"> <span>25</span> <span>november</span> </div> </div> </div> </div> </div> </div>

* { box-sizing: border-box; } ::-webkit-scrollbar { display: none; } body { margin: 0; display: flex; flex-direction: row; align-items: center; justify-content: space-around; height: 100vh; font-family: Roboto; } .container { display: flex; align-items: center; justify-content: space-around; width: 100vw; height: 100vh; background-color: #fecfc1; } .card { background: linear-gradient(to bottom, #fb6b55 31%, #F8F8FA 0%); width: 425px; height: 780px; border-radius: 8px; display: flex; flex-direction: column; align-items: center; } .card .header { display: flex; padding: 22px 18px 0 18px; width: 100%; justify-content: space-between; align-items: inherit; color: #F8F8FA; } .card .header i { margin-top: 10px; font-size: 46px; } .card .main { height: 54.20340975896531vh; } .card .details { text-align: center; } .card .details h3 { text-transform: uppercase; margin-bottom: 0; letter-spacing: 2px; } .card .details span { text-transform: uppercase; font-size: 13px; word-spacing: 4px; letter-spacing: 2px; } .card-container { width: 90%; } .profile-card { background-color: #fff; text-align: center; position: relative; height: 152px; margin-top: 71px; border-radius: 5px; box-shadow: -1px 8px 33px -5px rgba(0, 0, 0, 0.75); } .profile-card__image { margin: 0 auto; width: 140px; border-radius: 50%; overflow: hidden; position: absolute; top: -57px; left: 32%; } .profile-card__image img { max-width: 100%; max-height: 100%; } .profile-details { height: 50px; } .profile-details .numbers { display: flex; justify-content: space-between; padding: 13px 34px 0 34px; } .profile-details .numbers .follower div:first-child { font-size: 1.4em; font-weight: 500; } .profile-details .numbers .travels div:first-child { font-size: 1.4em; font-weight: 500; } .profile-details button { margin-top: 40px; width: 60%; height: 40px; border-radius: 25px; outline: none; border: none; background-color: #fb6b55; color: #F8F8FA; text-transform: uppercase; letter-spacing: 1px; } .notification { width: 25px; height: 25px; background-color: #F8F8FA; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fb6b55; } .pinned-trip__label { text-transform: uppercase; font-size: 0.8em; width: 100%; display: block; margin: 10px 0; } .pinned-trip { display: flex; flex-direction: row; background-color: #ffffff; text-align: center; position: relative; height: 152px; border-radius: 5px; overflow: hidden; box-shadow: -1px 8px 33px -5px rgba(0, 0, 0, 0.75); } .pinned-trip__photographs { display: flex; flex-direction: column; align-items: flex-start; justify-content: space-around; flex: 1 1 50%; padding: 19px 15px; } .pinned-trip__description { text-align: left; letter-spacing: 1px; width: 100%; font-size: 18px; font-weight: 500; color: #404040; } .pinned-trip__itenary { font-size: 12px; text-align: left; } .pinned-trip__itenary span { margin: 3px; } .pinned-trip__moredetails { text-transform: uppercase; font-size: 12px; font-weight: 500; color: #fb6b55; } .pinned-trip__map { flex: 1 1 50%; background-color: #d9d6d5; border-radius: 0 0 0 0; } .planned-trips { display: flex; flex-direction: column; height: 253px; overflow: auto; } .planned-trips__card { display: flex; align-items: center; flex: 0 0 90px; background-color: #F8F8FA; margin: 7px 1px; border-radius: 5px; padding: 10px 10px; box-shadow: 0px 0px 5px 1px #c7c1c7; } .planned-trips__card:nth-of-type(1) { border-left: 5px solid #fb6b55; } .planned-trip__image { width: 50px; height: 50px; border-radius: 50%; overflow: hidden; } .planned-trip__image img { max-width: 100%; max-height: 100%; } .planned-trip__description { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; flex: 3 3 60%; padding: 10px; } .planned-trip__description > span { letter-spacing: 1px; font-size: 18px; font-weight: 500; color: #404040; } .planned-trip__date { display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 1 1 25%; border-left: 1px solid black; color: #a9a29f; } .planned-trip__date span { display: inline-block; text-transform: uppercase; } .planned-trip__date span:first-child { font-size: 30px; font-weight: 500; letter-spacing: 2px; } .planned-trip__date span:nth-of-type(2) { font-size: 15px; } .pinned-trip__itenary { margin-top: 6px; text-transform: uppercase; } .pinned-trip__itenary span:nth-of-type(2), .pinned-trip__itenary i { margin: 0; color: #a9a29f; }