Report Blog Entry
/* For Profile animation :3. source from https://forum.spacehey.com/topic?id=99272*/
<style>
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/v1.Y2lkPTc5MGI3NjExNTJodXRqZXdna3lkbXBsNmwwYjh1NmlvOGVpamRvM2h1Z25wMjZkNiZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/UWIstRu31uyDBzOOoo/giphy.gif');
background-size: cover;
background-repeat: repeat;
background-position:center;
background-color: black;
animation: yourAnimation 2.5s ease 0s 1 normal forwards;
pointer-events: none;
}
@keyframes yourAnimation { 0.0%{ opacity: 1;} 75%{ opacity: 1; } 100%{ opacity: 0;} }
<style>
h1{
animation: type 3s steps(27);
color: white;
font-size: 10px;
font-family: courier;
white-space: nowrap;
overflow: hidden;
}
@keyframes type{
0%{
width:0ch;
}
100%{
width:27ch;
}
}
@keyframes blink{
0%{opacity:1;}
50%{opacity:0;}
100%{opacity:1;}
}
.col, main, footer, nav::before, .online, nav .links, nav .top {
animation: float 4s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
.col, main, footer, nav::before, .online, nav .links, nav .top {
animation: float 4s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
@keyframes float {
0% { transform: translate(0, 0px);
}
50% {
transform: translate(0, 8px);
}
100% {
transform: translate(0, -0px);
}
</style>
while this part makes the stuff shake when you hover over it:
<style>
img:hover , .url-info:hover , .online:hover {
animation: shake 1s;
animation-iteration-count: infinite;
}
@keyframes shake {
0% { transform: translate(1px, 1px) rotate(0deg); }
10% { transform: translate(-1px, -2px) rotate(-1deg); }
20% { transform: translate(-3px, 0px) rotate(1deg); }
30% { transform: translate(3px, 2px) rotate(0deg); }
40% { transform: translate(1px, -1px) rotate(1deg); }
50% { transform: translate(-1px, 2px) rotate(-1deg); }
60% { transform: translate(-3px, 1px) rotate(0deg); }
70% { transform: translate(3px, 1px) rotate(-1deg); }
80% { transform: translate(-1px, -1px) rotate(1deg); }
90% { transform: translate(1px, 2px) rotate(0deg); }
100% { transform: translate(1px, -2px) rotate(-1deg); }
}
</style>
/* for more 3D Text, feel free to change the colors :3. source from https://layouts.spacehey.com/layout?id=7324 */
<style>
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
body{
background-image: url(https://64.media.tumblr.com/c3e2da7367ed718b4ef628a244cd9129/tumblr_p4o3bnVtto1qeyvpto1_500.gifv);
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.container{
margin: 0 auto;
width: 1000px;
}
main,
.profile .contact .heading,
.profile .table-section .heading,
.home-actions .heading,
.comments-table {
background: transparent !important;
background-color: transparent !important; /* using both for compatibility */
}
}
p{
color: white;
font-size: 12px;
}
nav .top{
background-color: transparent;
}
nav .links{
background-color: black;
text-align: center;
display: flex;
justify-content: space-around;
flex-wrap: wrap;
padding: .5em;
border-radius: 10px;
box-shadow:1px 3px 5px #B337FF;
}
.profile h1{
font-family: 'Press Start 2P', cursive;
font-size:40px;
color: white;
text-shadow: 1px 3px 5px #B337FF;
}
.profile .profile-info {
margin: 0px 20px 0px 20px;
box-shadow:1px 3px 5px #B337FF;
border-radius: 10px;
background-color: black;
color: white;
}
.profile .blog-preview{
color: white;
}
.profile-pic img{
border: 1px solid white;
border-radius: 100%;
box-shadow:1px 3px 5px #B337FF;
}
.online{
color: white;
font-family: 'Press Start 2P', cursive;
text-shadow: 1px 3px 5px #B337FF;
font-size: 150%;
animation-name: blink;
animation-iteration-count: infinite;
animation-timing-function: cubic-bezier(1.0,0,0,1.0);
animation-duration: 2s;
}
.online img{
display: none;
}
.profile .contact .heading,
.profile .table-section .heading{
background-color: transparent;
padding: .5em;
text-shadow: 1px 3px 5px #B337FF;
font-family: 'Press Start 2P', cursive;
font-size: 15px;
line-height: 1.5em;
}
.profile .table-section,
.profile .contact,
.profile .url-info{
border: none;
}
table.details-table td {
background-color: black !important;
border-radius: 10px;
padding: 1em;
box-shadow: 1px 3px 5px #B337FF;
}
.profile .blurbs .heading,
.profile .friends .heading{
background-color: transparent;
font-family: 'Press Start 2P', cursive;
text-shadow:1px 3px 5px #B337FF;
color: white;
font-size: 15px;
line-height: 1.5em;
}
.profile .blurbs .section h4{
color: white;
font-size: 15px;
padding: .5em;
}
table.comments-table{
border: none;
}
table.comments-table td {
background-color: black !important;
border-radius: 10px;
padding: 1em;
box-shadow: 1px 3px 5px #B337FF;
}
.person img{
border-radius: 100px;
box-shadow: 1px 3px 5px #B337FF;
}
.profile .friends-grid .person p{
color: white;
}
.count{
color: white;
text-shadow: 1px 3px 5px #B337FF;
}
.comments-table {
display: block;
height: 600px!important;
overflow-y: scroll;
outline: none !important;
}
.comments-table img{
border: 1px solid white;
border-radius: 100%;
box-shadow:1px 3px 5px #B337FF;
}
.profile .comments-table .comment-replies{
border: 1px solid white;
border-radius: 10px;
}
footer{
background-color: black;
border-radius: 10px;
box-shadow:1px 3px 5px #B337FF;
}
</style>
/* source from https://blog.spacehey.com/entry?id=548485 */
<style>
body {
background: url(https://i.pinimg.com/originals/17/9b/0f/179b0f379d6e0e4a105920ff25f83e87.jpg) no-repeat center center
fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.profile {
background: none; /*not sure if you were trying to have your background red first or not, but CSS will show the second styling of the same element*/
}
.profile {
background-color: #fffb00;
color: #fffb00; /*your text color for most of the page - this is the complimentary color for the magenta that you chose. Feel free to change it*/
}
/*these are your various headers, I have used yellow to show you which text is affected by this code. Feel free to change them to what you prefer. If you want individual headers to be different colors then you have to write each one in a separate piece of code.*/
h3 , h4, h5, .url-info b {
color: #fffb00;
}
/*This is the color of the links on your page. I have set them to green so you can see what they are. Feel free to change them to your preferred color*/
a {
color: #fffb00;
}
/* color of the normal text on your page. I have set this to purple so that you know which text is affected. Feel free to change it to what you prefer*/
p, h2 {
color: #fffb00;
}
/* color of friend's names in the comments, number of friends and your name. This I set to orange */
h1, .count, .friends a p {
color: #ffffff;
}
</style>
<style>
font-size: 150%;
}
h1,h2,h3,h4,h5{
font-size: 200%;
}
/* for bg image */
body {
background-image: url(https://media.giphy.com/media/FlodpfQUBSp20/giphy.gif);
}
/* for the box bg */
.profile {
background-color: rgb(0, 0, 0, 0);
}
/* change all headings on page to different colors. */
.profile .blurbs .heading,
.profile .friends .heading{
background-color: rgb(255, 251, 0);
color: black;
}
/* change all headings on page to different colors. */
.profile .contact .heading,
.profile .table-section .heading{
background-color: black;
color: rgb(0, 0, 0);
}
/* for the banner */
main:before {
width: 100%;
margin-bottom: 25px;
height: 200px;
display: block;
content: "";
background-image: url(https://yt3.googleusercontent.com/hf23gywCSRAt2s7w-LZa0wwtTmdezW5yflgYuFvuW5Wtxt9e8Shho3CEZQHLI_xOqrWGBhEpzQ=w1920-fcrop64=1,00000000ffffffff-k-c0xffffffff-no-nd-rj);
background-position: center center;
background-size: cover;
}
footer {
border-radius: 15px;
background-image: url();
color: black;
}
table.comments-table td {
color: rgb(255, 251, 0);
}
/* for changing smaller stuff like the boxes on the profile everywhere */
:root {
--logo-blue:yellow;
--darker-blue: yellow;
--lighter-blue: yellow;
--even-lighter-yellow: ;
--lightest-blue: black;
--dark-orange: black;
--light-orange: black;
--even-lighter-orange: black;
--green: yellow;
}
</style>
/* To play any Music just grab the numbers that go after the = and replace it after the "embed/" source from https://forum.spacehey.com/topic?id=98324*/
<iframe width="0" height="0" src="https://www.youtube.com/embed/YT3zA4tRBA4//?&;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>
I hope people enjoy this
Comments
Displaying 0 of 0 comments ( View all | Add Comment )