Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 6409570

Browse files
author
Benjamin Hartmann
committed
add general layout
1 parent 14b1fc9 commit 6409570

File tree

4 files changed

+542
-0
lines changed

4 files changed

+542
-0
lines changed

‎2021/index.html

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Overview 2021 | Advent of CSS & JavaScript</title>
8+
<link rel="stylesheet" href="../global.css">
9+
</head>
10+
11+
<body>
12+
<div class="g-container">
13+
<h1>Advent of CSS and Advent of JavaScript 2021</h1>
14+
<div class="g-header">
15+
<div class="g-nav-button-container">
16+
<a class="g-nav-button" href="../">Back to Overview</a>
17+
</div>
18+
<p class="g-description">Here you can see my Advent of CSS and Advent of JavaScript 2021 solutions.</p>
19+
</div>
20+
<div class="g-overview-grid">
21+
<div class="g-box">
22+
<a href="day01/">
23+
<img src="https://picsum.photos/400/300?random=1" alt="Day 1">
24+
<div class="g-box-inner">
25+
<h2>Day 1</h2>
26+
Title
27+
</div>
28+
</a>
29+
</div>
30+
<div class="g-box">
31+
<a href="day02/">
32+
<img src="https://picsum.photos/400/300?random=2" alt="Day 2">
33+
<div class="g-box-inner">
34+
<h2>Day 2</h2>
35+
Title
36+
</div>
37+
</a>
38+
</div>
39+
<div class="g-box">
40+
<a href="day03/">
41+
<img src="https://picsum.photos/400/300?random=3" alt="Day 3">
42+
<div class="g-box-inner">
43+
<h2>Day 3</h2>
44+
Title
45+
</div>
46+
</a>
47+
</div>
48+
<div class="g-box">
49+
<a href="day04/">
50+
<img src="https://picsum.photos/400/300?random=4" alt="Day 4">
51+
<div class="g-box-inner">
52+
<h2>Day 4</h2>
53+
Title
54+
</div>
55+
</a>
56+
</div>
57+
<div class="g-box">
58+
<a href="day05/">
59+
<img src="https://picsum.photos/400/300?random=5" alt="Day 5">
60+
<div class="g-box-inner">
61+
<h2>Day 5</h2>
62+
Title
63+
</div>
64+
</a>
65+
</div>
66+
<div class="g-box">
67+
<a href="day06/">
68+
<img src="https://picsum.photos/400/300?random=6" alt="Day 6">
69+
<div class="g-box-inner">
70+
<h2>Day 6</h2>
71+
Title
72+
</div>
73+
</a>
74+
</div>
75+
<div class="g-box">
76+
<a href="day07/">
77+
<img src="https://picsum.photos/400/300?random=7" alt="Day 7">
78+
<div class="g-box-inner">
79+
<h2>Day 7</h2>
80+
Title
81+
</div>
82+
</a>
83+
</div>
84+
</div>
85+
</div>
86+
</body>
87+
88+
</html>

‎global.css

Lines changed: 133 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,133 @@
1+
body {
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
background-color: #3d3d3d;
6+
}
7+
8+
div.g-container {
9+
font-family: 'Roboto', sans-serif;
10+
background-color: #3d3d3d;
11+
color: #ffffff;
12+
display: flex;
13+
align-items: center;
14+
flex-direction: column;
15+
height: calc(100vh - 20px);
16+
width: calc(100vw - 20px);
17+
padding: 10px;
18+
}
19+
20+
div.g-header {
21+
display: flex;
22+
flex-direction: column;
23+
align-items: center;
24+
background-color: #3d3d3d;
25+
color: #ffffff;
26+
height: 150px;
27+
}
28+
29+
h1 {
30+
font-size: 2.5rem;
31+
margin-bottom: 0.5rem;
32+
text-align: center;
33+
}
34+
35+
div.g-nav-button-container {
36+
display: flex;
37+
justify-content: center;
38+
align-items: center;
39+
}
40+
41+
a.g-nav-button {
42+
background-color: #3d3d3d;
43+
color: #ffffff;
44+
border: 1px solid #ffffff;
45+
padding: 0.5rem 1rem;
46+
margin: 0 0.5rem;
47+
cursor: pointer;
48+
text-decoration: none;
49+
&:hover {
50+
background-color: #ffffff;
51+
color: #3d3d3d;
52+
}
53+
transition: all 0.3s ease;
54+
}
55+
56+
p.g-description {
57+
font-size: 1rem;
58+
text-align: center;
59+
border: #ffffff 1px dotted;
60+
width: 80vw;
61+
padding: 1rem;
62+
}
63+
64+
iframe#app {
65+
height: 100%;
66+
border: #ffffff 1px solid;
67+
padding: 5px;
68+
width: 90%;
69+
}
70+
71+
md-block {
72+
font-family: Inter, sans-serif;
73+
& a {
74+
color: #c4c4c4;
75+
text-decoration-color: currentColor;
76+
&:hover {
77+
color: #eeeeee;
78+
}
79+
}
80+
& h1 {
81+
text-align: left;
82+
}
83+
}
84+
85+
86+
.g-overview-grid {
87+
display: grid;
88+
grid-template-columns: auto auto auto;
89+
gap: 1rem;
90+
padding: 1rem;
91+
}
92+
93+
.g-box {
94+
background-color: #3d3d3d;
95+
color: #ffffff;
96+
border: 1px solid #ffffff;
97+
border-radius: 5px;
98+
display: flex;
99+
flex-direction: column;
100+
justify-content: space-between;
101+
transition: all 0.5s ease-in-out;
102+
&:hover {
103+
background-color: #ffffff;
104+
color: #3d3d3d;
105+
}
106+
&:hover a {
107+
background-color: #ffffff;
108+
color: #3d3d3d;
109+
}
110+
& a {
111+
color: #ffffff;
112+
text-decoration: none;
113+
}
114+
& .g-box-inner {
115+
padding: 0 1rem 1rem 1rem;
116+
margin: 0;
117+
}
118+
& img {
119+
width: 100%;
120+
height: 200px;
121+
object-fit: cover;
122+
border-top-left-radius: 5px;
123+
border-top-right-radius: 5px;
124+
}
125+
width: 300px;
126+
}
127+
128+
/* less colloums on mobile */
129+
@media (max-width: 768px) {
130+
.g-overview-grid {
131+
grid-template-columns: 1fr;
132+
}
133+
}

‎index.html

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=, initial-scale=1.0">
7+
<title>Document</title>
8+
</head>
9+
10+
<body>
11+
<script>
12+
// redirect to year 2021
13+
window.location.href = "2021/";
14+
</script>
15+
</body>
16+
17+
</html>

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /