diff --git a/README.md b/README.md index f5895e0b..f8bc4dc9 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,5 @@ assignment_markup_warmup_sprint =============================== - +Srao 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..a29b092c --- /dev/null +++ b/index.html @@ -0,0 +1,76 @@ + + + + + + +

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

+
+
+

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

+
+
+
+

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.

+
+
+
+
+

This copyrighted telecast is presented by authority of the office of the commissioner of blogging.It may not be reproduced or retransmitted in any form, and the accounts and descriptions of this game may not be disseminated, without express written consent. +

+
+
+ +
+ + \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 00000000..c01837b9 --- /dev/null +++ b/style.css @@ -0,0 +1,123 @@ +/* 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; +font-family: Verdana,"Times New Roman", Times, serif; +//width:990px;/*if u fix this then flex doen't work*/ + +} +header,section,aside,footer{ +border:1px solid black; +} +h1 { + font-size: 1.5em;/*16 pixels 1 em...general size of txt*/ + } + +h2 { + font-size: 1.2em; +} +h3{ +font-size: 1em; +} +header{ +background-color:rgba(255, 193, 7, 0.59); +position:fixed; +width:100%; +} +.content{ +display:flex; +flex-direction:row-reverse; +align-self:flex-end; +width:90%; +margin:auto; +} +main{ +display:flex; +flex-direction:column; +margin-top:30px; +width:70%; +} +aside{ +background-color:#f3a7b5; +width:20%; +height:75%; +margin-top:30px; +margin-right:10px; +} + +#title{ +display:flex; +flex-direction:column; +align-items: center; +justify-content:center; +flex-wrap:wrap; +background-color:#49bb95; +border-radius: 15px; +} +#posts{ +display:flex; +flex-direction:row; +margin-top:10px; +} +section{ +display:flex; +flex-direction:column; +background-color:rgba(30, 199, 199, 0.93); +align-items:center; +margin:5px; +min-width:0; +} +article{ +padding:5px; +align-text:left; +} + +footer{ +background-color:rgb(110, 194, 232); +align-items:center; +border-radius: 15px; +} + +@media (max-width: 989px) { + .content{ + flex-direction:column; + width:100%; + } + section{ + //flex-direction:column; + } + #posts{ + + flex-direction:column; + //flex-wrap:wrap; + } +}