Transparent With Big Header Animation

Tags: simple, animation, transparent, header

Description:

Copy the entire code, click home at the top of the page, press "profile" or press your url, then click "edit your profile" on your page and then paste all layout code into about me: then at the top click "save all" then "view your profile" will show up and you can click on that and my layout will show up !

Guide:

Go back to your "Edit Profile"
Replace all animation gif with your own desire gif.
Contact me if you have difficulty in applying the codes on your profile page or give a comment here !

You can ask me through the page below:

My Group
Send Message
If I'm not online here, then you can try to contact me via my personal: Profile Pages

Preview:

click on the image for a larger preview

Code:

<!-- (c) Layout created by  👙 Soraya Pepe 🍕 (https://layouts.spacehey.com/layout?id=23946) -->

<!-- (c) Layout Edited by sorayapepe ! (https://spacehey.com/sorayapepe) --><style>
/*U can change the cursor via cursors-4u.com*/
@import url('https://fonts.googleapis.com/css2?family=Kalam:wght@700&display=swap');
/* Start https://www.cursors-4u.com */ * {cursor: url(https://ani.cursors-4u.net/movie/mov-2/mov158.cur), auto !important;}

/*Replace the animation gif with your own desire gif*/
body {
background-image:url(https://gif.tv/gifs/giftv-2467-oldspicetree.gif);
height: 100%;
background-position: center;
background-attachment: fixed;
background-repeat: no-repeat;
background-size: cover;
}

/*U can replace with your own photo selfie: jpg,png*/
.profile {
background-image:url(https://64.media.tumblr.com/3bcec94c24566b1e8e98164c9d5724ea/tumblr_p2n47mJpkV1w4buu5o1_400.jpg);
  background-repeat: repeat;
    border-radius: 20px;
}

/*Replace the animation gif with your own desire gif: video gif, funny gif,*/
.contact:after {
        width: 100%;
        height: 167px;
        display: block;
        content: "";
        background-color: transparent;
        background-image: url(https://gif.tv/gifs/giftv-853-madmencry.gif);
        background-position: center;
        opacity: 100%;
        background-size: 450px;
        border-radius: 7px;
    }

/*this area for TOP header. u can Replace the animation gif with your own desire gif*/   
nav .top{
background-image: url(https://gif.tv/gifs/iwyQhF3zQxt7D.gif);
        height: 423px;
        background-size: 800px;
        background-position: top;
        border-radius: 5px;
        position: relative;
 border: 3.5px dashed blue;
        border-width: 5px;
        border-radius: 20px;
        box-shadow: 0px 0px 10px black;
        display: block;
}
nav .top {
        border-color: black;
        animation-name: flash_border;
        animation-duration: 10s;
        animation-timing-function: linear;
        animation-iteration-count: infinite;
        -webkit-animation-name: flash_border;
        -webkit-animation-duration: 1.4s;
        -webkit-animation-timing-function: linear;
        -webkit-animation-iteration-count: infinite;
        -moz-animation-name: flash_border;
        -moz-animation-duration: 2s;
        -moz-animation-timing-function: linear;
        -moz-animation-iteration-count: infinite;
    }
nav .links{
background-color: #128be8;
border-radius: 20px;
border: 2px solid #FE91B9;
box-shadow: inset 2px 3px 5px #FE91B9;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
font-style: italic;
}

nav .links li::after{
display: none;
}

main{ 
background-color: blue red;
border-radius: 20px;
border: 1px solid #FFC3D9;
box-shadow: inset 2px 3px 5px #FFC3D9;
margin: 1em 0;
padding: .5em;
opacity: .9;
}
.profile h1{
font-family: 'Kalam', cursive;
color: white;
text-shadow: 1px 1px 2px #AC3862;
font-size: 25px;
}
.online{
font-family: 'Kalam', cursive;
color: white;
font-size: 20px;
text-shadow: 1px 1px 2px #AC3862;
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;
}

/*if you dont like, You can delete this area or Replace the animation gif with your own desire gif*/
.profile .profile-info{
border-radius: 20px;
border: 2px solid #FFC3D9;
box-shadow: inset 2px 3px 5px #FFC3D9;
text-shadow: 1px 1px 2px #AC3862;
color: white;
background-image: url(https://img.randme.me/?t=1660928362036);
background-repeat: no-repeat;
background-size: cover;
}
/*End this area*/

.profile .general-about{
color: white;
font-style: italic;
text-shadow: 1px 1px 2px #AC3862;
}
.profile .blog-preview,
.profile .mood{
color: white;
font-style: italic;
}
.profile .profile-pic img{
border-radius: 60px;
box-shadow: 1px 1px 2px #AC3862;
filter: sepia(100%) hue-rotate(299deg);
opacity: .5;
}
.profile .contact .heading,
.profile .table-section .heading{
font-family: 'Kalam', cursive;
color: white;
background-color: #E76292;
border-radius: 20px 20px 0 0;
border: 2px solid #E76292;
box-shadow: inset 2px 3px 5px #FE91B9;
text-align: center;
padding: .5em;
font-size: 15px;
}
.profile .table-section,
.profile .contact,
.profile .url-info{
border-radius: 20px;
border: 2px solid #FFC3D9;
box-shadow: inset 2px 3px 5px #FFC3D9;
text-shadow: 1px 1px 2px #AC3862;
font-style: italic;
color: white;
}
table.details-table td {
background-color: transparent !important;
color: white !important;
font-style: italic !important;
}
.profile .blurbs .heading,
.profile .friends .heading{
color: white;
font-family: 'Kalam', cursive;
background-color: #E76292;
border-radius: 20px 20px 0 0;
border: 2px solid #E76292;
box-shadow: inset 2px 3px 5px #FE91B9;
text-align: center;
padding: .5em;
font-size: 15px;
}
.profile .blurbs,
.profile .friends{
border-radius: 20px;
border: 2px solid #FFC3D9;
box-shadow: inset 2px 3px 5px #FFC3D9;
text-shadow: 1px 1px 2px #AC3862;
font-style: italic;
color: white;
}
.profile .friends{
text-align: center;
}
.profile .friends-grid .person p{
color: white;
}
.profile .blurbs .section h4{
color: white;
padding: .5em;
}
.profile .comments-table{
background-color: #E76292;
border-radius: 20px;
border: 2px solid #FE91B9;
box-shadow: inset 2px 3px 5px #FE91B9;
font-style: italic;
color: white;
}
.profile .comments-table td{
background-color: transparent;
}
.profile .comments-table .comment-replies{
background-color: #E76292;
border-radius: 20px;
border: 2px solid #FE91B9;
box-shadow: inset 2px 3px 5px #FE91B9;
font-style: italic;
color: white;
}
.comments-table img,
.person img{
border-radius: 20px;
box-shadow: 1px 1px 2px #AC3862;
filter: sepia(100%) hue-rotate(299deg);
opacity: .5;
}

/*Replace the animation gif with your own desire gif*/
footer{
background: url(https://gif.tv/gifs/giftv-279-buildingsnow.gif)!important;
    background-position: center;
    border-radius: 8px;
    border: 2px solid green yellow;
box-shadow: inset 2px 3px 5px #FE91B9;
font-style: bold;
font-size: 14px;
color: black;
}
.count{
color: #E76292;
}
a{
color: #DAEDFF;
text-shadow: 1px 1px 2px #AC3862;
}
a:visited {
color: #DAEDFF;
text-shadow: 1px 1px 2px #AC3862;
}
a:hover {
color: white;
}
a:active {
color: #DAEDFF;
text-shadow: 1px 1px 2px #AC3862;
}
nav .links a:hover{
text-decoration: underline;
color: #DAEDFF;
}
.section h4 {color: var(--headers); !important;} /* aboutme & want2meet headings */
.blurbs .inner .section:nth-child(1) h4{display:none;} /* hides the about me title*/
.blurbs .heading{ font-size:0; }
.blurbs .heading:before{ content: "TEXT 0!!"; font-size:.8rem; font-weight:bold; color:black; }
.blurbs .inner .section:nth-child(2) h4{ font-size:0; }
.blurbs .inner .section:nth-child(2) h4:before{ display: none;} 
.friends .heading{ font-size:0; }
.friends .heading:before{ content: "TEXT 1"; font-size:.8rem; font-weight:bold; color:black; }
.friends#comments .heading{ font-size:0; }
.friends#comments .heading:before{ content: "TEXT 3"; font-size:.8rem; font-weight:bold; }
.profile .table-section .heading h4 { font-size:0; }
.profile .table-section .heading h4:before{ content: "TEXT 3 👇"; font-size:.8rem; font-weight:bold; } 
.contact .heading{ font-size:0; }
.contact .heading:before{ content: "TEXT 5 !"; font-size:.8rem; font-weight:bold; }

/* if dont like, You can delete this area or replace the contact icons with your desire icon, emoji, symbol*/
.contact .inner a img {
font-size: 0;
}
.contact .inner a img:before {
font-size: 1em;
display: block
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(1) a:before {
/* add to friends */
content: "🧕"
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {
/* add to favorite */
content: "🌟"
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {
/* send a message */
content: "🗬"
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {
/* foward to friend*/
content: "💫"
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {
/* instant message */
content: "🗫"
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {
/* block user */
content: "🔏"
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {
/* add 2 group  */
content: "💡 "
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
/* report */
content: "💨"
}
/*End contact icon*/
   
</style>
<h3>👉 About me:</h3>
type here about your selfe
<h3>👉 Who i`d like to meet:</h3>
thpe here who u would like to meet?

Copy and paste this code into the "About me" section of your Profile to use it.

Caution: This Layout was not inspected by SpaceHey — use it at your own risk.

Comments

Displaying 1 of 1 comments ( View all | Add Comment )

ஃ мɨκłớ Ѵ ஃ

1704493651

Thank you for this 💯

Report Comment