Whimsy

Tags: simple, layout, brown, pink, cute, pastel

Description:

If you use this layout please leave me a shoutout below! I would like to know what you think.

DO NOT remove any of the credits or copyrights from inside the code.

You Can NOT Use This Layout As A Base For Your Layouts!!!

Background Image from Vector Stock, I believe, I have had this background a while and don't remember where it came from 100%. Though I am pretty sure it is from vector stock.

Preview:

Code:

<!-- (c) Layout created by Coffee Queen (https://layouts.spacehey.com/layout?id=28641) --> <style> /*==========⚠️========== * Whimsy background from Vector Stock, I believe, I have had this background a while. ============⚠️========*/ /* cursors */ a:hover{ cursor: url('https://ani.cursors-4u.net/symbols/sym-8/sym749.cur'), auto; } * { cursor: url('https://cur.cursors-4u.net/nature/nat-4/nat320.png'), auto; } </style> <style> @import url('https://fonts.googleapis.com/css2?family=Playfair+Display&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Indie+Flower&display=swap'); :root{ --headers: #473c35; --links: #ffa0c0; --text: #fecce5; --names: #FFFFFF; --background_image: url("https://photos.smugmug.com/JaguarKisses/Spacehey/Backgrounds/i-h4Crz54/0/84eb2355/O/blah.png"); --font-family: 'Playfair Display', serif; --mynamesize: 35px; --curve: 25px; --simple_bg: #8d8578; --logo-blue: transparent; --darker-blue: transparent; --lighter-blue: transparent; --even-lighter-blue: transparent; --lightest-blue: transparent!important; --dark-orange: white!important; --light-orange: transparent; --even-lighter-orange: transparent; --green: transparent; } h3, h4, h5, .url-info b{ color: var(--headers) !important;} /* headings*/ a{color: var(--links) !important;} /* color of links */ p, h2{color: var(--text) !important;} /* color of text */ h1, .count, .friends a p{color: var(--names) !important;} /* color of names, and friends counter */ nav label{color: var(--headers) !important;} /* color of search */ .section h4{color: var(--names) !important;} /* aboutme & want2meet headings */ .online{color: var(--links) !important;} /* color of the 'online' text */ .section{color: var(--text) !important;} /* sometimes <p> is broken by embeds maybe. */ h2, h3, h4, h5, a, nav label{ font-family: var(--font-family) !important; text-transform: uppercase !important; font-size: 11px; text-shadow:0px 0px white !important; text-align: center; } p, .section{ font-family: var(--font-family) !important; font-size: 10px; } .section h4{ font-size: 12px; text-align: center; padding: 2px; border: 1px outset var(--text) !important; } h1{ font-size: var(--mynamesize) !important; font-family: 'Indie Flower', cursive; text-transform: none !important; padding-left: 10px !important; } body { background-image: var(--background_image) !important; background-color: black !important; background-attachment: fixed !important; } .search-wrapper input[type=text] { background-color: var(--simple_bg) !important; border: 1px outset var(--text) !important; color: var(--names) !important; } button{ border: 1px outset var(--text) !important; font-family: var(--font-family) !important; background-color: var(--simple_bg) !important; color:var(--headers) !important; } nav img.logo{ filter: invert(81%) sepia(76%) saturate(150%) hue-rotate(284deg) brightness(101%) contrast(50%) !important; } nav{ background-color:var(--simple_bg); !important; border-radius: var(--curve) var(--curve) 0px 0px; } nav ul{ background-color: var(--simple_bg) !important; } nav img{ filter: opacity(80%) !important; } nav ul a img, .mood a img, .online{ display:none !important; } .top, nav .links{ background:none !important; background-color: var(--simple_bg); !important; text-align: center; display: flex; flex-wrap: wrap; justify-content: space-around; font-size: 10px; } nav .links li:not(:last-child)::after, footer .links li:not(:last-child)::after{ content: " ❀ "; color: var(--links); } .profile-pic img{ border-radius: var(--curve) !important; filter: sepia(100%) hue-rotate(260deg); } .mood, .url-info{ text-align: center; } .friends-grid img{ outline:none !important; width:80% !important; height:80% !important; border-radius: var(--curve) !important; filter: sepia(100%) hue-rotate(260deg); } .inner img{ outline:none !important; border-radius: var(--curve) !important; filter: sepia(100%) hue-rotate(260deg); } .count{ color: var(--text); } .contact .inner a img { display: none; } .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: "❀" } main{ background-color: var(--simple_bg); } .profile .profile-info{ background-image: var(--background_image); background-position: center top; background-size: 25%; border: 1px outset var(--text) !important; } .friends th, tr, .friends td, th, .icon, #comments, .comments-table, .friends, .profile-info, .table, .table-section, .contact, .url-info, .mood, .blurbs, .blog-preview{ border: 1px outset var(--text) !important; } .profile .contact .heading, .profile .table-section .heading, .profile .blurbs .heading, .profile .friends .heading{ border: 1px outset var(--text) !important; text-align: center; padding: 2px; } #comments, .comments-table, .comment-replies{ border: 1px outset var(--text) !important; font-size: 10px; } footer{ background-color: var(--simple_bg) !important; margin-top: -15px!important; border-radius: 0px 0px var(--curve) var(--curve); } </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.