Simple Purple and Green Layout

Tags: purple, green, simple, layout, dark, black, neon

Description:

Simple Purple and Green Layout made by me.

Anyone can feel free to use, credit isn't needed but is appreciated.

Enjoy!

Preview:

click on the image for a larger preview

Code:

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

<style>

@import url('https://fonts.googleapis.com/css2?family=Concert+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Dongle:wght@300&display=swap');

body{
background-color: black;
}

.container{
width: 70%;
}

nav .top{
background-color: transparent;
border-radius: 20px;
border: 2px solid #CE81FF;
box-shadow: 0px 0px 10px #9C00FF;
margin: 1em 0;
}

nav .links{
background-color: transparent;
border-radius: 20px;
border: 2px solid #50FF6A;
box-shadow: 0px 0px 10px #00FF26;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}

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

.profile p{
font-family: 'Dongle', sans-serif;
font-size: 20px;
}

main{ 
background-color: transparent;
margin: 1em 0;
padding: .5em;
}

.profile h1{
font-family: 'Concert One', cursive;
color: white;
text-shadow: 0px 0px 10px #00FF26;
font-size: 30px;
}

.online{
font-family: 'Concert One', cursive !important;
color: #50FF6A;
font-size: 30px !important;
text-shadow: 0px 0px 10px #00FF26;
animation-name: blink;
animation-iteration-count: infinite;
animation-timing-function: cubic-bezier(1.0,0,0,1.0);
animation-duration: 2s;
}

.online img{
display: none;
}

.profile .profile-info{
background-color: transparent;
border-radius: 20px;
border: 2px solid #CE81FF;
box-shadow: 0px 0px 10px #9C00FF;
color: white;
text-shadow: 0px 0px 10px #00FF26;
}

.profile .general-about{
color: white;
text-shadow: 0px 0px 10px #00FF26;
}

.profile .blog-preview,
.profile .mood{
color: white;
text-shadow: 0px 0px 10px #00FF26;
}

.profile .profile-pic img{
border-radius: 20px;
box-shadow: 0px 0px 10px #9C00FF;
filter: sepia(100%) hue-rotate(45deg) saturate(3);
}

.profile .contact .heading,
.profile .table-section .heading{
font-family: 'Concert One', cursive;
color: white;
text-shadow: 0px 0px 10px #00FF26;
background-color: transparent;
padding: .5em;
font-size: 20px;
}

.profile .table-section,
.profile .contact,
.profile .url-info{
text-shadow: 0px 0px 10px #00FF26;
color: white;
border-radius: 20px;
border: 2px solid #50FF6A;
box-shadow: 0px 0px 10px #00FF26;
}

table.details-table td {
background-color: transparent !important;
color: white !important;
}

.profile .blurbs .heading,
.profile .friends .heading{
font-family: 'Concert One', cursive;
color: white;
text-shadow: 0px 0px 10px #00FF26;
background-color: transparent;
padding: .5em;
font-size: 20px;
}

.profile .blurbs{
text-shadow: 0px 0px 10px #00FF26;
color: white;
border-radius: 20px;
border: 2px solid #50FF6A;
box-shadow: 0px 0px 10px #00FF26;
}

.profile .friends-grid .person p,
.profile .friends{
color: white;
}

.profile .blurbs .section h4{
color: white;
}

.profile .comments-table{
background-color: transparent;
border-radius: 20px;
border: 2px solid #CE81FF;
box-shadow: 0px 0px 10px #9C00FF;
color: white;
}

.profile .comments-table td{
background-color: transparent;
border-radius: 20px;
border: 1px solid #CE81FF;
padding: .5em;
}

.profile .comments-table .comment-replies{
background-color: transparent;
border-radius: 20px;
border: 1px solid #CE81FF;
box-shadow: 0px 0px 10px #9C00FF;
color: white;
}

.comments-table img,
.person img{
border-radius: 20px;
box-shadow: 0px 0px 10px #9C00FF;
filter: sepia(100%) hue-rotate(45deg) saturate(3);
}


footer{
background-color: transparent;
color: white;
text-shadow: 0px 0px 10px #00FF26;
}

.count{
color: #50FF6A;
text-shadow: 0px 0px 10px #00FF26;
}

a{
color: #CE81FF;
text-shadow: 0px 0px 10px #9C00FF;
font-family: 'Dongle', sans-serif;
font-size: 20px;
}

a:visited {
color: #CE81FF;
text-shadow: 0px 0px 10px #9C00FF;
font-family: 'Dongle', sans-serif;
font-size: 20px;
}

a:hover {
color: white;
text-shadow: 0px 0px 10px #9C00FF;
font-family: 'Dongle', sans-serif;
font-size: 20px;
}

a:active {
color: #CE81FF;
text-shadow: 0px 0px 10px #9C00FF;
font-family: 'Dongle', sans-serif;
font-size: 20px;
}

nav .links a{
color: white;
font-size: 20px;
}

nav .links a:hover{
color: #CE81FF;
text-shadow: 0px 0px 10px #9C00FF;
font-family: 'Dongle', sans-serif;
font-size: 20px;
}

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

.contact .inner a:before{
content: "♫";
font-size: 20px;
} 

.profile .blog-preview{
text-align: center;
}

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

luca ^_^	1702148063 using this!! ^^ Report Comment
pumpkin king	1701656802 how do i change the color of the profile pic? love the layout! Report Comment The portion of the code that affects the profile image is: .profile .profile-pic img{ border-radius: 20px; box-shadow: 0px 0px 10px #9C00FF; filter: sepia(100%) hue-rotate(45deg) saturate(3); } The filter changes the color! You can change the values that are in the parentheses to alter the color of the image, or you can remove that line of code to get rid of the color change all together :] by BEEFSTEW; 1701667187; Report
Raj/Lyric~★	1701401569 Ooh might use! Report Comment
James	1701392384 using! Report Comment
𝘿𝙖𝙫𝙞𝙚𝘽𝙖𝙗𝙞𝙚	1701300371 Might usee Report Comment
Bookshelves of Recollections	1701029307 USING!!! X) Report Comment
Taz 🕷️	1701023954 Using :3 Report Comment
Eden >:D	1700841406 Using :] Report Comment
CHRUSTYRIBZ	1700365955 using! :3 Report Comment
Piggyma	1700234631 Using too! thx friend! Report Comment
VIN/ATTICUS ★	1699692868 using!!! >:D Report Comment
★ Lyon ★ !!	1699298695 using!! ty ty ty :33 Report Comment
ky/stan/mars	1698174460 using :p Report Comment
tigertorment	1697302809 using !! Report Comment
tigertorment	1697302808 using !! Report Comment
P0MNI	1697219770 nvm im using this one Report Comment
mel / split / mono :3	1695483593 using!!! :3 Report Comment
Felix	1695096260 Using!! :o) Report Comment
alex!	1695000582 using !! Report Comment
Nathan	1694906358 Using Report Comment