A Fresh Start in English
/* 🌿 COLOUR THEME */
:root {
–mint: #a8e6cf;
–blue: #dcedc1;
–peach: #ffd3b6;
–coral: #ffaaa5;
–white: #ffffff;
–text: #333333;
}
body {
margin: 0;
font-family: “Poppins”, sans-serif;
background: linear-gradient(135deg, var(–mint), var(–peach));
color: var(–text);
overflow-x: hidden;
}
/* 🌸 HEADER */
header {
text-align: center;
padding: 100px 20px 60px;
position: relative;
overflow: hidden;
}
header h1 {
font-size: 3em;
color: var(–text);
animation: slideDown 1.2s ease-out;
}
header p {
font-size: 1.2em;
color: #444;
opacity: 0;
animation: fadeIn 2s ease forwards;
animation-delay: 1s;
}
@keyframes slideDown {
from {
transform: translateY(-50px);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
@keyframes fadeIn {
to {
opacity: 1;
}
}
/* 🌼 BUTTON SECTIONS */
.sections {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 20px;
padding: 40px 20px 80px;
}
.card {
background-color: var(–white);
border-radius: 20px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
width: 200px;
height: 180px;
text-align: center;
padding: 30px 15px;
transition: all 0.3s ease;
cursor: pointer;
}
.card:hover {
transform: translateY(-10px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
background: var(–blue);
}
.card h2 {
margin-top: 20px;
color: var(–text);
}
/* 🌷 FOOTER */
footer {
background: var(–coral);
color: var(–white);
text-align: center;
padding: 30px 10px;
font-size: 0.9em;
}
/* ✨ FLOATING ANIMATION BACKGROUND */
.floating {
position: absolute;
width: 20px;
height: 20px;
background: var(–white);
opacity: 0.5;
border-radius: 50%;
bottom: -50px;
animation: floatUp 10s linear infinite;
}
@keyframes floatUp {
from {
transform: translateY(0) rotate(0deg);
opacity: 0.5;
}
to {
transform: translateY(-1200px) rotate(360deg);
opacity: 0;
}
}
@media (max-width: 768px) {
header h1 {
font-size: 2em;
}
.card {
width: 160px;
height: 160px;
}
}
// 🌸 Soft floating background animation
const header = document.querySelector(“header”);
for (let i = 0; i {
card.addEventListener(“click”, () => {
alert(`This will open the ${card.textContent.trim()} section soon!`);
});
});
A Fresh Start in English
Welcome! Let’s make learning English fun, simple, and colourful!