Purple Layout

Tags: purple, black, dark, glow, animation, gif, layout

Description:

Just a purple layout. Anyone is free to use it, I just made it for fun. I'm pretty new to CSS, hopefully the code isn't too messy.

Enjoy!

Preview:

click on the image for a larger preview

Code:

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

<style>

@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

body{
background-image: url(https://images4.imagebam.com/7d/7c/17/ME5B9JZ_o.gif);
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}

.container{
margin: 0 auto;
width: 1000px;
}

main{
background-color: transparent;
}

p{
color: white;
font-size: 12px;
}

nav .top{
background-color: transparent;
}

nav .links{
background-color: black;
text-align: center;
display: flex;
justify-content: space-around;
flex-wrap: wrap;
padding: .5em;
border-radius: 10px;
box-shadow:1px 3px 5px #B337FF;
}

.profile h1{
font-family: 'Press Start 2P', cursive;
font-size:40px;
color: white;
text-shadow: 1px 3px 5px #B337FF;
}

.profile .profile-info {
margin: 0px 20px 0px 20px;
box-shadow:1px 3px 5px #B337FF;
border-radius: 10px;
background-color: black;
color: white;
}

.profile .blog-preview{
color: white;
}

.profile-pic img{
border: 1px solid white;
border-radius: 100%;
box-shadow:1px 3px 5px #B337FF;
}

.online{
color: white;
font-family: 'Press Start 2P', cursive;
text-shadow: 1px 3px 5px #B337FF;
font-size: 150%;
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 .contact .heading,
.profile .table-section .heading{
background-color: transparent;
padding: .5em;
text-shadow: 1px 3px 5px #B337FF;
font-family: 'Press Start 2P', cursive;
font-size: 15px;
line-height: 1.5em;
}

.profile .table-section,
.profile .contact,
.profile .url-info{
border: none;
}


table.details-table td {
background-color: black !important;
border-radius: 10px;
padding: 1em;
box-shadow: 1px 3px 5px #B337FF;
}

.profile .blurbs .heading,
.profile .friends .heading{
background-color: transparent;
font-family: 'Press Start 2P', cursive;
text-shadow:1px 3px 5px #B337FF;
color: white;
font-size: 15px;
line-height: 1.5em;
}

.profile .blurbs .section h4{
color: white;
font-size: 15px;
padding: .5em;
}

table.comments-table{
border: none;
}

table.comments-table td {
background-color: black !important;
border-radius: 10px;
padding: 1em;
box-shadow: 1px 3px 5px #B337FF;
}

.person img{
border-radius: 100px;
box-shadow: 1px 3px 5px #B337FF;
}

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

.count{
color: white;
text-shadow: 1px 3px 5px #B337FF;
}

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

.comments-table img{
border: 1px solid white;
border-radius: 100%;
box-shadow:1px 3px 5px #B337FF;
}

.profile .comments-table .comment-replies{
border: 1px solid white;
border-radius: 10px;
}

footer{
background-color: black;
border-radius: 10px;
box-shadow:1px 3px 5px #B337FF;
}

a{
color: white;
text-shadow: 1px 3px 5px #B337FF;
}

a:visited {
color: white;
text-shadow: 1px 3px 5px #B337FF;
}

a:hover {
color: #AD27FF;
text-shadow: 1px 3px 5px #B337FF;
animation-name: blink;
animation-iteration-count: infinite;
animation-timing-function: cubic-bezier(1.0,0,0,1.0);
animation-duration: 2s;
}

a:active {
color: white;
}

nav .links a:hover{
text-decoration: underline;
color: white;
font-size: 110%;
animation-name: blink;
animation-iteration-count: infinite;
animation-timing-function: cubic-bezier(1.0,0,0,1.0);
animation-duration: 2s;
}

</style>


<style>* {cursor: url(https://cur.cursors-4u.net/cursors/cur-2/cur119.cur), auto !important;}</style><a href="https://www.cursors-4u.com/cursor/2008/12/17/cool-purple-outer-glow-pointer.html" target="_blank" title="Cool Purple Outer Glow Pointer"><img src="https://cur.cursors-4u.net/cursor.png" alt="Cool Purple Outer Glow Pointer" style="position:absolute; top: 0px; right: 0px;"/></a>

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

SykleyShbang	1692492718 Using! looks sick btw, fits my whole surreal fit real well, ty!! Report Comment
xen	1691863711 using!! Report Comment
☆Sunny☆	1691524481 gonna use !! Report Comment
DUaLSCaR	1689388513 using!! :3c Report Comment
MoonyLune	1686710072 Using!! Report Comment
Kemuri	1686403191 Using!! Report Comment
Saya/Cosette	1685941550 Using!! <33 Report Comment
b33fle4f_i	1684672346 thinking of using this （。＾▽＾） Report Comment
fantagor	1683174241 ABOSLUTELY OBSESSED WITH THIS LAYOUT. USING. Report Comment
BonnieThis	1682383730 USING! waza insano Report Comment
maplesnailz	1680301779 GORGEOUS!! using!! Report Comment
Purple Jade	1679885039 Using this! ^^ Report Comment
plaguedkat	1679406864 think i might use this one! tried modifying one myself but code is hard lol Report Comment
tara lynne	1679350293 using again!!! had in october 2021 missed this. LoL Report Comment
Zeke lmao	1679032101 really fun !! ^-^ Report Comment
fluffyfoxx	1676839779 this one is really cool, definitely using, thank you! Report Comment
xpeachypinkx	1676172626 thank u!! using this <3 Report Comment
baisy	1675197873 USING THIS!! THANK U SM Report Comment
𝘀𝗹𝗲𝗲𝗽𝘆	1671750791 using!! i love it Report Comment
saihate7402	1671570585 using this! thanks man! Report Comment