diff --git a/Advert Placeholder.jpg b/Advert Placeholder.jpg new file mode 100644 index 00000000..8b2142fa Binary files /dev/null and b/Advert Placeholder.jpg differ diff --git a/README.md b/README.md index f5895e0b..577e8978 100644 --- a/README.md +++ b/README.md @@ -3,3 +3,4 @@ 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) +Courtney Van Ert diff --git a/index.html b/index.html new file mode 100644 index 00000000..14b8cf3c --- /dev/null +++ b/index.html @@ -0,0 +1,63 @@ + + + + Lorem Ipsum Blog + + + + + +
+ +
+
+

The Lorem Micro Blog

+

By Foo Bar

+
+
+
+

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. 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. +

+
+
+

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. +

+
+
+ +
+
+ + diff --git a/styles.css b/styles.css new file mode 100644 index 00000000..b4237b93 --- /dev/null +++ b/styles.css @@ -0,0 +1,227 @@ +/* CSS reset */ +/* 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; +} +*/ + + +/* CSS styling */ + +body { + background-color: #FFF; + font-family: "Comic Sans MS", Arial, sans-serif; +} + +/* Header line-height */ +h1, h2, h3, h4, h5, h6 { + line-height: 1; +} + +/* Navigation bar */ +.navbar { + background-color: #FEE49D; + border-top: 2px solid #000; + border-bottom: 2px solid #000; + top: 0; + width: 100%; + overflow: hidden; + position: fixed; +} + +/* Links inside the navbar */ +.navbar a { + color: #000; + font-size: 20px; + text-align: center; + text-decoration: none; + padding: 14px 20px; + display: block; + float: left; +} + +/* Content below navbar */ +.mainContent { + margin-top: 75px; + display: flex; + align-items: flex-start; + justify-content: space-evenly; + margin-left: 10%; + margin-right: 10%; +} + +/* Advert positioning */ +.advert { + background-color: #D4A7BD; + border: 2px solid #000; + padding: 100px 10px; + align-items: center; + float: left; + margin: 0 .5%; + text-align: center; +} + +/* Content to right of advert */ +.contentMinusAd { + float: right; + margin: 0 .5%; +} + +/* Blog title */ +.blogTitle { + background-color: #B7D6AA; + border: 2px solid #000; + border-radius: 25px; + text-align: center; +} + +/* Byline */ +#byline { + font-style: italic; +} + +/* Blog posts container*/ +.blogPosts { + display: flex; + align-items: flex-start; + justify-content: space-between; +} + +/* Individual posts */ +#postOne, #postTwo, #postThree { + background-color: #A3C4C9; + border: 2px solid #000; + padding: 0px 10px; + margin: 4px; + float: left; + width: 33.3%; +} + +/* Blog post headings */ +.postTitle { + text-align: center; +} + +/* Blog date written */ +.dateWritten { + font-weight: normal; + text-align: center; +} + +/* Footer copyright */ +.copyright { + background-color: #A0C6F6; + border: 2px solid #000; + border-radius: 25px; + padding-left: 10px; + padding-right: 10px; + clear: both; + margin-bottom: 0; +} + + +/* Responsive */ +@media (max-width: 989px) { + .mainContent { + margin-top: 55px; + display: flex; + align-items: flex-start; + justify-content: space-evenly; + width: 100%; + margin-left: 0; + margin-right: 0; + } + + .advert { + display: none; + } + + .contentMinusAd{ + width: 100%; + margin: 0 0; + } + + .blogTitle { + border-radius: 0; + border-left: 0; + border-right: 0; + } + + .blogPosts { + display: flex; + align-items: flex-start; + flex-wrap: wrap; + justify-content: space-between; + } + + .postsOneAndTwo { + display: flex; + align-items: flex-start; + justify-content: center; + } + + #postOne, #postTwo { + float: right; + width: 45%; + } + + #postThree { + width: auto; + } + + .copyright { + border-radius: 0; + border-left: 0; + border-right: 0; + padding: 0 10px; + clear: both; + margin-bottom: 0; + } + +} +