Adding the Offer services page with Material Design NQNia

Welcome dear friends. A new addition that joins the wonderful Blogger additions group, a tool for displaying text services and displaying part of their content in the form of brief lines and sentences, as well as showing its form that the service is more than wonderful. Because the first thing to show service

Wonderfully is the way to promote it and the way it will be promoted, so we offer you the right shape in the right colors and also the wonderful effects taken from the technique of design. And now we come to the method of adding it, which is easy and is a single code that is placed below the posts or in the place you want and also the addition is intended to be displayed on the main page only, we have facilitated the matter for you completely, where we have beautified all the codes and put them in one short code to put it only you and nothing Another calls for help or anything like that. It is easy to modify. All you need to do is search for what you want to change 

Explanation of the installation method:

Login blogger >> control panel >>>> New Page >>>> Edit html >> Paste Code

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div id='mido-cn1gk-net-PLANS'>
<section class='plans-container' id='plans' style='     height: 550px; '>
<article class='col s12 m6 l4' id='mido-plans-1' style='width: 28%;float: right;margin-right: 66px;'>
<div class='card hoverable' style='     background: #fff !important; '>
<div class='card-image purple waves-effect' style='     background: url(&apos;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8AmSUJYJbs76vm46fk73EwGecV6D67yKD2mC0M3oRduiqZiMio_zd913qa6YCnSpMdUrPLBzeVQmI0_dRmUBStT7fZY9FthF9gpT2kHpyHbgKYKekLArjIs6l0lqqmR68s1YpzB6pWf7L/s1600/tr.png&apos;) !important;     background-attachment: fixed !important;     background-size: cover !important;     background-color:  #880c9e  !important; '>
<div class='card-title'>
Modify and upgrade blogger templates</div>
<div class='price' style='    position: relative;     position: relative !important;     font-size: 5rem !important;     line-height: 1.6em !important;     color: #fff !important;     font-weight: 300 !important;     text-align: center !important;'>
^$0_/</div>
<div class='price-desc'>
The service is free</div>
</div>
<div class='card-content'>
<div class='collection'>
<div class='collection-item' id='mido-price'>
Installing exclusive add-ons</div>
<div class='collection-item'>
Delete non-removable tools</div>
<div class='collection-item' id='mido-price'>
Improving the handwriting</div>
<div class='collection-item'>
Improve the appearance of the template</div>
<div class='collection-item' id='mido-price'>
Change colors</div>
<div class='collection-item'>
Ad space installation</div>
</div>
</div>
<div class='card-action center-align' style='     border-bottom: solid 2px #9c27b0; '>
<a href='http://premiumxml.blogspot.com' style='     margin-right: 0px !important;     margin-left: 0px !important; '>
<button class='waves-effect waves-light  btn' href='https://www.facebook.com/shaampc01' style='     background: #9c27b0; '>Choose the service</button>
</a>
</div>
</div>
</article>
<article class='col s12 m6 l4' id='mido-plans-2' style='width: 28%;float: right;margin-right: 40px;'>
<div class='card z-depth-1 hoverable' style='     background: #fff !important; '>
<div class='card-image cyan waves-effect' style='     background: url(&apos;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8AmSUJYJbs76vm46fk73EwGecV6D67yKD2mC0M3oRduiqZiMio_zd913qa6YCnSpMdUrPLBzeVQmI0_dRmUBStT7fZY9FthF9gpT2kHpyHbgKYKekLArjIs6l0lqqmR68s1YpzB6pWf7L/s1600/tr.png&apos;) !important;     background-attachment: fixed !important;     background-size: cover !important;     background-color: #11a1c1 !important; '>
<div class='card-title'>
Advertisement on Alwaleed Net</div>
<div class='price' style='    position:
 relative;     position: relative !important;     font-size: 5rem !important;     line-height: 1.6em !important;     color: #fff !important;     font-weight: 300 !important;     text-align: center !important;'>
