diff --git a/README.md b/README.md index f5895e0b..e77bf105 100644 --- a/README.md +++ b/README.md @@ -3,3 +3,5 @@ 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) + +by Ryan Barnett diff --git a/index.html b/index.html new file mode 100644 index 00000000..ec305530 --- /dev/null +++ b/index.html @@ -0,0 +1,72 @@ + + + + Lorem Ipsum Blog Page + + + + + + +
+

The Lorem Mirco Blog

+
+ +
+ + +
+
+

The Lorem Micro Blog


+

by Ryan Barnett

+
+ +
+

A Most Posty Post

+

Written 1/3/2000

+

First Thoughts...

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod + tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, + quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo + consequat.

+

Additional Thoughts...

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod + tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, + quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo + consequat.

+
+ +
+

Another Posty Post

+

Written 1/2/2000

+

Only Thoughts...

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod + tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, + quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo + consequat.

+
+ +
+

A Posty Post

+

Written 1/1/2000

+

Be It Resolved

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod + tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, + quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo + consequat.

+

Duis aute irure dolor in reprehenderit in voluptate velit esse + cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat

+
+ + +
+
+ + \ No newline at end of file diff --git a/reset.css b/reset.css new file mode 100644 index 00000000..af944401 --- /dev/null +++ b/reset.css @@ -0,0 +1,48 @@ +/* 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; +} \ No newline at end of file diff --git a/styles.css b/styles.css new file mode 100644 index 00000000..cc820050 --- /dev/null +++ b/styles.css @@ -0,0 +1,92 @@ +.vertical-align { + position: absolute; + top: 50%; + -webkit-transform: translate(-50%); + -ms-transform: translateY(-50%); + transform: translateY(-50%); } + +h2 { + font-weight: bold; + line-height: 40px; + font-size: 20px;} + +h3 { + font-weight: bold; + line-height: 36px; + font-size: 18px;} + +h4 { + font-weight: bold; + line-height: 30px; + font-size: 15px;} + +@media screen and (min-width: 890px) { + .container { + max-width: 990px; + margin: 5px 50px; } } +@media screen and (max-width: 890px) { + .container { + width: 100%; + margin: 5px 0; } } + +aside, footer, header, article { + min-height: 40px; + border: 1px solid black; + background-color: #98d8ea; + float: left; + padding: 15px; + margin-bottom: 15px; + box-sizing: border-box; } + +header { + width: 110%; + margin-left: 0; + padding: none; + background-color: #f7f96b; } + +aside { + width: 25%; + min-height: 500px; + float: left; + background-color: pink; + position: relative; + text-align: center; } + aside > div { + width: 100%; + padding: 15px; + line-height: 36px; + box-sizing: border-box; } + aside img { + width: 150px; + height: 150px; + border: 2px solid blue; } + @media screen and (max-width: 890px) { + aside { + display: none; } } + +main { + width: 74%; + float: right; } + main header { + background-color: #6ad871; } + main header, main footer { + clear: both; + width: 100%; } + @media screen and (min-width: 890px) { + main header, main footer { + border-radius: 25px; } } + @media screen and (max-width: 890px) { + main { + width: 100%; } } + +article { + width: 30%; + margin: 1%; + background-color: #888; } + @media screen and (max-width: 890px) { + article { + width: 48%; } } + +@media screen and (max-width: 890px) { + .mobile-wide { + width: 98%; } } \ No newline at end of file