Slytherin with 4 images slide show

Tags: black, green, harry potter, slytherin, katie

Description:

If  you like this style, you can use it in your profile, BUT at least, ADD ME or COMMENT BELOW and give me some kudos! I spent time for making this layout!!! Credits are appreciated (a post, a bulletin or something else that can support me) You have permission to use this for your Layout only, you don't have permission to post elsewhere without giving a link to the original crediting me

Preview:

Code:

<!-- (c) Layout created by Katie (https://layouts.spacehey.com/layout?id=1821) --> <style> table, tr, td { background-color:transparent; } table, tr, td { background-color:transparent; border:none; border-width:0px; } body { background-color:#000000; background-image:url(https://cdn.wallpapersafari.com/47/27/Jmzsiw.jpg); background-position:Center Center; background-attachment:fixed; background-repeat:repeat;} Main, footer { Background-color:#66666655;} } table table { border:0px; } table table table table { border:0px; background-image:none; background-color:transparent; } table, .contact, .blurbs, .mood, .details, .blog-preview{ border-style:Inset; border-width:8px; border-color: #1a472a; } table, .contact, .blurbs, .mood, .details, .blog-preview { background-color:#00000055; } :root { --logo-blue: #0000; --darker-blue: ; --lighter-blue: #; --even-lighter-blue: #; --lightest-blue: #; --dark-orange: #; --light-orange: #FFA50000; --even-lighter-orange: #; --green: #38d;} A, B, P, main, body, h4, H1 { color: white; font-size: 14px;} .comment-replies { border: 0px solid white;} </style> <style> :root{ /* here's where you put your image URLs and how long you want the entire slideshow to be (make sure you add the s for seconds!) */ --image1: url(https://fsa.zobj.net/crop.php?r=aqd5W8CFgZkZCbdkeuisatoVHKZj6mbCO1Ajdt95Aoi5yQPfj_6R6XcA7RFxSpCVSlmfbJZCarnoEamgCf_uR2hLiejY3vr9ogPgKCbKAE9G_Gt1hp0J2Ft911ef6EeDLthKwIWWtnZAi6Gc); --image2: url(https://i1.wp.com/kolpaper.com/wp-content/uploads/2020/09/Slytherin-Iphone-Wallpaper.jpg); --image3: url(https://wallpapercave.com/wp/wp2858746.jpg); --image4: url(https://i.pinimg.com/originals/58/4c/19/584c19801a64c5f5f198b6c441d0cf7e.jpg); --time: 10s; } .pdg_slideshow{ width:100%; height:500px; position:relative; } @media only screen and (max-width: 768px) { .pdg_slideshow{ height:300px; } } .pdg_slideshow_image { background-size:contain;background-repeat:no-repeat;background-position:center; width:100%; height:100%; position:absolute;} .pdg_slideshow_image#image1 {background-image:var(--image1); animation: slide1 var(--time) ease 0s infinite normal none; } .pdg_slideshow_image#image2 {background-image:var(--image2); animation: slide2 var(--time) ease 0s infinite normal none; } .pdg_slideshow_image#image3 {background-image:var(--image3); animation: slide3 var(--time) ease 0s infinite normal none; } .pdg_slideshow_image#image4 {background-image:var(--image4); animation: slide4 var(--time) ease 0s infinite normal none; } @keyframes slide1 { 0%, 25%, 100% { opacity: 0; } 1%, 24% { opacity: 1; } } @keyframes slide2 { 0%, 25%, 50%, 100% { opacity: 0; } 26%, 49% { opacity: 1; } } @keyframes slide3 { 0%, 50%, 75%, 100% { opacity: 0; } 51%, 74% { opacity: 1; } } @keyframes slide4 { 0%, 75%, 100% { opacity: 0; } 76%, 99% { opacity: 1; } } </style> <div class="pdg_slideshow"> <div class="pdg_slideshow_image" id="image1"></div> <div class="pdg_slideshow_image" id="image2"></div> <div class="pdg_slideshow_image" id="image3"></div> <div class="pdg_slideshow_image" id="image4"></div> </div>

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.