Personal layout n.1 - furina themed

Tags: personal layout, furina, simple, genshin impact, blue, white

Description:

You maybe can use it aaha :3 (you can)

Preview:

click on the image for a larger preview

Code:

<!-- (c) Layout created by 𐔌   .  ⋮ 𝘙𝘢𝘪𝘯𝘺  .ᐟ  ֹ   ₊ ꒱ (https://layouts.spacehey.com/layout?id=87767) -->

<style>
/*Main Body (Background Color/Background Image)*/
    body{
    background-color: transparent !important;
    background-image: url('https://media.discordapp.net/attachments/1092124888585736366/1177350144539238490/89476b8721376922cac33b78e4884ddc.jpg?ex=65722fc4&is=655fbac4&hm=b8c8253cdeea0902ff819007a9b66cf230d24c9ba8a0fefd7d33b4a3161ef525&') !important;
    background-attachment: FIXED !important;
    background-repeat: NO-REPEAT !important;
    background-position: CENTER !important;
    background-size: COVER;}
</style>
    
<style>
/*Profile (Background Color/Background Image)*/
    main{
    background-color: #f8f9fe !important;
    background-image: url('URL') !important;
    background-attachment: FIXED OR SCROLL !important;
    background-repeat: REPEAT OR NO-REPEAT !important;
    background-position: CENTER / LEFT / RIGHT / TOP / BOTTOM !important;}
</style>
    
<style>
/*Adding rounded corners to profile*/
   .top{
        border-radius: 25px 25px 25px 25px !important;}
        
    main{
        border-radius: 25px 25px 25px 25px !important;}
</style>
        
<style>
/*Top (Background Color/Background Image)*/
   .top{
    background-color: #353ba7 !important;
    background-image: url('URL') !important;
    background-attachment: FIXED OR SCROLL !important;
    background-repeat: REPEAT OR NO-REPEAT !important;
    background-position: CENTER / LEFT / RIGHT / TOP / BOTTOM !important;
    background-size: COVER;}
</style>
    
<style>
/*Top Links (Background Color/Background Image)*/
 .links{
     text-align:center;
    background-color: transparent !important;
    background-image: url('URL') !important;
    background-attachment: FIXED OR SCROLL !important;
    background-repeat: REPEAT OR NO-REPEAT !important;
    background-position: CENTER / LEFT / RIGHT / TOP / BOTTOM !important;}
</style>

<style>
/*Search Users Box (Background Color/Background Image)*/
    .top input{
    background-color: #f8f9fe !important;
    background-image: url('URL') !important;
    background-attachment: FIXED OR SCROLL !important;
    background-repeat: REPEAT OR NO-REPEAT !important;
    background-position: CENTER / LEFT / RIGHT / TOP / BOTTOM !important;}
</style>

<style>
/*Buttons (Background Color/Background Image)*/
    button{
    border-radius: 25px 25px 25px 25px !important;
    background-color: #698ae8 !important;
    background-image: url('URL') !important;
    background-attachment: FIXED OR SCROLL !important;
    background-repeat: REPEAT OR NO-REPEAT !important;
    background-position: CENTER / LEFT / RIGHT / TOP / BOTTOM !important;}
</style>

<style>
/*Profile Name (Background Color/Backround Image)*/
    h1{
    text-align:center;
    background-color: transparent !important;
    background-image: url('URL') !important;
    background-attachment: FIXED OR SCROLL !important;
    background-repeat: REPEAT OR NO-REPEAT !important;
    background-position: CENTER / LEFT / RIGHT / TOP / BOTTOM !important;}
</style>


<style>
/*General About (Background Color/Background Image)*/
    .general-about{
    background-color: transparent !important;
    background-image: url('URL') !important;
    background-attachment: FIXED OR SCROLL !important;
    background-repeat: REPEAT OR NO-REPEAT !important;
    background-position: CENTER / LEFT / RIGHT / TOP / BOTTOM !important;}
</style>

<style>
/*Mood (Background Color/Background Image)*/
    .mood{
    text-align:center;
    background-color: transparent !important;
    background-image: url('URL') !important;
    background-attachment: FIXED OR SCROLL !important;
    background-repeat: REPEAT OR NO-REPEAT !important;
    background-position: CENTER / LEFT / RIGHT / TOP / BOTTOM !important;}
</style>

<style>
/*Contact Heading (Background Color/Background Image)*/
    .contact .heading{
    border-radius: 25px 25px 25px 25px !important;
    background-color: #353ba7 !important;
    background-image: url('URL');
    background-repeat: repeat;
    background-position: center;}
</style>

<style>
/*Contact Box (Background Color/Background Image)*/
    .contact{
    background-color: transparent !important;
    background-image: url('URL') !important;
    background-attachment: FIXED OR SCROLL !important;
    background-repeat: REPEAT OR NO-REPEAT !important;
    background-position: CENTER / LEFT / RIGHT / TOP / BOTTOM !important;}
</style>

<style>
/*Interests Section/Social Links Heading (Background Color/Backround Image)*/
    .table-section .heading{
    border-radius: 25px 25px 25px 25px !important;
    text-align:center;
    background-color: #353ba7 !important;
    background-image: url('URL');
    background-repeat: repeat;
    background-position: center;}
</style>

<style>
/*Interests Table & Links Table (Background Color/Background Image)*/
    table.details-table{
    background-color: transparent !important;
    background-image: url('URL') !important;
    background-attachment: FIXED OR SCROLL !important;
    background-repeat: REPEAT OR NO-REPEAT !important;
    background-position: CENTER / LEFT / RIGHT / TOP / BOTTOM !important;}
    
    .profile .details-table td{
    background-color: transparent !important;
    background-image: url('URL') !important;
    background-attachment: FIXED OR SCROLL !important;
    background-repeat: REPEAT OR NO-REPEAT !important;
    background-position: CENTER / LEFT / RIGHT / TOP / BOTTOM !important;}
</style>

<style>
/*Blogs Heading (Background Color/Background Image)*/
    .blog-preview h4{
    border-radius: 25px 25px 25px 25px !important;
    background-color: transparent;
    background-image: url('URL');
    background-repeat: repeat;
    background-position: center;}
</style>

<style>
/*Blog (Background Color/Background Image)*/
    .blog-preview{
    background-color: transparent !important;
    background-image: url('URL') !important;
    background-attachment: FIXED OR SCROLL !important;
    background-repeat: REPEAT OR NO-REPEAT !important;
    background-position: CENTER / LEFT / RIGHT / TOP / BOTTOM !important;}
</style>

<style>
/*Blurbs Heading (Background Color/Background Image)*/
    .blurbs .heading{
    border-radius: 25px 25px 25px 25px !important;
    background-color: transparent !important;
    background-image: url('URL');
    background-repeat: repeat;
    background-position: center;}
</style>

<style>
/*About Me/Who I'd Like To Meet (Background Color/Background Image)*/
    .blurbs{
    background-color: transparent !important;
    background-image: url('URL') !important;
    background-attachment: FIXED OR SCROLL !important;
    background-repeat: REPEAT OR NO-REPEAT !important;
    background-position: CENTER / LEFT / RIGHT / TOP / BOTTOM !important;}
    
/*Hide "About Me" & "Who I'd Like To Meet" Headers*/
 .blurbs .section h4{display: none !important;}
</style>

<style>
/*Friends/Comments Heading (Background Color/Background Image)*/
    .friends .heading{
    border-radius: 25px 25px 25px 25px !important;
    background-color: transparent !important;
    background-image: url('URL');
    background-repeat: repeat;
    background-position: center;}
</style>

<style>
/*Friends (Background Color/Background Image)*/
    .friends{
    background-color: transparent !important;
    background-image: url('URL') !important;
    background-attachment: FIXED OR SCROLL !important;
    background-repeat: REPEAT OR NO-REPEAT !important;
    background-position: CENTER / LEFT / RIGHT / TOP / BOTTOM !important;}
</style>

<style>
/*Comments (Background Color/Background Image)*/
    .comments-table td{
    background-color: transparent !important;
    background-image: url('URL') !important;
    background-attachment: FIXED OR SCROLL !important;
    background-repeat: REPEAT OR NO-REPEAT !important;
    background-position: CENTER / LEFT / RIGHT / TOP / BOTTOM !important;
    border-radius: 25px 25px 25px 25px !important;}
</style>

<style>
/*Put Your Comments In A Scroll Box*/
table.comments-table{
display: block;
height: 300px!important;
overflow-y: scroll;}
</style>

<style>
/*Customize Scrollbar*/
    ::-webkit-scrollbar {
    width: 5px;
    height: 10px;}

    ::-webkit-scrollbar-thumb {
    background: rgba(80, 80, 80);}

    ::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);}
