<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.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='row s7'> <div class='col-md-6 col-lg-3'> <div class='card'> <div class='card-icon'></div> <div class='card-block'> <h3 class='card-title'>Consectetur. Adipiscing Elit</h3> <p class='card-text'>Morbi viverra non ante sit amet consequat. Nam tempus elit et iaculis lobortis.</p> </div> </div> </div> <div class='col-md-6 col-lg-3'> <div class='card'> <div class='card-icon'></div> <div class='card-block'> <h3 class='card-title'>Phasellus Cursus Lorem</h3> <p class='card-text'>Maecenas volutpat nibh sapien.</p> </div> </div> </div> <div class='col-md-6 col-lg-3'> <div class='card'> <div class='card-icon'></div> <div class='card-block'> <h3 class='card-title'>Curabitur a Arcu Turpis</h3> <p class='card-text'>In hac habitasse platea dictumst. Sed euismod justo sed auctor malesuada.</p> </div> </div> </div> <div class='col-md-6 col-lg-3'> <div class='card'> <div class='card-icon'></div> <div class='card-block'> <h3 class='card-title'>Praesent Ullamcorper</h3> <p class='card-text'>Donec consequat nulla non metus aliquam, at bibendum mauris convallis. Morbi dapibus ultricies tortor, eget laoreet ligula pretium quis. Aliquam erat volutpat.</p> </div> </div> </div> </div> <div class='row s1'> <div class='col-md-6 col-lg-3'> <div class='card'> <div class='card-icon'> <i class='fa fa-bolt'></i> </div> <div class='card-block'> <h3 class='card-title'>Consectetur. Adipiscing Elit</h3> <p class='card-text'>Morbi viverra non ante sit amet consequat. Nam tempus elit et iaculis lobortis.</p> </div> </div> </div> <div class='col-md-6 col-lg-3'> <div class='card'> <div class='card-icon'> <i class='fa fa-bath'></i> </div> <div class='card-block'> <h3 class='card-title'>Phasellus Cursus Lorem</h3> <p class='card-text'>Maecenas volutpat nibh sapien.</p> </div> </div> </div> <div class='col-md-6 col-lg-3'> <div class='card'> <div class='card-icon'> <i class='fa fa-bar-chart'></i> </div> <div class='card-block'> <h3 class='card-title'>Curabitur a Arcu Turpis</h3> <p class='card-text'>In hac habitasse platea dictumst. Sed euismod justo sed auctor malesuada.</p> </div> </div> </div> <div class='col-md-6 col-lg-3'> <div class='card'> <div class='card-icon'> <i class='fa fa-cogs'></i> </div> <div class='card-block'> <h3 class='card-title'>Praesent Ullamcorper</h3> <p class='card-text'>Donec consequat nulla non metus aliquam, at bibendum mauris convallis. Morbi dapibus ultricies tortor, eget laoreet ligula pretium quis. Aliquam erat volutpat.</p> </div> </div> </div> </div> <div class='row s2'> <div class='col-md-6 col-lg-3'> <div class='card'> <div class='card-icon'> <i class='fa fa-bolt'></i> </div> <div class='card-block'> <h3 class='card-title'>Consectetur Adipiscing Elit</h3> <p class='card-text'>Morbi viverra non ante sit amet consequat. Nam tempus elit et iaculis lobortis.</p> </div> </div> </div> <div class='col-md-6 col-lg-3'> <div class='card'> <div class='card-icon'> <i class='fa fa-bath'></i> </div> <div class='card-block'> <h3 class='card-title'>Phasellus Cursus Lorem</h3> <p class='card-text'>Maecenas volutpat nibh sapien.</p> </div> </div> </div> <div class='col-md-6 col-lg-3'> <div class='card'> <div class='card-icon'> <i class='fa fa-bar-chart'></i> </div> <div class='card-block'> <h3 class='card-title'>Curabitur a Arcu Turpis</h3> <p class='card-text'>In hac habitasse platea dictumst. Sed euismod justo sed auctor malesuada.</p> </div> </div> </div> <div class='col-md-6 col-lg-3'> <div class='card'> <div class='card-icon'> <i class='fa fa-cogs'></i> </div> <div class='card-block'> <h3 class='card-title'>Praesent Ullamcorper</h3> <p class='card-text'>Donec consequat nulla non metus aliquam, at bibendum mauris convallis. Morbi dapibus ultricies tortor, eget laoreet ligula pretium quis. Aliquam erat volutpat.</p> </div> </div> </div> </div> <div class='row s3'> <div class='col-md-6 col-lg-3'> <div class='card'> <div class='card-icon'> <i class='fa fa-bolt'></i> </div> <div class='card-block'> <h3 class='card-title'>Consectetur Adipiscing Elit</h3> <p class='card-text'>Morbi viverra non ante sit amet consequat. Nam tempus elit et iaculis lobortis.</p> </div> </div> </div> <div class='col-md-6 col-lg-3'> <div class='card'> <div class='card-icon'> <i class='fa fa-bath'></i> </div> <div class='card-block'> <h3 class='card-title'>Phasellus Cursus Lorem</h3> <p class='card-text'>Maecenas volutpat nibh sapien.</p> </div> </div> </div> <div class='col-md-6 col-lg-3'> <div class='card'> <div class='card-icon'> <i class='fa fa-bar-chart'></i> </div> <div class='card-block'> <h3 class='card-title'>Curabitur a Arcu Turpis</h3> <p class='card-text'>In hac habitasse platea dictumst. Sed euismod justo sed auctor malesuada.</p> </div> </div> </div> <div class='col-md-6 col-lg-3'> <div class='card'> <div class='card-icon'> <i class='fa fa-cogs'></i> </div> <div class='card-block'> <h3 class='card-title'>Praesent Ullamcorper</h3> <p class='card-text'>Donec consequat nulla non metus aliquam, at bibendum mauris convallis. Morbi dapibus ultricies tortor, eget laoreet ligula pretium quis. Aliquam erat volutpat.</p> </div> </div> </div> </div> <div class='row s4'> <div class='col-md-6 col-lg-3'> <div class='card'> <img class='card-img-top' src='http://lorempixel.com/640/480/food/1'> <div class='card-block'> <h3 class='card-title'>Consectetur Adipiscing Elit</h3> <p class='card-text'>Morbi viverra non ante sit amet consequat. Nam tempus elit et iaculis lobortis.</p> </div> </div> </div> <div class='col-md-6 col-lg-3'> <div class='card'> <img class='card-img-top' src='http://lorempixel.com/640/480/food/2'> <div class='card-block'> <h3 class='card-title'>Phasellus Cursus Lorem</h3> <p class='card-text'>Maecenas volutpat nibh sapien.</p> </div> </div> </div> <div class='col-md-6 col-lg-3'> <div class='card'> <img class='card-img-top' src='http://lorempixel.com/640/480/food/3'> <div class='card-block'> <h3 class='card-title'>Curabitur a Arcu Turpis</h3> <p class='card-text'>In hac habitasse platea dictumst. Sed euismod justo sed auctor malesuada.</p> </div> </div> </div> <div class='col-md-6 col-lg-3'> <div class='card'> <img class='card-img-top' src='http://lorempixel.com/640/480/food/4'> <div class='card-block'> <h3 class='card-title'>Praesent Ullamcorper</h3> <p class='card-text'>Donec consequat nulla non metus aliquam, at bibendum mauris convallis. Morbi dapibus ultricies tortor, eget laoreet ligula pretium quis. Aliquam erat volutpat.</p> </div> </div> </div> </div> <div class='row s5'> <div class='col-md-6 col-lg-3'> <div class='card'> <img class='card-img-top' src='http://lorempixel.com/640/480/people/1'> <div class='card-block'> <h3 class='card-title'>Consectetur Adipiscing Elit</h3> <p class='card-text'>Morbi viverra non ante sit amet consequat. Nam tempus elit et iaculis lobortis.</p> </div> </div> </div> <div class='col-md-6 col-lg-3'> <div class='card'> <img class='card-img-top' src='http://lorempixel.com/640/480/people/2'> <div class='card-block'> <h3 class='card-title'>Phasellus Cursus Lorem</h3> <p class='card-text'>Maecenas volutpat nibh sapien.</p> </div> </div> </div> <div class='col-md-6 col-lg-3'> <div class='card'> <img class='card-img-top' src='http://lorempixel.com/640/480/people/3'> <div class='card-block'> <h3 class='card-title'>Curabitur a Arcu Turpis</h3> <p class='card-text'>In hac habitasse platea dictumst. Sed euismod justo sed auctor malesuada.</p> </div> </div> </div> <div class='col-md-6 col-lg-3'> <div class='card'> <img class='card-img-top' src='http://lorempixel.com/640/480/people/4'> <div class='card-block'> <h3 class='card-title'>Praesent Ullamcorper</h3> <p class='card-text'>Donec consequat nulla non metus aliquam, at bibendum mauris convallis. Morbi dapibus ultricies tortor, eget laoreet ligula pretium quis. Aliquam erat volutpat.</p> </div> </div> </div> </div> <div class='row s6'> <div class='col-md-6 col-lg-4'> <div class='card'> <div class='card-icon'> <i class='fa fa-bolt'></i> </div> <div class='card-block'> <h3 class='card-title'>Consectetur Adipiscing Elit</h3> <p class='card-text'>Morbi viverra non ante sit amet consequat. Nam tempus elit et iaculis lobortis.</p> </div> </div> </div> <div class='col-md-6 col-lg-4'> <div class='card'> <div class='card-icon'> <i class='fa fa-bath'></i> </div> <div class='card-block'> <h3 class='card-title'>Phasellus Cursus Lorem</h3> <p class='card-text'>Maecenas volutpat nibh sapien.</p> </div> </div> </div> <div class='col-md-6 col-lg-4'> <div class='card'> <div class='card-icon'> <i class='fa fa-bar-chart'></i> </div> <div class='card-block'> <h3 class='card-title'>Curabitur a Arcu Turpis</h3> <p class='card-text'>In hac habitasse platea dictumst. Sed euismod justo sed auctor malesuada.</p> </div> </div> </div> <div class='col-md-6 col-lg-4'> <div class='card'> <div class='card-icon'> <i class='fa fa-cogs'></i> </div> <div class='card-block'> <h3 class='card-title'>Praesent Ullamcorper</h3> <p class='card-text'>Donec consequat nulla non metus aliquam, at bibendum mauris convallis. Morbi dapibus ultricies tortor, eget laoreet ligula pretium quis. Aliquam erat volutpat.</p> </div> </div> </div> <div class='col-md-6 col-lg-4'> <div class='card'> <div class='card-icon'> <i class='fa fa-thermometer-full'></i> </div> <div class='card-block'> <h3 class='card-title'>Suspendisse Pulvinar</h3> <p class='card-text'>Quisque suscipit fringilla sapien, lacinia rutrum diam pulvinar.</p> </div> </div> </div> <div class='col-md-6 col-lg-4'> <div class='card'> <div class='card-icon'> <i class='fa fa-car'></i> </div> <div class='card-block'> <h3 class='card-title'>Integer Aliquam Tincidunt Eros</h3> <p class='card-text'>Fusce eleifend condimentum mauris, id aliquam ligula convallis et. Mauris finibus tempus molestie.</p> </div> </div> </div> </div> </div>

