Make new folder structure
This commit is contained in:
parent
92e6fa1297
commit
1730241869
|
Before Width: | Height: | Size: 382 B After Width: | Height: | Size: 382 B |
|
Before Width: | Height: | Size: 5.8 KiB After Width: | Height: | Size: 5.8 KiB |
|
Before Width: | Height: | Size: 104 KiB After Width: | Height: | Size: 104 KiB |
|
Before Width: | Height: | Size: 1.3 MiB After Width: | Height: | Size: 1.3 MiB |
|
|
@ -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:
|
||||||
|
|
@ -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;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,36 @@
|
||||||
|
<!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>
|
||||||
|
|
@ -0,0 +1,133 @@
|
||||||
|
<!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,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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
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>
|
||||||
|
|
@ -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.
Loading…
Reference in New Issue