Vax

Tags: dark, pink, purple

Description:

This is the color palette I use in my portfolio and on my neocities page, so I created this layout to have it here too.

Preview:

click on the image for a larger preview

Code:

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

<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
:root {
  --main-bg-color: #222;
  --secondary-bg-color: #555;
  --main-font-color: #fff;
  
  --primary-color: #e15d74;
  --secondary-color: #7067cf;
  --ternary-color: #2ab7ca;
}
body {
  background-color: #000;
  color: var(--main-font-color);
  font-size: 14px;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}

a {
  color: var(--primary-color);
  transition: color 0.35s ease;
}
a:hover {
    color: var(--main-font-color);
    text-decoration: none;
}


nav .top {
    background-color: var(--main-bg-color);
}
nav .links {
    background-color: var(--secondary-bg-color);
    display: flex;
    gap: 10px;
    padding: 5px 10px;
}
nav .links li:after {
    content: "" !important;
}
nav .links a {
}
nav .links a:hover {
    color: var(--main-font-color);
    text-decoration: 2px underline var(--primary-color);
}


main {
    background-color: var(--main-bg-color);
    color: var(--main-font-color);
}


.contact {
    border: 1px solid var(--primary-color) !important;
    transition: box-shadow 0.35s ease;
}
.contact:hover {
    box-shadow: 3px 3px 0 0 var(--primary-color);
}
.contact .heading {
    background-color: var(--primary-color) !important;
}
.f-col a {
    color: var(--main-font-color);
}
.f-col a:hover {
    text-decoration: 2px underline var(--primary-color);
}


.url-info {
    border: 1px solid var(--primary-color) !important;
    transition: box-shadow 0.35s ease;
}
.url-info:hover {
    box-shadow: 3px 3px 0 0 var(--primary-color);
}


.table-section {
    border: 1px solid var(--secondary-color) !important;
    transition: box-shadow 0.35s ease;
}
.table-section:hover {
    box-shadow: 3px 3px 0 0 var(--secondary-color);
}
.table-section .heading {
    background-color: var(--secondary-color) !important;
}
.details-table td {
    background-color: var(--main-bg-color) !important;
}
.details-table td:first-child p {
    color: var(--secondary-color);
}


.blurbs {
    border: 1px solid var(--secondary-color) !important;
    transition: box-shadow 0.35s ease;
}
.blurbs:hover {
    box-shadow: 3px 3px 0 0 var(--secondary-color);
}
.blurbs .heading {
    background-color: var(--secondary-color) !important;
}
.blurbs .heading h4 {
    color: var(--main-font-color);
}
.section h4 {
    color: var(--secondary-color) !important;
}


.friends {
    border: 1px solid var(--primary-color) !important;
    transition: box-shadow 0.35s ease;
    margin-bottom: 10px;
}
.friends:hover {
    box-shadow: 3px 3px 0 0 var(--primary-color);
}
.friends .heading {
    background-color: var(--primary-color) !important;
}
.friends .heading h4 {
    color: var(--main-font-color);
}
.count {
    color: var(--primary-color);
}
.person p {
    color: var(--main-font-color) !important;
}


#comments {
    border: 1px solid var(--secondary-color) !important;
    transition: box-shadow 0.35s ease;
}
#comments:hover {
    box-shadow: 3px 3px 0 0 var(--secondary-color);
}
#comments .heading {
    background-color: var(--secondary-color) !important;
}
#comments .count {
    color: var(--secondary-color);
}
.comments-table {
    border: 1px solid var(--secondary-bg-color);
}
.comments-table td {
    background-color: var(--main-bg-color) !important;
}
.inner b a {
    color: var(--secondary-color);
}
.comments-table a {
    color: var(--secondary-color);
}


footer {
    background-color: #000;
}
</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 8 of 8 comments ( View all | Add Comment )

ambam.	1728181163 using! :] Report Comment
❋ fancy ❋	1713927505 ima use this Report Comment
Jennifer	1712113573 I Love this.. I'm gonna use it Report Comment
ִֶָ	1707084854 using111 Report Comment
✰ NiKKi	1706927603 using!! Report Comment
cris	1705897653 using it !! :D Report Comment
Aubrey	1705796563 this is so nice.. totally using this one!! Report Comment
Temmie✩Woo!𖦹	1704486903 Using it!:3 Report Comment