Report Blog Entry
What you read is what you've got! A silent Hill 2 inspired layout, with A World Of Madness background music and a pretty funky loading screen :D
Enjoy!!(Feel free to credit me if you want, but you don't need too :3)
Just paste it into the about me, change up the topics to whatever you like, and enjoy!!
///////////////////////////////// S I L E N T H I L L 2 \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
<style>
@import url('https://fonts.googleapis.com/css2?family=Special+Elite&display=swap');
body{font-family: "Special Elite" ; font-size: 20px !important;}
</style>
<style>
img.logo{
content: url("https://cdn2.steamgriddb.com/logo_thumb/6d2bb9eb2c15945e521e74f65e846d1d.png");
width: 432px !important;
height: 90px !important;
</style>
<style>
body:before {
content: " ";
height: 100vh;
width: 100vw;
display: block;
position: fixed;
top: 0;
left: 0;
z-index: 100;
background-image: url('https://64.media.tumblr.com/a3823453ee99d97ab208cf32969d4953/634433792bdc5467-4e/s400x600/2f7991b46af718cc2448ee6c6ffd38ac3d95dd2a.gifv');
background-size: cover;
background-repeat: no-repeat;
background-position:center;
animation: yourAnimation 2s ease 0s 1 normal forwards;
pointer-events: none;}
@keyframes yourAnimation { 0.0%{ opacity: 1;} 75%{ opacity: 1; } 100%{ opacity: 0;} }
</style>
<style>
main:before {
width: 100%;
height: 170px;
display: block;
content: "";
background-image: url('https://cdn2.steamgriddb.com/hero_thumb/a45e648e2cc4f7c64ffa18955e3a1363.jpg');
background-position: center center;
background-size: fill;
}
@media only screen and (max-width: 600px) {
main:before{
height: 200px;
</style>
<iframe width="0" height="0" src="https://www.youtube.com/embed/lTZV54mq0Pw?si=HlbkxaSLKRnAs50-&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>
<style>
body{ background:url("https://wallpaperaccess.com/full/4312628.jpg") no-repeat fixed; background-size:cover;
background-color: black;
}
background-color: DimGray;
}
.general-about .profile-pic img {
border: 10px solid transparent;
border-image: url("https://wallpaperaccess.com/full/9549666.jpg") 60 fill stretch;
box-shadow: 0px 0px 10px 0px black;
}
.profile {
background-image:url(https://wallpaperaccess.com/full/1302795.jpg);
background-repeat: repeat;
}
h1{
font-family: 'Special Elite';
font-size: 60px !important;
text-shadow: 3px 0px 15px White;
color: Black;
}
.friends p, .friends a {
color: silver;
text-shadow: 3px 0px 3px DimGrey;
}
.row.profile{
box-shadow: 0px 0px 10px 4px DimGrey;
}
.profile .friends .inner{
text-align: center;
background-image: url("https://wallpaperaccess.com/full/5698722.jpg");
background-position: center center;
border: 3px inset Silver;
box-shadow: 0px 0px 10px 0px DimGrey;
}
.profile .blurbs .section h4 {
text-align: center;
font-size: 25px;
color: Black;
border: 3px Silver;
}
:root
{
--logo-blue: ;
--darker-blue: ;
--lighter-blue: purple 55;
--even-lighter-blue: ;
--lightest-blue: ;
--dark-orange: ;
--light-orange: ;
--even-lighter-orange: ;
--turquoise: ;
--table-header:#191970;
--table-color: #87CEFA;
--link-text: #87CEFA;
--main-text: #87CEFA;
}
.profile-info{
background:url("https://64.media.tumblr.com/53c4e63d3c887b5c9ab5fcded43f6d63/b2b012fbcbaf76c7-d4/s400x600/5cb3d4eb28242b1620c2c9c99822958f6d5b008c.gifv");
background-size: centre;
border: 3px inset Grey;
box-shadow: 0px 0px 15px 0px black;
}
.profile-info a{
font-size: 25px;
color: Grey;
text-shadow: 1px 1px 5px black;
}
.profile .blurbs .heading, .profile .friends .heading {
color: Grey;
background-color: transparent;
}
.profile .blurbs .inner{
background: url("https://wallpaperaccess.com/full/4358212.jpg");
box-shadow: 0px 0px 10px 0px black;
border: 3px inset DimGrey;
}
.profile .contact .heading, .profile .table-section .heading, .home-actions .heading {
background-color: transparent;
color: white;
}
.contact .heading h4{
display:none !important;
}
.contact .heading{ font-size:20px;}
.contact .heading:before{ content: url();
overflow:hidden;
}
.general-about img {-webkit-mask-image: url( https://i.postimg.cc/Hk6D7BxQ/868-sin-t-tulo-20240429140043.png);-webkit-mask-size: 100%;-webkit-mask-repeat: no-repeat;-webkit-mask-position: center;
}
.table-section .heading{ font-size:0; }
.table-section .heading:before{ content: url();
padding-bottom: 10px;
}
h4 {
font-size: 20px !important;
color: DimGrey;
font-family: 'Special Elite';
}
p {
font-family: 'Special Elite';
font-size: 18px;
color: Black;
}
a {
font-size: 15px;
color: Black;
}
a:hover {
color: SeaGreen;
}
.count {
color: SeaGreen;
}
.profile .friends .person p {
color: Silver;
}
.profile .friends .person p:hover {
color: SeaGreen;
}
.blog-preview{
text-align: center;
background-image: url();
color: Silver;
}
.contact .heading h4{
font-size: 20px;
}
.online {
margin:auto;
padding-bottom: 5px;
content: url(https://64.media.tumblr.com/dcf0b22872903d4340efa4efe3c5f255/5999ac10681896d0-69/s250x400/f6bd42b0c7021be00209699d1cd86f293e670003.gifv);
}
.profile .contact {
border: black;
font-family: 'Special Elite';
background: url(https://wallpaperaccess.com/full/4358212.jpg);
border: 3px inset DimGrey;
box-shadow: 0px 0px 10px 0px black;
}
.profile .contact a{
font-size: 15px;
}
.profile .table-section .details-table td p, .profile .table-section .details-table td a{
color: Silver;
}
.profile .table-section .details-table td a:hover{
color: SeaGreen;
}
.profile .table-section .details-table td {
background:url("https://wallpaperaccess.com/full/5698722.jpg");
background-position: center center;
border: 3px inset DimGrey;
box-shadow: 0px 0px 10px 0px black;
}
.general-about .details{
padding: 2px;
font-family: 'Special Elite';
}
.profile .url-info {
border: 3px solid transparent;
color: transparent;
font-size: 0.1px;
height: 65px;
background-image: url(https://cdn2.steamgriddb.com/logo_thumb/4fac3d24a9342b7fdce9ffc27fe9286c.png);
}
.links{
width=810px;
}
nav .links {
background: transparent;
}
nav .links a:hover {
color: SeaGreen;
}
nav .top{
background: url();
}
nav .links a{
color: Silver;
font-family: Special Elite;
font-size: 20px;
text-shadow: 0 0 7px black;
}
table .comments-table {
border: 2px inset Sienna;
}
footer {
color: white !important;
box-shadow: 0px 0px 15px 6px Silver;
text-decoration: underline !important;
text-decoration-style: dotted !important;
background-color: DarkGrey;
}
</style>
<style>
:root{
--topic1: "topic 1 (general)";
--topic2: "topic 2 (music)";
--topic3: "topic 3 (movies)";
--topic4: "topic 4 (TV)";
--topic5: "topic 5 (books)";
--topic6: "topic 6 (heroes)";
}
.table-section:not(:last-child) .details-table tr td:first-child p{color:transparent !important;text-shadow: none !important;letter-spacing: -100px;}
.details-table tr td:first-child p::after{
color:var(--links) !important;
letter-spacing:normal !important;
text-shadow: 2px 2px white !important;
filter: brightness(95%) !important;
}
.table-section:not(:last-child) .details-table tr:nth-child(1) td:first-child p::after{
content: var(--topic1);
}
.table-section:not(:last-child) .details-table tr:nth-child(2) td:first-child p::after{
content: var(--topic2);
}
.table-section:not(:last-child) .details-table tr:nth-child(3) td:first-child p::after{
content: var(--topic3);
}
.table-section:not(:last-child) .details-table tr:nth-child(4) td:first-child p::after{
content: var(--topic4);
}
.table-section:not(:last-child) .details-table tr:nth-child(5) td:first-child p::after{
content: var(--topic5);
}
.table-section:not(:last-child) .details-table tr:nth-child(6) td:first-child p::after{
content: var(--topic6);
}
</style>
<style>
::-webkit-scrollbar {
width: 8px;
height: 10px;}
::-webkit-scrollbar-thumb {
background: LightSteelBlue;}
::-webkit-scrollbar-track {
background: DimGray;}
</style>
<style>
table.comments-table{
background: url();
display: block;
height: 300px!important;
overflow-y: scroll;
border-color: transparent;
border-width: 5px;
}
</style>
<style>
html:before {
animation: grain 8s steps(10) infinite;
background-image: url(https://j.gifs.com/v1A7LP.gif);
background-size: cover;
background-repeat: no-repeat;
background-position:center;
content: "";
height: 300%;
left: -50%;
opacity:.25;
position: fixed;
top: -110%;
width: 300%;
pointer-events:none;
}
@keyframes grain {
0%, 100% { transform:translate(0, 0) }
10% { transform:translate(-5%, -10%) }
20% { transform:translate(-15%, 5%) }
30% { transform:translate(7%, -25%) }
40% { transform:translate(-5%, 25%) }
50% { transform:translate(-15%, 10%) }
60% { transform:translate(15%, 0%) }
70% { transform:translate(0%, 15%) }
80% { transform:translate(3%, 35%) }
90% { transform:translate(-10%, 10%) }
}
</style>
///////////////////////////////// S I L E N T H I L L 2 \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
Comments
Displaying 0 of 0 comments ( View all | Add Comment )