diff --git a/index.html b/index.html index 689e80a..530697f 100644 --- a/index.html +++ b/index.html @@ -220,9 +220,13 @@ .pricing-grid { display: grid; - grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + grid-template-columns: repeat(3, 1fr); gap: 2.5rem; } + + .pricing-grid > div:nth-child(4) { + grid-column: 1 / -1; + } .pricing-card { background-color: var(--dark-surface); @@ -233,6 +237,7 @@ transition: transform 0.3s ease, border-color 0.3s ease; display: flex; flex-direction: column; + min-height: 600px; } .pricing-card:hover { @@ -263,12 +268,21 @@ font-size: 1.5rem; font-weight: 600; margin-bottom: 1rem; + min-height: 4rem; + display: flex; + align-items: center; + justify-content: center; } .price { font-size: 3rem; font-weight: 700; margin-bottom: 1.5rem; + min-height: 120px; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; } .price span { @@ -297,6 +311,47 @@ margin-right: 0.5rem; 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 { padding: 4rem 0; @@ -402,6 +457,34 @@ grid-template-columns: 1fr; 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; + } } @@ -485,7 +568,7 @@
  • Gameservers for schools and non-profits
  • Cloud Storage for non-profits
  • Web hosting for schools and non-profits
  • -
  • 28/7 Support
  • +
  • 18/7 Support
  • Unlimited bandwidth
  • Web analytics dashboard
  • Custom IPv4 addresses
  • @@ -520,7 +603,7 @@

    Enterprise

    -
    $650/month
    +
    starting at
    $650/month