mmatt.net
this repo has no description
stuff
+53
boxmodel/index.html
+53
boxmodel/index.html
···
1
+
<!doctype html>
2
+
<html lang="en">
3
+
<head>
4
+
<title>Box Model</title>
5
+
<meta charset="UTF-8" />
6
+
<meta name="viewport" content="width=device-width initial-scale=1.0" />
7
+
<link href="./styles.css" type="text/css" rel="stylesheet" />
8
+
</head>
9
+
<body>
10
+
<div class="header">
11
+
<p>this is a header</p>
12
+
</div>
13
+
<br/>
14
+
<!-- navigation bar -->
15
+
<ul class="nav">
16
+
<li><a href="/">Home</a></li>
17
+
<li class="dropdown">
18
+
<a href="" class="dropbtn">dropdown</a>
19
+
<div class="dropdown-content">
20
+
<a href="https://mmatt.net">mmatt.net</a>
21
+
<a href="https://teal.fm">teal.fm</a>
22
+
<a href="https://opn.haus">opn.haus</a>
23
+
</div>
24
+
</li>
25
+
</li>
26
+
</ul>
27
+
28
+
<h1>Introduction to Box Model</h1>
29
+
<img class="float" src="../introtohtml/image.webp" width="200px" />
30
+
<div class="box">
31
+
<p>so true</p>
32
+
</div>
33
+
<div class="box">
34
+
<p>so true</p>
35
+
</div>
36
+
<div class="box">
37
+
<p>so true</p>
38
+
</div>
39
+
40
+
<p>list</p>
41
+
<ul>
42
+
<li>one</li>
43
+
<li>two</li>
44
+
<li>three</li>
45
+
<li>four</li>
46
+
<li>five</li>
47
+
</ul>
48
+
49
+
<div class="footer">
50
+
matt morris - 2026
51
+
</div>
52
+
</body>
53
+
</html>
+72
boxmodel/styles.css
+72
boxmodel/styles.css
···
1
+
div.box {
2
+
background-color: lightgray;
3
+
width: 50px;
4
+
/* top right bottom left */
5
+
padding: 20px;
6
+
margin: 20px 2px 4px 9px;
7
+
border: 5px dashed red;
8
+
display: inline-block;
9
+
}
10
+
11
+
ul.nav {
12
+
overflow: hidden;
13
+
list-style-type: none;
14
+
background-color: blanchedalmond;
15
+
margin: 0;
16
+
padding: 0;
17
+
width: 100%;
18
+
}
19
+
ul.nav > li {
20
+
float: left;
21
+
}
22
+
ul.nav > li a,
23
+
.dropbtn {
24
+
display: inline-block;
25
+
color: black;
26
+
text-align: center;
27
+
padding: 14px 16px;
28
+
text-decoration: none;
29
+
}
30
+
ul.nav > li a:hover,
31
+
.dropdown:hover .dropbtn {
32
+
background-color: black;
33
+
color: white;
34
+
}
35
+
ul.nav > li.dropdown {
36
+
display: inline-block;
37
+
}
38
+
39
+
.dropdown-content {
40
+
display: none;
41
+
position: absolute;
42
+
background-color: blanchedalmond;
43
+
min-width: 160px;
44
+
z-index: 1;
45
+
}
46
+
.dropdown-content a {
47
+
color: black;
48
+
padding: 12px 16px;
49
+
text-decoration: none;
50
+
display: block;
51
+
text-align: left;
52
+
}
53
+
54
+
.dropdown-content a:hover {
55
+
background-color: black;
56
+
color: white;
57
+
}
58
+
59
+
.dropdown:hover .dropdown-content {
60
+
display: block;
61
+
}
62
+
63
+
img.float {
64
+
float: right;
65
+
}
66
+
67
+
div.footer, div.header {
68
+
background-color: lightblue;
69
+
text-align: center;
70
+
padding: 20px;
71
+
overflow: hidden;
72
+
}
+29
introtohtml/index.html
+29
introtohtml/index.html
···
36
36
</a>
37
37
<br />
38
38
39
+
<table border="1px">
40
+
<thead>
41
+
<tr>
42
+
<th>username</th>
43
+
<th>email</th>
44
+
</tr>
45
+
</thead>
46
+
<tbody>
47
+
<tr>
48
+
<td>matt</td>
49
+
<td>matt@example.com</td>
50
+
</tr>
51
+
<tr>
52
+
<td>matt</td>
53
+
<td>matt@example.com</td>
54
+
</tr>
55
+
<tr>
56
+
<td>matt</td>
57
+
<td>matt@example.com</td>
58
+
</tr>
59
+
<tr>
60
+
<td>matt</td>
61
+
<td>matt@example.com</td>
62
+
</tr>
63
+
</tbody>
64
+
</table>
65
+
66
+
<br/>
67
+
39
68
<div>
40
69
<div><p>first child</p></div>
41
70
<p>second child</p>
+15
introtohtml/styles.css
+15
introtohtml/styles.css
···
40
40
color: green;
41
41
}
42
42
43
+
table tr:nth-child(even) {
44
+
background-color: rgba(0, 255, 255, 0.422);
45
+
}
46
+
table tr:nth-child(odd) {
47
+
background-color: rgba(255, 0, 0, 0.424);
48
+
}
49
+
th {
50
+
background-color: rgba(255, 255, 255, 0.625);
51
+
}
52
+
53
+
div {
54
+
padding: 50px;
55
+
margin: 20px;
56
+
}
57
+
43
58
h1,
44
59
h2,
45
60
h3,