Simple layout that looks cool and fresh

Tags: dark, layout, simple, windows, cool
Description:

just a cool layout that i created and using by myself
Code:

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

<style>

    @import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap');
    @import url('https://fonts.googleapis.com/css2?family=Kanit:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

    @keyframes spin{
  from{ transform:rotate(0deg); }
  to{ transform:rotate(360deg); }
  }
    
    body { 
        background: url("https://clan.akamai.steamstatic.com/images/40525059/5c524915552890d43253685740aab3c566720d29.jpg")
        no-repeat fixed; 
        background-size: cover;
        background-attachment: fixed;
        font-family: Rubik;
        font-size: 18px;
    }
    
    /* width */
    ::-webkit-scrollbar {
        width: 15px;
    }

    /* Track */
    ::-webkit-scrollbar-track {
          background: #dcdedf;
    }

    /* Handle */
    ::-webkit-scrollbar-thumb {
        background: #bec7c9;
    }

    /* Handle on hover */
    ::-webkit-scrollbar-thumb:hover {
        background: #b5bdbf;
    }
   
    p {
        color: #000;
        font-weight: 500;
    }
    
    h1, h2, h3, h4, h5, h6 {
        font-size: 12px;
        font-weight: 600;
        color: #fff;
    }

    :root {
        --logo-blue: #cfccc2;
        --darker-blue: #0000ff;
        --lighter-blue: #cfccc2;
        --even-lighter-blue: #cfccc2;
        --lightest-blue: #cfccc2;
        --dark-orange: #dc2b31;
        --light-orange: ;
        --even-lighter-orange: ;
        --green: #000;
    }
    
    nav {
       margin: 5px;
    }
    
     nav .links:before {
        display: block;
        background-image: url(https://i.imgur.com/CKX2NUO.png), linear-gradient(to right, #0c1058, #adcbe1);
        background-repeat: no-repeat;
        background-position: right;
        font-weight: 600;
        font-size: 18px;
        padding: 2px 5px;
        content: "Spacehey";
    }
    
    .top {
        color: transparent !important;
        height: 0 !important;
        background-color: transparent !important;
    }
    
    .top .left {
        display: none !important;
    }
    
    .top .center {
        display: none !important;
    }
    
    .search-wrapper{
        display: none !important;
    }
    
    .top .right {
        display: none !important;
    }
    
    .logout-btn{
        display: none !important;
    }
    
    .top a{
        color: transparent !important;
    }
    
    nav .links {
        padding: 0;
    }
    
    nav .links a{
        margin: 5px;
        font-size: 12px;
        color: #000;
        font-weight: 500;
    }

    main {
        background: transparent;
        
    }
    
    .col.w-40.left h1{
        background-image: url(https://i.imgur.com/CKX2NUO.png), linear-gradient(to right, #0c1058, #adcbe1);
        background-repeat: no-repeat;
        background-position: right;
        margin: 0;
    }
    .col.w-40.left {
        padding: 5px
    }
    .col.right h4 {
        margin: 0;
    }
    .col.right {
        padding: 5px;
    }
    .col.right p {
        margin: 2px 8px 10px;
        padding-bottom: 10px;
    }
    .col.right .blurbs {
        margin: 0;
    }
    .col.right .friends{
        margin-top: 10px;
        margin-bottom: 0;
    }
    .col.right .friends .inner{
        padding: 8px;
    }
    .col.right .friends .inner p{
        padding: 0;
    }
    .col.right #comments.friends .inner{
        padding: 8px;
    }
    .col.right #comments.friends .inner p{
       padding: 0px;
       margin: 0 0 8px 7px;
    }
    .col.right #comments.friends .inner .comments-table{
        border-color: #0c1058;
    }
    
    .profile h1 {
        font-family: Kanit;
        padding: 2px 5px;
        font-size: 18px;
    }
    
    .col.w-40.left .general-about p{
        margin: 0px;
        background: #cfccc2;
        font-weight: 500;
        color: #000;
    }
    
    .general-about {
        height: 200px;
        background: #cfccc2;
        margin-top: 0px;
        font-family: Kanit;
    }
    
    .general-about .profile-pic img {
        margin: 10px 0 0 10px;
        margin-left: 50%;
        border-radius: 50%;
        animation: spin 16s infinite linear;
    }

    .general-about .details {
        padding-top: 170px;
        padding-left: 22%;
    }
    .online {
        content: url(https://sillyblinkies.neocities.org/online/imonline.gif);
        padding-left: 54px;
    }

    .mood {
        background: #cfccc2;
        margin: 10px auto ;
    }

    .mood:before {
        display: block;
        padding: 2px 7px;
        background-image: url(https://i.imgur.com/CKX2NUO.png), linear-gradient(to right, #0c1058, #adcbe1);
        background-repeat: no-repeat;
        background-position: right;
        font-weight: 600;
        font-size: 12px;
        color: #fff;
        content: "Mood";
    }
    
    .mood p{
        font-family: Rubik;
        padding: 8px;
        color: #000;
    }
    
    .profile .contact .heading, .profile .table-section .heading, .home-actions .heading {
        background-image: url(https://i.imgur.com/CKX2NUO.png), linear-gradient(to right, #0c1058, #adcbe1);
        background-repeat: no-repeat;
        background-position: right;
    }
    
    .profile .contact, .profile .url-info, .profile .table-section, .home-actions {
        border: 0px;
    }
    
    .contact {
        background: #cfccc2;
    }
    
    .url-info {
        background: #cfccc2;
    }
    
    .url-info p{
        font-family: Rubik;
        color: #000;
    }
    
    .details-table {
        background: #cfccc2;
    }
    
    .table-section {
        background: #cfccc2;
    }
    
    .details-table td {
    }
    
    .details-table p {
        font-family: Rubik;
        color: #000;
    }
    
    .profile-info {
        background: #cfccc2;
    }
    
    .blog-preview {
        background: #cfccc2;
    }
    
    .blog-preview h4 {
        background-image: url(https://i.imgur.com/CKX2NUO.png), linear-gradient(to right, #0c1058, #adcbe1);
        padding: 2px 7px;
        background-repeat: no-repeat;
        background-position: right;
    }
    
    .blog-preview p {
        margin: 8px;
        font-family: Rubik;
        color: #000;
        font-weight: 500;
    }
    
    .blurbs {
        background: #cfccc2;
    }
    
    .profile .blurbs .heading {
        background-image: url(https://i.imgur.com/CKX2NUO.png), linear-gradient(to right, #0c1058, #adcbe1);
        background-repeat: no-repeat;
        background-position: right;
    }
    
    .profile .blurbs .section h4 {
        color: #000;
        font-weight: 600;
    }
    
    .profile .blurbs .inner {
        font-family: Rubik;
    }
    
    .friends {
        background: #cfccc2;
        margin-bottom: 20px;
    }
    
    .profile .friends .heading {
        background-image: url(https://i.imgur.com/CKX2NUO.png), linear-gradient(to right, #0c1058, #adcbe1);
        background-repeat: no-repeat;
        background-position: right;
    }
    
    .profile .friends .heading a {
        padding-right: 2px;
    }
    
    div.friends:nth-of-type(3) > div.inner:nth-child(2) > p:first-child > b:first-child {
        font-family: Rubik;
        color: #000;
    }
    
    .profile .friends .inner {
        background: #cfccc2;
    }
    
    #comments .inner {
        height: 1000px;
        overflow: auto;
    }
    
    #comments > div.inner:nth-child(2) > p:first-child > b:first-child {
        font-family: Rubik;
        color: #000;
    }
    
    .comments-table td {
        font-family: Rubik;
    }
    
    .comments-table td * {
        font-family: Rubik;
        color: #000;
    }
    
    footer {
        background: #cfccc2;
        margin-bottom: 20px;
    }
    
    footer p {
        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 0 of 0 comments ( View all | Add Comment )