section dark

H1 title

Lorem ipsum linkis a hero.



<div class="section dark" style="background-image: url(images/SI00809_141121_Hannah_Teter_Pipe.jpg)">

	<!-- color layer with opacity -->

	<div class="overlay"></div>

	<div class="container">

		<div class="row">

			<!-- content start with col-md-... -->

			<div class="col-md-12">

				...

			</div>
sdgfqsdgsqd
		</div>sdgfqsdgsqd
sdgfqsdgsqd
	</div>
sdgfqsdgsqd
</div>sdgfqsdgsqd
section light

H1 title

Lorem ipsum linkis a hero.



<div class="section light" style="background-image: url(images/SI00809_141121_Hannah_Teter_Pipe.jpg)">

	<!-- color layer with opacity -->

	<div class="overlay"></div>

	<div class="container">

		<div class="row">

			<!-- content start with col-md-... -->

			<div class="col-md-12">

				...

			</div>

		</div>

	</div>

</div>
wall block

This is a very very very very très long Title

author

260 views - 6 likes - 5 comments

This is a very very very very très long Title

author

260 views - 6 likes - 5 comments

This is a very very very very très long Title

author

260 views - 6 likes - 5 comments

This is a very very very very très long Title

author

260 views - 6 likes - 5 comments



<div class="section wall">

	<div class="container-fluid">

		<div class="row">

			<!-- start block -->

			<div class="hoverable force-hover">

				<div class="overlay" style="background-image: url(images/gopro-image-1.jpg)"></div>

				<a href="#" class="link-overlay"></a>

				<div class="centered-content">

					<div class="table">

						<div class="cell">

							<h3><a href="#" class="link-wall-cell" </a></h3>

							<p class="text">author</p>

						</div>

					</div>

				</div>

				<p class="statistics">260 views - 6 likes - 5 comments</p>

			</div>

			<!-- end block -->

	</div>

</div>
titles

H1 title

H2 title

H3 title

H4 title

H5 title


<h1>H1 title</h1>

<h2>H2 title</h2>

<h3>H3 title</h3>

<h4>H4 title</h4>

<h5>H5 title</h5>
paragraphs

Text before title

Finally, there's a place where you can share as you never did before.
Share your stories, discover the stories of thousand users through the most immersive experience you get today.

Finally, there's a place where you can share as you never did before.
Share your stories, discover the stories of thousand users through the most immersive experience you get today.



<p class="pre-text">Text before title</p>

<p class="text">Finally, there's a place where you can share as you never did before.<br> Share your stories, discover the stories of thousand users through the most immersive experience you get today.</p>						

<p>Finally, there's a place where you can share as you never did before.<br> Share your stories, discover the stories of thousand users through the most immersive experience you get today.</p>
basic input


<div class="form-group form-minimal">

	<div class="input-group">

		<input type="text" class="form-control" placeholder="myemail@gopro.com">

	</div>

</div>
basic textarea


<textarea class="form-minimal" rows="5">Slackline between two Hot Air Balloon with Julien Millot from the Flying Frenchies. http://www.flying-frenchies.com/</textarea>
input with icon


<div class="form-group form-std">

	<div class="input-group">

		<div class="input-group-addon"><span class="icon-envelop"></span></div>

		<input type="text" class="form-control" placeholder="myemail@gopro.com">

	</div>

</div>

<div class="form-group form-std">

	<div class="input-group">

		<div class="input-group-addon"><span class="icon-lock_outline"></span></div>

		<input type="password" class="form-control" placeholder="">

	</div>

</div>
stacked input with icon


<div class="form-group form-std">

	<div class="input-group">

		<div class="input-group-addon"><span class="icon-envelop"></span></div>

		<input type="text" class="form-control border-bottom" placeholder="myemail@gopro.com">

	</div>

	<div class="input-group">

		<div class="input-group-addon"><span class="icon-lock_outline"></span></div>

		<input type="password" class="form-control" placeholder="">

	</div>

</div>
form feedback


<div class="form-group form-std">

	<div class="input-group feedback has-error">

		<div class="input-group-addon"><span class="icon-lock_outline"></span></div>

		<input type="password" class="form-control" placeholder="">

	</div>

</div>

