diff --git a/a.txt b/a.txt deleted file mode 100644 index 470b49b..0000000 --- a/a.txt +++ /dev/null @@ -1,11 +0,0 @@ -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 index d28202d..3dd9ed7 100644 --- a/css/style.css +++ b/css/style.css @@ -1,34 +1,57 @@ -html, body{ - margin: 0; - padding: 0; - height: 100%; + * { + 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; + } } -/* 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/img/hovedbygget.png b/img/hovedbygget.png new file mode 100644 index 0000000..5b91c74 Binary files /dev/null and b/img/hovedbygget.png differ diff --git a/img/ntnu.png b/img/ntnu.png new file mode 100644 index 0000000..2c49d57 Binary files /dev/null and b/img/ntnu.png differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..72a1420 --- /dev/null +++ b/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/list.html b/list.html deleted file mode 100644 index 4d3bf01..0000000 --- a/list.html +++ /dev/null @@ -1,36 +0,0 @@ - - - - - A list apart - - - - -
-

This is a list

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

Assignment 3: position

-
- -
-
-
-
-
-
-
- CSS is awesome -
-
- - - - - diff --git a/questions.txt b/questions.txt new file mode 100644 index 0000000..60f5f1f --- /dev/null +++ b/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/videos/hovedbygget.mp4 b/videos/hovedbygget.mp4 new file mode 100644 index 0000000..91d3ed0 Binary files /dev/null and b/videos/hovedbygget.mp4 differ diff --git a/videos/hovedbygget.ogv b/videos/hovedbygget.ogv new file mode 100644 index 0000000..9d459d3 Binary files /dev/null and b/videos/hovedbygget.ogv differ diff --git a/videos/hovedbygget.webm b/videos/hovedbygget.webm new file mode 100644 index 0000000..245c668 Binary files /dev/null and b/videos/hovedbygget.webm differ