mirror of
https://github.com/Karaka-Management/cssOMS.git
synced 2026-01-11 19:18:40 +00:00
Make tests part of the repos
This commit is contained in:
parent
f2d7094c84
commit
c2d215c36a
580
tests/StandardElements.htm
Normal file
580
tests/StandardElements.htm
Normal file
|
|
@ -0,0 +1,580 @@
|
|||
<html>
|
||||
<head>
|
||||
<title>Style Test</title>
|
||||
<link rel="stylesheet" type="text/css" href="/Resources/fontawesome/css/font-awesome.min.css">
|
||||
<link rel="stylesheet" type="text/css" href="/cssOMS/styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<div style="width: 900px; padding: 20px; border: 1px solid #ff0000;" class="center">
|
||||
<section class="box center">This is some test text.</section>
|
||||
<section class="box center">
|
||||
<article>
|
||||
<p><span class="tooltip">Lorem<i>My Tooltip asd a sd <br>asdfsdf adf asd</i></span> ipsum dolor sit amet,
|
||||
consectetur adipiscing elit. Duis posuere, nulla eu condimentum eleifend, nulla magna viverra risus, ut
|
||||
faucibus libero libero nec est. Nunc quis rhoncus est, ac sodales lorem. Suspendisse convallis, massa eu
|
||||
<a href="#">volutpat</a> posuere, justo dolor porta dui, a ullamcorper ex ipsum eget arcu. Cras quis
|
||||
ante placerat, tempus
|
||||
orci vitae, semper nunc. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere
|
||||
cubilia
|
||||
Curae; Duis at sodales sapien. Morbi dolor risus, finibus ut ipsum non, pellentesque varius ex. Etiam
|
||||
pretium tempus diam at eleifend. Quisque a tortor et nisi commodo pretium ac at erat. Nam non iaculis
|
||||
ipsum,
|
||||
ultrices tempus nisl. Pellentesque ornare tellus vehicula sapien fringilla cursus. Duis sed tellus
|
||||
sagittis
|
||||
elit accumsan placerat et nec ex. In sit amet blandit nunc, a pulvinar nunc. Phasellus vulputate
|
||||
facilisis
|
||||
lorem eget aliquet. Curabitur odio ante, lobortis vitae est at, consequat posuere elit.</p>
|
||||
|
||||
<p><span class="tooltip">Lorem<i>My Tooltip asd a sd asdfsdf adf asd</i></span> sed nulla et ante
|
||||
consectetur
|
||||
dictum. Nunc molestie ligula eget felis tincidunt suscipit. Fusce scelerisque diam lectus, non faucibus
|
||||
ligula sagittis eu. Sed id porttitor purus. Donec in dolor scelerisque, suscipit metus in, molestie sem.
|
||||
Nulla facilisi. Nunc eu lobortis tellus.</p>
|
||||
<blockquote>This is a blockquote</blockquote>
|
||||
</article>
|
||||
</section>
|
||||
<section class="box-container center">
|
||||
<button>Test Button</button>
|
||||
<button><i class="fa fa-lightbulb-o"></i> Test Button</button>
|
||||
<button class="red">Test Button</button>
|
||||
<button class="red"><i class="fa fa-lightbulb-o"></i> Test Button</button>
|
||||
<button class="green">Test Button</button>
|
||||
<button class="green"><i class="fa fa-lightbulb-o"></i> Test Button</button>
|
||||
<button class="blue">Test Button</button>
|
||||
<button class="blue"><i class="fa fa-lightbulb-o"></i> Test Button</button>
|
||||
</section>
|
||||
<section class="box-container">
|
||||
<ul class="btns">
|
||||
<li><a href="">One</a>
|
||||
<li><a href="" class="active">Two</a>
|
||||
<li><a href="">Three</a>
|
||||
<li><a href="">Four</a>
|
||||
</ul>
|
||||
</section>
|
||||
<section class="box-container center">
|
||||
<span class="tag green">Test Tag</span>
|
||||
<span class="tag red">Test Tag</span>
|
||||
<span class="tag blue">Test Tag</span>
|
||||
<span class="tag orange">Test Tag</span>
|
||||
<span class="tag lightblue">Test Tag</span>
|
||||
<span class="tag yellow">Test Tag</span>
|
||||
<span class="tag purple">Test Tag</span>
|
||||
<span class="tag pink">Test Tag</span>
|
||||
<span class="tag grey">Test Tag</span>
|
||||
<span class="tag darkred">Test Tag</span>
|
||||
<span class="tag darkgreen">Test Tag</span>
|
||||
<span class="tag darkblue">Test Tag</span>
|
||||
</section>
|
||||
<section class=" w-100 floatLeft">
|
||||
<section class="inner center"> </section>
|
||||
</section>
|
||||
<section class=" w-50 floatLeft">
|
||||
<section class="inner center"> </section>
|
||||
</section>
|
||||
<section class=" w-50 floatLeft">
|
||||
<section class="inner center"> </section>
|
||||
</section>
|
||||
<section class=" w-33 floatLeft">
|
||||
<section class="inner center"> </section>
|
||||
</section>
|
||||
<section class=" w-33 floatLeft">
|
||||
<section class="inner center"> </section>
|
||||
</section>
|
||||
<section class=" w-33 floatLeft">
|
||||
<section class="inner center"> </section>
|
||||
</section>
|
||||
<section class=" w-25 floatLeft">
|
||||
<section class="inner center"> </section>
|
||||
</section>
|
||||
<section class=" w-25 floatLeft">
|
||||
<section class="inner center"> </section>
|
||||
</section>
|
||||
<section class=" w-25 floatLeft">
|
||||
<section class="inner center"> </section>
|
||||
</section>
|
||||
<section class=" w-25 floatLeft">
|
||||
<section class="inner center"> </section>
|
||||
</section>
|
||||
<section class=" w-75 floatLeft">
|
||||
<section class="inner center"> </section>
|
||||
</section>
|
||||
<section class=" w-25 floatLeft">
|
||||
<section class="inner center"> </section>
|
||||
</section>
|
||||
<section class=" w-66 floatLeft">
|
||||
<section class="inner center"> </section>
|
||||
</section>
|
||||
<section class=" w-33 floatLeft">
|
||||
<section class="inner center"> </section>
|
||||
</section>
|
||||
<section class=" w-50 floatLeft">
|
||||
<section class="inner center"> </section>
|
||||
</section>
|
||||
<section class=" w-25 floatLeft">
|
||||
<section class="inner center"> </section>
|
||||
</section>
|
||||
<section class=" w-25 floatLeft">
|
||||
<section class="inner center"> </section>
|
||||
</section>
|
||||
<div class="clear"></div>
|
||||
<section class="center">
|
||||
<i class="fa fa-lg infoIcon fa-envelope">
|
||||
<span class="badge">777</span>
|
||||
</i>
|
||||
<i class="fa fa-lg infoIcon fa-bolt">
|
||||
<span class="badge">5</span>
|
||||
</i>
|
||||
<i class="fa fa-lg infoIcon fa-comment">
|
||||
<span class="badge">999</span>
|
||||
</i>
|
||||
<i class="fa fa-lg infoIcon fa-lightbulb-o">
|
||||
<span class="badge">123</span>
|
||||
</i>
|
||||
<i class="fa fa-lg infoIcon fa-calendar">
|
||||
<span class="badge">33</span>
|
||||
</i>
|
||||
</section>
|
||||
<section class="box">
|
||||
<h1>This is H1</h1>
|
||||
|
||||
<h2>This is H2</h2>
|
||||
</section>
|
||||
<section class="box w-100">
|
||||
<section class="inner center">
|
||||
<form>
|
||||
<table class="layout">
|
||||
<tr>
|
||||
<td colspan="2"><label>Placeholder</label></td>
|
||||
<tr>
|
||||
<td colspan="2"><input type="text" placeholder=" User">
|
||||
<tr>
|
||||
<td colspan="2"><label>Password</label></td>
|
||||
<tr>
|
||||
<td><input type="password" pattern="^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[$@$!%*?&])[A-Za-z\d$@$!%*?&]{8,}" placeholder=" Pa55w0rd?">
|
||||
<td>
|
||||
<button>Add</button>
|
||||
<tr>
|
||||
<td colspan="2">
|
||||
<table class="list">
|
||||
<tr>
|
||||
<td><i class="btn fa fa-times warning"></i><i class="btn fa fa-chevron-up"></i><i
|
||||
class="btn fa fa-chevron-down"></i></td>
|
||||
<td>Value to change</td>
|
||||
<td>Value to change2</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><i class="btn fa fa-times warning"></i><i class="btn fa fa-chevron-up"></i><i
|
||||
class="btn fa fa-chevron-down"></i></td>
|
||||
<td>Value to change</td>
|
||||
<td>Value to change2</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><i class="btn fa fa-times warning"></i><i class="btn fa fa-chevron-up"></i><i
|
||||
class="btn fa fa-chevron-down"></i></td>
|
||||
<td>Value to change</td>
|
||||
<td>Value to change2</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="2"><label>Datalist</label></td>
|
||||
<tr>
|
||||
<td colspan="2"><input list="test" type="text">
|
||||
<datalist id="test">
|
||||
<option>Chrome</option>
|
||||
<option>IE</option>
|
||||
<option>Opera</option>
|
||||
<option>Safari</option>
|
||||
<option>Firefox</option>
|
||||
</datalist>
|
||||
</td>
|
||||
<tr>
|
||||
<tr>
|
||||
<td colspan="2"><label>Special</label></td>
|
||||
<tr>
|
||||
<td colspan="2"><span class="input"><button><i class="fa fa-pencil"></i></button><input type="text"></span></td>
|
||||
|
||||
<tr>
|
||||
<td colspan="2"><label>Number</label></td>
|
||||
<tr>
|
||||
<td colspan="2"><input type="number" step="any" min="0"></td>
|
||||
<tr>
|
||||
<td><label>Label1</label></td>
|
||||
<td><label>Label2</label>
|
||||
<tr>
|
||||
<td><input type="text"></td>
|
||||
<td><input type="text" pattern="[a-zA-Z]" required>
|
||||
<tr>
|
||||
<td colspan="2"><label>Localtime</label></td>
|
||||
<tr>
|
||||
<td colspan="2"><input type="datetime-local">
|
||||
<tr>
|
||||
<td><label>Label1</label></td>
|
||||
<td><label>Label2</label>
|
||||
<tr>
|
||||
<td><input type="datetime-local"></td>
|
||||
<td><input type="datetime-local">
|
||||
<tr>
|
||||
<td><label>Checkbox</label></td>
|
||||
<td><label>Radio</label></td>
|
||||
<tr>
|
||||
<td><span class="check"><input type="checkbox">Check</span>
|
||||
<td><span class="radio"><input type="radio" name="test">Radio</span>
|
||||
<tr>
|
||||
<td><span class="check"><input type="checkbox">Check</span>
|
||||
<td><span class="radio"><input type="radio" name="test">Radio</span>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td><span class="radio"><input type="radio" name="test">Radio</span>
|
||||
<tr>
|
||||
<td><label>Option</label></td>
|
||||
<tr>
|
||||
<td colspan="2"><select>
|
||||
<option>Option1</option>
|
||||
<option>Option2</option>
|
||||
<option>Option3</option>
|
||||
</select>
|
||||
<tr>
|
||||
<td><label>Label1</label></td>
|
||||
<td><label>Label2</label>
|
||||
<tr>
|
||||
<td><select>
|
||||
<option>Option1</option>
|
||||
<option>Option2</option>
|
||||
<option>Option3</option>
|
||||
</select></td>
|
||||
<td>
|
||||
<select>
|
||||
<option>Option1</option>
|
||||
<option>Option2</option>
|
||||
<option>Option3</option>
|
||||
</select>
|
||||
<tr>
|
||||
<td colspan="2"><label>Textarea</label></td>
|
||||
<tr>
|
||||
<td colspan="2"><textarea></textarea>
|
||||
<tr>
|
||||
<td colspan="2"><input type="submit" value="Submit"> <input type="submit" value="Cancel">
|
||||
</table>
|
||||
</form>
|
||||
</section>
|
||||
</section>
|
||||
<section class="wf-100">
|
||||
<ul class="nav-top">
|
||||
<li><a>About</a></li>
|
||||
<li>
|
||||
<a>Portfolio</a>
|
||||
<ul>
|
||||
<li><a>Web Design</a></li>
|
||||
<li><a>Web Development</a></li>
|
||||
<li><a>Illustrations</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a>Blog</a></li>
|
||||
<li><a>Contact</a></li>
|
||||
</ul>
|
||||
</section>
|
||||
<section class="box-container w-100">
|
||||
<table class="table">
|
||||
<caption>Table Title</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<td>Col1 Title</td>
|
||||
<td>Col2 Title</td>
|
||||
<td>Col3 Title</td>
|
||||
<td>Col4 Title</td>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Col1</td>
|
||||
<td>Col2</td>
|
||||
<td>Col3</td>
|
||||
<td>Col4</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Col1</td>
|
||||
<td>Col2</td>
|
||||
<td>Col3</td>
|
||||
<td>Col4</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Col1</td>
|
||||
<td>Col2</td>
|
||||
<td>Col3</td>
|
||||
<td>Col4</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Col1</td>
|
||||
<td>Col2</td>
|
||||
<td>Col3</td>
|
||||
<td>Col4</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<td colspan="4">
|
||||
<label>Results: 4</label>
|
||||
<select>
|
||||
<option>25</option>
|
||||
<option>50</option>
|
||||
<option>100</option>
|
||||
<option>500</option>
|
||||
</select>
|
||||
<ul class="pagination">
|
||||
<li><a href="#" class="active">1</a></li>
|
||||
<li><a href="#">2</a></li>
|
||||
<li><a href="#">3</a></li>
|
||||
<li><a href="#">4</a></li>
|
||||
<li>...</li>
|
||||
<li><a href="#">20</a></li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
</section>
|
||||
<section class="box-container w-100">
|
||||
<div class="tabular">
|
||||
<ul class="tab-links">
|
||||
<li><label for="c-tab-1">TAAAB</label></li>
|
||||
<li class="active"><label for="c-tab-2">TAAAB</label></li>
|
||||
</ul>
|
||||
<div class="tab-content">
|
||||
<input type="radio" id="c-tab-1" name="tabular-1" checked>
|
||||
<div class="tab">
|
||||
Test content
|
||||
</div>
|
||||
<input type="radio" id="c-tab-2" name="tabular-1">
|
||||
<div class="tab tab-2">
|
||||
<p>Test content 2</p><p>asdf</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="box-container wf-100">
|
||||
<div class="tabular-2">
|
||||
<ul class="tab-links">
|
||||
<li><label for="c-tab2-1">TAAAB</label></li>
|
||||
<li class="active"><label for="c-tab2-2">TAAAB</label></li>
|
||||
</ul>
|
||||
<div class="tab-content">
|
||||
<input type="radio" id="c-tab2-1" name="tabular-2" checked>
|
||||
<div class="tab">
|
||||
Test content
|
||||
</div>
|
||||
<input type="radio" id="c-tab2-2" name="tabular-2">
|
||||
<div class="tab tab-2">
|
||||
<p>Test content 2</p><p>asdf</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="box-container ac-container">
|
||||
<input type="checkbox" name="About us" id="ac-1">
|
||||
<label for="ac-1">About us</label>
|
||||
<section>
|
||||
<p>Well, the way they make shows is, they make one show. That show's called a pilot. Then they show
|
||||
that show to the people who make shows, and on the strength of that one show they decide if
|
||||
they're going to make more shows.</p>
|
||||
</section>
|
||||
<input type="checkbox" name="About us" id="ac-2">
|
||||
<label for="ac-2">How we work</label>
|
||||
<section>
|
||||
<p>Like you, I used to think the world was this great place where everybody lived by the same
|
||||
standards I did, then some kid with a nail showed me I was living in his world, a world where
|
||||
chaos rules not order, a world where righteousness is not rewarded. That's Cesar's world, and if
|
||||
you're not willing to play by his rules, then you're gonna have to pay the price. </p>
|
||||
</section>
|
||||
<input type="checkbox" name="About us" id="ac-3" checked>
|
||||
<label for="ac-3">References</label>
|
||||
<section>
|
||||
<p>You think water moves fast? You should see ice. It moves like it has a mind. Like it knows it
|
||||
killed the world once and got a taste for murder. After the avalanche, it took us a week to
|
||||
climb out. Now, I don't know exactly when we turned on each other, but I know that seven of us
|
||||
survived the slide... and only five made it out. Now we took an oath, that I'm breaking now. We
|
||||
said we'd say it was the snow that killed the other two, but it wasn't. Nature is lethal but it
|
||||
doesn't hold a candle to man. </p>
|
||||
|
||||
<p>You think water moves fast? You should see ice. It moves like it has a mind. Like it knows it
|
||||
killed the world once and got a taste for murder. After the avalanche, it took us a week to
|
||||
climb out. Now, I don't know exactly when we turned on each other, but I know that seven of us
|
||||
survived the slide... and only five made it out. Now we took an oath, that I'm breaking now. We
|
||||
said we'd say it was the snow that killed the other two, but it wasn't. Nature is lethal but it
|
||||
doesn't hold a candle to man. </p>
|
||||
</section>
|
||||
<input type="checkbox" name="About us" id="ac-4">
|
||||
<label for="ac-4">Contact us</label>
|
||||
<section>
|
||||
<p>You see? It's curious. Ted did figure it out - time travel. And when we get back, we gonna tell
|
||||
everyone. How it's possible, how it's done, what the dangers are. But then why fifty years in
|
||||
the future when the spacecraft encounters a black hole does the computer call it an 'unknown
|
||||
entry event'? Why don't they know? If they don't know, that means we never told anyone. And if
|
||||
we never told anyone it means we never made it back. Hence we die down here. Just as a matter of
|
||||
deductive logic. </p>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<section class="box-container w-50 floatLeft">
|
||||
<ul class="crumbs-1">
|
||||
<li><a>One</a></li>
|
||||
<li><a>Two</a></li>
|
||||
<li class="active"><a>Three</a></li>
|
||||
<li><a>Four</a></li>
|
||||
</ul>
|
||||
</section>
|
||||
<section class="box-container w-50 floatLeft">
|
||||
<ul class="crumbs-1">
|
||||
<li><a>One</a></li>
|
||||
<li><a>Two</a></li>
|
||||
<li><a>Three</a></li>
|
||||
<li><a>Four</a></li>
|
||||
<li class="last active"><a>Five</a></li>
|
||||
</ul>
|
||||
</section>
|
||||
<div class="clear"></div>
|
||||
<section class="box-container w-100">
|
||||
<div class="alert ok"><i class="fa fa-check"></i>This is ok</div>
|
||||
</section>
|
||||
<section class="box-container w-100">
|
||||
<div class="alert info"><i class="fa fa-bell"></i>This is a info</div>
|
||||
</section>
|
||||
<section class="box-container w-100">
|
||||
<div class="alert warning"><i class="fa fa-exclamation-triangle"></i>This is a warning</div>
|
||||
</section>
|
||||
<section class="box-container w-100">
|
||||
<div class="alert error"><i class="fa fa-times"></i>This is an error</div>
|
||||
</section>
|
||||
<section class="box-container w-25 floatLeft">
|
||||
<img class="frame-1" width="100" height="100">
|
||||
</section>
|
||||
<section class="box-container w-25 floatLeft">
|
||||
<img class="frame-2" width="100" height="100">
|
||||
</section>
|
||||
<section class="box-container w-25 floatLeft">
|
||||
<img class="frame-3" width="100" height="100">
|
||||
</section>
|
||||
<div class="clear"></div>
|
||||
<section class="box">
|
||||
<section class="inner center">
|
||||
<input type="range">
|
||||
</section>
|
||||
</section>
|
||||
<section class="box">
|
||||
<section class="inner center">
|
||||
<progress value="33" max="100"></progress>
|
||||
</section>
|
||||
</section>
|
||||
<section class="box w-25 floatLeft">
|
||||
<section class="inner center">
|
||||
<div class="meter">
|
||||
<span style="width: 25%"></span>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
<section class="box w-25 floatLeft">
|
||||
<section class="inner center">
|
||||
<div class="meter blue">
|
||||
<span style="width: 50%"></span>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
<section class="box w-25 floatLeft">
|
||||
<section class="inner center">
|
||||
<div class="meter orange">
|
||||
<span style="width: 75%"></span>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
<section class="box w-25 floatLeft">
|
||||
<section class="inner center">
|
||||
<div class="meter red">
|
||||
<span style="width: 100%"></span>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
<section class="box w-25 floatLeft">
|
||||
<section class="inner center">
|
||||
<div class="spinner-1"></div>
|
||||
</section>
|
||||
</section>
|
||||
<section class="box w-25 floatLeft">
|
||||
<section class="inner center">
|
||||
<div class="meter blue">
|
||||
<div class="spinner-2">
|
||||
<div class="bounce1"></div>
|
||||
<div class="bounce2"></div>
|
||||
<div class="bounce3"></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
<section class="box w-25 floatLeft">
|
||||
<section class="inner center">
|
||||
<div class="spinner-3">
|
||||
<div class="sk-circle1 sk-circle"></div>
|
||||
<div class="sk-circle2 sk-circle"></div>
|
||||
<div class="sk-circle3 sk-circle"></div>
|
||||
<div class="sk-circle4 sk-circle"></div>
|
||||
<div class="sk-circle5 sk-circle"></div>
|
||||
<div class="sk-circle6 sk-circle"></div>
|
||||
<div class="sk-circle7 sk-circle"></div>
|
||||
<div class="sk-circle8 sk-circle"></div>
|
||||
<div class="sk-circle9 sk-circle"></div>
|
||||
<div class="sk-circle10 sk-circle"></div>
|
||||
<div class="sk-circle11 sk-circle"></div>
|
||||
<div class="sk-circle12 sk-circle"></div>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
<section class="box w-25 floatLeft">
|
||||
<section class="inner center">
|
||||
<div class="spinner-4"></div>
|
||||
</section>
|
||||
</section>
|
||||
<div class="clear"></div>
|
||||
<section class="box">
|
||||
<div class="slider-1">
|
||||
<figure>
|
||||
<img src="http://thecodeplayer.com/uploads/media/40Ly3VB.jpg" alt="">
|
||||
<img src="http://thecodeplayer.com/uploads/media/3yiC6Yq.jpg" alt="">
|
||||
<img src="http://thecodeplayer.com/uploads/media/00kih8g.jpg" alt="">
|
||||
<img src="http://thecodeplayer.com/uploads/media/2rT2vdx.jpg" alt="">
|
||||
<img src="http://thecodeplayer.com/uploads/media/40Ly3VB.jpg" alt="">
|
||||
</figure>
|
||||
</div>
|
||||
</section>
|
||||
<section class="">
|
||||
<div class="slider-2">
|
||||
<input type="radio" name="slide_switch" id="id1"/>
|
||||
<label for="id1">
|
||||
<img src="http://thecodeplayer.com/uploads/media/3yiC6Yq.jpg" width="100"/>
|
||||
</label>
|
||||
<img src="http://thecodeplayer.com/uploads/media/3yiC6Yq.jpg"/>
|
||||
|
||||
<!--Lets show the second image by default on page load-->
|
||||
<input type="radio" name="slide_switch" id="id2" checked="checked"/>
|
||||
<label for="id2">
|
||||
<img src="http://thecodeplayer.com/uploads/media/40Ly3VB.jpg" width="100"/>
|
||||
</label>
|
||||
<img src="http://thecodeplayer.com/uploads/media/40Ly3VB.jpg"/>
|
||||
|
||||
<input type="radio" name="slide_switch" id="id3"/>
|
||||
<label for="id3">
|
||||
<img src="http://thecodeplayer.com/uploads/media/00kih8g.jpg" width="100"/>
|
||||
</label>
|
||||
<img src="http://thecodeplayer.com/uploads/media/00kih8g.jpg"/>
|
||||
|
||||
<input type="radio" name="slide_switch" id="id4"/>
|
||||
<label for="id4">
|
||||
<img src="http://thecodeplayer.com/uploads/media/2rT2vdx.jpg" width="100"/>
|
||||
</label>
|
||||
<img src="http://thecodeplayer.com/uploads/media/2rT2vdx.jpg"/>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue
Block a user