Scribd
Upload
6 views9 pages

Withintro HTMKL

Uploaded by

alifmahmudshadhin
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
6 views9 pages

Withintro HTMKL

Uploaded by

alifmahmudshadhin
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 9

<!

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;
justify-content: center;
align-items: center;
text-align: center;
font-family: 'Comic Neue', cursive;
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-family: 'Bangers', cursive;
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;
font-family: 'Comic Neue', cursive;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
font-size: 1.2em;
animation: fadeIn 1s ease-in-out;
}

#left-sidebar {
left: 0;
}

#right-sidebar {
right: 0;
}

#fun-fact {
animation: fadeInUp 1s ease-in-out;
}

@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;
justify-content: center;
align-items: center;
flex-direction: column;
z-index: 1000;
border: 8px solid #54a0ff;
box-sizing: border-box;
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 {
font-family: 'Bangers', cursive;
color: #54a0ff;
text-shadow: 3px 3px 0 #5f27cd;
font-size: 4em;
margin-bottom: 20px;
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;
border: 4px solid #54a0ff;
border-radius: 10px;
font-family: 'Comic Neue', cursive;
margin-bottom: 20px;
animation: fadeInUp 1s ease-in-out;
}

button {
background-color: #54a0ff;
border: none;
border-radius: 10px;
color: white;
font-family: 'Bangers', cursive;
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;
border: 8px solid #54a0ff;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 0 20px rgba(0,0,0,0.2);
display: none;
animation: slideInLeft 1s ease-in-out;
}

#header {
background-color: #54a0ff;
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;
border-radius: 10px;
color: #333;
cursor: pointer;
font-family: 'Comic Neue', cursive;
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;
font-family: 'Comic Neue', cursive;
animation: fadeInUp 1s ease-in-out;
}

#credits {
font-family: 'Bangers', cursive;
font-size: 1.2em;
text-shadow: 1px 1px 0 #5f27cd;
white-space: nowrap;
overflow: hidden;
box-sizing: border-box;
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) {
// ... (your existing showContent function) ...
}

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

You might also like