Strawberry Patch

Tags: simple, layout, cute, pink, white, green, red, strawberry

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 Vecteezy.

Preview:

click on the image for a larger preview

Code:

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

<style>
/*==========⚠️==========
* Strawberry background from Vecteezy.
============⚠️========*/

/* cursors */
a:hover{
    cursor: url('http://www.rw-designer.com/cursor-extern.php?id=155997'), auto;
}
* {
    cursor: url('http://www.rw-designer.com/cursor-extern.php?id=156001'), 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: #68912a;
  --links: #d70807;
  --text: #219e07;
  --names: #f6bbbd;
  --background_image: url("https://photos.smugmug.com/JaguarKisses/Spacehey/Backgrounds/i-2VRPkFV/0/ef0e7098/O/FcdRoA9.png");
  --font-family: 'Playfair Display', serif;
  --mynamesize: 35px;
  --curve: 25px;
  --simple_bg: #dae59f;
  --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-align: center;
  text-shadow: 0px 0px white !important;
}

p, .section{
  font-family: var(--font-family) !important;
  font-size: 10px;
}

.section h4{
  font-size: 12px;
  text-align: center;
  padding: 2px;
  border: 4px solid var(--text);
  border-style: double;
}

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: #f6bbbd !important;
  background-attachment: fixed !important;
}

.search-wrapper input[type=text] {
  background-color: var(--simple_bg) !important;
  border: 4px solid var(--text);
  border-style: double;
  color: var(--names) !important;
}

button{
  border: 4px solid var(--text);
  border-style: double;
  font-family: var(--font-family) !important;
  background-color: var(--simple_bg) !important;
  color:var(--headers) !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: 4px solid var(--text) !important;
  border-style: double !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: 4px solid var(--text) !important;
  border-style: double !important;
}

.profile .contact .heading, .profile .table-section .heading, .profile .blurbs .heading,
.profile .friends .heading{
  border: 4px solid var(--text) !important;
  border-style: double !important;
  text-align: center;
  padding: 2px;
}

#comments, .comments-table, .comment-replies{
  border: 4px solid var(--text) !important;
  border-style: double !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 7 of 7 comments ( View all | Add Comment )

juneau🍒	1707887357 using~!! Report Comment
𝜗𝜚 ☆ 𝜗𝜚	1705948125 SAVINGGGGGGGGGGG Report Comment
jojo	1683058955 using this 🫶 ty for sharing ! Report Comment
xoxo	1682783907 cute using!!! Report Comment
𝕽𝖔𝖇𝖇𝖎𝖊	1682095540 Useing!! Report Comment
philia	1680950756 hii do u know how i can add a gif to the contact section instead of the flower emoji? Report Comment replace content: "❀" with content: url('image url here') you will want to have the image like 13 to 16 pixels. That is roughly how big the original images are for the site. If it is bigger then that you will want to play with the font sizes. by Coffee Queen; 1681157667; Report tysm! by philia; 1681165722; Report your welcome! by Coffee Queen; 1681219787; Report