Skip to content

Instantly share code, notes, and snippets.

@zachharkey

zachharkey/HTML Sections

Created March 29, 2016 22:51
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save zachharkey/4944264589c05df1a9d5dcf73aa35771 to your computer and use it in GitHub Desktop.
Save zachharkey/4944264589c05df1a9d5dcf73aa35771 to your computer and use it in GitHub Desktop.
Download ZIP
HTML 5 Sections with wrappers
Raw
HTML Sections
<div class="section section-1">
<div class="section-wrapper">
<h1>Section 1</h1>
<p>Phasellus blandit massa sed ex commodo sodales. Vestibulum eget ligula ut nibh bibendum efficitur. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In porta at nulla in auctor. Maecenas mollis lacinia orci sed ultrices. Sed viverra mauris sed nisl facilisis, eu fringilla mauris aliquam. Ut vel dictum velit. Fusce ante leo, fermentum </p>
</div>
</div>
<div class="section section-2 section--video">
<video style="height: 239" id="bgvideo" preload="none" autoplay="" loop="" poster="http://static1.squarespace.com/static/558c2e13e4b01eebf23177fc/t/56c4b565d210b80ae441a6d7/1455732071180/work-desk.JPG"><source src="https://squareflair-redux.squarespace.com/assets/video/Bars-for-Loop.mp4" type="video/mp4"><source src="https://squareflair-redux.squarespace.com/assets/video/Bars-for-Loop.ogv" type="video/ogg"><source src="https://squareflair-redux.squarespace.com/assets/video/Bars-for-Loop.webm" type="video/webm"></video>
<div class="section-wrapper">
<h1>Section 2</h1>
<p>Phasellus blandit massa sed ex commodo sodales. Vestibulum eget ligula ut nibh bibendum efficitur. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In porta at nulla in auctor. Maecenas mollis lacinia orci sed ultrices. Sed viverra mauris sed nisl facilisis, eu fringilla mauris aliquam. Ut vel dictum velit. Fusce ante leo, fermentum </p>
</div>
</div>
<div class="section section-3">
<div class="section-wrapper">
<h1>Section 3</h1>
<p>Phasellus blandit massa sed ex commodo sodales. Vestibulum eget ligula ut nibh bibendum efficitur. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In porta at nulla in auctor. Maecenas mollis lacinia orci sed ultrices. Sed viverra mauris sed nisl facilisis, eu fringilla mauris aliquam. Ut vel dictum velit. Fusce ante leo, fermentum </p>
</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment