Skip to content

Internship task- Alfie #58

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Alfievarghese wants to merge 4 commits into
base: main
Choose a base branch
from
Open

Internship task- Alfie #58

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
23a2e8d
Create Alfie_Varghese
Alfievarghese May 28, 2025
a592629
Delete Alfie_Varghese
Alfievarghese May 28, 2025
2bcd70a
Create index.html
Alfievarghese May 28, 2025
8aa5860
Merge pull request #1 from Alfievarghese/Alfievarghese-patch-1
Alfievarghese May 28, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
348 changes: 348 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,348 @@
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HackSphere 2025 - Code. Create. Conquer.</title>
<style>
:root {
--gradient-bg: linear-gradient(135deg, #0f0c29, #302b63, #24243e);
--dark-gradient: linear-gradient(135deg, #1a1a2e 0%, #0c0c0c 100%);
--accent-color: #00e6e6;
--text-primary: #ffffff;
--text-secondary: #c3c6e4;
--glass-bg: rgba(255, 255, 255, 0.05);
--glass-border: rgba(255, 255, 255, 0.1);
--heading-color: #9d8df1;
}* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: 'Segoe UI', sans-serif;
background: var(--dark-gradient);
color: var(--text-primary);
overflow-x: hidden;
line-height: 1.6;
}

nav {
background: var(--dark-gradient);
padding: 1rem 2rem;
text-align: center;
font-weight: bold;
font-size: 1.2rem;
}

.hero {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
text-align: center;
padding: 2rem;
background: var(--gradient-bg);
position: relative;
overflow: hidden;
}

.blobs {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 0;
overflow: hidden;
}

.blob {
position: absolute;
border-radius: 50%;
filter: blur(100px);
opacity: 0.5;
animation: blobAnimation 25s infinite;
mix-blend-mode: screen;
}

.blob1 {
top: 10%;
left: 20%;
width: 300px;
height: 300px;
background: #7f00ff;
}

.blob2 {
top: 60%;
left: 60%;
width: 400px;
height: 400px;
background: #00e6e6;
}

.blob3 {
top: 30%;
left: 70%;
width: 200px;
height: 200px;
background: #ffffff;
}

@keyframes blobAnimation {
0%, 100% { transform: translate(0, 0) scale(1); }
50% { transform: translate(50px, -50px) scale(1.2); }
}

h1 {
font-size: 3.5rem;
background: linear-gradient(135deg, #00e6e6, #ffffff);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-weight: 700;
z-index: 1;
}

.tagline {
font-size: 1.25rem;
color: var(--text-secondary);
margin-top: 1rem;
z-index: 1;
}

.countdown-box,
.register-btn,
.live-counter {
z-index: 1;
}

.countdown-box {
background: var(--glass-bg);
border: 1px solid var(--glass-border);
border-radius: 16px;
padding: 1.5rem 2rem;
margin-top: 2rem;
font-size: 1.5rem;
color: var(--accent-color);
box-shadow: 0 0 20px rgba(0, 255, 255, 0.2);
max-width: 320px;
}

.register-btn {
background: var(--dark-gradient);
border: 2px solid var(--accent-color);
color: var(--accent-color);
padding: 1rem 2rem;
margin-top: 2rem;
font-size: 1.1rem;
border-radius: 50px;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}

.register-btn::after {
content: "";
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
transition: left 0.5s;
}

.register-btn:hover::after {
left: 100%;
}

.register-btn:hover {
background: var(--accent-color);
color: #000;
}

.live-counter {
font-size: 1.2rem;
color: var(--text-secondary);
margin-top: 1rem;
}

section {
padding: 4rem 2rem;
text-align: center;
}

.section-title {
font-size: 2.5rem;
margin-bottom: 2rem;
color: var(--heading-color);
}

.about p,
.schedule p,
.partners p,
.contact p {
max-width: 700px;
margin: 0 auto 1.5rem;
color: var(--text-secondary);
font-size: 1.1rem;
}

.schedule-day {
background: var(--glass-bg);
border: 1px solid var(--glass-border);
border-radius: 12px;
margin: 1rem auto;
max-width: 600px;
padding: 1rem;
}

.faq-item {
max-width: 700px;
margin: 1rem auto;
text-align: left;
background: var(--glass-bg);
border-radius: 12px;
padding: 1rem;
border: 1px solid var(--glass-border);
}

.partners-logos {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 1.5rem;
}

.partner-logo {
background: var(--glass-bg);
padding: 1rem;
border-radius: 12px;
border: 1px solid var(--glass-border);
}

.partner-logo img {
height: 50px;
object-fit: contain;
filter: brightness(0) invert(1);
}

.contact input,
.contact textarea {
display: block;
width: 100%;
max-width: 500px;
margin: 0.5rem auto;
padding: 0.75rem;
border-radius: 8px;
border: none;
}

.contact button {
margin-top: 1rem;
background: var(--accent-color);
color: #000;
border: none;
padding: 0.75rem 2rem;
font-weight: bold;
border-radius: 8px;
cursor: pointer;
}

footer {
text-align: center;
padding: 2rem;
font-size: 0.9rem;
color: var(--text-secondary);
background: #111;
}

</style>
</head>
<body>
<nav>HackSphere Navigation</nav> <section class="hero">
<div class="blobs">
<div class="blob blob1"></div>
<div class="blob blob2"></div>
<div class="blob blob3"></div>
</div>
<h1>HackSphere 2025</h1>
<p class="tagline">Code. Create. Conquer.</p>
<div class="countdown-box" id="countdown">Countdown Loading...</div>
<div class="live-counter">🌍 13,492 hackers registered and counting!</div>
<button class="register-btn" onclick="showConfetti()">🚀 Register Now</button>
</section> <section class="about">
<h2 class="section-title">About HackSphere</h2>
<p>HackSphere 2025 is a global 48-hour hackathon designed to bring together developers, designers, and creators from across the world. This online event fosters collaboration, creativity, and rapid problem-solving.</p>
<p>Participants will form teams, build innovative solutions, and compete for prizes while learning from industry mentors and connecting with like-minded individuals.</p>
</section> <section class="schedule">
<h2 class="section-title">Event Schedule</h2>
<div class="schedule-day"><strong>Day 1:</strong> Kickoff, team formation, idea pitching</div>
<div class="schedule-day"><strong>Day 2:</strong> Workshops, hacking, mentorship</div>
<div class="schedule-day"><strong>Day 3:</strong> Submissions, judging, closing</div>
</section> <section class="faq">
<h2 class="section-title">FAQs</h2>
<div class="faq-item">
<strong>Who can participate?</strong>
<p>Anyone worldwide — students, professionals, or hobbyists.</p>
</div>
<div class="faq-item">
<strong>Is there a fee?</strong>
<p>No. HackSphere is 100% free.</p>
</div>
<div class="faq-item">
<strong>What do I need to join?</strong>
<p>A computer, internet connection, and creativity.</p>
</div>
</section> <section class="partners">
<h2 class="section-title">Our Partners</h2>
<div class="partners-logos">
<div class="partner-logo"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/44/Google-flutter-logo.svg/2048px-Google-flutter-logo.svg.png" alt="Demo Partner Logo"></div>
<div class="partner-logo"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/44/Google-flutter-logo.svg/2048px-Google-flutter-logo.svg.png" alt="Demo Partner Logo"></div>
<div class="partner-logo"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/44/Google-flutter-logo.svg/2048px-Google-flutter-logo.svg.png" alt="Demo Partner Logo"></div>
</div>
</section> <section class="contact">
<h2 class="section-title">Contact Us</h2>
<p>Email us at <a href="mailto:info@hacksphere.com">info@hacksphere.com</a></p>
<input type="text" placeholder="Your Name">
<input type="email" placeholder="Your Email">
<textarea placeholder="Your Message"></textarea>
<button>Send Message</button>
</section> <footer>
© 2025 HackSphere. All rights reserved.
</footer> <script>
const countdown = document.getElementById("countdown");
const eventDate = new Date("June 20, 2025 00:00:00").getTime();
const updateCountdown = () => {
const now = new Date().getTime();
const distance = eventDate - now;
if (distance < 0) {
countdown.innerHTML = "🚀 The event has begun!";
return;
}
const days = Math.floor(distance / (1000 * 60 * 60 * 24));
const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((distance % (1000 * 60)) / 1000);
countdown.innerHTML = `${days}d ${hours}h ${minutes}m ${seconds}s left`;
};
setInterval(updateCountdown, 1000);

function showConfetti() {
alert('🎉 Thanks for registering!');
const confetti = document.createElement('div');
confetti.innerHTML = '🎊 🎈 🎉 ✨ 🎆 🎇';
confetti.style.position = 'fixed';
confetti.style.top = '20%';
confetti.style.left = '50%';
confetti.style.transform = 'translate(-50%, -50%)';
confetti.style.fontSize = '2rem';
confetti.style.zIndex = '1000';
document.body.appendChild(confetti);
setTimeout(() => confetti.remove(), 3000);
}
</script></body>
</html>