Icone Chef

by Andrea Biagi

HTML

<ul class="icone-chef">

	<li>
		<img src="https://www.chefstudio.it/icone-gbp/fast-delivery.jpg" alt="fast delivery icon" title="fast delivery in 24/48 hour">
		<div class="txt-icone-chef">Fast Delivery</div>	
  </li>
  
   <li>
		<img src="https://www.chefstudio.it/icone-gbp/work-experience.jpg" alt="" title="" class="flex">
    <div class="txt-icone-chef">25 years of experience</div>	
   </li>
	
   <li>
		<img src="https://www.chefstudio.it/icone-gbp/5000-produts.jpg" alt="" title="" class="flex">
    <div class="txt-icone-chef">Over 5000 products</div>	
   </li>
	
   <li>
		<img src="https://www.chefstudio.it/icone-gbp/replay-in-one-hour.jpg" alt="" title="" class="flex">
    <div class="txt-icone-chef">Reply in 1 hour</div>	
   </li>   
    
</ul>

CSS

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote,
a, abbr, acronym, address, big, cite,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td, video {
    padding: 0;
    margin: 0;
}


.icone-chef {
list-style-type: none;
margin: 0 auto;
margin-bottom: 30px;
text-align: center;
}

.icone-chef > li {
display: inline-block;
padding: 8px;
vertical-align: top;
width: 115px;
color: #395071;
height: 150px;
margin-bottom: 5px;
}

.icone-chef img {
  width: 100%;
}

@media screen and (min-width: 624px){
	
.icone-chef > li {
	width: 170px;
  height: 230px;
	font-size: 20px;
	padding:15px;
}
	
}