From c31992502ff2d730ab259f5ce0634b32103063fb Mon Sep 17 00:00:00 2001 From: Jon Szeto Date: Fri, 1 Dec 2017 12:17:36 -0500 Subject: [PATCH 1/6] Add name to README.md --- README.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/README.md b/README.md index f5895e0b..d36227e8 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) + +Jon Szeto From 873fde72cfaf4b86c70263bdf6a2d34195434017 Mon Sep 17 00:00:00 2001 From: Jon Szeto Date: Fri, 1 Dec 2017 15:26:32 -0500 Subject: [PATCH 2/6] Create and style elements on index.html --- index.html | 47 +++++++++++++++++++ styles.css | 131 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 178 insertions(+) create mode 100644 index.html create mode 100644 styles.css diff --git a/index.html b/index.html new file mode 100644 index 00000000..989442e4 --- /dev/null +++ b/index.html @@ -0,0 +1,47 @@ + + + + + + +
+ +
+
+
+

The Lorem Micro Blog

+

By Foo Bar

+
+ +
+
+

A Most Posty Post

+

Written 1/2/2017

+

First Thoughts...

+

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

+

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

+
+
+

Another Posty Post

+

Written 1/2/2017

+

Second Thought...

+

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

+
+
+

A Posty Post

+

Written 1/2/2017

+

Be it Resolved

+

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

+
+
+
+

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

+
+
+ + diff --git a/styles.css b/styles.css new file mode 100644 index 00000000..f3e5eb2d --- /dev/null +++ b/styles.css @@ -0,0 +1,131 @@ +/* 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, blockquote, pre, +a, abbr, acronym, address, big, cite, code, +del, dfn, em, 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, canvas, details, embed, +figure, figcaption, hgroup, +menu, output, ruby, section, summary, +time, mark, audio, video { + margin: 0; + padding: 0; + border: 0; + 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; +} + +body { //remove + margin: 0; + padding: 0; +} + +header { + background-color: green; +} + +nav { +/* display: block; + overflow: hidden;*/ + background-color: yellow; +} + +nav p { + margin: 0; + padding: 10px; +} + +.header { + width:100%; + margin: 0; + padding: 0; + text-align: center; + z-index: 3; +} + +.sticky { + position: sticky; + top: 0; +} + +aside { + display: flex; + background-color: pink; + flex-direction: column; + justify-content: center; + align-items: center; + padding: 10px; +} + +article { + background-color: grey; +} + +footer { + background-color: blue; +} + +img { + width:auto; + height:auto; + border: 1px dashed black; +} + +.box { + width: auto; + height: auto; + border: 2px solid black; + padding: 2px 10px; + margin: 2px; +} + +.container { + width: 990px; + position: center; +} + +.ad-image { + width: 100px; + height: 100px; + background-color: white; + border: 1px dashed black; + display: flex; + justify-content: center; +} + +.corners { + border-radius: 20px; +} + +.text-center { + text-align: center; +} From 1ce8fa067accaeee4d081d8a2abf376eb51d8dbd Mon Sep 17 00:00:00 2001 From: Jon Szeto Date: Fri, 1 Dec 2017 17:26:02 -0500 Subject: [PATCH 3/6] Start to position elements on index.html --- index.html | 16 +++++++------- styles.css | 61 +++++++++++++++++++++++++++++++++++++----------------- 2 files changed, 51 insertions(+), 26 deletions(-) diff --git a/index.html b/index.html index 989442e4..a936885d 100644 --- a/index.html +++ b/index.html @@ -10,36 +10,38 @@
-
+

The Lorem Micro Blog

By Foo Bar

