"Fluent Design Portfolio"
Bootstrap 4.1.1 Snippet by Bolduro

Post to Facebook Tweet this

<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 ----------> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <link href="https://cdn.jsdelivr.net/gh/nespero/fluent-kit@1.2.0/css/fluent-kit.min.css" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/gh/xtoolkit/Micon@2.2.155/dist/micon/css/micon.min.css" rel="stylesheet"> </head> <body> <section class="container-fluid darkest-bg"> <section class="container"> <nav class="navbar navbar-expand-lg navbar-dark pt-0"> <a class="navbar-brand" href="#"> <img src="https://nespero.com/wp-content/themes/prd/assets/img/for-freebies//face.jpeg" width="30" height="30" alt="" class="rounded-circle"><span class="d-inline-block align-top ml-2 lightest-txt" style="line-height:30px">@sean</span> </a> <button class="btn mi navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-hamburger" aria-controls="navbar-hamburger" aria-expanded="false" aria-label="Toggle navigation"> <span class="sr-only">Toggle navbar submenu</span> </button> <div class="collapse navbar-collapse" id="navbar-hamburger"> <ul class="navbar-nav"> <li class="nav-item active"> <a class="nav-link" href="#"> About <span class="sr-only">(current)</span> </a> </li> <li class="nav-item"> <a class="nav-link" href="#">Photography</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Timeline</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Contact</a> </li> </ul> </div> </nav> </section> </section> <div class="container-fluid middle-bg py-5"> <div class="container"> <div class="row pt-5"> <div class="col-md-2 py-5 text-center"> <img src="https://nespero.com/wp-content/themes/prd/assets/img/for-freebies//face.jpeg" class="img-fluid rounded-circle"> </div> <div class="col-md-10"> <h1 class="bold lightest-txt">@sean</h1> <p class="sub-h1 darkest-txt">UI Design&Photography</p> </div> </div> <div class="row lightest-txt"> <div class="col-md"> <p class="p1"> Since the youngest age I have seen all the world surrounding me in frames. All I wanted to do was presenting the world with an exact picture that was right in front of my eyes all this time. </p> </div> <div class="col-md"> <p class="p1"> I am specialized in creative direction for digital products as well as Interface Designs. My main goal is to craft tailor made digital products, designing unique. </p> </div> <div class="col-md"> <p class="p1"> I am passionate about game design and I am always meticulous when it comes to my work. Gained invaluable knowledge studying at the Academy of Arts I realized that game design is the thing for me. </p> </div> </div> </div> </div> <div class="container mt-3 pt-5"> <div class="row"> <div class="col text-center mt-2"> <h2>Photography</h2> <p class="sub-h2">My biggest passion</p> <p class="p2"></p> </div> </div> <div class="row"> <div class="col-md-4"> <div class="card mb-4"> <img class="img-fluid" src="https://nespero.com/wp-content/themes/prd/assets/img/for-freebies//fauna.jpeg" alt="Thumbnail"> <div class="card-body"> <p class="card-text"> The only pink bird out there. </p> </div> </div> </div> <div class="col-md-4"> <div class="card mb-4"> <img class="img-fluid" src="https://nespero.com/wp-content/themes/prd/assets/img/for-freebies//perspective.jpeg" alt="Thumbnail"> <div class="card-body"> <p class="card-text"> Look who's got engaged. </p> </div> </div> </div> <div class="col-md-4"> <div class="card mb-4"> <img class="img-fluid" src="https://nespero.com/wp-content/themes/prd/assets/img/for-freebies//tribute.jpeg" alt="Thumbnail"> <div class="card-body"> <p class="card-text"> Tribute paid to the dead cop. </p> </div> </div> </div> </div> <div class="row"> <div class="col text-center mt-2"> <h2>Timeline</h2> <p class="sub-h2">My professional life</p> <p class="p2"></p> </div> </div> <div class="row"> <div class="col-md"> <ul class="list-view"> <li class="group-name">Instagram</li> <li> <strong class="lead">Senior UI Designer</strong> <span class="follow">2016 - present</span> </li> <li> <strong class="lead">Product Designer</strong> <span class="follow">2015</span> </li> <li> <li class="group-name">L'amarc</li> <li> <strong class="lead">Product Manager</strong> <span class="follow">2012 - 2015</span> </li> <li> <strong class="lead">Web Designer</strong> <span class="follow">2011 - 2012</span> </li> </ul> </div> <div class="col-md"> <img class="img-fluid shadow-lg" src="https://nespero.com/wp-content/themes/prd/assets/img/for-freebies//timeline.jpeg"> </div> <div class="col-md"> <ul class="list-view text-md-right"> <li class="group-name">Newsweek</li> <li> <strong class="lead">Travel section manager</strong> <span class="follow">2008 - 2011</span> </li> <li> <strong class="lead">Writer</strong> <span class="follow">2004 - 2007</span> </li> <li> <li class="group-name">Times</li> <li> <strong class="lead">Writer</strong> <span class="follow">2003 - 2004</span> </li> <li> <strong class="lead">Editor</strong> <span class="follow">2001 - 2003</span> </li> </ul> </div> </div> <div class="row"> <div class="col text-center my-5"> <h2>Contact me</h2> <p class="sub-h2">I am available</p> </div> </div> <div class="row"> <div class="col-md-4"> <ul class="list-view"> <li class="group-name">Visit the office</li> <li> <strong class="lead">Sean Mayweather</strong> <span class="follow">67th Floor</span> <span class="follow">New York</span> <span class="follow">NY 10005</span> <span class="follow">USA</span> </li> <li class="group-name">Reach out</li> <li> <strong class="lead"> <!-- <i class="mi mi-Phone"></i> --> +1 212-918-4832 </strong> <span class="follow"> <!-- <i class="mi mi-twitter"></i> --> <em>@sean</em> </span> <span class="follow"> <!-- <i class="mi mi-linkedin"></i> --> <em>Sean Mayweather</em> </span> </li> </ul> </div> <div class="col-md-8"> <img class="img-fluid" src="https://nespero.com/wp-content/themes/prd/assets/img/for-freebies//map.png"> </div> </div> </div> <div class="col text-center my-5"> <h2>Created with Fluent Kit </h2> <p class="sub-h2">The first Fluent Design web framework based on Bootstrap 4</p> <a href="https://nespero.com/"> <button class="btn btn-danger btn-md cta mr-1"> Learn more <i class="mi mi-ChevronRight"></i> </button> </a> <a href="https://nespero.com/fluent/jquery/"> <button class="btn btn-outline-primary btn-md cta ml-1"> Download <i class="mi mi-ChevronRight"></i> </button> </a> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script> <script src="https://cdn.jsdelivr.net/gh/nespero/fluent-kit@1.2.0/js/fluent-kit.min.js"></script> </body> </html>
.lightest-bg { background-color: #d2d2d2; } .lightest-txt { color: #d2d2d2; } .middle-bg { background-color: #737373; } .middle-txt { color: #737373; } .darkest-bg { background-color: #505050; } .darkest-txt { color: #505050; }

Related: See More

Bootstrap Wizard
Bootstrap 4 Footer Design
Bootstrap Dual Design Registration Form
Team Design Section with Pure CSS Effect

Questions / Comments: