Skip to content

Commit

Permalink
feat: Better UI
Browse files Browse the repository at this point in the history
  • Loading branch information
@JollyJolli
JollyJolli committed Nov 4, 2024
1 parent 88d325d commit 4a9bf8b
Showing 1 changed file with 164 additions and 88 deletions.
252 changes: 164 additions & 88 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,19 +3,20 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HacktoberWall Directory</title>
<title>HacktoberWall</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&family=Playfair+Display:wght@700&display=swap" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/locomotive-scroll.min.css" rel="stylesheet">
<style>
/* Color Variables */
:root {
--bg-primary: #f2f5f7;
--bg-secondary: #ffffff;
--text-primary: #2b2d42;
--text-secondary: #606060;
--accent-color: #00796b;
--accent-hover: #005a4d;
--bg-primary: #F5F5F5;
--bg-secondary: #FFFFFF;
--text-primary: #333333;
--text-secondary: #666666;
--accent-color: #6C63FF;
--accent-hover: #4E48D8;
}

/* Reset and Global Styles */
Expand All @@ -25,114 +26,158 @@
padding: 0;
}
body {
font-family: 'Poppins', sans-serif;
font-family: 'Inter', sans-serif;
background-color: var(--bg-primary);
color: var(--text-primary);
line-height: 1.7;
line-height: 1.6;
font-size: 16px;
}
.container {
max-width: 1100px;
max-width: 1200px;
margin: auto;
padding: 0 20px;
padding: 0 30px;
}

