From 9de20c9617dce2e25188868c7f005819ce2b721e Mon Sep 17 00:00:00 2001 From: Karolis S Date: Thu, 30 Nov 2017 15:33:04 +1100 Subject: [PATCH 1/4] updated readme with my name --- README.md | 2 ++ index.html | 0 2 files changed, 2 insertions(+) create mode 100644 index.html diff --git a/README.md b/README.md index f5895e0b..d4c32eb0 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,7 @@ assignment_markup_warmup_sprint =============================== +# Created by Karolis + 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..e69de29b From 6114b9f2715fe9b7cd5d954bf41761ffd5cbf57a Mon Sep 17 00:00:00 2001 From: Karolis S Date: Thu, 30 Nov 2017 16:50:31 +1100 Subject: [PATCH 2/4] added basic layout --- index.html | 50 ++++++++++++++++++++++++++++++++++++++++++++++++++ styles.css | 50 ++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 100 insertions(+) create mode 100644 styles.css diff --git a/index.html b/index.html index e69de29b..5c607cf6 100644 --- a/index.html +++ b/index.html @@ -0,0 +1,50 @@ + + + + + + + + Document + + + +
+
    +
  • Item 1
    • +
  • Item 2
    • +
  • Item 2
    • +
+
+ +
+
+ + Side Add + +
+
+
+
+

Micro Blog

+
+
+
Post1
+
Post2
+
Post3
+
+ +
+ +
+ Footer +
+
+ + +
+ + + + + \ No newline at end of file diff --git a/styles.css b/styles.css new file mode 100644 index 00000000..96bfd8e1 --- /dev/null +++ b/styles.css @@ -0,0 +1,50 @@ +body { + display: flex; + flex-direction: column; +} + +section { + border: 1px solid; + border-radius: 5px; + padding: 10px; + margin: 10px; +} + +.nav-items { + display: flex; + justify-content: center; + list-style: none; + +} + +.nav-item { + padding-left: 20px; + text-decoration: line-through; +} + +.main-container { + display: flex; + +} + +.side-area { + flex: 1; +} + +.container { + flex-direction: column; + flex: 3; + +} + +.post-item { + border: 1px dashed; +} + +.posts-container { + display: flex; + flex-direction: row; + justify-content: space-between; + padding: 10px; +} + From 7f2f0680bb99218b7c249e18680bf40791538ea8 Mon Sep 17 00:00:00 2001 From: Karolis Stulgys Date: Fri, 1 Dec 2017 16:52:18 +1100 Subject: [PATCH 3/4] improved layourt --- index.html | 93 ++++++++++++++++++++++++++++++++++++------------------ styles.css | 82 +++++++++++++++++++++++++++++++++++++++++++++-- 2 files changed, 142 insertions(+), 33 deletions(-) diff --git a/index.html b/index.html index 5c607cf6..8280d1da 100644 --- a/index.html +++ b/index.html @@ -9,42 +9,73 @@ -
-
    -
  • Item 1
    • -
  • Item 2
    • -
  • Item 2
    • -
-
- -
-
- - Side Add - -
-
-
-
-

Micro Blog

-
-
-
Post1
-
Post2
-
Post3
+
+
+
+
+
    +
  • Item 1
    • +
  • Item 2
    • +
  • Item 2
    • +
+
- -
- -
- Footer -
-
- +
+ + +
+
+ + Side Add + +

+ Narrow Version + + Set up media queries so the page operates like the one in the second mockup. + Play with it to make sure the element layouts behave as expected when you cross the breakpoint. + Commit to Github. + Finally, refactor and clean up redundancies in your styles or markup. Try to conform to the best practices we covered earlier. Now is when you aim for good-looking code. +

+
+
+
+
+

Micro Blog

+
+
+
+

Some header 1

+

Title 1

+

In publishing and graphic design, lorem ipsum is a filler text or greeking commonly used to demonstrate the textual elements of a graphic document or visual presentation. Replacing meaningful content with placeholder text allows designers to design the form of the content before the content itself has been produced.

+

Title 1.1

+

In publishing and graphic design, lorem ipsum is a filler text or greeking commonly used to demonstrate the textual elements of a graphic document or visual presentation. Replacing meaningful content with placeholder text allows designers to design the form of the content before the content itself has been produced.

+
+
+

Some header 2

+

Title 2

+

In publishing and graphic design, lorem ipsum is a filler text or greeking commonly used to demonstrate the textual elements of a graphic document or visual presentation. Replacing meaningful content with placeholder text allows designers to design the form of the content before the content itself has been produced.

