Gibson BEM

New css styling BEM for Gibson responsive build

by will525

HTML

<div class="container-one">
    <div class="product">
        <div class="product__image">
            <img src="http://www.racinggreen.co.uk/upload/siteimages/Product/0035391_250_A.jpg">
        </div>
        <div class="product__title">
            <h2>Cardinal</h2>
        </div>
        <div class="product__underline"></div>
        <div class="product__description">
            <p>SHORT SLEEVE END-ON-END<br>
             BUTTON DOWN WITH<br>
             TWO POCKET</p>
        </div>
        <div class="product__price">
            <p>£80</p>
        </div>
    </div>
</div>





















<div class="container-two">
    <div class="product">
        
    </div>
</div>

<div class="container-three">
    <div class="product">
        
    </div>
</div>

CSS

.container-one {width:30%; padding:5px; margin:5px auto; border:1px solid blue;}
.container-two {width:60%; padding:5px; margin:5px auto; border:1px solid blue;}
.container-three {width:90%; padding:5px; margin:5px auto; border:1px solid blue;}

.product {width:100%;max-width:400px;margin: 0 auto;}

.product__image {width:100%;margin: 0 auto;}
.product__image img {width:100%; margin: 0 auto;}

.product__title h2 {font-weight:bold; font-family:Arial;color:#424342;text-align:center;text-transform:uppercase;font-size:1.250em; margin:2px 0;}

.product__underline {width:80px;border-bottom: 1px solid red; margin: 0 auto;}

.product__description p {font-family:Arial;color:#474242;text-align:center;text-transform:uppercase;font-size:0.750em;}

.product__price p {font-weight:bold; font-family:Arial;color:#424342;text-align:center;text-transform:uppercase;font-size:1.250em;margin:5px 0;}