tyler/tylerperkins.xyz
1
0
Fork 0
mirror of https://github.com/Clortox/tylerperkins.xyz.git synced 2026-03-07 10:37:58 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Add parallax effect to background

Browse Source
This commit is contained in:
Tyler Perkins
2023-07-17 23:17:11 -04:00
parent 21d70b4a8a
commit b2f80c3a92
12 changed files with 155 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
static/css/styles.css
View File

@@ -14,6 +14,7 @@ body {
margin: 0;
height: 100%;
padding-bottom: 0px;
background-color: rgba(11,11,12,1);
}
h1, h2, h3, h4 {
@@ -48,11 +49,6 @@ html {
max-width: 100%;
height: 100vh;
display: grid;
align-content: center;
justify-content: center;
justify-items: center;
align-items: center;
}
.top-fade {
@@ -69,8 +65,12 @@ html {
.intro-content {
text-align: center;
}
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.page-header {
text-align: center;
@@ -119,8 +119,13 @@ article a {
padding: 50px;
height: 30vh;
padding-bottom: 25px;
background: linear-gradient(rgba(11,11,12,1) 0%, rgba(11,11,12,0.9) 50%, rgba(0,0,0,0) 100%);
overflow: hidden;
background: linear-gradient(rgba(11,11,12,1) 0%, rgba(11,11,12,0.9) 50%, rgba(0,0,0,0) 100%);
}
article a:hover {
background: linear-gradient(rgba(11,11,12,1) 0%, rgba(11,11,12,0.9) 50%, rgba(32,42,68,0.5) 100%);
transition: 300ms linear;
}
.post {