<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> <!------ Include the above in your HEAD tag ----------> <div class="container emp-profile" style = "background-image: url(http://34.217.69.61/wp-content/uploads/2019/03/imageonline-co-invertedimage.png);" > <div class="row"> <div class="col-md-4"> <div class="profile-img"> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS52y5aInsxSm31CvHOFHWujqUx_wWTS9iM6s7BAm21oEN_RiGoog" alt=""/> </div> </div> <div class="col-md-6"> <div class="profile-head"> <h5> Jennifer Wood </h5> <h6> Bio: Hey guys im looking for a place to go live. </h6> </div> </div> <div class="col-md-10"> <ul class="tileMe"> <li><a class="lightbox" href="#dog"> <img src="http://34.217.69.61/wp-content/uploads/2019/02/dc-headshot-photographer-68.jpg"/> </a> <div class="lightbox-target" id="dog"> <img src="http://34.217.69.61/wp-content/uploads/2019/02/dc-headshot-photographer-68.jpg"/> <a class="lightbox-close" href="#"></a> </div></li> <li><a class="lightbox" href="#dog"> <img src="http://34.217.69.61/wp-content/uploads/2019/02/dc-headshot-photographer-68.jpg"/> </a> <div class="lightbox-target" id="dog"> <img src="http://34.217.69.61/wp-content/uploads/2019/02/dc-headshot-photographer-68.jpg"/> <a class="lightbox-close" href="#"></a> </div></li> <li><a class="lightbox" href="#dog"> <img src="http://34.217.69.61/wp-content/uploads/2019/02/dc-headshot-photographer-68.jpg"/> </a> <div class="lightbox-target" id="dog"> <img src="http://34.217.69.61/wp-content/uploads/2019/02/dc-headshot-photographer-68.jpg"/> <a class="lightbox-close" href="#"></a> </div></li> <li><a class="lightbox" href="#dog"> <img src="http://34.217.69.61/wp-content/uploads/2019/02/dc-headshot-photographer-68.jpg"/> </a> <div class="lightbox-target" id="dog"> <img src="http://34.217.69.61/wp-content/uploads/2019/02/dc-headshot-photographer-68.jpg"/> <a class="lightbox-close" href="#"></a> </div></li> </ul> </div> </div> </div> <div class="container emp-profile"> </div>

body{ background: -webkit-linear-gradient(left, #000, #fff); } .emp-profile{ padding: 3%; margin-top: 3%; margin-bottom: 3%; border-radius: 0.5rem; background: #fff; } .tileMe{ padding: 30px 0px 0px 0px; list-style-type: none; } .tileMe li { display: inline; float: left; padding-right: 52px; } .tile a { display: block; padding: 10px; border: 1px solid red; margin-right: 5px; } .profile-img{ text-align: center; } .profile-img img{ width: 100%; height: 100%; } .profile-img .file { position: relative; overflow: hidden; margin-top: -20%; width: 70%; border: none; border-radius: 0; font-size: 15px; background: #212529; } .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; } /*css for smashq*/ /*Eliminates padding, centers the thumbnail */ /* Styles the thumbnail */ a.lightbox img { height: 150px; border: 3px solid white; box-shadow: 0px 0px 8px rgba(0,0,0,.3); margin: 0px 0px 0px 0px; } /* Styles the lightbox, removes it from sight and adds the fade-in transition */ .lightbox-target { position: fixed; top: -100%; width: 100%; background: rgba(0,0,0,.7); width: 100%; opacity: 0; -webkit-transition: opacity .5s ease-in-out; -moz-transition: opacity .5s ease-in-out; -o-transition: opacity .5s ease-in-out; transition: opacity .5s ease-in-out; overflow: hidden; } /* Styles the lightbox image, centers it vertically and horizontally, adds the zoom-in transition and makes it responsive using a combination of margin and absolute positioning */ .lightbox-target img { margin: auto; position: absolute; top: 0; left:0; right:0; bottom: 0; max-height: 0%; max-width: 0%; border: 3px solid white; box-shadow: 0px 0px 8px rgba(0,0,0,.3); box-sizing: border-box; -webkit-transition: .5s ease-in-out; -moz-transition: .5s ease-in-out; -o-transition: .5s ease-in-out; transition: .5s ease-in-out; } /* Styles the close link, adds the slide down transition */ a.lightbox-close { display: block; width:50px; height:50px; box-sizing: border-box; background: white; color: black; text-decoration: none; position: absolute; top: -80px; right: 0; -webkit-transition: .5s ease-in-out; -moz-transition: .5s ease-in-out; -o-transition: .5s ease-in-out; transition: .5s ease-in-out; } /* Provides part of the "X" to eliminate an image from the close link */ a.lightbox-close:before { content: ""; display: block; height: 30px; width: 1px; background: black; position: absolute; left: 26px; top:10px; -webkit-transform:rotate(45deg); -moz-transform:rotate(45deg); -o-transform:rotate(45deg); transform:rotate(45deg); } /* Provides part of the "X" to eliminate an image from the close link */ a.lightbox-close:after { content: ""; display: block; height: 30px; width: 1px; background: black; position: absolute; left: 26px; top:10px; -webkit-transform:rotate(-45deg); -moz-transform:rotate(-45deg); -o-transform:rotate(-45deg); transform:rotate(-45deg); } /* Uses the :target pseudo-class to perform the animations upon clicking the .lightbox-target anchor */ .lightbox-target:target { opacity: 1; top: 0; bottom: 0; left: 0; } .lightbox-target:target img { max-height: 100%; max-width: 100%; } .lightbox-target:target a.lightbox-close { top: 0px; }