ILUGD · akshay-nm · Jun 22, 2019 · Jun 22, 2019 · Jun 22, 2019 · Jun 22, 2019
diff --git a/README.md b/README.md
@@ -1,2 +1,61 @@
 # ilugd.github.io
 Homepage of India Linux User Group Delhi and National Capital Region(NCR).  
+
+## Volunteers
+
+We requests all volunteers to add following things:
+1. Profile picture
+2. Name
+3. External links to your profiles on other platforms 
+
+Please keep in mind that we only expect you to share links to following platforms:
+1. Github
+2. Twitter
+3. Linkedin
+4. Facebook
+5. Youtube
+6. Instagram
+
+### Adding yourself as a volunteer
+
+1. Clone this repository.
+2. Create a new branch with name as `volunteer/date-of-meetup/your-name`. For example, `volunteer/29-06-2019/Kuntal-Majumder`.*This really helps us keep PRs organized.*
+3. Rename your profile picture as `your-name.png`. For example, `Kuntal-Majumder.png`. Copy your profile picture to the assets/img/volunteer directory.  *Profile pictures in PNG format recommended.* 
+4. Fireup your code editor, open the `volunteer_profile.html`. **DO NOT SAVE CHANGES TO THIS FILE, THIS IS A TEMPLATE!**. This file is a template where you need to fill your data. Once you are done, you might have something like this:
+
+```html
+<li class="volunteers-list-item">
+  <article class="volunteer">
+    <img alt="Profile picture" src="./assets/img/Kuntal-Majumder.png">
+    <p>Volunteer Name</p>
+    <ul class="links">
+      <li><a href="https://github.com/hellozee" target="_blank"><i class="fab fa-github"></i></a></li>
+    </ul>
+  </article>
+</li> 
+```
+
+5. Copy the edited code. Open the `volunteers.html`. Look for the comment `<!--ADD NEW VOLUNTEER PROFILES HERE-->`. 
+```html
+  <!--Everything above body-->
+  <body class="page-home">
+
+    <section>
+      <h1>Volunteers</h1>
+      <ul class="volunteers-list-container">
+        <!--Existing Volunteer profiles...-->
+
+
+
+        <!--ADD NEW VOLUNTEER PROFILES HERE-->
+      </ul>
+    </section>
+
+  </body>
+</html>
+```
+
+6. Paste the edited code above the `<!--ADD NEW VOLUNTEER PROFILES HERE-->` comment. *Leave 2 lines between your profile and the comment so that its easily noticable by other who might want to add their profile.*
+
+7. Commit changes to your local branch. **DISCARD ANY CHANGES ON VOLUNTEER_PROFILE.HTML**. 
+7. Push changes online and raise a Pull Request.
diff --git a/about.html b/about.html
@@ -13,7 +13,7 @@
       <h1>About Us</h1>
       <p> We are linux users from Delhi NCR region. We mostly include students and professionals who uses linux. We believe in endorsing OSS/FOSS and linux use and development of the same. As of now we organise monthly meetup. We respect all technologies from Perl to Python.
       If you want to volunteer for ILUGD you can join us in any of our social channels.</p>
-
+      <p style="text-align: right; text-decoration: underline; margin: 2rem; padding: 2rem;"><a href='volunteers.html' >Volunteers</a></p>
   </section>
 
 </body>

