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 31 comments ( View all | Add Comment )

AyukA(=`ω´=)	1753457955 Using!!!:3 Report Comment
kat1a	1745387263 USING Report Comment
Juno	1742159335 Using Report Comment
ʚ ɞ ׁ ֢ Gisele	1741404650 Using!! Report Comment
Harayuzu Kuyuu	1740735701 usingg>< Report Comment
☆Hikaru☆tsuki:★	1726341964 Using! :3 Report Comment
n e o	1724345537 usando! Report Comment
⋆˚࿔ venus𝜗𝜚˚⋆	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
𐕣 ⋮ Finn !! ⸝⸝	1719755436 using :3 Report Comment
dciemori	1719702143 using !! Report Comment
Inur4awh	1719166240 Using!! Report Comment
PIERRE!!!!!	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