cosy nature layout
Author: batshybea
Category: nature
Created: August 15, 2026
Downloads: 2
nature-y themed!
Live Preview
Layout CSS
<style>
/* ==========================================
COLOR PALETTE REFERENCE: COLORS GO HERE!!
Cornsilk Base: #FEFAE0 | Black Forest Text: #283618
Sunlit Clay: #DDA15E | Olive Leaf Background: #606C38
Fern: #588157 | Dry Sage: #A3B18A
Dust Grey: #DAD7CD
========================================== */
body {
background-image: url("https://friendrewind.com/media/photos/photo-b1fe8d90362a4ff5.webp");
background-position: center center;
background-size: cover;
background-attachment: fixed;
font-family: Georgia, serif;
color: #3C096C;
}
/* MAIN TEXT - KINDA BUGGY */
main,
main p,
main span,
main div,
main td,
main li {
color: #283618;
}
/* BOLD TEXT IN COMMENTS */
.inner b {
color: #283618;
}
/* NAV */
nav .top {
background-color: #FFF59D;
}
nav .links {
background-color: #FFF59D;
text-align: center;
border-radius: 4px 4px 0 0;
background-position: center;
background-repeat: no-repeat;
}
nav .links a {
color: #283618;
}
/* HEADER */
.myspace-header .top-nav,
.myspace-header .main-nav-wrapper {
background: #FEFAE0 url("https://friendrewind.com/media/photos/photo-4b2d481e65963347.webp") repeat center;
}
.myspace-header .main-nav li a {
color: #283618;
}
.myspace-header .main-nav li a:hover {
color: #FF007F;
}
/* BUTTONS */
button {
color: #FFF59D;
background-color: #FEFAE0;
border: 1px solid #FF007F;
}
/* COMMENT BUTTONS */
.comments button,
.comment-form button,
input[type="submit"] {
background-color: #FEFAE0 !important;
color: #283618 !important;
border: 1px solid #FF007F !important;
}
/* HOVER EFFECT - NO IDEA WHAT THIS DOES */
.comments button:hover,
.comment-form button:hover,
input[type="submit"]:hover {
background-color: #FEFAE0 !important;
color: #283618 !important;
border-color: #FEFAE0 !important;
}
/* COMMENT COUNT */
.count {
color: #283618;
}
/* LINKS */
a {
color: #283618;
text-decoration: none;
}
a:hover {
color: #FEFAE0;
text-decoration: underline;
}
/* FOOTER AT THE BOTTOM */
footer {
background-color: #FEFAE0;
}
footer p {
color: #FEFAE0;
}
footer .links {
color: #283618;
}
/* TABLES - NO IDEA WAHT THIS DOES */
.comments-table td:first-child,
.comments-table td,
.comment-replies,
.details-table td:first-child,
.details-table td {
background: #FEFAE0;
color: #283618;
}
/* EDIT INFO AT THE TOP (?) */
.edit-info {
background-color: #FEFAE0;
border: 1px solid #283618;
}
/* BLOG */
.blog-entry .title {
background-color: #FEFAE0;
color: #283618;
padding: 5px;
}
.blog-entry .content {
background-color: #FEFAE0;
padding: 10px;
}
/* MAIN LAYOUT */
main {
background-color: #FEFAE0;
}
main .left {
background-image: url("https://friendrewind.com/media/photos/photo-f89f053502eacf28.webp");
background-size: cover;
}
main .right {
padding: 1px;
background-color: #DDA15E;
}
/* LEFT ICONS */
p.links a:first-child .icon {
content: url("https://mocha.crd.co/assets/images/gallery17/db890fa1_original.gif?v=667e73fe");
width: 25px;
height: auto;
visibility: visible;
}
p.links a:nth-child(2) .icon {
content: url("https://mocha.crd.co/assets/images/gallery24/c0c69233_original.gif?v=667e73fe");
width: 25px;
height: auto;
visibility: visible;
}
p.links a:last-child .icon,
table.comments-table td .icon {
content: url("https://mocha.crd.co/assets/images/gallery17/074c33ae_original.gif?v=667e73fe");
width: 25px;
height: auto;
visibility: visible;
}
</style>
Comments (0)
No comments yet. Be the first!
Log in to leave a comment.