"Feature Content Boxes"
Bootstrap 3.3.0 Snippet by perlatsp

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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-fluid"> <div class="iconcontainer"> <h1 class="text-center">Γιατί να επιλέξετε OmegaSystems</h1> <div class="row"> <div class="col-xs-15 col-sm-6 col-md-3 col-lg-3 "> <div class="iconbox"> <div class="iconbox-icon"> <img src="https://top.host/sites/all/themes/bootstrap/top/images/home/xtremesupport.jpg"> </div> <div class="featureinfo"> <h4 class="text-center">24h Support</h4> <p> Η ομάδα υποστήριξης της OmegaSystems είναι πάντα δίπλα σας, για να σας παρέχει την καλύτερη δυνατή εμπειρία στις υπηρεσίες φιλοξενίας & τεχνικής υποστήριξης συνδυάζοντας τη φιλική εξυπηρέτηση με την υψηλή τεχνογνωσία </p> </div> </div> </div> <div class="col-xs-15 col-sm-6 col-md-3 col-lg-3"> <div class="iconbox"> <div class="iconbox-icon"> <img src="http://omegasystems.gr/wp-content/uploads/2016/12/plesk.png"> </div> <div class="featureinfo"> <h4 class="text-center">Ples Onyx</h4> <p> Διαχειριστείτε τις υπηρεσίες του πακέτου φιλοξενίας σας στην OmegaSystems μέσα από ένα όμορφο, ασφαλές και λειτουργικό περιβάλλον με δυνατότητα πλοήγησης σε Αγγλικά & Ελληνικά </p> </div> </div> </div> <div class="col-xs-15 col-sm-6 col-md-3 col-lg-3"> <div class="iconbox"> <div class="iconbox-icon"> <img src="http://omegasystems.gr/wp-content/uploads/2016/12/backupTool.png"> </div> <div class="featureinfo"> <h4 class="text-center">BackUp tool</h4> <p> Αξιοποιήστε το backup εργαλείο της OmegaSystems, που σας παρέχει απόλυτη ταχύτητα και ευελιξία σε διαδικασίες Backup & Restore για τα αρχεία και τις βάσεις δεδομένων σας. </p> </div> </div> </div> <div class="col-xs-15 col-sm-6 col-md-3 col-lg-3"> <div class="iconbox"> <div class="iconbox-icon"> <img class=" " src="http://omegasystems.gr/wp-content/uploads/2016/12/30days.png"> </div> <div class="featureinfo"> <h4 class="text-center">Εγγύηση επιστροφής χρημάτων</h4> <p> Αν δε μείνετε ικανοποιημένοι από την υπηρεσία μας, εντός 30 ημερών σας επιστρέφουμε τα χρήματά σας. Επειδή όμως θα μας αγαπήσετε κι εσείς, μπορείτε ανά πάσα στιγμή να αναβαθμίσετε το πακέτο σας! </p> </div> </div> </div> <div class="col-xs-15 col-sm-6 col-md-3 col-lg-3"> <div class="iconbox"> <div class="iconbox-icon"> <img src="http://omegasystems.gr/wp-content/uploads/2016/12/spamexperts.png"> </div> <div class="featureinfo"> <h4 class="text-center">Spam Experts</h4> <p> Οι έξυπνοι και αυτοεκπαιδευόμενοι αλγόριθμοι της υπηρεσίας προστατεύουν την εισερχόμενη αλληλογραφία σας από spam, virus, phishing & malware επιθέσεις. </p> </div> </div> </div> </div> </div>
body { background-color: #ebebeb; } .iconcontainer { margin-top: 20px; margin-bottom: 20px; } .iconbox { background: #ffffff; background-color: #ffffff; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.16), 0 1px 3px 0 rgba(0, 0, 0, 0.12); padding: 20px 25px; text-align: right; display: block; margin-top: 60px; margin-bottom: 15px; width: 100%; height: 300px; } .iconbox-icon { background-color: #008EED; box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; margin: 0 auto; width: 100px; height: 100px; margin-top: -70px; background: linear-gradient(to left, orange 50%, #008EED 50%); background-size: 200% 100%; background-position:left bottom; transition:all 0.5s ease; } .iconbox:hover .iconbox-icon{ background-position:right top;} .iconbox:hover{ -webkit-box-shadow: 0px 0px 15px 2px #008eed; box-shadow: 0px 0px 15px 2px #008eed; } .iconbox-icon img { color: #fff; font-size: 42px; display: block; margin-left: auto; margin-right: auto; padding-top: 10%; width: 80%; height: 90%; } .iconbox-icon span { color: #fff; display: block; margin-left: auto; margin-right: auto; padding-top: 29px; text-align: center; vertical-align: middle; } .featureinfo h4 { letter-spacing: 1px; } .featureinfo > p { color: #000000; font-size: 16px; padding-top: 4px; text-align: left; } .col-xs-15, .col-sm-15, .col-md-15, .col-lg-15 { position: relative; min-height: 1px; padding-right: 10px; padding-left: 10px; } .col-xs-15 { width: 20%; float: left; } @media (min-width: 768px) { .col-sm-15 { width: 20%; float: left; } } @media (min-width: 992px) { .col-md-15 { width: 20%; float: left; } } @media (min-width: 1200px) { .col-lg-15 { width: 20%; float: left; } }

Related: See More


Questions / Comments: