diff --git a/.gitignore b/.gitignore new file mode 100644 index 00000000..79156171 --- /dev/null +++ b/.gitignore @@ -0,0 +1,42 @@ +# General +.DS_Store +.AppleDouble +.LSOverride + +# Icon must end with two \r +Icon + + +# Thumbnails +._* + +# Files that might appear in the root of a volume +.DocumentRevisions-V100 +.fseventsd +.Spotlight-V100 +.TemporaryItems +.Trashes +.VolumeIcon.icns +.com.apple.timemachine.donotpresent + +# Directories potentially created on remote AFP share +.AppleDB +.AppleDesktop +Network Trash Folder +Temporary Items +.apdisk + +# Swap +[._]*.s[a-v][a-z] +[._]*.sw[a-p] +[._]s[a-v][a-z] +[._]sw[a-p] + +# Session +Session.vim + +# Temporary +.netrwhist +*~ +# Auto-generated tag files +tags diff --git a/README.md b/README.md index f5895e0b..512c9e77 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,6 @@ assignment_markup_warmup_sprint =============================== +Seong Kim's forked version 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..1e69fb07 --- /dev/null +++ b/index.html @@ -0,0 +1,73 @@ + + + + + + + The Lorem Micro Blog + + + +
+

The Lorem Micro 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 eius + mod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad + minum 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 eius + mod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad + minum veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip + ex ea commodo consequat.

+
+ +
+

Another Posty Post

+

Written 1/2/2000

+

Only Thoughts...

+

lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eius + mod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad + minum 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 eius + mod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad + minum 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.

+
+
+ +
+ This copyrighted telecast is presented by the authority of the Office of + the Commissioner of Blogging. It may not be reproduced or retransmitted + in any form, and the accounts and description of this game may not be + disseminated, without express written consent. +
+
+
+ + diff --git a/styles.css b/styles.css new file mode 100644 index 00000000..f963f120 --- /dev/null +++ b/styles.css @@ -0,0 +1,203 @@ +/* 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; +} + +/* Borders */ +header, +aside, +section, +article { + border: 2px solid black; +} + +.main-heading, +.copyright { + border-radius: 20px; +} + +/* Typography */ +h1, h2, h3, h4, +p, section { + font-family: Arial, sans-serif; +} + +h1 { + font-size: 24px; + font-weight: bold; +} + +h2 { + font-size: 20px; + font-weight: bold; +} + +h3 { + font-size: 18px; +} + +h4 { + font-size: 16px; + font-weight: bold; +} + +/* Nav */ +.nav { + background: #FEE49D; + padding: 10px; + position: fixed; + top: 0; + width: 100%; +} + + +/* Containers */ +.container { + display: flex; +} + +.top { + margin-top: 60px; + padding: 0 10%; +} + +.cols { + flex-direction: column; +} + +/* Ad */ +.ad { + background: #D4A7BD; + font-weight: bold; + justify-content: center; + height: 500px; + margin-right: 10px; + padding: 10px; + text-align: center; +} + +.ad p { + margin-bottom: 10px; +} + +/* Main Heading */ +.main-heading { + background: #B7D6AA; + padding: 15px; + text-align: center; +} + +.main-heading h1 { + margin-bottom: 5px; +} + +.main-heading h3 { + font-style: italic; +} + +/* Articles */ +article { + background: #A3C4C9; + height: fit-content; + margin: 5px; + padding: 15px; +} + +article h2, +article p:first-of-type { + text-align: center; + margin-bottom: 5px; +} + +article h4, +article p { + margin-bottom: 10px; +} + +article h4:first-of-type { + margin-top: 15px; +} + +/* Footer */ +.copyright { + background: #A0C6F6; + padding: 10px; +} + + +/* Media Queries */ +@media only screen and (max-width: 990px){ + /* Top */ + .top { + margin-top: 40px; + padding: 0; + } + + /* Ad */ + .ad { + display: none; + } + + /* Border Radius */ + .main-heading, + .copyright { + border-radius: 0; + } + + /* Container */ + .container { + flex-wrap: wrap; + } + + /* Articles */ + article { + width: 45%; + } +} + +