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..eb3da6d4 --- /dev/null +++ b/index.html @@ -0,0 +1,81 @@ + + + + + + + + Document + + + +
+
+
+
+
    +
  • Item 1
    • +
  • Item 2
    • +
  • Item 2
    • +
+
+
+
+ + + +
+
+ + 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 new file mode 100644 index 00000000..abf840a5 --- /dev/null +++ b/styles.css @@ -0,0 +1,127 @@ +/* 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 { + margin: 0; + padding: 0; + border: 0; +} + +section { + border: 1px solid; + border-radius: 5px; + padding: 10px; +} + +.wrapper { + display: flex; + flex-direction: column; + +} + +h1 { + text-align: center; +} + +.nav-parent { + position: relative; +} + +.nav-container { + position: fixed; + width: 100%; + +} + +.nav-items { + display: flex; + justify-content: flex-start; + list-style: none; +} + +.nav-item { + margin-right: 15px; +} + +.main-container { + width: 990px; + display: flex; + flex-direction: row; + padding-top: 85px; + justify-content: space-between; + margin: 0 auto; +} + +.side-area { + flex: 1; + height: 40vh; + align-self: center; + margin-right: 20px; +} + +.container { + flex-direction: column; + flex: 3; +} + +.post-item { + border: 1px dashed; + border-radius: 5px; + width: 29%; + margin: 15px 0 15px 0px; + padding: 10px; +} + +.post-item h2, h3 { + text-align: center; + +} + +.posts-container { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-between; +} + + +@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: .97; + margin-top: 0; + } + + .main-container { + padding-top: 70px; + width: 100vw; + } + +}