Skip to content

Html jsx #10

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
ricardodapaulo wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Html jsx #10

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
d787548
Enhance pricing UI with detailed styles and structure
ricardodapaulo Aug 4, 2026
8f9d3c0
Added a new card
ricardodapaulo Aug 4, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
49 changes: 49 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,29 @@
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Document basics -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pricing Plans — HTML version</title>

<!-- Google Fonts: Inter (weights 400–700)
preconnect = faster font download -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">

<!-- Component styles (see styles.css) -->
<link rel="stylesheet" href="styles.css">
</head>
<body>

<!-- Demo label — not part of the pricing UI -->
<p class="page-label"><strong>HTML version</strong> — static markup</p>

<!-- Pricing cards row -->
<div class="cards-container">

<!-- Card: Hobby (free tier) -->
<div class="card">
<div class="card-top">
<h3 class="card-title">Hobby</h3>
Expand All @@ -36,8 +48,11 @@ <h3 class="card-title">Hobby</h3>
</ul>
</div>
</div>
<!-- Secondary CTA -->
<button class="download-button secondary">Download</button>
</div>

<!-- Card: Pro (paid tier) -->
<div class="card">
<div class="card-top">
<h3 class="card-title">Pro</h3>
Expand Down Expand Up @@ -67,8 +82,42 @@ <h3 class="card-title">Pro</h3>
</ul>
</div>
</div>
<!-- Primary CTA -->
<button class="download-button primary">Get Pro</button>
</div>

<!-- Card: Enterprise (team tier) -->
<div class="card">
<div class="card-top">
<h3 class="card-title">Enterprise</h3>
<p class="card-price">
<span class="card-price-amount">Custom</span>
</p>
<div class="card-content">
<p class="includes-text">Everything in Pro, plus:</p>
<ul class="features-list">
<li>
<span class="checkmark">✓</span>
SSO and domain verification
</li>
<li>
<span class="checkmark">✓</span>
Centralized team billing
</li>
<li>
<span class="checkmark">✓</span>
Admin usage and spend controls
</li>
<li>
<span class="checkmark">✓</span>
Priority support and onboarding
</li>
</ul>
</div>
</div>
<!-- Secondary CTA -->
<button class="download-button secondary">Contact sales</button>
</div>
</div>
</body>
</html>
54 changes: 54 additions & 0 deletions styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,22 @@
/* ==========================================================================
Reset
Removes default browser spacing; box-sizing keeps padding inside width.
========================================================================== */

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}


/* ==========================================================================
Page canvas
Font: Inter (loaded in index.html)
Background: #f7f7f4 — warm off-white page fill
Layout: centered flex column, min full viewport height
========================================================================== */

body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
background-color: #f7f7f4;
Expand All @@ -14,6 +27,12 @@ body {
padding: 20px;
}


/* ==========================================================================
Cards container
Horizontal row of pricing cards; 24px gap between cards
========================================================================== */

.cards-container {
display: flex;
flex-direction: row;
Expand All @@ -23,6 +42,14 @@ body {
align-items: flex-start;
}


/* ==========================================================================
Pricing card
Fixed width 320px, min-height 380px
Background: #f2f1ed — slightly darker than page
Radius: 4px | Padding: 16px
========================================================================== */

.card {
display: flex;
flex-direction: column;
Expand All @@ -39,6 +66,13 @@ body {
flex-direction: column;
}


/* ==========================================================================
Card typography
Title: 22px / 28px line-height, color #26251e
Price: muted rgba(38, 37, 30, 0.5) — amount, period split for styling
========================================================================== */

.card-title {
font-size: 22px;
line-height: 28px;
Expand Down Expand Up @@ -75,6 +109,12 @@ body {
margin: 16px 0px;
}


/* ==========================================================================
Feature list
Unstyled list; checkmark + label per row, 8px row spacing
========================================================================== */

.features-list {
list-style: none;
padding: 0;
Expand All @@ -95,6 +135,14 @@ body {
font-weight: 400;
}


/* ==========================================================================
CTA buttons
Pill shape (999px radius), pinned to card bottom via margin-top: auto
Secondary: #e6e5e0 bg | Primary (.primary): #111 bg, white text
Hover/active states darken each variant
========================================================================== */

.download-button {
margin-top: auto;
width: fit-content;
Expand Down Expand Up @@ -130,6 +178,12 @@ body {
background-color: #333;
}


/* ==========================================================================
Demo label (index.html only)
Fixed badge at top center — identifies the HTML reference version
========================================================================== */

.page-label {
position: fixed;
top: 16px;
Expand Down