44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
|
.cyan { background-color: hsl(180, 50%, 50%); color: hsl(0, 0%, 96%); }
.cyan:hover { background-color: hsl(180, 60%, 40%); color: hsl(0, 0%, 100%); }
.green { background-color: hsl(120, 50%, 40%); color: hsl(120, 10%, 96%); }
.green:hover { background-color: hsl(120, 60%, 30%); color: hsl(120, 10%, 96%); }
.blue { background-color: hsl(210, 50%, 50%); color: hsl(210, 10%, 96%); }
.blue:hover { background-color: hsl(210, 60%, 40%); color: hsl(210, 10%, 96%); }
/* links */
a:link, a:visited {
a:hover, a:active {
a.extlink:hover:after {
content: " >";
}
|
>
>
|
>
|
<
<
<
|
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
|
.cyan { background-color: hsl(180, 50%, 50%); color: hsl(0, 0%, 96%); }
.cyan:hover { background-color: hsl(180, 60%, 40%); color: hsl(0, 0%, 100%); }
.green { background-color: hsl(120, 50%, 40%); color: hsl(120, 10%, 96%); }
.green:hover { background-color: hsl(120, 60%, 30%); color: hsl(120, 10%, 96%); }
.blue { background-color: hsl(210, 50%, 50%); color: hsl(210, 10%, 96%); }
.blue:hover { background-color: hsl(210, 60%, 40%); color: hsl(210, 10%, 96%); }
.border { border: 1px solid hsl(210, 20%, 80%); }
/* links */
.link {
color: hsl(210, 70%, 40%);
text-decoration: none;
cursor: pointer;
}
.link:hover {
text-shadow: 0 0 2px hsl(210, 80%, 60%);
}
/* Main classes */
html {
box-sizing: border-box;
width: 400px;
|