diff --git a/README.md b/README.md index f5895e0b..1c15caa7 100644 --- a/README.md +++ b/README.md @@ -3,3 +3,25 @@ assignment_markup_warmup_sprint And 1 and 2! And 1, and 2...! [An HTM5 and CSS3 project from the Viking Code School](http://www.vikingcodeschool.com) + + + + +Used Pure CSS and Bootstrap Jumbotron Templates + +Pure CSS Layout Examples +======================== + +Layout examples using [Pure CSS][pure] compiled from the [pure-site][] project. + +[pure]: http://purecss.io/ +[pure-site]: https://github.com/yahoo/pure-site + + +License +------- + +This software is free to use under the zLib license. +See the [zLib][] license for more information. + +[zLib]: http://www.zlib.net/zlib_license.html diff --git a/index.html b/index.html new file mode 100644 index 00000000..20c1b274 --- /dev/null +++ b/index.html @@ -0,0 +1,53 @@ + + + + + + + + + + + + +
+
+

Heading

+
+ + + +
+
+

Heading

+
+
+
+

Heading

+

Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.

+

View details »

+
+
+

Heading

+

Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

+

View details »

+
+
+

Heading

+

Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

+

View details »

+
+
+
+

Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

+
+
+ + +
+ + diff --git a/styles.css b/styles.css new file mode 100644 index 00000000..89081c76 --- /dev/null +++ b/styles.css @@ -0,0 +1,104 @@ +/* http://meyerweb.com/eric/tools/css/reset/ + v2.0 | 20110126 + License: none (public domain) +*/ + +html, body, div, span, applet, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +a, abbr, acronym, address, big, cite, code, +del, dfn, em, img, ins, kbd, q, s, samp, +small, strike, strong, sub, sup, tt, var, +b, u, i, center, +dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, +table, caption, tbody, tfoot, thead, tr, th, td, +article, aside, canvas, details, embed, +figure, figcaption, footer, header, hgroup, +menu, nav, output, ruby, section, summary, +time, mark, audio, video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; +} +/* HTML5 display-role reset for older browsers */ +article, aside, details, figcaption, figure, +footer, header, hgroup, menu, nav, section { + display: block; +} +body { + line-height: 1; +} +ol, ul { + list-style: none; +} +blockquote, q { + quotes: none; +} +blockquote:before, blockquote:after, +q:before, q:after { + content: ''; + content: none; +} +table { + border-collapse: collapse; + border-spacing: 0; +} + + +.navbar { + background: teal; +} + + +.flex-container { + display: -webkit-flex; + display: -moz-flex; + display: -ms-flex; + + /* flexbox setup */ + display: flex; + flex-flow: row nowrap; + justify-content: center; + align-content: center; + align-items: stretch; + +} + +.mainbar { + background: blue; + border-radius: 25px; + position: relative; +} + +.flex-item { + background: red; + margin: auto; + width: 20%; + height: 40%; + margin-top: 50px; + + color: white; + font-size: 10; + text-align: center; +} + +#sidebar { + background: green; + height: 500px; + float: left; +} + +.footer { + background: orange; + position: relative; +} + + +@media all and (max-width: 990px) { + .main { + flex-direction: column; + } +}