|
|
| Zeile 1: |
Zeile 1: |
| − | <section id="timeline">
| + | Zeitleiste |
| − | <h1>A Flexbox Timeline</h1>
| |
| − | <p class="leader">All cards must be the same height and width for space calculations on large screens.</p>
| |
| − | <div class="demo-card-wrapper">
| |
| − | <div class="demo-card demo-card--step1">
| |
| − | <div class="head">
| |
| − | <div class="number-box">
| |
| − | <span>01</span>
| |
| − | </div>
| |
| − | <h2><span class="small">Subtitle</span> Technology</h2>
| |
| − | </div>
| |
| − | <div class="body">
| |
| − | <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta reiciendis deserunt doloribus consequatur, laudantium odio dolorum laboriosam.</p>
| |
| − | >
| |
| − | </div>
| |
| − | </div>
| |
| − | | |
| − | <div class="demo-card demo-card--step2">
| |
| − | <div class="head">
| |
| − | <div class="number-box">
| |
| − | <span>02</span>
| |
| − | </div>
| |
| − | <h2><span class="small">Subtitle</span> Confidence</h2>
| |
| − | </div>
| |
| − | <div class="body">
| |
| − | <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta reiciendis deserunt doloribus consequatur, laudantium odio dolorum laboriosam.</p>
| |
| − | >
| |
| − | </div>
| |
| − | </div>
| |
| − | | |
| − | <div class="demo-card demo-card--step3">
| |
| − | <div class="head">
| |
| − | <div class="number-box">
| |
| − | <span>03</span>
| |
| − | </div>
| |
| − | <h2><span class="small">Subtitle</span> Adaptation</h2>
| |
| − | </div>
| |
| − | <div class="body">
| |
| − | <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta reiciendis deserunt doloribus consequatur, laudantium odio dolorum laboriosam.</p>
| |
| − | >
| |
| − | </div>
| |
| − | </div>
| |
| − | | |
| − | <div class="demo-card demo-card--step4">
| |
| − | <div class="head">
| |
| − | <div class="number-box">
| |
| − | <span>04</span>
| |
| − | </div>
| |
| − | <h2><span class="small">Subtitle</span> Consistency</h2>
| |
| − | </div>
| |
| − | <div class="body">
| |
| − | <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta reiciendis deserunt doloribus consequatur, laudantium odio dolorum laboriosam.</p>
| |
| − | >
| |
| − | </div>
| |
| − | </div>
| |
| − | | |
| − | <div class="demo-card demo-card--step5">
| |
| − | <div class="head">
| |
| − | <div class="number-box">
| |
| − | <span>05</span>
| |
| − | </div>
| |
| − | <h2><span class="small">Subtitle</span> Conversion</h2>
| |
| − | </div>
| |
| − | <div class="body">
| |
| − | <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta reiciendis deserunt doloribus consequatur, laudantium odio dolorum laboriosam.</p>
| |
| − | >
| |
| − | </div>
| |
| − | </div>
| |
| − |
| |
| − | </div>
| |
| − | </section>
| |