<div class="form-group form-std">

	<div class="input-group feedback has-success">

		<div class="input-group-addon"><span class="icon-lock_outline"></span></div>

		<input type="password" class="form-control" placeholder="">

	</div>

</div>
subscribe


<div class="input-group subscribe">

	<input type="text" class="form-control" placeholder="Enter Your Email">

	<span class="input-group-btn">

		<button class="btn btn-primary" type="button">Submit</button>

	</span>

</div>
Select form replacement


<select id="" name="" required="required" data-style-class="stroke-light" data-text="Text to display when no choice">

	<option></option>

	<option value="1">Architecture</option>

	<option value="2">Art</option>

	<option value="8">Flying</option>

	<option value="16">Underwater</option>

</select>

						


//Function to call

selectFormReplacer();
Pseudo select


<div class="select-wrapper pseudo-select stroke-light">

	<span class="title-label">

		<span class="icon-select-arrows"></span>

	</span>

	<ul class="select-inner">

		<li><a href="#" class="link-pseudo-option">Most viewed</a></li>

		<li><a href="#" class="link-pseudo-option">Most liked</a></li>

		<li><a href="#" class="link-pseudo-option active">Most commented</a></li>

		<li><a href="#" class="link-pseudo-option">Last uploads</a></li>

	</ul>

</div>



<div class="select-wrapper pseudo-select stroke-dark">

	<span class="title-label">

		<span class="icon-select-arrows"></span>

	</span>

	<ul class="select-inner">

		<li><a href="#" class="link-pseudo-option">Most viewed</a></li>

		<li><a href="#" class="link-pseudo-option">Most liked</a></li>

		<li><a href="#" class="link-pseudo-option active">Most commented</a></li>

		<li><a href="#" class="link-pseudo-option">Last uploads</a></li>

	</ul>

</div>



<div class="select-wrapper pseudo-select no-stroke">

	<span class="title-label">

		<span class="icon-select-arrows"></span>

	</span>

	<ul class="select-inner">

		<li><a href="#" class="link-pseudo-option">Most viewed</a></li>

		<li><a href="#" class="link-pseudo-option">Most liked</a></li>

		<li><a href="#" class="link-pseudo-option active">Most commented</a></li>

		<li><a href="#" class="link-pseudo-option">Last uploads</a></li>

	</ul>

</div>

						


//Function to call

pseudoSelectBox();
links

This is a link-defaultin a p.text

This is a link-neutralin a p

This is a link-createin a p

This is a link-largein a p

This is a link-abusein a p

This is a link-more-contentin a p

This is a link-pre-footerin a p

tag 1 tag 2

1 2 3 4 5 6 ... 23

Link filter active Link filter 



<a href="#" class="link-default">link-default</a>

<a href="#" class="link-neutral">link-neutral</a>

<a href="#" class="link-create">link-create</a>

<a href="#" class="link-large">link-large</a>

<a href="#" class="link-abuse">link-abuse</a>

<a href="#" class="link-more-content">link-more-content</a>

<a href="#" class="link-pre-footer">link-pre-footer</a>



This is a <a href="#" class="link-soft-dark">link</a> in a p

<p class="text">This is a <a href="#" class="link-soft-dark">link</a> in a p.text</p>



<a href="#" class="link-social"><span class="icon-facebook2"></span></a>

<a href="#" class="link-social"><span class="icon-twitter2"></span></a>

<a href="#" class="link-social"><span class="icon-google-plus2"></span></a>

<a href="#" class="link-social"><span class="icon-youtube"></span></a>

<a href="#" class="link-social"><span class="icon-pinterest"></span></a>

<a href="#" class="link-social"><span class="icon-instagram"></span></a>



<a href="#" class="link-tag">tag 1</a>

<a href="#" class="link-tag">tag 2</a>



<a href="#" class="link-paginate active">1</a>

<a href="#" class="link-paginate">2</a>



<a href="#" class="link-filter active">Link filter active</a>

<a href="#" class="link-filter">Link filter</a>

<a href="#" class="link-filter icon active" title="Order descending"><span class="icon-keyboard_arrow_down"></span></a>

<a href="#" class="link-filter icon" title="Order ascending"><span class="icon-keyboard_arrow_up"></span></a>



