Taylor Swift Folklore Layout! (Includes Notes!)

Tags: taylorswift, folklore, layout, blackandwhite, cottagecore
Description:

Decorated based off Taylor Swift's 8th Album Folklore!! :> Includes notes to guide u if u want 2 make any edits!! C: I learned a lot of new things to add to this layout so I hope it's good. P.S. sorry if my code is messy lolol
Preview:

click on the image for a larger preview
Code:

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

<style>

/* the large header at the top of the page */ 
nav .top {
	background-image: url(https://studentpress.ro/wp-content/uploads/2021/06/ElWHAN9W0AAmXdt-1.jpg);
	height: 410px;
	background-size: 796px;
	background-position: 0px -10px;
	border-radius: 5px;
	position: relative;
	border: 2px solid white;
	border-width: 5px;
	border-radius: 20px;
	box-shadow: 0px 0px 10px black;
	display: block;
	   }

/* changes the position of the header on mobile */
@media screen and (max-width: 480px) {
	nav .top {
		background-position: center;
		 }
				     }
</style>

<style>
/* changes the background in the main area of your profile */
/* also sizes to fit + adds border */
.profile {
	background: url('https://i.pinimg.com/564x/37/b0/04/37b004e6ee330364a8cc001cff7fd18c.jpg');
	background-size: 1200px;
	background-position: center;
	background-attachment: fixed;
	border: 2px solid white;
	border-radius: 2px;
	 }

/* changes the background of the box at the end of the profile */
footer {
	background: url('https://i.pinimg.com/564x/37/b0/04/37b004e6ee330364a8cc001cff7fd18c.jpg');
	background-size: 1200px;
	background-position: 0px 0px;
	background-attachment: fixed;
	background-position: center;
	border-radius: 5px;
	border: 5px solid white;
	}

/* changes the backdrop of the entire site */
/* also sizes to fit */
body {
	background-image: url('https://simonteen.b-cdn.net/app/uploads/2020/08/BW-1024x683.png');
	background-size: 1550px;
	background-position: center;
	background-attachment: fixed;
     } 
</style>

<style>

/* imports fonts into the code */
@import url('https://fonts.cdnfonts.com/css/im-fell-dw-pica?styles=20312');
@import url('https://fonts.cdnfonts.com/css/diphylleia');

/* edits the big text */
h2,h3,h4,h5 {
	font-family: 'IM FELL DW Pica', sans-serif;
	font-style: italic;
	font-size: 175%;
	color: #636362;
	        }

/* changes the color of your username */
h1 {
	font-family: 'IM FELL DW Pica', sans-serif;
	font-style: italic;
	font-size: 175%;
	color: white;
     }

/* edits the main text */
p {
	font-family:'Diphylleia', sans-serif;
	font-size: 125%;
	color: #636362;
   }

/* changes the color when you hover over links */
a:hover {
	color: #2b2b29;
	}
</style>

<style>
/* changes the profile picture that displays on profile */
.profile-pic > img { display:none; }
.profile-pic:after { background-image: url("https://cdn.awsli.com.br/600x450/769/769081/produto/103369501/fa0eef215c.jpg"); display: inline-block; content:"" }
.general-about .profile-pic:after { background-size: cover; width: 160px; height: 150px; } 
 }   
</style>

<style>
*/ colors different sections of the profile */
.blurbs {
	border: 2px solid #1f1e1e;
	background: white; 
	}

.friends {
	border: 2px solid #1f1e1e;
	background: white;
	}

.contact {
	border: 2px solid #1f1e1e;
	background: white;
	  }

.url-info {
	border: 2px solid #1f1e1e;
	background: white;
	   }

.table-section {
	border: 2px solid #1f1e1e; 
	background: white;
	        }

.profile-info {
	border: 2px solid #1f1e1e;
	background: url('https://i.pinimg.com/564x/69/4c/fb/694cfbde40c40e778313bfa3db0670a8.jpg');
	background-position: center;
	       }
</style>

<style>
/* colors the contact section of profile */
main {
	background: white;
	color: #1f1e1e;
	padding: 6px 0px;
	font-size: 80%;
	border: 5px solid white;
	border-radius: 5px;
	position: relative;
     }
</style>

<style>

/* colors headers in profile */
:root {
	--logo blue: ;
	--darker-blue: #757471;
	--lighter-blue: ;
	--even-lighter-blue: ;
	--lightest-blue: ;
	--dark-orange: #636362;
	--light-orange: ;
	--even-lighter-orange: #9c9b9a;
}

</style>

<style>

/* Changes the Size/Font/Color for Online Text */
.online {
	color: white;
	font-family: 'IM FELL DW Pica', sans-serif;
	font-size: 98%;
	}

/* Changes image blinking when online */
    .online img {
        content: url('https://static.stereogum.com/uploads/2020/07/folklore-cardigan-1596202457.png');
        height: 2.9em;
        margin-right: 5px;
        animation-name: blink;
        animation-iteration-count: infinite;
        animation-duration: 1s;
    }
</style>

<style>

/* turns comment section into a scrollbox */
table.comments-table {
	display: block;
	height: 250px!important;
	overflow-x: hidden;
	overflow-y: scroll;
		     }

