JosephFerano/ferano.io-website
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Experimenting with new background

Browse Source
This commit is contained in:
Joseph Ferano 2023-08-22 15:17:11 +07:00
parent 4662979fa6
commit 0ffd168d18
2 changed files with 155 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
index.html
View File

@ -10,7 +10,24 @@
<link href="https://fonts.googleapis.com/css2?family=Playfair:wght@300&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Playfair:wght@300&display=swap" rel="stylesheet">
</head> </head>
<body> <body>
<div id="topbar"></div>
<!-- <div class="overlay-gradient"></div> -->
<svg class="o-grad" xmlns='http://www.w3.org/2000/svg'>
<filter id='noiseFilter'>
<feTurbulence
type='fractalNoise'
baseFrequency='6.29'
numOctaves='3'
stitchTiles='stitch'/>
</filter>
</svg>
<div id="content"> <div id="content">
<div class="content-topbar" id="content-topbar-4"></div>
<!-- <div class="content-topbar" id="content-topbar-2"></div> -->
<!-- <div class="content-topbar" id="content-topbar-3"></div> -->
<!-- <div class="content-topbar" id="content-topbar-4"></div> -->
<!-- <div class="content-topbar" id="content-topbar-5"></div> -->
<div id="content-body">
<h1>Joseph Ferano</h1> <h1>Joseph Ferano</h1>
<hr> <hr>
<!-- <a href="https://blog.ferano.io">blog</a> --> <!-- <a href="https://blog.ferano.io">blog</a> -->

71
main.css
View File

@ -1,10 +1,70 @@
#topbar {
position: absolute;
top: 0;
left: 0;
background-color: #594F4F;
width: 100%;
height: 12px;
}
.content-topbar {
width: 600px;
height: 20px;
margin: -24px;
}
#content-topbar-1 { background-color: hsla(84,91%,87%, 0.9); }
#content-topbar-2 { background-color: hsla(134,52%,75%,0.9); }
#content-topbar-3 { background-color: hsla(177,43%,47%,0.9); }
#content-topbar-4 { background-color: hsla(190,21%,42%,0.9); }
#content-topbar-5 { background-color: hsla(0,6%,33%, 0.9); }
/* #E5FCC2, 5%) 0%, */
/* #9DE0AD, 5%) 20%, */
/* #45ADA8, 5%) 30%, */
/* #547980, 5%) 40%, */
/* #594F4F, 5%) 60%, */
/* #594F4F, 5%) 100%) */
body { body {
background-color: #f1faee; margin: 0;
overflow: hidden;
}
.o-grad {
position: absolute;
top: 0;
left: 0;
pointer-events: none; /* Allow clicks to reach underlying content */
}
body::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
filter: url(#noiseFilter);
opacity: 0.25; /* Adjust the opacity value as needed */
z-index: -1;
mix-blend-mode: difference;
}
body {
background: linear-gradient(
180deg,
hsla(84, 91%, 87%, 0.8) 0%,
hsla(134, 52%, 75%, 0.8) 20%,
hsla(177, 43%, 47%, 0.8) 30%,
hsla(190, 21%, 42%, 0.8) 40%,
hsla(0, 6%, 25%, 0.8) 60%,
hsla(0, 6%, 25%, 1) 100%
) no-repeat;
background-color: hsla(0, 6%, 25%, 1);
margin: 20px auto; margin: 20px auto;
max-width: 600px; max-width: 600px;
line-height: 1.6; line-height: 1.6;
font-size: 18px; font-size: 18px;
color: #444; color: #4f5b66;
padding: 10px 20px; padding: 10px 20px;
} }
@ -19,16 +79,16 @@ span {
} }
#content { #content {
background-color: #fff; background-color: hsla(84, 20%, 99%, 1);
padding: 24px; padding: 24px;
} }
hr { hr {
color: #777; color: hsla(134, 52%, 75%, 1);
} }
h1, h2, h3 { h1, h2, h3 {
color: #457b9d; color: hsla(190, 21%, 36%, 1);
line-height: 1.6; line-height: 1.6;
margin-top: 40px; margin-top: 40px;
margin-bottom: 10px; margin-bottom: 10px;
@ -66,4 +126,3 @@ a:active {
a:visited { a:visited {
color: #666; color: #666;
} }