From b7d10f7af7a0807cbcacb64449a123a21ca39bc3 Mon Sep 17 00:00:00 2001 From: Llewellyn van der Merwe Date: Sat, 18 Sep 2021 09:27:22 +0200 Subject: [PATCH] Week 3: Add Media Queries to Your Style Sheet --- week-03/css/styles.css | 67 +++++++++++++++++++++++++++++++++++++++++ week-03/html/index.html | 66 ++++++++++++++++++++++++++++++++++++++++ 2 files changed, 133 insertions(+) create mode 100644 week-03/css/styles.css create mode 100644 week-03/html/index.html diff --git a/week-03/css/styles.css b/week-03/css/styles.css new file mode 100644 index 0000000..10421d1 --- /dev/null +++ b/week-03/css/styles.css @@ -0,0 +1,67 @@ +/* base class details */ +.home_article { + margin: 5px; + background-color: LightGray; + padding: 10px; +} + +/* Mobile devices */ +@media screen and (max-width: 480px) { + body { + background-color: red; + } + /* hide the right article */ + #right {W + display: none; + } +} + +/* iPads, Tablets. */ +@media screen and (min-width: 481px) { + body { + background-color: orange; + } + /* add radius to article style */ + .home_article { + border-radius: 14px; + } +} + +/* Small screens, laptops */ +@media screen and (min-width: 769px) { + body { + background-color: #589ddb; + } + /* increase the font size of class piet */ + .piet { + font-size: 20px; + } +} + +/* Desktops, large screens. */ +@media screen and (min-width: 1025px) { + body { + background-color: green; + } + main { + display: table; + } + #left { + float: left; + width: 47%; + } + #right { + float: right; + width: 47%; + } + .piet { + text-shadow: 1px 2px 3px; + } +} + +/* Extra large screens, TV. */ +@media screen and (min-width: 1201px) { + body { + background-color: white; + } +} diff --git a/week-03/html/index.html b/week-03/html/index.html new file mode 100644 index 0000000..200af69 --- /dev/null +++ b/week-03/html/index.html @@ -0,0 +1,66 @@ + + + + + + + + Llewellyn van der Merwe: Week 3 + + + + + + + +
+

Llewellyn van der Merwe

+ + +
+ + +
+ + +
+ +

First Header

+ +

Maecenas quis odio sit amet ipsum maximus egestas. Maecenas gravida magna vehicula quam pulvinar varius. + Vestibulum venenatis quam enim, a eleifend tortor blandit non.

+
+
+ +

Second Header

+ +

Maecenas quis odio sit amet ipsum maximus egestas. Maecenas gravida magna vehicula quam pulvinar varius. + Vestibulum venenatis quam enim, a eleifend tortor blandit non.

+
+
+ + + + +