Complete assignment
This commit is contained in:
parent
6d60288621
commit
a3905f67fe
11
a.txt
11
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:
|
||||||
|
|
@ -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
23
list.html
|
|
@ -3,12 +3,33 @@
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<title>A list apart</title>
|
<title>A list apart</title>
|
||||||
|
<link rel="stylesheet" href="css/style.css">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<div class="wrapper">
|
<div class="wrapper">
|
||||||
<h1>This is a list</h1>
|
<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>
|
</div>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
|
|
|
||||||
|
|
@ -23,6 +23,8 @@
|
||||||
border-color: #0060A3;
|
border-color: #0060A3;
|
||||||
border-style: solid;
|
border-style: solid;
|
||||||
height: 400px;
|
height: 400px;
|
||||||
|
|
||||||
|
margin: 0 25%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.one{
|
.one{
|
||||||
|
|
@ -31,6 +33,9 @@
|
||||||
border-width: 2px;
|
border-width: 2px;
|
||||||
border-color: #FAA21B;
|
border-color: #FAA21B;
|
||||||
border-style: solid;
|
border-style: solid;
|
||||||
|
|
||||||
|
margin-top: 25px;
|
||||||
|
margin-left: 25px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.two{
|
.two{
|
||||||
|
|
@ -40,6 +45,11 @@
|
||||||
border-color: #FAA21B;
|
border-color: #FAA21B;
|
||||||
border-style: solid;
|
border-style: solid;
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
|
|
||||||
|
margin-left: 25px;
|
||||||
|
position: relative;
|
||||||
|
top: 145px;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.three{
|
.three{
|
||||||
|
|
@ -49,13 +59,21 @@
|
||||||
border-color: #FAA21B;
|
border-color: #FAA21B;
|
||||||
border-style: solid;
|
border-style: solid;
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
|
|
||||||
|
margin-left: auto;
|
||||||
|
position: relative;
|
||||||
|
left: 50px;
|
||||||
|
bottom: 150px;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.five{
|
.five{
|
||||||
bottom: 10px;
|
bottom: 10px;
|
||||||
right: 10px;
|
|
||||||
font-size: 35px;
|
font-size: 35px;
|
||||||
font-family: sans-serif;
|
font-family: sans-serif;
|
||||||
|
|
||||||
|
text-align: right;
|
||||||
|
margin-right: 25px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.four{
|
.four{
|
||||||
|
|
@ -64,10 +82,32 @@
|
||||||
border-width: 2px;
|
border-width: 2px;
|
||||||
border-color: #FAA21B;
|
border-color: #FAA21B;
|
||||||
border-style: solid;
|
border-style: solid;
|
||||||
|
|
||||||
|
margin: 25px auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Part 2 */
|
/* Part 2 */
|
||||||
|
|
||||||
|
a {
|
||||||
|
color:blue;
|
||||||
|
}
|
||||||
|
|
||||||
|
a:hover {
|
||||||
|
color: cyan;
|
||||||
|
}
|
||||||
|
|
||||||
|
a::selection {
|
||||||
|
background-color: orange;
|
||||||
|
}
|
||||||
|
|
||||||
|
a:visited {
|
||||||
|
color: purple;
|
||||||
|
}
|
||||||
|
|
||||||
|
a:visited:hover {
|
||||||
|
color: green;
|
||||||
|
}
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
@ -83,7 +123,7 @@
|
||||||
<div class="four"></div>
|
<div class="four"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="five">
|
<div class="five">
|
||||||
CSS is awesome
|
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS">CSS is awesome</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue