| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1"> |
| <title>5 Steps of Selling - Flashcard Training</title> |
| <style> |
| :root { |
| --brand-red: #E10600; |
| --text-dark: #222; |
| --text-light: #f5f5f5; |
| --bg-light: #fff; |
| --shadow: 0 4px 12px rgba(0,0,0,0.08); |
| --radius: 12px; |
| --spacing-xs: 8px; |
| --spacing-s: 16px; |
| --spacing-m: 24px; |
| --spacing-l: 32px; |
| --spacing-xl: 48px; |
| } |
| |
| * { |
| box-sizing: border-box; |
| margin: 0; |
| padding: 0; |
| } |
| |
| body { |
| font-family: 'DM Serif Text', serif; |
| background-color: var(--brand-red); |
| color: var(--text-light); |
| line-height: 1.5; |
| } |
| |
| .container { |
| max-width: 600px; |
| margin: 0 auto; |
| padding: 0 var(--spacing-s); |
| } |
| |
| .section { |
| padding: var(--spacing-l); |
| margin: var(--spacing-m) 0; |
| } |
| |
| .text-center { |
| text-align: center; |
| } |
| |
| .text-left { |
| text-align: left; |
| } |
| |
| .mb-xs { margin-bottom: var(--spacing-xs); } |
| .mb-s { margin-bottom: var(--spacing-s); } |
| .mb-m { margin-bottom: var(--spacing-m); } |
| .mb-l { margin-bottom: var(--spacing-l); } |
| |
| .btn { |
| display: block; |
| width: 100%; |
| padding: var(--spacing-m); |
| border: none; |
| border-radius: var(--radius); |
| font-size: 1.25rem; |
| font-weight: 600; |
| cursor: pointer; |
| transition: all 0.2s ease; |
| text-align: center; |
| text-decoration: none; |
| } |
| |
| .btn:focus { |
| outline: 2px solid var(--text-light); |
| outline-offset: 2px; |
| } |
| |
| .btn-primary { |
| background-color: var(--text-light); |
| color: var(--brand-red); |
| } |
| |
| .btn-primary:hover, .btn-primary:focus { |
| background-color: #e0e0e0; |
| transform: translateY(-2px); |
| } |
| |
| .btn-secondary { |
| background-color: var(--text-light); |
| color: var(--brand-red); |
| } |
| |
| .btn-secondary:hover, .btn-secondary:focus { |
| background-color: #e0e0e0; |
| transform: translateY(-2px); |
| } |
| |
| .grid { |
| display: grid; |
| grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); |
| gap: var(--spacing-s); |
| } |
| |
| .h1 { |
| font-size: 2rem; |
| line-height: 1.2; |
| font-weight: 400; |
| white-space: nowrap; |
| overflow: hidden; |
| text-overflow: ellipsis; |
| } |
| |
| .h2 { |
| font-size: 1.75rem; |
| line-height: 1.3; |
| font-weight: 400; |
| } |
| |
| .h3 { |
| font-size: 1.25rem; |
| font-weight: 400; |
| } |
| |
| .label { |
| font-size: 0.875rem; |
| font-weight: 500; |
| text-transform: uppercase; |
| letter-spacing: 1px; |
| margin-bottom: var(--spacing-xs); |
| } |
| |
| @media (min-width: 768px) { |
| .btn { |
| width: auto; |
| display: inline-block; |
| margin-right: var(--spacing-s); |
| margin-bottom: var(--spacing-s); |
| } |
| |
| .h1 { |
| font-size: 2.5rem; |
| } |
| |
| .btn { |
| font-weight: 500; |
| } |
| } |
| </style> |
| </head> |
| <body> |
| <main class="container"> |
| <header class="section text-center"> |
| <h1 class="h1 mb-s">5 Steps of Selling</h1> |
| <p class="mb-xs">an easy way to learn and memorize all steps</p> |
| </header> |
|
|
| <section class="section text-center"> |
| <p class="label">Learn it all</p> |
| |
| <a href="learn.html?mode=all" class="btn btn-primary" aria-label="Play all flashcards">Play</a> |
| </section> |
|
|
| <section class="section text-center"> |
| <p class="label">Learn step by step</p> |
| <div class="grid"> |
| |
| <a href="learn.html?step=1" class="btn btn-secondary" aria-label="Step 1 flashcards">Step 1</a> |
| <a href="learn.html?step=2" class="btn btn-secondary" aria-label="Step 2 flashcards">Step 2</a> |
| <a href="learn.html?step=3" class="btn btn-secondary" aria-label="Step 3 flashcards">Step 3</a> |
| <a href="learn.html?step=4" class="btn btn-secondary" aria-label="Step 4 flashcards">Step 4</a> |
| <a href="learn.html?step=5" class="btn btn-secondary" aria-label="Step 5 flashcards">Step 5</a> |
| </div> |
| </section> |
| </main> |
| </body> |
| </html> |
|
|
