Report Blog Entry
This is a copy of the code I used to make my SpaceHey page. Feel free to take this code and use it for your own page!
Warning, I havent changed any of the links to pictures and graphics that Ive used, so if some images dont suit your tastes or style then feel free to change them!
This is literally ALL the code used on my page. All the code can be edited and Ive tried to make it as easy to understand as possible without adding a comment on every line.
If you need assisstance in editing any of this code or you want more help with anything, please comment on this post or on my page, or even shoot me a message on Twitter!
Please, if you do make use of this code, add me as a friend or at least say thanks. Its not cool to take credit for other peoples work!
**************************************
Code that I put in "About Me"
***************************************
<style>
/*Intro GIF Animation (fade out)*/
body:before {
content: " ";
height: 100vh;
width: 100vw;
display: block;
position: fixed;
top: 0;
left: 0;
z-index: 100;
background-image: url('https://thumbs.gfycat.com/ClearcutInsistentCuckoo-size_restricted.gif'); /*gif link here*/
background-size: cover;
background-repeat: no-repeat;
animation: yourAnimation 4s ease 0s 1 normal forwards;
pointer-events: none;
}
@keyframes yourAnimation { 0.0%{ opacity: 1;} 75%{ opacity: 1; } 100%{ opacity: 0;} }
/*whole body changes*/
body {
background-image: url(https://cutewallpaper.org/21/emo-aesthetic-wallpapers/Emo-Aesthetic-Computer-Wallpapers-on-WallpaperDog.jpg);/*background for whole page*/
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
font-family: 'Courier New', monospace;
height: 100%;
color: #ffffff;
h1: #ffffff;
h2: #ffffff;
h3: #ffffff;
h4: #ffffff;
li: #ffffff;
}
/*top search bar customisation*/
.search-wrapper input[type=text] {
background-color: rgba(21, 23, 26, 0.65) !important;
border: 1px dotted var(--headers) !important;
color:var(--names) !important;
border-radius: 10px !important;
}
button{
border-radius: 10px !important;
border: 1px dotted var(--headers) !important;
font-family: var(--font-family) !important;
background-color:rgba(21, 23, 26, 0.65) !important;
color:var(--headers) !important;
}
/*top header customisation*/
nav{
background-color:var(--box_color_and_seethru); !important;
border-radius: 0px 0px var(--curve) var(--curve); !important;
}
nav ul{
background:none !important;
font-size: 10px;
}
nav ul a img, .mood a img{
display:none !important;
}
.top{
background-image:url("https://cdn.discordapp.com/attachments/753067128583618600/801960785927864360/ezgif.com-crop1.gif") !important;
background-position:center;
background-size: cover;
background-repeat: no-repeat;
background-color:rgba(0, 0, 0, 0.8); !important;
}
/*gets rid of URL info box*/
.url-info{
display:none !important;
}
/*changing color of links in mood box*/
.mood a{
color:#8d36ff;
}
/*gets rid of white background behind center of page*/
main{
background: rgba(0, 0, 0, 0) !important;
}
/*changing background of profile & changing general text to white*/
.profile {
background:rgba(21, 23, 26, 0.95);
color: #ffffff;
}
/*customising contact box*/
.profile .contact .heading{
background:#8d36ff;
text-align: center;
}
.profile .contact {
border-radius: 15px;
border:2px solid rgba(0, 0, 0, 0);
background-image: url(https://cdn.discordapp.com/attachments/753067128583618600/801271425494286356/unknown.png);
background-position: right top;
background-repeat: repeat;
background-attachment: scroll;
Height:180px;
color: white;
text-shadow: 1px 1px 2px black, 0 0 25px Blue, 0 0 3px Darkblue;
}
.contact a{
color: #ffffff;
}
.contact a:hover{
color: #b5b5b5;
}
/*customising interests box*/
.profile .table-section{
border:2px solid #8d36ff;
border-radius: 15px;
}
.profile .table-section .heading{
background:#8d36ff;
border: 1px solid #8d36ff;
border-radius: 15px 15px 0px 0px;
text-align: center;
}
.profile .table-section .heading h4{
color: #ffffff;
text-shadow: 1px 1px 2px black;
}
.profile .table-section .details-table td{
background: rgba(0, 0, 0, 0);
padding-right: 10%;
}
.profile .table-section .details-table td:first-child{
background: rgba(0, 0, 0, 0);
width: 10%; /*gets rid of interest category column*/
}
.profile .table-section .details-table td:first-child p{
color: rgba(0, 0, 0, 0);
font-size: 1px; /*gets rid of interest category text*/
}
/*customising header text for interest titles*/
.list-heading{
color:#8d36ff;;
font-family: 'Courier New', monospace;
font-size: 15px;
text-decoration: underline;
font-weight: bold;
text-align:center;
}
/*getting rid of the blurbs headings cause I dont like them*/
.profile .blurbs .heading{
background: rgba(0, 0, 0, 0);
color: rgba(0, 0, 0, 0);
text-size: 1px;
height: 2px;
}
.col.right .heading h4{
color: rgba(0, 0, 0, 0);
text-size: 1px;
}
.profile .blurbs .section h4 {
display: none;
}
/*changing font size and centering it for stuff on right side of page*/
.profile .blurbs .section p {
font-size: 15px;
text-align: center;
}
/*changing color of links on the right side of the page*/
.col.right a{
color: #8d36ff;
}
/*customising friend space heading*/
.profile .friends .heading{
background: #8d36ff;
color: #fff;
text-shadow: 1px 1px 2px black;
text-align: center;
}
.profile .friends .heading h4{
text-align: center;
color: #fff;
text-shadow: 1px 1px 2px black
}
/*making the comments section have a scroller*/
.comments-table{
display: block;
height: 380px;
overflow-y: scroll;
Border-radius: 15px;
background-color: rgba(21, 23, 26, 1);
}
/*customising comments section*/
.comments-table td:first-child{
background-color: rgba(21, 23, 26, 1);
}
.comments-table td:first-child a{
color: #8d36ff;
}
.comments-table td:first-child a:hover{
color: #ffffff;
}
.comments-table td{
background-color: rgba(21, 23, 26, 1);
}
.comments-table td a{
color: #8d36ff;
}
.comments-table td a:hover{
color: #ffffff;
}
/*creating 'top 8' section*/
.top-eight {
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(4, [col] auto ) ;
grid-template-rows: repeat(2, [row] auto );
background-color: transparent;
color: #444;
margin: 0px;
width: 100%;
}
.top-row{
grid-column: col 1 / span 4;
grid-row: row 2;
}
.bot-row{
grid-column: col / span 4;
grid-row: row 3;
}
/*customising header for top 8*/
.top-eight-header {
grid-column: col 1 / span 4;
grid-row: row 1;
background-image: url(https://dl.glitter-graphics.com/pub/135/135916dgtf468er4.gif);
height:100%;
background-color: rgb(249, 197, 108);
color: rgb(240, 84, 73);
font-weight: bold;
padding: 4px !important;
}
.top-eight-header h2 {
padding-bottom: 0px !important;
margin-botton: 0px;
font-family: 'Courier New', monospace;
color: #d6d6d6;
text-align: center;
text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}
/*customising peoples images for top 8*/
.profile .top-eight .person img {
border-radius: 50%;
width: 100px;
height: 100px;
}
/*creating a better layout for social links*/
.social-logos{
display: grid;
grid-gap: 15px;
grid-template-columns: repeat(4, [col] auto ) ;
grid-template-rows: repeat(1, [row] auto );
background-color: transparent;
color: #444;
margin-left: auto;
margin-right: auto;
justify-content: center;
align-items: center;
width: 100%;
grid-column: col 1 / span 4
grid-row: row 1;
position: relative;
}
/*customising images for social links*/
.social-logos img{
border-radius: 50%;
width: 50px;
height: 50px;
}
/*making social images get slightly bigger when you hover over them*/
img.logohover:hover,
img.logohover:focus{
width: 53px;
height: 53px;
position: abolute;
}
/*customising the footer of the page*/
footer{
background:rgba(21, 23, 26, 0.6);
a: #ffffff;
color: #ffffff;
}
</style>
<!--beginning of content for right hand side-->
<img src="https://cdn.discordapp.com/attachments/753067128583618600/801765356652986428/Skull_Divider_png.png" style="width:100%;"/>
<p> Well uh... hey there.</p>
<p> I'm Cammy. I'm 22 and from Scotland!</p>
<p> I'm training to be a pilot, but I also play guitar, a ton of video games, and fantasize about 2007. Every so often I upload videos to youtube (subtle plug) and I occasionally attempt to write songs about sad boi things.</p>
<p> Follow my socials, add me on discord, subscribe on youtube etc.etc.</p>
<p>Be my fren? I need more people to play games with</p>
<br/> <!--line break for space-->
<!-- social links code -->
<div class="social-logos">
<!--link 1-->
<a href="https://www.youtube.com/channel/UCIkBaTC2IR0BRzKTfDb0Zkg" target="_blank">
<img class="logohover" src="https://cdn.discordapp.com/attachments/753067128583618600/802111395780231188/index.png" alt="Youtube logo"/>
</a>
<!--link 2-->
<a href="https://twitter.com/ZeusSCO" target="_blank">
<img class="logohover" src="https://logodownload.org/wp-content/uploads/2014/09/twitter-logo-3.png" alt="Twitter logo"/>
</a>
<!--link 3-->
<a href="https://www.instagram.com/theonemcruvie" target="_blank">
<img class="logohover" src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e7/Instagram_logo_2016.svg/240px-Instagram_logo_2016.svg.png" alt="Instagram logo"/>
</a>
<!--link 4-->
<a href="https://www.discord.gg/CUbY4UFrwZ" target="_blank">
<img class="logohover" src="https://cdn3.iconfinder.com/data/icons/popular-services-brands-vol-2/512/discord-512.png" alt="Discord logo"/>
</a>
</div>
<br/><!--line break for space-->
<br/><!--line break for space-->
<!--youtube video with dividers above and below-->
<img src="https://www.pinclipart.com/picdir/big/41-411360_divider-clipart-chapter-divider-black-and-white-png.png" width="100%"/>
<iframe width="100%" height="250" src="https://www.youtube.com/embed/9QraqUZib7Y" frameborder="0" allowfullscreen=""></iframe>
<img src="https://www.pinclipart.com/picdir/big/41-411360_divider-clipart-chapter-divider-black-and-white-png.png" width="100%"/>
<br/><!--line break for space-->
<br/><!--line break for space-->
<!--top 8 code-->
<!--top 8 header-->
<div class="top-eight">
<div class="top-eight-header">
<h2>My Death Note</h2>
</div>
<!--person 1-->
<div class="person">
<a href="https://spacehey.com/profile?id=49660"><!--profile link-->
<p class="top-row">Trash</p></a><!--name-->
<a href="https://spacehey.com/profile?id=49660"><!--profile link-->
<img src="https://instagram.fman1-2.fna.fbcdn.net/v/t51.2885-15/e35/133972592_312575760069924_2129933639751164325_n.jpg?_nc_ht=instagram.fman1-2.fna.fbcdn.net&_nc_cat=100&_nc_ohc=vN0XevJxifUAX_7ajqU&tp=1&oh=7b856b63149f98542888733912df3113&oe=60316593" alt="profile picture"/><!--profile picture-->
</a>
</div>
<!--person 2-->
<div class="person">
<a href="https://spacehey.com/itsmattyo_"><!--profile link-->
<p class="top-row">ItsMattYo</p></a><!--name-->
<a href="https://spacehey.com/itsmattyo_"><!--profile link-->
<img src="https://pbs.twimg.com/media/Eqwhs2rXAAMq-aE?format=jpg&name=medium" alt="profile picture"/><!--profile picture-->
</a>
</div>
<!--person 3-->
<div class="person">
<a href="#"><!--profile link-->
<p class="top-row"> </p></a><!--name-->
<a href="#"><!--profile link-->
<img src="https://www.pikpng.com/pngl/m/147-1474340_heart-creepy-sad-scribble-brokenheart-emo-aesthetic-aesthetic.png" alt="profile picture"/><!--profile picture-->
</a>
</div>
<!--person 4-->
<div class="person">
<a href="#"><!--profile link-->
<p class="top-row"> </p></a><!--name-->
<a href="#"><!--profile link-->
<img src="https://www.pikpng.com/pngl/m/147-1474340_heart-creepy-sad-scribble-brokenheart-emo-aesthetic-aesthetic.png" alt="profile picture"/><!--profile picture-->
</a>
</div>
<!--person 5-->
<div class="person">
<a href="#"><!--profile link-->
<p class="bot-row"> </p></a><!--name-->
<a href="#"><!--profile link-->
<img src="https://www.pikpng.com/pngl/m/147-1474340_heart-creepy-sad-scribble-brokenheart-emo-aesthetic-aesthetic.png" alt="profile picture"/><!--profile picture-->
</a>
</div>
<!--person 6-->
<div class="person">
<a href="#"><!--profile link-->
<p class="bot-row"> </p></a><!--name-->
<a href="#"><!--profile link-->
<img src="https://www.pikpng.com/pngl/m/147-1474340_heart-creepy-sad-scribble-brokenheart-emo-aesthetic-aesthetic.png" alt="profile picture"/><!--profile picture-->
</a>
</div>
<!--person 7-->
<div class="person">
<a href="#"><!--profile link-->
<p class="bot-row"> </p></a><!--name-->
<a href="#"><!--profile link-->
<img src="https://www.pikpng.com/pngl/m/147-1474340_heart-creepy-sad-scribble-brokenheart-emo-aesthetic-aesthetic.png" alt="profile picture"/><!--profile picture-->
</a>
</div>
<!--person 8-->
<div class="person">
<a href="#"><!--profile link-->
<p class="bot-row"> </p></a><!--name-->
<a href="#"><!--profile link-->
<img src="https://www.pikpng.com/pngl/m/147-1474340_heart-creepy-sad-scribble-brokenheart-emo-aesthetic-aesthetic.png" alt="profile picture"/><!--profile picture-->
</a>
</div>
</div>
<!-- custom cursor code -->
<style>* {cursor: url(https://ani.cursors-4u.net/symbols/sym-8/sym734.cur), auto !important;}</style><a href="https://www.cursors-4u.com/cursor/2013/02/12/upside-down-cross-orange.html" target="_blank" title="Upside Down Cross - Orange"><img src="https://cur.cursors-4u.net/cursor.png" alt="Upside Down Cross - Orange" style="position:absolute; top: 0px; right: 0px;"/></a>
***************************************
Code that I put in "Music"
***************************************
<!--heading for music section with an image in the background-->
<div class="interest-heading" style="width:100%; height:60px; background-image: url(https://external-media.spacehey.net/media/sK3ldz0tmYiRlEXU_OZ-h1CsC5beGpxQ4HB_PRP7ewh0=/https://cdn.discordapp.com/attachments/753067128583618600/802246948979081226/ezgif.com-crop3.gif); vertical-align: middle; text-align: center; position: relative;">
<h1 style="color:#fff; font-family: 'Courier New', monospace; top: 50%; left: 50%; position:absolute; transform: translate(-50%, -50%); text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;">MUSIC</h1>
</div>
<img src="https://cdn.discordapp.com/attachments/753067128583618600/801266370188017664/unknown.png" style="width:100%; border-radius: 15px, 15px, 0px, 0px;"/> <!--custom image for playlist 1-->
<iframe src="https://open.spotify.com/embed/playlist/7M1naXEXSel6dRnLJ8hxdk" width="300" height="200" frameborder="0"></iframe> <!--playlist 1 embed-->
<img src="https://cdn.discordapp.com/attachments/753067128583618600/801267699862208532/unknown.png" style="width:100%; border-radius: 15px, 15px, 0px, 0px;"/> <!--custom image for playlist 2-->
<iframe src="https://open.spotify.com/embed/playlist/4jl7EiHxJeIKjBzsPVicK8" width="300" height="200" frameborder="0"></iframe> <!--playlist 2 embed-->
<!--heading for concerts section with an image background-->
<div class="interest-heading" style="width:100%; height:60px; background-image: url(https://external-media.spacehey.net/media/szdbOYzWhRP48RsQj0hxoZzP9rt4JD6xeXAlcpCmJ21w=/https://cdn.discordapp.com/attachments/753067128583618600/802379263848349726/ezgif.com-crop6.gif); vertical-align: middle; text-align: center; position: relative;">
<h1 style="color:#fff; font-family: 'Courier New', monospace; top: 50%; left: 50%; position:absolute; transform: translate(-50%, -50%); text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;">CONCERTS</h1>
</div>
<div class="scroll-box" style="height:200px;border:1px;overflow:auto;"> <!--setting up scroll box with a list inside it-->
<h1 class="list-heading">Been To</h1> <!--list title-->
<ul>
<li>The Script</li>
<li>Fall Out Boy</li>
<li>Coldplay</li>
<li>The XX</li>
<li>The XX (again)</li>
<li>All Time Low</li>
<li>Russ</li>
<li>Hollywood Undead</li>
<li>The Killers</li>
<li>Eminem</li>
<li>Enter Shikari</li>
<li>Hella Mega Tour (soon)</li>
<li>Humanities Last Breath (soon)</li>
<li>Bring Me The Horizon (soon)</li>
</ul>
<h1 class="list-heading">Want To Go To</h1> <!--list title-->
<ul>
<li>Slipknot</li>
<li>Cradle Of Filth</li>
<li>Pierce The Veil</li>
<li>Sleeping With Sirens</li>
<li>My Chemical Romance</li>
<li>Trivium</li>
<li>Nickleback</li>
<li>A Day To Remember</li>
<li>Blackbear</li>
<li>Many, many more</li>
</ul>
</div>
***************************************
Code that I put in "Movies"
***************************************
<!--heading for games section with an image in the background-->
<div class="interest-heading" style="width:100%; height:60px; background-image: url(https://external-media.spacehey.net/media/s254lJ_Ta4EVS9GV3AVTEWlFuNheS4Tf-vKdoAdVqNfU=/https://cdn.discordapp.com/attachments/753067128583618600/802246269924933632/ezgif.com-crop2.gif); vertical-align: middle; text-align: center; position: relative;">
<h1 style="color:#fff; font-family: 'Courier New', monospace; top: 50%; left: 50%; position:absolute; transform: translate(-50%, -50%); text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;">GAMES</h1>
</div>
<div class="scroll-box" style="height:200px;border:1px;overflow:auto;"> <!--setting up scroll box with a list inside it-->
<h1 class="list-heading">PC</h1> <!--list title-->
<ul>
<li>Rainbow Six Siege</li>
<li>Raft</li>
<li>Minecraft</li>
<li>Phasmaphobia</li>
<li>Space Engineers</li>
<li>Portal Series</li>
<li>Outlast</li>
<li>Tons more but these are my favourites</li>
</ul>
<h1 class="list-heading">Nintendo Switch</h1> <!--list title-->
<ul>
<li>Animal Crossing</li>
<li>Into The Breach</li>
<li>Mario Kart</li>
<li>Pokemon (all of them)</li>
</ul>
<h1 class="list-heading">Xbox</h1> <!--list title-->
<ul>
<li>Forza Games</li>
<li>Call of Duty</li>
<li>Titanfall</li>
<li>GTA V</li>
</ul>
<h1 class="list-heading">Other</h1> <!--list title-->
<ul>
<li>DnD</li>
<li>Warhammer 40k</li>
</ul>
</div>
***************************************
Code that I put in "Television"
***************************************
<!--heading for tv & movies section with an image in the background-->
<div class="interest-heading" style="width:100%; height:60px; background-image: url(https://external-media.spacehey.net/media/sPZ8meZRxj7vjm9zcGOl32GBDE5cR0FwxqbR3atXHK3I=/https://cdn.discordapp.com/attachments/753067128583618600/801967693834092594/ezgif.com-resize.gif); vertical-align: middle; text-align: center; position: relative;">
<h1 style="color:#fff; font-family: 'Courier New', monospace; top: 50%; left: 50%; position:absolute; transform: translate(-50%, -50%); text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;">TV & MOVIES</h1>
</div>
<div class="scroll-box" style="height:200px;border:1px;overflow:auto;"> <!--setting up scroll box with a list inside it-->
<h1 class="list-heading">TV</h1> <!--list title-->
<ul>
<li>Money Heist</li>
<li>Tokyo Ghoul</li>
<li>Death Note</li>
<li>Seven Deadly Sins</li>
<li>Skins</li>
<li>The Boys</li>
<li>Lost In Space</li>
<li>Misfits</li>
<li>Futurama</li>
<li>That 70's Show</li>
<li>Friends</li>
<li>Breaking Bad</li>
</ul>
<h1 class="list-heading">Movies</h1> <!--list title-->
<ul>
<li>Extraction</li>
<li>Resident Evil</li>
<li>Silent Hill</li>
<li>Phonebooth</li>
<li>IT</li>
<li>Elf</li>
<li>The Hurt Locker</li>
<li>Zombieland</li>
<li>LotR Series</li>
<li>The Hobbit Series</li>
<li>Original 6 Star Wars</li>
<li>The Marvel Universe</li>
</ul>
</div>
***************************************
Code that I put in "Books"
***************************************
<!--heading for books section with an image in the background-->
<div class="interest-heading" style="width:100%; height:60px; background-image: url(https://external-media.spacehey.net/media/sGTOH7Q0JNSWBG4ALHQBZEf-yDAvyw2a62dxCzdNZ0H4=/https://cdn.discordapp.com/attachments/753067128583618600/802377431600201728/ezgif.com-crop4.gif); vertical-align: middle; text-align: center; position: relative;">
<h1 style="color:#fff; font-family: 'Courier New', monospace; top: 50%; left: 50%; position:absolute; transform: translate(-50%, -50%); text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;">BOOKS</h1>
</div>
<div class="scroll-box" style="height:200px;border:1px;overflow:auto;"> <!--setting up scroll box with a list inside it-->
<ul>
<li>The President Is Missing</li>
<li>The Shining</li>
<li>The Hobbit</li>
<li>Zom-B Series</li>
<li>Texas Outlaw</li>
<li>Agent Running In The Field</li>
<li>The Outsider</li>
<li>Hacker, Hoaxer, Whistleblower, Spy</li>
<li>American Gods</li>
</ul>
</div>
***************************************
Code that I put in "Heroes"
***************************************
<!--heading for other interests section with an image in the background-->
<div class="interest-heading" style="width:100%; height:60px; background-image: url(https://external-media.spacehey.net/media/sWC1yrclAQzF0KrXFy3IRzsvQkI9ESZHaWHRpK435Mr4=/https://cdn.discordapp.com/attachments/753067128583618600/802378570080976936/ezgif.com-crop5.gif); vertical-align: middle; text-align: center; position: relative;">
<h1 style="color:#fff; font-family: 'Courier New', monospace; top: 50%; left: 50%; position:absolute; transform: translate(-50%, -50%); text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;">OTHER INTERESTS</h1>
</div>
<div class="scroll-box" style="height:200px;border:1px;overflow:auto;"> <!--setting up scroll box with a list inside it-->
<ul>
<li>Skateboarding</li>
<li>Guitar</li>
<li>Aeroplanes/Flying</li>
<li>Skiing</li>
<li>Video Editing</li>
<li>Digital Art (Im crap)</li>
<li>Marvel</li>
</ul>
</div>
Code From My Page
17 Kudos
Comments
Displaying 2 of 2 comments ( View all | Add Comment )
‧͙⁺˚*･༓☾ɯᴉsɯɐʇɔɥǝpɯǝƃ☽༓･*˚⁺‧͙
I know this is an old post but for the life of me I cant get this to work. whenever I try to put my own gif in it just doesn't show up. I'm pretty new and I'm sorry if it's really obvious. Perhaps it's the size of the gif, I keep trying multiple times
body:before {
content: " ";
height: 100vh;
width: 100vw;
display: block;
position: fixed;
top: 0;
left: 0;
z-index: 100;
background-image: url('https://gfycat.com/compassionaterighticefish-size_restricted.gif'); /*gif link here*/
background-size: cover;
background-repeat: no-repeat;
animation: yourAnimation 4s ease 0s 1 normal forwards;
pointer-events: none;
}
@keyframes yourAnimation { 0.0%{ opacity: 1;} 75%{ opacity: 1; } 100%{ opacity: 0;} }
have you added opening and closing , that might help
by slippy; ; Report
Draca
This is so underrated?? This is so helpful, thankyou!