<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 ----------> <div class="container"> <div class="card"> <div class="container-fliud"> <div class="wrapper row"> <div class="preview col-md-6"> <div class="preview-pic tab-content"> <div class="tab-pane active" id="pic-1">Material Tutorial<img alt="Material Tutorial" src="http://i.imgur.com/le86pxa.jpg?1" /> </div> <div class="tab-pane" id="pic-2">Dinner for Two<img alt="Dinner for two" src="http://i.imgur.com/y9P8agl.jpg?1" /></div> <div class="tab-pane" id="pic-3">Lonely Island Take One<img alt="Lonely Island pt. 1" src="http://i.imgur.com/gM1bvuE.jpg?1" /></div> <div class="tab-pane" id="pic-4">Lonely Island Take Two<img alt="Lonely Island pt. 2" src="http://i.imgur.com/XJ4Rew6.jpg?1" /></div> <div class="tab-pane" id="pic-5">Healthy Breakfast<img alt="Healthy Breakfast" src="http://i.imgur.com/XBishCA.jpg" /></div> <div class="tab-pane sketchfab-embed-wrapper" id="pic-6"><iframe width="640" height="480" src="https://sketchfab.com/models/c1b405ad6ac34584805356ffdf5ba386/embed" frameborder="0" allowvr allowfullscreen mozallowfullscreen="true" onmousewheel=""></iframe> </div> </div> <ul class="preview-thumbnail nav nav-tabs"> <li class="active"><a data-target="#pic-1" data-toggle="tab"><img alt="Material Tutorial" src="http://i.imgur.com/le86pxa.jpg?1" /></a></li> <li><a data-target="#pic-2" data-toggle="tab"><img alt="Dinner for two" src="http://i.imgur.com/y9P8agl.jpg?1" /></a></li> <li><a data-target="#pic-3" data-toggle="tab"><img alt="Lonely Island pt. 1" src="http://i.imgur.com/gM1bvuE.jpg?1" /></a></li> <li><a data-target="#pic-4" data-toggle="tab"><img alt="Lonely Island pt. 2" src="http://i.imgur.com/XJ4Rew6.jpg?1" /></a></li> <li><a data-target="#pic-5" data-toggle="tab"><img alt="Healthy Breakfast" src="http://i.imgur.com/XBishCA.jpg" /></a></li> <li><a data-target="#pic-6" data-toggle="tab"></a></li> </ul> </div> <div class="details col-md-6"> <h3 id="port" class="product-title">Justin's Portfolio</h3> <!--<div class="rating">--> <!-- <div class="stars">--> <!-- <span class="fa fa-star checked"></span>--> <!-- <span class="fa fa-star checked"></span>--> <!-- <span class="fa fa-star checked"></span>--> <!-- <span class="fa fa-star"></span>--> <!-- <span class="fa fa-star"></span>--> <!-- </div>--> <!-- <span class="review-no">41 reviews</span>--> <!--</div>--> <!--<p class="product-description">Suspendisse quos? Tempus cras iure temporibus? Eu laudantium cubilia sem sem! --> <!--Repudiandae et! Massa senectus enim minim sociosqu delectus posuere.</p>--> <!--<h4 class="price">current price: <span>$180</span></h4>--> <p class="vote">I am a Canadian man hoping to become a 3D graphic designer, making models for games and movies <br> Originally, I studied at University in hopes of becoming a teacher. After 4 years and 2 placements, I decided that teaching wasn't for me. So I dropped out and looked for a college to help me become a better 3D designer. Having only done 2 years of study at college, I am still learning the craft, but I am becoming better each day</p> <p class="text-right"> <a href="http://bootsnipp.com/iframe/yMEGo" target="_blank">Best viewed full screen</a><br> <a href="http://validator.w3.org/check?uri=http%3A%2F%2Fbootsnipp.com%2Fiframe%2FyMEGo" target="_blank"><small>HTML</small>⁵</a> </p> <!--<h5 class="sizes">sizes:--> <!-- <span class="size" data-toggle="tooltip" title="small">s</span>--> <!-- <span class="size" data-toggle="tooltip" title="medium">m</span>--> <!-- <span class="size" data-toggle="tooltip" title="large">l</span>--> <!-- <span class="size" data-toggle="tooltip" title="xtra large">xl</span>--> <!--</h5>--> <!--<h5 class="colors">colors:--> <!-- <span class="color orange not-available" data-toggle="tooltip" title="Not In store"></span>--> <!-- <span class="color green"></span>--> <!-- <span class="color blue"></span>--> <!--</h5>--> <!--<div class="action">--> <!-- <button class="add-to-cart btn btn-default" type="button">add to cart</button>--> <!-- <button class="like btn btn-default" type="button"><span class="fa fa-heart"></span></button>--> <!--</div>--> </div> </div> </div> </div> <div class="sketchfab-embed-wrapper"><iframe width="640" height="480" src="https://sketchfab.com/models/c1b405ad6ac34584805356ffdf5ba386/embed" frameborder="0" allowvr allowfullscreen mozallowfullscreen="true" webkitallowfullscreen="true" onmousewheel=""></iframe> <!--<p style="font-size: 13px; font-weight: normal; margin: 5px; color: #4A4A4A;">--> <!-- <a href="https://sketchfab.com/models/c1b405ad6ac34584805356ffdf5ba386?utm_medium=embed&utm_source=website&utm_campain=share-popup" target="_blank" style="font-weight: bold; color: #1CAAD9;">Pagoda2</a>--> <!-- by <a href="https://sketchfab.com/peakSOULREAPER?utm_medium=embed&utm_source=website&utm_campain=share-popup" target="_blank" style="font-weight: bold; color: #1CAAD9;">peakSOULREAPER</a>--> <!-- on <a href="https://sketchfab.com?utm_medium=embed&utm_source=website&utm_campain=share-popup" target="_blank" style="font-weight: bold; color: #1CAAD9;">Sketchfab</a>--> <!--</p>--> </div> </div>

