Product Page For Online Shop
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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 ---------->
<div class="container-fluid">
<div class="content-wrapper">
<div class="item-container">
<div class="container">
<div class="col-md-12">
<div class="product col-md-3 service-image-left">
<center>
<img id="item-display" src="http://www.corsair.com/Media/catalog/product/g/s/gs600_psu_sideview_blue_2.png" alt=""></img>
</center>
</div>
<div class="container service1-items col-sm-2 col-md-2 pull-left">
<center>
<a id="item-1" class="service1-item">
<img src="http://www.corsair.com/Media/catalog/product/g/s/gs600_psu_sideview_blue_2.png" alt=""></img>
</a>
<a id="item-2" class="service1-item">
<img src="http://www.corsair.com/Media/catalog/product/g/s/gs600_psu_sideview_blue_2.png" alt=""></img>
</a>
<a id="item-3" class="service1-item">
<img src="http://www.corsair.com/Media/catalog/product/g/s/gs600_psu_sideview_blue_2.png" alt=""></img>
</a>
</center>
</div>
</div>
<div class="col-md-7">
<div class="product-title">Corsair GS600 600 Watt PSU</div>
<div class="product-desc">The Corsair Gaming Series GS600 is the ideal price/performance choice for mid-spec gaming PC</div>
<div class="product-rating"><i class="fa fa-star gold"></i> <i class="fa fa-star gold"></i> <i class="fa fa-star gold"></i> <i class="fa fa-star gold"></i> <i class="fa fa-star-o"></i> </div>
<hr>
<div class="product-price">$ 1234.00</div>
<div class="product-stock">In Stock</div>
<hr>
<div class="btn-group cart">
<button type="button" class="btn btn-success">
Add to cart
</button>
</div>
<div class="btn-group wishlist">
<button type="button" class="btn btn-danger">
Add to wishlist
</button>
</div>
</div>
</div>
</div>
<div class="container-fluid">
<div class="col-md-12 product-info">
<ul id="myTab" class="nav nav-tabs nav_tabs">
<li class="active"><a href="#service-one" data-toggle="tab">DESCRIPTION</a></li>
<li><a href="#service-two" data-toggle="tab">PRODUCT INFO</a></li>
<li><a href="#service-three" data-toggle="tab">REVIEWS</a></li>
</ul>
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade in active" id="service-one">
<section class="container product-info">
The Corsair Gaming Series GS600 power supply is the ideal price-performance solution for building or upgrading a Gaming PC. A single +12V rail provides up to 48A of reliable, continuous power for multi-core gaming PCs with multiple graphics cards. The ultra-quiet, dual ball-bearing fan automatically adjusts its speed according to temperature, so it will never intrude on your music and games. Blue LEDs bathe the transparent fan blades in a cool glow. Not feeling blue? You can turn off the lighting with the press of a button.
<h3>Corsair Gaming Series GS600 Features:</h3>
<li>It supports the latest ATX12V v2.3 standard and is backward compatible with ATX12V 2.2 and ATX12V 2.01 systems</li>
<li>An ultra-quiet 140mm double ball-bearing fan delivers great airflow at an very low noise level by varying fan speed in response to temperature</li>
<li>80Plus certified to deliver 80% efficiency or higher at normal load conditions (20% to 100% load)</li>
<li>0.99 Active Power Factor Correction provides clean and reliable power</li>
<li>Universal AC input from 90~264V — no more hassle of flipping that tiny red switch to select the voltage input!</li>
<li>Extra long fully-sleeved cables support full tower chassis</li>
<li>A three year warranty and lifetime access to Corsair’s legendary technical support and customer service</li>
<li>Over Current/Voltage/Power Protection, Under Voltage Protection and Short Circuit Protection provide complete component safety</li>
<li>Dimensions: 150mm(W) x 86mm(H) x 160mm(L)</li>
<li>MTBF: 100,000 hours</li>
<li>Safety Approvals: UL, CUL, CE, CB, FCC Class B, TÜV, CCC, C-tick</li>
</section>
</div>
<div class="tab-pane fade" id="service-two">
<section class="container">
</section>
</div>
<div class="tab-pane fade" id="service-three">
</div>
</div>
<hr>
</div>
</div>
</div>
</div>
/*********************************************
Call Bootstrap
*********************************************/
@import url("bootstrap/bootstrap.min.css");
@import url("bootstrap-override.css");
@import url("//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css");
/*********************************************
Theme Elements
*********************************************/
.gold{
color: #FFBF00;
}
/*********************************************
PRODUCTS
*********************************************/
.product{
border: 1px solid #dddddd;
height: 321px;
}
.product>img{
max-width: 230px;
}
.product-rating{
font-size: 20px;
margin-bottom: 25px;
}
.product-title{
font-size: 20px;
}
.product-desc{
font-size: 14px;
}
.product-price{
font-size: 22px;
}
.product-stock{
color: #74DF00;
font-size: 20px;
margin-top: 10px;
}
.product-info{
margin-top: 50px;
}
/*********************************************
VIEW
*********************************************/
.content-wrapper {
max-width: 1140px;
background: #fff;
margin: 0 auto;
margin-top: 25px;
margin-bottom: 10px;
border: 0px;
border-radius: 0px;
}
.container-fluid{
max-width: 1140px;
margin: 0 auto;
}
.view-wrapper {
float: right;
max-width: 70%;
margin-top: 25px;
}
.container {
padding-left: 0px;
padding-right: 0px;
max-width: 100%;
}
/*********************************************
ITEM
*********************************************/
.service1-items {
padding: 0px 0 0px 0;
float: left;
position: relative;
overflow: hidden;
max-width: 100%;
height: 321px;
width: 130px;
}
.service1-item {
height: 107px;
width: 120px;
display: block;
float: left;
position: relative;
padding-right: 20px;
border-right: 1px solid #DDD;
border-top: 1px solid #DDD;
border-bottom: 1px solid #DDD;
}
.service1-item > img {
max-height: 110px;
max-width: 110px;
opacity: 0.6;
transition: all .2s ease-in;
-o-transition: all .2s ease-in;
-moz-transition: all .2s ease-in;
-webkit-transition: all .2s ease-in;
}
.service1-item > img:hover {
cursor: pointer;
opacity: 1;
}
.service-image-left {
padding-right: 50px;
}
.service-image-right {
padding-left: 50px;
}
.service-image-left > center > img,.service-image-right > center > img{
max-height: 155px;
}
the </div> at line 26 is improper. It should have been after line 46 in order to get the view as shown in the preview.,Thanks =),Hi, I have copied the codes but don`t know where to into CSS in HTML. I`m new to coding. Please Assist..,between <head> <style> css </style> </head>,Layout got broken in Bootstrap 3.3+ version. Please check.,The author is MSBG