^$5</div>
<div class='price-desc'>
Period also
The Bunri</div>
</div>
<div class='card-content'>
<div class='collection'>
<div class='collection-item' id='mido-price'>
Free text and banner link for free </div>
<div class='collection-item'>
Banner 125 x 125 for 4 months</div>
<div class='collection-item' id='mido-price'>
Banner 300 x 250 for 3 months</div>
<div class='collection-item'>
Banner 728X90 for two months</div>
<div class='collection-item' id='mido-price'>
Another month
Banner ad</div>
<div class='collection-item'>
Daily visitors</div>
</div>
</div>
<div class='card-action center-align' style='     border-bottom: solid 2px #00bcd4; '>
<a href='http://premiumxml.blogspot.com' style='     margin-right: 0px !important;     margin-left: 0px !important; '>
<button class='waves-effect waves-light  btn' href='https://www.facebook.com/shaampc01' style='     background: #00bcd4; '>Choose the service</button>
</a>
</div>
</div>
</article>
<article class='col s12 m6 l4' id='mido-plans-3' style='width: 28%;float: right;margin-right: 40px;'>
<div class='card hoverable' style='     background: #fff !important; '>
<div class='card-image green waves-effect' style='     background: url(&apos;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8AmSUJYJbs76vm46fk73EwGecV6D67yKD2mC0M3oRduiqZiMio_zd913qa6YCnSpMdUrPLBzeVQmI0_dRmUBStT7fZY9FthF9gpT2kHpyHbgKYKekLArjIs6l0lqqmR68s1YpzB6pWf7L/s1600/tr.png&apos;) !important;     background-attachment: fixed !important;     background-size: cover !important;     background-color: #21b527 !important; '>
<div class='card-title'>
Purchase the previous site template </div>
<div class='price' style='    position: relative;     position: relative !important;     font-size: 5rem !important;     line-height: 1.6em !important;     color: #fff !important;     font-weight: 300 !important;     text-align: center !important;'>
^$0</div>
<div class='price-desc'>
Unlimited support</div>
</div>
<div class='card-content'>
<div class='collection'>
<div class='collection-item' id='mido-price'>
It has a stylish slider</div>
<div class='collection-item'>
95% responsive</div>
<div class='collection-item' id='mido-price'>
It has the best SEO codes</div>
<div class='collection-item'>
Beautiful effects in all directions</div>
<div class='collection-item' id='mido-price'>
Consistent colors</div>
<div class='collection-item'>
Free technical support</div>
</div>
</div>
<div class='card-action center-align' style='     border-bottom: solid 2px #4caf50; '>
<a href='http://premiumxml.blogspot.com ' style='     margin-right: 0px !important;     margin-left: 0px !important; '>
<button class='waves-effect waves-light  btn' href='http://premiumxml.blogspot.com' style='     background: #4caf50; '>Free template</button>
</a>
</div>
</div>
</article>
</section>
<style>
.card:hover,#footer .widget:hover,.blog-grid .post:hover,.waves-light:hover,.blog-content .post:hover,.sidebar .widget:hover,h4:hover,.post ol li:hover,pre:hover,#related-posts:hover,#comments:hover {
    box-shadow: 0 8px 17px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19) !important;
}
.card-action{border-top: 1px solid rgba(160, 160, 160, .2);text-align:center;padding:15px;margin:0 -1px 0 -1px;transition:all .4s}
.collection {
    margin: 0rem 0 1rem 0 !important;
  }
 .waves-effect{   padding: 6px 27px;
    color: #fff;
    font-family: &#39;Acme&#39;,ge_ss_threeregular;
    border: none;
    border-radius: 2px;    font-weight: 900;
  font-size: 20px;cursor: pointer;}
.plans-container .card .card-image .card-title {
    position: relative;
    font-size: 1.28rem;
    line-height: 1.6em;
    text-align: center;
    width: 100%;
    padding: 10px 15px;
    text-transform: uppercase;
    background: rgba(0,0,0,0.1);
    color: #fff;
}
#mido-price {
    background: #f7f7f7;
}
@media (min-width:811px) and (max-width:979px) {
#mido-plans-1,#mido-plans-2,#mido-plans-3 {
    width: 25% !important;
    }
}
@media screen and (max-width : 810px) {
#mido-plans-1,#mido-plans-2,#mido-plans-3 {
    width: 93% !important;
    margin-right: 14px !important;
}
.plans-container {
    height: 1960px !important;
    }
  }
</style>
<style>
.plans-container .collection .collection-item {
    font-size: 1.4rem !important;
}
.collection .collection-item {
    background-color: #fff;
    line-height: 1.5rem;
    padding: 10px 20px;
    margin: 0;text-align: -webkit-center;
}
.plans-container .card .card-image .price-desc {
    text-align: center;
    color: #fff;
    padding-bottom: 10px;
}
.plans-container .collection .collection-item:before {
font-family:fontawesome !important;
    content: &quot;\f0e7&quot; !important;
font-size: 1.5rem !important;
margin-left: 15px;
  }
  </style>
</div>
</b:if>

Result