<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/> <div class="containerme"> <div class="cover-photo"> <img src="https://yt3.ggpht.com/a-/AOh14GiB_G7GOxIiJLdmt-VBSK3VwqDYOatcOrQKc_3u=s88-c-k-c0xffffffff-no-rj-mo" alt="ch-sufyan" class="profile"/> </div> <div class="profile-name"><big>CH</big> SUFYAN</div> <p class="about">Detail Oriented Programmer<br /> and Web-developer</p> <button class="msg-btn">Message</button> <button class="follow-btn">Following</button> <div> <i class="fab fa-facebook-f"></i> <i class="fab fa-instagram"></i> <i class="fab fa-youtube"></i> <i class="fab fa-twitter"></i> </div> </div>

.containerme{ user-select: none; background: #231e39; color: #b3b8cd; height:auto; border-radius: 5px; width: auto; text-align: center; box-shadow: 0 10px 20px -10px rgba(0,0,0,.75); } .cover-photo{ background: url(https://1.bp.blogspot.com/-KNKYZiqbayc/Xo2DxoKcm4I/AAAAAAAAAMs/-d5wv_C19zEgqU_lZNK7OqOGknmjTB7hwCLcBGAsYHQ/s320/cover.jpg); height: 140px; width: 100%; border-radius: 5px 5px 0 0; } .profile{ height: 120px; width: 120px; border-radius: 50%; margin: 93px 0 0 -155px; border: 1px solid #1f1a32; padding: 7px; background: #292343; } .profile-name{ font-size: 25px; font-weight: bold; margin: 27px 0 0 120px; } .about{ margin-top: 35px; line-height: 21px; } button{ margin: 10px 0 40px 0; } .msg-btn, .follow-btn{ background: orange; border: 1px solid white; padding: 10px 25px; color: white; border-radius: 3px; font-family: Montserrat, sans-serif; cursor: pointer; } .follow-btn{ margin-left: 10px; background: transparent; color: white; } .follow-btn:hover{ color: white; background: orange; transition: .5s; } .containerme i{ padding-left: 20px; font-size: 20px; margin-bottom: 20px; cursor: pointer; transition: .5s; } .containerme i:hover{ color: orange; transition:0.5s; }