diff --git a/README.md b/README.md index f5895e0b..74df1aa7 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) + +Steve Frazee!!! diff --git a/ad.jpg b/ad.jpg new file mode 100644 index 00000000..0e6f2f4a Binary files /dev/null and b/ad.jpg differ diff --git a/index.html b/index.html new file mode 100644 index 00000000..f24e813a --- /dev/null +++ b/index.html @@ -0,0 +1,76 @@ + + + + + + + + + +
+ +
+
+
+

Check out my vertically centered ad!

+ hairless +
+
+ +
+
+

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..f9936c9a --- /dev/null +++ b/styles.css @@ -0,0 +1,264 @@ +/*******CSS RESET********/ + +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; +} + +/************************************************************************************* +*************************************************************************************/ + +/****************************** +POSITIONING +******************************/ + +main { + max-width: 990px; + margin: 0 auto; +} + +.ad, header, .A, .B, .C{ + display: inline-block; +} + +section { + width: 80%; + float: right; +} + +/****************************** +NAV BAR +******************************/ +nav { + height: 50px; + width: 100%; + border: 1px solid black; + background-color: yellow; + position: fixed; + top: 0; + z-index: 1; +} + +nav h1 { + margin: 15px; + font-weight: 600; + font-size: 1.1em; +} + +.fixed { + height: 60px; + margin: 5px; +} + +/****************************** +HEADER +******************************/ + +header { + width: 97%; + padding: 10px; + margin-bottom: 7px; + background-color: lightgreen; + border: 2px solid black; + border-radius: 15px; + text-align: center; +} + +header h1 { + margin-bottom: 10px; + font-size: 1.2em; + font-weight: bold; +} + +header h6 { + font-style: italic; +} + + +/****************************** +Advertisment +******************************/ + +.ad { + height: 440px; + width: 19%; + background: pink; + border: 2px solid black; + text-align: center; + position: relative; +} + +img { + height: 60%; + width: 90%; + margin-top: 20px; +} + +.vertical-align { + width: 90%; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%,-50%); +} + +/****************************** +POSTS +******************************/ +.flex-query { + display: inline-block; + border: 1px solid black; +} + +.A, .B, .C { + width: 29%; + height: auto; + padding: 10px; + background-color: lightblue; + border: 2px solid black; + overflow: hidden; + vertical-align: top; +} + +.post-margin { + margin: 0 7px; +} + +h2, h6 { + text-align: center; +} + +h2 { + margin-bottom: 5px; + font-size: 1.15em; + font-weight: bold; +} + +h3 { + margin: 20px 0 15px; + font-weight: bold; +} + +/****************************** +FOOTER +******************************/ + +footer { + width: 97%; + padding: 5px 10px; + margin-top: 7px; + background-color: lightblue; + border: 2px solid black; + border-radius: 23px; +} + + +/****************************** +MEDIA QUERIES +******************************/ +@media (max-width: 990px) { + + main { + margin: 0 auto; + } + + /************************** + HEADER / NAV QUERIES + **************************/ + + header { + width: 100%; + border-radius: 0; + } + + .fixed { + height: 51px; + margin: 0; + } + + .ad, header, .A, .B, .C { + display: block; + } + + .ad { + display: none; + } + + section { + float: none; + width: 100%; + } + + /****************************** + POST QUERIES + ******************************/ + + .flex-query { + display: flex; + flex-flow: row wrap; + justify-content: space-between; + } + + .B, .C { + height: auto; + max-width: 45%; + display: inline-block; + flex-grow: 1; + flex-basis: auto; + } + + .A { + width: 100%; + margin: 15px auto; + } + + /****************************** + FOOTER QUERIES + ******************************/ + + footer { + width: 100%; + margin: 0 auto; + border-radius: 0; + } + +}