/* Header Styles */
header {
background-color: var(--bg-secondary);
padding: 15px 0;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
margin-bottom: 50px;
padding: 20px 0;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 100;
transition: background-color 0.3s, box-shadow 0.3s;
}
nav {
header.scrolled {
background-color: rgba(255, 255, 255, 0.95);
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
.header-content {
display: flex;
justify-content: space-between;
align-items: center;
}
.logo {
font-size: 1.8rem;
font-family: 'Playfair Display', serif;
font-size: 2.4rem;
font-weight: 700;
color: var(--accent-color);
text-decoration: none;
text-transform: uppercase;
letter-spacing: 2px;
transition: color 0.3s;
}
.logo:hover {
color: var(--accent-hover);
}
.nav-links {
list-style: none;
display: flex;
gap: 25px;
gap: 30px;
}
.nav-links a {
color: var(--text-secondary);
font-weight: 500;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 1px;
transition: color 0.3s;
}
.nav-links a:hover {
color: var(--accent-color);
}

/* Main Content */
main {
padding: 40px 0;
.main-content {
padding-top: 120px;
}
.section {
margin-bottom: 50px;
padding: 100px 0;
scroll-snap-align: start;
}
.section h2 {
font-size: 2.2rem;
font-size: 2.6rem;
font-weight: 700;
margin-bottom: 20px;
margin-bottom: 30px;
color: var(--text-primary);
font-family: 'Playfair Display', serif;
letter-spacing: 1px;
}
.section p {
font-size: 1rem;
font-size: 1.1rem;
color: var(--text-secondary);
margin-bottom: 15px;
margin-bottom: 20px;
}

/* Directory Section */
.directory {
display: flex;
flex-wrap: wrap;
gap: 30px;
justify-content: center;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 40px;
}
.year-card {
background-color: var(--bg-secondary);
padding: 30px;
border-radius: 10px;
width: 220px;
padding: 40px;
border-radius: 12px;
text-align: center;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
transition: transform 0.3s, box-shadow 0.3s;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
transition: transform 0.3s, box-shadow 0.4s;
position: relative;
overflow: hidden;
}
.year-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
transform: translateY(-10px);
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
}
.year-card:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(45deg, var(--accent-color), var(--accent-hover));
opacity: 0.08;
transition: opacity 0.3s;
}
.year-card:hover:before {
opacity: 0.12;
}
.year-card a {
font-size: 1.5rem;
font-size: 2rem;
color: var(--accent-color);
font-weight: 600;
font-weight: 700;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 2px;
font-family: 'Playfair Display', serif;
position: relative;
z-index: 1;
transition: color 0.3s;
}
.year-card a:hover {
color: var(--accent-hover);
}
.coming-soon {
color: var(--text-secondary);
font-weight: 500;
font-size: 1rem;
font-size: 1.1rem;
text-transform: uppercase;
letter-spacing: 1px;
position: relative;
z-index: 1;
}

/* Footer Styles */
footer {
background-color: var(--bg-secondary);
padding: 15px 0;
padding: 20px 0;
text-align: center;
color: var(--text-secondary);
font-size: 0.9rem;
border-top: 1px solid #e0e0e0;
margin-top: 50px;
font-size: 1rem;
border-top: 1px solid #eee;
}
.contact-email {
color: var(--accent-color);
Expand All @@ -145,73 +190,104 @@
}
</style>
</head>
<body>
<header>
<body data-scroll-container>
<header id="header">
<div class="container">
<nav>
<div class="header-content">
<a href="#" class="logo">HacktoberWall</a>
<ul class="nav-links">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Directory</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#about">About</a></li>
<li><a href="#directory">Directory</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</div>
</div>
</header>

<main>
<div class="container">
<!-- About Section -->
<section class="section">
<div class="main-content" data-scroll-section>
<!-- About Section -->
<section class="section" id="about">
<div class="container">
<h2>About HacktoberWall</h2>
<p>HacktoberWall is an open-source initiative encouraging newcomers to contribute to open source projects. Our annual archive showcases contributor names, marking each year with a unique design and visual style.</p>
<p>Founded by <strong>Jolly (Owner)</strong> and <strong>Phanty (Co-owner)</strong>, HacktoberWall remains committed to promoting inclusivity and community in open source.</p>
</section>
<p>HacktoberWall is an open-source initiative that encourages newcomers to contribute to open source projects. Our annual archive showcases contributor names, each year marked with a unique design and visual style.</p>
<p>Founded by <strong>Jolly (Owner)</strong> and <strong>Phanty (Co-owner)</strong>, HacktoberWall remains committed to promoting inclusivity and community in open source, especially during the spooky season of Hacktoberfest.</p>
</div>
</section>

<!-- Directory Section -->
<section class="section">
<h2>Explore Each Year Here</h2>
<!-- Directory Section -->
<section class="section" id="directory">
<div class="container">
<h2>Explore Each Year</h2>
<div class="directory" id="directory"></div>
</section>
</div>
</section>

<!-- Contact Section -->
<section class="section">
<!-- Contact Section -->
<section class="section" id="contact">
<div class="container">
<h2>Contact Us</h2>
<p>If you have questions or would like to contribute, please reach out:</p>
<a href="mailto:[email protected]" class="contact-email">[email protected]</a>
</section>
</div>
</main>
</div>
</section>
</div>

<footer>
<div class="container">
&copy; 2024 HacktoberWall. All rights reserved.
</div>
</footer>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/locomotive-scroll.min.js"></script>
<script>
// Data for Directory
const years = [
{ year: 2024, url: "2024/src/index.html" },
{ year: 2025, url: null }
];

// Populate Directory
const directory = document.getElementById("directory");

years.forEach(entry => {
const card = document.createElement("div");
card.classList.add("year-card");

if (entry.url) {
card.innerHTML = `<a href="${entry.url}">${entry.year}</a>`;
} else {
card.innerHTML = `${entry.year} <span class="coming-soon">(Coming Soon)</span>`;
}

directory.appendChild(card);
// Initialize Locomotive Scroll
document.addEventListener('DOMContentLoaded', () => {
const scroll = new LocomotiveScroll({
el: document.querySelector('[data-scroll-container]'),
smooth: true,
smartphone: {
smooth: true
},
tablet: {
smooth: true
}
});

// Toggle header background on scroll
const header = document.getElementById("header");
scroll.on("scroll", (instance) => {
if (instance.scroll.y > 0) {
header.classList.add("scrolled");
} else {
header.classList.remove("scrolled");
}
});

// Data for Directory
const years = [
{ year: 2024, url: "2024/src/index.html" },
{ year: 2025, url: null }
];

// Populate Directory
const directory = document.getElementById("directory");

years.forEach(entry => {
const card = document.createElement("div");
card.classList.add("year-card");

if (entry.url) {
const link = document.createElement("a");
link.href = entry.url;
link.textContent = entry.year;
card.appendChild(link);
} else {
card.innerHTML = `${entry.year} <span class="coming-soon">(Coming Soon)</span>`;
}

directory.appendChild(card);
});
});
</script>
</body>
</html>
</html>

0 comments on commit 4a9bf8b

Please sign in to comment.