Please Rate Our Service
Free
$0 / forever
For learning and exploring the Contentful Platform.
- 10 users
- 2 roles
- 2 locales
- 100K API calls/month
- 50 GB/month CDN bandwidth
- Structured content
- Developer tools
- Editorial experience
CSS STYLE
// PRICE TABLE //
.pricing-table {
max-width: 600px;
margin: auto;
padding: 20px;
border: 1px solid #e5e5e5;
border-radius: 10px;
font-family: Arial, sans-serif;
background-color: #ffffff;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.plan-header {
text-align: center;
border-bottom: 1px solid #e5e5e5;
padding-bottom: 20px;
}
.plan-header h2 {
font-size: 24px;
font-weight: bold;
color: #333;
margin: 0;
}
.plan-header p {
font-size: 16px;
color: #777;
margin: 5px 0;
}
.start-btn {
display: block;
width: 80%;
margin: 20px auto;
padding: 10px 0;
background-color: #007aff;
color: #ffffff;
text-align: center;
border: none;
border-radius: 5px;
font-size: 16px;
cursor: pointer;
text-transform: uppercase;
}
.start-btn:hover {
background-color: #005bb5;
}
.plan-details {
list-style-type: none;
padding: 0;
margin: 20px 0;
}
.plan-details li {
font-size: 16px;
color: #333;
padding: 10px 0;
border-bottom: 1px solid #e5e5e5;
display: flex;
align-items: center;
}
.plan-details li:last-child {
border-bottom: none;
}
/* Styling the tick circle */
.tick-circle {
display: inline-block;
width: 20px;
height: 20px;
border: 2px solid #007aff; /* Blue border */
border-radius: 50%;
position: relative;
margin-right: 10px;
}
.tick-circle::before {
content: '';
position: absolute;
width: 6px;
height: 12px;
border: solid #007aff; /* Blue tick */
border-width: 0 2px 2px 0;
transform: rotate(45deg);
top: 2px;
left: 6px;
}
HTML Code
<div class="pricing-table">
<div class="plan">
<div class="plan-header">
<h2>Free</h2>
<p>$0 / forever</p>
<p>For learning and exploring the Contentful Platform.</p>
</div>
<button class="start-btn">Start for free</button>
<ul class="plan-details">
<li><span class="tick-circle"></span> 10 users</li>
<li><span class="tick-circle"></span> 2 roles</li>
<li><span class="tick-circle"></span> 2 locales</li>
<li><span class="tick-circle"></span> 100K API calls/month</li>
<li><span class="tick-circle"></span> 50 GB/month CDN bandwidth</li>
<li><span class="tick-circle"></span> Structured content</li>
<li><span class="tick-circle"></span> Developer tools</li>
<li><span class="tick-circle"></span> Editorial experience</li>
</ul>
</div>
</div>