<a href="#" class="link-video-social facebook"><span class="icon-facebook4"></span></a>

<a href="#" class="link-video-social twitter"><span class="icon-twitter3"></span></a>

<a href="#" class="link-video-social google-plus"><span class="icon-google-plus3"></span></a>

<a href="#" class="link-video-social email"><span class="icon-envelop"></span></a>
default checkbox


<div class="form-checkbox checkbox-default">

	<!-- Take care to match input 'id' and the label 'for' attribute

		Remember to place the JS code for the toggle -->

	<input type="checkbox" value="" id="check-i-agree">

	<label for="check-i-agree"><span>Default checkbox label text</span></label>

</div>

						


checkboxBehavior();
disabled checkbox


<div class="form-checkbox checkbox-default disabled">

	<input type="checkbox" value="" id="disagree" disabled>

	<label for="disagree"><span>Disabled checkbox</span></label>

</div>
Button primary

Button primary XS

Button primary xs block

Button primary STD

Button primary STD block

Button primary LG

Button primary lg block 



<a href="#" class="btn btn-primary btn-xs">Button primary XS</a>

<a href="#" class="btn btn-primary btn-xs btn-block">Button primary xs block</a>

<a href="#" class="btn btn-primary btn-std">Button primary STD</a>

<a href="#" class="btn btn-primary btn-std btn-block">Button primary STD block</a>

<a href="#" class="btn btn-primary btn-lg">Button primary LG</a>

<a href="#" class="btn btn-primary btn-lg btn-block">Button primary lg block</a>
Button pending

Links

Buttons



<!-- links -->

<a href="#" class="btn btn-pending btn-xs">

	<span class="spinner inline-block small">

		<span class="circle grey"></span>

		<span class="circle blue"></span>

	</span>

</a>

<a href="#" class="btn btn-pending btn-std">

	<span class="spinner inline-block small">

		<span class="circle grey"></span>

		<span class="circle blue"></span>

	</span>

</a>

<a href="#" class="btn btn-pending btn-lg">

	<span class="spinner inline-block small">

		<span class="circle grey"></span>

		<span class="circle blue"></span>

	</span>

</a>



<!-- or buttons -->

<button class="btn btn-pending btn-xs">

	<span class="spinner inline-block small">

		<span class="circle grey"></span>

		<span class="circle blue"></span>

	</span>

</button>

<button class="btn btn-pending btn-std">

	<span class="spinner inline-block small">

		<span class="circle grey"></span>

		<span class="circle blue"></span>

	</span>

</button>

<button class="btn btn-pending btn-lg">

	<span class="spinner inline-block small">

		<span class="circle grey"></span>

		<span class="circle blue"></span>

	</span>

</button>
Button stroke light

Button stroke light XS

Button stroke light xs block

Button stroke light STD

Button stroke light STD block

Button stroke light LG

Button stroke light lg block 



<a href="#" class="btn btn-stroke-light btn-xs">Button stroke light XS</a>

<a href="#" class="btn btn-stroke-light btn-xs btn-block">Button stroke light xs block</a>

<a href="#" class="btn btn-stroke-light btn-std">Button stroke light STD</a>

<a href="#" class="btn btn-stroke-light btn-std btn-block">Button stroke light STD block</a>

<a href="#" class="btn btn-stroke-light btn-lg">Button stroke light LG</a>

<a href="#" class="btn btn-stroke-light btn-lg btn-block">Button stroke light lg block</a>
Button stroke white

Button stroke white XS

Button stroke white xs block

Button stroke white STD

Button stroke white STD block

Button stroke white LG

Button stroke white lg block 



<a href="#" class="btn btn-stroke-white btn-xs">Button stroke white XS</a>

<a href="#" class="btn btn-stroke-white btn-xs btn-block">Button stroke white xs block</a>

<a href="#" class="btn btn-stroke-white btn-std">Button stroke white STD</a>

<a href="#" class="btn btn-stroke-white btn-std btn-block">Button stroke white STD block</a>

<a href="#" class="btn btn-stroke-white btn-lg">Button stroke white LG</a>

<a href="#" class="btn btn-stroke-white btn-lg btn-block">Button stroke white lg block</a>
Button stroke dark

Button stroke dark XS

Button stroke dark xs block

Button stroke dark STD

