From a3905f67fe920898fd5cc07d04a6e1853a46d6f2 Mon Sep 17 00:00:00 2001 From: h7x4 Date: Mon, 14 Sep 2020 11:27:57 +0200 Subject: [PATCH] Complete assignment --- a.txt | 11 +++++++++++ css/style.css | 34 ++++++++++++++++++++++++++++++++++ list.html | 23 ++++++++++++++++++++++- position.html | 44 ++++++++++++++++++++++++++++++++++++++++++-- style.css | 8 -------- 5 files changed, 109 insertions(+), 11 deletions(-) create mode 100644 css/style.css delete mode 100644 style.css diff --git a/a.txt b/a.txt index e69de29..470b49b 100644 --- a/a.txt +++ b/a.txt @@ -0,0 +1,11 @@ +1. The difference between `position: absolute;` and `position: fixed;` is that the absolute element is fixed onto the page itself, but the fixed element is fixed onto the "screen" or web browser so to say. If you scroll down, the fixed element won't move, but the absolute value will follow the page as any other unstyled element. + +2. + +```CSS + element > anotherElement:nth-of-type(3n) { + ... + } +``` + +[//]: # vim: set syntax=markdown: \ No newline at end of file diff --git a/css/style.css b/css/style.css new file mode 100644 index 0000000..d28202d --- /dev/null +++ b/css/style.css @@ -0,0 +1,34 @@ +html, body{ + margin: 0; + padding: 0; + height: 100%; +} + +/* Part 3 */ + +.wrapper { + padding-bottom: 60px; +} + +.wrapper footer { + position: fixed; + bottom: 0; + padding: 20px 40px; + font-size: 20px; + color: white; + background-color: #404040C0; + margin-block-end: 0; + width: 100%; + text-align: center; +} + + +/* Part 4 */ + +li { + list-style-type: square; +} + +ul > ul > li:last-child { + font-weight: 900; +} \ No newline at end of file diff --git a/list.html b/list.html index 34dbf41..4d3bf01 100644 --- a/list.html +++ b/list.html @@ -3,12 +3,33 @@ A list apart +

This is a list

-
+ + +
Here's some footer text
diff --git a/position.html b/position.html index 3caddb2..498bfe4 100644 --- a/position.html +++ b/position.html @@ -23,6 +23,8 @@ border-color: #0060A3; border-style: solid; height: 400px; + + margin: 0 25%; } .one{ @@ -31,6 +33,9 @@ border-width: 2px; border-color: #FAA21B; border-style: solid; + + margin-top: 25px; + margin-left: 25px; } .two{ @@ -40,6 +45,11 @@ border-color: #FAA21B; border-style: solid; background-color: #fff; + + margin-left: 25px; + position: relative; + top: 145px; + } .three{ @@ -49,13 +59,21 @@ border-color: #FAA21B; border-style: solid; background-color: #fff; + + margin-left: auto; + position: relative; + left: 50px; + bottom: 150px; + } .five{ bottom: 10px; - right: 10px; font-size: 35px; font-family: sans-serif; + + text-align: right; + margin-right: 25px; } .four{ @@ -64,10 +82,32 @@ border-width: 2px; border-color: #FAA21B; border-style: solid; + + margin: 25px auto; } /* Part 2 */ + a { + color:blue; + } + + a:hover { + color: cyan; + } + + a::selection { + background-color: orange; + } + + a:visited { + color: purple; + } + + a:visited:hover { + color: green; + } + @@ -83,7 +123,7 @@
- CSS is awesome + CSS is awesome
diff --git a/style.css b/style.css deleted file mode 100644 index 5715011..0000000 --- a/style.css +++ /dev/null @@ -1,8 +0,0 @@ -html, body{ - margin: 0; - padding: 0; - height: 100%; -} - -/* Part 4 */ -