Guestbook Pink version 1

Tags: pink, blog code, guestbook, bela

Description:

preview the blog here

Copy the code below and Paste it into your blog above your content.

You can add the css before writing your blog content, or afterwards.
I find it easier to add it after you have your blog content if you plan to add more styling or if you want to edit the CSS code.

Here is a quick how-to if you need it:

If you still need help, 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=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.ibb.co/zVZwbn3/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);
text-shadow:none;
}

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

Kasper (autoplay)	1721169871 using ^^ Report Comment
☆ Kaitlyn Garcia ☆	1718213810 Thank you!!! Report Comment
★Dog★	1713683823 Ty!!! Report Comment
💛 Free de la Hoya 💛	1711577024 using. thank you Report Comment
❈* 🎀 𝒟𝟥𝒵𝒵𝒴 𝒟𝟦 𝐵𝑅𝟦𝒯 🎀 *❈	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