thecoded.prof
+69
-2
html/css/styles.css
+69
-2
html/css/styles.css
···
1
-
.h1 {
2
-
font-size: 32px;
1
+
h1 {
2
+
font-size: 48px;
3
+
margin: 0;
4
+
color: #8aadf4;
5
+
}
6
+
7
+
h2 {
8
+
font-size: 36px;
9
+
margin: 0;
10
+
}
11
+
12
+
.heading {
13
+
color: #a5adcb;
14
+
}
15
+
16
+
* {
17
+
font-family:
18
+
system-ui,
19
+
-apple-system,
20
+
BlinkMacSystemFont,
21
+
"Segoe UI",
22
+
Roboto,
23
+
Oxygen,
24
+
Ubuntu,
25
+
Cantarell,
26
+
"Open Sans",
27
+
"Helvetica Neue",
28
+
sans-serif;
29
+
color: #cad3f5;
30
+
}
31
+
32
+
body {
33
+
background-color: #24273a;
34
+
}
35
+
36
+
main {
37
+
margin: none;
38
+
display: flex;
39
+
flex-direction: column;
40
+
gap: 5rem;
41
+
align-items: center;
42
+
}
43
+
44
+
.hr {
45
+
width: 80rem;
46
+
border-top: 2px solid #6e738d;
47
+
}
48
+
49
+
.container {
50
+
display: flex;
51
+
width: 160rem;
52
+
flex-direction: column;
53
+
gap: 0.1rem;
54
+
align-items: center;
55
+
}
56
+
57
+
.card {
58
+
width: 15rem;
59
+
height: 20rem;
60
+
background-color: #363950;
61
+
border-radius: 0.5rem;
62
+
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
63
+
transition: transform 0.15s ease-in-out;
64
+
cursor: pointer;
65
+
}
66
+
67
+
.card:hover {
68
+
transform: scale(1.05);
69
+
transition: transform 0.15s ease-in-out;
3
70
}
+32
-3
html/index.html
+32
-3
html/index.html
···
4
4
<link rel="stylesheet" href="css/styles.css" />
5
5
<script src="js/script.js"></script>
6
6
</head>
7
-
<body>
8
-
<h1>Hello World</h1>
9
-
<button id="nav" onclick="navigateToPage('page2.html')">Page 2</button>
7
+
<body style="margin: 0; padding: 8px">
8
+
<main>
9
+
<h1>Samuel Shuert</h1>
10
+
<div class="container">
11
+
<h2 class="heading">Projects</h2>
12
+
<div class="hr"></div>
13
+
<div
14
+
style="
15
+
display: flex;
16
+
flex-direction: row;
17
+
justify-content: center;
18
+
padding-top: 2rem;
19
+
gap: 1rem;
20
+
"
21
+
>
22
+
<div class="card" onclick="openProject('temp')"></div>
23
+
<div class="card" onclick="openProject('temp')"></div>
24
+
<div class="card" onclick="openProject('temp')"></div>
25
+
</div>
26
+
</div>
27
+
<div class="container">
28
+
<div class="hr" style="width: 20rem; margin-bottom: 2rem"></div>
29
+
<h2 class="heading">Education</h2>
30
+
<div class="hr"></div>
31
+
</div>
32
+
<div class="container">
33
+
<div class="hr" style="width: 20rem; margin-bottom: 2rem"></div>
34
+
<h2 class="heading">Skills</h2>
35
+
<div class="hr"></div>
36
+
</div>
37
+
<div class="hr" style="width: 20rem"></div>
38
+
</main>
10
39
</body>
11
40
</html>
+8
-2
html/js/script.js
+8
-2
html/js/script.js
-11
html/page2.html
-11
html/page2.html