diff --git a/README.md b/README.md index f5895e0b..c74143f1 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,5 @@ assignment_markup_warmup_sprint =============================== - +Ashley McDonnell And 1 and 2! And 1, and 2...! [An HTM5 and CSS3 project from the Viking Code School](http://www.vikingcodeschool.com) diff --git a/index.html b/index.html new file mode 100644 index 00000000..20b79ab7 --- /dev/null +++ b/index.html @@ -0,0 +1,101 @@ + + + + + + The Lorem Ipsum Blog Page + + + +
+ + + +
+ +
+

The Lorem Ipsum Blog Page

+

by Ashley McDonnell

+ +
+ +
+
+

Check out my vertically centred ad!

+ +
+
+ +
+
+

A Posty Post 1

+

written 1/1/2100

+

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 + officiadeserunt mollit anim id est laborum.


+

More 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 + officiadeserunt mollit anim id est laborum.


+
+
+

A Posty Post 2

+

written 1/1/2100

+

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 + officiadeserunt mollit anim id est laborum.


+

More 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 + officiadeserunt mollit anim id est laborum.


+
+
+

A Posty Post 3

+

written 1/1/2100

+

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 + officiadeserunt mollit anim id est laborum.


+

More 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 + officiadeserunt mollit anim id est laborum.


+
+
+ + + diff --git a/style.css b/style.css new file mode 100644 index 00000000..cff8f59a --- /dev/null +++ b/style.css @@ -0,0 +1,114 @@ +/* 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; +} + + + +.navbar-sticky { + background-color: yellow; + position: fixed; + z-index: 10; + top: 0; + width: 100%; + height: 20px; + padding: 5px; + + +} + +body { + background-color: grey; + margin-left: 25px; + margin-right: 25px; + + +} + +.main-header { + margin-top: 50px; + background-color: green; + height: 110px; + width: 70%; + left: 0; + float: right; +border-radius: 5px; + + +} + +.main-header h1,h2 { + text-align: center; + margin: auto; + width: 50%; + padding: 10px; + +} + +.sidebar { + position: relative; + margin-top: 50px; + width: 390px; + float: left; + height: 800px; + background-color: maroon; + overflow: auto; + resize: both; + +} + +.ad { + height: 150px; + width: 150px; + background-color: white; + position: absolute; + top: 50%; + left: 50%; + +} + + +.posts { + display: table; + width: 70%; + background-color: aqua; + padding-top: 70px; + margin: auto; + float: right; + margin-top: 25px; + +} + +.post-content { + float: left; + width: 20%; + padding-left: 50px; + padding-right: 50px; +} + +@media only screen and (max-width : 990px) { + .sidebar{ + display: none; + } +}