diff --git a/README.md b/README.md index f5895e0b..ab4eab5d 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) + +Richard Lahaie markup assignment diff --git a/hamms.jpg b/hamms.jpg new file mode 100644 index 00000000..c63b302b Binary files /dev/null and b/hamms.jpg differ diff --git a/index.html b/index.html new file mode 100644 index 00000000..ab2268a3 --- /dev/null +++ b/index.html @@ -0,0 +1,74 @@ + + + + + + + Lorem Ipsum Blog + + + + + + + +
+ +
+
+

The Lorem Micro Blog

+

by Foo Bar

+
+
+
+

A Most Posty Post

+

Written 1/3/2000

+

Fist Thoughts...

+

Proident non dolore. Probant ne quem id iis quis multos quo commodo. Nisi + cohaerescant eiusmod aute iudicem, deserunt quid nescius, cillum commodo + praesentibus, e senserit instituendarum, pariatur anim probant expetendis, illum + nostrud mandaremus si cillum eu eiusmod, se fore ita culpa.

+
+

Additional Thoughts...

+

Ab veniam pariatur relinqueret, tempor ubi fabulas ut excepteur anim appellat + ullamco iis et noster amet enim quibusdam. Ea voluptate cohaerescant, qui enim + hic dolor. Aute ut nescius, quamquam sunt nescius. A non arbitrantur. Doctrina + ut minim admodum. Deserunt ea veniam. Ullamco ne sint cupidatat.

+
+
+

Another Posty Post

+

Written 1/2/2000

+

Only Thoughts...

+

Proident non dolore. Probant ne quem id iis quis multos quo commodo. Nisi + cohaerescant eiusmod aute iudicem, deserunt quid nescius, cillum commodo + praesentibus, e senserit instituendarum, pariatur anim probant expetendis, illum + nostrud mandaremus si cillum eu eiusmod, se fore ita culpa.

+
+
+

A Posty Post

+

Written 1/1/2000

+

Be it Resolved

+

Minim e cernantur. Voluptate domesticarum ut vidisse. Quo lorem legam aliqua + quamquam, hic varias offendit, ubi ipsum nisi nam litteris ita nisi doctrina + eruditionem.

+
+

Te nulla quis quem aliquip ab ad veniam + coniunctione. Quorum nam incurreret. Expetendis qui malis arbitror ubi multos + doctrina ea appellat est noster ubi senserit si quem quo appellat noster quae ex + quae.

+
+
+ +
+
+ + + diff --git a/reset.css b/reset.css new file mode 100644 index 00000000..73614e17 --- /dev/null +++ b/reset.css @@ -0,0 +1,47 @@ +/* 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; +} diff --git a/stylesheet.css b/stylesheet.css new file mode 100644 index 00000000..96806425 --- /dev/null +++ b/stylesheet.css @@ -0,0 +1,209 @@ +/* Main body styling */ + +body { + background-color: #FFF; + font-family: "Comic Sans MS", Arial, sans-serif; +} + +/* Header line-height */ + h2, h3, h4 { + 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: 15px; + 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%; +} + +h2 { + font-size: 20px; + margin-top: 15px; + margin-bottom: 10px; + font-weight: bolder; +} + +h4{ + font-size: 15px; + font-weight: bolder; + margin-bottom: 10px; +} + +/* Advertise positioning */ +.advertise { + background-color: #D4A7BD; + border: 2px solid #000; + padding: 100px 60px; + align-items: center; + float: left; + margin: 0 .5%; + text-align: center; +} +/* Ad image-size */ +img{ + width: 100px; +} + +#adText{ + display: flex; + margin-left: -70px; + margin-right: -70px; +} + +/* Content to right of advert */ +.contentNoAd { + float: right; + margin: 0 .5%; +} + +/* Blog title */ +.pageTitle { + background-color: #B7D6AA; + border: 2px solid #000; + border-radius: 25px; + text-align: center; + height: 80px; + width: 700px; +} + +/* Author */ +#author { + font-style: italic; + margin-top: 5px; +} + +/* 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 15px; + margin: 4px; + float: left; + width: 33%; +} + +/* Blog post headings */ +.postTitle { + text-align: center; +} + +/* Blog date */ +.postDate { + font-weight: normal; + text-align: center; + margin-bottom: 10px; + margin-top: -2px; + font-size: 12px; +} + +/* Footer copyright */ +.copyright { + background-color: #A0C6F6; + border: 2px solid #000; + border-radius: 25px; + padding-left: 10px; + padding-right: 10px; + clear: both; + margin-bottom: 0; + margin-top: 10px; + text-align: justify; + height: 60px; +} + +#disclaimer{ + margin-top: 5px; + font-size: small; +} + +/* 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; + } + + .advertise { + display: none; + } + + .contentNoAd{ + width: 100%; + margin: 0 0; + } + + .pageTitle { + 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; + } + +}