</style>

<style>
/* changes the spacehey logo */
	.logo {
	content:url("https://images.squarespace-cdn.com/content/v1/5d0dc22f70b70c00015d510a/1607702929578-YBMX18EN09ZXPM8JC7U4/1246px-TS_folklore_Wordmark.svg.png");
	      }

/* makes it so the logo enlarges in size when hovered over */
.logo:hover {
	transform: scale(1.2);
	transition: transform .2s;
	    }
</style>

<style>

/* loading screen right when you access the page */
body:before {
	content: " ";
	height: 100vh;
	width: 100vw;
	display: block;
	position: fixed; 
	top: 0; 
	left: 0; 
	z-index: 100;
	background-image: url('https://www.usmagazine.com/wp-content/uploads/2020/07/Taylor-Swift-Cardigan.gif?quality=86&strip=all');
	background-size: cover;
	background-repeat: no-repeat;
	background-position:center;
	animation: yourAnimation 1s ease 0s 1 normal forwards;
	pointer-events: none;}
	@keyframes yourAnimation { 0.0%{ opacity: 1;} 75%{ opacity: 1; } 100%{ opacity: 0;} } 
	     }
</style>


<style>

/* will make images larger when hovering over them */
.div-img{
    justify-content: center;
    align-items: center;
    display:flex;
    padding-top:20%;
}

/* v For embed images add this code for the same effect! v */
img{
    transition: transform .2s;
}
img:hover{
    transform:scale(1.2);
}
/* ^ For embed images add this code for the same effect! ^ */

</style>

<style>

/* changes the contact icons */

	/* contact icons */
	.contact .inner a img {
	font-size: 0;
			      }
	.contact .inner a img:before {
	font-size: 1em;
	display: block
				      }

/* here is where I insert img urls to change contact icons */
.contact .inner .f-row:nth-child(1) .f-col:nth-child(1) a:before {
/* add to friends */
content: url(https://media.discordapp.net/attachments/903364339464044575/1088805781077512342/13D43E01-F658-4F31-BBC7-7A14A95E3AEF.gif)
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {
/* add to favorite */
content: url("https://media.discordapp.net/attachments/903364339464044575/1089601727256334396/45FC988A-72B5-43FE-BBF4-95305EB3B853.gif")
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {
/* send a message */
content: url("https://media.discordapp.net/attachments/903364339464044575/1089601800727957564/78496E3B-E536-4294-840E-86027218E1FE.gif")
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {
/* foward to friend*/
content: url(https://media.discordapp.net/attachments/903364339464044575/1089601728845987981/9FB21F87-F14E-4B87-89FB-8484EAC75ABF.gif)
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {
/* instant message */
content: url(https://media.discordapp.net/attachments/903364339464044575/1088825284561743882/58277670-F01D-49C0-A25E-DAD4CE145546.gif)
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {
/* block user */
content: url(https://media.discordapp.net/attachments/903364339464044575/1088986375010910289/51E6CF90-CC7D-4BEA-B46F-ACC56411918C.gif)
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {
/* add to group  */
content: url("https://media.discordapp.net/attachments/903364339464044575/1088802410480271380/ECB303A9-F4D1-4C4E-8272-AC6BE03C5854.gif")
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
/* report */
content: url(https://media.discordapp.net/attachments/903364339464044575/1088801829581758474/215BCEDC-FEAF-43A3-AB07-570756B18781.gif)
}   

</style>

<style>


/* changes your interests section to custom headers */
:root {
    --topic1: "General"; 
    --topic2: "Music";
    --topic3: "Movies";
    --topic4: "Games";
    --topic5: "Animals";
    --topic6: "Heroes";

 }

/* this part is necessary to change them!! */
.table-section:not(:last-child) .details-table tr td:first-child p{color:transparent !important;text-shadow: none !important;letter-spacing: -100px;}

.details-table tr td:first-child p::after{
   color:var(--links) !important;
   letter-spacing:normal !important;
   text-shadow: 2px 1px #636362 !important;
   filter: brightness(95%) !important;
					  }

.table-section:not(:last-child) .details-table tr:nth-child(1) td:first-child p::after{
    content: var(--topic1);
										      }
.table-section:not(:last-child) .details-table tr:nth-child(2) td:first-child p::after{
    content: var(--topic2);
										      }
.table-section:not(:last-child) .details-table tr:nth-child(3) td:first-child p::after{
    content: var(--topic3);
										      }
.table-section:not(:last-child) .details-table tr:nth-child(4) td:first-child p::after{
    content: var(--topic4);
										      }
.table-section:not(:last-child) .details-table tr:nth-child(5) td:first-child p::after{
    content: var(--topic5);
										      }
.table-section:not(:last-child) .details-table tr:nth-child(6) td:first-child p::after{
    content: var(--topic6);
										      }

</style>

<style>
/* changes the color of the highlighter */
::-moz-selection { 
  color: red;
  background: yellow;
		  }

::selection {
  color: white;
  background: #4d4c4a;
	    }

</style>
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 )
Kate	1721525482 using!! its so pretty i love it Report Comment