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

working on a different design using css background image

Browse Source
This commit is contained in:
Petruspistor
2025-08-18 14:08:12 -07:00
parent e8f381c782
commit 46049ff647
4 changed files with 15 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
index.html
View File

@@ -8,7 +8,7 @@
<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" type="text/css" media="screen" href="resources/style.css" /> <link rel="stylesheet" type="text/css" media="screen" href="resources/css/index.css" />
</head> </head>
<body> <body>

4
resources/css/index.css
View File

@@ -1,5 +1,5 @@
@import 'https://fonts.googleapis.com/css?family=Cairo|Damion&display=swap'; @import 'https://fonts.googleapis.com/css?family=Iceland&display=swap';
body{background-color:#2c2c2c;color:#efefef;height:100%} body{background-color:#2c2c2c;background-image: url("resources/img/pb.png");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} .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{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 #avatar{border-radius:50%;margin-bottom:-.75em}

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.9 MiB

12
resources/style.css Normal file
View File

@@ -0,0 +1,12 @@
@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}