251 lines
8.7 KiB
HTML
251 lines
8.7 KiB
HTML
|
<h2>Tab</h2>
|
||
|
|
|
||
|
|
<div class="flex two">
|
||
|
|
<div>
|
||
|
|
<div class="tabs three">
|
||
|
|
<input id="tab-1" type="radio" name="tabgroupB" checked />
|
||
|
|
<label class="pseudo button toggle" for="tab-1">Forest</label>
|
||
|
|
<input id="tab-2" type="radio" name="tabgroupB" />
|
||
|
|
<label class="pseudo button toggle" for="tab-2">Lake</label>
|
||
|
|
<input id="tab-3" type="radio" name="tabgroupB" />
|
||
|
|
<label class="pseudo button toggle" for="tab-3">Balloon</label>
|
||
|
|
<div class="row">
|
||
|
|
<div><img src="img/forest.jpg" /></div>
|
||
|
|
|
||
|
|
<div><img src="img/lake.jpg" /></div>
|
||
|
|
|
||
|
|
<div><img src="img/balloon.jpg" /></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div>
|
||
|
|
<div class="tabs three" style="text-align: center;">
|
||
|
|
<input id="tabC-1" type="radio" name="tabgroupC" checked />
|
||
|
|
<label class="pseudo button toggle" for="tabC-1">1</label> /
|
||
|
|
<input id="tabC-2" type="radio" name="tabgroupC" />
|
||
|
|
<label class="pseudo button toggle" for="tabC-2">2</label> /
|
||
|
|
<input id="tabC-3" type="radio" name="tabgroupC" />
|
||
|
|
<label class="pseudo button toggle" for="tabC-3">3</label>
|
||
|
|
<div class="row">
|
||
|
|
<div>
|
||
|
|
<div class="card" style="margin: 0 20px;">
|
||
|
|
<header><h3>Super important notice!</h3></header>
|
||
|
|
<p>
|
||
|
|
Thank you for registering! By doing so you agree to the
|
||
|
|
<a href="#">Terms and conditions</a>
|
||
|
|
</p>
|
||
|
|
<footer><label class="button" for="tabC-2">Agree</label></footer>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div>
|
||
|
|
<div class="card" style="margin: 0 20px;">
|
||
|
|
<header><h3>Your basic data</h3></header>
|
||
|
|
<section><input type="text" placeholder="Full Name" /></section>
|
||
|
|
<section>
|
||
|
|
<div class="select">
|
||
|
|
<select>
|
||
|
|
<option>Where did you find us?</option>
|
||
|
|
<option>Facebook</option>
|
||
|
|
<option>Twitter</option>
|
||
|
|
<option>Linkedin</option>
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
<footer>
|
||
|
|
<label class="button" for="tabC-3">Next</label>
|
||
|
|
<label class="button dangerous" for="tabC-1">Back</label>
|
||
|
|
</footer>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div>
|
||
|
|
<div class="card" style="margin: 0 20px;">
|
||
|
|
<header><h3>Create account</h3></header>
|
||
|
|
<section><input type="email" placeholder="Email" /></section>
|
||
|
|
<section><input type="password" placeholder="Password" /></section>
|
||
|
|
<footer>
|
||
|
|
<button class="success">Finish!</button>
|
||
|
|
<label class="button dangerous" for="tabC-2">Back</label>
|
||
|
|
</footer>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div>
|
||
|
|
<div class="tabs two">
|
||
|
|
<input id="tabA-1" type="radio" name="tabgroupA" checked />
|
||
|
|
<label class="button toggle" for="tabA-1">Tab 1</label>
|
||
|
|
<input id="tabA-2" type="radio" name="tabgroupA" />
|
||
|
|
<label class="button toggle" for="tabA-2">Tab 2</label>
|
||
|
|
<div class="row">
|
||
|
|
<div class="tab">
|
||
|
|
<div>
|
||
|
|
<h2>This is the first tab</h2>
|
||
|
|
<p>
|
||
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
|
||
|
|
eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="tab">
|
||
|
|
<div>
|
||
|
|
<h2>This is the second tab</h2>
|
||
|
|
<p>
|
||
|
|
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
|
||
|
|
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
|
||
|
|
reprehenderit in voluptate velit esse cillum dolore eu fugiat
|
||
|
|
nulla pariatur.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div>
|
||
|
|
<div class="tabs four">
|
||
|
|
<input id="tabD-1" type="radio" name="tabgroupD" checked />
|
||
|
|
<label class="pseudo button toggle" for="tabD-1">•</label>
|
||
|
|
<input id="tabD-2" type="radio" name="tabgroupD" />
|
||
|
|
<label class="pseudo button toggle" for="tabD-2">•</label>
|
||
|
|
<input id="tabD-3" type="radio" name="tabgroupD" />
|
||
|
|
<label class="pseudo button toggle" for="tabD-3">•</label>
|
||
|
|
<input id="tabD-4" type="radio" name="tabgroupD" />
|
||
|
|
<label class="pseudo button toggle" for="tabD-4">•</label>
|
||
|
|
<div class="row">
|
||
|
|
<div class="tab">
|
||
|
|
<div>
|
||
|
|
<h2>This is the first tab</h2>
|
||
|
|
<p>
|
||
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
|
||
|
|
eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="tab">
|
||
|
|
<div>
|
||
|
|
<h2>This is the second tab</h2>
|
||
|
|
<p>
|
||
|
|
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
|
||
|
|
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
|
||
|
|
reprehenderit in voluptate velit esse cillum dolore eu fugiat
|
||
|
|
nulla pariatur.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="tab">
|
||
|
|
<div>
|
||
|
|
<h2>This is the third tab</h2>
|
||
|
|
<p>
|
||
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
|
||
|
|
eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="tab">
|
||
|
|
<div>
|
||
|
|
<h2>This is the fourth tab</h2>
|
||
|
|
<p>
|
||
|
|
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
|
||
|
|
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
|
||
|
|
reprehenderit in voluptate velit esse cillum dolore eu fugiat
|
||
|
|
nulla pariatur.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div>
|
||
|
|
<div class="tabs six">
|
||
|
|
<input id="tabE-1" type="radio" name="tabgroupE" checked />
|
||
|
|
<label class="pseudo button toggle" for="tabE-1">•</label>
|
||
|
|
<input id="tabE-2" type="radio" name="tabgroupE" />
|
||
|
|
<label class="pseudo button toggle" for="tabE-2">•</label>
|
||
|
|
<input id="tabE-3" type="radio" name="tabgroupE" />
|
||
|
|
<label class="pseudo button toggle" for="tabE-3">•</label>
|
||
|
|
<input id="tabE-4" type="radio" name="tabgroupE" />
|
||
|
|
<label class="pseudo button toggle" for="tabE-4">•</label>
|
||
|
|
<input id="tabE-5" type="radio" name="tabgroupE" />
|
||
|
|
<label class="pseudo button toggle" for="tabE-5">•</label>
|
||
|
|
<input id="tabE-6" type="radio" name="tabgroupE" />
|
||
|
|
<label class="pseudo button toggle" for="tabE-6">•</label>
|
||
|
|
<div class="row">
|
||
|
|
<div class="tab">
|
||
|
|
<div>
|
||
|
|
<h2>This is the first tab</h2>
|
||
|
|
<p>
|
||
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
|
||
|
|
eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="tab">
|
||
|
|
<div>
|
||
|
|
<h2>This is the second tab</h2>
|
||
|
|
<p>
|
||
|
|
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
|
||
|
|
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
|
||
|
|
reprehenderit in voluptate velit esse cillum dolore eu fugiat
|
||
|
|
nulla pariatur.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="tab">
|
||
|
|
<div>
|
||
|
|
<h2>This is the third tab</h2>
|
||
|
|
<p>
|
||
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
|
||
|
|
eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="tab">
|
||
|
|
<div>
|
||
|
|
<h2>This is the fourth tab</h2>
|
||
|
|
<p>
|
||
|
|
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
|
||
|
|
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
|
||
|
|
reprehenderit in voluptate velit esse cillum dolore eu fugiat
|
||
|
|
nulla pariatur.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="tab">
|
||
|
|
<div>
|
||
|
|
<h2>This is the fifth tab</h2>
|
||
|
|
<p>
|
||
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
|
||
|
|
eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="tab">
|
||
|
|
<div>
|
||
|
|
<h2>This is the sixth tab</h2>
|
||
|
|
<p>
|
||
|
|
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
|
||
|
|
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
|
||
|
|
reprehenderit in voluptate velit esse cillum dolore eu fugiat
|
||
|
|
nulla pariatur.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|