<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.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="wrapper"> <div class="container-fluid" id="top-container-fluid-nav"> <div class="container"> <!---- for nav container -----> </div> </div> <div class="container-fluid" id="body-container-fluid"> <div class="container"> <!---- for body container ----> <div class="row"> <!-------mother container middle class-------------------> <div class="col-lg-4"> <div class="card" style="width:100%"> <img class="card-img-top" src="https://lh3.googleusercontent.com/a8_ujXr3VWHstGkxgJL1TkqfrytP4r_52QhcvqRQVaQPRQ9DHdQ6seI99qc4jLjC0WDM=h900" alt="Card image" style="width:100%"> <div class="card-body"> <h4 class="card-title">John Niro Yumang</h4> <ul class="list-inline" id="courses"> <li class="list-inline-item"> <i class="fa fa-folder-open-o"></i> Network administrator </li> </ul> <p class="card-text">I am a professional student designer i love my work so hire me !!</p> <div class="address"> <ul class="w3-ul w3-small"> <li> <i class="fa fa-calendar-o" aria-hidden="true"></i> #403 3rd Block, Pampanga, Phillippines </li> <li><i class="fa fa-calendar-o" aria-hidden="true"></i> University of the Phillippines </li> <li><i class="fa fa-calendar-o" aria-hidden="true"></i> Single </li> <li><i class="fa fa-calendar-o" aria-hidden="true"></i> Join October 23 1990 </li> <li><i class="fa fa-calendar-o" aria-hidden="true"></i> Hired by #100 people </li> </ul> </address> <p><button class="w3-button w3-block w3-indigo" data-toggle="tooltip" data-placement="top" title="Free to message and hire us"> <i class="fa fa-comment-o fa-lg"></i> Hire me </button></p> </div> <ul class="w3-ul w3-small"> <li><a href="" > Design </a> <span>93%</span></li> <li><a href="">Front end </a><span>12%</span></li> <li><a href="">Front end </a><span>12%</span></li> </ul> <hr> <p class="lower-case"> Feedback</p> <div class="ratings"> <ul class="list-inline"> <li class="list-inline-item selected"><i class="fa fa-star"></i></li> <li class="list-inline-item selected"><i class="fa fa-star"></i></li> <li class="list-inline-item selected"><i class="fa fa-star"></i></li> <li class="list-inline-item selected"><i class="fa fa-star"></i></li> <li class="list-inline-item selected"><i class="fa fa-star"></i></li> </ul> </div> <hr> <div class="socials"> <p class="lower-case "> Follow us</p> <ul class="list-inline"> <button class="w3-button w3-blue"><i class="fa fa-facebook"></i></button> <button class="w3-button w3-yellow"><i class="fa fa-twitter"></i></button> <button class="w3-button w3-red"><i class="fa fa-youtube"></i></button> <button class="w3-button w3-orange"><i class="fa fa-google"></i></button> <button class="w3-button w3-teal"><i class="fa fa-flickr"></i></button> <button class="w3-button w3-gray"><i class="fa fa-instagram"></i></button> </ul> </div> <p class="learn"><a href=""> Learn more </a> | <a href=""> Adveratise </a> | <a href=""> Cookies </a> | <a href=""> Terms & Policy </a> </p> <hr> <p class="lower-case "> Locate us</p> <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d123405.88854614287!2d120.60617944332368!3d14.856990020414184!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x33965af30887de57%3A0x1aa8d246509d51e5!2sMacabebe%2C+Pampanga!5e0!3m2!1sen!2sph!4v1514036434857" width="100%" height="300" frameborder="0" style="border:0" allowfullscreen></iframe> <hr> <p class="learn" > <a href=""> Adveratise </a> | <a href=""> Cookies </a> | <a href=""> Terms & Policy </a> </p> </div> </div> </div> </div> </div> </div> </div>

body { background-image: url("../images/.jpg"); background-color:white;; background-attachment:scroll; background-repeat:no-repeat; background-position:center; background-size:cover; height:2000px; } /*----------------Containers--------------------*/ #top-container-fluid-nav { background-image: url("../images/.jpg"); background-color:inherit; background-attachment:scroll; background-repeat:no-repeat; background-position:center; background-size:cover ; } #body-container-fluid { background-image: url("../images/.jpg"); background-color:inherit; background-attachment:scroll; background-repeat:no-repeat; background-position:center; background-size:cover; margin-top:50px; } #footer-container-fluid { background-image: url("../images/.jpg"); background-color:inherit; background-attachment:scroll; background-repeat:no-repeat; background-position:center; background-size:cover; padding-bottom:25px; padding-top:25px; } .card { padding:10px; border:0px solid white; box-shadow:0px 7px 16px 0px rgba(0, 0, 0, 0.09); } .card-title { color:; font-size:16px; text-align:center; } .card-text { color:#84919B; font-size:12px; text-align:center; } #courses { text-align:center; } /********************** courses **********************/ .list-inline-item { font-size:13px; color:#84919B; } /********************** courses **********************/ .address .w3-ul li { border:0px solid white; line-height:1px; } /********************** abilities **********************/ span { font-size:10px; float:right; background-color:#F4F7F9; border-radius:10px; padding:3px 8px; color:#84919B; } .lower-case { color:#84919B; font-size:12px; text-align:center; } /********************** abilities **********************/ /********************** ratings **********************/ .ratings .fa { color:indigo; font-size:25px; } .ratings .fa:hover { color:yellow; } .ratings .list-inline { text-align:center; } /********************** ratings **********************/ /********************** socials **********************/ .socials { text-align:center; } /********************** socials **********************/ /********************** footer **********************/ .learn {font-size:12px;color:gray;} .learn a:hover {text-decoration:none;} /********************** footer **********************/