THANK YOU FOR THE MESSAGES <3
How I styled the messages on my guestbook page.
Since sharing my previous post about my guestbook (and republishing it to include the fonts used), I've received many lovely messages. ʕ♥ᴥ♥ʔ Thank you so much for your kind words! Now I have more than enough messages to see that the layout/code works.
Thanks again for all the positive feedback. You've truly made my day!
Styling messages in HTML/CSS
Now that I understood the magic of div classes, I was tempted to create like 10 different card styles, but I decided to start small first. I thought it'd be interesting to alternate between different colors and have them rotate at opposing angles to create a more "realistic," scrapbook-y feel. I thought about adding a drop shadow but I like the simplicity of the page. I think drop shadow works for my NOTES page, but it might look too busy here.
CSS
/* Messages */
.message-1 {
display: block;
position: relative;
max-width: 400px;
border: 1px solid #fcccef;
border-radius: 4px;
background-color: #ffedfa;
padding: 10px 20px 0 30px;
rotate: -2deg;
}
.message-1 p.guest {
font-family: var(--font-main);
font-size: 15pt;
}
.message-1 p.message {
font-family: var(--font-secondary);
font-size: 18pt;
}
.message-1 p.date {
position: absolute; /* position relative to the <li> */
right: 1.2em; /* same as li padding to line up */
top: 0em; /* same as li padding for spacing */
text-decoration: none;
text-transform: uppercase;
text-align: center;
font-weight: none;
font-style: normal;
color: #db02c6;
font-family: var(--font-main);
font-size: 11pt;
letter-spacing: 0px;
border: 2px solid #db02c6;
width: 100px;
border-radius: 4px;
padding: 5px 5px 0px 5px;
rotate: 2deg;
white-space: nowrap; /* prevent wrapping */
}
/* Responsive layout */
@media screen and (max-width: 600px) {
.column {
width: 100%;
}
For every additional style, I just added another number: .message-2, .message-3, etc.
The responsive layout part is important!* It forces the cards to fall below the Guestbook Form in mobile view. Without it, everything just squished into each other and got distorted.
*I can't remember where I found this, either through ChatGPT or searching through articles.
HTML
<div class="column">
<br>
<div class="message-1">
<p class="guest"><a href="[website url]">[Name]</a> (Country)</p>
<p class="message">[Message]</p><p class="date">MON X, XXXX</p>
</div>
<div class="message-2">
<p class="guest"><a href="[website url]">[Name]</a> (Country)</p>
<p class="message">[Message]</p><p class="date">MON X, XXXX</p>
</div>
This is what the page draft looks with the actual content. This HTML falls below the code for the guestbook.
Fonts used
For the cards, I'm using Special Elite for the names, location, and date; Cedarville Cursive for the text.