-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
107 lines (86 loc) · 2.97 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
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
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Title</title>
<link rel="stylesheet" type="text/css" href="./styles/styles.css">
<!-- <style>
/* CSS comments look like this */
*{
border: 1px dashed red;
}
body{
font-size: 16px;
color: whitesmoke;
background-color: darkcyan;
}
p{
color:tomato
}
.first-article{
width:75%;
}
.second-paragraph{
width:75%;
color:red;
}
.main-paragraph{
width:16rem;
text-align:justify;
padding:20px;
border:5px solid blue;
margin: 32px;
box-sizing:border-box;
}
.main-paragraph:hover{
background: rgba(255, 125, 125, 0.4);
font-size: 2rem;
}
a:hover[href="./about-me.html"]{
background-color: yellow;
color:darkmagenta;
}
a:hover{
background-color: yellow;
color:darkmagenta;
}
a:visited{
color:pink;
}
img.w3cimage{
border-style: dotted double;
border-color: black;
border-radius: 2rem;
}
p{
color:green;
}
</style> -->
</head>
<body>
<h1>
website title text
</h1>
<article class="first-article">
<p class="main-paragraph">lorem ipsumlorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum</p>
</article>
<p class="second-paragraph">lorem ipsum lorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsum</p>
<p class="another-paragraph">lorem ipsum lorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsum</p>
<p class="yetanother-paragraph">lorem ipsum lorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsum</p>
<a href="./about-me.html"> about me</a>
<a href="./portfolio.html"> portfolio</a>
<div>
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
</div>
<img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="W3Schools.com" style="width:104px;height:142px;" class="w3cimage">
</body>
</html>
<!--useful websites:
https://www.w3schools.com/colors/colors_names.asp
webfx.com/web-design/color-picker/
css-tricks.com/specifics-on-css-specificity
-->