Skip to content

Commit 31efc64

Browse files
diprefrancodiprefranco
authored
404 page: back to the future styled.
1 parent 45cdfe5 commit 31efc64

File tree

1 file changed

+248
-5
lines changed

1 file changed

+248
-5
lines changed

‎docs/404.html‎

Lines changed: 248 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,18 +3,261 @@
33

44
<head>
55
<meta charset="utf-8">
6-
<title>Franco Dipre - Full Stack Developer</title>
6+
<title>Franco Dipre - Page Not Found</title>
77
<base href="/">
88
<meta name="viewport" content="width=device-width, initial-scale=1">
9+
<meta name="description"
10+
content="Full Stack Developer with expertise in Angular and C# .Net - Explore my projects and experience">
11+
<meta name="keywords"
12+
content="Franco Dipre, Full Stack Developer, Angular Developer, C# .Net Developer, Software Engineer, Frontend Developer, Backend Developer, Web Development, Languages">
13+
<meta name="author" content="Franco Dipre">
14+
<meta property="og:site_name" content="Franco Dipre">
15+
<meta property="og:type" content="website">
16+
<meta property="og:url" content="https://diprefranco.github.io/">
17+
<meta property="og:title" content="Franco Dipre - Full Stack Developer">
18+
<meta property="og:description"
19+
content="Full Stack Developer with expertise in Angular and C# .Net - Explore my projects and experience">
20+
<meta property="og:image" content="https://diprefranco.github.io/assets/img/website-og.jpg">
21+
<meta property="og:image:alt" content="Franco Dipre. Full Stack Developer">
22+
<meta name="twitter:title" content="Franco Dipre - Full Stack Developer">
23+
<meta name="twitter:description"
24+
content="Full Stack Developer with expertise in Angular and C# .Net - Explore my projects and experience">
25+
<meta name="twitter:card" content="summary">
26+
<meta name="twitter:image" content="https://diprefranco.github.io/assets/img/website-og.jpg">
27+
<link rel="canonical" href="https://diprefranco.github.io/">
928
<link rel="icon" type="image/x-icon" href="favicon.ico">
1029
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap" rel="stylesheet" />
30+
31+
<style>
32+
:root {
33+
--colorp2: #191919;
34+
--colorprimary: #000000;
35+
--colorsecondary: #ffffff;
36+
--colorprimarydivider: #333;
37+
--colorsecondaryfooter: #aaa;
38+
--coloraccent: #05f903;
39+
--colorlinks: #0abefb;
40+
--colorcodecommented: #6a9955;
41+
--colorcodekeyword: #569cd6;
42+
--colorcodevariable: #9cdcfe;
43+
--colorcodeopenclosesymbol: #179fff;
44+
--colorcodeliteralvalue: #ce9178;
45+
--ff: "Open Sans", sans-serif;
46+
--ffcode: Consolas, 'Courier New', monospace;
47+
--h1: bold 42px/60px var(--ff);
48+
--h2: bold 36px/36px var(--ff);
49+
--h3: bold 24px/30px var(--ff);
50+
--links: bold 18px/18px var(--ff);
51+
--p2: 30px/36px var(--ff);
52+
--p: 18px/30px var(--ff);
53+
--transition: 0.3s ease-in-out;
54+
--logowidth: 50px;
55+
--logoheight: 40px;
56+
--sectionseparation: 120px;
57+
}
58+
59+
h1,
60+
h2,
61+
h3,
62+
p,
63+
.links,
64+
.p2 {
65+
margin: 0px;
66+
}
67+
68+
h1 {
69+
font: var(--h1);
70+
}
71+
72+
h2 {
73+
font: var(--h2);
74+
}
75+
76+
h3 {
77+
font: var(--h3);
78+
}
79+
80+
.links {
81+
font: var(--links);
82+
}
83+
84+
.p2 {
85+
font: var(--p2);
86+
}
87+
88+
p {
89+
font: var(--p);
90+
}
91+
92+
.commented-code {
93+
font-family: var(--ffcode);
94+
color: var(--colorcodecommented);
95+
}
96+
97+
.code-snippet {
98+
background-color: var(--colorp2);
99+
font-family: var(--ffcode);
100+
padding: 15px;
101+
border-radius: 5px;
102+
}
103+
104+
.code-snippet span.keyword {
105+
color: var(--colorcodekeyword);
106+
}
107+
108+
.code-snippet span.variable {
109+
color: var(--colorcodevariable);
110+
}
111+
112+
.code-snippet span.open-close-symbol {
113+
color: var(--colorcodeopenclosesymbol);
114+
}
115+
116+
.code-snippet span.literal-value {
117+
color: var(--colorcodeliteralvalue);
118+
}
119+
120+
html {
121+
scroll-behavior: smooth;
122+
}
123+
124+
body {
125+
font-family: var(--ff);
126+
padding: 0px;
127+
margin: auto;
128+
background-color: var(--colorprimary);
129+
color: var(--colorsecondary);
130+
}
131+
132+
header,
133+
section {
134+
width: 90vw;
135+
max-width: 1080px;
136+
margin: auto;
137+
}
138+
139+
a {
140+
text-decoration: none;
141+
color: var(--colorlinks);
142+
font: var(--links);
143+
}
144+
145+
a:hover {
146+
color: var(--coloraccent);
147+
transition: var(--transition);
148+
}
149+
150+
@media (max-width: 800px) {
151+
body.blocked {
152+
overflow: hidden;
153+
}
154+
}
155+
</style>
156+
157+
<style>
158+
h1 {
159+
font: bold 70px / 90px var(--ff);
160+
}
161+
162+
h2 {
163+
font: bold 36px / 65px var(--ff);
164+
}
165+
166+
#page-not-found {
167+
margin-top: var(--sectionseparation);
168+
}
169+
170+
.column {
171+
display: flex;
172+
align-items: center;
173+
gap: 35px;
174+
}
175+
176+
.page-not-found div {
177+
flex: 1;
178+
}
179+
180+
img {
181+
width: 100%;
182+
border-radius: 5px;
183+
}
184+
185+
.links {
186+
margin-top: 20px;
187+
display: flex;
188+
align-items: center;
189+
}
190+
191+
.button {
192+
font: bold 17px / 17px var(--ff);
193+
display: flex;
194+
align-items: center;
195+
justify-content: center;
196+
padding: 0px 20px;
197+
height: 50px;
198+
border: solid 2px var(--colorlinks);
199+
border-radius: 10px;
200+
}
201+
202+
.button:hover {
203+
border: solid 2px var(--coloraccent);
204+
transition: var(--transition);
205+
}
206+
207+
.animate {
208+
opacity: 0;
209+
transition: opacity 0.4s ease-in-out;
210+
}
211+
212+
.animate.visible {
213+
opacity: 1;
214+
}
215+
216+
@media (max-width: 800px) {
217+
.column {
218+
gap: 0;
219+
}
220+
221+
.page-not-found {
222+
flex-direction: column;
223+
}
224+
225+
div.page-not-found-text {
226+
text-align: center;
227+
}
228+
229+
img {
230+
max-width: 550px;
231+
}
232+
233+
.links {
234+
justify-content: center;
235+
}
236+
}
237+
</style>
11238
</head>
12239

13240
<body>
14-
<div>
15-
<h1>404</h1>
16-
<p>Page not found</p>
17-
</div>
241+
<section id="page-not-found" class="page-not-found column animate">
242+
<div>
243+
<img src="assets/img/doc-marty-remote-control.jpg" alt="Doc and Marty with remote control." />
244+
</div>
245+
<div class="page-not-found-text">
246+
<h1>404</h1>
247+
<h2>Great Scott!</h2>
248+
<p>
249+
The flux capacitor must've sent you to a missing page.
250+
</p>
251+
<div class="links">
252+
<a href="./" class="button" aria-label="Back to the Homepage">Back to the Homepage</a>
253+
</div>
254+
</div>
255+
</section>
256+
<script>
257+
setTimeout(() => {
258+
document.querySelector('.animate').classList.add('visible');
259+
}, 0.1);
260+
</script>
18261
</body>
19262

20263
</html>

0 commit comments

Comments
 (0)