Guestbook Pink version 2

Tags: blog code, pink, 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=4343) -->

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

:root{
  --gray: #000; /*background color*/
  --logo-blue: black; /*nav*/
  --darker-blue:#FF9AE4; /*a links */
  --lighter-blue: black; /* nav links background */
  --lightest-blue: rgba(0,0,0,0.5); /*sidebar background */
  --even-lighter-orange: rgba(0,0,0,0.9); /* comments table second child background */
  --borders: 2px dotted plum;
}

body{
  background-color: var(--gray);
  background-image: url('https://i.ibb.co/pXHG7H8/0GwHp6Y.gif');
  background-size: 10%;
  font-family: 'Carattere', cursive;
  text-align: center;
  font-weight: 1;
}
.icon{
    font-size:12px;
}
a, p, b, nav label{
    font-size:18px!important;
}
h2,h3,h4,h5{
    font-size:16px!important;
}
a{
  color: var(--darker-blue);
}

a:hover{
  color: hotpink;
  text-decoration: underline;
}
nav{
  color: var(--darker-blue);
  text-align: center;
}
nav .top{
  background: var(--logo-blue);
}

/* 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: hotpink;
}

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

nav .links a:hover{
  color: hotpink;
}

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

.blog-entry .comments .heading{
  border-top: 2px solid #fff;
}

.blog-entry .title{
  padding:10px;
  background-color: rgba(0,0,0,0.8);
  color: plum;
  border: var(--borders);
  font-family: 'Fleur De Leah', cursive;
  font-size: 50px;
  font-weight: 1;
}

.blog-entry .content{
  padding: 5px;
  background-color: black;
  border: var(--borders);
  margin-top:10px;
}

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

nav img.logo{
    filter: brightness(0) saturate(100%) invert(89%) sepia(20%) saturate(4382%) hue-rotate(283deg) brightness(106%) contrast(109%) !important;
    max-width: 120px;
}

/* the search wrapper and button */

.search-wrapper input[type=text] {
    background-color: transparent !important;
    border: var(--borders)!important;
    color: var(--darker-blue) !important;
}

button{
    border: 0px solid var(--darker-blue) !important;
    background-color: transparent !important;
    color: var(--darker-blue)!important;
    font-size:16px!important;
    font-family: var(--font-family)!important;
}

.count, .kudos{
  color: hotpink;
}

main{
  background: transparent;
  color: #DB7093;
}

footer{
  color: #DB7093;
  background: rgba(0,0,0,0.8);
  border: var(--borders);
}

/* side bar with your profile image */

.edit-info{
  background: var(--lightest-blue);
  border: var(--borders);
}
.edit-info img{
    clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%);
    
}
.edit-info:after{
    display: block;
    content: "";
    height:80px;
    width:140px;
    background-image: url(https://media.giphy.com/media/s8PI1O6Ud8lHWSBZWq/giphy.gif);
    background-size: contain;
    background-repeat: no-repeat;
    background-color: black;
    background-position: center center;
    position: absolute;
	z-index: -1;
}
.kudos{
    background: var(--logo-blue);
    border: var(--borders);
}
.blog-entry .comments .heading{
  border-top: 2px dotted hotpink; /* this is the line that appears under the kudos */
}

/* comments table */

.comment-replies{
  border: 2px dashed #F741BA;
}

.comment-reply:not(:first-child){
border-top: 2px dashed var(--darker-blue);
}

table.comments-table{
  border: none;
  background-color: transparent;
  border-spacing: 7px;
}
.comments-table td{
    border: var(--borders);
    color: #F741BA;
}
.comments-table td:first-child{
  background: none;
  border: none;
  filter: drop-shadow(-2px 4px 3px deeppink);
}
.comments-table td:first-child img{
    clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%);
}

/* mobile code DON'T DELETE */
@media(max-width: 600px){
    .edit-info:after{
        display: none;
}
    button{
        font-family: var(--font-family)!important;
        font-size: 16px!important;
    }
    body{
        background-size: 40%!important;
    }
}
</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 18 of 18 comments ( View all | Add Comment )

fornicator	1738270810 using Report Comment
xeatyourheartoutx	1737347747 using Report Comment
meiyin	1714138032 using!! Report Comment
Vrusilla	1705827560 Beautiful🩷 Report Comment
winecouture	1705237731 using!! <3 Report Comment
Sara !!	1704444875 usingg Report Comment
chloelovesjuicy	1699234737 using Report Comment
mercury	1686405377 super cute! ty!! Report Comment
Archi <3	1674575511 love itt! rlly cutee Report Comment
WILL!	1673997939 luv this! <3 :3 Report Comment
♥️Lucy♥️	1641998594 HOLY SHIT TYSM Report Comment
psychedelic-frog	1638253110 omg ty this is so cute! Report Comment
Hadyikam	1637335942 Soooo cute! Thanks Report Comment
Dee	1637023663 Love it! Report Comment
The ReaalShaa	1636775052 love this , im using ! Report Comment
Blyckk	1636763737 i love this one Report Comment
Lyracy Island	1636732243 Love! I’m using 💕 Report Comment
Nane love	1636697251 ️ Report Comment