</style>

<style>
/*Footer Links (Background Color/Background Image)*/
    footer{
    background-color: #353ba7 !important;
    background-image: url('URL') !important;
    background-attachment: FIXED OR SCROLL !important;
    background-repeat: REPEAT OR NO-REPEAT !important;
    background-position: CENTER / LEFT / RIGHT / TOP / BOTTOM !important;}
</style>

<style>
/*Change Text Colors*/
    .top{
    color: #2d4286;}    
    
    main{
    color: #2d4286 !important;}
    
    footer{
    color: #698ae8;}
</style>

<style>
/*Change Link Colors*/
    a{
    color: #698ae8 !important;}
    
    a:hover{
    color: #2d4286 !important;}
    
    a:visited{
    color: #698ae8 !important;}
    
    .top a{
    color: #698ae8 !important;}
    
    .top a:hover{
    color: #698ae8 !important;}
    
    .top a:visited{
    color: #698ae8 !important;}
    
    .links a{
    color: #698ae8 !important;}
    
    .links a:hover{
    color: #698ae8 !important;}
    
    .links a:visited{
    color: #698ae8 !important;}
   
    .friends-grid p{
    color: #698ae8 !important;}

    footer .links a{
    color: #698ae8 !important;}
   
    footer .links a:hover{
    color: #698ae8 !important;}
   
    footer .links a:visited{
    color: #698ae8 !important;}
</style>

<style>
/*Change Interests Section Titles*/
table, th, td {
  border: 0px trans;text-align:center;border-radius: 15px;}

:root {
  --topic1: "General ☆";
  --topic2: "Music ";
  --topic3: "Movies ☆";
  --topic4: "Series/Animes ";
  --topic5: "Books/mangas ☆";
  --topic6: "THE BESTEST EVER!!!!! ";}

.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;
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>
/*Follow font instructions at: https://forum.spacehey.com/topic?id=6530  */
/*Change normal text font*/
.body{
font family: FONT !important;}
</style>

<style>
/*Change link font*/
a{
font-family: FONT !important;}

a:hover{
font-family: FONT !important;}

a:visited{
font-family: FONT !important;}
</style>

<style>
/*Change Profile Name Font*/
h1{
font-family: Cute Font !important;}
</style>

<style>
/* this centers your friend space */
    .profile .friends .inner, .profile .blurbs .section h4{
    text-align: center;
    }
</style>

<style>
/* cursors: top URL is the cursor that shows when you hover over links, bottom URL is the main or "resting" cursor */
/* https://cursors-4u.net */
a:hover {    
 cursor: url('url'), auto;
}
* {
 cursor: url('url'), auto;
}
</style>

<style>
/* this edits your friends' icons */
.profile .friends .person img:not(.icon) {
border-radius:15px;
}
</style>

<style>
/* contact icons */
.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 favorite */
content: "💧"
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {
/* send a message */
content: "⭐️"
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {
/* foward 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 2 group  */
content: "💧"
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
/* report */
content: "⭐️"
}   
</style>

<style>
/*Rounds profile picture*/
    .profile-pic img{
border-radius:25px;}
</style>

<style>
/*Change Header Text (Contact, About Me, Who I'd Like To Meet, etc)*/

/*"Contacting You" Box Title*/
.contact .heading{ font-size:0; text-align:center; }
.contact .heading:before{ content: "Your New Contact Line"; font-size:.8rem; font-weight:bold; }

/*"Latest Blogs Entries" Title*/
.blog-preview h4{ font-size:0; text-align:center;}
.blog-preview h4 a{font-size:.8rem;margin-left:5px; }
.blog-preview h4:before{ content: "Your New Blog Entries"; font-size:.8rem; }

/*"Your Blurbs" Title*/
.blurbs .heading{ font-size:0; text-align:center;}
.blurbs .heading:before{ content: "Your New blurbs Line"; font-size:.8rem; font-weight:bold; }

/*"Your Friend Space" Title*/
.friends .heading{ font-size:0; text-align:center;}
.friends .heading:before{ content: "Your new Friends Space Line"; font-size:.8rem; font-weight:bold; }

/*"Your Friend Comments" Title*/
.friends#comments .heading{ font-size:0; text-align:center; }
.friends#comments .heading:before{ content: "Your New Friends Comments Line"; font-size:.8rem; font-weight:bold; }
</style>

<style>
/*contact box border*/
    .contact{
border: 1px #698ae8 !important;
border-radius: 15px;}
</style>

<style>
/* for this box, you can add an image of your choice. it's right under the contact box. */
.url-info{
    background: url('https://static.wikia.nocookie.net/gensin-impact/images/8/80/Item_Furina_Banquet.png/revision/latest?cb=20231108032121');
    background-position: center;
    border: var(--borders)!important;
    border-radius: 15px;
    height: 200px;}

.url-info p{
    opacity: 0.0;}
</style>

<style>
/*removes boxes around the interests/links table*/
body  
    {
--lighter-blue: none;
}
</style>

<style>
/*hides white box around comments table*/
    .table.comments-table:{
    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 20 of 29 comments ( View all | Add Comment )

Juno	1742159335 Using Report Comment
ʚ ɞ ׁ ֢ Gisele	1741404650 Using!! Report Comment
Harayuzu Kuyuu	1740735701 usingg>< Report Comment
☆Hikaru☆tsuki:★	1726341964 Using! :3 Report Comment
TOFU!	1724345537 usando! Report Comment
⋆˚࿔ evie𝜗𝜚˚⋆	1723835550 Using X3 Report Comment
j3ly.x	1722004307 using Report Comment
Zigli	1721198567 using Report Comment
Omori🔪	1720998378 Using!! Report Comment
Emi	1720514387 USINGGGG Report Comment
Ulqui !! 🪽	1719755436 using :3 Report Comment
dciemori	1719702143 using !! Report Comment
Inur4awh	1719166240 Using!! Report Comment
⚖️💙Literally Furina🩵⚖️	1719164826 USING!!! Report Comment
amethycs or ame..!!	1712497180 USING Report Comment
ˢʷᵉᵉᵗ𝐴𝑢𝑟𝑜𝑟𝑎	1711405173 Using! Report Comment
chaoren	1710760133 using!!! :3 Report Comment
₍^ >ヮ<^₎ .ᐟ.ᐟ	1708451986 Using ^_^ Report Comment
𝓑𝓻𝓸𝓴𝓮𝓷 𝓕𝓲𝓵𝓮𝓼	1706556574 Usando Report Comment
Mxtthw	1706419945 Using!! Report Comment