petruspistor/petruspistor.com
2
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: petruspistor:1e33071913780e2bb9bdd7810d1b986f18b67ad4
Branches Tags
petruspistor:main
..
compare: petruspistor:main
Branches Tags
petruspistor:main

2 Commits
1e33071913 ... main

Author SHA1 Message Date
petruspistor
8edfd49eca update under construction 2025-08-25 09:37:45 +00:00
petruspistor
d273005d1c Modified HTML and CSS to display UC 2025-08-23 11:22:48 +00:00
3 changed files with 99 additions and 30 deletions
Expand all files Collapse all files

88
index.html
View File

@@ -1,24 +1,68 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE html>
<html lang="en"> <html lang="en">
<head>
<head> <meta charset="UTF-8">
<link href="https://fonts.googleapis.com/css2?family=Iceland&display=swap" rel="stylesheet"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="/resources/img/pp.jpg" type="image/jpeg"> <title>Website Under Construction</title>
<meta charset="en"> <style>
<title>Peter Baker</title> /* Global styles */
</head> * {
box-sizing: border-box;
<body> }
<header class="site-header" role="banner"> body {
<picture> margin: 0;
<source srcset="/resources/img/pb_16_9_under512kb.webp" type="image/webp"> padding: 0;
<img src="/resources/img/pb.png" alt="Portrait of Peter" width="1280" height="372" loading="eager" decoding="async"> font-family: Arial, Helvetica, sans-serif;
<picture> /* Create a subtle diagonal caution stripe background */
</header> background: repeating-linear-gradient(
-45deg,
<p>Whether it be IMDB’s top 250 movies or the FBI’s most wanted, lists are everywhere on the web and you are going to need one eventually in your webpages. #ffeb3b 0,
Luckily, with HTML there are a couple of different types of lists at your disposal.</p> #ffeb3b 20px,
</body> #f5c542 20px,
#f5c542 40px
);
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.overlay {
background: rgba(255, 255, 255, 0.9);
padding: 40px;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
max-width: 500px;
text-align: center;
}
h1 {
margin-bottom: 20px;
font-size: 2.4rem;
color: #333;
}
p {
margin-bottom: 20px;
font-size: 1.2rem;
color: #555;
}
.contact {
font-size: 1rem;
color: #555;
}
a {
color: #007bff;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<div class="overlay">
<h1>Under Construction</h1>
<p>I'm currently working on bringing you an amazing website. Please check back soon!</p>
<p class="contact">If you have any questions, feel free to <a href="mailto:connect+pp@petruspistor.com">contact me</a>.</p>
</div>
</body>
</html> </html>

41
resources/css/index.css
View File

@@ -1,11 +1,36 @@
body { * {
margin: 0; margin: 0;
padding: 0; padding: 0;
background-color: #F5F5F5 box-sizing: border-box;
font-family: Iceland;
line-height: 1.0
} }
html, body {
height: 100%;
}
body {
display: flex;
justify-content: center;
aligin-times: center;
background: linear-gradient(180deg, #f7d34b, #e0a82e);
/* fallback solid background */
background-color: #f7d34b;
font-family: Arial, san-serif;
}
/* Center the Image */
.container img {
max-width: 90%;
height: auto;
border: 6px solid #e0a82e;
border-radius: 12px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

BIN
resources/img/underconstruction.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.3 MiB