.paragraph
.inTextLink
<p class="paragraph">Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus volutpat tellus eget tellus gravida lacinia. Donec fermentum mi felis, nec ullamcorper ligula maximus sit amet. Sed nec turpis... <a class="inTextLink" href="Main_StyleGuide.html">Read more</a></p>
Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus volutpat tellus eget tellus gravida lacinia. Donec fermentum mi felis, nec ullamcorper ligula maximus sit amet. Sed nec turpis... Read more
.navButton
<a class="navButton" href="Main_StyleGuide.html">Navigation Button</a>
.submitButton
.resetButton
<a class="submitButton" href="Main_StyleGuide.html">Submit Button</a>
<a class="resetButton" href="Main_StyleGuide.html">Reset Button</a>
form[method=login]
input[type=text]
input[type=password]
<form method="login" action="#login">
<label for="formUsername">Username:</label>
<type="text" id="formUsername" placeholder="Username">
<label for="formPassword">Password:></label>
<type="password" id="formPassword" placeholder="Password">
</form>
.levelOneHeading
.levelTwoHeading
.levelThreeHeading
<h1 class="levelOneHeading">Heading One</h1>
<h2 class="levelTwoHeading">Heading Two</h2>
<h3 class="levelThreeHeading">Heading Three</h3>
.paragraph
<p class="paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ac fermentum ante. Nullam luctus, eros at luctus convallis, nisi quam suscipit nulla, viverra sollicitudin neque diam sit amet risus. Cras consectetur venenatis facilisis. Fusce at lectus magna. Maecenas posuere vulputate nunc, ac egestas lacus auctor at. Donec commodo sagittis porta. Mauris quis quam leo. In gravida arcu nec mauris aliquam vehicula. Ut dignissim nibh eu vestibulum rutrum. Cras pretium ante finibus orci tincidunt molestie. Phasellus vehicula scelerisque magna, sed ullamcorper ligula convallis egestas.</p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ac fermentum ante. Nullam luctus, eros at luctus convallis, nisi quam suscipit nulla, viverra sollicitudin neque diam sit amet risus. Cras consectetur venenatis facilisis. Fusce at lectus magna. Maecenas posuere vulputate nunc, ac egestas lacus auctor at. Donec commodo sagittis porta. Mauris quis quam leo. In gravida arcu nec mauris aliquam vehicula. Ut dignissim nibh eu vestibulum rutrum. Cras pretium ante finibus orci tincidunt molestie. Phasellus vehicula scelerisque magna, sed ullamcorper ligula convallis egestas.
.bulletedList
<ul class="bulletedList">
<li>Nunc id libero a nunc blandit volutpat</li>
<li>Nulla cursus libero et dignissim porta</li>
<li>Quisque egestas arcu at libero ornare sempe</li>
<li>Etiam vitae erat ac magna egestas maximus vel a nisl</li>
<li>In a nulla ac velit placerat consequat</li>
</ul>
.orderedList
<ol class="orderedList">
<li>Nunc id libero a nunc blandit volutpat</li>
<li>Nulla cursus libero et dignissim porta</li>
<li>Quisque egestas arcu at libero ornare sempe</li>
<li>Etiam vitae erat ac magna egestas maximus vel a nisl</li>
<li>In a nulla ac velit placerat consequat</li>
</ol>
.navButton
.navBar
.flexBox
.flexBoxNav
<nav class="navBar flexBox">
<a class="navButton flexBoxNav" href="Main_StyleGuide.html">Home</a>
<a class="navButton flexBoxNav" href="Main_StyleGuide.html">About</a>
<a class="navButton flexBoxNav" href="Main_StyleGuide.html">News</a>
<a class="navButton flexBoxNav" href="Main_StyleGuide.html">Products</a>
<a class="navButton flexBoxNav" href="Main_StyleGuide.html">Forums</a>
<a class="navButton flexBoxNav" href="Main_StyleGuide.html">Login</a>
</nav>
.centerAlignH2
.product
.paragraph
.submitButton
.flexBox
.flexBoxProductOptions
<div class="flexBox">
<div class="product">
<h2 class="centerAlignH2">Octopus</h2>
<figure>
<img src="images1_octopus.jpg" alt="A red octopus underwater">
</figure>
<p class="paragraph">Sed a mauris sit amet dui malesuada tempor a vitae diam. Nullam euismod non dui a blandit. Class aptent taciti sociosqu ad litora torquent...<a class="inTextLink" href="Main_StyleGuide.html">Read more</a></p>
<div class="flexbox">
<a class="submitButton flexBoxProductOptions" href="Main_StyleGuide.html">BUY</a>
<a class="submitButton flexBoxProductOptions" href="Main_StyleGuide.html">CART</a>
<a class="submitButton flexBoxProductOptions" href="Main_StyleGuide.html">SIMILAR</a>
</div>
</div>
</div>
Sed a mauris sit amet dui malesuada tempor a vitae diam. Nullam euismod non dui a blandit. Class aptent taciti sociosqu ad litora torquent...Read more
Sed a mauris sit amet dui malesuada tempor a vitae diam. Nullam euismod non dui a blandit. Class aptent taciti sociosqu ad litora torquent...Read more
Sed a mauris sit amet dui malesuada tempor a vitae diam. Nullam euismod non dui a blandit. Class aptent taciti sociosqu ad litora torquent...Read more
.gridBackground
.gridStructure
.paragraph
.flexBox
.flexBoxGridStructure
<div class="gridBackground flexBox">
<div class="gridStructure flexBoxGridStructure">
<figure>
<img src="images/img1_octopus.jpg" alt="A red octopus underwater">
</figure>
<p class="paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed magna lacus, tincidunt sed interdum id, aliquam in ligula. Suspendisse maximus eu orci nec vulputate. Morbi convallis efficitur felis, a imperdiet tortor convallis ut. Vivamus dolor enim, cursus auctor eleifend sit amet, lacinia quis eros. Cras sed ex scelerisque, rutrum libero auctor, pulvinar enim. Vestibulum efficitur nisl ut leo ultricies fringilla. Proin tempor nulla ligula, in porttitor sem semper sed. Integer molestie lacus nec purus tristique, et fermentum magna molestie.</p>
</div>
</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed magna lacus, tincidunt sed interdum id, aliquam in ligula. Suspendisse maximus eu orci nec vulputate. Morbi convallis efficitur felis, a imperdiet tortor convallis ut. Vivamus dolor enim, cursus auctor eleifend sit amet, lacinia quis eros. Cras sed ex scelerisque, rutrum libero auctor, pulvinar enim. Vestibulum efficitur nisl ut leo ultricies fringilla. Proin tempor nulla ligula, in porttitor sem semper sed. Integer molestie lacus nec purus tristique, et fermentum magna molestie.
Sollicitudin ornare mauris accumsan mi velit, sit amet auctor mauris sagittis eu. Sed auctor lobortis diam, eu feugiat metus dignissim vel. Duis tincidunt arcu facilisis ultricies tincidunt. Sed hendrerit massa vel dignissim ullamcorper. Nullam in pretium purus, sed placerat felis. Suspendisse tempus metus eget mattis vulputate. Vestibulum id efficitur enim. Fusce ultricies justo eget.
Pellentesque at arcu eget dui elementum mattis eget ut urna. Nam scelerisque congue varius. Sed hendrerit massa vel dignissim ullamcorper. Nullam in pretium purus, sed placerat felis. Suspendisse tempus metus eget mattis vulputate. Vestibulum id efficitur enim. Fusce ultricies justo eget sapien congue, nec convallis dolor fermentum. Morbi dapibus malesuada efficitur. Mauris sit amet iaculis sapien. Vivamus blandit gravida ornare. Vestibulum ultrices aliquet vestibulum. Sed fringilla sed dui et ultricies.
Donec et velit efficitur, iaculis ligula venenatis, consectetur ligula. Proin bibendum faucibus euismod. Mauris facilisis, urna ut scelerisque pharetra. Vestibulum dignissim quis ante id sodales.
Pellentesque et nisl nec nibh sollicitudin ornare. Mauris accumsan mi velit, sit amet auctor mauris sagittis eu. Sed auctor lobortis diam, eu feugiat metus dignissim vel. Duis tincidunt arcu facilisis ultricies tincidunt. Vestibulum dignissim quis ante id sodales. In accumsan aliquam enim ac blandit. Donec porta ligula sed turpis pharetra accumsan. Donec et velit efficitur, iaculis ligula venenatis, consectetur ligula. Proin bibendum faucibus euismod. Mauris facilisis, urna ut scelerisque pharetra, magna enim.
Fusce vulputate eget ante ac gravida. Maecenas ullamcorper blandit efficitur. Aliquam convallis maximus massa. Aliquam vitae turpis mauris. Integer efficitur eros non diam dignissim, non malesuada sem aliquam. Morbi eget ante at sem faucibus pharetra. Praesent et risus a turpis posuere scelerisque sit amet consectetur nisi. Integer ac risus in dui pulvinar vestibulum. Fusce libero sapien, rhoncus varius orci eget, accumsan vestibulum tellus. Duis ut nulla justo. Pellentesque volutpat nisl ac dictum tincidunt. Nullam et scelerisque leo. Nunc id laoreet nibh. Integer consequat eros ac ante lacinia condimentum. Etiam auctor urna ut placerat mollis. Nunc bibendum efficitur luctus.
Maecenas et ultrices urna, quis hendrerit ex. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In sagittis enim ac feugiat hendrerit. Ut egestas est orci, sed gravida risus imperdiet in. Duis a augue mollis, luctus tortor eget, interdum turpis. Donec quis aliquam metus. Aliquam pharetra porttitor libero sit amet rutrum. Etiam finibus enim ullamcorper, pretium nulla nec, malesuada eros. Nunc ex mi, hendrerit in viverra in, consectetur vitae enim. Aenean orci lacus, volutpat eu risus in, mollis luctus quam. Etiam maximus ornare ante, sit amet finibus lacus elementum aliquam. Nullam arcu leo, gravida sed egestas consequat, dapibus a dui. Etiam maximus tincidunt pulvinar. Nulla id est imperdiet turpis pretium placerat. Phasellus ac ornare magna. (Source)
#swatchffffff, #swatch000000, #swatch49c8e5, #swatchf9bd77, #swatch225c89, #swatchcc4e20, #swatch77e5ff, #swatchf9bd77, #swatchf79c7b, #swatch112035, #swatch4385b7
<div id="swatchffffff">
<p>#FFFFFF</p>
</div>
#FFFFFF
#000000
#49c8e5
#f9bd77
#225c89
#cc4e20
#77e5ff
#f79c7b
#112035
#4385b7