Eric Rasch ericrasch

Resolves #

Description

Staging Links

Screenshots (if appropriate):

All Form Elements

All the form elements on one page so you can see default browser styling. Fork it to play with your own styling.

Forked from Chris Smith's Pen All Form Elements.

A Pen by HigherEducation.com on CodePen.

License.

full viewport width image (container) inside article

elements like images (or containers) break out from inside a wrapper to full viewport width

A Pen by HigherEducation.com on CodePen.

License.

Links to website building zen

These are some of the tools I leverage to making better wesites, more efficiently:

Code Editors

git + GitHub

$ cd {{project-directory}}
$ rm -rf .git
$ git init
$ git add .
$ git commit -m 'Initial commit'
$ git remote add origin {{url}}
$ git push --force

RewriteEngine on #redirect http non-www to https://www RewriteCond %{HTTPS} off RewriteCond %{HTTP_HOST} ^(www.)?example.com$ RewriteRule (.) https://www.example.com/$1 [R=301,L] #redirect https non-www to www RewriteCond %{HTTPS} on RewriteCond %{HTTP_HOST} ^example.com$ RewriteRule (.) https://www.example.com/$1 [R=301,L]

	<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"></link>
	<div class="social">
	<a href="#" class="fb" title="Join us on Facebook"><i class="fa fa-facebook" aria-hidden="true"></i></a>
	<a href="#" class="tw" title="Join us on Twitter"><i class="fa fa-twitter" aria-hidden="true"></i></a>
	<a href="#" class="insta" title="Join us on Instagram"><i class="fa fa-instagram" aria-hidden="true"></i></a>
	<a href="#" class="in" title="Join us on Linked In"><i class="fa fa-linkedin" aria-hidden="true"></i></a>
	</div>

	<div class="container">
	<div class="card">
	<div class="image">
	<img src="http://res.cloudinary.com/dzuf4ztit/image/upload/c_fill,f_auto,g_center,q_auto:good,r_0,w_350/samples/landscapes/nature-mountains.jpg">
	</div>
	<div class="content">
	<div>AMAZING WILDERNESS VIEWS • 350 ACRES</div>
	<div class="price">$750,000</div>
	<div class="address">101 Greenfield Drive</div>
	</div>

	<div class="content">
	<h1>So <code>position: sticky</code> is a thing now in a <em>bunch</em> of browsers.</h1>

	<p><a href="https://caniuse.com/#search=position%3A%20sticky" target="_blank">https://caniuse.com/#search=position%3A%20sticky</a></p>

	<p><a href="https://developers.google.com/web/updates/2012/08/Stick-your-landings-position-sticky-lands-in-WebKit" target="_blank">https://developers.google.com/web/updates/2012/08/Stick-your-landings-position-sticky-lands-in-WebKit</a></p>

	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam lectus lectus, adipiscing molestie accumsan ut, facilisis at massa. Praesent ut dictum massa. Sed vel nunc nec augue vestibulum consectetur ac mattis elit. Proin euismod cursus cursus. Sed ut aliquet lectus. Fusce pellentesque pretium massa, ut gravida elit sagittis sit amet. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris at augue justo. In mollis hendrerit eleifend. Aenean ultricies au