epilogue/eplg-cloud
5
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: fixes: fix

Browse source
This commit is contained in:
obvTiger 2025-04-03 16:14:33 +02:00
parent 985e49da80
commit d3d4f61d19
1 changed files with 86 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

89
index.html
View file

@ -220,9 +220,13 @@
.pricing-grid { .pricing-grid {
display: grid; display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); grid-template-columns: repeat(3, 1fr);
gap: 2.5rem; gap: 2.5rem;
} }
.pricing-grid > div:nth-child(4) {
grid-column: 1 / -1;
}
.pricing-card { .pricing-card {
background-color: var(--dark-surface); background-color: var(--dark-surface);
@ -233,6 +237,7 @@
transition: transform 0.3s ease, border-color 0.3s ease; transition: transform 0.3s ease, border-color 0.3s ease;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
min-height: 600px;
} }
.pricing-card:hover { .pricing-card:hover {
@ -263,12 +268,21 @@
font-size: 1.5rem; font-size: 1.5rem;
font-weight: 600; font-weight: 600;
margin-bottom: 1rem; margin-bottom: 1rem;
min-height: 4rem;
display: flex;
align-items: center;
justify-content: center;
} }
.price { .price {
font-size: 3rem; font-size: 3rem;
font-weight: 700; font-weight: 700;
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
min-height: 120px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
} }
.price span { .price span {
@ -297,6 +311,47 @@
margin-right: 0.5rem; margin-right: 0.5rem;
font-weight: bold; font-weight: bold;
} }
.pricing-grid > div:last-child {
display: flex;
flex-direction: row;
align-items: center;
gap: 2rem;
min-height: auto;
padding: 2rem;
position: relative;
}
.pricing-grid > div:last-child h3 {
position: absolute;
top: 2rem;
left: 2rem;
width: 200px;
margin: 0;
text-align: center;
}
.pricing-grid > div:last-child .price {
min-height: auto;
margin: 0;
flex: 0 0 200px;
margin-top: 4rem;
}
.pricing-grid > div:last-child .pricing-features {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 0.75rem;
margin: 0;
flex: 1;
margin-top: 4rem;
}
.pricing-grid > div:last-child .button {
flex: 0 0 auto;
margin: 0;
margin-top: 4rem;
}
footer { footer {
padding: 4rem 0; padding: 4rem 0;
@ -402,6 +457,34 @@
grid-template-columns: 1fr; grid-template-columns: 1fr;
gap: 2rem; gap: 2rem;
} }
.pricing-grid {
grid-template-columns: 1fr;
}
.pricing-grid > div:last-child {
flex-direction: column;
min-height: 600px;
}
.pricing-grid > div:last-child h3 {
position: static;
margin-bottom: 1rem;
}
.pricing-grid > div:last-child .price,
.pricing-grid > div:last-child .pricing-features,
.pricing-grid > div:last-child .button {
margin-top: 0;
}
.pricing-grid > div:last-child .pricing-features {
grid-template-columns: 1fr;
}
.about-stats {
grid-template-columns: 1fr;
}
} }
</style> </style>
</head> </head>
@ -485,7 +568,7 @@
<li>Gameservers for schools and non-profits</li> <li>Gameservers for schools and non-profits</li>
<li>Cloud Storage for non-profits</li> <li>Cloud Storage for non-profits</li>
<li>Web hosting for schools and non-profits</li> <li>Web hosting for schools and non-profits</li>
<li>28/7 Support</li> <li>18/7 Support</li>
<li>Unlimited bandwidth</li> <li>Unlimited bandwidth</li>
<li>Web analytics dashboard</li> <li>Web analytics dashboard</li>
<li>Custom IPv4 addresses</li> <li>Custom IPv4 addresses</li>
@ -520,7 +603,7 @@
</div> </div>
<div class="pricing-card"> <div class="pricing-card">
<h3>Enterprise</h3> <h3>Enterprise</h3>
<div class="price">$650<span>/month</span></div> <div class="price"><span>starting at</span><br>$650<span>/month</span></div>
<ul class="pricing-features"> <ul class="pricing-features">
<li>16 CPU cores 5Ghz</li> <li>16 CPU cores 5Ghz</li>
<li>64GB RAM</li> <li>64GB RAM</li>