diff --git a/assets/css/main.css b/assets/css/main.css
@@ -132,7 +132,7 @@ a:hover, a:active {
 .page-home .section--next_event .caption {
   display: inline-block;
   background-color: #11fac2;
-  background-color: ##eee;
+  background-color: #eee;
   padding: 10px;
 }
 .page-home .section--next_event a {

diff --git a/assets/css/volunteers.css b/assets/css/volunteers.css
@@ -0,0 +1,95 @@
+
+/* 
+* Volunteers list related styles
+*/
+
+.volunteers-list-container, .volunteer .links {
+  padding: 0;
+  margin: 0;
+  list-style: none;
+
+  display: -webkit-box;
+  display: -moz-box;
+  display: -ms-flexbox;
+  display: -webkit-flex;
+  display: flex;
+
+  -webkit-flex-flow: row wrap;
+  justify-content: center;
+}
+
+
+
+.volunteers-list-container .volunteers-list-item {
+  padding: 5px;
+  margin-top: 10px;
+  text-align: center;
+}
+
+.volunteer {
+  margin: 0.5rem;
+  width: 250px;
+  height: 250px;
+}
+
+.volunteer img {
+  border-radius: 50%;
+  // border: #fcee97 2px solid;
+  -webkit-box-shadow: 0px 0px 21px 0px rgba(0,0,0,0.2);
+  -moz-box-shadow: 0px 0px 21px 0px rgba(0,0,0,0.2);
+  box-shadow: 0px 0px 21px 0px rgba(0,0,0,0.2);
+}
+
+.volunteer .links {
+  list-style: none;
+}
+
+.volunteer .links li {
+  margin: 0.1rem 0.5rem;
+  width: 25px;
+  height: 30px;
+}
+
+.volunteer .links li a {
+  position: relative;
+  font-size: 28px;
+}
+
+.volunteer .links li a i {
+  position: absolute;
+  transition: all 200ms ease-in;
+
+}
+
+.volunteer .links li a:hover i {
+  transform: scale(1.3);
+}
+
+.volunteer p {
+  font-size: 18px;
+}
+
+
+.fa-linkedin {
+  color: #0077B5;
+}
+
+.fa-facebook-square {
+  color: #3b5998;
+}
+
+.fa-youtube {
+  color: #c4302b;
+}
+
+.fa-twitter-square {
+  color: #1da1f2;
+}
+
+.fa-instagram {
+  color: #3f729b;
+}
+
+.fa-github {
+  color: #333;
+}
diff --git a/assets/img/volunteers/.gitkeep b/assets/img/volunteers/.gitkeep
diff --git a/volunteer_profile.html b/volunteer_profile.html
@@ -0,0 +1,23 @@
+<li class="volunteers-list-item">
+  <article class="volunteer">
+    <!--
+      Replace the value of "src" attribute below with the url to your profile picture "./assets/img/volunteer/name-of-your-profile-picture"
+    -->
+    <img alt="Profile picture" src="https://via.placeholder.com/140">
+    <p>Volunteer Name</p>
+    <ul class="links">
+
+      <!--
+        Replace the value of href attribute with link to your external profile
+        Remove extra links as per requirement...
+      -->
+      <li><a href="/" target="_blank"><i class="fab fa-github"></i></a></li>
+      <li><a href="/" target="_blank"><i class="fab fa-instagram"></i></a></li>
+      <li><a href="/" target="_blank"><i class="fab fa-twitter-square"></i></a></li>
+      <li><a href="/" target="_blank"><i class="fab fa-linkedin"></i></a></li>
+      <li><a href="/" target="_blank"><i class="fab fa-facebook-square"></i></a></li>
+      <li><a href="/" target="_blank"><i class="fab fa-youtube"></i></a></li>
+    </ul>
+  </article>
+</li> 
+
diff --git a/volunteers.html b/volunteers.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+  <html>
+  <head>
+      <meta charset="utf-8">
+      <title>Indian Linux User Group Delhi</title>
+      <link href="https://fonts.googleapis.com/css?family=PT+Sans:400,700" rel="stylesheet">
+      <!--<link href="https://fonts.googleapis.com/css?family=Space+Mono" rel="stylesheet">-->
+      <link rel="stylesheet" type="text/css" href="assets/css/main.css">
+      <link rel="stylesheet" type="text/css" href="assets/css/volunteers.css">
+      <script src="https://kit.fontawesome.com/c59af663ad.js"></script>
+  </head>
+  <a href="https://github.com/ILUGD/ILUGD.github.io" target = "_blank"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/38ef81f8aca64bb9a64448d0d70f1308ef5341ab/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6461726b626c75655f3132313632312e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png"></a>
+  <body class="page-home">
+
+    <section>
+      <h1>Volunteers</h1>
+      <ul class="volunteers-list-container">
+
+
+        <!--ADD NEW VOLUNTEER PROFILES HERE-->
+      </ul>
+    </section>
+
+  </body>
+</html>