Skip to content

Commit d492e0b

Browse files
Yanni8Yanni8
committed
Add basic html structure
1 parent 15320fe commit d492e0b

File tree

3 files changed

+140
-1
lines changed

3 files changed

+140
-1
lines changed

‎.vscode/settings.json

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"liveServer.settings.port": 5501
3+
}

‎src/index.html

+28-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
<!DOCTYPE html>
22
<html>
3+
34
<head>
45
<meta charset='utf-8'>
56
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
@@ -8,7 +9,33 @@
89
<link rel='stylesheet' type='text/css' media='screen' href='./styles/main.css'>
910
<script src='./scripts/main.js'></script>
1011
</head>
12+
1113
<body>
12-
14+
15+
<nav>
16+
<div class="logo"><a href="./index.html">Vanity BTC</a></div>
17+
<div class="nav-links">
18+
<ul id="top-navigator">
19+
<li><a href='./index.html'>Home</a></li>
20+
<li><a href='./howtouseit.html'>How to use it</a></li>
21+
<li><a href='./howitworks.html'>How it works</a></li>
22+
<li><a href='./disclaimer.html'>Disclaimer</a></li>
23+
<li><a href='./impressum.html'>impressum</a></li>
24+
</div>
25+
</ul>
26+
</nav>
27+
28+
<body>
29+
<p>content goes here</p>
30+
</body>
31+
32+
<footer>
33+
<p>&copy; 2020 YM</p>
34+
<ul>
35+
<li><a href='./disclaimer.html'>Disclaimer</a></li>
36+
<li><a href='./impressum.html'>impressum</a></li>
37+
</ul>
38+
</footer>
1339
</body>
40+
1441
</html>

‎src/styles/main.css

+109
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
1+
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap');
2+
3+
* {
4+
box-sizing: border-box;
5+
}
6+
7+
body {
8+
font-family: 'Roboto', sans-serif;
9+
margin: 0;
10+
padding: 0;
11+
12+
}
13+
header,
14+
main,
15+
footer,
16+
nav,
17+
aside {
18+
display: grid;
19+
grid-template-columns: 1fr;
20+
grid-template-rows: 20% 70% 10%;
21+
grid-template-areas:
22+
"nav"
23+
"main"
24+
"footer";
25+
26+
}
27+
28+
main {
29+
grid-area: main;
30+
}
31+
32+
33+
/* Header */
34+
35+
nav {
36+
grid-area: nav;
37+
display: flex;
38+
background-color: #888888;
39+
/* Maby change it later */
40+
align-items: center;
41+
position: sticky;
42+
top: 0;
43+
justify-content: space-between;
44+
}
45+
46+
47+
48+
.logo {
49+
font-size: 1.5em;
50+
margin: 0.5em;
51+
}
52+
53+
.logo a {
54+
color: #fff;
55+
text-decoration: none;
56+
}
57+
58+
59+
.nav-links ul {
60+
display: flex;
61+
margin: 0;
62+
padding: 0;
63+
64+
}
65+
66+
.nav-links li {
67+
list-style: none;
68+
}
69+
70+
.nav-links li a {
71+
text-decoration: none;
72+
padding: 1em;
73+
color: white;
74+
display: block;
75+
}
76+
77+
.nav-links li:hover {
78+
background-color: darkgrey;
79+
}
80+
81+
82+
/* Footer */
83+
84+
footer {
85+
grid-area: footer;
86+
background-color: #888888;
87+
display: flex;
88+
justify-content: space-between;
89+
}
90+
91+
footer p{
92+
color: white;
93+
padding: 1em;
94+
}
95+
footer ul{
96+
display: flex;
97+
}
98+
footer ul li {
99+
list-style: none;
100+
padding: 1em;
101+
}
102+
103+
footer a {
104+
text-decoration: none;
105+
color: white;
106+
}
107+
108+
109+
@media screen and (max-width: 600px) {}

0 commit comments

Comments
 (0)