oysteikt-skolearbeid/IT2805
oysteikt-skolearbeid/IT2805
1
0
Fork 0
Code Issues Pull Requests Activity

Complete assignment

Browse Source
This commit is contained in:
Oystein Kristoffer Tveit 2020-09-14 11:27:57 +02:00
parent 6d60288621
commit a3905f67fe
5 changed files with 109 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
a.txt
View File

@ -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:

34
css/style.css Normal file
View File

@ -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;
}

23
list.html
View File

@ -3,12 +3,33 @@
<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>
<footer></footer>
<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>

44
position.html
View File

@ -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;
}
</style>
</head>
<body>
@ -83,7 +123,7 @@
<div class="four"></div>
</div>
<div class="five">
CSS is awesome
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS">CSS is awesome</a>
</div>
</div>

8
style.css
View File

@ -1,8 +0,0 @@
html, body{
margin: 0;
padding: 0;
height: 100%;
}
/* Part 4 */