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

coveredinlove	1713465564 using! Report Comment
Spider!	1713388779 So I'm using this and it changed my pfp to green. Is there anything I can do so it doesnt do this? Thanks in advance. Report Comment
mitch!!	1713288860 using!! Report Comment
zombiedrone	1713273843 using! ! :D Report Comment
𝕍𝕖𝕟𝕕𝕖𝕥𝕥𝕒	1712966666 using! Report Comment
Entrapta :3	1712009201 using! Report Comment
AleeOtto	1711870326 usiing Report Comment
IDIOTEQUE	1711415458 Thanks ;) Report Comment
Whole_in_my_Head	1710323100 Thanks frand! Report Comment
Boomie	1710196878 Using!!! Report Comment
Razor	1709798571 usin XD Report Comment
spiderxlily	1709689000 Using Report Comment
Rab.	1708473277 using1 Report Comment
Madelyn	1708212488 Using! Report Comment
Makn_Tocos	1708060784 using Report Comment
Ileana★	1708038618 using!! Report Comment
Redemtox	1708026721 Using! this is really look good Good job, bro :D Report Comment
Solar	1707846945 USING! Report Comment
frugilegus	1707314563 using :-) Report Comment
InvaderSchnitzel	1706841966 using Report Comment