Cleaned up the main page to show the various controls and their states. Refactored the CSS a bit.
This commit is contained in:
@@ -49,57 +49,66 @@
|
||||
Elementum sagittis vitae et leo duis ut diam quam nulla. Pharetra sit amet aliquam id diam maecenas ultricies mi. Donec et odio pellentesque diam volutpat commodo. Interdum consectetur libero id faucibus nisl tincidunt eget. Non nisi est sit amet. Tortor vitae purus faucibus ornare suspendisse sed. Varius morbi enim nunc faucibus a pellentesque sit. Donec massa sapien faucibus et molestie ac feugiat. Varius vel pharetra vel turpis nunc eget lorem. Pellentesque nec nam aliquam sem. Pulvinar mattis nunc sed blandit libero. At auctor urna nunc id cursus metus aliquam eleifend mi. Quam nulla porttitor massa id neque aliquam. Eget duis at tellus at urna condimentum mattis pellentesque id. Pharetra diam sit amet nisl suscipit adipiscing bibendum est.</p>
|
||||
</article>
|
||||
<div class="details">
|
||||
<div class="flex">
|
||||
<input type="text" />
|
||||
<p>DETAILS: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Enim lobortis scelerisque fermentum dui faucibus in. Sed id semper risus in hendrerit gravida. Ac auctor augue mauris augue neque gravida in.</p>
|
||||
<textarea placeholder="Placeholder text here...."></textarea>
|
||||
<textarea disabled="true" placeholder="Disabled Placeholder text here...."></textarea>
|
||||
<input type="button" value="My button"/>
|
||||
</div>
|
||||
<h1>Text Input Controls</h1>
|
||||
<fieldset>
|
||||
<legend>Textboxes</legend>
|
||||
<div class="flex">
|
||||
<input type="text" placeholder="Username..." />
|
||||
<input type="text" placeholder="Disabled textbox..." disabled />
|
||||
</div>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<legend>Textarea</legend>
|
||||
<div class="flex">
|
||||
<textarea placeholder="Enter memo..." rows="4"></textarea>
|
||||
<textarea placeholder="A disabled textarea..." rows="4" disabled></textarea>
|
||||
</div>
|
||||
</fieldset>
|
||||
</div>
|
||||
<aside>
|
||||
<h1>An asid here</h1>
|
||||
<h1>Demo Controls</h1>
|
||||
<fieldset>
|
||||
<legend>Radio Buttons</legend>
|
||||
<div class="flex">
|
||||
<input type="radio" id="demoradio1" name="demo" />
|
||||
<label for="demoradio1">Open</label>
|
||||
<input type="radio" id="demoradio2" name="demo" checked />
|
||||
<label for="demoradio2">Close</label>
|
||||
<input type="radio" id="demoradio3" disabled />
|
||||
<label for="demoradio3">Disabled</label>
|
||||
<input type="radio" id="demoradio4" disabled checked />
|
||||
<label for="demoradio4">Checked</label>
|
||||
</div>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<legend>Checkboxes</legend>
|
||||
<div class="flex">
|
||||
<input type="checkbox" id="democheckbox1" />
|
||||
<label for="democheckbox1">One</label>
|
||||
<input type="checkbox" id="democheckbox2" />
|
||||
<label for="democheckbox2">Two</label>
|
||||
<input type="checkbox" id="democheckbox3" disabled />
|
||||
<label for="democheckbox3">Disabled</label>
|
||||
<input type="checkbox" id="democheckbox4" disabled checked />
|
||||
<label for="democheckbox4">Checked</label>
|
||||
</div>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<legend>Buttons</legend>
|
||||
<div class="flex">
|
||||
<input type="button" value="Press Me" />
|
||||
<input type="button" value="Disabled Button" disabled />
|
||||
</div>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<legend>Various Inputs</legend>
|
||||
<div class="flex">
|
||||
<input type="number" />
|
||||
<input type="datetime" />
|
||||
<input type="file" accept="image/*,.pdf" />
|
||||
</div>
|
||||
</fieldset>
|
||||
</aside>
|
||||
<footer>
|
||||
<h2>Copyrights crusading like a mad man for that shit</h2>
|
||||
<fieldset>
|
||||
<legend>A collection of checkboxes.</legend>
|
||||
<div class="flex">
|
||||
<input type="checkbox" id="checkbox1" />
|
||||
<label class="checkmark" for="checkbox1">One</label>
|
||||
<input type="checkbox" id="checkbox2" />
|
||||
<label class="checkmark" for="checkbox2">Two II</label>
|
||||
<input type="checkbox" id="checkbox3" checked />
|
||||
<label class="checkmark" for="checkbox3">Three 三</label>
|
||||
<input type="checkbox" id="checkbox4" disabled checked/>
|
||||
<label class="checkmark" for="checkbox4" class="form-control--disabled">Four GTA IV</label>
|
||||
</div>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<legend>A radio button group, with a "name" property set</legend>
|
||||
<div class="flex">
|
||||
<input type="radio" id="radio1" name="radio" Checked />
|
||||
<label for="radio1">No relations</label>
|
||||
<input type="radio" id="radio2" name="radio" />
|
||||
<label for="radio2">Uncle Ruckus</label>
|
||||
<input type="radio" id="radio3" name="radio" />
|
||||
<label for="radio3">Reverend Father</label>
|
||||
</div>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<legend>Radio Button States</legend>
|
||||
<div class="flex">
|
||||
<input type="radio" id="radio99" disabled checked name="Readonly" />
|
||||
<label for="radio99">Readonly One</label>
|
||||
<input type="radio" id="radio98" disabled name="Readonly" />
|
||||
<label for="radio98">Readonly Two</label>
|
||||
<input type="radio" id="radio97" checked name="toggle" />
|
||||
<label for="radio97">Yes</label>
|
||||
<input type="radio" id="radio96" checked name="toggle" />
|
||||
<label for="radio96">No</label>
|
||||
</div>
|
||||
</fieldset>
|
||||
</footer>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user