Withintro4 HTML

<!
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Helpful Website</title>
<link href="https://fonts.googleapis.com/css2?
family=Bangers&family=Comic+Neue:wght@400;700&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Comic Neue', cursive;
margin: 0;
padding: 0;
background-color: #fffbe6;
color: #333;
overflow-x: hidden;
display: flex;
justify-content: center;
}
#intro-screen {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #ff6b6b;
color: white;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
z-index: 9999;
}
#intro-screen h1 {
font-family: 'Bangers', cursive;
color: #54a0ff;
text-shadow: 3px 3px 0 #5f27cd;
font-size: 4em;
margin-bottom: 20px;
}
#deadpool-intro {
font-size: 1.5em;
max-width: 80%;
height: 100px;
animation: fadeInUp 1s ease-in-out;
}
#intro-screen button {
background-color: #54a0ff;
border: none;
border-radius: 10px;
color: white;
font-size: 1.5em;
padding: 10px 20px;
cursor: pointer;
transition: transform 0.3s, box-shadow 0.3s, background-color 0.3s;
animation: pulse 1s infinite;
}
#intro-screen button:hover {
transform: scale(1.05);
box-shadow: 0 5px 15px rgba(0,0,0,0.3);
background-color: #1e90ff;
}
#left-sidebar, #right-sidebar {
position: fixed;
top: 0;
width: 15%;
height: 100%;
background-color: #feca57;
padding: 20px;
box-sizing: border-box;
color: #fff;
display: flex;
text-align: center;
font-size: 1.2em;
animation: fadeIn 1s ease-in-out;
}
#left-sidebar {
left: 0;
}
#right-sidebar {
right: 0;
}
#fun-fact {
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes fadeInUp {
from { transform: translateY(50px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
#welcome-screen, #intermediate-screen {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
z-index: 1000;
border: 8px solid #54a0ff;
animation: fadeIn 1.5s ease-in-out forwards;
}
#welcome-screen {
background-color: #ff9ff3;
animation: bounceIn 1s ease-in-out;
}
#intermediate-screen {
background-color: #48dbfb;
cursor: pointer;
display: none;
animation: slideInUp 1s ease-in-out;
}
h1 {
color: #54a0ff;
font-size: 4em;
text-align: center;
}
.bouncy {
display: inline-block;
animation: bounce 1.5s infinite;
animation-timing-function: ease-in-out;
}
.bouncy:nth-child(1) { animation-delay: 0s; }

