Donuts

Tags: fun, cute, colorful, colors, donuts, simple, pink, blue

Description:

layout by cristiana

A fun donut-themed layout for your page.

Click here to view it live on my blog and give kudos if you feel like it.

Leave a comment somewhere if you like it and you think I should know.

Preview:

click on the image for a larger preview

Code:

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

<style>
@import url('https://fonts.googleapis.com/css2?family=Fredoka+One&display=swap');
:root {
    --darkbrown: rgb(110,53,15);
    --lightbrown: rgb(197,117,40);
    --pink: rgb(238,83,143);
    --blue: rgb(41,182,209);
    --yellow: rgb(246,212,12);
    --orange: rgb(238,91,21);
    --gray: rgb(227,218,206);
    --lightgray: rgb(235,233,232);
    --newgreen: rgb(157,192,30);
}
body {
    background: url("https://i.postimg.cc/bw11H2kt/powdered-donut-dessert-background-donuts-little-love-hearts-seamless-pattern-doughnut-bakery-tasty-1.jpg");
    font-family: 'Fredoka One', cursive;
    font-size: 16px;
    letter-spacing: .5px;
}
main {
    color: var(--darkbrown);
}
.profile-info {
    background: url("https://i.postimg.cc/bw11H2kt/powdered-donut-dessert-background-donuts-little-love-hearts-seamless-pattern-doughnut-bakery-tasty-1.jpg");
    font-size: 20px;
    padding: initial;
    letter-spacing: 1px;
}
.contact, .url-info, .table-section, .blurbs .heading, .friends .heading, td, .comment-replies, .profile-info {
    border-radius: 5px!important;
}
h4 {
    letter-spacing: 1.5px;
}
a {
    color: var(--orange);
}
a:hover {
    color: var(--yellow)!important;
    text-decoration: none!important;
    text-transform: uppercase;
}
button {
    border: 0;
    border-radius: 15px;
    font-family: inherit;
}
nav .top {
    background: var(--darkbrown);
}
nav .top .center form button {
    background: var(--yellow);
    color: var(--darkbrown);
    cursor: pointer;
}
nav .links {
    background: var(--lightbrown);
}
nav .links li:not(:last-child)::after {
    color: white;
}
.profile h1 {
    text-transform: uppercase;
    font-size: 34px;
    color: var(--blue);
}
.profile-info {
    border-color: var(--yellow);
}
.profile-info .inner {
    width: 100%;
    height: 100%;
    background: rgba(255,255,255,0.5);
}
.profile-info > div > h3 > a {
    color: var(--yellow);
    letter-spacing: 3px;
    font-size: 34px;
}
.profile .contact, .profile .url-info, .profile .table-section, .home-actions {
    border-color: var(--pink);
}
.profile .contact .heading, .profile .table-section .heading, .home-actions .heading {
    background: var(--pink);
}
.profile .blurbs .heading, .profile .friends .heading {
    background: var(--blue);
    color: white;
}
.details-table td {
    background: var(--lightgray);
}
.details-table td:first-child {
    background: var(--gray);
    color: var(--orange);
}
.profile .friends .person p {
    color: var(--lightbrown);
}
.comments-table td:first-child, .music-table td:first-child {
    background: var(--gray);
}
.comments-table td, .music-table td, footer {
    background: var(--lightgray);
}
.comments-table button {
    background: var(--newgreen);
    padding: 5px;
    color: white;
}
footer {
    color: var(--darkbrown);
}
footer .links li:not(:last-child)::after {
    color: var(--darkbrown);
}
#credit {
    position: fixed;
    bottom: 3px;
    left: 3px;
    font-family: sans-serif;
    font-size: 10px;
    color: black;
    background: white;
    padding: 2px;
    border-radius: 2px;
    z-index: 5;
    letter-spacing: 1px;
}

@media screen and (max-width: 800px) {
    main {
        background: transparent;
    }
    .col > div, .profile h1 {
        background: white;
        padding: 5px;
        margin-bottom: 15%;
        border-radius: 10px;
    }
    .profile h1 {
        text-align: center;
        margin-bottom: 10px!important;
    }
    .general-about {
        height: 26vh;
    } 
    .general-about, .mood, .blog-preview, .profile h1 {
        margin-bottom: 0px;
        border: 2px solid var(--pink);
    }
}
</style>
<div id="credit">
    layout by <a href="https://www.spacehey.com/cristiana">cristiana</a>
</div>

A fun donut-themed layout for your page.

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 1 of 1 comments ( View all | Add Comment )

Melissa

1622906424

ty love this and using:)

Report Comment

No problem! This is one of my favorites enjoy!

by cristiana; 1623058444; Report