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

41
index.html
View File

@@ -3,33 +3,38 @@
<html lang="eng"> <html lang="eng">
<head> <head>
<meta charset="UTF-8" /> <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> <title>"Peter the Baker"</title>
<link rel="stylesheet" href="https://fonts.google.com/specimen/Nata+Sans" /> <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> </head>
<body> <body>
<header> <div id="container>
<img class="avatar" src="resources/img/pp.jpg" width="200" /> <img id="avatar" src="resources/img/pp.jpg" width="200" />
</header> <div id="title" class="tstyle">
Petrus Pistor
</div>
<nav> <div id="links">
<ul> <nav>
<li .id="Social"> <ul>
<strong>Social</strong> <li .id="social">
</li> <strong>Social</strong>
</li>
<li .id="Pistorium"> <li .id="pistorium">
<strong>Pistorium</strong> <strong>Pistorium</strong>
</li> </li>
<li .id="Contact"> <li .id="contact">
<strong>Contact</strong> <strong>Contact</strong>
</li> </li>
</ul> </ul>
</nav> </nav>
</div>
</div>
</body> </body>
</html> </html>

21
resources/style.css
View File

@@ -1,9 +1,12 @@
#Social { @import 'https://fonts.googleapis.com/css?family=Cairo|Damion&display=swap';
font-size: large; body{background-color:#2c2c2c;color:#efefef;height:100%}
font-family: sans-serif; .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}
#avatar { #container #avatar{border-radius:50%;margin-bottom:-.75em}
alignment-baseline: central; #container #title{font-size:4em}
border-radius: 50%; #container #text{line-height:1.375}
margin-bottom: -.75em; #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}