Skip to content

hackspehere index.html and styles.css #20

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
abhirami102 wants to merge 3 commits into
base: main
Choose a base branch
from
Open

hackspehere index.html and styles.css #20

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
f960d25
Create Abhirami Balakrishnan
abhirami102 May 28, 2025
82ecb3b
Rename Abhirami Balakrishnan to Abhirami_Balakrishnan/readme.md
abhirami102 May 28, 2025
9df4b8f
Add files via upload
abhirami102 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
41 changes: 41 additions & 0 deletions Abhirami_Balakrishnan/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hacksphere'25</title>
<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
<link rel="stylesheet" href="styles.css" >


</head>
<body>
<nav>
<ul>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
<section class="heading">
<h1>HackSphere 2025</h1>
<h3>Code. Create. Conquer.</h3>
<p>June 20–22, 2025 – Online</p>
<button type="submit">Register Now</button>
</section>
<section id="about">
<h2>About HackSphere</h2>
<p>HackSphere 2025 is a global 48-hour hackathon where developers, designers, and creators unite to innovate and build impactful projects. Whether you’re a seasoned coder or just starting out, this event offers a platform to showcase your skills and collaborate with like-minded individuals.</p>
<p>Over the course of two days, participants will tackle real-world challenges, explore new technologies, and push their creativity to the limit. With online workshops, mentorship sessions, and networking opportunities, HackSphere 2025 is designed to inspire and empower every participant.</p>
<p>Join us from anywhere in the world and be part of a vibrant community passionate about coding, design, and problem-solving. Whether you come to compete or to learn, HackSphere 2025 is your chance to connect, create, and conquer. </p>

</section>
<section id="contact">
<h2>Contact Us</h2>
<p>If you have any questions or need assistance, feel free to reach out to us.</p>
<p>Email: <a href="mailto:hacksphere@example.com">hacksphere@example.com</a></p>
</section>
<footer>
<p>© 2025 HackSphere. All rights reserved.</p>
</footer>
</body>
</html>
1 change: 1 addition & 0 deletions Abhirami_Balakrishnan/readme.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@

118 changes: 118 additions & 0 deletions Abhirami_Balakrishnan/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,118 @@
body {
font-family: 'Poppins', sans-serif;
margin: 0 auto;
scroll-behavior: smooth;
background-color: #1E1E2F;
color: #E0E0E0;
}

h1, h2 {
color: #FF6B6B;
}

section.heading {
background-color: #2A2A40;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
padding: 20px;
}

.heading h1 {
font-size: 3rem;
margin-bottom: 20px;
}

.heading h3 {
font-size: 1.5rem;
margin-bottom: 10px;
color: #FFD93D;
}

.heading p {
font-size: 1.2rem;
margin-bottom: 30px;
color: #9BE8D8;
}

button {
background-color: #FF6B6B;
color: #ffffff;
padding: 12px 24px;
border: none;
border-radius: 8px;
font-size: 1rem;
cursor: pointer;
display: inline-block;
}

button:hover {
background-color: #FF4E4E;
color: #fff;
}

#about {
padding: 2px;
height: 35vh;
justify-content: center;
align-items: center;
text-align: center;
padding: 50px;
background-color: #34344A;
text-decoration: none;
}

#about h2 {
color: #FFD93D;
}

#about p {
text-align: left;
color: #E0E0E0;
}

#contact {
background-color: #2A2A40;
padding: 50px;
text-align: center;
}

#contact a:hover {
color: #FFD93D;
}

p {
color: #E0E0E0;
}

nav {
position: fixed;
top: 0;
width: 100%;
background-color: #FFD93D;
padding: 10px 20px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
z-index: 1000;
}

nav ul {
list-style: none;
display: flex;
justify-content: flex-start;
gap: 20px;
}

nav a {
text-decoration: none;
color: #1E1E2F;
font-weight: bold;
}

footer {
background-color: #2A2A40;
text-align: center;
color: #E0E0E0;
}