🌟 Final Integrated Website Project — Bringing HTML, CSS, and JavaScript Together
✅ Project Overview
In this big project, we will combine HTML, CSS, and JavaScript to create a fully functional,
interactive website. You can use this as a final teaching example for your UI/UX course. This
project will include:
Multiple sections (Home, About, Contact)
Animations and transitions
Form with validation
Dynamic content updates
Theme toggle feature
Basic local storage usage
When expanded with explanations, code blocks, and exercises, this document becomes 20+
pages in Word.
✅ 1️⃣ HTML Structure
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>My Personal Website</title>
<link rel="stylesheet" href="[Link]" />
</head>
<body>
<header>
<h1>Welcome to My Website</h1>
<button id="themeToggle">Toggle Theme</button>
</header>
<nav>
<a href="#home">Home</a>
<a href="#about">About</a>
<a href="#contact">Contact</a>
</nav>
<section id="home">
<h2>Home Section</h2>
<p>This is the home section of our website.</p>
<button onclick="changeWelcomeText()">Change Welcome Text</button>
<p id="welcomeMessage">Hello, visitor!</p>
</section>
<section id="about">
<h2>About Me</h2>
<p>I am a frontend developer who loves creating interactive websites.</p>
</section>
<section id="contact">
<h2>Contact Me</h2>
<form id="contactForm">
<input type="text" id="name" placeholder="Your Name"><br><br>
<input type="email" id="email" placeholder="Your Email"><br><br>
<textarea id="message" placeholder="Your Message"></textarea><br><br>
<button type="submit">Send</button>
</form>
<p id="formMessage"></p>
</section>
<footer>
<p>© 2025 My Website</p>
</footer>
<script src="[Link]"></script>
</body>
</html>
✅ 2️⃣ CSS Styling ([Link])
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f0f0f0;
transition: background-color 0.5s, color 0.5s;
}
header {
background-color: #333;
color: white;
padding: 20px;
text-align: center;
}
nav {
background-color: #555;
overflow: hidden;
}
nav a {
float: left;
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
transition: background-color 0.3s;
}
nav a:hover {
background-color: #111;
}
section {
padding: 20px;
}
button {
padding: 10px 20px;
margin-top: 10px;
cursor: pointer;
}
.dark-theme {
background-color: #222;
color: white;
}
input, textarea {
width: 80%;
padding: 10px;
margin: 5px 0;
}
footer {
text-align: center;
padding: 10px;
background-color: #333;
color: white;
}
✅ 3️⃣ JavaScript Interactivity ([Link])
// Change welcome text
function changeWelcomeText() {
const msg = [Link]("welcomeMessage");
[Link] = "Welcome to my amazing website!";
}
// Theme toggle
const themeBtn = [Link]("themeToggle");
[Link]("click", function() {
[Link]("dark-theme");
// Save to local storage
if ([Link]("dark-theme")) {
[Link]("theme", "dark");
} else {
[Link]("theme", "light");
}
});
// Load saved theme
[Link] = () => {
if ([Link]("theme") === "dark") {
[Link]("dark-theme");
}
}
// Form validation
const form = [Link]("contactForm");
[Link]("submit", function(e) {
[Link]();
const name = [Link]("name").value;
const email = [Link]("email").value;
const message = [Link]("message").value;
const formMessage = [Link]("formMessage");
if ([Link] < 3) {
[Link] = "Name must be at least 3 characters.";
[Link] = "red";
return;
}
if (![Link]("@")) {
[Link] = "Invalid email address.";
[Link] = "red";
return;
}
if ([Link] < 10) {
[Link] = "Message must be at least 10 characters.";
[Link] = "red";
return;
}
[Link] = "Message sent successfully!";
[Link] = "green";
[Link]();
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Smart Portfolio - Alex</title>
<style>
body {
font-family: 'Segoe UI', sans-serif;
margin: 0;
padding: 0;
background: #f0f2f5;
color: #333;
}
header {
background: linear-gradient(to right, #4e54c8, #8f94fb);
color: white;
padding: 40px;
text-align: center;
}
section {
padding: 40px;
margin: 20px auto;
max-width: 800px;
background: white;
border-radius: 10px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
h2 {
color: #4e54c8;
}
.skill-bar {
background: #ddd;
border-radius: 5px;
overflow: hidden;
margin-bottom: 10px;
}
.bar {
height: 20px;
line-height: 20px;
color: white;
padding-left: 10px;
}
.html { width: 90%; background: #f16529; }
.css { width: 85%; background: #2965f1; }
.js { width: 75%; background: #f7df1e; color: #000; }
.form-control {
margin-bottom: 15px;
}
input, textarea {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}
button {
background: #4e54c8;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
}
.error { color: red; }
</style>
</head>
<body>
<header>
<h1>Hi, I'm <span style="color: yellow;">Alex</span></h1>
<p>Frontend Developer & Designer</p>
</header>
<section>
<h2>Skills</h2>
<div class="skill-bar html bar">HTML - 90%</div>
<div class="skill-bar css bar">CSS - 85%</div>
<div class="skill-bar js bar">JavaScript - 75%</div>
</section>
<section>
<h2>Project Preview</h2>
<p>My projects include portfolio pages, calculators, and fetch API demos. Click below to
change this paragraph dynamically.</p>
<button onclick="changeText()">Change Text</button>
<p id="dynamicText">This is the original content.</p>
</section>
<section>
<h2>Contact Me</h2>
<form id="contactForm">
<div class="form-control">
<input type="text" id="name" placeholder="Your Name">
</div>
<div class="form-control">
<input type="email" id="email" placeholder="Your Email">
</div>
<div class="form-control">
<textarea id="message" placeholder="Your Message"></textarea>
</div>
<button type="submit">Send</button>
<p class="error" id="formError"></p>
</form>
</section>
<script>
function changeText() {
[Link]("dynamicText").innerText = "This paragraph was changed using
JavaScript!";
}
[Link]("contactForm").addEventListener("submit", function(e) {
[Link]();
let name = [Link]("name").value;
let email = [Link]("email").value;
let message = [Link]("message").value;
let error = "";
if ([Link] < 3) error += "Name must be at least 3 characters.<br>";
if (![Link]("@")) error += "Invalid email address.<br>";
if ([Link] < 5) error += "Message must be at least 5 characters.<br>";
[Link]("formError").innerHTML = error;
if (!error) {
alert("Form submitted successfully!");
}
});
</script>
</body>
</html>
JS Project
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Personal Dashboard</title>
<style>
body {
margin: 0;
padding: 0;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: linear-gradient(135deg, #ece9e6, #ffffff);
color: #333;
transition: background 0.5s, color 0.5s;
}
.container {
max-width: 600px;
margin: auto;
padding: 20px;
text-align: center;
}
header h1 {
margin: 0;
}
header h2 {
margin: 5px 0;
}
input[type="text"] {
padding: 8px;
width: 70%;
margin: 5px 0;
}
button {
padding: 8px 15px;
margin: 5px;
cursor: pointer;
border: none;
background: #4caf50;
color: white;
border-radius: 4px;
transition: background 0.3s;
}
button:hover {
background: #45a049;
}
ul {
list-style-type: none;
padding: 0;
}
li {
padding: 6px;
border-bottom: 1px solid #ddd;
}
[Link] {
background: #2c3e50;
color: #ecf0f1;
}
[Link] input[type="text"], [Link] button {
background: #34495e;
color: #ecf0f1;
}
[Link] button:hover {
background: #3d5a73;
}
</style>
</head>
<body>
<div class="container">
<header>
<h1 id="greeting">Good Morning!</h1>
<h2 id="clock">00:00:00</h2>
<p id="date"></p>
</header>
<section class="focus">
<input type="text" id="focusInput" placeholder="What's your main focus today?">
<button id="saveFocus">Save</button>
<p id="focusDisplay"></p>
</section>
<section class="todo">
<h3>To-Do List</h3>
<input type="text" id="taskInput" placeholder="New Task">
<button id="addTask">Add</button>
<ul id="taskList"></ul>
</section>
<button id="themeToggle">Toggle Theme</button>
</div>
<script>
// Clock and Greeting
function updateClock() {
const now = new Date();
const hours = [Link]();
const mins = [Link]().toString().padStart(2, "0");
const secs = [Link]().toString().padStart(2, "0");
[Link]("clock").textContent = `${hours}:${mins}:${secs}`;
let greeting = "Good Night!";
if (hours < 12) greeting = "Good Morning!";
else if (hours < 18) greeting = "Good Afternoon!";
else greeting = "Good Evening!";
[Link]("greeting").textContent = greeting;
const options = { weekday: 'long', month: 'long', day: 'numeric' };
[Link]("date").textContent = [Link](undefined, options);
}
setInterval(updateClock, 1000);
updateClock();
// Focus
const focusInput = [Link]("focusInput");
const focusDisplay = [Link]("focusDisplay");
[Link]("saveFocus").addEventListener("click", () => {
[Link]("focus", [Link]);
showFocus();
});
function showFocus() {
const focus = [Link]("focus");
if (focus) {
[Link] = `Today's focus: ${focus}`;
[Link] = "";
}
}
showFocus();
// To-Do List
let tasks = [Link]([Link]("tasks")) || [];
const taskList = [Link]("taskList");
[Link]("addTask").addEventListener("click", () => {
const task = [Link]("taskInput").value;
if (task) {
[Link](task);
[Link]("tasks", [Link](tasks));
renderTasks();
[Link]("taskInput").value = "";
}
});
function renderTasks() {
[Link] = "";
[Link]((task, index) => {
const li = [Link]("li");
[Link] = task;
[Link]("click", () => {
[Link](index, 1);
[Link]("tasks", [Link](tasks));
renderTasks();
});
[Link](li);
});
}
renderTasks();
// Weather
[Link]("getWeather").addEventListener("click", async () => {
const city = [Link]("cityInput").value;
const apiKey = "YOUR_API_KEY"; // replace with your OpenWeatherMap API key
const url = `[Link]
{apiKey}&units=metric`;
try {
const res = await fetch(url);
const data = await [Link]();
[Link]("weatherData").textContent =
`${[Link]}: ${[Link]}°C, ${[Link][0].description}`;
} catch {
[Link]("weatherData").textContent = "City not found!";
}
});
// Quote
async function loadQuote() {
const res = await fetch("[Link]
const data = await [Link]();
[Link]("quoteText").textContent = `"${[Link]}"`;
[Link]("quoteAuthor").textContent = `— ${[Link]}`;
}
[Link]("newQuote").addEventListener("click", loadQuote);
loadQuote();
// Theme Toggle
[Link]("themeToggle").addEventListener("click", () => {
[Link]("dark");
});
</script>
</body>
</html>
Animative Projects
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Futuristic Hero Page</title>
<style> body, html {
margin: 0;
padding: 0;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
overflow-x: hidden;
scroll-behavior: smooth;
}
#hero {
height: 100vh;
background: linear-gradient(135deg, #ff6ec4, #7873f5);
color: white;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
position: relative;
z-index: 2;
}
#hero h1 {
font-size: 2.5rem;
}
#hero p {
margin-top: 10px;
opacity: 0.8;
}
section {
padding: 100px 20px;
text-align: center;
background: white;
}
section:nth-child(even) {
background: #f0f0f0;
}
.cards {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 20px;
}
.card {
background: rgba(255, 255, 255, 0.1);
border: 2px solid #7873f5;
padding: 20px 30px;
border-radius: 12px;
color: #333;
transition: transform 0.5s, box-shadow 0.5s;
backdrop-filter: blur(10px);
cursor: pointer;
}
.card:hover {
transform: scale(1.05) rotate(1deg);
box-shadow: 0 10px 20px rgba(120, 115, 245, 0.4);
}
.reveal {
opacity: 0;
transform: translateY(100px);
transition: all 1s ease;
}
.[Link] {
opacity: 1;
transform: translateY(0);
}
canvas#background {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 0;
}
</style>
</head>
<body>
<div id="hero">
<h1>Hello, I'm <span id="typed"></span></h1>
<p>Scroll down to explore ⬇️</p>
</div>
<section id="about" class="reveal">
<h2>About Me</h2>
<p>I create amazing websites with futuristic animations and stunning effects to engage users
and tell a story in style.</p>
</section>
<section id="projects" class="reveal">
<h2>Projects</h2>
<div class="cards">
<div class="card">Animated Dashboard</div>
<div class="card">3D Product Showcase</div>
<div class="card">Interactive Quiz</div>
</div>
</section>
<section id="contact" class="reveal">
<h2>Contact</h2>
<p>Let's work together! Email me at <a
href="[Link]
</section>
<canvas id="background"></canvas>
<script> // Typing effect
const typedText = ["a Creative Designer.", "a Front-End Developer.", "a Dreamer."];
let currentText = 0;
let charIndex = 0;
const typedSpan = [Link]("typed");
function type() {
if (charIndex < typedText[currentText].length) {
[Link] += typedText[currentText].charAt(charIndex);
charIndex++;
setTimeout(type, 100);
} else {
setTimeout(erase, 2000);
}
}
function erase() {
if (charIndex > 0) {
[Link] = typedText[currentText].substring(0, charIndex - 1);
charIndex--;
setTimeout(erase, 50);
} else {
currentText = (currentText + 1) % [Link];
setTimeout(type, 500);
}
}
[Link]("DOMContentLoaded", () => {
if ([Link]) setTimeout(type, 1000);
});
// Reveal on scroll
[Link]("scroll", revealSections);
function revealSections() {
const reveals = [Link](".reveal");
for (const el of reveals) {
const windowHeight = [Link];
const revealTop = [Link]().top;
const revealPoint = 150;
if (revealTop < windowHeight - revealPoint) {
[Link]("active");
}
}
}
// Canvas background shapes
const canvas = [Link]("background");
const ctx = [Link]("2d");
[Link] = [Link];
[Link] = [Link];
const circles = [Link]({length: 20}, () => ({
x: [Link]() * [Link],
y: [Link]() * [Link],
radius: [Link]() * 50 + 10,
dx: ([Link]() - 0.5) * 1,
dy: ([Link]() - 0.5) * 1,
color: `hsla(${[Link]() * 360}, 70%, 60%, 0.3)`
}));
function animate() {
[Link](0, 0, [Link], [Link]);
for (const c of circles) {
[Link]();
[Link](c.x, c.y, [Link], 0, [Link] * 2);
[Link] = [Link];
[Link]();
c.x += [Link];
c.y += [Link];
if (c.x + [Link] > [Link] || c.x - [Link] < 0) [Link] *= -1;
if (c.y + [Link] > [Link] || c.y - [Link] < 0) [Link] *= -1;
}
requestAnimationFrame(animate);
}
animate();
[Link]("resize", () => {
[Link] = [Link];
[Link] = [Link];
});
</script>
</body>
</html>
Multi Page Project
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Futuristic Portfolio</title>
<style>
body, html {
margin: 0;
padding: 0;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
scroll-behavior: smooth;
overflow-x: hidden;
background: black;
color: white;
}
nav {
position: fixed;
top: 0;
width: 100%;
background: rgba(0,0,0,0.7);
backdrop-filter: blur(10px);
z-index: 10;
}
nav ul {
list-style: none;
display: flex;
justify-content: center;
margin: 0;
padding: 10px;
}
nav ul li {
margin: 0 15px;
}
nav ul li a {
color: #fff;
text-decoration: none;
font-weight: bold;
transition: color 0.3s;
}
nav ul li a:hover {
color: #00ffea;
}
section {
padding: 150px 20px;
text-align: center;
}
#hero {
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
}
#hero h1 {
font-size: 2.5rem;
}
#hero p {
font-size: 1.2rem;
opacity: 0.8;
}
.skills-cards, .projects-cards {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 20px;
}
.skill-card, .project-card {
background: rgba(255, 255, 255, 0.05);
border: 2px solid #00ffea;
padding: 30px 40px;
border-radius: 15px;
transition: transform 0.5s, background 0.5s;
cursor: pointer;
}
.skill-card:hover, .project-card:hover {
background: rgba(0, 255, 234, 0.2);
transform: scale(1.1) rotate(2deg);
}
.reveal {
opacity: 0;
transform: translateY(80px);
transition: all 1s ease;
}
.[Link] {
opacity: 1;
transform: translateY(0);
}
.social-icons a {
display: inline-block;
margin: 10px;
color: #00ffea;
text-decoration: none;
font-weight: bold;
}
canvas#background {
position: fixed;
top: 0;
left: 0;
z-index: -1;
}
</style>
</head>
<body>
<canvas id="background"></canvas>
<nav>
<ul>
<li><a href="#hero">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#skills">Skills</a></li>
<li><a href="#projects">Projects</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
<section id="hero">
<h1>Hi, I'm <span id="typed"></span></h1>
<p>Creative Developer | Designer | Animator</p>
</section>
<section id="about" class="reveal">
<h2>About Me</h2>
<p>I am a passionate web developer and UI/UX designer who loves creating futuristic and
interactive websites that tell a story and impress users worldwide.</p>
</section>
<section id="skills" class="reveal">
<h2>Skills</h2>
<div class="skills-cards">
<div class="skill-card">HTML & CSS</div>
<div class="skill-card">JavaScript</div>
<div class="skill-card">UI/UX Design</div>
<div class="skill-card">Animation</div>
</div>
</section>
<section id="projects" class="reveal">
<h2>Projects</h2>
<div class="projects-cards">
<div class="project-card">Animated Dashboard</div>
<div class="project-card">3D Portfolio</div>
<div class="project-card">Game Landing Page</div>
</div>
</section>
<section id="contact" class="reveal">
<h2>Contact Me</h2>
<p>Email me at <a href="[Link] or find me on
social media.</p>
<div class="social-icons">
<a href="#">🌟 Instagram</a>
<a href="#">💼 LinkedIn</a>
<a href="#">👨💻 GitHub</a>
</div>
</section>
<script> // Typing effect
const typedText = ["a Creative Developer.", "a Futuristic Designer.", "a Motion Animator."];
let currentText = 0;
let charIndex = 0;
const typedSpan = [Link]("typed");
function type() {
if (charIndex < typedText[currentText].length) {
[Link] += typedText[currentText].charAt(charIndex);
charIndex++;
setTimeout(type, 100);
} else {
setTimeout(erase, 2000);
}
}
function erase() {
if (charIndex > 0) {
[Link] = typedText[currentText].substring(0, charIndex - 1);
charIndex--;
setTimeout(erase, 50);
} else {
currentText = (currentText + 1) % [Link];
setTimeout(type, 500);
}
}
[Link]("DOMContentLoaded", () => {
if ([Link]) setTimeout(type, 1000);
});
// Reveal on scroll
[Link]("scroll", revealSections);
function revealSections() {
const reveals = [Link](".reveal");
for (const el of reveals) {
const windowHeight = [Link];
const revealTop = [Link]().top;
const revealPoint = 150;
if (revealTop < windowHeight - revealPoint) {
[Link]("active");
}
}
}
// Canvas background balls
const canvas = [Link]("background");
const ctx = [Link]("2d");
[Link] = [Link];
[Link] = [Link];
const balls = [Link]({length: 25}, () => ({
x: [Link]() * [Link],
y: [Link]() * [Link],
r: [Link]() * 30 + 10,
dx: ([Link]() - 0.5) * 2,
dy: ([Link]() - 0.5) * 2,
color: `hsla(${[Link]() * 360}, 70%, 60%, 0.3)`
}));
function animate() {
[Link](0, 0, [Link], [Link]);
for (const b of balls) {
[Link]();
[Link](b.x, b.y, b.r, 0, [Link] * 2);
[Link] = [Link];
[Link]();
b.x += [Link];
b.y += [Link];
if (b.x + b.r > [Link] || b.x - b.r < 0) [Link] *= -1;
if (b.y + b.r > [Link] || b.y - b.r < 0) [Link] *= -1;
}
requestAnimationFrame(animate);
}
animate();
[Link]("resize", () => {
[Link] = [Link];
[Link] = [Link];
});
</script>
</body>
</html>
Multi page colorful site
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Colorful Single Page</title>
<style> * {
margin: 0;
padding: 0;
box-sizing: border-box;
scroll-behavior: smooth;
}
body, html {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
nav {
position: fixed;
width: 100%;
background: rgba(0,0,0,0.5);
backdrop-filter: blur(8px);
z-index: 1000;
}
nav ul {
list-style: none;
display: flex;
justify-content: center;
padding: 15px;
}
nav ul li {
margin: 0 20px;
}
nav ul li a {
text-decoration: none;
color: white;
font-weight: bold;
transition: color 0.3s, border-bottom 0.3s;
}
nav ul li a:hover,
nav ul li [Link] {
color: #ffd700;
border-bottom: 2px solid #ffd700;
}
section {
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
color: white;
padding: 50px;
transition: background 0.5s;
}
#home {
background: linear-gradient(135deg, #ff9a9e, #fad0c4);
}
#about {
background: linear-gradient(135deg, #a18cd1, #fbc2eb);
}
#services {
background: linear-gradient(135deg, #f6d365, #fda085);
}
#projects {
background: linear-gradient(135deg, #ffecd2, #fcb69f);
}
#contact {
background: linear-gradient(135deg, #84fab0, #8fd3f4);
}
section h1 {
font-size: 3rem;
margin-bottom: 20px;
opacity: 0;
transform: translateY(50px);
transition: all 1s;
}
section p {
font-size: 1.2rem;
max-width: 600px;
opacity: 0;
transform: translateY(50px);
transition: all 1s;
}
[Link] h1,
[Link] p {
opacity: 1;
transform: translateY(0);
}
a{
color: #ffd700;
}
a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<nav>
<ul>
<li><a href="#home" class="active">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#projects">Projects</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
<section id="home">
<h1>Welcome 🌈</h1>
<p>This is my colorful, modern, single-page site!</p>
</section>
<section id="about">
<h1>About Me 👤</h1>
<p>I’m a creative developer who loves to design vibrant and engaging web experiences.</p>
</section>
<section id="services">
<h1>Services 💼</h1>
<p>Web design, UI/UX, branding, animations — everything to make your brand shine!</p>
</section>
<section id="projects">
<h1>My Projects 📂</h1>
<p>Here are some of my coolest colorful projects you’ll love.</p>
</section>
<section id="contact">
<h1>Contact 📞</h1>
<p>Let’s work together! Email me at <a
href="[Link]
</section>
<script> const sections = [Link]("section");
const navLinks = [Link]("nav ul li a");
function activateNav() {
let index = [Link];
while(--index && [Link] + 150 < sections[index].offsetTop) {}
[Link]((link) => [Link]("active"));
navLinks[index].[Link]("active");
}
activateNav();
[Link]("scroll", activateNav);
// Reveal on scroll
function revealOnScroll() {
[Link]((sec) => {
const top = [Link]().top;
if(top < [Link] - 100){
[Link]("show");
}
});
}
[Link]("scroll", revealOnScroll);
revealOnScroll();
</script>
</body>
</html>
Animative Multi page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Futuristic One Page</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
scroll-behavior: smooth;
}
body, html {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
nav {
position: fixed;
width: 100%;
background: rgba(0,0,0,0.6);
backdrop-filter: blur(10px);
z-index: 1000;
}
nav ul {
list-style: none;
display: flex;
justify-content: center;
padding: 15px;
}
nav ul li {
margin: 0 20px;
}
nav ul li a {
text-decoration: none;
color: white;
font-weight: bold;
transition: color 0.3s, border-bottom 0.3s;
}
nav ul li [Link],
nav ul li a:hover {
color: #ffcf33;
border-bottom: 2px solid #ffcf33;
}
section {
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
padding: 60px 20px;
}
#hero {
background: linear-gradient(135deg, #ff9a9e, #fad0c4);
color: white;
position: relative;
overflow: hidden;
}
#hero span {
color: #ffd700;
}
#about {
background: linear-gradient(135deg, #a1c4fd, #c2e9fb);
color: #333;
clip-path: polygon(0 0, 100% 5%, 100% 100%, 0% 95%);
}
#services {
background: linear-gradient(135deg, #f6d365, #fda085);
clip-path: polygon(0 5%, 100% 0, 100% 95%, 0% 100%);
}
#projects {
background: linear-gradient(135deg, #ffecd2, #fcb69f);
}
#contact {
background: linear-gradient(135deg, #a1ffce, #faffd1);
clip-path: polygon(0 0, 100% 5%, 100% 100%, 0% 95%);
}
.btn {
display: inline-block;
margin-top: 20px;
padding: 12px 30px;
background: #fff;
color: #ff9a9e;
border-radius: 30px;
text-decoration: none;
font-weight: bold;
transition: all 0.3s;
}
.btn:hover {
background: #ffcf33;
color: #fff;
}
.service-cards, .projects-gallery {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 20px;
margin-top: 30px;
}
.card, .project-item {
background: rgba(255,255,255,0.2);
padding: 30px;
border-radius: 20px;
transition: transform 0.5s, background 0.5s;
cursor: pointer;
min-width: 150px;
}
.card:hover, .project-item:hover {
transform: scale(1.1) rotate(3deg);
background: rgba(255,255,255,0.4);
}
section h2 {
font-size: 2.5rem;
margin-bottom: 20px;
}
section p {
max-width: 600px;
}
</style>
</head>
<body>
<nav>
<ul>
<li><a href="#hero" class="active">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#projects">Projects</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
<section id="hero">
<h1>Hello, I'm <span>Creative Coder</span></h1>
<p>Designing colorful, interactive, futuristic websites 🚀</p>
<a href="#about" class="btn">Know More</a>
</section>
<section id="about">
<h2>About Me</h2>
<p>I'm a creative web designer and front-end developer with a passion for crafting visually
stunning and highly interactive digital experiences.</p>
</section>
<section id="services">
<h2>Services</h2>
<div class="service-cards">
<div class="card">Web Design</div>
<div class="card">UI/UX Design</div>
<div class="card">Animations</div>
</div>
</section>
<section id="projects">
<h2>Projects</h2>
<div class="projects-gallery">
<div class="project-item">Project 1</div>
<div class="project-item">Project 2</div>
<div class="project-item">Project 3</div>
</div>
</section>
<section id="contact">
<h2>Contact</h2>
<p>Email me at <a href="[Link]
</section>
<script> const navLinks = [Link]("nav ul li a");
const sections = [Link]("section");
[Link]("scroll", () => {
let current = "";
[Link](section => {
const sectionTop = [Link] - 100;
if (scrollY >= sectionTop) {
current = [Link]("id");
}
});
[Link](link => {
[Link]("active");
if ([Link]("href").includes(current)) {
[Link]("active");
}
});
});
</script>
</body>
</html>