Skip to content

Added notes and a card #8

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
skadlecek wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Added notes and a card #8

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
53 changes: 51 additions & 2 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,28 @@
<!DOCTYPE html>
<!-- Static pricing demo: Hobby, Pro, and Enterprise. Pair with styles.css for layout and visuals. -->
<html lang="en">
<head>
<!-- Document basics: UTF-8, mobile-friendly scaling, browser tab title. -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pricing Plans — HTML version</title>

<!-- Font loading: preconnect speeds up Google Fonts; stylesheet loads Inter (400–700). -->
<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">

<!-- Local styles: colors, spacing, card layout, buttons (see styles.css). -->
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- Top badge: labels this file as the plain-HTML variant (not the React/JSX demo). -->
<p class="page-label"><strong>HTML version</strong> — static markup</p>

<!-- Row wrapper: holds pricing cards side by side on wide screens. -->
<div class="cards-container">

<!-- Card 1 — Hobby: free tier, feature list, secondary CTA. -->
<div class="card">
<div class="card-top">
<h3 class="card-title">Hobby</h3>
Expand All @@ -36,12 +47,16 @@ <h3 class="card-title">Hobby</h3>
</ul>
</div>
</div>
<button class="download-button secondary">Download</button>
<!-- CTA: muted pill button (matches .download-button.secondary in CSS). -->
<button type="button" class="download-button secondary">Download</button>
</div>

<!-- Card 2 — Pro: paid tier with price + period, richer list, primary CTA. -->
<div class="card">
<div class="card-top">
<h3 class="card-title">Pro</h3>
<p class="card-price">
<!-- Amount + billing cadence are separate spans for styling (size/color). -->
<span class="card-price-amount">$20</span>
<span class="card-price-period">/mo.</span>
</p>
Expand All @@ -67,7 +82,41 @@ <h3 class="card-title">Pro</h3>
</ul>
</div>
</div>
<button class="download-button primary">Get Pro</button>
<!-- CTA: dark pill button (matches .download-button.primary in CSS). -->
<button type="button" class="download-button primary">Get Pro</button>
</div>

<!-- Card 3 — Enterprise: same layout as Hobby (panel + Includes + secondary CTA). -->
<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">Includes:</p>
<ul class="features-list">
<li>
<span class="checkmark">✓</span>
SSO and SCIM provisioning
</li>
<li>
<span class="checkmark">✓</span>
Org-wide admin and billing
</li>
<li>
<span class="checkmark">✓</span>
Priority support and SLA options
</li>
<li>
<span class="checkmark">✓</span>
Custom contracts and invoicing
</li>
</ul>
</div>
</div>
<!-- CTA: same muted pill as Hobby (.download-button.secondary). -->
<button type="button" class="download-button secondary">Contact sales</button>
</div>
</div>
</body>
Expand Down
27 changes: 26 additions & 1 deletion styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,16 @@
/*
* Pricing page (HTML static) — visual tokens and layout for index.html.
* Sections below follow page structure: reset → page shell → cards → type → lists → CTAs → label.
*/

/* Reset: consistent box model; strip default margins/padding on all elements. */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

/* Page shell: Inter stack, warm gray background, centered content, comfortable viewport padding. */
body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
background-color: #f7f7f4;
Expand All @@ -14,15 +21,17 @@ body {
padding: 20px;
}

/* Card row: horizontal flex, fixed gap; wraps on narrow viewports when three cards no longer fit. */
.cards-container {
display: flex;
flex-direction: row;
gap: 24px;
flex-wrap: nowrap;
flex-wrap: wrap;
justify-content: center;
align-items: flex-start;
}

/* Single plan card: fixed width, rounded panel, column stack; min-height keeps card bottoms aligned. */
.card {
display: flex;
flex-direction: column;
Expand All @@ -34,11 +43,13 @@ body {
flex-shrink: 0;
}

/* Upper card block: title, price, and feature list (button sits below in the column). */
.card-top {
display: flex;
flex-direction: column;
}

/* Plan name: largest heading on the card; dark text, light weight. */
.card-title {
font-size: 22px;
line-height: 28px;
Expand All @@ -47,39 +58,46 @@ body {
margin-bottom: 8px;
}

/* Price row: baseline-aligned so amount and “/mo.” sit on one visual line. */
.card-price {
font-size: 20px;
color: rgba(38, 37, 30, 0.5);
display: inline-flex;
align-items: baseline;
}

/* Main price figure (or “Free”): slightly larger than supporting text. */
.card-price-amount {
font-size: 22px;
font-weight: 400;
color: rgba(38, 37, 30, 0.5);
}

/* Billing suffix (e.g. /mo.): smaller type, same muted color family. */
.card-price-period {
font-size: 14px;
color: rgba(38, 37, 30, 0.5);
}

/* Wraps “Includes” line + bullet list; bottom margin separates content from the button. */
.card-content {
margin-bottom: 32px;
}

/* Section label above the feature list: muted, with vertical rhythm vs. title/price. */
.includes-text {
font-size: 16px;
color: rgba(38, 37, 30, 0.5);
margin: 16px 0px;
}

/* Feature bullets: no default bullets; spacing controlled per row below. */
.features-list {
list-style: none;
padding: 0;
}

/* Each feature: flex row so the checkmark and text align; dark body copy color. */
.features-list li {
display: flex;
align-items: center;
Expand All @@ -88,13 +106,15 @@ body {
color: #26251e;
}

/* Check glyph before each line: fixed gap to label text. */
.checkmark {
color: #26251e;
font-size: 14px;
margin-right: 10px;
font-weight: 400;
}

/* Base CTA: pill shape, neutral fill; margin-top:auto pins it to the card bottom in the flex column. */
.download-button {
margin-top: auto;
width: fit-content;
Expand All @@ -109,6 +129,7 @@ body {
transition: background-color 0.2s ease;
}

/* Hover/active: slightly darker neutral for feedback (Hobby / secondary). */
.download-button:hover {
background-color: #D8D6CE;
}
Expand All @@ -117,11 +138,13 @@ body {
background-color: #D8D6CE;
}

/* Pro CTA: inverted colors (dark fill, light text). */
.download-button.primary {
background-color: #111;
color: #fff;
}

/* Primary hover/active: lighten the black slightly. */
.download-button.primary:hover {
background-color: #333;
}
Expand All @@ -130,6 +153,7 @@ body {
background-color: #333;
}

/* Top “HTML version” chip: fixed to viewport top-center; subtle shadow reads as a floating label. */
.page-label {
position: fixed;
top: 16px;
Expand All @@ -143,6 +167,7 @@ body {
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

/* Emphasis inside the chip: darker text for the variant name. */
.page-label strong {
color: #333;
}