Layout CSS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Friend Review Blog</title>
<link href="https://fonts.googleapis.com/css2?family=Verdana:wght@400;700&display=swap" rel="stylesheet">
<style>
*{
margin:0;
padding:0;
box-sizing:border-box;
}
body{
background:
radial-gradient(circle at top left,#ff9adf 0%,#ff5fc9 30%,#ff2bb7 70%,#ff1493 100%);
font-family: Verdana, sans-serif;
color:#4a0034;
padding:20px;
}
/* MySpace-style container */
.blog-wrapper{
max-width:1000px;
margin:auto;
border:4px solid #fff;
background:#ffd6f4;
box-shadow:
0 0 20px rgba(255,255,255,.8),
0 0 40px rgba(255,20,147,.5);
}
/* Header */
.header{
background:linear-gradient(to bottom,#ffb8ea,#ff4bc2);
padding:20px;
text-align:center;
border-bottom:4px solid white;
}
.logo{
font-size:42px;
font-weight:bold;
color:white;
text-shadow:
2px 2px #ff1493,
0 0 10px white;
letter-spacing:2px;
}
.tagline{
color:white;
margin-top:8px;
font-size:14px;
}
/* Navigation */
.nav{
display:flex;
justify-content:center;
gap:12px;
background:#ff8fdc;
padding:10px;
border-bottom:3px solid white;
}
.nav a{
text-decoration:none;
background:white;
color:#ff1493;
padding:8px 16px;
border-radius:20px;
font-weight:bold;
border:2px solid #ff1493;
}
.nav a:hover{
background:#ffe3f7;
}
/* Layout */
.content{
display:grid;
grid-template-columns:260px 1fr;
gap:15px;
padding:15px;
}
/* Sidebar */
.sidebar{
display:flex;
flex-direction:column;
gap:15px;
}
.box{
background:white;
border:3px solid #ff7fd7;
}
.box-title{
background:linear-gradient(to bottom,#ff89db,#ff35b6);
color:white;
font-weight:bold;
padding:8px;
}
.box-content{
padding:12px;
font-size:13px;
}
/* Blog area */
.blog{
display:flex;
flex-direction:column;
gap:15px;
}
.post{
background:white;
border:3px solid #ff7fd7;
}
.post-header{
background:linear-gradient(to bottom,#ff89db,#ff35b6);
color:white;
padding:10px;
font-weight:bold;
}
.post-meta{
background:#ffe8f8;
padding:6px 10px;
font-size:12px;
color:#b00068;
}
.post-content{
padding:15px;
line-height:1.7;
}
/* Glitter stars */
.glitter{
color:#ff1493;
font-size:18px;
}
/* Footer */
.footer{
text-align:center;
padding:15px;
background:#ff8fdc;
color:white;
font-size:12px;
border-top:3px solid white;
}
/* Mobile */
@media(max-width:768px){
.content{
grid-template-columns:1fr;
}
.logo{
font-size:30px;
}
}
</style>
</head>
<body>
<div class="blog-wrapper">
<div class="header">
<div class="logo">✦ FRIEND REVIEW ✦</div>
<div class="tagline">the cutest corner of the internet ★</div>
</div>
<div class="nav">
<a href="#">Home</a>
<a href="#">Blogs</a>
<a href="#">Friends</a>
<a href="#">Photos</a>
<a href="#">Comments</a>
</div>
<div class="content">
<!-- Sidebar -->
<div class="sidebar">
<div class="box">
<div class="box-title">About Me</div>
<div class="box-content">
<p><strong>Username:</strong> PinkPrincess2005</p>
<br>
<p>★ Y2K lover</p>
<p>★ Glitter addict</p>
<p>★ Friend Review blogger</p>
</div>
</div>
<div class="box">
<div class="box-title">Mood</div>
<div class="box-content">
💖 Fabulous <br><br>
Listening To:<br>
"Pop Princess Playlist"
</div>
</div>
<div class="box">
<div class="box-title">Best Friends</div>
<div class="box-content">
★ Ashley<br>
★ Brittany<br>
★ Jessica<br>
★ Megan
</div>
</div>
</div>
<!-- Blog Posts -->
<div class="blog">
<div class="post">
<div class="post-header">
✨ Welcome To My Friend Review Blog ✨
</div>
<div class="post-meta">
Posted July 2005 • Mood: Sparkly
</div>
<div class="post-content">
<p>
<span class="glitter">✦</span>
Welcome to Friend Review! This is my totally
customized hot pink blog space inspired by
classic MySpace layouts.
</p>
<br>
<p>
Add your reviews, gossip, friend shoutouts,
playlists, photos, and all your Y2K memories here.
</p>
</div>
</div>
<div class="post">
<div class="post-header">
💕 New Friend Review Post
</div>
<div class="post-meta">
Posted Today • Mood: Cute
</div>
<div class="post-content">
<p>
Replace this section with your newest blog post.
Add glitter GIFs, badges, blinkies, and friend reviews
for the full early-2000s experience!
</p>
</div>
</div>
</div>
</div>
<div class="footer">
Friend Review © 2005–2025 | Made with glitter and hot pink energy 💖
</div>
</div>
</body>
</html>
Comments (0)
No comments yet. Be the first!
Log in to leave a comment.