-
diff --git a/styles.css b/styles.css index f3e5eb2d..3454d15c 100644 --- a/styles.css +++ b/styles.css @@ -3,8 +3,7 @@ License: none (public domain) */ -html, body, div, span, applet, object, iframe, -h1, h2, h3, h4, h5, h6, blockquote, pre, +html, body, div, span, applet, object, iframe, h2, h3, h4, h5, h6, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, @@ -27,6 +26,8 @@ footer, header, hgroup, menu, nav, section { } body { line-height: 1; + margin: 0; + padding: 0; } ol, ul { list-style: none; @@ -44,18 +45,12 @@ table { border-spacing: 0; } -body { //remove - margin: 0; - padding: 0; -} - -header { +.title { background-color: green; + flex-grow: 6; } nav { -/* display: block; - overflow: hidden;*/ background-color: yellow; } @@ -68,8 +63,10 @@ nav p { width:100%; margin: 0; padding: 0; - text-align: center; z-index: 3; + border-top: 2px solid black; + border-bottom: 2px solid black; + background-color: green; } .sticky { @@ -79,18 +76,33 @@ nav p { aside { display: flex; - background-color: pink; flex-direction: column; justify-content: center; align-items: center; padding: 10px; } +.ad { + background-color: pink; +} + article { - background-color: grey; + align-self:flex-start; } -footer { +.article-1 { + background-color: #C0C0C0; +} + +.article-2 { + background-color: #808080; +} + +.article-3 { + background-color: #A9A9A9; +} + +.footer { background-color: blue; } @@ -101,16 +113,20 @@ img { } .box { - width: auto; - height: auto; border: 2px solid black; - padding: 2px 10px; + padding: auto; margin: 2px; } .container { - width: 990px; - position: center; + display: flex; + flex-flow: row wrap; +} + +.main-container { + display: flex; + flex-flow: row nowrap; + font-style: italic; } .ad-image { @@ -129,3 +145,10 @@ img { .text-center { text-align: center; } + +@media all and (min-width: 990px) { + .title { flex: 3 order: 0; } + aside { order: -1; } + .main-container { order: 3; } + .footer { order: 4; } +} From 34a6aa6fbf3e5e89a1361a10066ac1ceea6b0534 Mon Sep 17 00:00:00 2001 From: Jon Szeto Date: Sat, 2 Dec 2017 23:22:06 -0500 Subject: [PATCH 4/6] Finalize positioning and styling elements on index.html --- index.html | 66 ++++++++++++++++++++++++++++-------------------------- styles.css | 50 +++++++++++++++++++++++------------------ 2 files changed, 62 insertions(+), 54 deletions(-) diff --git a/index.html b/index.html index a936885d..11cbad75 100644 --- a/index.html +++ b/index.html @@ -9,41 +9,43 @@

The Lorem Micro Blog

-
-
-

The Lorem Micro Blog

-

By Foo Bar

-
+
-
-
-

A Most Posty Post

-

Written 1/2/2017

-

First Thoughts...

-

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

-

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

-

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

-
-
-

Another Posty Post

-

Written 1/2/2017

-

Second Thought...

-

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

-
-
-

A Posty Post

-

Written 1/2/2017

-

Be it Resolved

-

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

-

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

-
-
-
-

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

-
+
+
+

The Lorem Micro Blog

+

By Foo Bar

+
+
+
+

A Most Posty Post

+

Written 1/2/2017

+

First Thoughts...

+

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

+

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

+

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

+
+
+

Another Posty Post

+

Written 1/2/2017

+

Second Thought...

+

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

+
+
+

A Posty Post

+

Written 1/2/2017

+

Be it Resolved

+

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

+

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

+
+
+
+

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

+
+
diff --git a/styles.css b/styles.css index 3454d15c..df8cfe2e 100644 --- a/styles.css +++ b/styles.css @@ -47,7 +47,7 @@ table { .title { background-color: green; - flex-grow: 6; + flex-grow: 3; } nav { @@ -62,6 +62,7 @@ nav p { .header { width:100%; margin: 0; + margin-bottom: 10px; padding: 0; z-index: 3; border-top: 2px solid black; @@ -79,7 +80,8 @@ aside { flex-direction: column; justify-content: center; align-items: center; - padding: 10px; + padding: 10% 1em; + height: 75%; } .ad { @@ -88,28 +90,30 @@ aside { article { align-self:flex-start; + width: 300px; + padding: 1em; +} + +article h2{ + margin: 0; + padding: 0; } .article-1 { - background-color: #C0C0C0; + background-color: #C0C0C0; } .article-2 { - background-color: #808080; + background-color: #808080; } .article-3 { - background-color: #A9A9A9; + background-color: #A9A9A9; } .footer { background-color: blue; -} - -img { - width:auto; - height:auto; - border: 1px dashed black; + padding: 1em; } .box { @@ -119,8 +123,16 @@ img { } .container { - display: flex; - flex-flow: row wrap; + display: flex; + flex-flow: row nowrap; + justify-content: space-around; + width: 990px; + margin: auto; +} + +.content-container { + display: flex; + flex-direction: column; } .main-container { @@ -130,12 +142,13 @@ img { } .ad-image { - width: 100px; - height: 100px; + width: 200px; + height: 200px; background-color: white; border: 1px dashed black; display: flex; justify-content: center; + margin-top: 1em; } .corners { @@ -145,10 +158,3 @@ img { .text-center { text-align: center; } - -@media all and (min-width: 990px) { - .title { flex: 3 order: 0; } - aside { order: -1; } - .main-container { order: 3; } - .footer { order: 4; } -} From 4ad52f55dee67c4622ebcbc77b63eb488d4e2e19 Mon Sep 17 00:00:00 2001 From: Jon Szeto Date: Sat, 2 Dec 2017 23:39:45 -0500 Subject: [PATCH 5/6] Clean up styles.css --- styles.css | 44 +++++++++++++++++++++----------------------- 1 file changed, 21 insertions(+), 23 deletions(-) diff --git a/styles.css b/styles.css index df8cfe2e..7f6abba3 100644 --- a/styles.css +++ b/styles.css @@ -47,7 +47,27 @@ table { .title { background-color: green; - flex-grow: 3; +} + +.ad { + background-color: pink; +} + +.article-1 { + background-color: #C0C0C0; +} + +.article-2 { + background-color: #808080; +} + +.article-3 { + background-color: #A9A9A9; +} + +.footer { + background-color: aqua; + padding: 1em; } nav { @@ -67,7 +87,6 @@ nav p { z-index: 3; border-top: 2px solid black; border-bottom: 2px solid black; - background-color: green; } .sticky { @@ -84,10 +103,6 @@ aside { height: 75%; } -.ad { - background-color: pink; -} - article { align-self:flex-start; width: 300px; @@ -99,23 +114,6 @@ article h2{ padding: 0; } -.article-1 { - background-color: #C0C0C0; -} - -.article-2 { - background-color: #808080; -} - -.article-3 { - background-color: #A9A9A9; -} - -.footer { - background-color: blue; - padding: 1em; -} - .box { border: 2px solid black; padding: auto; From 9e406db315a86a156b886dbb2c2ae94cec601e9c Mon Sep 17 00:00:00 2001 From: Jon Szeto Date: Mon, 4 Dec 2017 11:45:14 -0500 Subject: [PATCH 6/6] Position elements for viewport smaller than 990px --- index.html | 86 ++++++++++++++++++++++++++++-------------------------- styles.css | 64 ++++++++++++++++++++++++++++++++-------- 2 files changed, 96 insertions(+), 54 deletions(-) diff --git a/index.html b/index.html index 11cbad75..c721d425 100644 --- a/index.html +++ b/index.html @@ -4,48 +4,50 @@ -
- -
-
- -
-
-

The Lorem Micro Blog

-

By Foo Bar

-
-
-
-

A Most Posty Post

-

Written 1/2/2017

-

First Thoughts...

-

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

-

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

-

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

-
-
-

Another Posty Post

-

Written 1/2/2017

-

Second Thought...

-

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

-
-
-

A Posty Post

-

Written 1/2/2017

-

Be it Resolved

-

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

-

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

-
-
-
-

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

-
+
+
+ +
+
+ +
+
+

The Lorem Micro Blog

+

By Foo Bar

+
+
+
+

A Most Posty Post

+

Written 1/2/2017

+

First Thoughts...

+

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

+

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

+

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

+
+
+

Another Posty Post

+

Written 1/2/2017

+

Second Thought...

+

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

+
+
+

A Posty Post

+

Written 1/2/2017

+

Be it Resolved

+

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

+

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

+
+
+ +
+
-
diff --git a/styles.css b/styles.css index 7f6abba3..2958f7e5 100644 --- a/styles.css +++ b/styles.css @@ -45,8 +45,10 @@ table { border-spacing: 0; } +/*--------------------CSS for assignment--------------------*/ .title { background-color: green; + order: 3; } .ad { @@ -55,19 +57,23 @@ table { .article-1 { background-color: #C0C0C0; + order: 5; } .article-2 { background-color: #808080; + order: 6; } .article-3 { background-color: #A9A9A9; + order: 7; } .footer { background-color: aqua; padding: 1em; + order: 8; } nav { @@ -84,9 +90,10 @@ nav p { margin: 0; margin-bottom: 10px; padding: 0; - z-index: 3; border-top: 2px solid black; border-bottom: 2px solid black; + order: 0; + } .sticky { @@ -98,14 +105,13 @@ aside { display: flex; flex-direction: column; justify-content: center; - align-items: center; padding: 10% 1em; height: 75%; } article { - align-self:flex-start; - width: 300px; + align-self: flex-start; + width: 33%; padding: 1em; } @@ -116,16 +122,16 @@ article h2{ .box { border: 2px solid black; - padding: auto; - margin: 2px; + margin: 5px; + align-items: center; } .container { display: flex; flex-flow: row nowrap; - justify-content: space-around; - width: 990px; + justify-content: center; margin: auto; + order: 1; } .content-container { @@ -136,16 +142,14 @@ article h2{ .main-container { display: flex; flex-flow: row nowrap; - font-style: italic; + order: 4; } .ad-image { width: 200px; height: 200px; background-color: white; - border: 1px dashed black; - display: flex; - justify-content: center; + border: 2px dashed black; margin-top: 1em; } @@ -156,3 +160,39 @@ article h2{ .text-center { text-align: center; } + +@media only screen and (max-width: 990px) { + .header { + padding: 0; + margin-bottom: 0; + border-top: 2px solid black; + } + +@media only screen and (max-width: 990px) { + .ad {display: none;} + .title { + order: 0; + margin: auto 0 0 0; + border-radius: 0; + border: none; + border-bottom: 2px solid black; + } + .main-container { + flex-flow: row wrap; + justify-content: space-between; + order: 1; + } + .article-1 {order: 1;} + .article-2 {order: 1;} + .article-3 {order: 2;} + .footer { + order: 2; + margin: auto 0 0 0; + border-radius: 0; + border-left: none; + border-right: none; + } + article:nth-child(3) { + flex-basis: 100% + } +}