Gryffindor Layout with 4 slide show images (requested)

Tags: harry potter, katie, red, simple, animation

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:

click on the image for a larger preview

Code:

<!-- (c) Layout created by Katie (https://layouts.spacehey.com/layout?id=1819) -->

<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://i.pinimg.com/originals/e8/b5/84/e8b584ee4bab79d676f064428e10382d.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: #740001; 
 } 

  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://fsb.zobj.net/crop.php?r=Ugr1ye6Wrr2zZm_qXXLHWJvTuMrpWkLXhOTXKFv9mPN4m61qI94Yei_6vd1zfAT8HH5HfBvNMET-vjJ8GqPXpT4BW5SdJaI21XHd_tRtw1J2x4s_o5A89MrOK444OQMdy74zbOHug0PB2Y8Z);
		--image2: url(https://fsa.zobj.net/crop.php?r=Fw4487Cy48JAPr38KZZLTBXInrfNkDbERJaapkZByhZyLeeOYsJ10acBx_gWm9i52V1nGuYJi4Z6QYA1deyvFmGdI_VEvOZRKXtN3xrMy9sn37XPPYAPwMpgu0SYwNC2Y4W9_QkOUAz_Yo1j);
		--image3: url(https://cdn.statically.io/img/wallpaperplay.com/walls/full/5/1/4/176481.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.