You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
236 lines
10 KiB
PHTML
236 lines
10 KiB
PHTML
<section class="container">
|
|
<div class="row row--justify-center">
|
|
<div class="col col-8">
|
|
<div class="tac">
|
|
<p class="h1"><span>Over the top</span> Contact Form</p>
|
|
<p>Contains all the form elements I will be bothered to style</p>
|
|
</div>
|
|
<form>
|
|
<div class="row">
|
|
<div class="col col-6">
|
|
<label for="firstname">First Name</label>
|
|
<input type="text" name="firstname" placeholder="First"></input>
|
|
</div>
|
|
|
|
<div class="col col-6">
|
|
<label for="lastname">Last Name</label>
|
|
<input type="text" name="lastname" placeholder="Last"></input>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col col-12">
|
|
<label for="username">Username</label>
|
|
<div class="input-group">
|
|
<div class="input-group__prepend">
|
|
<span class="input-group__content">@</span>
|
|
</div>
|
|
<input class="input-group__input" type="text" name="username" placeholder="Username"></input>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col col-6">
|
|
<label for="website">Website 1</label>
|
|
<div class="input-group">
|
|
<input class="input-group__input" type="text" name="website"></input>
|
|
<div class="input-group__append">
|
|
<span class="input-group__content">append</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col col-6">
|
|
<label for="website">Website</label>
|
|
<div class="input-group">
|
|
<input class="input-group__input" type="text" name="website"></input>
|
|
<div class="input-group__append">
|
|
<!-- <span class="input-group__content"> -->
|
|
<select class="input-group__content">
|
|
<option value="">.co.uk</option>
|
|
<option value="">.com</option>
|
|
</select>
|
|
<!-- </span> -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col col-12">
|
|
<label for="textarea">Textarea</label>
|
|
<textarea name="textarea"></textarea>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col col-5">
|
|
<label for="reason-1">Reason 1</label>
|
|
<select>
|
|
<option value="" invalid>Select...</option>
|
|
<option value="option 1">Option 1</option>
|
|
<option value="option 2">Option 2</option>
|
|
</select>
|
|
</div>
|
|
<div class="col col-3">
|
|
<label for="reason-1">Reason 1</label>
|
|
<select>
|
|
<option value="" invalid>Select...</option>
|
|
<optgroup label="I hate you">
|
|
<option value="option 1">Option 1</option>
|
|
<option value="option 2">Option 2</option>
|
|
</optgroup>
|
|
<option value="" invalid>Option 3</option>
|
|
<optgroup label="I love you">
|
|
<option value="option 1">Option 4</option>
|
|
<option value="option 2">Option 5</option>
|
|
</optgroup>
|
|
</select>
|
|
</div>
|
|
<div class="col col-4">
|
|
<label for="reason-1">Reason 1</label>
|
|
<select>
|
|
<option value="" invalid>Select...</option>
|
|
<option value="option 1">Option 1</option>
|
|
<option value="option 2">Option 2</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<hr>
|
|
|
|
<div class="row">
|
|
<div class="col col-12">
|
|
<h2>Checkboxes</h2>
|
|
<div class="control-group custom-checkbox">
|
|
<input type="checkbox" id="chk-1">
|
|
<label for="chk-1">Checkbox chk-1</label>
|
|
</div>
|
|
<div class="control-group">
|
|
<input type="checkbox" id="chk-2">
|
|
<label for="chk-2">Checkbox chk-2</label>
|
|
</div>
|
|
<div class="control-group">
|
|
<input type="checkbox" id="chk-3">
|
|
<label for="chk-3">Checkbox chk-3</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col col-12">
|
|
<fieldset>
|
|
<legend>SELECT YOUR FAVOURITE</legend>
|
|
<div class="control-group">
|
|
<input type="radio" name="radioGroup1" id="rad-1">
|
|
<label for="rad-1">Radio rad-1</label>
|
|
</div>
|
|
<div class="control-group">
|
|
<input type="radio" name="radioGroup1" id="rad-2">
|
|
<label for="rad-2">Radio rad-2</label>
|
|
</div>
|
|
<div class="control-group">
|
|
<input type="radio" name="radioGroup1" id="rad-3">
|
|
<label for="rad-3">Radio rad-3</label>
|
|
</div>
|
|
</fieldset>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col col-6">
|
|
<label for="colors">Pick a color (preferably a red tone):</label>
|
|
<input type="color" list="redColors" id="colors" />
|
|
<datalist id="redColors">
|
|
<option value="#800000"></option>
|
|
<option value="#8B0000"></option>
|
|
<option value="#A52A2A"></option>
|
|
<option value="#DC143C"></option>
|
|
</datalist>
|
|
</div>
|
|
|
|
<div class="col col-6">
|
|
<label for="ice-cream-choice">Choose a flavor:</label>
|
|
<input list="ice-cream-flavors" id="ice-cream-choice" name="ice-cream-choice" />
|
|
|
|
<datalist id="ice-cream-flavors">
|
|
<option value="Chocolate"></option>
|
|
<option value="Coconut"></option>
|
|
<option value="Mint"></option>
|
|
<option value="Strawberry"></option>
|
|
<option value="Vanilla"></option>
|
|
</datalist>
|
|
</div>
|
|
</div>
|
|
|
|
<hr>
|
|
|
|
<div class="row">
|
|
<div class="col col-12">
|
|
<button type="submit">Send the thing</button>
|
|
<input type="submit"></input>
|
|
</div>
|
|
</div>
|
|
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row row--cards">
|
|
<div class="col col-4">
|
|
<div class="card">
|
|
<header class="card__header"><p class="card__title">HEADER</p></header>
|
|
<div class="card__body">
|
|
<p class="card__title">TITLE</p>
|
|
<p class="card__text">text text tesx kajdfa fjladf jladkf ajdfl kadj fjask fjldsaj fljad fklasjd lfj lkdf</p>
|
|
</div>
|
|
<footer class="card__footer"><p class="card__title">FOOTER</p></footer>
|
|
</div>
|
|
</div>
|
|
<div class="col col-4">
|
|
<div class="card">
|
|
<div class="card__body">
|
|
<p class="card__title">TITLE</p>
|
|
<p class="card__text">text text tesx kajdfa fjladf jladkf ajdfl kadj fjask fjldsaj fljad fklasjd lfj lkdf</p>
|
|
</div>
|
|
<footer class="card__footer">
|
|
<div class="row">
|
|
<div class="col col-8">
|
|
<p>Footer content that is not a title</p>
|
|
</div>
|
|
<div class="col col-4">
|
|
<a href="#" class="button">Button</a>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
</div>
|
|
<div class="col col-4">
|
|
<div class="card">
|
|
<header class="card__header"><p class="card__title">HEADER</p></header>
|
|
<div class="card__body">
|
|
<p class="card__title">TITLE</p>
|
|
<p class="card__text">text text tesx kajdfa fjladf jladkf ajdfl kadj fjask fjldsaj fljad fklasjd lfj lkdf</p>
|
|
<a href="#" class="button">Button</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col col-3">
|
|
<div class="card">
|
|
<img class="card-image--top" src="@assets('img/discord.png')" >
|
|
<div class="card__body">
|
|
<p class="card__text">SERVIE SERVICE SERVICE SERIVE SEIVES SEIGSVE SEIEVE ESIEFEVE</p>
|
|
<div class="row">
|
|
<div class="col col-4">a</div>
|
|
<div class="col col-4">s</div>
|
|
<div class="col col-4">Something</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|