<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 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> <div class="container emp-profile"> <form method="post"> <div class="row"> <div class="col-md-4"> <div class="profile-img"> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/bc/Unknown_person.jpg/925px-Unknown_person.jpg" alt=""/> <div class="file btn btn-lg btn-primary"> Bild ändern <input type="file" name="file"/> </div> </div> </div> <div class="col-md-6"> <div class="profile-head"> <h5> Max Max </h5> <h6> Wissenschafter an der "technische Universität Braunschweig" </h6> <ul class="nav nav-tabs" id="myTab" role="tablist"> <li class="nav-item"> <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">About</a> </li> <li class="nav-item"> <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Über Projekte</a> </li> </ul> </div> </div> <div class="col-md-2"> <input type="submit" class="profile-edit-btn" name="btnAddMore" value="Edit Profile"/> </div> </div> <div class="row"> <div class="col-md-4"> <div class="profile-work"> <p>Arbeit LINK:</p> <a href="">Webseite Link</a><br/> <a href="">Google scholar Profil</a><br/> <a href=""> LinkedIn </a><br/> <a href=""> </a><br/> <p>Interesse:</p> <a href="">Web Designer</a><br/> <a href="">Web Developer</a><br/> <a href=""></a><br/> <a href=""></a><br/> <a href=""></a><br/> </div> </div> <div class="col-md-8"> <div class="tab-content profile-tab" id="myTabContent"> <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab"> <div class="row"> <div class="col-md-6"> <div class="row"> <div class="col-md-6"> <label>Name</label> </div> <div class="col-md-6"> <p>Max Max</p> </div> </div> <div class="row"> <div class="col-md-6"> <label>Email</label> </div> <div class="col-md-6"> <p>maxmax@gmail.com</p> </div> </div> <div class="row"> <div class="col-md-6"> <label>Phone</label> </div> <div class="col-md-6"> <p>123 456 7890</p> </div> </div> <div class="row"> <div class="col-md-6"> <label>Beruf:</label> </div> <div class="col-md-6"> <p>Web Developer and Designer</p> </div> </div> <div class="row"> <div class="col-md-6"> <label>Projekte:</label> </div> <div class="col-md-6"> <p>Modal Schema Graphs for Graph Databases</p> </div> </div> <div class="row"> <div class="col-md-6"> <label>Wohnort:</label> </div> <div class="col-md-6"> <p>Braunschweig</p> </div> </div> <div class="row"> <div class="col-md-6"> <label>Heimatstadt:</label> </div> <div class="col-md-6"> <p>Deutschland</p> </div> </div> <div class="row"> <div class="col-md-12"> <label> Bio:</label><br/> </div> </div> </div> </div> </div> </div> </form> </div>

body{ background: -webkit-linear-gradient(right, #dde5f4,#dde5f4); } .emp-profile{ padding: 3%; margin-top: 3%; margin-bottom: 3%; border-radius: 0.5rem; background: #fff; } .profile-img{ text-align: center; } .profile-img img{ width: 70%; height: 100%; } .profile-img .file { position: relative; overflow: hidden; margin-top: -20%; width: 70%; border: none; border-radius: 0; font-size: 15px; background: #212529b8; } .profile-img .file input { position: absolute; opacity: 0; right: 0; top: 0; } .profile-head h5{ color: #333; } .profile-head h6{ color: #0062cc; } .profile-edit-btn{ border: none; border-radius: 1.5rem; width: 70%; padding: 2%; font-weight: 600; color: #6c757d; cursor: pointer; } .proile-rating{ font-size: 12px; color: #818182; margin-top: 5%; } .proile-rating span{ color: #495057; font-size: 15px; font-weight: 600; } .profile-head .nav-tabs{ margin-bottom:5%; } .profile-head .nav-tabs .nav-link{ font-weight:600; border: none; } .profile-head .nav-tabs .nav-link.active{ border: none; border-bottom:2px solid #0062cc; } .profile-work{ padding: 14%; margin-top: -15%; } .profile-work p{ font-size: 12px; color: #818182; font-weight: 600; margin-top: 10%; } .profile-work a{ text-decoration: none; color: #495057; font-weight: 600; font-size: 14px; } .profile-work ul{ list-style: none; } .profile-tab label{ font-weight: 600; } .profile-tab p{ font-weight: 600; color: #0062cc; }