This post is an application.
Pricing Plans
Basic
$10
Per Month
- 10GB HDD Space
- 5 Email Addresses
- 2 Subdomains
- 4 Databases
- Basic Support
Most Popular
Advanced
$35
Per Month
- 20GB HDD Space
- 10 Email Addresses
- 5 Subdomains
- 8 Databases
- Advanced Support
Professional
$55
Per Month
- 50GB HDD Space
- 20 Email Addresses
- 10 Subdomains
- 20 Databases
- Professional Support
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Landing Page</title>
<!-- Main File style -->
<link rel="stylesheet" href="/prcining.css" />
<!-- font-awesome -->
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"
/>
</head>
<body>
<!-- Start Pricing -->
<div class="pricing" id="pricing">
<div class="dots dots-up"></div>
<div class="dots dots-down"></div>
<h2 class="main-title">Pricing Plans</h2>
<div class="container">
<div class="box">
<div class="title">Basic</div>
<!-- <img src="" alt="" /> -->
<div class="price">
<span class="amount">$10</span>
<span class="time">Per Month</span>
</div>
<ul>
<li>10GB HDD Space</li>
<li>5 Email Addresses</li>
<li>2 Subdomains</li>
<li>4 Databases</li>
<li>Basic Support</li>
</ul>
<a href="#">Choose Plan</a>
</div>
<div class="box popular">
<div class="label">Most Popular</div>
<div class="title">Advanced</div>
<!-- <img src="" alt="" /> -->
<div class="price">
<span class="amount">$35</span>
<span class="time">Per Month</span>
</div>
<ul>
<li>20GB HDD Space</li>
<li>10 Email Addresses</li>
<li>5 Subdomains</li>
<li>8 Databases</li>
<li>Advanced Support</li>
</ul>
<a href="#">Choose Plan</a>
</div>
<div class="box">
<div class="title">Professional</div>
<img src="" alt="" />
<div class="price">
<span class="amount">$55</span>
<span class="time">Per Month</span>
</div>
<ul>
<li>50GB HDD Space</li>
<li>20 Email Addresses</li>
<li>10 Subdomains</li>
<li>20 Databases</li>
<li>Professional Support</li>
</ul>
<a href="#">Choose Plan</a>
</div>
</div>
</div>
<!-- End Pricing -->
</body>
</html>/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Manrope:[email protected]&display=swap');
/* Google Fonts */
/* Start Global Rules */
*, *::after,
*::before {
margin: 0;
padding: 0;
}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
:root {
--main-color:#fafafa;
--main-color-alt: #ffc1078f;
--main-transition: 0.3s;
--main-padding-top: 100px;
--main-padding-bottom: 100px;
--section-background: #00968870;
}
html {
scroll-behavior: smooth;
}
body {
font-family: "Manrope", sans-serif;
font-optical-sizing: auto;
font-weight: 600;
font-style: normal;
}
a {
text-decoration: none;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
.container {
padding-left: 15px;
padding-right: 15px;
margin-left: auto;
margin-right: auto;
}
/* Small */
@media (min-width: 768px) {
.container {
width: 750px;
}
}
/* Medium */
@media (min-width: 992px) {
.container {
width: 970px;
}
}
/* Large */
@media (min-width: 1200px) {
.container {
width: 1170px;
}
}
.main-title {
text-transform: uppercase;
margin: 0 auto 80px;
border: 2px solid black;
padding: 10px 20px;
font-size: 30px;
width: fit-content;
position: relative;
z-index: 1;
transition: var(--main-transition);
-webkit-transition: var(--main-transition);
-moz-transition: var(--main-transition);
-ms-transition: var(--main-transition);
-o-transition: var(--main-transition);
border-radius: 8px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
-ms-border-radius: 8px;
-o-border-radius: 8px;
}
.main-title::before,
.main-title::after {
content: "";
width: 12px;
height: 12px;
background-color: var(--main-color);
position: absolute;
border-radius: 50%;
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
}
.main-title::before {
left: -30px;
}
.main-title::after {
right: -30px;
}
.main-title:hover::before {
z-index: -1;
animation: left-move 0.5s linear forwards;
-webkit-animation: left-move 0.5s linear forwards;
}
.main-title:hover::after {
z-index: -1;
animation: right-move 0.5s linear forwards;
-webkit-animation: right-move 0.5s linear forwards;
}
.main-title:hover {
color: var(--main-color);
border: 2px solid #f02819b2;
transition-delay: 0.5s;
}
.dots {
background-image: url("https://codezillaye.com/wp-content/uploads/2024/06/dots.png");
height: 186px;
width: 204px;
background-repeat: no-repeat;
position: absolute;
}
.dots-up {
top: 200px;
right: 0;
}
.dots-down {
bottom: 200px;
left: 0;
}
/* End Global Rules */
/* Start Pricing */
.pricing {
padding-top: var(--main-padding-top);
padding-bottom: var(--main-padding-bottom);
position: relative;
background-color: var(--section-background);
}
.pricing .container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 30px;
}
.pricing .box {
position: relative;
box-shadow: 0 25px 30px 0 rgb(0 0 0 / 50%), 0 2px 4px 0 rgb(0 0 0 / 15%);
transition: var(--main-transition);
/* background:#797373; */
background:#f44336;
text-align: center;
z-index: 1;
-webkit-transition: var(--main-transition);
-moz-transition: var(--main-transition);
-ms-transition: var(--main-transition);
-o-transition: var(--main-transition);
}
.pricing .box::before,
.pricing .box::after {
content: "";
width: 0;
height: 50%;
background-color: var(--main-color-alt);
position: absolute;
z-index: -1;
transition: var(--main-transition);
-webkit-transition: var(--main-transition);
-moz-transition: var(--main-transition);
-ms-transition: var(--main-transition);
-o-transition: var(--main-transition);
}
.pricing .box::before {
left: 0;
top: 0;
}
.pricing .box::after {
right: 0;
bottom: 0;
}
.pricing .box:hover::before,
.pricing .box:hover::after {
width: 100%;
}
@media (min-width: 1200px) {
.pricing .box.popular {
top: -20px;
}
}
.pricing .box.popular .label {
position: absolute;
writing-mode: vertical-rl;
background-color: var(--main-color);
color: #1818189d;
font-weight: bold;
padding: 10px 10px 35px 10px;
font-size: 18px;
right: 20px;
width: 40px;
-webkit-writing-mode: vertical-rl;
-ms-writing-mode: vertical-rl;
}
.pricing .box.popular .label::before {
content: "";
position: absolute;
bottom: 0;
right: 0;
border-style: solid;
border-color: transparent transparent #d0d884b8;
border-width: 20px;
}
.pricing .box .title {
font-weight: bold;
margin: 30px 0;
font-size: 25px;
letter-spacing: -1px;
}
.pricing .box img {
width: 80px;
margin-bottom: 30px;
}
.pricing .box .price {
margin-bottom: 20px;
}
.pricing .box .amount {
display: block;
font-size: 60px;
font-weight: bold;
margin-bottom: 5px;
color: var(--main-color);
}
.pricing .box .time {
color: #2196f3;
}
.pricing .box ul {
text-align: left;
}
.pricing .box ul li {
padding: 20px;
border-top: 1px solid #2196f3;
}
.pricing .box ul li::before {
font-family: "Font Awesome 5 Free";
content: "\f00c";
margin-right: 10px;
font-weight: 900;
color: var(--main-color);
}
.pricing .box a {
display: block;
width: fit-content;
border: 2px solid var(--main-color);
color: var(--main-color);
margin: 30px auto 40px;
padding: 15px 20px;
border-radius: 6px;
font-weight: bold;
transition: var(--main-transition);
}
.pricing .box a:hover {
background-color: var(--main-color-alt);
border-color: var(--main-color-alt);
color: rgb(226, 14, 14);
}
/* End Pricing */