Report Blog Entry
first and foremost: this layout uses a modified version of a modified version of aerin's VHS overlay layout. so all credit for that goes to them.
(layout will be the same as the one shown here including autoplay)
if anyone knows how to close the gap between the banner and the nav bar please tell me so I can edit it.
ignore the fact this looks weird.
spacehey is really weird when it comes to blog code
copy and paste into your about me section:
<iframe width="0" height="0" src="https://www.youtube.com/embed/nBDbUVXXp-U?si=Y-aJXw5hMpubiG4k//?&;amp;;autoplay=1&;loop=1&;controls=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" loading="lazy">
</iframe>
<!-- (c) Layout created by ^^friend of grandpa^^-->
<style>
body{
border-style: solid;
border-color: #bf5000;
.brbo{
border-style: solid;
border-color: #bf5000;
background-color: #ff9500;
}
.noise {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
overflow: hidden;
z-index: 400;
sca: 0.4;
pointer-events: none;
opacity: 0.4;
z-index: 450;
}
.noise:before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('https://ice-creme.de/images/background-noise.png');
pointer-events: none;
will-change: background-position;
animation: noise 1s infinite alternate;
}
.lines {
position: fixed;
left: 0;
top: 0;
width: 100vw;
height: 100vh;
pointer-events: none;
z-index: 300;
opacity: 0.4;
will-change: opacity;
animation: opacity 3s linear infinite;
}
.lines:before {
content: '';
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
pointer-events: none;
background: linear-gradient(to bottom, transparent 50%, rgba(0, 0, 0, .5) 51%);
background-size: 100% 4px;
will-change: background, background-size;
animation: scanlines 0.6s linear infinite;
}
.main {
}
.main .noise:before {
background-size: 170%;
}
.main .vhs {
position: absolute;
left: 2rem;
top: 2rem;
will-change: text-shadow;
animation: rgbText 2s steps(9) 0s infinite alternate;
}
.main .vhs .char {
will-change: opacity;
animation: type 1.2s infinite alternate;
animation-delay: calc(60ms * var(--char-index));
}
.main .time {
position: absolute;
right: 2rem;
top: 2rem;
will-change: text-shadow;
animation: rgbText 1s steps(9) 0s infinite alternate;
}
.main .glitchtext {
will-change: text-shadow;
animation: rgbText 1s steps(9) 0s infinite alternate;
}
@keyframes noise {
0%,
100% {
background-position: 0 0;
}
10% {
background-position: -5% -10%;
}
20% {
background-position: -15% 5%;
}
30% {
background-position: 7% -25%;
}
40% {
background-position: 20% 25%;
}
50% {
background-position: -25% 10%;
}
60% {
background-position: 15% 5%;
}
70% {
background-position: 0 15%;
}
80% {
background-position: 25% 35%;
}
90% {
background-position: -10% 10%;
}
}
@keyframes opacity {
0% {
opacity: 0.3;
}
20% {
opacity: 0.1;
}
35% {
opacity: 0.2;
}
50% {
opacity: 0.5;
}
60% {
opacity: 0.1;
}
80% {
opacity: 0.4;
}
100% {
opacity: 0.3;
}
}
@keyframes scanlines {
from {
background: linear-gradient(to bottom, transparent 50%, rgba(0, 0, 0, .5) 51%);
background-size: 100% 4px;
}
to {
background: linear-gradient(to bottom, rgba(0, 0, 0, .5) 50%, transparent 51%);
background-size: 100% 4px;
}
}
@keyframes rgbText {
0% {
text-shadow: -1px 1px 8px rgba(255, 255, 255, 0.4), 1px -1px 8px rgba(255, 255, 235, 0.5), 0px 0 1px rgba(251, 0, 231, 0.6), 0 0px 3px rgba(0, 233, 235, 0.8), 0px 0 3px rgba(0, 242, 14, 0.6), 0 0px 3px rgba(244, 45, 0, 0.6), 0px 0 3px rgba(59, 0, 226, 0.6);
}
10% {
text-shadow: -1px 1px 8px rgba(255, 255, 255, 0.4), 1px -1px 8px rgba(255, 255, 235, 0.5), 0px 0 1px rgba(251, 0, 231, 0.8), 0 0px 3px rgba(0, 233, 235, 0.8), 0px 0 3px rgba(0, 242, 14, 0.6), 0 0px 3px rgba(244, 45, 0, 0.6), 0px 0 3px rgba(59, 0, 226, 0.6);
}
35% {
text-shadow: -1px 1px 8px rgba(255, 255, 255, 0.4), 1px -1px 8px rgba(255, 255, 235, 0.5), 5px 0 1px rgba(251, 0, 231, 0.6), 0 5px 1px rgba(0, 233, 235, 0.6), -5px 0 1px rgba(0, 242, 14, 0.6), 0 -5px 1px rgba(244, 45, 0, 0.86, 5px 0 1px rgba(59, 0, 226, 0.6);
}
40% {
text-shadow: -1px 1px 8px rgba(255, 255, 255, 0.4), 1px -1px 8px rgba(255, 255, 235, 0.5), -5px 0 1px rgba(251, 0, 231, 0.6), 0 -5px 1px rgba(0, 233, 235, 0.6), 5px 0 1px rgba(0, 242, 14, 0.6), 0 5px 1px rgba(244, 45, 0, 0.6), -5px 0 1px rgba(59, 0, 226, 0.6);
}
45% {
text-shadow: -1px 1px 8px rgba(255, 255, 255, 0.4), 1px -1px 8px rgba(255, 255, 235, 0.5), 0px 0 3px rgba(251, 0, 231, 0.6), 0 0px 3px rgba(0, 233, 235, 0.6), 0px 0 3px rgba(0, 242, 14, 0.6), 0 0px 3px rgba(244, 45, 0, 0.6), 0px 0 3px rgba(59, 0, 226, 0.6);
}
80% {
text-shadow: -1px 1px 8px rgba(255, 255, 255, 0.6), 1px -1px 8px rgba(255, 255, 235, 0.7), -5px 0 1px rgba(251, 0, 231, 0.8), 0 5px 1px rgba(0, 233, 235, 0.6), 5px 0 1px rgba(0, 242, 14, 0.8), 0 -5px 1px rgba(244, 45, 0, 0.8), 5px 0 1px rgba(59, 0, 226, 0.8);
}
90% {
text-shadow: -1px 1px 8px rgba(255, 255, 255, 0.6), 1px -1px 8px rgba(255, 255, 235, 0.7), 5px 0 1px rgba(251, 0, 231, 0.8), 0 -5px 1px rgba(0, 233, 235, 0.8), -5px 0 1px rgba(0, 242, 14, 0.8), 0 5px 1px rgba(244, 45, 0, 0.8), -5px 0 1px rgba(59, 0, 226, 0.8);
}
}
@keyframes type {
0%,
19% {
opacity: 0;
}
20%,
100% {
opacity: 0.1;
}
}
</style>
<div class="lines"></div>
<div class="main">
<div class="noise"></div>
<style>
.rgbtxt {
animation: rgbText 1s steps(9) 0s infinite alternate;
animation-name: rgbText;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
@keyframes rgbText {
0% {
text-shadow: -1px 1px 8px rgba(255, 255, 255, 0.6), 1px -1px 8px rgba(255, 255, 235, 0.7), 0px 0 1px rgba(251, 0, 231, 0.8), 0 0px 3px rgba(0, 233, 235, 0.8), 0px 0 3px rgba(0, 242, 14, 0.8), 0 0px 3px rgba(244, 45, 0, 0.8), 0px 0 3px rgba(59, 0, 226, 0.8);
}
25% {
text-shadow: -1px 1px 8px rgba(255, 255, 255, 0.6), 1px -1px 8px rgba(255, 255, 235, 0.7), 0px 0 1px rgba(251, 0, 231, 0.8), 0 0px 3px rgba(0, 233, 235, 0.8), 0px 0 3px rgba(0, 242, 14, 0.8), 0 0px 3px rgba(244, 45, 0, 0.8), 0px 0 3px rgba(59, 0, 226, 0.8);
}
45% {
text-shadow: -1px 1px 8px rgba(255, 255, 255, 0.6), 1px -1px 8px rgba(255, 255, 235, 0.7), 5px 0 1px rgba(251, 0, 231, 0.8), 0 5px 1px rgba(0, 233, 235, 0.8), -5px 0 1px rgba(0, 242, 14, 0.8), 0 -5px 1px rgba(244, 45, 0, 0.8), 5px 0 1px rgba(59, 0, 226, 0.8);
}
50% {
text-shadow: -1px 1px 8px rgba(255, 255, 255, 0.6), 1px -1px 8px rgba(255, 255, 235, 0.7), -5px 0 1px rgba(251, 0, 231, 0.8), 0 -5px 1px rgba(0, 233, 235, 0.8), 5px 0 1px rgba(0, 242, 14, 0.8), 0 5px 1px rgba(244, 45, 0, 0.8), -5px 0 1px rgba(59, 0, 226, 0.8);
}
55% {
text-shadow: -1px 1px 8px rgba(255, 255, 255, 0.6), 1px -1px 8px rgba(255, 255, 235, 0.7), 0px 0 3px rgba(251, 0, 231, 0.8), 0 0px 3px rgba(0, 233, 235, 0.8), 0px 0 3px rgba(0, 242, 14, 0.8), 0 0px 3px rgba(244, 45, 0, 0.8), 0px 0 3px rgba(59, 0, 226, 0.8);
}
90% {
text-shadow: -1px 1px 8px rgba(255, 255, 255, 0.6), 1px -1px 8px rgba(255, 255, 235, 0.7), -5px 0 1px rgba(251, 0, 231, 0.8), 0 5px 1px rgba(0, 233, 235, 0.8), 5px 0 1px rgba(0, 242, 14, 0.8), 0 -5px 1px rgba(244, 45, 0, 0.8), 5px 0 1px rgba(59, 0, 226, 0.8);
}
100% {
text-shadow: -1px 1px 8px rgba(255, 255, 255, 0.6), 1px -1px 8px rgba(255, 255, 235, 0.7), 5px 0 1px rgba(251, 0, 231, 0.8), 0 -5px 1px rgba(0, 233, 235, 0.8), -5px 0 1px rgba(0, 242, 14, 0.8), 0 5px 1px rgba(244, 45, 0, 0.8), -5px 0 1px rgba(59, 0, 226, 0.8);
}
}
</style></div>
<style>
body{
background-image: url("https://i.ibb.co/MnP4xNB/brown025.jpg");
color: #fcd628;
}
main:before {
width: auto;
border-style: solid;
border-color: #ff9500;
border-top: none;
border-left: none;
border-right: none;
height: 250PX;
display: block;
opacity: 90%;
background-size: cover;
content: "";
background-image: URL(https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/19d92c58-6a71-4a18-80e2-f2871ee341d7/djendfq-0d21352c-9233-4056-b9d7-d86313572272.gif?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcLzE5ZDkyYzU4LTZhNzEtNGExOC04MGUyLWYyODcxZWUzNDFkN1wvZGplbmRmcS0wZDIxMzUyYy05MjMzLTQwNTYtYjlkNy1kODYzMTM1NzIyNzIuZ2lmIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.QTRZnaAgHgkqFfuJiShkTCiPKQDL9hpByTMR0iaAP1A);
}
main{
background-image: url("");
background-repeat: repeat;
border-style: solid;
border-color: #ff9500;
}
.profile .friends .heading{
background-color: rgb(255, 153, 0 );
color: black;
}
:root {
--logo-blue: #(color);
--darker-blue: #(color);
--lighter-blue: #(color number);
--even-lighter-blue: #ffc470;
--lightest-blue: #ff9500;
--dark-orange: orange;
--light-orange: #754501;
--even-lighter-orange: brown;
}
</style>
<div class="brbo">
about me:
</div>
if you want your profile to have a brown border around your info boxes paste
this code into each box E.I your about me, general, music, movies, etc.
<div class="brbo">
</div>
each of the info boxes code should look like this:
<div class="brbo">
bla bla bla lorem ipsum this is the content in my about me section,
well its not its just an example so you know to put the start and end
tags at the start and end, btw the bigger tag is the start tag and the
smaller one with the / at the start is the end tag.
</div>
feel free to ask any questions
Comments
Displaying 2 of 2 comments ( View all | Add Comment )
sadsanti_:(
a bit unrelated but howd you make that scroll thing for your code??
If you create a div/divider after setting the attributes and adding text inside, you can add the 'overflow: scroll;' function, which will make any text that doesn't fit within the border visible via scrolling through it. IDK if this made sense or not, so if you want I can send you the code I used
by ^^friend of grandpa^^; ; Report
I just read in your bio you're pretty new to HTML, and this is more CSS related, so if this doesn't make sense, it definitely will after you get the basics of HTML down and start learning how to style stuff.
by ^^friend of grandpa^^; ; Report
it made sense.. but now it has a scrollwheel on the bottom and idk how to make it different colors sob
by sadsanti_:(; ; Report
^^friend of grandpa^^
if you havent watched juno or just think the banner is ugly, but still like the layout then delete the "background-image:" section so that the banner isn't there, cause that's really the only thing that specifically makes this a juno themed layout.