Scribd
Upload
27 views3 pages

!DOCTYPE HTML 1

Uploaded by

LOHENDRA A/L JEEVA Moe
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
27 views3 pages

!DOCTYPE HTML 1

Uploaded by

LOHENDRA A/L JEEVA Moe
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/ 3

<!

DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lohendra's Roblox Blog</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: white;
color: #333;
}
header {
background-color: #4CAF50;
color: white;
padding: 1em;
text-align: center;
}
nav {
text-align: center;
margin: 20px 0;
}
nav a {
margin: 0 15px;
text-decoration: none;
color: #4CAF50;
font-weight: bold;
}
section {
padding: 20px;
margin: 10px 20px;
border-bottom: 1px solid #ddd;
}
footer {
text-align: center;
padding: 20px;
background-color: #f1f1f1;
}
.container {
max-width: 800px;
margin: 0 auto;
}
.contact-form {
display: flex;
flex-direction: column;
}
.contact-form label {
margin: 10px 0 5px;
}
.contact-form input, .contact-form textarea {
padding: 10px;
margin-bottom: 15px;
border: 1px solid #ccc;
border-radius: 5px;
}
.contact-form button {
padding: 10px;
border: none;
border-radius: 5px;
background-color: #4CAF50;
color: white;
font-size: 16px;
cursor: pointer;
}
.contact-form button:hover {
background-color: #45a049;
}
#search {
width: 100%;
padding: 10px;
margin-bottom: 20px;
border: 1px solid #ccc;
border-radius: 5px;
}
.game-list {
list-style-type: none;
padding: 0;
}
.game-list li {
padding: 10px;
border: 1px solid #ddd;
margin-bottom: 10px;
border-radius: 5px;
}
</style>
</head>
<body>
<header>
<h1>Lohendra's Roblox Blog</h1>
</header>
<nav>
<a href="#about">About Me</a>
<a href="#blog">Blog Posts</a>
<a href="#contact">Contact</a>
</nav>
<div class="container">
<section id="about">
<h2>About Me</h2>
<p>Welcome to my personal blog! My name is Lohendra, and you can find
more about me at <a href="http://www.lohendrapro.com"
target="_blank">www.lohendrapro.com</a>.</p>
</section>
<section id="blog">
<h2>Roblox Games</h2>
<input type="text" id="search" placeholder="Search Roblox games...">
<ul id="game-list" class="game-list">
<!-- Example static data -->
<li data-name="Adopt Me!">Adopt Me!</li>
<li data-name="Brookhaven">Brookhaven</li>
<li data-name="Tower of Hell">Tower of Hell</li>
<li data-name="Murder Mystery 2">Murder Mystery 2</li>
<li data-name="Bloxburg">Bloxburg</li>
<li data-name="Arsenal">Arsenal</li>
<li data-name="Piggy">Piggy</li>
<li data-name="Royale High">Royale High</li>
<li data-name="Jailbreak">Jailbreak</li>
<li data-name="Dungeon Quest">Dungeon Quest</li>
<!-- More games can be added here -->
</ul>
</section>
<section id="contact">
<h2>Contact</h2>
<form class="contact-form">
<label for="name">Name</label>
<input type="text" id="name" name="name" required>

<label for="email">Email</label>
<input type="email" id="email" name="email" required>

<label for="message">Message</label>
<textarea id="message" name="message" rows="5" required></textarea>

<button type="submit">Send</button>
</form>
</section>
</div>
<footer>
<p>&copy; 2024 Lohendra's Blog. All rights reserved.</p>
</footer>
<script>
document.getElementById('search').addEventListener('input', function() {
const searchValue = this.value.toLowerCase();
const games = document.querySelectorAll('.game-list li');
games.forEach(function(game) {
const gameName = game.getAttribute('data-name').toLowerCase();
if (gameName.includes(searchValue)) {
game.style.display = '';
} else {
game.style.display = 'none';
}
});
});
</script>
</body>
</html>

You might also like