+
+
+

Some header 3

+

Title 3

+

In publishing and graphic design, lorem ipsum is a filler text or greeking commonly used to demonstrate the textual elements of a graphic document or visual presentation. Replacing meaningful content with

+
+
+ +
+ +
+ Footer +
+
+ + +
+ \ No newline at end of file diff --git a/styles.css b/styles.css index 96bfd8e1..dfb9a9f0 100644 --- a/styles.css +++ b/styles.css @@ -1,6 +1,28 @@ +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; +} + body { display: flex; flex-direction: column; + } section { @@ -10,27 +32,58 @@ section { margin: 10px; } +.wrapper { + max-width: 990vw; + display: flex; + +} + +h1 { + text-align: center; +} + +.nav-parent { + position: relative; + + +} + +.nav-container { + position: fixed; + width: 100%; + + +} + .nav-items { display: flex; justify-content: center; list-style: none; + } .nav-item { padding-left: 20px; - text-decoration: line-through; + } .main-container { display: flex; + flex-direction: row; + padding-top: 60px; + justify-content: center; } .side-area { flex: 1; + height: 50vh; + align-self: center; } + + .container { flex-direction: column; flex: 3; @@ -39,12 +92,37 @@ section { .post-item { border: 1px dashed; + border-radius: 5px; + width: 27%; + margin: 10px; + padding: 10px; + + +} + +.post-item h2, h3 { + text-align: center; } .posts-container { display: flex; flex-direction: row; + flex-wrap: wrap; justify-content: space-between; - padding: 10px; + align-items: flex-start; +} + +@media all and (max-width:990px) { + .side-area { + display: none; + } + .post-item { + width: 45%; + } + + .posts-container :last-child { + flex: 1; + } + } From f3beec56e0ba52b853a6516b11672aea5cef191a Mon Sep 17 00:00:00 2001 From: kstulgys Date: Fri, 1 Dec 2017 21:41:49 +1100 Subject: [PATCH 4/4] final commit --- index.html | 4 ++-- styles.css | 65 +++++++++++++++++++++++++++--------------------------- 2 files changed, 34 insertions(+), 35 deletions(-) diff --git a/index.html b/index.html index 8280d1da..eb3da6d4 100644 --- a/index.html +++ b/index.html @@ -39,7 +39,7 @@

-
+

Micro Blog

@@ -63,7 +63,7 @@

Title 3

- +
Footer diff --git a/styles.css b/styles.css index dfb9a9f0..abf840a5 100644 --- a/styles.css +++ b/styles.css @@ -1,4 +1,4 @@ -html, body, div, span, applet, object, iframe, +/* 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, @@ -17,25 +17,24 @@ time, mark, audio, video { font-size: 100%; font: inherit; vertical-align: baseline; -} +} */ body { - display: flex; - flex-direction: column; - + margin: 0; + padding: 0; + border: 0; } section { border: 1px solid; border-radius: 5px; padding: 10px; - margin: 10px; } .wrapper { - max-width: 990vw; display: flex; - + flex-direction: column; + } h1 { @@ -44,64 +43,56 @@ h1 { .nav-parent { position: relative; - - -} +} .nav-container { position: fixed; - width: 100%; + width: 100%; - -} +} .nav-items { display: flex; - justify-content: center; + justify-content: flex-start; list-style: none; - - } .nav-item { - padding-left: 20px; - + margin-right: 15px; } .main-container { + width: 990px; display: flex; flex-direction: row; - padding-top: 60px; - justify-content: center; - + padding-top: 85px; + justify-content: space-between; + margin: 0 auto; } .side-area { flex: 1; - height: 50vh; + height: 40vh; align-self: center; + margin-right: 20px; } - - .container { flex-direction: column; flex: 3; - } .post-item { border: 1px dashed; border-radius: 5px; - width: 27%; - margin: 10px; + width: 29%; + margin: 15px 0 15px 0px; padding: 10px; - - } .post-item h2, h3 { text-align: center; + } .posts-container { @@ -109,20 +100,28 @@ h1 { flex-direction: row; flex-wrap: wrap; justify-content: space-between; - align-items: flex-start; } + @media all and (max-width:990px) { .side-area { display: none; } + .posts-container { + justify-content: space-around; + } .post-item { width: 45%; } .posts-container :last-child { - flex: 1; + flex: .97; + margin-top: 0; } -} + .main-container { + padding-top: 70px; + width: 100vw; + } +}