RN-Examples

Foundation zurb snippet. blog card

This snippet was created to help web designers, front-end and back-end developer save time. Use it in your project and build your app faster,
You can also download the HTML, CSS, and JS code.

Preview HTML CSS

HTML code

This is the html code used to create this bootstrap snippet, You can copy, paste, change, customize and run the following HTML code to get a result like the one shown in the preview selection

<div class="row text-center">
    <div class="large-4 columns">
        <div class="row">
          <div class="large-10 columns wrapper-default wrapper-xs wrapper-shadow no-gutter">
            <img src="http://templatedeck.com/demos/poncho1021/img/image-19-sm.jpg" class="pull-top img-responsive" alt="image">
            <img src="http://templatedeck.com/demos/poncho1021/img/testimonial6.jpg" class="img-circle pull-top" width="80" alt="image">
            <div class="row">
              <div class="large-12">
                <h5>Dolor sit amet</h5>
                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore. </p>
                <a href="#" class="button">Read more...</a>
              </div>
            </div>
          </div>
        </div>
    </div>

    <div class="large-4 columns">
        <div class="row">
          <div class="large-10 columns col-md-offset-1 wrapper-default wrapper-xs wrapper-shadow no-gutter">
            <img src="http://templatedeck.com/demos/poncho1021/img/image-20-sm.jpg" class="pull-top img-responsive" alt="image">
            <img src="http://templatedeck.com/demos/poncho1021/img/testimonial1.jpg" class="img-circle pull-top" width="80" alt="image">
            <div class="row">
              <div class="large-12">
                <h5>Dolor sit amet</h5>
                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore. </p>
                <a href="#" class="button">Read more...</a>
              </div>
            </div>
          </div>
        </div>
    </div>

    <div class="large-4 columns">
        <div class="row">
            <div class="large-10 columns col-md-offset-2 wrapper-default wrapper-xs wrapper-shadow no-gutter">
                <img src="http://templatedeck.com/demos/poncho1021/img/image-21-sm.jpg" class="pull-top img-responsive" alt="image">
                <img src="http://templatedeck.com/demos/poncho1021/img/testimonial7.jpg" class="img-circle pull-top" width="80" alt="image">
                <div class="row">
                  <div class="large-12">
                    <h5>Dolor sit amet</h5>
                    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore. </p>
                    <a href="#" class="button">Read more...</a>
                  </div>
                </div>
            </div>
        </div>
    </div>
</div>

CSS code

This is the css code used to create this bootstrap snippet, You can copy, paste, change, customize and run the following CSS code to get a result Like the one shown in the preview selection

body{margin-top:20px;}

.no-gutter {
    padding-left: 0;
    padding-right: 0;
}
.wrapper-shadow {
    box-shadow: 200px 200px 200px rgba(0, 0, 0, 0.2);
}
.wrapper-default {
    background-color: #fff;
    color: #303030;
}
.wrapper-xs {
    padding-top: 40px;
    padding-bottom: 40px;
}
.pull-top {
    margin-top: -40px;
}
.img-circle{
    border-radius:50%;    
}
.img-responsive {
  display: block;
  max-width: 100%;
  height: auto;
}
.text-center{
    text-align:center;    
}