diff --git a/index.html b/index.html
index 81e900ba5903a8fb813099ee2dc7fb442169c276..8cb146bde26d75970ba5a1d59e6e5c2b594d778e 100644
--- a/index.html
+++ b/index.html
@@ -1,202 +1,223 @@
<!doctype html>
<html>
-<head>
- <meta charset="utf-8">
- <meta http-equiv="x-ua-compatible" content="ie=edge">
- <title>Free Software Camp 2020</title>
- <meta name="description" content="">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <link rel="stylesheet" href="style.css" type="text/css" media="screen" />
- <link rel="apple-touch-icon" href="/apple-touch-icon.png">
- <!-- Place favicon.ico in the root directory -->
- <link rel="stylesheet" href="https://tools-static.wmflabs.org/cdnjs/ajax/libs/font-awesome/5.14.0/css/all.css" crossorigin="anonymous" />
-</head>
+ <head>
+ <meta charset="utf-8">
+ <meta http-equiv="x-ua-compatible" content="ie=edge">
+ <title>Free Software Camp 2020</title>
+ <meta name="description" content="">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <link rel="stylesheet" href="style.css" type="text/css" media="screen" />
+ <link rel="apple-touch-icon" href="/apple-touch-icon.png">
+ <!-- Place favicon.ico in the root directory -->
+ <link rel="stylesheet" href="https://tools-static.wmflabs.org/cdnjs/ajax/libs/font-awesome/5.14.0/css/all.css" crossorigin="anonymous" />
+ </head>
-<body>
- <main>
- <div class="nav-container">
- <nav>
- <div class="logo">
- <a href="#">Free Software<span style="color:#469198"> Camp</span></a>
- </div>
- <input type="checkbox" id="chk">
- <label for="chk" class="show-menu-btn" style="align-items:center;">
- <i class="nav-icon fas fa-bars"></i>
- </label>
- <ul class="menu">
- <li><a href="#about">About</a></li>
- <li><a href="coc.html">Code of Conduct</a></li>
- <li><a href="sched.html">Schedule</a></li>
- <li><a href="#contact">Contact</a></li>
- <label for="chk" class="hide-menu-btn"><i class="nav-icon fas fa-times"></i></label>
- </ul>
- </nav>
- </div>
- <section id="home" class="presentation">
- <div class="introduction">
- <div class="intro-text">
- <h1>Free Software <span style="color:#469198">Camp</h1>
- <p>A unique, online mentorship programme conceptualized and organized by Free Software Foundation of India and Free Software Community of India.</p>
- <div class="cta-block">
- <div class="cta">
- <a href='#about'><button>About us</button></a>
- </div>
- <div class="cta">
- <a href='learners.html'><button>Apply Now</button></a>
- </div>
+ <body>
+ <main>
+ <div class="nav-container">
+ <nav>
+ <div class="logo">
+ <a href="#">Free Software<span style="color:#469198"> Camp</span></a>
</div>
- </div>
- </div>
- <div class="cover">
- <img src='./assets/img/landing-image.png' alt="person on a bench" />
- </div>
- </section>
- <section id="about">
- <div class="about-section">
- <div class="about-cover">
- <img src='./assets/img/example-29.svg' alt="person in front of workspace" />
- </div>
- <div class="about-text">
- <h1 class="medium-heading"><span style="color:#469198">What is</span> Free Software <span style="color:#469198">Camp</span>?</h1>
- <p class="para">Free Software Camp is a mentorship programme for bringing more people to Free Software with strong focus on philosophy. We connect learners with experienced Free Software community members to work on some tasks together - this could be either technical or non technical.</p>
- </div>
+ <input type="checkbox" id="chk">
+ <label for="chk" class="show-menu-btn" style="align-items:center;">
+ <i class="nav-icon fas fa-bars"></i>
+ </label>
+ <ul class="menu">
+ <li><a href="#about">About</a></li>
+ <li><a href="coc.html">Code of Conduct</a></li>
+ <li><a href="sched.html">Schedule</a></li>
+ <li><a href="#contact">Contact</a></li>
+ <label for="chk" class="hide-menu-btn"><i class="nav-icon fas fa-times"></i></label>
+ </ul>
+ </nav>
</div>
- <div class="tasks-section">
- <div class="task-text">
- <h1 class="medium-heading" style="color:#469198">What are the kind of tasks we'll be working on at <span style="color:black">Free Software</span> Camp?</h1>
- <p class="para">At Free Software Camp you can contribute to free software through various technical and non-technical tasks with the help of our mentors. Here are a few technical and non-technical ways you can contribute:</p>
+ <section id="home" class="presentation">
+ <div class="introduction">
+ <div class="intro-text">
+ <h1>Free Software <span style="color:#469198">Camp</h1>
+ <p>A unique, online mentorship programme conceptualized and organized by Free Software Foundation of India and Free Software Community of India.</p>
+ <div class="cta-block">
+ <div class="cta">
+ <a href='#about'><button>About us</button></a>
+ </div>
+ <div class="dropdown cta">
+ <button onclick="myFunction()" class="dropbtn">Apply</button>
+ <div id="myDropdown" class="dropdown-content" style="padding: 5px;">
+ <button style="padding: 0px;"><a href='learners.html'>Apply as Learner</a></button>
+ <button style="padding: 0px;"><a href='mentors.html'>Apply as Mentor</a></button>
+ </div>
+ </div>
+ <script>
+ function myFunction() {
+ document.getElementById("myDropdown").classList.toggle("show");
+ }
+ window.onclick = function(event) {
+ if (!event.target.matches('.dropbtn')) {
+ var dropdowns = document.getElementsByClassName("dropdown-content");
+ var i;
+ for (i = 0; i < dropdowns.length; i++) {
+ var openDropdown = dropdowns[i];
+ if (openDropdown.classList.contains('show')) {
+ openDropdown.classList.remove('show');
+ }
+ }
+ }
+ }
+ </script>
+ </div>
+ </div>
</div>
- </div>
- <div class="task-tech">
- <div class="about-cover task-cover">
- <img src='./assets/img/tech.svg' alt="a smartphone and a desktop computer" />
+ <div class="cover">
+ <img src='./assets/img/landing-image.png' alt="person on a bench" />
</div>
- <div class="about-text task-block">
- <div class="block">
- <h1 class="medium-heading" style="color:#469198; text-align: center">Technical</span>
- </h1>
- <ul>
- <li>Programming</li>
- <li>Systems Administration</li>
- <li>Packaging</li>
- <li>Cyber Forensics</li>
- <li>UI/UX Development</li>
- </ul>
+ </section>
+ <section id="about">
+ <div class="about-section">
+ <div class="about-cover">
+ <img src='./assets/img/example-29.svg' alt="person in front of workspace" />
</div>
- </div>
- </div>
- <div class="task-tech">
- <div class="about-text task-block">
- <div class="block">
- <h1 class="medium-heading" style="color:#469198; text-align: center">Non-Technical</span>
- </h1>
- <ul>
- <li>Artwork</li>
- <li>Translation and Localization</li>
- <li>Publicity</li>
- <li>Event organizing</li>
- </ul>
+ <div class="about-text">
+ <h1 class="medium-heading"><span style="color:#469198">What is</span> Free Software <span style="color:#469198">Camp</span>?</h1>
+ <p class="para">Free Software Camp is a mentorship programme for bringing more people to Free Software with strong focus on philosophy. We connect learners with experienced Free Software community members to work on some tasks together - this could be either technical or non technical.</p>
</div>
</div>
- <div class="about-cover task-cover">
- <img src='./assets/img/non-tech.svg' alt="infomatics and books" />
- </div>
- </div>
- <div class="about-section" style="margin-top: 10vh auto;">
- <div class="about-text">
- <h1 class="medium-heading" style="color:#469198">How does it work</span>?</h1>
- <p class="para">Learners apply to join the program and are given a common introduction to the program, to free software, and to the projects they can work on. These sessions will be conducted online using <a href="#tools" style="text-decoration:none; color: #0000FF">free software tools</a>. Then they submit proposal(s) for working on the project of their choice which is evaluated and mentors get assigned for these. Learners can also choose to work independently without dedicated mentors. Learners are expected to report regularly on their progress and periodic review is done. By the end of the camp the learners will be contributing to free software and collaborating with other contributors from around the world.
- </p>
+ <div class="tasks-section">
+ <div class="task-text">
+ <h1 class="medium-heading" style="color:#469198">What are the kind of tasks we'll be working on at <span style="color:black">Free Software</span> Camp?</h1>
+ <p class="para">At Free Software Camp you can contribute to free software through various technical and non-technical tasks with the help of our mentors. Here are a few technical and non-technical ways you can contribute:</p>
+ </div>
</div>
- </div>
- <div class="about-section" style="margin: 10vh auto;">
- <div class="about-cover">
- <img src='./assets/img/mentor.svg' alt="people planning and making things" />
+ <div class="task-tech">
+ <div class="about-cover task-cover">
+ <img src='./assets/img/tech.svg' alt="a smartphone and a desktop computer" />
+ </div>
+ <div class="about-text task-block">
+ <div class="block">
+ <h1 class="medium-heading" style="color:#469198; text-align: center">Technical</span>
+ </h1>
+ <ul>
+ <li>Programming</li>
+ <li>Systems Administration</li>
+ <li>Packaging</li>
+ <li>Cyber Forensics</li>
+ <li>UI/UX Development</li>
+ </ul>
+ </div>
+ </div>
</div>
- <div class="about-text">
- <h1 class="medium-heading" style="color:#469198">Who can be mentors</span>?</h1>
- <p class="para">Are you an experienced Free Software contributor? Does mentoring new people to contribute to Free Software excite you? Do you have time to invest in mentoring for the next 3 months? Come join us!</p>
- <div class="cta">
- <a href='mentors.html'><button>About Mentorship</button></a>
+ <div class="task-tech">
+ <div class="about-text task-block">
+ <div class="block">
+ <h1 class="medium-heading" style="color:#469198; text-align: center">Non-Technical</span>
+ </h1>
+ <ul>
+ <li>Artwork</li>
+ <li>Translation and Localization</li>
+ <li>Publicity</li>
+ <li>Event organizing</li>
+ </ul>
+ </div>
+ </div>
+ <div class="about-cover task-cover">
+ <img src='./assets/img/non-tech.svg' alt="infomatics and books" />
</div>
</div>
- </div>
- <div class="about-section" style="margin-bottom: 10vh auto;">
- <div class="about-text">
- <h1 class="medium-heading" style="color:#469198">Who can join as learner?</h1>
- <p class="para">Do you have some time to contribute back to the society? Do you want to learn about Free Software? Do you want to use and contribute to Free Software? Come join us!</p>
- <div class="cta">
- <a href='learners.html'><button>About Participation</button></a>
+ <div class="about-section" style="margin-top: 10vh auto;">
+ <div class="about-text">
+ <h1 class="medium-heading" style="color:#469198">How does it work</span>?</h1>
+ <p class="para">Learners apply to join the program and are given a common introduction to the program, to free software, and to the projects they can work on. These sessions will be conducted online using <a href="#tools" style="text-decoration:none; color: #0000FF">free software tools</a>. Then they submit proposal(s) for working on the project of their choice which is evaluated and mentors get assigned for these. Learners can also choose to work independently without dedicated mentors. Learners are expected to report regularly on their progress and periodic review is done. By the end of the camp the learners will be contributing to free software and collaborating with other contributors from around the world.
+ </p>
</div>
</div>
- <div class="about-cover" style="display:flex; margin:auto;">
- <img src='./assets/img/mentee.png' alt="people trying to find things" />
+ <div class="about-section" style="margin: 10vh auto;">
+ <div class="about-cover">
+ <img src='./assets/img/mentor.svg' alt="people planning and making things" />
+ </div>
+ <div class="about-text">
+ <h1 class="medium-heading" style="color:#469198">Who can be mentors</span>?</h1>
+ <p class="para">Are you an experienced Free Software contributor? Does mentoring new people to contribute to Free Software excite you? Do you have time to invest in mentoring for the next 3 months? Come join us!</p>
+ <div class="cta">
+ <a href='mentors.html'><button>About Mentorship</button></a>
+ </div>
+ </div>
</div>
- </div>
- <div class="about-section" style="margin: 10vh auto;">
- <div id="tools" class="about-text">
- <h1 class="medium-heading" style="color: #469198">Camp Communication Infrastructure</h1>
- <div>
- <ul>
- <li>Big Blue Button (browser based free software video conferencing platform) for presentations, sessions, and other interactions.</li>
- <li>Matrix rooms for instant messaging.</li>
- <li>Mastodon for announcements.</li>
- <li>Mailing list for announcements and discussions.</li>
- <li>Gitlab wiki for documentation, etc.</li>
- <li>Peertube for uploading videos.</li>
- <li>Cryptpad/Etherpad for collaborative editing.</li>
- <li>Each project will have their own project communication platforms.</li>
- </ul>
- <p>These tools will be introduced during the course of the camp.</p>
+ <div class="about-section" style="margin-bottom: 10vh auto;">
+ <div class="about-text">
+ <h1 class="medium-heading" style="color:#469198">Who can join as learner?</h1>
+ <p class="para">Do you have some time to contribute back to the society? Do you want to learn about Free Software? Do you want to use and contribute to Free Software? Come join us!</p>
+ <div class="cta">
+ <a href='learners.html'><button>About Participation</button></a>
+ </div>
+ </div>
+ <div class="about-cover" style="display:flex; margin:auto;">
+ <img src='./assets/img/mentee.png' alt="people trying to find things" />
</div>
</div>
- </div>
- </section>
- <section id="contact">
- <div class="tasks-section">
- <div class="task-text">
- <h1 class="medium-heading" style="color:white">Wish to contribute to the initiative?</h1>
- <p class="para" style="color:white">We primarily use free software for all our communication and collaboration. Get in touch with us with your queries and sugesstions!</p>
+ <div class="about-section" style="margin: 10vh auto;">
+ <div id="tools" class="about-text">
+ <h1 class="medium-heading" style="color: #469198">Camp Communication Infrastructure</h1>
+ <div>
+ <ul>
+ <li>Big Blue Button (browser based free software video conferencing platform) for presentations, sessions, and other interactions.</li>
+ <li>Matrix rooms for instant messaging.</li>
+ <li>Mastodon for announcements.</li>
+ <li>Mailing list for announcements and discussions.</li>
+ <li>Gitlab wiki for documentation, etc.</li>
+ <li>Peertube for uploading videos.</li>
+ <li>Cryptpad/Etherpad for collaborative editing.</li>
+ <li>Each project will have their own project communication platforms.</li>
+ </ul>
+ <p>These tools will be introduced during the course of the camp.</p>
+ </div>
+ </div>
</div>
- <div class="icon-row">
- <a href="mailto:camp@mm.gnu.org.in" target="_blank" rel="noopener" title="Email">
- <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+ </section>
+ <section id="contact">
+ <div class="tasks-section">
+ <div class="task-text">
+ <h1 class="medium-heading" style="color:white">Wish to contribute to the initiative?</h1>
+ <p class="para" style="color:white">We primarily use free software for all our communication and collaboration. Get in touch with us with your queries and sugesstions!</p>
+ </div>
+ <div class="icon-row">
+ <a href="mailto:camp@mm.gnu.org.in" target="_blank" rel="noopener" title="Email">
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path>
<polyline points="22,6 12,13 2,6"></polyline>
</svg>
- </a>
-
- <a href="https://matrix.to/#/#fscamp:poddery.com" target="_blank" rel="noopener" title="Matrix">
- <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round">
+ </a>
+
+ <a href="https://matrix.to/#/#fscamp:poddery.com" target="_blank" rel="noopener" title="Matrix">
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round">
<path d="M.632.55v22.9H2.28V24H0V0h2.28v.55zm7.043 7.26v1.157h.033c.309-.443.683-.784 1.117-1.024.433-.245.936-.365 1.5-.365.54 0 1.033.107 1.481.314.448.208.785.582 1.02 1.108.254-.374.6-.706 1.034-.992.434-.287.95-.43 1.546-.43.453 0 .872.056 1.26.167.388.11.716.286.993.53.276.245.489.559.646.951.152.392.23.863.23 1.417v5.728h-2.349V11.52c0-.286-.01-.559-.032-.812a1.755 1.755 0 0 0-.18-.66 1.106 1.106 0 0 0-.438-.448c-.194-.11-.457-.166-.785-.166-.332 0-.6.064-.803.189a1.38 1.38 0 0 0-.48.499 1.946 1.946 0 0 0-.231.696 5.56 5.56 0 0 0-.06.785v4.768h-2.35v-4.8c0-.254-.004-.503-.018-.752a2.074 2.074 0 0 0-.143-.688 1.052 1.052 0 0 0-.415-.503c-.194-.125-.476-.19-.854-.19-.111 0-.259.024-.439.074-.18.051-.36.143-.53.282-.171.138-.319.337-.439.595-.12.259-.18.6-.18 1.02v4.966H5.46V7.81zm15.693 15.64V.55H21.72V0H24v24h-2.28v-.55z" />
</svg>
- </a>
-
- <a href="https://social.masto.host/@fscamp" target="_blank" rel="noopener" title="Mastodon">
- <svg xmlns="http://www.w3.org/2000/svg" width="61.076954mm" height="65.47831mm" viewBox="0 0 216.4144 232.00976">
+ </a>
+
+ <a href="https://social.masto.host/@fscamp" target="_blank" rel="noopener" title="Mastodon">
+ <svg xmlns="http://www.w3.org/2000/svg" width="61.076954mm" height="65.47831mm" viewBox="0 0 216.4144 232.00976">
<path stroke="#fff" stroke-width="12px" fill="#ffffff00" d="M211.80734 139.0875c-3.18125 16.36625-28.4925 34.2775-57.5625 37.74875-15.15875 1.80875-30.08375 3.47125-45.99875 2.74125-26.0275-1.1925-46.565-6.2125-46.565-6.2125 0 2.53375.15625 4.94625.46875 7.2025 3.38375 25.68625 25.47 27.225 46.39125 27.9425 21.11625.7225 39.91875-5.20625 39.91875-5.20625l.8675 19.09s-14.77 7.93125-41.08125 9.39c-14.50875.7975-32.52375-.365-53.50625-5.91875C9.23234 213.82 1.40609 165.31125.20859 116.09125c-.365-14.61375-.14-28.39375-.14-39.91875 0-50.33 32.97625-65.0825 32.97625-65.0825C49.67234 3.45375 78.20359.2425 107.86484 0h.72875c29.66125.2425 58.21125 3.45375 74.8375 11.09 0 0 32.975 14.7525 32.975 65.0825 0 0 .41375 37.13375-4.59875 62.915" />
<path fill="#fff" d="M177.50984 80.077v60.94125h-24.14375v-59.15c0-12.46875-5.24625-18.7975-15.74-18.7975-11.6025 0-17.4175 7.5075-17.4175 22.3525v32.37625H96.20734V85.42325c0-14.845-5.81625-22.3525-17.41875-22.3525-10.49375 0-15.74 6.32875-15.74 18.7975v59.15H38.90484V80.077c0-12.455 3.17125-22.3525 9.54125-29.675 6.56875-7.3225 15.17125-11.07625 25.85-11.07625 12.355 0 21.71125 4.74875 27.8975 14.2475l6.01375 10.08125 6.015-10.08125c6.185-9.49875 15.54125-14.2475 27.8975-14.2475 10.6775 0 19.28 3.75375 25.85 11.07625 6.36875 7.3225 9.54 17.22 9.54 29.675" />
</svg>
- </a>
-
- <a href="https://git.fosscommunity.in/fsfi/camp/-/issues/" target="_blank" rel="noopener" title="Gitlab">
- <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+ </a>
+
+ <a href="https://git.fosscommunity.in/fsfi/camp/-/issues/" target="_blank" rel="noopener" title="Gitlab">
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M22.65 14.39L12 22.13 1.35 14.39a.84.84 0 0 1-.3-.94l1.22-3.78 2.44-7.51A.42.42 0 0 1 4.82 2a.43.43 0 0 1 .58 0 .42.42 0 0 1 .11.18l2.44 7.49h8.1l2.44-7.51A.42.42 0 0 1 18.6 2a.43.43 0 0 1 .58 0 .42.42 0 0 1 .11.18l2.44 7.51L23 13.45a.84.84 0 0 1-.35.94z" />
</svg>
- </a>
-
+ </a>
+
+ </div>
</div>
- </div>
- </section>
- <footer style="margin-top: 0">
- <div class="footer-icon-row " style="text-align: center">
- <h1>Organised By</h1>
- <a href="https://fsci.in"><img height="50px" src="assets/img/fsci_logo.png" alt="Logo of FSCI" /></a>
- <a href="https://fsf.org.in"><img height="50px" src="https://fsf.org.in/assets/img/logo.png" alt="Logo of FSF" /></a>
- </div>
- <h3 style="text-align: center; font-weight: 400">Free Software Camp <a style="color: inherit;" href="privacy.html">Privacy Policy</a></h3>
- <p style="text-align: center;">Made with <span style="color: #e25555;">♥</span> All original content licensed under a free/libre copyleft license (GPL or CC BY-SA)</p>
- </footer>
- </main>
-</body>
+ </section>
+ <footer style="margin-top: 0">
+ <div class="footer-icon-row " style="text-align: center">
+ <h1>Organised By</h1>
+ <a href="https://fsci.in"><img height="50px" src="assets/img/fsci_logo.png" alt="Logo of FSCI" /></a>
+ <a href="https://fsf.org.in"><img height="50px" src="https://fsf.org.in/assets/img/logo.png" alt="Logo of FSF" /></a>
+ </div>
+ <h3 style="text-align: center; font-weight: 400">Free Software Camp <a style="color: inherit;" href="privacy.html">Privacy Policy</a></h3>
+ <p style="text-align: center;">Made with <span style="color: #e25555;">♥</span> All original content licensed under a free/libre copyleft license (GPL or CC BY-SA)</p>
+ </footer>
+ </main>
+ </body>
</html>
diff --git a/style.css b/style.css
index 3fbde054129a335c9957c2f407bc8d697604aada..1fc6d3ffdf5b6286e583e46cc09ef117b9f48941 100644
--- a/style.css
+++ b/style.css
@@ -189,6 +189,49 @@ nav{
padding: 10px 20px;
cursor: pointer;
}
+.dropbtn {
+ background-color: white;
+ color: black;
+ padding: 16px;
+ font-size: 16px;
+ border: none;
+ cursor: pointer;
+}
+
+.dropbtn:hover, .dropbtn:focus {
+ background-color: #468c9f;
+}
+
+.dropdown {
+ position: relative;
+ display: inline-block;
+}
+
+.dropdown-content {
+ display: none;
+ position: absolute;
+ background-color: #f1f1f1;
+ min-width: 200px;
+ overflow: auto;
+ box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+ z-index: 1;
+ border: 1px solid lightgray;
+}
+
+.dropdown-content a {
+ color: black;
+ padding: 10px 15px;
+ text-decoration: none;
+ display: block;
+}
+
+.dropdown a:hover {background-color: #ddd;}
+
+.show {
+ display: flex;
+ flex-direction: column;
+ transition: 0.4s;
+}
@keyframes dropdown{
0% {
opacity: 0;