"Non Famous Portfolio"
Bootstrap 3.3.0 Snippet by ahubbar1

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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 ----------> <!-- Page Content --> <div class="container"> <!-- Page Heading --> <div class="row"> <div class="col-lg-12"> <p class="text-right"> <a href="http://bootsnipp.com/iframe/q8eWQ" target="_blank">Best viewed full screen</a><br> <a href="http://validator.w3.org/check?uri=http%3A%2F%2Fbootsnipp.com%2Fiframe%2Fq8eWQ" target="_blank"><small>HTML</small><sup>5</sup></a> </p> </div> </div> <!-- /.row --> <!-- Project One --> <div class="row"> <div class="col-md-7"> <a href="#"> <img class="img-responsive" src="https://s23.postimg.org/cgeb2woyz/Hubbard_1.jpg" alt=""> </a> </div> <div class="col-md-5"> <h3>Bird Tree</h3> <h4>2016</h4> <p>A photograph taken in 2016 for a project on anthropomorphic objects.</p> </div> </div> <!-- /.row --> <br> <div class="row"> <div class="col-md-6 col-md-offset-3"> <div class="panel panel-primary"> <div class="panel-heading"> <h3 class="panel-title">Analysis</h3> <!-- Tabs --> <ul class="nav panel-tabs"> <li class="active pull-right"><a href="#tab1" data-toggle="tab">Composition</a></li> </ul> </div> <div class="panel-body"> <div class="tab-content"> <div class="tab-pane active" id="tab1">This photograph complies with the rule of thrids. The stub of the tree purturding resembles the beak of the bird. A knot in the wood looks similar to an eye. The lines in the wood creates leading lines that draw the eye from the bottom up.</div> </div> </div> </div> </div> </div> </div>
body{ background-color: grey; } .portfolio-item { margin-bottom: 10px; padding-right: 5px; padding-left: 5px; } h1{ text-align:center; padding-bottom:10px; } /*Panel tabs*/ .panel panel-primary{ float:left; } .panel-tabs { position: relative; bottom: 30px; clear:both; border-bottom: 1px solid transparent; } .panel-tabs > li { float: left; margin-bottom: -1px; } .panel-tabs > li > a { margin-right: 2px; margin-top: 4px; line-height: .85; border: 1px solid transparent; border-radius: 4px 4px 0 0; color: #ffffff; } .panel-tabs > li > a:hover { border-color: transparent; color: #ffffff; background-color: transparent; } .panel-tabs > li.active > a, .panel-tabs > li.active > a:hover, .panel-tabs > li.active > a:focus { color: #fff; cursor: default; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; background-color: rgba(255,255,255, .23); border-bottom-color: transparent; }

Related: See More


Questions / Comments: