Report Blog Entry
Heres the code for my profile layout if anyone wants to use it. I'm posting it as a blog post, since posting layouts is currently unavailable. Just copy and paste this code into your About Me section:
<style>
body {background-image: url(https://i.pinimg.com/736x/93/71/aa/9371aa10e0d5fac2f9bb174bf4891c8d.jpg); background-size: cover; background-position: center; background-attachment: fixed;}
main {background: transparent;}
nav .top {background: transparent; border: 5px solid #c22727;}
nav .links {background: black; border: 5px solid #c22727;}
.col.w-40.left {color: #c22727;}
.inner {color: #c22727;}
.col.right .profile-info {background: black; border: 5px solid #c22727;}
a {color: #ed1111; text-shadow: none;}
nav .links a {color: #ed1111; text-shadow: none;}
nav .top a {color: #ed1111;}
.logout-btn {color: #ed1111;}
nav .top .right {color: #c22727;}
.blog-preview {color: #c22727;}
.profile .blurbs .heading {background: black; color: #c22727; border: 5px solid #c22727;}
.profile .blurbs .section h4 {color: #c22727;}
.profile .friends .heading {background: black; color: #c22727; border: 5px solid #c22727;}
.col.w-40.left .contact {border: 5px solid #c22727;}
.profile .contact .heading {background: black; color: #c22727;}
.col.w-40.left .url-info {border: 5px solid #c22727;}
.profile .friends .person p {color: #ed1111;}
.col.w-40.left .table-section {border: 5px solid #c22727;}
.profile .table-section .heading {background: black; color: #c22727;}
.details-table td p {background: black; color: #c22727;}
.details-table td {background: black; border: 2px solid #c22727;}
.comments-table td:first-child {background: transparent; border: 3px solid #c22727;}
table.comments-table {border: 5px solid #c22727;}
.comments-table td {background: black;}
footer {background: black; border: 5px solid #c22727;}
.comments-table td {border: 2px solid #c22727;}
.details-table td:first-child {background: black;}
footer p {color: #c22727;}
html:before {
animation: grain 8s steps(10) infinite;
background-image: url(https://i.ibb.co/d2Np1d2/static.gif);
background-size: 200px !important;
content: '';
height: 300%;
left: -50%;
opacity: .3; /*Change this value (0 - 1) to change the intensity of the effect)*/
position: fixed;
top: -110%;
width: 300%;
pointer-events:none;
}
main:before {
width: 100%;
height: 280px;
display: block;
content: '';
background-image: url(https://www.altpress.com/wp-content/uploads/2017/06/01/mcr-three-cheers-1052x592.jpg?t=1689354736);
background-position: center center;
background-size: cover;
}
@media only screen and (max-width: 600px) {
main:before{
height: 200px;
}
}
body:before {
content: ' ';
height: 100vh;
width: 100vw;
display: block;
position: fixed;
top: 0;
left: 0;
z-index: 100;
background-image: url(https://media2.giphy.com/media/1GIfN221wZh3KxkEwC/giphy.gif?cid=6c09b952ekfdobyr67tp6dvao6g695rbnzenng3guf03txpb&ep=v1_internal_gif_by_id&rid=giphy.gif&ct=g);
background-size: cover;
background-repeat: no-repeat;
background-position:center;
animation: yourAnimation 6s ease 0s 1 normal forwards;
pointer-events: none;
}
@keyframes yourAnimation { 0.0%{ opacity: 1;} 75%{ opacity: 1; } 100%{ opacity: 0;} }
main:before {
width: 100%;
height: 280px;
display: block;
content: '';
background-image: url(https://www.altpress.com/wp-content/uploads/2017/06/01/mcr-three-cheers-1052x592.jpg?t=1689354736);
background-position: center center;
background-size: cover;
}
@media only screen and (max-width: 600px) {
main:before{
height: 200px;
}
}
body:before {
content: ' ';
height: 100vh;
width: 100vw;
display: block;
position: fixed;
top: 0;
left: 0;
z-index: 100;
background-image: url(https://media2.giphy.com/media/1GIfN221wZh3KxkEwC/giphy.gif?cid=6c09b952ekfdobyr67tp6dvao6g695rbnzenng3guf03txpb&ep=v1_internal_gif_by_id&rid=giphy.gif&ct=g);
background-size: cover;
background-repeat: no-repeat;
background-position:center;
animation: yourAnimation 6s ease 0s 1 normal forwards;
pointer-events: none;
}
@keyframes yourAnimation { 0.0%{ opacity: 1;} 75%{ opacity: 1; } 100%{ opacity: 0;} }
@keyframes spin {
100% {
transform: rotate(360deg);
}
}
.vinyl {
animation: spin 3s linear infinite;
height: 150px;
margin-left: 55px;
padding: 0px;
position: absolute;
}
.vinylRecord {
height: 150px;
padding: 0px;
position: relative;
z-index: 1;
margin-right: 55px;
}
.recordPlayer {
display: flex;
justify-content: center;
align-items: center;
}
main:before {height: 200px;}
@import url('https://fonts.googleapis.com/css2?family=Neucha&display=swap');
p{
font-family: "Neucha", cursive;
font-weight: 400;
font-style: normal;
}
h1,h2,h3,h4,a{
font-family: "Neucha", cursive;
font-weight: 600;
font-style: normal;
}
</style>
<iframe width="0" height="0" src="https://www.youtube.com/embed/HSAXVVl9BUU?si=V5PKq-TPG1c-kxHI//?&;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>
<div style="max-height: 300px; position: fixed; right: 100px; bottom: 0px; z-index: 99;">
<img src="https://media2.giphy.com/media/F7HGvv8iGwnyBoj9BY/giphy-downsized.gif" height="300"/>
<div style="max-height: 300px; position: fixed; left: 100px; bottom: 350px; z-index: 99;">
<img src="https://img1.picmix.com/output/stamp/normal/1/9/4/6/1776491_b113c.gif" height="200"/></div></div>
<marquee>
<img src="https://i.ibb.co/kKkNjkL/I-Brought-You-My-Bullets-You-Brought-Me-Your-Love-cover.jpg" alt="I-Brought-You-My-Bullets-You-Brought-Me-Your-Love-cover" width="100px"/>
<img src="https://i.ibb.co/K7bBv1g/Mcr-revenge-album-cover.jpg" alt="Mcr-revenge-album-cover" width="100px"/>
<img src="https://i.ibb.co/cgrhfdz/Blackparadecover.jpg" alt="Blackparadecover" width="100px"/>
<img src="https://i.ibb.co/qBCpdyd/Danger-Days-album-2010.jpg" alt="Danger-Days-album-2010" width="100px"/>
<marquee></marquee></marquee>
Comments
Displaying 0 of 0 comments ( View all | Add Comment )