Foundation zurb snippet: Services box

designed to help people of all skill levels - designer or developer, huge nerd or early beginner.
copy and paste the code. Use it as a complete kit or use it to start something more complex.
tags: box,services



<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"> <div class="row"> <div class="large-4 columns"> <div class="service-box"> <i class="fa fa-desktop red"></i> <h3>Responsive design</h3> <p> Similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. </p> </div> </div> <div class="large-4 columns"> <div class="service-box"> <i class="fa fa-twitter green"></i> <h3>Foundation 6</h3> <p> Similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. </p> </div> </div> <div class="large-4 columns"> <div class="service-box"> <i class="fa fa-phone blue "></i> <h3>Free support</h3> <p> Similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. </p> </div> </div> </div> <div class="row"> <div class="large-4 columns"> <div class="service-box"> <i class="fa fa-desktop blue"></i> <h3>Responsive design</h3> <p> Similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. </p> </div> </div> <div class="large-4 columns"> <div class="service-box"> <i class="fa fa-twitter red"></i> <h3>Foundation 6</h3> <p> Similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. </p> </div> </div> <div class="large-4 columns"> <div class="service-box"> <i class="fa fa-phone yellow "></i> <h3>Free support</h3> <p> Similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. </p> </div> </div> </div>
body{margin-top:20px;} .service-box { text-align: center; padding: 15px; padding-top: 0px; border: 1px solid #ddd; margin-top: 70px; } .service-box i{ width: 90px; height: 90px; color:#fff; text-align: center; line-height: 90px; margin-bottom: 20px; border-radius: 50%; font-size: 40px; position: relative; margin-top: -50px; } .service-box h3{ text-transform: uppercase; font-weight: 700; font-size: 16px; } .service-box p{ color:#888; font-size: 13px; font-weight: 400; } .red{ background: #b01a40; } .green{ background: #46aa1f; } .blue{ background: #408afa; } .orange{ background: #d24726; } .yellow{ background-color: #e99a1e; } .btn{ font-weight: normal; } .lead{ color:#777; }
Dey-Dey

Services box

Dey-Dey
  May 15th, 19:59
70 Views