Scribd
Upload
7 views3 pages

Message

This document is an HTML webpage for 'Orbital Social' featuring a welcome screen and social media links. It includes a button to reveal the links and a music player that plays background music. The page is styled with CSS for a visually appealing layout and interactive elements.

Uploaded by

190t101
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
7 views3 pages

Message

This document is an HTML webpage for 'Orbital Social' featuring a welcome screen and social media links. It includes a button to reveal the links and a music player that plays background music. The page is styled with CSS for a visually appealing layout and interactive elements.

Uploaded by

190t101
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>Social Media Links</title>
<style>
body {
height: 100vh;
width: 100vw;
margin: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
font-family: Arial, sans-serif;
background:
url('https://i.pinimg.com/originals/72/63/fa/7263fa67eff5504ff689715111d73308.gif')
no-repeat center center fixed;
background-size: cover;
text-align: center;
padding: 50px;
color: white;
}
.container {
background: rgba(0, 0, 0, 0.7);
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
max-width: 400px;
text-align: center;
}
.hidden {
display: none;
}
.welcome-button {
margin-top: 20px;
padding: 15px 30px;
font-size: 18px;
font-weight: bold;
color: white;
background-color: gray;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background 0.3s;
}
.welcome-button:hover {
background-color: #008acb;
}
.social-links {
display: flex;
justify-content: center;
gap: 15px;
margin-top: 20px;
}
.social-links a {
display: flex;
justify-content: center;
align-items: center;
width: 40px;
height: 40px;
border-radius: 50%;
background: white;
box-shadow: 0px 4px 6px rgba(0,0,0,0.3);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.social-links a:hover {
transform: scale(1.1);
box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.5);
}
.social-links img {
width: 24px;
height: 24px;
}
</style>
</head>
<body>
<div class="container" id="welcome-screen">
<h1>Welcome To Orbital Social</h1>
<button class="welcome-button" onclick="showLinks()">Enter</button>
</div>
<div class="container hidden" id="social-links">
<h1 style="text-shadow: 0 0 10px rgba(255, 255, 255, 0.8);">Orbital
Social</h1>
<div class="social-links">
<a href="https://www.instagram.com/_vn_/#" target="_blank">
<img src="https://cdn-icons-png.flaticon.com/512/1409/1409946.png"
alt="Instagram">
</a>
<a href="https://discord.gg/botnet" target="_blank">
<img src="https://cdn-icons-png.flaticon.com/512/5968/5968756.png"
alt="Discord">
</a>
<a href="https://www.xbox.com/ar-SA/play/user/M9B" target="_blank">
<img src="https://i.postimg.cc/KjLGc7ft/b00-Store-Xbox-Gift-
Card.jpg" alt="Xbox">
</a>
</div>
<div class="xbox-list">
<h2>Xbox 4Ls List</h2>
<a href="https://pastebin.com/Ui6wigZR" target="_blank">Press to see
full list</a>
</div>
<div class="music-player" style="margin-top: 20px; text-align: center;">
<audio id="bg-music" loop>
<source
src="https://www.dropbox.com/scl/fi/wfafeoqzto0ojgas999xq/151.mp3?
rlkey=bls8ixfjow5kcglj568of6ygz&st=qmjq7j6h&raw=1" type="audio/mpeg">
‫متصفحك ال يدعم تشغيل الصوت‬.
</audio>
</div>
</div>
<script>
function showLinks() {
document.getElementById('welcome-screen').classList.add('hidden');
document.getElementById('social-links').classList.remove('hidden');
document.getElementById('bg-music').play();
}
document.addEventListener('keydown', function(event) {
if (event.key === 'Enter') {
showLinks();
}
});
</script>
</body>
</html>

You might also like