"Anderson .Paak Portfolio"
Bootstrap 4.1.1 Snippet by aisherwo

<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="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <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"> <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">Anderson .Paak</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="#">Discography</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Tour Dates</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://www.magneticmag.com/.image/t_share/MTU5NDIwNDExNjc3Nzc5ODc5/anderson-paak.jpg" class="img-fluid" alt="Anderson .Paak"> </div> <div class="col-md-10"> <h1 class="bold lightest-txt">Anderson .Paak</h1> <p class="sub-h1 darkest-txt"><b>Oxnard</b> Available now.</p> </div> </div> <div class="row lightest-txt"> <div class="col-md"> <p class="p1"> Brandon Paak Anderson (born February 8, 1986), better known by his stage name Anderson Paak (stylized as Anderson .Paak), is an American musician and record producer from Oxnard, California. He released his debut album, O.B.E. Vol. 1 in 2012, under the pseudonym Breezy Lovejoy. He went on to release Venice in 2014, under his current moniker. Paak followed with Malibu, in 2016, which received a nomination for Best Urban Contemporary Album at the Grammy Awards. Apart from his solo career, Paak is also one-half of NxWorries, alongside record producer Knxwledge. He is accompanied by the band The Free Nationals, who play a variety of instruments such as electric guitar, bass, piano, keyboards and drums and also serve as backing vocalists. </p> </div> </div> </div> </div> <div class="container mt-3 pt-5"> <div class="row"> <div class="col text-center mt-2"> <h2>Music</h2> <p class="p2"></p> </div> </div> <div class="row"> <div class="col-md-4"> <div class="card mb-4"> <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/u749Hi0gDVM" allowfullscreen></iframe> <div class="card-body"> <p class="card-text"> TINTS (Featuring Kendrick Lamar) </p> </div> </div> </div> <div class="col-md-4"> <div class="card mb-4"> <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/7PmUtmfTmbg" allowfullscreen></iframe> <div class="card-body"> <p class="card-text"> Bubblin </p> </div> </div> </div> <div class="col-md-4"> <div class="card mb-4"> <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/-OqrcUvrbRY" allowfullscreen></iframe> <div class="card-body"> <p class="card-text"> Come Down </p> </div> </div> </div> </div> </div> <div class="row"> <div class="col text-center my-5"> <h2>Check out the official webpage</h2> <a class="p2" href=http://www.andersonpaak.com/>Click Here</a> </div> </div> <div class="row"> <div class="col text-center my-5"> <a href="http://bootsnipp.com/iframe/gXVR7" target="_blank">Best viewed full screen</a><br> <a href="https://validator.w3.org/nu/?doc=http%3A%2F%2Fbootsnipp.com%2Fiframe%2FgXVR7" target="_blank"><small>HTML</small><sup>5</sup></a> </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>
.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


Questions / Comments: