Guestbook Pink version 1

Tags: pink, blog code, guestbook, bela

Description:

copy and paste this code in your BLOG not your about me. :)

I repeat; this code is for a blog.

steps:

1. copy the code below.

2. Go to your blog and add the content before adding the code. whatever you want to put as the content is up to you. in the example, I just added, "What's your name? Where are you from?" but you can add anything you want.

2. then click the WYSIWIG button to switch to html and paste the code.

If these steps don't work for you, please switch to HTML before pasting the code :)

Preview:

click on the image for a larger preview

Code:

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

<style>
/* font */
@import url('https://fonts.googleapis.com/css2?family=Nothing+You+Could+Do&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Rock+Salt&display=swap');

:root{
  --gray: transparent; /* background color */
  --logo-blue: transparent; /* navigation background color */
  --lighter-blue: transparent; /* nav links background */
  --lightest-blue: transparent; /*sidebar background */
  --light-orange: transparent; /* comments table first child background */
  --even-lighter-orange: transparent; /* comments table second child background */
  --borders: 0px solid #000;
  --font-family: 'Nothing You Could Do', cursive;  /* this applies to the whole page. */
  --header: #9E1363;  /* color of titles */
  --text: #fff;  /* color of regular text */
  --othertext: #D1208F;  /* color of line that appears under the Kudos */
  --links: #AC1876;  /* color of links */
  --hover: plum;  /* color  of links on hover */
}

/*custom cursor */

* {cursor: url('https://img.icons8.com/material-rounded/24/ffffff/cursor.png'), auto !important;} 
a:hover {cursor: url('https://cdn.custom-cursor.com/db/8358/32/neon-angel-and-devil-cursor.png'), auto!important;}

body{
  background-color: var(--gray);
  background-image: url('https://i.imgur.com/wk5zg75.jpg');
  background-size: 100%100%;
  background-attachment: fixed;
  font-family: var(--font-family);
  font-size: 16px!important;
}

main{
  background: transparent;
  color: var(--text);
}

.icon{
    font-size: 12px!important;
    border: none!important;
}

a{
  color: var(--links);
  font-size: 16px!important;
}

a:hover{
  color: var(--hover);
  text-decoration: none!important;
  text-shadow: 0px 0px 5px black;
}

h2,h3,h4,h5{
    font-size: 16px!important;
}

nav{
  color: var(--links);
  border: var(--borders);
  background-color: var(--logo-blue);
  text-align: center;
}

/* this is the line that appears between links in the header and footer.
you can add an emoji or symbol instead of the default line it has */

nav .links li:not(:last-child)::after,
footer .links li:not(:last-child)::after{
  content: " 𝕩 ";
  color: var(--othertext);
  font-family: 'Rock Salt', cursive;
}

nav .links a{
  color: var(--links);
}

nav .links a:hover{
  color: var(--hover);
}

/* this is where you edit your blog entry */

.kudos{
    text-align: right;
}

.blog-entry .comments .heading{
  border-top: 2px solid var(--othertext); /* this is the line that appears under the kudos */
    text-align: right;
}

.blog-entry .title{
  background-color: var(--gray);
  color: var(--header);
  border: var(--borders);
  font-size: 40px!important;
  font-weight: 1;
  text-align: center;
  font-family: 'Rock Salt', cursive;
}

.blog-entry .content{
  background-color: var(--gray);
  border: none;
  font-family: var(--font-family);
  letter-spacing: 1px;
  font-size: 16px;
  text-align: center;
}

/* this is the spacehey logo color.
you can change it at https://codepen.io/sosuke/pen/Pjoqqp */

nav img.logo{
  max-width: 120px;
  filter: brightness(0) saturate(100%) invert(13%) sepia(87%) saturate(3802%) hue-rotate(309deg) brightness(94%) contrast(91%)!important;
}

/* the search wrapper and button */

.search-wrapper input[type=text] {
    background-color: transparent !important;
    border-bottom: 1px solid var(--links)!important;
    border-top:none;border-left:none;border-right:none;
    color: var(--links) !important;
}

button{
    border: 0px solid var(--links) !important;
    background-color: transparent !important;
    color: var(--links) !important;
    font-size: 13px!important;
}
.count{
  color: var(--links);
}

footer{
  color: var(--text);
  background: var(--logo-blue);
  border: var(--borders);
  text-align: center;
  font-size: 16px!important;
}
footer .links{
    text-align: center;
}
/* side bar with your profile image */

.edit-info{
  background: var(--lightest-blue);
  border: var(--borders);
}
.edit-info img{
  border-width: 3px 4px 3px 5px;
  border-radius:95% 4% 92% 5%/4% 95% 6% 95%;
  transform: rotate(2deg);
  border: 3px solid #D1208F;
}

/* comments table */

#comments p:not(.comments-table p){
    text-align: right; /* Displaying 2 of 2 comments ( View all | Add Comment ) */
    font-size: 16px!important;
}

.comment-replies{
  border-top: 1px solid #D1208F;
  border-bottom: none;border-left:none;border-right:none;
  background-color: transparent;
}

table.comments-table{
  border: none;
  background-color: none;
  border-spacing: 10px;
  direction: rtl;
}

.comments-table td{
  background: transparent;
  border: 3px solid var(--header);
  direction: ltr;
  border-width: 3px 4px 3px 5px;
  border-radius:95% 4% 92% 5%/4% 95% 6% 95%;
  transform: rotate(2deg);
  padding:7px;
}
.comments-table td p{
    transform: rotate(-2deg);
}
.comments-table td:first-child{
    border: none;
    filter: drop-shadow(-1px 4px 4px var(--header));
}
.comments-table td:first-child img{
  clip-path:polygon(7% 0, 0 89%, 37% 86%, 38% 100%, 52% 86%, 94% 82%, 100% 6%);
}

/* mobile code DON'T DELETE */
@media(max-width: 600px){

   
    body{
        background-size: contain;
    }
    .edit-info, .blog-entry .content, footer{
        padding:50px;
    }
    #comments{
        padding:50px;
    }
nav .links{
padding-left:50px;
padding-right:50px;
padding-bottom:none;
padding-top: none;
}
}
</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 5 of 5 comments ( View all | Add Comment )

Reone	1695034505 hi, idk why but when im gonna see my blog, its all white, like without any background, only when im editing my blog im seeing correctly all the stuff Report Comment same by Zeke; 1701012130; Report
❈* 🎀 𝒟𝟥𝒵𝒵𝒴 𝒟𝟦 𝐵𝑅𝟦𝒯 🎀 *❈	1648205688 Ty!! Report Comment
MzNinda	1636759096 Thank you so much, love this! Report Comment
XxJade💜PixiettexX	1636419001 Still not working. I tried to use it :( sad day Report Comment I added a video, hopefully it helps. If it still doesn't work let me know :) by Bela 🔊⬆; 1636444204; Report So what worked for me was switching to HTML BEFORE doing anything else by XxJade💜PixiettexX; 1636477692; Report Awesome! i was starting to worry that it wouldn't work lol but im glad it did. I'll add that info to the steps, thank you! by Bela 🔊⬆; 1636479575; Report
Steph	1635814623 It doesn't seem to be working. D: Report Comment I added the steps you need for the code. :) if it still doesn't work let me know! by Bela 🔊⬆; 1635832892; Report Nope. It is still not working even with the steps. D: I really like this too. by Steph; 1635880534; Report I added the style tags for the code! I forgot to add those in. without style tags, it'll never work lol by Bela 🔊⬆; 1636164889; Report Hahaha. It's alright. We all make mistakes. by Steph; 1636164966; Report I added a video, hopefully it helps. If it still doesn't work let me know :) by Bela 🔊⬆; 1636444213; Report It’s been working! The people who visited my blog love it. by Steph; 1636461480; Report Great! Im glad you can enjoy it! by Bela 🔊⬆; 1636479607; Report usinnggg by TaShawtyy'InThaaCuuut; 1640804281; Report