Scribd
Upload
22 views6 pages

New Text Document

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
22 views6 pages

New Text Document

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/ 6

<!

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>
<style>
@import url('https://fonts.googleapis.com/css2?
family=Roboto:wght@400;700&display=swap');

body {
font-family: 'Roboto', sans-serif;
background-color: #f5f5f5;
margin: 0;
padding: 0;
overflow: hidden;
}

/* Welcome Screen Styles */


#welcome-screen {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #ff5733;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
animation: fadeInBody 1s ease-in-out;
z-index: 1000;
}

@keyframes fadeInBody {
from {
opacity: 0;
}

to {
opacity: 1;
}
}

#welcome-screen h1 {
color: white;
font-size: 3em;
margin: 0;
animation: bounceHeader 1s ease-in-out;
}

@keyframes bounceHeader {
0%,
20%,
50%,
80%,
100% {
transform: translateY(0);
}

40% {
transform: translateY(-15px);
}

60% {
transform: translateY(-10px);
}
}

#name-input {
margin-top: 20px;
padding: 10px;
font-size: 1.5em;
border: none;
border-radius: 5px;
text-align: center;
}

#welcome-screen button {
margin-top: 20px;
padding: 10px 20px;
font-size: 1.5em;
border: none;
border-radius: 5px;
background-color: #2ecc71;
color: white;
cursor: pointer;
transition: background-color 0.3s;
}

#welcome-screen button:hover {
background-color: #27ae60;
}

/* Personalized Welcome Message */


#personalized-welcome {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #c70039;
color: white;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
font-size: 2em;
text-align: center;
animation: fadeInBody 1s ease-in-out;
z-index: 999;
}

#personalized-welcome p {
margin: 0;
animation: fadeInText 1s ease-in-out;
}

@keyframes fadeInText {
from {
opacity: 0;
}

to {
opacity: 1;
}
}

/* Main Content Styles */


#container {
max-width: 1000px;
margin: 20px auto;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
border-radius: 10px;
overflow: hidden;
opacity: 0;
transform: scale(0.9);
transition: opacity 1s ease, transform 1s ease;
}

#header {
background-color: #900c3f;
color: white;
padding: 20px;
text-align: center;
animation: bounceHeader 1s ease-in-out;
}

#header h1 {
margin: 0;
font-size: 2em;
}

#main-content {
display: flex;
min-height: 400px;
position: relative;
}

#topics {
background-color: #581845;
padding: 20px;
width: 30%;
color: white;
overflow-y: auto;
}

.topic {
background-color: rgba(255, 255, 255, 0.1);
margin: 10px 0;
padding: 15px;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s, transform 0.3s;
}
.topic:hover {
background-color: rgba(255, 255, 255, 0.2);
transform: translateX(5px);
}

#content {
background-color: #2ecc71;
padding: 20px;
width: 70%;
color: white;
overflow-y: auto;
position: relative;
}

#content-inner {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 20px;
box-sizing: border-box;
transition: transform 0.5s ease-out, opacity 0.5s ease-out;
transform: translateX(100%);
opacity: 0;
}

#content-inner.active {
transform: translateX(0);
opacity: 1;
}

#footer {
background-color: #2d3436;
color: #fff;
text-align: center;
padding: 10px;
font-size: 1em;
}

#footer p {
margin: 0;
font-size: 1.2em;
animation: creditsAnimation 10s linear infinite;
}

@keyframes creditsAnimation {
0% {
transform: translateX(100%);
}

100% {
transform: translateX(-100%);
}
}

/* Show Main Content after Welcome */


.show-content #container {
opacity: 1;
transform: scale(1);
}

@media (max-width: 768px) {


#main-content {
flex-direction: column;
}

#topics,
#content {
width: 100%;
}
}
</style>
</head>

<body class="show-content">
<!-- Welcome Screen -->
<div id="welcome-screen" style="display: none;">
<h1>Welcome!</h1>
<input id="name-input" type="text" placeholder="Enter your name">
<button onclick="startExperience()">Start</button>
</div>

<!-- Personalized Welcome Message -->


<div id="personalized-welcome" onclick="showMainContent()" style="display:
none;">
<p id="personalized-message">Welcome, hfh!</p>
<p>Click anywhere to enter the website</p>
</div>

<!-- Main Content -->


<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">
<div id="content-inner">
<p>Click a topic to see its content</p>
</div>
</div>
</div>

<div id="footer">
<p>Special credits to ALIF MAHMUD</p>
</div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function () {
let contentInner = document.getElementById('content-inner');

window.startExperience = function () {
var userName = document.getElementById('name-input').value;
if (userName) {
document.getElementById('personalized-message').innerText =
'Welcome, ' + userName + '!';
document.getElementById('welcome-screen').style.display =
'none';
document.getElementById('personalized-welcome').style.display =
'flex';
} else {
alert('Please enter your name.');
}

You might also like