From 59923f5fa777f47a2cf497f871a29491b0b54c5c Mon Sep 17 00:00:00 2001 From: aceredesign Date: Tue, 23 Jan 2018 17:20:00 -0800 Subject: [PATCH] 'I tried but Im terrible at css. --- index.html | 50 ++++++++++++++++++++++++++++++++++++++++++-------- styles.css | 37 +++++++++++++++++++++++++++++++++++++ 2 files changed, 79 insertions(+), 8 deletions(-) diff --git a/index.html b/index.html index f74abbf..b14ab62 100644 --- a/index.html +++ b/index.html @@ -1,11 +1,45 @@ - - Introduction to the DOM - - - - - - + + + Introduction to the DOM + + + + + + +
+
+
+

Header

+
+
+
+
+

Placeholder

+ New! +
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce risus nibh, gravida nec felis quis, facilisis facilisis + lectus. Nulla ac orci pretium, condimentum orci quis, accumsan nisi. Aliquam erat volutpat. Curabitur cursus + mattis libero, at viverra risus hendrerit quis. Fusce imperdiet tristique tortor non tincidunt. Mauris accumsan + urna nec augue feugiat porta. Proin vitae magna in ex malesuada laoreet eget a nulla. Aliquam tristique et elit + at consequat. In hac habitasse platea dictumst

+
+
+
+

Placeholder

+   +
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce risus nibh, gravida nec felis quis, facilisis facilisis + lectus. Nulla ac orci pretium, condimentum orci quis, accumsan nisi. Aliquam erat volutpat. Curabitur cursus + mattis libero, at viverra risus hendrerit quis. Fusce imperdiet tristique tortor non tincidunt. Mauris accumsan + urna nec augue feugiat porta. Proin vitae magna in ex malesuada laoreet eget a nulla. Aliquam tristique et elit + at consequat. In hac habitasse platea dictumst

+
+
+
+
+ + \ No newline at end of file diff --git a/styles.css b/styles.css index e69de29..4052256 100644 --- a/styles.css +++ b/styles.css @@ -0,0 +1,37 @@ +@import "./components/article.css"; + +.main { + border: 4px solid black; + display: flex; + flex-direction: column; +} +.head__title { + text-align: center; + font-size: 2.8em; +} + +.section { + display: flex; + flex-direction: column; +} + +body { + margin: 0; +} +@media (min-width: 584px) { + .section { + flex-direction: row; + } + .article:first-child { + border-right: 4px solid black; + } + .head__title { + font-size: 4em; + } + .article__content { + font-size: 1.5em; + } + .article__title { + font-size: 3em; + } +}