★

Tags: newjeans, simple, blue, silver

Description:

this was a requested layout !! might make a req blog .. mayb

simple layout slightly inspired by newjeans ★

this layout includes:

- hover animation on profile pictures
- link hover animation
- profile picture with a lace border
- image above blog preview n below name

feel free to change anything to your liking nd please let me know for any errors
i also accept requests, just comment ★

Preview:

click on the image for a larger preview

Code:

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

<style>

@import url('https://fonts.googleapis.com/css2?family=Fredoka+One&family=Lilita+One&family=Patua+One&display=swap');


.container {
    width: 850px;
    padding: 10px;
}


*, p, a, form, li, .links li:not(:last-child)::after, footer .links li:not(:last-child)::after {
        text-shadow: none!important;

}

.profile {
    direction: rtl;
}

.blurbs, .profile .table-section .heading, .blog-preview a, .friends, .general-info, .contact, .url-info, .details-table, .details p{
    direction: ltr;
}

    .section , .blurbs, .friends {font-size: 12px!important;
        text-align: center;
        color: #6F8FAF;
    }

    .profile .url-info{
        border: double #779ABD;
        background: white;
    }

.online{ 
  content: url(https://dl.glitter-graphics.com/pub/745/745447eyod5wufg2.gif);
  filter: grayscale(65%);
}

    h1 {
        width: 288px;
        font-size:50px!important;
        font-family: lilita one;
        font-weight: 200;
        -webkit-text-stroke-width: 1px;
        -webkit-text-stroke-color: #3e5b78;
        text-align: center;
        line-height: 35px!important;
        display: block;
        color: #6F8FAF;
        padding: 10px;
        margin-top: -15px!important;
    }


body {
background: #6F8FAF;
}

    .profile .blurbs .section h4, .count {
      color: #6F8FAF;
      font-weight: bold;
      font-family: fredoka one;
      font-size: 17px;
      -webkit-text-stroke: 1px #444A8B;
      -webkit-text-stroke-width: thin;
      text-shadow: 2px 1px #CAE8F6;
}

        .profile-info, h3{
        border: none;
        font-family: patua one;
        font-size: 20px!important;
        font-weight: 200;
        color: #6F8FAF!important;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 10px 5px;
        margin-bottom: 1px;

    }	

main{
background: #ebf0f5;
border-radius: 10px 10px;
border: double 3px;
border-color: white;
}

   .blurbs .inner {
       text-align: center;
   }

    .friends {font-size: 13px!important;
        text-align: center;
        font-family: helvetica;
        color: #6F8FAF;
    }

    .heading {
        padding: 0px !important;
        background: #95adc4!important;
        color: #d5e7f7!important;
        font-size: 17px;
        text-align: center;
        font-family: helvetica ;
        border: 3px double;
        border-color: #5F7B96;
    }

.comments-table td:first-child {
    background: #d7eafc radial-gradient(circle at 0 0, #e3f0fc 2px, transparent 0);
    background-size: 4px 4px;
    padding: 15px;
}
.comments-table td {
	background: white;
  	padding: 5px;
}



.profile-pic{
border-width:8px;
border-style:solid;
border-image: url("https://dl.dropbox.com/s/v8iy6a8feyq041p/blue%20ver.png") 8 fill round;
overflow: hidden;
}

    body {
        background-color: #6F8FAF;
        background-size: auto;
        font-family: helvetica;
        text-transform: lowercase;
    }

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

nav .top, nav .links, .top ul .links {
	background: #779ABD;
}

table.comments-table{
display: block;
height: 220px!important;
overflow-y: scroll;
}



    nav {
        margin-bottom: 6px;
        border-radius: 16px;
        text-align: center;
        overflow: hidden;
        color: #325DB4!important;
        border: double 3px;
        border-color: white;
    }




    div.contact > div.heading > h4:before{
        content: url(https://pixelbank.neocities.org/decome/consoles/d3c7efd4.gif);
    }
    
    DIV.table-section:nth-child(6) > DIV.heading:before{
        content: url(https://pixelbank.neocities.org/decome/consoles/d3c7efd4.gif);
    }

    .contact {
        text-transform: lowercase;
        text-align: center;
        overflow: hidden;
        font-size : 13px;
        font-family: helvetica;
        background: white;
        border: dotted 0px!important;
    }

button {
 background: linear-gradient(#f0f1fa, #c9cad4);
 border: double 1px #acaebd;
 border-radius: 4px;
 padding: 3px;
 text-transform: lowercase;
 font-family: fredoka one;
 color: #75808a;
 font-size: 11px;
}

input#q {
	 border: double 3px #6F8FAF;
	 border-radius: 8px;
}

.details-table td {
  	border: 3px double #6F8FAF;
        border-radius: 5px;
  	background: white;
  	padding: 5px;
}

        DIV.blog-preview:before {
        background-image: url('https://cdn.discordapp.com/attachments/726109777377362034/1087013363588022432/image_2023-03-19_160156361.png');
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
        display: block;
        content: "";
        width: 100%;
        height: 140px;
        filter: brightness(99%) contrast(98%);
}

h1:after{
        background-image: url('https://tomomi.neocities.org/divider/div31.png');
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
        margin-bottom: -20px;
        display: block;
        content: "";
        width: 100%;
        height: 50px;
        filter: brightness(99%) contrast(98%);
}



.details-table td:first-child {
  	background: #adc4d9;
  	padding: 1px;
  	color: black;
  	font-size: 10px;
}

.general-about .profile-pic, .general-about .profile-pic img {max-height: 140px;}

footer{
background: none!important}
}


nav .links li::after {
	display: none;
}

    .icon {
        content: url(https://pixelbank.neocities.org/decome/decorative/781fb9a6.gif);
    }

    nav .top {
        background: #dfe9f2;
    }

    a:visited {
        color: #475B70!important;
    }
    
    .profile .table-section {
        font-size: 15px;
        border: none!important;
    }
    
    table.details-table td {
        background: white;
        color: #6d7294!important;
    }

a{
color: #64809c;
-webkit-transition: all ease 0.5s; 
-moz-transition: all ease 0.5s; transition: all ease 0.5s;
}

  a:hover { 
    box-shadow: inset 0 50px 0 0 #5A61A3; 
    color: white;
  }

footer a{
color: #2b3d4f;
}

.friends-grid img{
  	border: 3px double #6F8FAF;
}

::-webkit-scrollbar {
width: 14px;
height: 10px;
}

::-webkit-scrollbar-thumb {
background: linear-gradient(90deg, rgba(238,238,238,1) 38%, rgba(206,206,206,1) 62%);
border: 1.5px solid #888888;
border-radius: 5px;
}

::-webkit-scrollbar-track {
background: linear-gradient(90deg, rgba(230,230,230,1) 6%, rgba(240,240,240,1) 18%);
}

.profile-pic:hover img { 
animation: shake 0.5s; 
animation-iteration-count: infinite; 
-webkit-transition: .5s ease-in; 
} 

img:hover{ 
animation: shake 0.5s; 
animation-iteration-count: infinite; 
-webkit-transition: .5s ease-in; 
} 
 
@keyframes shake {
0% { transform: translate(1px, 1px) rotate(0deg); }
10% { transform: translate(-1px, -2px) rotate(-1deg); }
20% { transform: translate(-3px, 0px) rotate(1deg); }
30% { transform: translate(3px, 2px) rotate(0deg); }
40% { transform: translate(1px, -1px) rotate(1deg); }
50% { transform: translate(-1px, 2px) rotate(-1deg); }
60% { transform: translate(-3px, 1px) rotate(0deg); }
70% { transform: translate(3px, 1px) rotate(-1deg); }
80% { transform: translate(-1px, -1px) rotate(1deg); }
90% { transform: translate(1px, 2px) rotate(0deg); }
100% { transform: translate(1px, -2px) rotate(-1deg); }
} 

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

tranquil45	1710881450 haio:) Report Comment
Leah	1708190416 using!! Report Comment
Terrorsaur	1702354462 Hihi!! Could you maybe do a transformer themed one? specifically beastwars or transformers animated? :D Report Comment hi sorry , I don’t really do requests anymore TT by marsietis; 1702359021; Report Thats alr!! ^^ by Terrorsaur; 1702405214; Report
nyamete	1701918405 using! Report Comment
Ennui	1691603774 using!! this is so cute! Report Comment
hiro!	1690511323 using!! ;p Report Comment
ethereal	1688812779 omg so cute! using !!! :3 Report Comment
ethereal	1688812778 omg so cute! using !!! :3 Report Comment
Phoenix!!	1688577847 using! Report Comment
✎LilyFuss	1687637911 Using ! Report Comment
giia	1686940510 using! Report Comment
Narwhal!	1686249700 using! ( ◜‿◝ ) Report Comment
spencer	1685682534 it looks nice. using Report Comment
Sisi★	1684521756 Using️ Report Comment
bunny	1683786232 using!! Report Comment
૮ ˶ᵔ ᵕ ᵔ˶ ა	1683717535 USSSING OMG THANK U ITS SO CUTE Report Comment
malice	1681312601 USING <33333 Report Comment
Mag	1680614508 this is a really sweet & simple layout!! using it now, thank you very much for sharing it :) Report Comment
bobratyeka	1679858041 clean Report Comment
Chey_Jo01	1679621602 Thank you for this layout it is very gorgeous and easy on the eyes Report Comment