|
<style>
@import url(‘https://fonts.googleapis.com/css2?family=Roboto&display=swap’);
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body {
font: 100%/1.6 ‘Roboto’, sans-serif;
padding: 2rem 1rem;
}
.pricing-table-wrapper {
max-width: 71rem;
margin: 0 auto;
}
.pricing-table {
–pricing-table-color: #3676ec;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(16em, 1fr));
grid-gap: 2em;
margin: 0 auto;
padding: 0;
list-style-type: none;
}
.pricing-table__item {
display: flex;
flex-direction: column;
align-items: center;
background-color: #fff;
padding: 2em;
box-shadow: 0 20px 20px rgba(0, 0, 0, 0.08);
transition: box-shadow 200ms cubic-bezier(0.02, 0.01, 0.47, 1), transform 200ms cubic-bezier(0.02, 0.01, 0.47, 1);
}
.pricing-table__item–popular {
position: relative;
}
.pricing-table__item–popular::before {
position: absolute;
content: attr(data-popular);
top: 2em;
right: 2em;
font-size: 0.9em;
padding: 0 1em;
background-color: #ffd900;
border-radius: 0.1em;
color: #282824;
}
.pricing-table__img {
margin: 2.5em auto 4em;
width: 100%;
max-width: 9.3em;
}
.pricing-table__title {
margin: 0;
font-size: 1.7em;
text-transform: capitalize;
}
.pricing-table__description {
display: flex;
flex-direction: column;
align-items: center;
margin: 0 auto;
}
.pricing-table__tagline {
margin: 0;
color: #9ea0a3;
text-align: center;
}
.pricing-table__price {
color: var(–pricing-table-color);
font-size: 2.5em;
margin: 1em auto 0;
font-weight: bold;
}
.pricing-table__label {
margin: 0;
color: #9ea0a3;
font-size: 0.9em;
}
.pricing-table__save {
color: #4cae4f;
font-weight: bold;
}
.pricing-table__products {
margin: 1.87em 0;
padding: 0;
list-style-type: none;
flex-grow: 1;
display: flex;
flex-direction: column;
justify-content: center;
}
.pricing-table__product {
display: flex;
align-items: center;
font-weight: bold;
margin-bottom: 1.5em;
}
.pricing-table__product a {
text-decoration: none;
color: inherit;
transition: color 0.2s ease-in-out;
}
.pricing-table__product a:hover {
color: var(–pricing-table-color);
}
.pricing-table__product::before {
content: ‘ ‘;
width: 0.5em;
height: 0.5em;
margin-inline-end: 1em;
border-radius: 20%;
background-color: var(–pricing-table-color);
border-radius: 50%;
}
.pricing-table__button {
background: var(–pricing-table-color);
color: #fff;
margin-top: auto;
padding: 0.5em 2em;
text-decoration: none;
width: 100%;
text-align: center;
transition: background 0.2s ease-in-out;
text-transform: capitalize;
}
</style>
<div class=”pricing-table-wrapper”>
<ul class=”pricing-table”>
<li class=”pricing-table__item”>
<h3 class=”pricing-table__title”>Blogging</h3>
<p class=”pricing-table__description”>
</p>
<ul class=”pricing-table__products”>
<li class=”pricing-table__product”>
<a href=”https://www.rojpadhen.com/2021/08/add-lazy-load-javascript-code-in-blogger.html”>How to add lazy load javascript in blogger?</a>
</li>
<li class=”pricing-table__product”>
<a href=”https://www.rojpadhen.com/2021/08/add-social-media-icons-in-blogger.html”>How to make attractive social media icons in blogger?</a>
</li>
<li class=”pricing-table__product”>
<a href=”https://www.rojpadhen.com/2021/08/how-to-add-pricing-table-in-blogger-post.html”>How to Create Responsive Pricing table in blogger?</a>
</li>
<li class=”pricing-table__product”>
<a href=”https://www.rojpadhen.com/2021/07/create-responsive-table-in-blogger-posts.html”>3 Simple Steps To add Responsive table in blogger?</a>
</li>
<li class=”pricing-table__product”>
<a href=”https://www.rojpadhen.com/2021/06/boost-your-pagespeed-in-blogger.html”>11 straightforward Tips to Increase Page Speed in blogger?</a>
</li>
<li class=”pricing-table__product”>
<a href=”https://www.rojpadhen.com/2021/04/how-to-protect-your-content-in-blogger.html”>How to Protect your Content in blogger?</a>
</li>
</ul>
<a href=”https://www.rojpadhen.com/search/label/blogging%20guides” class=”pricing-table__button”>Read More</a>
</li>
<li class=”pricing-table__item pricing-table__item”>
<h3 class=”pricing-table__title”>SEO</h3>
<ul class=”pricing-table__products”>
<li class=”pricing-table__product”><a href=”https://www.rojpadhen.com/2021/06/seo-pro-tips-in-2022.html”>10 Pro SEO Tips to rank your website</a></li>
<li class=”pricing-table__product”>
<a href=”https://www.rojpadhen.com/2021/06/onpage-seo-tactics.html”>On-Page SEO Basics</a>
</li>
<li class=”pricing-table__product”>
<a href=”https://www.rojpadhen.com/2021/06/increase-da-and-pa-in-website.html”>10 Quick Ways to Boost Your Domain and Page Authority</a>
</li>
<li class=”pricing-table__product”>
<a href=”https://www.rojpadhen.com/2021/06/create-high-quality-backlinks-in-website.html”>How to Create High Quality Backlinks?</a>
</li>
<li class=”pricing-table__product”>
<a href=”https://www.rojpadhen.com/2021/05/smart-and-informative-seo-titles-and-descriptions.html”>How to write SEO Title & Descriptions?</a>
</li>
<li class=”pricing-table__product”>
<a href=”https://www.rojpadhen.com/2021/05/full-seo-guide-for-beginners.html”>What is SEO? Important of SEO in Future?</a>
</li>
</ul>
<a href=”https://www.rojpadhen.com/search/label/SEO” class=”pricing-table__button”>Read More</a>
</li>
<li class=”pricing-table__item”>
<h3 class=”pricing-table__title”>Hosting</h3>
<ul class=”pricing-table__products”>
<li class=”pricing-table__product”>
<a href=”https://www.rojpadhen.com/2021/03/host-a-website-in-infinityfree-hosting-for-free.html”>How to Host a website on Infinity free hosting for free?</a>
</li>
<li class=”pricing-table__product”>
<a href=”https://www.rojpadhen.com/2021/03/top-7-hosting-review-in-2021.html”>7 best Hosting review in 2021</a>
</li>
<li class=”pricing-table__product”>
<a href=”https://www.rojpadhen.com/2021/03/how-to-host-website-in-google-drive.html”>Host a website on Google drive for free?</a>
</li>
</ul>
<a href=”https://www.rojpadhen.com/search/label/hosting” class=”pricing-table__button”>Read More</a>
</li>
</ul>
</div>
|
