diff --git a/README.md b/README.md index f5895e0b..3c295a7b 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: Brent Mercer \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 00000000..beb80043 --- /dev/null +++ b/index.html @@ -0,0 +1,86 @@ + + + + + + + + + + + +
+ +
+ +
+
+

The Lorem Micro Blog

+

By Brent Mercer

+
+
+
+
+

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. Duis aute irure dolor in reprehenderit in voluptate velit esse + cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non + proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

+

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. Duis aute irure dolor in reprehenderit in voluptate velit esse + cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non + proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

+
+
+

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. Duis aute irure dolor in reprehenderit in voluptate velit esse + cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non + proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

+
+
+

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 cupidatat non + proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

+
+
+
+ +
+
+
+ + \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 00000000..fa9e9a6d --- /dev/null +++ b/style.css @@ -0,0 +1,230 @@ + +/* Begin clearfix */ +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; +} +/* End clearfix */ + + + + + + + + +body { + font-family: Arial, sans; +} + + +header { + margin-bottom: 5px; + padding-top: 20px; + padding-bottom: 20px; +} + +header h1 { + font-size: 3rem; + padding: 5px; +} + +main { + width: 990px; + margin: auto; +} + +/* Clear top nav bar*/ +.clear-nav { + padding-top: 42px; +} + + +#navbar { + overflow: hidden; + position: fixed; + top: 0; + width: 100%; +} + +nav { + padding: 10px 0 10px 20px; +} + +.advert { + margin-right: 5px; + height: 500px; + flex-direction: column; +} + +.advert-box { + position: relative; + top: 50%; + transform: translateY(-50%); + } + + +.advert-box p { + text-align: center; + padding-bottom: 5px; +} +section h1 { + font-size: 1.4rem; + padding: 10px 0 10px 5px; + text-align: center; + font-weight: 600; +} + +.post-date { + text-align: center; + padding-bottom: 25px; + font-size: 0.9rem; + font-style: italic; +} + +main h2 { + font-size: 1.1rem; + font-weight: 600; + padding-bottom: 20px; + padding-left: 5px; +} + +.post-para { + padding-bottom: 25px; + padding-left: 5px; +} + +footer { + padding: 5px 0 5px 10px; + margin-bottom: 20px; +} + +#post-area { + margin-bottom: 5px; +} + +.content-area { + margin: 0 5px 5px 5px; +} + + + +.border { + border: 3px solid black; +} + +.rounded-border { + border-radius: 15px; +} + +.flex { + display: flex; +} + +.right-margin { + margin-right: 5px; +} + +.placeholder-image { + height: 150px; + width: 200px; + background-color: grey; + margin: 0 5px; +} + +.blue { + background-color: lightblue; +} + +.red { + background-color: red; +} + +.yellow { + background-color: yellow; +} + +.green { + background-color: green; +} + +.purple { + background-color: purple; +} + +.orange { + background-color: orange; +} + +.teal { + background-color: teal; +} + +.center { + text-align: center; +} + + +@media only screen and (max-width: 990px) { + .rounded-border { + border-radius: 0px; + } + + .advert { + visibility: hidden; + position: absolute; + } + + .flex { + flex-wrap: wrap; + } + + section { + display: inline-block; + width: 48%; + margin-bottom: 5px; + } + + +} + +