gistfile1.txt

<h1>H1 heading Medium length headline<h1>
<h2>H2 heading Medium length headline</h2>
<h3>H3 heading Medium length headline</h3>
<h3 class="heading--alternative">H3 heading Medium length headline</h3>
<h4>H4 heading Medium length headline</h4>
<h5>H5 heading Medium length headline</h5>
<h6>H6 heading Medium length headline</h6>

<a href="#">Hello i am a link</a> Lorem ipsum dolor sit amet, consectetur adipiscing elit. In consectetur sapien ut sem auctor, id suscipit orci auctor. Nullam nec consequat magna. Aliquam vulputate condimentum sem vitae imperdiet. Duis dignissim ligula quis ligula aliquam, in dapibus sapien auctor. 

Proin elementum in ante ut egestas. Sed vitae ipsum nec eros dapibus rhoncus sed a mauris. Sed scelerisque justo eu aliquet mollis. Vestibulum venenatis lectus sed est consectetur fringilla. Ut volutpat lobortis urna, ut interdum ligula accumsan sit amet. Pellentesque vitae ipsum luctus, volutpat urna quis, consequat tortor. Nam gravida iaculis eleifend. Fusce felis elit, iaculis at tempus sed, interdum eget nibh. Morbi convallis mi vel porttitor elementum. 

<p><a class="button" href="#">Button blue</a></p>
<p><a class="button button--transparent" href="#">Button transparent</a></p>
<p style="padding: 40px; background-color: #EBEFF4;"><a class="button button--white" href="#">Button white</a></p>

<form class="form form--white">
<h2 class="form-heading">WHITE BG FORM Subscribe to hearsay blog</h2>
<label class="form-label">Email *</label>
<input class="form-input" type="text" placeholder="Placeholder">

<fieldset class="fieldset fieldset--two">
<label class="form-label">First Name*</label>
<input class="form-input" type="text" placeholder="Placeholder - Active" value="Active">
</fieldset>

<label class="form-label form-label--error">Last Name*</label>
<input class="form-input form-input--error" type="text" placeholder="Placeholder - Error" value="Error">
<div class="form-message form-message--error">Error message here.</div>

<label class="form-label" for="cars">Choose a car:</label>
<select class="form-input form-input--select" name="cars" id="cars">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

<p>Select a maintenance drone:</p>

<div>
  <input class="form-input form-input--radio" type="radio" id="huey" name="drone" value="huey" checked> <label class="form-label form-label--radio" for="huey">Huey</label>
</div>

<div>
  <input class="form-input form-input--radio form-input--error" type="radio" id="dewey" name="drone" value="dewey"> <label class="form-label form-label--radio form-label--error" for="dewey">Dewey</label>
</div>

<div>
  <input class="form-input form-input--radio" type="radio"  id="louie" name="drone" value="louie"> <label class="form-label form-label--radio" for="louie">Louie</label>
</div>

<p>Choose your monster's features:</p>

<div>
  <input class="form-input form-input--checkbox" type="checkbox"  id="scales" name="scales" checked> <label class="form-label form-label--checkbox" for="scales">Scales</label>
</div>

<div>
  <input class="form-input form-input--checkbox form-input--error" type="checkbox" id="horns" name="horns"> <label class="form-label form-label--checkbox form-label--error" for="horns">Horns</label>
</div>

<button class="form-submit" type="submit">Submit</button>
</fieldset>
</form>

<form class="form form--gray">
<h2 class="form-heading">GRAY BG FORM Subscribe to hearsay blog</h2>
<label class="form-label">Email *</label> 
<input class="form-input" type="text" placeholder="Placeholder">

<fieldset class="fieldset fieldset--two">
<label class="form-label">First Name*</label>
<input class="form-input" type="text" placeholder="Placeholder - Active" value="Active">
</fieldset>

<label class="form-label--error">Last Name*</label>
<input class="form-input form-input--error" type="text" placeholder="Placeholder - Error" value="Error">
<div class="form-message form-message--error">Error message here.</div>

<p>Select a maintenance drone:</p>

<div>
  <input class="form-input form-input--radio" type="radio" id="huey" name="drone" value="huey" checked> <label class="form-label form-label--radio" for="huey">Huey</label>
</div>

<div>
  <input class="form-input form-input--radio" type="radio" id="dewey" name="drone" value="dewey"> <label class="form-label form-label--radio" for="dewey">Dewey</label>
</div>

<div>
  <input class="form-input form-input--radio" type="radio" id="louie" name="drone" value="louie"> <label class="form-label form-label--radio" for="louie">Louie</label>
</div>

<p>Choose your monster's features:</p>

<div>
  <input class="form-input form-input--checkbox" type="checkbox" id="scales" name="scales" checked> <label class="form-label form-label--checkbox" for="scales">Scales</label>
</div>

<div>
  <input class="form-input form-input--checkbox" type="checkbox" id="horns" name="horns"> <label class="form-label form-label--checkbox" for="horns">Horns</label>
</div>

<button class="form-submit" type="submit">Submit</button>
</fieldset>
</form>

<div class="depth form--gray">Depth</div>



<div class="depth--deep form--gray">Depth Deep</div>



<div class="depth--deeper form--gray">Depth Deeper</div>



<div class="depth--deepest form--gray">Depth Deepest</div>