<!
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Kookie - Welcome to My World</title>
<link href="[Link]
family=Poppins:wght@300;500&family=Playfair+Display&family=Pacifico&display=swap"
rel="stylesheet">
<style>
body {
font-family: 'Poppins', sans-serif;
background: linear-gradient(to bottom right, #D9C8FF, #FFB2C6);
color: #333;
margin: 0;
padding: 0;
position: relative;
overflow: hidden;
max-width: 1200px;
margin: 0 auto;
}
header {
text-align: center;
padding: 40px 20px;
background-color: #fff;
border-bottom: 3px solid #FF72C8;
position: relative;
color: #563D7C;
}
header h1 {
font-family: 'Pacifico', cursive;
font-size: 3.5rem;
color: #FF72C8;
}
header p {
font-size: 1.5rem;
color: #6D4C92;
font-family: 'Playfair Display', serif;
}
nav {
text-align: center;
margin: 20px 0;
background-color: #FF72C8;
padding: 10px 0;
}
nav a {
text-decoration: none;
color: #fff;
font-size: 1.1rem;
margin: 0 20px;
padding: 10px 20px;
border-radius: 25px;
transition: background-color 0.3s;
font-family: 'Poppins', sans-serif;
}
nav a:hover {
background-color: #563D7C;
color: #FFB2C6;
}
section {
padding: 25px;
max-width: 900px;
margin: 40px auto;
background: #fff;
border-radius: 12px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
position: relative;
color: #6D4C92;
font-family: 'Playfair Display', serif;
}
section h2 {
color: #FF72C8;
font-size: 2.2rem;
font-family: 'Pacifico', cursive;
}
form input, form textarea {
width: 100%;
padding: 12px;
margin: 12px 0;
border: 2px solid #FF72C8;
border-radius: 10px;
font-size: 1rem;
}
form button {
background-color: #FF72C8;
color: white;
padding: 12px 25px;
border: none;
border-radius: 10px;
cursor: pointer;
transition: background-color 0.3s;
font-family: 'Poppins', sans-serif;
font-size: 1.1rem;
}
form button:hover {
background-color: #563D7C;
}
footer {
text-align: center;
padding: 15px;
background-color: #FF72C8;
position: fixed;
bottom: 0;
width: 100%;
color: #fff;
}
footer p {
margin: 0;
font-family: 'Poppins', sans-serif;
}
.background-shapes {
position: absolute;
top: -10%;
right: -10%;
width: 150px;
height: 150px;
border-radius: 50%;
background-color: #FFB2C6;
opacity: 0.4;
transform: rotate(45deg);
}
.background-shapes2 {
position: absolute;
bottom: -10%;
left: -10%;
width: 150px;
height: 150px;
border-radius: 50%;
background-color: #D9C8FF;
opacity: 0.4;
transform: rotate(-45deg);
}
</style>
</head>
<body>
<header>
<h1>Kookie</h1>
<p>Welcome to my world!</p>
<div class="background-shapes"></div>
<div class="background-shapes2"></div>
</header>
<nav>
<a href="#about">About Me</a>
<a href="#create">Create Post</a>
<a href="#contact">Contact</a>
</nav>
<section id="about">
<h2>About Me</h2>
<p>Hi, I'm Kookie! This is my space to share my thoughts, stories, and real
self. Stay a while and explore my world!</p>
</section>
<section id="create">
<h2>Create Post</h2>
<form action="/submit-post" method="POST">
<label for="title">Post Title:</label>
<input type="text" id="title" name="title" placeholder="Enter your post
title" required>
<label for="content">Post Content:</label>
<textarea id="content" name="content" rows="5" placeholder="Write your post
here" required></textarea>
<button type="submit">Post</button>
</form>
</section>
<section id="contact">
<h2>Contact</h2>
<p>Feel free to reach out to me via email at <a
href="[Link]
</section>
<footer>
<p>© 2025 Kookie. All rights reserved.</p>
</footer>
</body>
</html>