Simple Grey

Tags: cute simple layouts layout white

Description:

It's a very simple Grey layout, as described. I added a few cutesy details, like a bow notification and the bunny cursor, but they can be taken out easily! I changed the sections from 'General, Music, Movies, Television, Books, Heroes' to 'General, Music, Movies/TV, Games, Fandoms, Characters' because I noticed that many people struggled with the original categories, but they can be easily changed by deleting some of the bottom code :D I've only started using HTML and CSS a few days ago, so sorry that the code is so messy! To use this layout, copy and paste the code into the specified sections.

Preview:

Code:

<!-- (c) Layout created by Suneater (https://layouts.spacehey.com/layout?id=105498) --> --- Put the following in the 'About Me' Section! --- <style> nav .top {background-color: #c6c6d6;} nav .links {background-color: #ffffff;} .links a{color: #aaaaba !important;} .profile.blurbs.section h4{color: #aaaaba;} .top.input{border: 1px solid #aaaaba;} .logout-btn{color: #ffffff !important;} nav .links a {text-shadow: 0 0 7px #ffffff8c;} body {background-color: #ffffff;} nav .top {border: 1px solid #aaaaba;} .col.right .profile-info {background-color: #ffffff;} .col.right .profile-info {border: 1px solid #aaaaba;} .details {color: #74768c;} main {background-color: #e1e5eb;} main {border: 1px solid #aaaaba !important;} .col.w-40.left {color: #74768c;} .blog-preview {color: #74768c;} .inner {color: #74768c;} p.online {font-size: 0px;} p.online::after{content: "online ♡ "; color: #74768c; font-size: 12px;} text-shadow: 0 0 9px #dce1f0; .online{color: #ffffff; !important;} .profile .contact, .profile .table-section, .profile .url-info { border: 1px solid #aaaaba;} .profile .contact, .profile .table-section, .profile .url-info { background-color: #ffffff;} .profile .contact .heading, .profile .table-section .heading, .home-actions .heading {background-color: #c6c6d6; color: #ffffff;} .profile .table-section .details-table td {background-color: #e1e5eb; color: #74768c;} li.active .icon {content:url('https://i.postimg.cc/9FvDbBCv/White-Bow.png'); width: 20PX;height: 20px;} .profile .friends .person img:not(.icon) {filter: grayscale(90%);} .profile .comments .person img:not (.icon) {filter:grayscale(90%);} .profile .blurbs .heading, .profile .friends .heading {border: 1px solid #aaaaba;} .profile .blurbs .heading, .profile .friends .heading { background-color: #c6c6d6; color: #ffffff;} .comments-table td {filter: grayscale(90%);} .profile .friends .comments-table td {background-color: #ffffff;} .blurbs .inner {border: 1px solid #aaaaba;} .blurbs .inner {background-color: #ffffff;} .friends .inner {border: 1px solid #aaaaba;} .friends .inner {background-color: #ffffff;} table.comments-table{display: block;height: 250px!important;overflow-y: scroll;} contact .inner a img { font-size: 0; } .contact .inner a img:before { font-size: 1em; display: block } .contact .inner a img { font-size: 0; } .contact .inner a img:before { font-size: 1em; display: block } .contact .inner .f-row:nth-child(1) .f-col:nth-child(1) a:before { /* Add to Friends */ content: "🕊️" } .contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before { /* Add to Favorites */ content: "🤍" } .contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before { /* Send Message */ content: "🗨️" } .contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before { /* Forward to Friend */ content: "📻" } .contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before { /* Instant Message */ content: "✈️" } .contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before { /* Block User */ content: "⚪" } .contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before { /* Add to Group */ content: "🏛️" } .contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before { /* Report Profile */ content: "🏳️" } nav .links li:not(:last-child)::after, footer .links li:not(:last-child)::after{ content: url("https://i.ibb.co/rjlddb1/bullet1.gif") !important; padding-left: 4px !important; } nav .links li:not{content: url ("https://i.postimg.cc/DwnP5FvV/download-5-removebg-preview.png") !important;} A:link { color: #75809c; } A:visited { color: #9ca9c7; } A:active { color: #ffffff; } A:hover { color: #ffffff; } .blurbs .inner .section:first-of-type h4{ font-size:0; } .blurbs .inner .section:first-of-type h4:after{ content:"About Me:"; font-size:.8rem; color: #74768c; } .blurbs .inner .section:last-of-type h4{ font-size:0; } .blurbs .inner .section:last-of-type h4:after{ content:"Who I'd Like To Meet:"; font-size:.8rem; color: #74768c; } table, th, td { border: 0px solid; } :root { --topic1: "General"; --topic2: "Music"; --topic3: "Movies/TV"; --topic4: "Games"; --topic5: "Fandoms"; --topic6: "Characters"; } .table-section:not(:last-child) .details-table tr td:first-child p{color:transparent !important;text-shadow: none !important;letter-spacing: -100px;} .details-table tr td:first-child p::after{ color:var(--links) !important; letter-spacing:normal !important; text-shadow: 2px 2px #74768c !important; filter: brightness(95%) !important; } .table-section:not(:last-child) .details-table tr:nth-child(1) td:first-child p::after{ content: var(--topic1); } .table-section:not(:last-child) .details-table tr:nth-child(2) td:first-child p::after{ content: var(--topic2); } .table-section:not(:last-child) .details-table tr:nth-child(3) td:first-child p::after{ content: var(--topic3); } .table-section:not(:last-child) .details-table tr:nth-child(4) td:first-child p::after{ content: var(--topic4); } .table-section:not(:last-child) .details-table tr:nth-child(5) td:first-child p::after{ content: var(--topic5); } .table-section:not(:last-child) .details-table tr:nth-child(6) td:first-child p::after{ content: var(--topic6); } </style> --- Put the following in the 'Who I'd Like To Meet' Section! --- <style>* {cursor: url(https://cur.cursors-4u.net/nature/nat-11/nat1034.ani), url(https://cur.cursors-4u.net/nature/nat-11/nat1034.gif), auto !important;}</style><a href="https://www.cursors-4u.com/cursor/2012/01/29/bobblehead-bunny.html" target="_blank" title="Bobblehead Bunny"><img src="https://cur.cursors-4u.net/cursor.png" alt="Bobblehead Bunny" 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.