freeCodeCampPune · nikhilmufc7 · Oct 12, 2017 · Oct 12, 2017 · Oct 12, 2017 · Oct 12, 2017
diff --git a/FccPune.jpg b/FccPune.jpg
diff --git a/Screen Shot 2017-11-04 at 2.00.01 PM.png b/Screen Shot 2017-11-04 at 2.00.01 PM.png
diff --git a/index.html b/index.html
@@ -1,31 +1,114 @@
 <!DOCTYPE html>
 <html lang="en">
 
-  <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="X-UA-Compatible" content="ie=edge">
-    <link href="https://fonts.googleapis.com/css?family=Lato:400,700" rel="stylesheet">
-    <link rel="stylesheet" href="main.css">
-    <title>FreeCodeCamp : PUNE : Home</title>
-  </head>
+
+<head>
+  <title>FreeCodeCamp Pune</title>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
+  <link rel="icon" type="image/x-icon" href="favicon.ico" />
+  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.1/css/materialize.min.css">
+  <link rel="stylesheet" href="./styles.css">
+  <link href="https://fonts.googleapis.com/css?family=Varela+Round" rel="stylesheet">
+
+</head>
+
 
   <body>
 
-    <div class="header">
-      <div class="fcc-title">FreeCodeCamp Pune</div>
-      <div class="mapouter">
-        <div class="gmap_canvas">
-          <iframe width="463" height="290" id="gmap_canvas" src="https://maps.google.com/maps?q=Pune&t=&z=11&ie=UTF8&iwloc=&output=embed"
-          frameborder="0" scrolling="no" marginheight="0" marginwidth="0"></iframe>google maps einbinden <a href="http://www.pureblack.de/google-maps/">pureblack.de</a>
+  <div class="navbar-fixed">
+    <nav>
+      <div class="nav-wrapper teal">
+        <a href="#" class="brand-logo">FreeCodeCampPune</a>
+        <ul id="nav-mobile" class="right hide-on-med-and-down">
+          <li><a href="#"><i class="fa fa-meetup material-icons" aria-hidden="true"></i></a></li>
+          <li><a href="https://github.com/freeCodeCampPune"><i class="fa fa-github material-icons" aria-hidden="true"></i></a></li>
+          <li><a href="https://www.facebook.com/groups/free.code.camp.pune/"><i class="fa fa-facebook material-icons" aria-hidden="true"></i></a></li>
+          <li><a href="#" aria-hidden="true"></i></a></li>
+        </ul>
+      </div>
+    </nav>
+  </div>
+
+
+
+
+  <div class="section teal">
+    <div class="row container center">
+      <h5>The official local group of</h5>
+      <h3><a href="https://www.freecodecamp.org/" class="teal-text text-darken-4">FreeCodeCamp</a></h3>
+      <h5>in Pune, India</h5>
+      <img src="indianFlag.jpg" alt="Flag of India" height=100em />
+    </div>
+  </div>
+
+  <div class="section teal">
+    <div class="row center">
+      <div class="row">
+        <div class="col s12 m4">
+          <div class="card teal darken-4">
+            <div class="card-content white-text">
+              <span class="card-title">Shared Values</span>
+              <h2><i class="fa fa-free-code-camp large" aria-hidden="true"></i></h2>
+              <p>We completely share the values and ideas of the FreeCodeCamp platform.</p>
+            </div>
+
+          </div>
+        </div>
+        <div class="col s12 m4">
+          <div class="card teal darken-4">
+            <div class="card-content white-text">
+              <span class="card-title">Exchange</span>
+              <h2><i class="fa fa-connectdevelop large" aria-hidden="true"></i></h2>
+              <p>We connect developers and help beginners. We get people into coding.</p>
+            </div>
+
+          </div>
+        </div>
+        <div class="col s12 m4">
+          <div class="card teal darken-4">
+            <div class="card-content white-text">
+              <span class="card-title">Events</span>
+              <h2><i class="fa fa-calendar large" aria-hidden="true"></i></h2>
+              <p>We organize events, talks, coding sessions and just have fun. </p>
+            </div>
+
+          </div>
         </div>
       </div>
+    </div>
+  </div>
+ <div class="jumbotron">
+  <h1>Our Latest meetup</h1>
+  <img class="meetup-image" src="FccPune.jpg" width="600" height="400" alt="meetup image">
+</div>
+
+
+  <footer class="page-footer teal">
+    <div class="container">
+      <div class="row">
+        <div id="about" class="col l6 s12">
+          <h5 class="white-text">About</h5>
+          <p class="grey-text text-lighten-4">
+            This is one of the local groups of the <a href="https://www.freecodecamp.org/" class="teal-text text-darken-4">FreeCodeCamp</a> platform. It is organized by Developers and
+            learners from Pune. We are a small part of the global FCC community.
+          </p>
+          <br/>
+          Design inspired By <a href="fccvienna.github.io"> Fcc Vienna</a>
+
 
-      <div class="info">
-        <a href="https://www.facebook.com/groups/free.code.camp.pune/">facebook </a> | <a href="https://github.com/freeCodeCampPune"> github</a>
       </div>
     </div>
+
+  </footer>
+
+
+
+
+</body>
 
-  </body>
+
 
 </html>
diff --git a/indianFlag.jpg b/indianFlag.jpg
diff --git a/main.css b/main.css
@@ -1,45 +1,24 @@
-* {
-	font-family: 'Lato', sans-serif;
-}
 
-.header {
-	height: 100vh;
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	justify-content: center;
+body {
+  font-family: 'Varela Round', sans-serif;
 }
-
-.fcc-title {
-	font-size: 50px;
-	color:white;
-	margin:20px;
-	margin-bottom:40px;
+a{
+  color: red;
 }
 
-.info {
-	margin-top:10px;
-	color:white;
-	font-size: 18px;
-	font-family: ubuntu;
-}
 
-a {
-	color:white;
-}
 
-body {
-	background-color: #346506;
-}
 
-.mapouter {
-	overflow: hidden;
-	height: 290px;
-	width: 463px;
+.normalize-ul a {
+  color: black;
 }
 
-.gmap_canvas {
-	background: none !important;
-	height: 290px;
-	width: 463px;
+.normalize-ul li {
+  font-size: 1.2em;
+  color: #004d40;
 }
+
+dt {
+  font-weight: bold;
+  font-size: 1.1em;
+}