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

experimenting with css with dustins code as template

Browse Source
This commit is contained in:
Petruspistor
2025-08-18 13:30:15 -07:00
parent 79eb147b60
commit 67a1da0570
2 changed files with 37 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
index.html
View File

@@ -3,33 +3,38 @@
<html lang="eng">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=500, initial-scale=1" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>"Peter the Baker"</title>
<link rel="stylesheet" href="https://fonts.google.com/specimen/Nata+Sans" />
<link rel="stylesheet" href="resources/style.css" />
<link rel="stylesheet" type="text/css" media="screen" href="resources/style.css" />
</head>
<body>
<header>
<img class="avatar" src="resources/img/pp.jpg" width="200" />
</header>
<div id="container>
<img id="avatar" src="resources/img/pp.jpg" width="200" />
<div id="title" class="tstyle">
Petrus Pistor
</div>
<nav>
<ul>
<li .id="Social">
<strong>Social</strong>
</li>
<li .id="Pistorium">
<strong>Pistorium</strong>
</li>
<li .id="Contact">
<strong>Contact</strong>
</li>
</ul>
</nav>
<div id="links">
<nav>
<ul>
<li .id="social">
<strong>Social</strong>
</li>
<li .id="pistorium">
<strong>Pistorium</strong>
</li>
<li .id="contact">
<strong>Contact</strong>
</li>
</ul>
</nav>
</div>
</div>
</body>
</html>

21
resources/style.css
View File

@@ -1,9 +1,12 @@
#Social {
font-size: large;
font-family: sans-serif;
}
#avatar {
alignment-baseline: central;
border-radius: 50%;
margin-bottom: -.75em;
}
@import 'https://fonts.googleapis.com/css?family=Cairo|Damion&display=swap';
body{background-color:#2c2c2c;color:#efefef;height:100%}
.tstyle{background:-webkit-linear-gradient(-45deg, #A3FF00 30%, #49FF00 35%, #00FF45 45%, #04FF54 60%, #00FFD2 65%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;font-family:damion;max-width:fit-content;margin:auto}
#container{text-align:center;font-family:cairo;position:absolute;top:45%;left:50%;transform:translate(-50%,-45%);width:auto}
#container #avatar{border-radius:50%;margin-bottom:-.75em}
#container #title{font-size:4em}
#container #text{line-height:1.375}
#container #links{margin-top:1.25em;white-space:nowrap;letter-spacing:.5em;line-height:2}
@media all and (max-width:1000px){#brave-shill{margin-top:.35em;max-width:100%;border-radius:.5em}}
@media all and (min-width:1001px){#brave-shill{margin-top:.35em;width:50%;border-radius:.5em}}a{color:#1ee9ff;text-decoration:none}
#container #links a{user-select:none;text-decoration:none;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none}
.icon{width:24px}