Styled features with no image or icon
HTML
<div class="tsidesign_feature">
<div class="the_list_item item_1" style="float: left; color: #fff;">
<div class="the_list_item_headline">Headline <span>➜</span></div>
</div>
<div class="the_list_item item_2" style="float: left; color: #fff;">
<div class="the_list_item_headline">Headline <span>➜</span></div>
</div>
<div class="the_list_item item_3" style="float: left; color: #fff;">
<div class="the_list_item_headline">Headline <span>➜</span></div>
</div>
</div>
CSS
html:not(.mobileview) .tsidesign_feature .the_list_item {
clear: none !important;
width: 33.3333% !important;
margin: 0% !important;
padding-top: 3rem !important;
padding-bottom: 3rem!important;
}
.mediaqueries.mobileview .tsidesign_feature .the_list_item {
clear: none !important;
width: 100% !important;
margin: 0% !important;
padding-top: 3rem !important;
padding-bottom: 3rem!important;
}
.mediaqueries.mobileview .tsidesign_feature .the_list_item .the_list_item_headline {
text-align: center !important;
}
.tsidesign_feature {
padding: 0 !important;
margin:0 !important;
}
.tsidesign_feature .item_1 {
background-color: #1174ff !important;
}
.tsidesign_feature .item_2 {
background-color: #175dcd!important;
}
.tsidesign_feature .item_3 {
background-color: #0d48a7!important;
}
html:not(.mobileview) .tsidesign_feature .the_list_item .the_list_item_headline span{
-webkit-transition: all .7s ease-in-out !important;
-moz-transition: all .7s ease-in-out !important;
-o-transition: all .7s ease-in-out !important;
transition: all .7s ease-in-out !important;
padding-left: 5% !important;
}
html:not(.mobileview) .tsidesign_feature .the_list_item:hover .the_list_item_headline span{
padding-left: 20% !important;
}
1 Response