@extends('cusapp_custom')

@section('content')

  <div class="panel panel-main">
    <div class="panel-heading">
      <h3 class="panel-title"><img src="{{url('/image/bc2.png')}}" style="width:50px;"  >PORTFOLIO  </h3>
    </div>
  </div>


<hr>
<div style="padding:1.8%; clear:both"></div>
<div class="row">
  <div class="col-sm-4" > <a href="{{url('portfolio/candleart/2015')}}">
    <div class="box-image img-rounded"> <img src="{{url('/image/portfolio/1.jpg')}}" class="img-art"> </div>
    <div  class="text-footer">
      <h3>CANDLE ART 2015</h3>
    </div>
    </a> </div>
  <div class="col-sm-4" > <a href="{{url('portfolio/candleart/2014')}}">
    <div class="box-image img-rounded"> <img src="{{url('/image/portfolio/2.jpg')}}" class="img-art"> </div>
    <div  class="text-footer">
      <h3>CANDLE ART 2014</h3>
    </div>
    </a> </div>
  <div class="col-sm-4" ><a href="{{url('portfolio/candleart/2013')}}">
    <div class="box-image img-rounded"> <img src="{{url('/image/portfolio/3.jpg')}}" class="img-art"> </div>
    <div  class="text-footer">
      <h3>CANDLE ART 2013</h3>
    </div>
    </a> </div>
  <div class="col-sm-4" ><a href="{{url('portfolio/giftset')}}">
    <div class="box-image img-rounded"> <img src="{{url('/image/portfolio/4.jpg')}}" class="img-art"> </div>
    <div  class="text-footer">
      <h3>gift set</h3>
    </div></a>
  </div>
  <div class="col-sm-4" ><a href="{{url('portfolio/crafted-candle')}}">
    <div class="box-image img-rounded"> <img src="{{url('/image/portfolio/5.jpg')}}" class="img-art"> </div>
    <div  class="text-footer">
      <h3>crafted candles</h3>
    </div></a>
  </div>
  <div class="col-sm-4" ><a href="{{url('portfolio/mini-sculpture-candle')}}">
    <div class="box-image img-rounded"> <img src="{{url('/image/portfolio/6.jpg')}}" class="img-art"> </div>
    <div  class="text-footer">
      <h3>MINI SCULPTURE CANDLE</h3>
    </div></a>
  </div>
</div>
@endsection






@section('script') 
 
@endsection








@section('style')
<style>
.img-art{ width:100%;}
.box-image{ width:100%; max-height:240px; overflow:hidden; margin-bottom:0%}
.box-image:hover{ -ms-transform: rotate(-7deg); /* IE 9 */
    -webkit-transform: rotate(-7deg); /* Chrome, Safari, Opera */
    transform: rotate(-7deg);}
.col-sm-4{ margin-bottom:2%;}
.text-footer{ padding:0.1%; text-align:center; color:white; background:rgba(31,164,79,0.96);text-transform: uppercase;}
.text-footer:hover {  background:rgba(31,164,79,0.76)}
.text-footer h3{margin-top: 10px;}
.img-rounded{ border-bottom-left-radius:0;border-bottom-right-radius:0;}
 </style>
@endsection