CttCore-Woods

Tags: cottagecore, woods, green, soft green, pink, clean, simple

Description:

It's a green layout :)

you can put this code into your about me.

I have the blog css layout here

check out my blog for more info or questions or comments ~

Preview:

click on the image for a larger preview

Code:

<!-- (c) Layout created by Bela 🔊⬆ (https://layouts.spacehey.com/layout?id=34936) -->

<style>
  @import url('https://fonts.googleapis.com/css2?family=Fleur+De+Leah&family=Oranienbaum&display=swap');
</style>

<style>
/* mobile code, don't delete */
@media(max-width: 30em){
  .blog-preview:after{
    display: block;
    content:"";
    height:180px;
    margin-top:-175px;
    margin-right:30px!important;
    border-bottom:3px solid #F7FAF7!important;
    border-top:3px solid #F7FAF7!important;
    box-shadow: DarkSeaGreen 4px 0px!important;
}  
.blog-preview h4{padding-left:0px!important;}
.blog-preview p{padding-left:10px!important;}
h1{text-align: center;}
}
/* ~~~~ */
</style>

<style>

/* fonts and colors */
.icon{ font-size:11px!important;}

a{
    color: #8A8178;
    font-family: 'Oranienbaum', serif;
    font-size: 13px!important;
}
p, b, .count, nav label, nav .top, button{
    color:#314539;
    font-family: 'Oranienbaum', serif;
    font-size: 13px!important;
}
nav .links a{
    text-shadow: none;
    color:#97AF97;
}
.blog-preview p a, .section h4{ 
    color:#DBC585!important;
}
a:hover{ 
    text-decoration:none!important; 
    color:limegreen!important;
}
h1{
    color:#314539;
    font-family: 'Fleur De Leah', cursive;
    font-size: 40px!important;
    font-weight:1;
    padding-left:20px;
}
h2, h3, h4{
font-family: 'Oranienbaum', serif;
font-size: 13px!important;
letter-spacing: 1px;
color:DarkOlivegreen;
}
.mood p b{
    font-family: 'Fleur De Leah', cursive;
    font-size:18px!important;
    font-weight: 1;
}
.friends .person p{
    font-family: 'Fleur De Leah', cursive;
    letter-spacing: 1px;
    font-size: 16px!important;
    text-transform:lowercase;
}
body {
    background-color: #F7FAF7;
    background-image: url("https://e1.pxfuel.com/desktop-wallpaper/166/283/desktop-wallpaper-cottagecore-spring-cottagecore.jpg");
    background-size:50%;
}

/* nav area */
nav .top{
    background-color: #559955;
    color:#445533;
    letter-spacing: 1px;
}
nav .top button{
    background-color: #559955;
    color:#445533;
    letter-spacing: 1px;
    border:none;
}
nav .links{
    background-color: #607560;
    border-radius: 0px 0px 10px 10px;
    text-align: center;
}

/* this is the logo color. 
To change the color go to https://codepen.io/sosuke/pen/Pjoqqp
if you need more help check my blog https://blog.spacehey.com/entry?id=5523 */
nav img.logo{
    filter: brightness(0) saturate(100%) invert(24%) sepia(6%) saturate(4470%) hue-rotate(47deg) brightness(91%) contrast(68%)!important;
}
/* this is the search box */
[id='q']{
    border:1px solid green;
    background-color: rgba(85, 107, 47, 0.1);
    border-radius: 3px;
    color:lime;
}

main{
    background-color: #F7FAF7;
    margin-top:30px;
    border-radius:13px;
}

/* left side */
.details p{
    text-align: justify;
}
.profile-pic img{
    border-radius: 5px;
}
.mood p:after{
    display: inline;
    content:" ₊*   .:°";
    color: #9EABBE;
    font-weight: bold;
    font-family: "Arial";
}
.online {
  font-family: 'Fleur De Leah', cursive;
  text-transform: lowercase;
  letter-spacing: 1px;
  font-size: 16px!important;
}
.online img{
  content: url('https://64.media.tumblr.com/fdc4a2d4b2b0efd470396fed5339f436/9cd7c663e33f0456-06/s75x75_c1/17d7a3e483283ff49da2d460d7f161bf35f5b21b.gifv');
  animation: none;
}

/* contact area */
.contact .heading{
    background-color: transparent!important;
    padding:0px!important;
    margin-bottom: 20px;
}
.contact h4{
    border-top:3px solid DarkSeaGreen;
    border-left:3px solid DarkSeaGreen;
    border-radius: 15px 0px 0px 0px;
    padding-left:5px;
    padding-top:5px;
}
.contact{
    border:none!important;
    border-spacing: 0px 3px;
}
.contact .inner{
    padding-left:20px;
    padding-right:20px;
}

/* the url box where you can add a picture */
.url-info{
    background-image: url("https://media.tenor.com/2LmQ0ZyvHRcAAAAC/cottage-core-butterflies.gif");
    background-size: 100%100%;
    border:none!important;
    border-radius: 5px;
    height: 170px;
    margin-top:30px!important;
    margin-bottom:30px!important;
}
.url-info p{
    opacity:0.0; /* hide the url text */
}

/* the interests table */

.table-section .heading{
    background-color: transparent!important;
    padding:0px!important;
    margin-bottom:10px;
}
.table-section h4{
    border-top:3px solid DarkSeaGreen;
    border-left:3px solid DarkSeaGreen;
    border-radius: 15px 0px 0px 0px;
    padding-left:5px;
    padding-top:5px;
}
.table-section{
    border:none!important;
    background-color: transparent;
}
.table-section .inner{
    padding:0px 10px;
}
.details-table{
    border-spacing: 0px 10px; /* adds space between each section*/
}
.table-section td:first-child{
    background-color: #D8E5D1;
    text-align: center;
    letter-spacing: 1px;
    border-radius: 5px 0px 0px 5px;
}
.table-section td:nth-child(2){
    background-color: #BFD9AF;
    border-radius: 0px 5px 5px 0px;
}


/* the right side 
.profile-info says "SoSo is your friend"
or "edit profile" */
.profile-info{
   display: none;
}

/* the blog-preview */

/* this is the image above the blog posts */
.blog-preview:before{
    display: block;
    content:"";
    background-image: url("https://i.pinimg.com/originals/e5/e9/45/e5e945308b555af9ec5e2795483795e3.gif");
    background-size: 100%100%;
    border:5px solid #F7FAF7;
    border-radius: 13px;
    outline:3px solid DarkSeaGreen;
    outline-offset: 5px;
    height:150px;
    margin-top:10px;
    margin-left:5px;
    margin-right:5px;
}

/* this is the green line next to the blog titles */
.blog-preview:after{
    display: block;
    content:"";
    height:170px;
    margin-top:-178px;
    margin-right:35px;
    box-shadow: DarkSeaGreen 3px 0px;
}

/* this is some styling before the blog titles. 
you can delete this code if you don't want 
anyhting to appear infront of the blog titles*/
.blog-preview p:before{
    content: "°:. *₊";
    color: #9EABBE;
    font-weight: bold;
    font-family: "Arial";
    display: inline-block;
    margin-right:5px;
}

/* adding some indents*/
.blog-preview h4{padding-left:10px;}
.blog-preview p{padding-left:25px;}

/* blurbs area */
.blurbs .heading{
    background-color: transparent!important;
}
.blurbs h4{
    border-top:3px solid DarkSeaGreen;
    border-left:3px solid DarkSeaGreen;
    border-radius: 15px 0px 0px 0px;
    padding:7px;
}
.section h4{
    border:none;
}
.blurbs .inner{
    padding:0px!important;
    margin:20px;
    margin-top:0px;
}

/* about me section */
.section:nth-child(1){
    text-align: justify;
    letter-spacing: 1px;
    overflow-y: scroll;
    height:200px;
    padding: 5px;
}
/* who I'd like to meet section */
.section:nth-child(2){
    text-align: justify;
    letter-spacing: 1px;
    overflow-y: scroll;
    height:200px;
    padding:5px;
}

/* friends area */
.friends .heading{
    background-color: transparent!important;
}
.friends h4{
    border-top:3px solid DarkSeaGreen;
    border-left:3px solid DarkSeaGreen;
    border-radius: 15px 0px 0px 0px;
    padding:7px;
}
.friends-grid{
  text-align:center;
  padding:0px!important;
}
/* the comments table */

.comments-table{
    border-spacing: 0px 10px; /* adds space between each section*/
    border:none;
    padding:0px 10px;
}
.comments-table td{
    border:none;
}
.comments-table button{
    background-color: transparent;
    border:3px solid DarkSeaGreen;
    border-radius: 5px;
    margin:3px;
}
/* side where friends profile pic appears */
.comments-table td:first-child{
    background-color: #D8E5D1;
    text-align: center;
    letter-spacing: 1px;
    border-radius: 5px 0px 0px 5px;
}
.comments-table td:first-child img{
    border-radius:5px;
}
/* side where comments appear */
.comments-table td:nth-child(2){
    background-color: #BFD9AF;
    border-radius: 0px 5px 5px 0px;
}

/* .comment-replies is the entire box where friends reply to comments and 
.comment-reply targets a single comment */

.comment-replies{
    border: 3px solid rgba(143, 188, 139, 0.5);
    border-radius: 5px;
    margin:10px;
}
/* the vine image between comment replies */
.comment-reply:not(:first-child):before{
    display: block;
    content:"";
    background-image: url("https://i.ibb.co/C5NBsLd/vines.png");
    background-size: 30%;
    height: 30px;
    width: 100%;
    margin-top:-30px;
}
.comment-reply{
    border:none!important;
}

footer{
    background-color: transparent;
}

/* scrollbar styles */

::-webkit-scrollbar {
    width: 1px;
    height: 4px;
}
::-webkit-scrollbar-track {
    border: 1px solid DarkSeaGreen;
}
::-webkit-scrollbar-thumb {
    background: DarkSeaGreen; 
}
::-webkit-scrollbar-thumb:hover {
    background: black;  
}
</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 )

Ann	1700067396 the images in the background don't appear to me, is it something i did wrong? Report Comment
Johna	1699542908 So pretty! Report Comment
dia☆	1696608903 using!! Report Comment
janebug	1695681786 Using :3 Report Comment
Jasmine	1692482674 This is so pretty!! :D Report Comment
Sparks	1691016907 This is very pretty! Using :) Report Comment