Skip to content

Added Explore buttons linking to official program websites #832

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

Added Explore buttons linking to official program websites #832

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
83df6b3
Replaced upcoming badges with explore buttons linking to official web…
hrishikaranjan Feb 17, 2026
54a8e57
Resolved merge conflict and added explore buttons
hrishikaranjan Feb 17, 2026
656be28
Fixed program cards and added explore buttons with official links
hrishikaranjan Feb 17, 2026
0eaf6db
Fixed duplicate body tag
hrishikaranjan Feb 17, 2026
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
150 changes: 103 additions & 47 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -584,6 +584,27 @@
justify-content: center;
}
}



.explore-btn{
background: linear-gradient(45deg,#28a745,#20c997);
color:white;
padding:10px 22px;
border:none;
border-radius:25px;
font-weight:600;
cursor:pointer;
transition:0.3s;
}

.explore-btn:hover{
transform: scale(1.08);
box-shadow:0 6px 18px rgba(0,0,0,0.2);
}



</style>
<link rel="stylesheet" href="frontend/css/recommendations.css" />

Expand Down Expand Up @@ -612,9 +633,7 @@
<span>Your Gateway to Open Source</span>
</div>

<body>
<div id="cursor-highlight" aria-hidden="true"></div>
<div id="navbar"></div>

<h1>
Navigate Your<br>
<span class="gradient-text">Open Source Odyssey</span>
Expand Down Expand Up @@ -735,52 +754,89 @@ <h3>🎥 Video for Beginners</h3>
<!-- Programs Section -->

<section class="programs">
<h3>Open Source Programs</h3>
<p>
Explore ongoing and upcoming open-source programs with timelines,
prerequisites, and official resources.
</p>

<div class="card-container">
<div class="card">
<div class="card-icon"><i class="fas fa-code"></i></div>
<h4>Google Summer of Code</h4>
<p>A global program focused on bringing new contributors into open source software development.</p>
<span class="badge">Upcoming</span>
</div>
<div class="card">
<div class="card-icon"><i class="fas fa-users"></i></div>
<h4>GSSoC</h4>
<p>GirlScript Summer of Code is a three-month-long Open Source program by GirlScript Foundation.</p>
<span class="badge">Upcoming</span>
</div>
<div class="card">
<div class="card-icon"><i class="fas fa-terminal"></i></div>
<h4>Hacktoberfest</h4>
<p>A month-long celebration of open-source software run by DigitalOcean.</p>
<span class="badge">Upcoming</span>
</div>
<div class="card">
<div class="card-icon"><i class="fas fa-snowflake"></i></div>
<h4>Social Winter of Code</h4>
<p>Beginner-focused winter open-source program.</p>
<span class="badge">Upcoming</span>
</div>
<div class="card">
<div class="card-icon"><i class="fab fa-linux"></i></div>
<h4>Linux Foundation</h4>
<p>Explore various mentorship opportunities within the massive Linux ecosystem.</p>
<span class="badge">Upcoming</span>
</div>
<div class="card">
<div class="card-icon"><i class="fas fa-globe"></i></div>
<h4>Outreachy</h4>
<p>Provides internships to people subject to systemic bias and underrepresented in tech.</p>
<span class="badge">Upcoming</span>
</div>
<h3>Open Source Programs</h3>
<p>
Explore ongoing and upcoming open-source programs with timelines,
prerequisites, and official resources.
</p>

<div class="card-container">

<!-- GSoC -->
<div class="card">
<div class="card-icon"><i class="fas fa-code"></i></div>
<h4>Google Summer of Code</h4>
<p>A global program focused on bringing new contributors into open source software development.</p>
<a href="https://summerofcode.withgoogle.com/" target="_blank" rel="noopener noreferrer">
<button class="explore-btn">
Explore <i class="fas fa-arrow-up-right-from-square"></i>
</button>
</a>
</div>

<!-- GSSoC -->
<div class="card">
<div class="card-icon"><i class="fas fa-users"></i></div>
<h4>GSSoC</h4>
<p>GirlScript Summer of Code is a three-month-long Open Source program by GirlScript Foundation.</p>
<a href="https://gssoc.girlscript.tech/" target="_blank" rel="noopener noreferrer">
<button class="explore-btn">
Explore <i class="fas fa-arrow-up-right-from-square"></i>
</button>
</a>
</div>
</section>

<!-- Hacktoberfest -->
<div class="card">
<div class="card-icon"><i class="fas fa-terminal"></i></div>
<h4>Hacktoberfest</h4>
<p>A month-long celebration of open-source software run by DigitalOcean.</p>
<a href="https://hacktoberfest.com/" target="_blank" rel="noopener noreferrer">
<button class="explore-btn">
Explore <i class="fas fa-arrow-up-right-from-square"></i>
</button>
</a>
</div>

<!-- SWOC -->
<div class="card">
<div class="card-icon"><i class="fas fa-snowflake"></i></div>
<h4>Social Winter of Code</h4>
<p>Beginner-focused winter open-source program.</p>
<a href="https://www.socialwinterofcode.com/" target="_blank" rel="noopener noreferrer">
<button class="explore-btn">
Explore <i class="fas fa-arrow-up-right-from-square"></i>
</button>
</a>
</div>

<!-- Linux Foundation -->
<div class="card">
<div class="card-icon"><i class="fab fa-linux"></i></div>
<h4>Linux Foundation</h4>
<p>Explore various mentorship opportunities within the massive Linux ecosystem.</p>
<a href="https://www.linuxfoundation.org/" target="_blank" rel="noopener noreferrer">
<button class="explore-btn">
Explore <i class="fas fa-arrow-up-right-from-square"></i>
</button>
</a>
</div>

<!-- Outreachy -->
<div class="card">
<div class="card-icon"><i class="fas fa-globe"></i></div>
<h4>Outreachy</h4>
<p>Provides internships to people subject to systemic bias and underrepresented in tech.</p>
<a href="https://www.outreachy.org/" target="_blank" rel="noopener noreferrer">
<button class="explore-btn">
Explore <i class="fas fa-arrow-up-right-from-square"></i>
</button>
</a>
</div>

</div>
</section>



<main>
Expand Down
Loading