.bouncy:nth-child(2) { animation-delay: 0.1s; }
/* ... (rest of the bouncy animations) ... */
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {
transform: translateY(0);
}
40% {
transform: translateY(-30px);
}
60% {
transform: translateY(-15px);
}
}
#name-input {
padding: 10px;
font-size: 1.2em;
}
button {
border: none;
color: white;
font-size: 1.5em;
padding: 10px 20px;
cursor: pointer;
transition: transform 0.3s, box-shadow 0.3s, background-color 0.3s;
animation: pulse 1s infinite;
}
button:hover {
transform: scale(1.05);
box-shadow: 0 5px 15px rgba(0,0,0,0.3);
background-color: #1e90ff;
}
#container {
width: 70%;
margin: 0 auto;
background-color: white;
overflow: hidden;
box-shadow: 0 0 20px rgba(0,0,0,0.2);
display: none;
animation: slideInLeft 1s ease-in-out;
}
#header {
padding: 20px;
text-align: center;
animation: fadeInDown 1s ease-in-out;
}
#header h1 {
color: white;
font-size: 2.5em;
margin: 0;
}
#main-content {
display: flex;
min-height: 400px;
}
#topics {
background-color: #ff6b6b;
padding: 20px;
width: 30%;
animation: slideInLeft 1s ease-in-out;
}
.topic {
background-color: #feca57;
border: 3px solid #ff9ff3;
color: #333;
cursor: pointer;
font-weight: bold;
margin: 10px 0;
padding: 15px;
transition: transform 0.3s, box-shadow 0.3s;
position: relative;
}
.topic:hover {
transform: translateX(5px) scale(1.05);
box-shadow: 5px 5px 15px rgba(0,0,0,0.2);
}
.topic::after {
content: '👉';
position: absolute;
right: 15px;
top: 50%;
transform: translateY(-50%);
transition: transform 0.3s;
}
.topic:hover::after {
transform: translateY(-50%) translateX(5px);
}
#content {
background-color: #48dbfb;
padding: 20px;
width: 70%;
animation: slideInRight 1s ease-in-out;
}
#footer {
background-color: #ff9ff3;
color: white;
text-align: center;
padding: 10px;
}
#credits {
font-size: 1.2em;
white-space: nowrap;
overflow: hidden;
animation: marquee 15s linear infinite;
}
#credits p {
display: inline-block;
padding-left: 100%;
animation: marquee 15s linear infinite;
}
@keyframes marquee {
0% { transform: translate(0, 0); }
100% { transform: translate(-100%, 0); }
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes fadeInUp {
from { transform: translateY(50px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
@keyframes fadeInDown {
from { transform: translateY(-50px); opacity: 0; }
to { transform: translateY(0); opacity: 1); }
}
@keyframes slideInLeft {
from { transform: translateX(-100%); opacity: 0; }
to { transform: translateX(0); opacity: 1); }
}
@keyframes slideInRight {
from { transform: translateX(100%); opacity: 0; }
to { transform: translateX(0); opacity: 1); }
}
@keyframes slideInUp {
from { transform: translateY(100%); opacity: 0; }
to { transform: translateY(0); opacity: 1); }
}
@keyframes bounceIn {
0% { transform: scale(0.1); opacity: 0; }
60% { transform: scale(1.2); opacity: 1; }
100% { transform: scale(1); }
}
@keyframes pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.05); }
}
</style>
</head>
<body>
<div id="intro-screen">
<h1>Welcome to the Helpful Website!</h1>
<p id="deadpool-intro"></p>
<button onclick="skipIntro()">Skip Intro (Boring!)</button>
</div>
<div id="left-sidebar">
<div id="fun-fact"></div>
</div>
<div id="right-sidebar">
<div id="fun-fact"></div>
</div>
<div id="welcome-screen">
<h1>
<span class="bouncy">W</span><span class="bouncy">e</span><span
class="bouncy">l</span><span class="bouncy">c</span><span
class="bouncy">o</span><span class="bouncy">m</span><span class="bouncy">e</span>
<span class="bouncy">t</span><span class="bouncy">o</span>
<span class="bouncy">t</span><span class="bouncy">h</span><span
class="bouncy">e</span>
<span class="bouncy">H</span><span class="bouncy">e</span><span
class="bouncy">l</span><span class="bouncy">p</span><span
class="bouncy">f</span><span class="bouncy">u</span><span class="bouncy">l</span>
<span class="bouncy">W</span><span class="bouncy">e</span><span
class="bouncy">b</span><span class="bouncy">s</span><span
class="bouncy">i</span><span class="bouncy">t</span><span
class="bouncy">e</span><span class="bouncy">!</span>
</h1>
<input id="name-input" type="text" placeholder="Enter your name" />
<button onclick="showIntermediateScreen()">Start</button>
</div>
<div id="intermediate-screen" onclick="showMainContent()">

