Add assigment 4
This commit is contained in:
parent
a3905f67fe
commit
8f7572826f
11
a.txt
11
a.txt
|
|
@ -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:
|
||||
|
|
@ -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;
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 857 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
|
|
@ -0,0 +1,29 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>HTML5 Video and CSS</title>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="screen">
|
||||
|
||||
<video autoplay muted loop poster="img/hovedbygget.png">
|
||||
<source src="videos/hovedbygget.mp4" type="video/mp4">
|
||||
<source src="videos/hovedbygget.ogv" type="video/ogv">
|
||||
<source src="videos/hovedbygget.webm" type="video/webm">
|
||||
</video>
|
||||
<img id="mobile-image" src="img/hovedbygget.png" alt="Hovedbygget på ntnu">
|
||||
|
||||
<div id="title">
|
||||
<img src="img/ntnu.png" alt="NTNU" />
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<article class="content">
|
||||
<p>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.</p>
|
||||
</article>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
36
list.html
36
list.html
|
|
@ -1,36 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>A list apart</title>
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="wrapper">
|
||||
<h1>This is a list</h1>
|
||||
|
||||
<ul>
|
||||
<li>HTML5</li>
|
||||
<li>CSS</li>
|
||||
<ul>
|
||||
<li>LESS</li>
|
||||
<li>Sass</li>
|
||||
<li>SCSS</li>
|
||||
</ul>
|
||||
<li>JavaScript</li>
|
||||
<ul>
|
||||
<li>React</li>
|
||||
<li>Node</li>
|
||||
<li>Jquery</li>
|
||||
<li>AngularJS</li>
|
||||
<li>Backbone</li>
|
||||
<li>Ember</li>
|
||||
<li>Babel</li>
|
||||
</ul>
|
||||
</ul>
|
||||
<footer>Here's some footer text</footer>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
133
position.html
133
position.html
|
|
@ -1,133 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>IT2805</title>
|
||||
|
||||
<style type="text/css">
|
||||
|
||||
html, body{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
height: 100%;
|
||||
}
|
||||
/* Part 1 */
|
||||
|
||||
.header{
|
||||
font-family: sans-serif;
|
||||
padding-top: 30px;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.box{
|
||||
border-width: 2px;
|
||||
border-color: #0060A3;
|
||||
border-style: solid;
|
||||
height: 400px;
|
||||
|
||||
margin: 0 25%;
|
||||
}
|
||||
|
||||
.one{
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border-width: 2px;
|
||||
border-color: #FAA21B;
|
||||
border-style: solid;
|
||||
|
||||
margin-top: 25px;
|
||||
margin-left: 25px;
|
||||
}
|
||||
|
||||
.two{
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border-width: 2px;
|
||||
border-color: #FAA21B;
|
||||
border-style: solid;
|
||||
background-color: #fff;
|
||||
|
||||
margin-left: 25px;
|
||||
position: relative;
|
||||
top: 145px;
|
||||
|
||||
}
|
||||
|
||||
.three{
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border-width: 2px;
|
||||
border-color: #FAA21B;
|
||||
border-style: solid;
|
||||
background-color: #fff;
|
||||
|
||||
margin-left: auto;
|
||||
position: relative;
|
||||
left: 50px;
|
||||
bottom: 150px;
|
||||
|
||||
}
|
||||
|
||||
.five{
|
||||
bottom: 10px;
|
||||
font-size: 35px;
|
||||
font-family: sans-serif;
|
||||
|
||||
text-align: right;
|
||||
margin-right: 25px;
|
||||
}
|
||||
|
||||
.four{
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
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;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="header">
|
||||
<h1>Assignment 3: position</h1>
|
||||
</div>
|
||||
|
||||
<div class="box">
|
||||
<div class="one"></div>
|
||||
<div class="two"></div>
|
||||
<div class="three">
|
||||
<div class="four"></div>
|
||||
</div>
|
||||
<div class="five">
|
||||
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS">CSS is awesome</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -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:
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Loading…
Reference in New Issue