/*****************globals*************/ body { font-family: 'open sans'; overflow-x: hidden; } img { max-width: 100%; } .preview { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } @media screen and (max-width: 996px) { .preview { margin-bottom: 20px; } } .preview-pic { -webkit-box-flex: 1; -webkit-flex-grow: 1; -ms-flex-positive: 1; flex-grow: 1; } .preview-thumbnail.nav-tabs { border: none; margin-top: 15px; } .preview-thumbnail.nav-tabs li { width: 18%; margin-right: 2.5%; } .preview-thumbnail.nav-tabs li img { max-width: 100%; display: block; } .preview-thumbnail.nav-tabs li a { padding: 0; margin: 0; } .preview-thumbnail.nav-tabs li:last-of-type { margin-right: 0; } .tab-content { overflow: hidden; } .tab-content img { width: 100%; -webkit-animation-name: opacity; animation-name: opacity; -webkit-animation-duration: .3s; animation-duration: .3s; } .card { margin-top: 50px; background: #eee; padding: 3em; line-height: 1.5em; } @media screen and (min-width: 997px) { .wrapper { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } } .details { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } .colors { -webkit-box-flex: 1; -webkit-flex-grow: 1; -ms-flex-positive: 1; flex-grow: 1; } .product-title, .price, .sizes, .colors { text-transform: UPPERCASE; font-weight: bold; } .checked, .price span { color: #ff9f1a; } .product-title, .rating, .product-description, .price, .vote, .sizes { margin-bottom: 15px; } .product-title { margin-top: 0; } .size { margin-right: 10px; } .size:first-of-type { margin-left: 40px; } .color { display: inline-block; vertical-align: middle; margin-right: 10px; height: 2em; width: 2em; border-radius: 2px; } .color:first-of-type { margin-left: 20px; } .add-to-cart, .like { background: #ff9f1a; padding: 1.2em 1.5em; border: none; text-transform: UPPERCASE; font-weight: bold; color: #fff; -webkit-transition: background .3s ease; transition: background .3s ease; } .add-to-cart:hover, .like:hover { background: #b36800; color: #fff; } .not-available { text-align: center; line-height: 2em; } .not-available:before { font-family: fontawesome; content: "\f00d"; color: #fff; } .orange { background: #ff9f1a; } .green { background: #85ad00; } .blue { background: #0076ad; } .tooltip-inner { padding: 1.3em; } @-webkit-keyframes opacity { 0% { opacity: 0; -webkit-transform: scale(3); transform: scale(3); } 100% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } } @keyframes opacity { 0% { opacity: 0; -webkit-transform: scale(3); transform: scale(3); } 100% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } } #port { font-size: 50px; } /*# sourceMappingURL=style.css.map */