<h1 id="welcome-message"></h1>
<h2>Thanks for testing!</h2>
<p>Click anywhere to continue</p>
</div>
<div id="container">
<div id="header">
<h1>Welcome to the Helpful Website!</h1>
</div>
<div id="main-content">
<div id="topics">
<h2>Choose as you wish</h2>
<div class="topic" onclick="showContent('gaming')">Gaming
News</div>
<div class="topic" onclick="showContent('affairs')">Current
Affairs</div>
<div class="topic" onclick="showContent('chair')">How to fix a
broken chair?</div>
<div class="topic" onclick="showContent('cooking')">Quick Cooking
Tips</div>
<div class="topic" onclick="showContent('fitness')">Home Fitness
Routines</div>
<div class="topic" onclick="showContent('tech')">Latest Tech
Trends</div>
<div class="topic" onclick="showContent('travel')">Budget Travel
Hacks</div>
<div class="topic" onclick="showContent('gardening')">Beginner's
Gardening Guide</div>
<div class="topic" onclick="showContent('finance')">Personal
Finance Advice</div>
<div class="topic" onclick="showContent('wellness')">Mental
Wellness Tips</div>
<div class="topic" onclick="showContent('diy')">DIY Home
Projects</div>
<div class="topic" onclick="showContent('education')">Online
Learning Resources</div>
<div class="topic" onclick="showContent('pets')">Pet Care
Tips</div>
<div class="topic" onclick="showContent('books')">Book
Recommendations</div>
</div>
<div id="content">
<p>Click a topic to see its content</p>
</div>
</div>
<div id="footer">
<div id="credits">
<p>Special credits to ALIF MAHMUD</p>
</div>
</div>
</div>
<script>
const introLines = [
"Hey there! Fourth wall break inside a fourth wall break. That's
like... sixteen walls!",
"Welcome to the Helpful Website, where the content is made up and the
points don't matter!",
"Strap in, true believers! This website is about to take you on a ride
wilder than Wolverine's hair!",
"We've got everything from gaming news to DIY projects. It's like
Wikipedia, but with 100% more chimichangas!",
"Remember: with great power comes great clickability. And occasional
pop-up ads. Sorry about those.",
"Alright, let's get this show on the road! Click something, anything!
Except that. Don't click that.",
"End of intro. That's it. Why are you still reading? Go explore the
site, you beautiful weirdo!"
];
let currentLine = 0;
const deadpoolIntro = document.getElementById('deadpool-intro');
function typeWriter() {
if (currentLine < introLines.length) {
let i = 0;
const line = introLines[currentLine];
deadpoolIntro.innerHTML = '';
const typing = setInterval(() => {
if (i < line.length) {
deadpoolIntro.innerHTML += line.charAt(i);
i++;
} else {
clearInterval(typing);
currentLine++;
setTimeout(typeWriter, 1500);
}
}, 50);
} else {
skipIntro();
}
}
function skipIntro() {
document.getElementById('intro-screen').style.display = 'none';
document.getElementById('welcome-screen').style.display = 'flex';
}
const funFacts = [
"This website was created on satureday!",
"Here's an interesting fact",
"That sounds awful",
"Did you beilve me?",
"Fun fact I can trace your ip :)"
];
function showFunFact() {
const randomFact = funFacts[Math.floor(Math.random() *
funFacts.length)];
document.querySelectorAll('#fun-fact').forEach(el => el.textContent =
randomFact);
}
function showIntermediateScreen() {
var userName = document.getElementById('name-input').value;
if (userName) {
document.getElementById('welcome-screen').style.display = 'none';
document.getElementById('welcome-message').textContent = `Welcome,
${userName}!`;
document.getElementById('intermediate-screen').style.display =
'flex';
} else {
alert('Enter your name,Idiot!!');
}
}
function showMainContent() {
document.getElementById('intermediate-screen').style.display = 'none';
document.getElementById('container').style.display = 'block';
}
function showContent(topic) {
var content = document.getElementById('content');
var topicContent = {
gaming: `
<h3>Exciting Gaming News for the OGs!!</h3>
<ul>
<li class="fade-in-item">The latest AAA title,
<strong>"Cyberpunk 2077: Reloaded"</strong>, has just been announced.</li>
<li class="fade-in-item">Features groundbreaking AI-driven NPCs
that adapt to your gameplay style.</li>
<li class="fade-in-item">Explore a fully destructible
environment where every decision impacts the world.</li>
<li class="fade-in-item">Coming to next-gen consoles with ray
tracing and 4K support.</li>
<li class="fade-in-item"> The game you all had been waiting
since your birth.....<strong>Grand theift Auto 6 </strong> is coming to consoles on
fall 2025.</li>
</ul>
`,
affairs: `
<h3>Latest Current Affairs</h3>
<ul>
<li class="fade-in-item">Global leaders have agreed on a
landmark climate accord.</li>
<li class="fade-in-item">Pledge to reduce carbon emissions by
50% within the next decade.</li>
<li class="fade-in-item">New policies will be implemented to
promote renewable energy sources.</li>
<li class="fade-in-item">Developing countries will receive aid
to adapt to climate change.</li>
</ul>
`,
chair: `
<h3>How to Fix a Broken Chair</h3>
<ul>
<li class="fade-in-item">Identify the problem: loose leg,
broken back support, or damaged seat.</li>
<li class="fade-in-item">For a loose leg: tighten all screws
and bolts, and consider adding wood glue for extra stability.</li>
<li class="fade-in-item">For a broken back support: use a
strong adhesive or brackets to reinforce the area.</li>
<li class="fade-in-item">Damaged seat: reupholster it with new
fabric or padding.</li>
</ul>
`,
cooking: `
<h3>Quick Cooking Tips</h3>
<ul>
<li class="fade-in-item">Always preheat your pan before adding
ingredients to ensure even cooking.</li>
<li class="fade-in-item">Use fresh herbs to enhance the flavor
and aroma of your dishes.</li>
<li class="fade-in-item">Learn to properly season your dishes -
taste as you go and adjust accordingly.</li>
<li class="fade-in-item">Experiment with spices and seasonings
to create new and exciting flavors.</li>
</ul>
`,
fitness: `
<h3>Home Fitness Routines</h3>
<ul>
<li class="fade-in-item">High-Intensity Interval Training
(HIIT): 30 seconds of burpees, 30 seconds of mountain climbers, 30 seconds of jump
squats.</li>
<li class="fade-in-item">Bodyweight exercises: push-ups,
squats, lunges, and planks to target all major muscle groups.</li>
<li class="fade-in-item">Yoga and stretching: improve
flexibility and reduce stress with daily practice.</li>
<li class="fade-in-item">Cardio: incorporate running, cycling,
or jumping rope to boost your heart health.</li>
</ul>
`,
tech: `
<h3>Latest Tech Trends</h3>
<ul>
<li class="fade-in-item">Artificial Intelligence (AI) is
revolutionizing healthcare, enabling earlier disease detection.</li>
<li class="fade-in-item">5G technology is set to transform
connectivity with ultra-fast internet speeds.</li>
<li class="fade-in-item">Wearable tech: smartwatches and
fitness trackers now offer advanced health monitoring.</li>
<li class="fade-in-item">Blockchain technology is being adopted
for secure, transparent transactions.</li>
</ul>
`,
travel: `
<h3>Budget Travel Hacks</h3>
<ul>
<li class="fade-in-item">Use flight comparison websites and set
up price alerts to find the best deals.</li>
<li class="fade-in-item">Travel during off-peak seasons to
enjoy lower rates and fewer crowds.</li>
<li class="fade-in-item">Consider staying in hostels or using
services like Airbnb for affordable accommodations.</li>
<li class="fade-in-item">Pack light to avoid baggage fees and
make traveling more convenient.</li>
</ul>
`,
gardening: `
<h3>Beginner's Gardening Guide</h3>
<ul>
<li class="fade-in-item">Start small with a herb garden or a
few potted plants.</li>
<li class="fade-in-item">Choose plants suited to your climate
and available sunlight.</li>
<li class="fade-in-item">Water your plants regularly, but avoid
overwatering to prevent root rot.</li>
<li class="fade-in-item">Use compost or organic fertilizer to
enrich your soil and promote healthy growth.</li>
</ul>
`,
finance: `
<h3>Personal Finance Advice</h3>
<ul>
<li class="fade-in-item">Create a detailed budget to track your
income and expenses.</li>
<li class="fade-in-item">Set up an emergency fund aiming for 3-
6 months of living expenses.</li>
<li class="fade-in-item">Invest in a diversified portfolio to
grow your wealth over time.</li>
<li class="fade-in-item">Regularly review and adjust your
financial goals as needed.</li>
</ul>
`,
wellness: `
<h3>Mental Wellness Tips</h3>
<ul>
<li class="fade-in-item">Practice mindfulness meditation for 10
minutes daily to reduce stress.</li>
<li class="fade-in-item">Maintain a consistent sleep schedule,
aiming for 7-9 hours per night.</li>
<li class="fade-in-item">Stay physically active with regular
exercise to boost your mood and energy levels.</li>
<li class="fade-in-item">Connect with loved ones and maintain
strong social ties for emotional support.</li>
</ul>
`,
diy: `
<h3>DIY Home Projects</h3>
<ul>
<li class="fade-in-item">Create a vertical garden using a
wooden pallet for a unique and space-saving plant display.</li>
<li class="fade-in-item">Build a rustic coffee table from
reclaimed wood for a cozy and eco-friendly addition to your living room.</li>
<li class="fade-in-item">Update your kitchen with a fresh coat
of paint and new cabinet hardware.</li>
<li class="fade-in-item">Construct floating shelves for stylish
and functional storage.</li>
</ul>
`,
education: `
<h3>Online Learning Resources</h3>
<ul>
<li class="fade-in-item">Platforms like Coursera and edX offer
university-level courses for free.</li>
<li class="fade-in-item">Khan Academy provides excellent
resources for K-12 subjects, including math, science, and history.</li>
<li class="fade-in-item">Duolingo is a fun and effective way to
learn new languages.</li>
<li class="fade-in-item">Explore creative skills with
Skillshare, offering courses on design, photography, and more.</li>
</ul>
`,
pets: `
<h3>Pet Care Tips</h3>
<ul>
<li class="fade-in-item">Ensure regular vet check-ups and keep
vaccinations up to date.</li>
<li class="fade-in-item">Provide a balanced diet appropriate
for your pet's age and health needs.</li>
<li class="fade-in-item">Exercise your pets daily to keep them
healthy and happy.</li>
<li class="fade-in-item">Spend quality time with your pets to
strengthen your bond and reduce their stress.</li>
</ul>
`,
books: `
<h3>Book Recommendations</h3>
<ul>
<li class="fade-in-item"><strong>"To Kill a
Mockingbird"</strong> by Harper Lee: A timeless exploration of racial injustice in
the American South.</li>
<li class="fade-in-item"><strong>"1984"</strong> by George
Orwell: A chilling vision of a dystopian future under totalitarian rule.</li>
<li class="fade-in-item"><strong>"Pride and Prejudice"</strong>
by Jane Austen: A classic tale of love, society, and the complexities of
relationships.</li>
<li class="fade-in-item"><strong>"The Catcher in the
Rye"</strong> by J.D. Salinger: A poignant story of adolescent rebellion and the
search for identity.</li>
</ul>
`
};
content.innerHTML = topicContent[topic] || '<p>Content not available.</p>';
// Apply animation to each list item in the content

const items = document.querySelectorAll('.fade-in-item');
items.forEach((item, index) => {
item.style.animation = `fadeInUp 0.5s ease-in-out ${index * 0.2}s
forwards`;
item.style.opacity = 0;
});
}
</script>
<script>
const funFacts = [
"This website was created on satureday!",
"Here's an interesting fact",
"That sounds awful",
"Did you beilve me?",
"Fun fact I can trace your ip :)"
];
function showFunFact() {
const randomFact = funFacts[Math.floor(Math.random() *
funFacts.length)];
document.querySelectorAll('#fun-fact').forEach(el => el.textContent =
randomFact);
}
setInterval(showFunFact, 5000);
function showIntermediateScreen() {
var userName = document.getElementById('name-input').value;
if (userName) {
document.getElementById('welcome-screen').style.display = 'none';
document.getElementById('welcome-message').textContent = `Welcome,
${userName}!`;
document.getElementById('intermediate-screen').style.display =
'flex';
} else {
alert('Please enter your name!');
}
}
function showMainContent() {
document.getElementById('intermediate-screen').style.display = 'none';
document.getElementById('container').style.display = 'block';
}
showFunFact(); // Show the first fact immediately

}
// Initialize
document.addEventListener('DOMContentLoaded', (event) => {
typeWriter();
setInterval(showFunFact, 5000);
showFunFact(); // Show the first fact immediately
});
</script>
</body>
</html>

Withintro4 HTML

Uploaded by

Copyright:

Available Formats

Withintro4 HTML

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Withintro4 HTML

Uploaded by

Copyright:

Available Formats

<!

.bouncy:nth-child(1) { animation-delay: 0s; }

<div id="intermediate-screen" onclick="showMainContent()">

content.innerHTML = topicContent[topic] || '<p>Content not available.</p>';

// Apply animation to each list item in the content

showFunFact(); // Show the first fact immediately

You might also like