Petals and pastels

Tags: flowers, pastel, crashtestdummy, simple, basic, cute
Description:

simple layout
Preview:

click on the image for a larger preview
Code:

<!-- (c) Layout created by Crash Test Dummy (https://layouts.spacehey.com/layout?id=2669) -->


<style>
@import url('https://fonts.googleapis.com/css2?family=Kavivanar&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital@1&display=swap');
:root {
    --headers: cyan;
    --links: #795DB5;
    --text: turquoise;
    --names: plum;
    --font-family: 'Kavivanar', cursive;
    --curve: 0px;
    --borders: 5px double MediumPurple;
}
h3, h4, h5 {color: var(--headers) !important;} /* headings*/
a{color: var(--links) !important;text-shadow: 2px 2px 4px black;} /* color of links */
p, h2{color: var(--text) !important; text-shadow: 2px 2px 4px black;} /* color of text */
h1, .count, .friends a p{color: var(--names) !important;} 
nav label{color: var(--headers) !important;} /* color of search */
.online{color: var(--links) !important;} 
.online img {
    filter: brightness(0) saturate(100%) invert(37%) sepia(69%) saturate(407%) hue-rotate(218deg) brightness(96%) contrast(97%);  !important;
}
.section{color: var(--text) !important;} 
:root { --box_color_and_seethru: rgba(0, 0, 0, 0.0);}  
a, p, nav label, .section { 
    font-family: 'Libre Baskerville', serif;	
    text-transform:none !important;
    font-size: 12px;
}

h1 {
  font-family: 'Libre Baskerville', serif; 
  color: black;
  text-shadow: 1px 1px 2px black, 0 0 25px grey, 0 0 5px grey;
}
h2, h3, h4, h5{
    font-family: 'Libre Baskerville', serif;
    font-size: 20px;
}
h2, h3, h4, h5, p {
    padding-left:5px !important;
}
body {
    background: url("https://i.imgur.com/bRx9Zhz.gif"), url(https://i.imgur.com/ZwjTFQh.jpg);
    background-attachment: fixed;
    background-size: 20%, cover;
    background-color: black!important;
}   
.mood, .contact, .blurbs, .table-section, .profile-info{
    background: #00000066;
    background-size: 50%;
}
.heading, 
.friends, .table, footer{
    background: var(--box_color_and_seethru) !important;
    border-radius: var(--curve) !important;
    padding: 2px !important;
    border: none!important;
}
.heading, .section h4{
    background:none !important;
    padding: 10px !important;
    text-align:center!important;
}
DIV.mood P:nth-child(1) B, P:nth-child(2) B{ /* this changes the font for "View my" under the mood */
    color: MediumPurple!important;
    font-family: 'Libre Baskerville', serif;
    font-size: 16px;
    padding: 5px;
}
.friends-grid img{
    outline:none !important;
    filter: opacity(90%) !important;
    border-radius: var(--curve) !important;
    padding-right: 2px;
    padding-top: 2px;
    padding-left: 2px;
    padding-bottom: 2px;
    background-color: plum; 
}

/* hover over friends effect */

.profile .friends .person{
  transition: 0.5s;
  background: rgba(0,0,0,0.0);
}
.profile .friends .person{
    max-width: 25%;
    display: inline-grid;
    width: calc( 24% - 6px );
    padding: 9px;
}
.profile .friends .person p{
  color: #666666;
  font-weight: bold;
  width: 100%;
  word-break: break-word;
  font-size: 100%;
}
.profile .friends .person img:not(.icon){
    width: calc( 100% );
}
.profile .friends .person:hover {
    border-radius: 0px;
    transform: scale(1.2);
    animation: wob .5s linear infinite;
    background: url('https://i.imgur.com/vxc3wNk.jpg'), black;
    background-size: cover;
    box-shadow: 0 0 1rem plum;
    border: 0px solid red;
    transition: 0.5s;
}
.inner img{
    outline:none !important;
    border-radius: var(--curve) !important;
}

/* comments box scroll */

.comments-table {
    display: block;
    height: 800px!important;
    overflow-y: scroll;
    border: 0px double tan !important;
    outline: none !important;
    padding: 0px;
    margin: 0px;
    text-align: left;
    background: #00000066;
    background-color: rgba(0,0,0,0.5);
}
.comments-table td:first-child img {
    clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%);
    padding-left: 2px;
    padding-top: 2px;
    padding-bottom: 2px;
    background-color: plum;
}
.comments-table td:first-child{
    
}
.comments-table td{

}
/* navigation */
nav {
    background: linear-gradient(to right, transparent, 5%, rgba(10,12,94,0.5), 95%, transparent);
    border-radius: 0px 0px var(--curve); !important;
}
nav ul {
    background:none !important;
    text-align: center;
}
.top {
    color: turquoise;
    background:none !important;
    background-color:rgba(0, 0, 0, 0.0); !important;}
nav img.logo{
    filter: brightness(0) saturate(100%) invert(37%) sepia(69%) saturate(407%) hue-rotate(218deg) brightness(96%) contrast(97%); !important;}

/* line that appears between links */
nav .links li:not(:last-child)::after,
footer .links li:not(:last-child)::after{
 content: " | ";
 color: turquoise;

}

td {
    background-color:rgba(0, 0, 0, 0.0) !important;
    border-radius: var(--curve) !important;}
main{border-radius: var(--curve) !important;}
main{
    background: linear-gradient(to right, transparent, 5%, rgba(10,12,94,0.5), 95%, transparent);
    padding:20px;
}
.friends th, tr, .icon, .friends, .table, .table-section, .contact, .mood, 
.blurbs, .profile-pic img {
    border: var(--borders)!important;
    outline: none !important;
    border-radius: var(--curve);
}
.profile-info {
    border: var(--borders)!important;
    text-align: center;
}
.blog-preview{
    border: var(--borders);
    background: #00000066;
    background-repeat: repeat-x;
    background-size: 40%;
    background-position: top;
    padding:1px;
}
/* blog image */
.blog-preview :not(:first-child) {
    width: 110px;
    text-align: center;
    display: inline-block;
    padding-right: 15px;
}
.blog-preview :not(:first-child):before {
    content: "";
    display: block;
    width: 98px;
    height: 70px;
    background: url(https://i.imgur.com/xz4KBa2.gif);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}
.blog-preview{text-align:center;}
.icon{border:none !important;}
.mood{margin-bottom:10px !important;text-align:center;}
.blurbs{margin-top:10px !important;}
.friends{margin-top:10px !important;text-align:center;}
.profile-info{border-radius: var(--curve) !important;}
.comments-table{border-radius: var(--curve) !important;border:none !important;}
.comment-replies{border: 2px solid MediumPurple;}
.table-section{padding-bottom:2px !important;}
#comments{margin-top:15px !important;padding-bottom:15px !important}
.contact, .f-row, .f-col{
    padding-left:0px !important;
    margin-left:0px !important;
    margin-right:0px !important;
    padding-right:0px !important;}
.contact{padding-left:2px !important;}
.f-row{margin-bottom:3px !important;
    padding-bottom:0px !important;
    padding-top:2px !important;
    margin-top:4px !important;}
.f-col a{margin-left:4px !important;padding-left:-2px !important;}
.contact{padding-bottom:12px !important;}
.search-wrapper input[type=text] {
    background-color: rgba(0, 0, 0, 0.0) !important;
    border: 1px dotted #795DB5 !important;
    color:var(--names) !important;
    border-radius: var(--curve) !important;
}
button{
    border-radius:var(--curve)!important;
    border: 0px dotted var(--headers) !important;
    font-family: var(--font-family) !important;
    background-color:rgba(0, 0, 0, 0.0) !important;
    color:var(--headers) !important;
}
footer{
    background: linear-gradient(to right, transparent, 5%, rgba(10,12,94,0.5), 95%, transparent)!important;
    margin-top: 0px;
}
/*=== contact ===*/
.contact a{
    color: MediumPurple!important;
    text-shadow: 1px 1px 3px black!important;
}
.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:  "\2698" ;
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {
	/* add to favorites */
	content: "\2698" ;
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {
	/* Send Message */
	content: "\2698" ;
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {
	/* forward to friend */
	content: "\2698" ;
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {
	/* instant message */
	content: "\2698" ;
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {
	/* block user */
	content: "\2698" ;
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {
	/* add to group */
	content: "\2698" ;
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
	/* report user */
	content: "\2698" ;
}
hr{
    border: 1px solid cyan;
    width: 50%;
}
/* hidden things */
.blurbs .heading {display:none;} /*hides the blurbs heading */
.profile .left .table-section:last-child {display:none;} /* hides the links. delete this if you have links */
.details-table td:first-child{display:none;} /*hides the general/music/heroes titles */
.url-info{display:none;} /*hides the url box */

</style>
<style>
/* forces scrollbar styles onto browser */
body {margin-bottom: fixed;}
.myBox {
    border: none;
    padding: 5px;
    font: 24px/36px sans-serif;
    width: 200px;
    height: 200px;
    overflow: scroll;}
::-webkit-scrollbar {width: 12px;height: 12px;}
::-webkit-scrollbar-track {
    border-radius: 10px;
    width: 2px;
    border: 1px solid MediumPurple;}
::-webkit-scrollbar-thumb {background: plum;border-radius: 10px;}
::-webkit-scrollbar-thumb:hover {background: pink;}
</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 )
Mel	1636771655 Cute. Report Comment
Kat	1633112241 Cute. Report Comment
OrigaFirebird	1631701719 This is a very lovely layout! Definitely will use sometime! Report Comment
Paganinjedi	1620904630 Flowers Report Comment
Froggy Witch	1619430748 I like this one, it looks pretty Report Comment
Josh	1617845015 I have to agree. This could be the prettiest layout I've ever seen. Thank you. Report Comment No problem by Crash Test Dummy; 1617856378; Report