@import url(//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css); @import url(https://fonts.googleapis.com/css?family=Nothing+You+Could+Do); .container { margin-top: 2rem; } .row > div { display: flex; } .card { margin-bottom: 30px; width: 100%; text-align: center; } .s1 .card { border-color: #32c5d2; margin-top: 3rem; border-radius: 0; } .s1 .card-icon { margin-top: -2rem; } .s1 .card-icon .fa { font-size: 2rem; height: 4rem; width: 4rem; line-height: 4rem; color: #fff; background: #32c5d2; border-radius: 50%; } .s2 .card { border: 0; } .s2 .card-icon { font-size: 3rem; color: #32c5d2; } .s2 .card-title:after { display: block; margin: 1rem auto; width: 3rem; height: 1px; background: #bbb; content: " "; } .s2 { margin: 0 calc(50% - 50vw) 2rem; padding: 2rem calc(50vw - 50%) 0; background: #eee; } .s3 .card { background: #32c5d2; color: #fff; } .s3 .card-icon { font-size: 3rem; margin-top: 1rem; } .s4 .card { border-radius: 0; } .s4 .card-img-top { width: 100%; height: 10rem; object-fit: cover; } .s5 .card { border: 0; } .s5 .card-img-top { margin: 0 auto; width: 10rem; height: 10rem; border-radius: 50%; object-fit: cover; } .s6 .card { border: 0; text-align: left; } .s6 .card-icon { position: absolute; left: 0; top: 1.25rem; font-size: 1.5rem; height: 3rem; width: 3rem; line-height: 3rem; color: #fff; background: #32c5d2; border-radius: 50%; text-align: center; } .s6 .card-block { padding-left: 5rem; } .s7 { font-family: 'Nothing You Could Do', cursive; } .s7 .card { border: solid 5px #666; border-radius: 255px 15px 225px 15px/15px 225px 15px 255px; padding: 1em 2em; } .s7 .card-icon { background: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%2020%2020%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20xml%3Aspace%3D%22preserve%22%20style%3D%22fill-rule%3A%20evenodd%3B%20clip-rule%3A%20evenodd%3B%20stroke-linejoin%3A%20round%3B%20stroke-miterlimit%3A%201.41421%3B%20#%22%20fill%3D%22#%22%3E%3Cpath%20d%3D%22M16.794%2C4.5c-7.546%2C-14.034%20-22.642%2C10.473%20-13.241%2C14.22c7.332%2C2.921%2018.308%2C-3.713%2015.372%2C-12.497c-2.83%2C-8.471%20-18.037%2C-6.816%20-18.67%2C2.264c-0.703%2C10.082%2012.738%2C14.476%2019.496%2C8.778c0.065%2C-0.054%20-0.021%2C-0.17%20-0.089%2C-0.12c-5.46%2C4.12%20-14.011%2C2.67%20-17.765%2C-3.207c-3.347%2C-5.239%200.039%2C-10.82%205.296%2C-12.396c5.422%2C-1.626%2011.487%2C1.178%2011.896%2C7.418c0.396%2C6.029%20-5.41%2C8.837%20-10.222%2C9.727c-3.077%2C0.57%20-6.818%2C0.125%20-7.744%2C-3.482c-0.701%2C-2.732%200.536%2C-5.856%201.811%2C-8.19c3.152%2C-5.772%209.616%2C-9.228%2013.753%2C-2.45c0.042%2C0.071%200.147%2C0.008%200.107%2C-0.065Z%22%20style%3D%22fill%3A%20#%3B%20fill-rule%3A%20nonzero%3B%22%2F%3E%3C%2Fsvg%3E") no-repeat center; height: 3.5rem; }