Button stroke dark STD block

Button stroke dark LG

Button stroke dark lg block 



<a href="#" class="btn btn-stroke-dark btn-xs">Button stroke dark XS</a>

<a href="#" class="btn btn-stroke-dark btn-xs btn-block">Button stroke dark xs block</a>

<a href="#" class="btn btn-stroke-dark btn-std">Button stroke dark STD</a>

<a href="#" class="btn btn-stroke-dark btn-std btn-block">Button stroke dark STD block</a>

<a href="#" class="btn btn-stroke-dark btn-lg">Button stroke dark LG</a>

<a href="#" class="btn btn-stroke-dark btn-lg btn-block">Button stroke dark lg block</a>
Button facebook

connect with facebook

connect with facebook

connect with facebook

connect with facebook

connect with facebook

connect with facebook 



<a href="#" class="btn btn-facebook btn-xs"><span class="icon-facebook2"></span> connect with facebook</a>

<a href="#" class="btn btn-facebook btn-xs btn-block"><span class="icon-facebook2"></span> connect with facebook</a>

<a href="#" class="btn btn-facebook btn-std"><span class="icon-facebook2"></span> connect with facebook</a>

<a href="#" class="btn btn-facebook btn-std btn-block"><span class="icon-facebook2"></span> connect with facebook</a>

<a href="#" class="btn btn-facebook btn-lg"><span class="icon-facebook2"></span> connect with facebook</a>

<a href="#" class="btn btn-facebook btn-lg btn-block"><span class="icon-facebook2"></span> connect with facebook</a>
Button google

connect with google

connect with google

connect with google

connect with google

connect with google

connect with google 



<a href="#" class="btn btn-google btn-xs"><span class="icon-google-plus2"></span> connect with google</a>

<a href="#" class="btn btn-google btn-xs btn-block"><span class="icon-google-plus2"></span> connect with google</a>

<a href="#" class="btn btn-google btn-std"><span class="icon-google-plus2"></span> connect with google</a>

<a href="#" class="btn btn-google btn-std btn-block"><span class="icon-google-plus2"></span> connect with google</a>

<a href="#" class="btn btn-google btn-lg"><span class="icon-google-plus2"></span> connect with google</a>

<a href="#" class="btn btn-google btn-lg btn-block"><span class="icon-google-plus2"></span> connect with google</a>
Button no stroke (transparent)

button xs

button xs block

button std

button std block

button lg

button lg block 



<a href="#" class="btn btn-no-stroke btn-xs">button xs</a>

<a href="#" class="btn btn-no-stroke btn-xs btn-block">button xs block</a>

<a href="#" class="btn btn-no-stroke btn-std">button std</a>

<a href="#" class="btn btn-no-stroke btn-std btn-block">button std block</a>

<a href="#" class="btn btn-no-stroke btn-lg">button lg</a>

<a href="#" class="btn btn-no-stroke btn-lg btn-block">button lg block</a>
Button GoPro stroke

button xs

button xs block

button std

button std block

button lg

button lg block 



<a href="#" class="btn btn-stroke-gopro btn-xs">button xs</a>

<a href="#" class="btn btn-stroke-gopro btn-xs btn-block">button xs block</a>

<a href="#" class="btn btn-stroke-gopro btn-std">button std</a>

<a href="#" class="btn btn-stroke-gopro btn-std btn-block">button std block</a>

<a href="#" class="btn btn-stroke-gopro btn-lg">button lg</a>

<a href="#" class="btn btn-stroke-gopro btn-lg btn-block">button lg block</a>
Button play



<a href="#" class="btn btn-play btn-xs"><span class="icon-play_arrow"></span></a>

<a href="#" class="btn btn-play btn-std"><span class="icon-play_arrow"></span></a>

<a href="#" class="btn btn-play btn-lg"><span class="icon-play_arrow"></span></a>
Notification bars

Danger! Looks like your password wasn't long enough. Please make sur it's at least 8 characters.

Danger! With top arrow.

Danger! With bottom arrow.

Warning! Looks like your password wasn't long enough. Please make sur it's at least 8 characters.

Warning! With top arrow.

Warning! With bottom arrow.

Congrats! Looks like your password wasn't long enough. Please make sur it's at least 8 characters.

