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:

click on the image for a larger 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.

Comments

Displaying 6 of 6 comments ( View all | Add Comment )

Zephyr	1743965288 Using !! :3 Report Comment
Taylor<33	1742577433 Using! Report Comment
norah !!	1740131389 usingggg Report Comment
zoya☮️	1738318652 Using:)) Report Comment
Friendly Neighborhood Faery	1680754688 using it! its very pretty thank you <3 Report Comment
alex ౨ৎ	1680656298 using Report Comment