<!
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Pink Aesthetic Study Planner</title>
<link href="[Link]
family=Poppins:wght@300;400;500;600;700&family=Sacramento&display=swa
p" rel="stylesheet">
<style>
*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Poppins',sans-serif;
}
body{
background: linear-gradient(135deg,#ffd6ec,#ffeef7,#fff5fb);
min-height:100vh;
overflow-x:hidden;
color:#5b3758;
}
/* dreamy background */
.bg-blur{
position:fixed;
width:500px;
height:500px;
border-radius:50%;
background:#ffb6d5;
filter:blur(140px);
opacity:.5;
z-index:-1;
}
.blur1{
top:-150px;
left:-100px;
}
.blur2{
bottom:-150px;
right:-100px;
}
/* SIDEBAR */
.sidebar{
position:fixed;
left:20px;
top:20px;
width:250px;
height:95vh;
background:rgba(255,255,255,0.35);
backdrop-filter:blur(20px);
border:1px solid rgba(255,255,255,0.4);
border-radius:35px;
padding:30px;
box-shadow:0 10px 40px rgba(255,105,180,.2);
}
.logo{
font-family:'Sacramento',cursive;
font-size:42px;
color:#ff4fa1;
margin-bottom:40px;
}
.menu{
display:flex;
flex-direction:column;
gap:18px;
}
.menu a{
text-decoration:none;
color:#7d4b72;
background:rgba(255,255,255,0.5);
padding:15px;
border-radius:18px;
transition:.3s;
font-weight:500;
}
.menu a:hover{
background:#ffb7d8;
transform:translateX(6px);
}
/* MAIN */
.main{
margin-left:300px;
padding:30px;
}
.topbar{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:30px;
}
.topbar h1{
font-size:38px;
color:#ff4fa1;
}
.quote{
background:rgba(255,255,255,.4);
padding:15px 25px;
border-radius:20px;
backdrop-filter:blur(10px);
font-size:14px;
}
/* GRID */
.grid{
display:grid;
grid-template-columns:2fr 1fr;
gap:25px;
}
/* cards */
.card{
background:rgba(255,255,255,.4);
backdrop-filter:blur(20px);
border-radius:30px;
padding:25px;
box-shadow:0 10px 30px rgba(255,105,180,.15);
border:1px solid rgba(255,255,255,.3);
}
/* timetable */
.card h2{
margin-bottom:20px;
color:#ff4fa1;
}
.timetable{
display:grid;
grid-template-columns:120px repeat(4,1fr);
gap:10px;
}
.time,
.subject{
padding:14px;
border-radius:18px;
text-align:center;
font-size:13px;
}
.time{
background:#ffd7ea;
font-weight:600;
}
.subject{
background:rgba(255,255,255,.6);
transition:.3s;
cursor:pointer;
}
.subject:hover{
transform:scale(1.03);
background:#ffc4df;
}
/* sticky notes */
.notes-container{
display:flex;
flex-direction:column;
gap:15px;
}
.note{
min-height:130px;
border-radius:25px;
padding:18px;
font-size:14px;
line-height:1.6;
box-shadow:0 10px 20px rgba(0,0,0,.05);
}
.note:nth-child(1){
background:#ffd6ec;
}
.note:nth-child(2){
background:#ffe7b8;
}
.note:nth-child(3){
background:#e7d8ff;
}
/* progress */
.progress-card{
margin-top:25px;
}
.progress-bar{
width:100%;
height:18px;
background:#ffe2f0;
border-radius:20px;
overflow:hidden;
margin-top:10px;
}
.progress-fill{
width:78%;
height:100%;
background:linear-gradient(to right,#ff6fb5,#ff9bd0);
border-radius:20px;
}
/* calendar */
.calendar{
display:grid;
grid-template-columns:repeat(7,1fr);
gap:10px;
}
.day{
background:rgba(255,255,255,.6);
padding:18px;
border-radius:18px;
min-height:90px;
transition:.3s;
}
.day:hover{
background:#ffd3e8;
transform:translateY(-4px);
}
/* pomodoro */
.timer{
text-align:center;
margin-top:20px;
}
.timer h1{
font-size:60px;
color:#ff4fa1;
}
.timer button{
margin-top:15px;
padding:12px 25px;
border:none;
background:#ff7bbb;
color:white;
border-radius:30px;
cursor:pointer;
font-weight:600;
transition:.3s;
}
.timer button:hover{
background:#ff4fa1;
transform:scale(1.05);
}
/* floating hearts */
.heart{
position:fixed;
color:#ff9bc6;
animation:float 8s linear infinite;
opacity:.5;
}
@keyframes float{
0%{
transform:translateY(100vh) rotate(0deg);
}
100%{
transform:translateY(-120vh) rotate(360deg);
}
}
/* responsive */
@media(max-width:1100px){
.sidebar{
display:none;
}
.main{
margin-left:0;
}
.grid{
grid-template-columns:1fr;
}
.timetable{
overflow-x:auto;
}
</style>
</head>
<body>
<div class="bg-blur blur1"></div>
<div class="bg-blur blur2"></div>
<div class="heart" style="left:10%;font-size:30px;">♡</div>
<div class="heart" style="left:50%;font-size:20px;">♡</div>
<div class="heart" style="left:80%;font-size:25px;">♡</div>
<!-- SIDEBAR -->
<div class="sidebar">
<div class="logo">Study Bliss</div>
<div class="menu">
<a href="#">🏠 Dashboard</a>
<a href="#">📅 Timetable</a>
<a href="#">📝 Sticky Notes</a>
<a href="#">📊 Analytics</a>
<a href="#">🎀 Goals</a>
<a href="#">⏰ Pomodoro</a>
<a href="#">🌸 Settings</a>
</div>
</div>
<!-- MAIN -->
<div class="main">
<div class="topbar">
<h1>Hey Fatema 🎀</h1>
<div class="quote">
“Discipline but make it aesthetic.”
</div>
</div>
<div class="grid">
<!-- LEFT -->
<div>
<!-- TIMETABLE -->
<div class="card">
<h2>🌸 Weekly Study Planner</h2>
<div class="timetable">
<div class="time">Time</div>
<div class="time">Monday</div>
<div class="time">Tuesday</div>
<div class="time">Wednesday</div>
<div class="time">Thursday</div>
<div class="time">3:30 PM</div>
<div class="subject">📚 Maths</div>
<div class="subject">⚖️Law Prep</div>
<div class="subject">🧪 Chemistry</div>
<div class="subject">🧠 Revision</div>
<div class="time">4:00 PM</div>
<div class="subject">☕ Break</div>
<div class="subject">📖 English</div>
<div class="subject">💻 Notes</div>
<div class="subject">📚 Maths</div>
<div class="time">4:30 PM</div>
<div class="subject">🧠 Mock Test</div>
<div class="subject">🧪 Bio</div>
<div class="subject">🎧 Focus Session</div>
<div class="subject">📖 SST</div>
</div>
</div>
<!-- CALENDAR -->
<div class="card" style="margin-top:25px;">
<h2>🎀 Monthly Planner</h2>
<div class="calendar">
<div class="day">1</div>
<div class="day">2</div>
<div class="day">3</div>
<div class="day">4</div>
<div class="day">5</div>
<div class="day">6</div>
<div class="day">7</div>
<div class="day">8</div>
<div class="day">9</div>
<div class="day">10</div>
<div class="day">11</div>
<div class="day">12</div>
<div class="day">13</div>
<div class="day">14</div>
</div>
</div>
</div>
<!-- RIGHT -->
<div>
<!-- NOTES -->
<div class="card">
<h2>💌 Sticky Notes</h2>
<div class="notes-container">
<div class="note">
Finish Law mock paper before Friday 🎀
</div>
<div class="note">
Romanticize studying. Light candle. Make iced coffee. Study hard.
</div>
<div class="note">
Reminder: YOU are capable of insane things 💗
</div>
</div>
</div>
<!-- PROGRESS -->
<div class="card progress-card">
<h2>📊 Weekly Progress</h2>
<p>Study Goal Completion</p>
<div class="progress-bar">
<div class="progress-fill"></div>
</div>
<p style="margin-top:15px;">78% completed ✨</p>
</div>
<!-- TIMER -->
<div class="card timer">
<h2>⏰ Pomodoro Timer</h2>
<h1 id="timer">25:00</h1>
<button onclick="startTimer()">Start Focus</button>
</div>
</div>
</div>
</div>
<script>
let time = 1500;
let running = false;
function startTimer(){
if(running) return;
running = true;
let timer = setInterval(()=>{
let minutes = [Link](time / 60);
let seconds = time % 60;
seconds = seconds < 10 ? '0' + seconds : seconds;
[Link]('timer').innerHTML =
`${minutes}:${seconds}`;
time--;
if(time < 0){
clearInterval(timer);
running = false;
alert("Focus session complete 🎀");
}
},1000);
</script>
</body>
</html>