drew ⚜️'s profile picture

Published by

published
updated

Category: SpaceHey

neapolitan layout

nobody can upload layouts rn so... 


I'm not super good at css so sorry if smth don't work lmao, feel free to help out in the replies. also no credit needed idgaf what you do with this lmao. change whatever you want

layout code

<style>

:root{

--nea:#ffbddf;

--poli:#feffde;

--tan:#795c46;

}

nav .links{

box-shadow: 0px 0px 10px var(--tan);

text-align: center;

opacity: 1;

background: linear-gradient(to right, #ffbddf, #ffbddf 19.5px, #feffde 19.5px, #feffde );

background-size: 39px 100%;

border: solid 4px var(--tan);

border-top: none;

}

nav .links a{

color: var(--tan);

text-shadow: var(--tan) 0px 0px 5px!important;

}

nav .top{

box-shadow: 0px 0px 10px var(--tan);

display: block;

height: 300px;

background-image: url('https://i.pinimg.com/originals/53/5a/21/535a2195f1eb605c345a31ee91636b56.gif');

background-size: cover;

background-position: center center;

border: solid 4px var(--tan);

}

main{

box-shadow: 0px 0px 10px var(--tan);

border: solid 4px var(--tan);

border-top: none;

background-color: var(--poli);

color: var(--tan);

}

a{

color: white;

text-shadow : 0px 0px 5px #c47295;

}

body{

font-family:MS PGothic;

background-image: url('https://files.catbox.moe/lku281.png'),url('https://i.pinimg.com/564x/b5/54/4f/b5544fbdba099ab6d06589214dcec4aa.jpg');

background-repeat: repeat-x, repeat;

background-attachment: fixed;

}

.profile-pic img{

border-radius: 50%;

border: solid 5px;

box-shadow: 0px 0px 18px var(--nea);

}

button{

background-color: var(--nea);

border: 1px solid var(--tan);

color: var(--tan);

}

.count{

color: var(--tan);

text-shadow: 0px 0px 5px var(--nea);

}

h1, h2, h3, h4{

color: var(--poli)!important;

text-shadow: 0px 0px 5px var(--tan);

}

a:hover{

color: #c47295;

text-shadow: #c47295 0px 0px 5px;

}

.comments-table{

border: 4px solid var(--tan);

border-spacing: 5px;

opacity: 1;

background: linear-gradient(to right, #ffbddf, #ffbddf 19.5px, #feffde 19.5px, #feffde );

background-size: 39px 100%;

}

.comment-replies{

border: solid 1px var(--tan)!important;

background-color: var(--nea);

color: var(--tan)!important;

margin-bottom: 8px;

}

.comments-table td{

background-color: var(--poli);

padding: 10px;

}

.comments-table td:first-child{

background: transparent;

border: none!important;

background-size: cover;

}

.url-info{

margin-top:0px!important;

border-left: 4px solid var(--tan)!important;

border-right: 4px solid var(--tan)!important;

border-bottom: 4px solid var(--tan)!important;

border-top: none!important;


background: linear-gradient(to right, #ffbddf, #ffbddf 19.5px, #feffde 19.5px, #feffde );

background-size: 39px 100%;

}

.contact{

padding: 3px

margin-bottom:0px!important;

border-left: 4px solid var(--tan)!important;

border-right: 4px solid var(--tan)!important;

border-top: 4px solid var(--tan)!important;

border-bottom: none!important;

background: linear-gradient(to right, #ffbddf, #ffbddf 19.5px, #feffde 19.5px, #feffde );

background-size: 39px 100%;

}

.mood{

}

.table-section{

background: linear-gradient(to right, #ffbddf, #ffbddf 19.5px, #feffde 19.5px, #feffde );

background-size: 39px 100%;

}

.profile-info{

background-image: url('https://i.pinimg.com/564x/a9/fe/e1/a9fee1f229c84b9ad933a88e3d4a7d48.jpg');

background-size: cover;

background-position: center center;

}

.table-section td:first-child{

background-color: var(--tan);

color: var(--poli);

}

.table-section td{

background-color: var(--poli);

color: var(--tan);

}

.table-section{

border: 4px solid var(--tan)!important;

}

.person img{

border: 4px solid var(--tan)!important;

border-radius: 50%;

background-color: var(--poli)

}

.heading{

background-color: var(--tan)!important;

}

.home-actions{

color: var(--tan);

}

footer{

background: transparent;

}

  .online img {

        filter: hue-rotate(200deg);

        margin-right: 5px;

        animation-name: blink;

        animation-iteration-count: infinite;

        animation-duration: 1s;

    }

  .online {

        color: var(--nea);

animation:blinkingText 1s infinite;

        font-weight: bold;

        font-size: 100%;

    }

.comments-table td:first-child img{

box-shadow: 0px 0px 5px var(--tan);

background-color: var(--poli);

border-radius: 50%;

border: solid var(--tan) 4px;

}

.blurbs h4{

color: var(--nea)!important;

text-shadow:var(--nea) 0px 0px 5px;

}

.blurbs{

opacity: 1;

background: linear-gradient(to right, #ffbddf, #ffbddf 19.5px, #feffde 19.5px, #feffde );

background-size: 39px 100%;

border: var(--tan) 4px solid;

}


#comments.friends h4{

color: var(--nea)!important;

text-shadow: 0px 0px 5px var(--nea);

}

#comments.friends .heading{

background-color: var(--tan)!important;

}

.details-table:first-child{

background-color: var(--tan)!important;

color: var(--poli)!important;

}

.details-table{

opacity: 1;

background: linear-gradient(to right, #ffbddf, #ffbddf 19.5px, #feffde 19.5px, #feffde );

background-size: 39px 100%;

}

.details-table:second-child{

color: var(--tan)!important;

background-color: var(--poli)!important;

}

.blurbs .inner .section h4{

color: var(--tan)!important;

}

.friends .heading h4 {

text-shadow: 0px 0px 5px var(--poli)!important;

}

.friends:nth-child(3){

opacity: 1;

background: linear-gradient(to right, #ffbddf, #ffbddf 19.5px, #feffde 19.5px, #feffde );

background-size: 39px 100%;

margin-bottom: 10px;

border: var(--tan) 4px solid;

color: var(--tan)!important;

}

h1{

font-size: 50px!important;

color: var(--nea)!important;

text-align: center;

}

.contact .inner .f-row:nth-child(1) .f-col:nth-child(1) a:before {

content: "🍨";

}


.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {

content: "🍨";

}


.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {

content: "🍨";

}


.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {

content: "🍨";

}


.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {

content: "🍨";

}

.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {

content: "🍨";

}


.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {

content: "🍨";

}

.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {

content: "🍨";

}


</style>


7 Kudos

Comments

Displaying 1 of 1 comments ( View all | Add Comment )

xKWx

xKWx's profile picture

this is so cute!!!! ^_^


Report Comment



thanks frfr 🙏🙏

by drew ⚜️; ; Report