diff --git a/about.html b/Exercise 1-2/about.html similarity index 100% rename from about.html rename to Exercise 1-2/about.html diff --git a/article.html b/Exercise 1-2/article.html similarity index 100% rename from article.html rename to Exercise 1-2/article.html diff --git a/css/article.css b/Exercise 1-2/css/article.css similarity index 100% rename from css/article.css rename to Exercise 1-2/css/article.css diff --git a/css/style.css b/Exercise 1-2/css/style.css similarity index 100% rename from css/style.css rename to Exercise 1-2/css/style.css diff --git a/img/cup-icon.svg b/Exercise 1-2/img/cup-icon.svg similarity index 100% rename from img/cup-icon.svg rename to Exercise 1-2/img/cup-icon.svg diff --git a/img/favicon.svg b/Exercise 1-2/img/favicon.svg similarity index 100% rename from img/favicon.svg rename to Exercise 1-2/img/favicon.svg diff --git a/img/html_joke.jpg b/Exercise 1-2/img/html_joke.jpg similarity index 100% rename from img/html_joke.jpg rename to Exercise 1-2/img/html_joke.jpg diff --git a/img/te.png b/Exercise 1-2/img/te.png similarity index 100% rename from img/te.png rename to Exercise 1-2/img/te.png diff --git a/questions.md b/Exercise 1-2/questions.md similarity index 100% rename from questions.md rename to Exercise 1-2/questions.md diff --git a/Exercise 3/a.txt b/Exercise 3/a.txt new file mode 100644 index 0000000..470b49b --- /dev/null +++ b/Exercise 3/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/Exercise 3/css/style.css b/Exercise 3/css/style.css new file mode 100644 index 0000000..d28202d --- /dev/null +++ b/Exercise 3/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/Exercise 3/list.html b/Exercise 3/list.html new file mode 100644 index 0000000..4d3bf01 --- /dev/null +++ b/Exercise 3/list.html @@ -0,0 +1,36 @@ + + + + + A list apart + + + + +
+

This is a list

+ + + +
+ + + diff --git a/Exercise 3/position.html b/Exercise 3/position.html new file mode 100644 index 0000000..498bfe4 --- /dev/null +++ b/Exercise 3/position.html @@ -0,0 +1,133 @@ + + + + IT2805 + + + + + +
+

Assignment 3: position

+
+ +
+
+
+
+
+
+
+ CSS is awesome +
+
+ + + + + diff --git a/Exercise 4/css/style.css b/Exercise 4/css/style.css new file mode 100644 index 0000000..3dd9ed7 --- /dev/null +++ b/Exercise 4/css/style.css @@ -0,0 +1,57 @@ + * { + margin: 0; + padding: 0; + } + + body { + background: white; + font-family: arial, sans-serif; + } + + #screen { + position: relative; + } + + video { + height: auto; + width: 100%; + } + + #mobile-image { + height: auto; + width: 100%; + display: none; + } + + #title { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + } + + #title > img { + width: 100%; + } + + article { + width: 80%; /* 100% - 10% left - 10% right = 80% */ + margin: 20px auto; + } + + p { + color: black; + font-size: 16px; + line-height: 1.5; + } + + +@media screen and (max-width: 940px) { + video { + display: none; + } + #mobile-image { + display: block; + } +} + diff --git a/Exercise 4/img/hovedbygget.png b/Exercise 4/img/hovedbygget.png new file mode 100644 index 0000000..5b91c74 Binary files /dev/null and b/Exercise 4/img/hovedbygget.png differ diff --git a/Exercise 4/img/ntnu.png b/Exercise 4/img/ntnu.png new file mode 100644 index 0000000..2c49d57 Binary files /dev/null and b/Exercise 4/img/ntnu.png differ diff --git a/Exercise 4/index.html b/Exercise 4/index.html new file mode 100644 index 0000000..72a1420 --- /dev/null +++ b/Exercise 4/index.html @@ -0,0 +1,29 @@ + + + + HTML5 Video and CSS + + + + +
+ + + Hovedbygget på ntnu + +
+ NTNU +
+ +
+ +
+

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

+
+ + + diff --git a/Exercise 4/questions.txt b/Exercise 4/questions.txt new file mode 100644 index 0000000..60f5f1f --- /dev/null +++ b/Exercise 4/questions.txt @@ -0,0 +1,25 @@ +# Questions + +1. Mobile phones usually ignore the autoplay tag in order to save cellular data. + +2. The css snippet + ```CSS + @media only screen + and (min-device-width : 768px) + and (max-device-width : 1024px) { + #logo { + display: none; + } + } + ``` + will make no difference for a device with `320 x 568` resolution because the device' height, `568px`, is not between `768` and `1024` + +3. There is several advantages of using a responsive website. Some of them are: + + * A collected codebase: There is not as much work to do as if you were to make two different sites. + + * The user is guaranteed the same info: The HTML will stay the same no matter how the CSS is written, and there will be less occurences of the mobile website not having the same services/options/information as the desktop website or vice versa. + + * Easier networking: No need for any special redirection proxys or desktop/mobile specific load balancer. You can just serve the website as is. + +[//]: # vim: set syntax=markdown: diff --git a/Exercise 4/videos/hovedbygget.mp4 b/Exercise 4/videos/hovedbygget.mp4 new file mode 100644 index 0000000..91d3ed0 Binary files /dev/null and b/Exercise 4/videos/hovedbygget.mp4 differ