Reputation Inspired Layout

Tags: reputation, taylor swift, music, simple, black, dark

Description:

Reputation by Taylor Swift vibes. i used this layout as a base so it isn't entirely mine >>> https://layouts.spacehey.com/layout?id=30686 <<<

Preview:

click on the image for a larger preview

Code:

<!-- (c) Layout created by Hayley 🦑🐇 (https://layouts.spacehey.com/layout?id=34706) -->


<!--BACKGROUND PATTERN-->
<style>
body {
background-color: #ffffff;
opacity: 1;
background-image: url(https://i.pinimg.com/736x/07/75/91/07759124fd9bef14bb789498c9d62c5e.jpg)
}
</style>

<!--PROFILE IMG SHADOW-->
<style>
    .general-about .profile-pic img{
       
        box-shadow: 0px 1px 10px #000000;
        margin-left: 20px;
    }
</style>

<!--FEEL FREE TO CHANGE THE LOGO, IMG SIZE IS (800 : 249)-->
<style>
  .logo {
  
  content:url("https://media.discordapp.net/attachments/1108976171938488320/1118353111636004884/clandestine.png?width=300&height=75")

}
    .profile .blurbs .section h4{
        	color: white;
	font-size: 20px;
	-webkit-text-stroke: 1px black;
    text-align: center;
}
</style>

<!--FONT-->
<style>
@import url('https://fonts.googleapis.com/css2?family=UnifrakturMaguntia&display=swap');
body{font-family: 'UnifrakturMaguntia', cursive;
font-size: 16px;
</style>


<!--BORDER AROUND SOME SECTIONS-->
<style>

   a:hover {
     color: black; 
   } 
   a{
     color: black; 
   }
    
    .profile h1{
        	color: Black;
	font-size: 30px;
	-webkit-text-stroke: 1px black;
	text-align: center;
    }

.details > * {
    margin-top: 15px;
}

.details-table {
    border-width:7px;
border-style:solid;
border-image: url("https://media.discordapp.net/attachments/826854899013648384/839700444375810078/tumblr_inline_o98n9dbCl61u2r0ws_540_1_2.png") 8 fill round; 

}


.details-table td:first-child {
    background: #fff;
    background-size: 4px 4px;
    width: 65px;
}
.details-table td:first-child p {
    -webkit-background-clip: text;
    color: white;
    font-size: 10px;
}


.details-table td {
   background: #fff;
}
nav  {
   background-color: #000;
 border-width:7px;
border-style:solid;
border-image: url("https://media.discordapp.net/attachments/826854899013648384/839700444375810078/tumblr_inline_o98n9dbCl61u2r0ws_540_1_2.png") 8 fill round;
   color: black;
}

.comments-table {
    background: #fffff80;
    height: 100px!important;
    border-width:7px;
border-style:solid;
border-image: url("https://media.discordapp.net/attachments/826854899013648384/839700444375810078/tumblr_inline_o98n9dbCl61u2r0ws_540_1_2.png") 8 fill round;
    margin-top: 10px;
}

.details p, .mood p, .mood a, .blurbs p, .table-section .inner p {
    font-size: 10px;
}
main{ 
background-color: white;
border-width:7px;
border-style:solid;
border-image: url("https://media.discordapp.net/attachments/826854899013648384/839700444375810078/tumblr_inline_o98n9dbCl61u2r0ws_540_1_2.png") 8 fill round;
margin: 1em 0;
}
</style>

<!--ONLINE IMG-->
<style>
.online{content:url("");
}
</style>

<!--COLOR OF THE HEADING OF BLURBS AND FRIENDS-->
<style>
    .profile .blurbs .heading,
    .profile .friends .heading {
        background-color:#000;
    }
</style>

<!--COLOR OF THE HEADING OFCONTACT AND INTERESTS-->
<style>
 .profile .contact .heading,
 .profile .table-section .heading {
     background-color:#212121;
 }
</style>

<!--BORDER IMAGE AROUND CONTACT INFO-->
<style>
 .profile .contact,
 .profile .table-section {
    border-width:7px;
border-style:solid;
border-image: url("https://media.discordapp.net/attachments/826854899013648384/839700444375810078/tumblr_inline_o98n9dbCl61u2r0ws_540_1_2.png") 8 fill round;
 }
</style>

<!--COLOR FOR THE LINK SECTION HEADER-->
<style>
    nav .links {
        background-color:#000;
    }
</style>

<!--COLOR OF THE TEXT IN THE HEADING OF BLURBS-->
<style>
    .profile .blurbs .heading h4 {
        color:#ffffff;
    }
</style>

<!--COLOR OF THE TEXT IN THE HEADING OF FRIENDS-->
<style>
    .profile .friends .heading h4 {
        color:#ffffff;
    }
</style>
<!--CHANGE TEXT IN THE HEADER OF BLURBS-->
<style>
  .blurbs .heading{ font-size:0; }
.blurbs .heading:before{ content: "About Me..."; font-size:.8rem; font-weight:bold; color:white; }
}
</style>

<!--CHANGE TITLE OF HEADERS IN ABOUT ME-->
<style>
.blurbs .inner .section:first-of-type h4{
	font-size:0;
}
.blurbs .inner .section:first-of-type h4:after{
	content:"favorite songs:";
font-size:1.3rem;
}
.blurbs .inner .section:last-of-type h4{
font-size:0;
}
.blurbs .inner .section:last-of-type h4:after{
content:"favorite albums";
font-size:1.38rem;
}
</style>


<!--CHANGES BASIC COLOR OF ALOT OF STUFF-->
<style>
/* CUSTOMIZE BASIC SETTINGS */
:root {
    --logo-blue: transparent; /* CHANGE COLOR OF SPACEHEY BAR AT TOP */
    --darker-blue: #000; /* CHANGE COLOR OF PROFILE LINKS */
    --lightest-purple: #000; /* CHANGE COLOR OF NAVIGATION BAR */
    --darkest-purple: #000;
    --darkest-purple: #000;
    --darkest-purple: #a37dba; /* blurb titles */
    --light-orange: #d1d1d1; /* CHANGE BACKGROUND OF COMMENT SECTION */
    --even-lighter-orange: #fff; /* CHANGE BACKGROUND OF COMMENT SECTION */
    --green: #38d;
}

/* CHANGE COLOR OF THE NUMBER OF FRIENDS/COMMENTS YOU HAVE */
.count {
    color: #383838;
}
/* HIDE PROFILE URL */
.profile .url-info {
    display: none;
}
</style>

<!--BORDER AROUND BLOG ENTRY PART-->
<style>
    div .blog-preview {
           height: 100px!important;
    border-width:7px;
border-style:solid;
border-image: url("https://media.discordapp.net/attachments/826854899013648384/839700444375810078/tumblr_inline_o98n9dbCl61u2r0ws_540_1_2.png") 8 fill round;
 }
    }
</style>



<!--CHANGE IMGS OF CONTACT SECTION-->
<style>
.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 Favorites */
	content: "✩"
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {
	/* Send Message */
	content: "✩"

}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {
	/* Forward 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 to Group */
	content: "✩"
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
	/* Report Profile */
	content: "✩" 
}

</style>


<!--CHANGE NAME OF INTEREST LABELS-->
<style>
:root {
    --topic1: "general";  /* EDIT INTEREST LABELS HERE */
    --topic2: "music";
    --topic3: "movies";
    --topic4: "tv shows";
    --topic5: "books";
    --topic6: "heroes";

 }

.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 2px black !important; /* CHANGE COLOR OF INTEREST LABELS HERE */
   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>

<!--BORDER COLOR OF COMMENTS-->
<style>
    .comments-table td {
        border-color: transparent;
    }
</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 12 of 12 comments ( View all | Add Comment )

liza	1734000506 using Report Comment
김산지	1719294530 thnx using!! Report Comment
mond	1716696279 using! ty <33 Report Comment
𖤐 𓈒࣪ ᭡ ˖ daydream	1715169025 using! thank u <3 Report Comment
Gisele	1707449705 Vou usar, incrível!🖤 Report Comment
Arlon	1703417326 Using!! Report Comment
Sydney	1701306811 Using! <3 Report Comment
miriam	1698936491 gonna use this <3 Report Comment
nori doorman	1696570871 using! Report Comment
𝕍𝕖𝕟𝕕𝕖𝕥𝕥𝕒	1691733761 using! ty! Report Comment
norah !!	1690790199 using <33 Report Comment
THE MIDNIGHT CARNIVAL	1689487440 using! Report Comment