Success! With bottom arrow.

Success! With bottom arrow.



<div class="notification-bar danger">

	<p>Danger! Looks like your password wasn't long enough. Please make sur it's at least 8 characters.</p>

	<button><span class="icon-close"></span></button>

</div>

<div class="notification-bar danger">

	<p>Danger! With top arrow.</p>

	<button><span class="icon-close"></span></button>

	<span class="arrow top"></span>

</div>

<div class="notification-bar danger">

	<p>Danger! With bottom arrow.</p>

	<button><span class="icon-close"></span></button>

	<span class="arrow bottom"></span>

</div>

<div class="notification-bar warning">

	<p>Warning! Looks like your password wasn't long enough. Please make sur it's at least 8 characters.</p>

	<button><span class="icon-close"></span></button>

</div>

<div class="notification-bar warning">

	<p>Warning! With top arrow.</p>

	<button><span class="icon-close"></span></button>

	<span class="arrow top"></span>

</div>

<div class="notification-bar warning">

	<p>Warning! With bottom arrow.</p>

	<button><span class="icon-close"></span></button>

	<span class="arrow bottom"></span>

</div>

<div class="notification-bar success">

	<p>Congrats! Looks like your password wasn't long enough. Please make sur it's at least 8 characters.</p>

	<button><span class="icon-close"></span></button>

</div>

<div class="notification-bar success">

	<p>Success! With bottom arrow.</p>

	<button><span class="icon-close"></span></button>

	<span class="arrow top"></span>

</div>

<div class="notification-bar success">

	<p>Success! With bottom arrow.</p>

	<button><span class="icon-close"></span></button>

	<span class="arrow bottom"></span>

</div>
With auto off
(refresh this part to see)

Success! With auto off by default (5s).

Success! With auto off fast (2s).

Success! With auto off slow (15s).


<div class="notification-bar success auto-off">
    <p>Success! With auto off by default (5s).</p>
    <button>
        <span class="icon-close"></span>
    </button>
</div>

<div class="notification-bar success auto-off fast">
    <p>Success! With auto off fast (2s).</p>
    <button>
        <span class="icon-close"></span>
    </button>
</div>

<div class="notification-bar success auto-off slow">
    <p>Success! With auto off slow (15s).</p>
    <button>
        <span class="icon-close"></span>
    </button>
</div>

To give you the best possible experience, this site uses cookies. Continuing to use diy.com means you agree to our use of cookies. If you'd like to learn more about the cookies we use please find out more


<div class="notification-bar cookie">
    <p>To give you the best possible experience, this site uses cookies. Continuing to use diy.com means you agree to our use of cookies. If you'd like to learn more about the cookies we use please <a href="#">find out more</a></p>
    <button><span class="icon-close"></span>
    </button>
</div>
users

pic

SMBDRR

UX Designer - Strange Food Lover 



<div class="user-set-mini">

	<p class="pic" style="background-image: url(images/profile-pic1.jpg)">

		<a href="#" class="link-user-set"><img src="images/profile-pic1.jpg" alt="pic"></a>

	</p>

	<div>

		<p><a href="#" class="link-user-set">SMBDRR</a></p>

		<p>UX Designer - Strange Food Lover<p>

	</div>

	<hr class="invisible clearfix">

</div>

pic

user set

category



<div class="user-set">

	<p class="pic" style="background-image: url(images/profile-pic1.jpg)">

		<img src="images/profile-pic1.jpg" alt="pic">

	</p>

	<p class="name mgtop1dot0">user set</p>

	<p class="category">category</p>

	<a href="#"></a>

</div>
webfonts
loader / spinner

Large

Standard

Small

Responsive / Auto fit the parent container



<div class="spinner large">

	<div class="circle grey"></div>

	<div class="circle blue"></div>

</div>

<div class="spinner std">

	<div class="circle grey"></div>

	<div class="circle blue"></div>

</div>

<div class="spinner small">

	<div class="circle grey"></div>

	<div class="circle blue"></div>

</div>

<div class="spinner responsive">

	<div class="circle grey"></div>

	<div class="circle blue"></div>

</div>
separator


<div class="separator">

	<div class="left"><hr></div>

	<div class="text">separator</div>

	<div class="right"><hr></div>

</div>