Added the contact us page

Angular-FrontEnd/package.json

@@ -12,6 +12,7 @@
   },
   "private": true,
   "dependencies": {
+    "@agm/core": "^1.0.0-beta.3",
     "@angular/animations": "^4.2.4",
     "@angular/common": "^4.2.4",
     "@angular/compiler": "^4.2.4",
@@ -36,13 +37,13 @@
     "codelyzer": "~3.1.1",
     "jasmine-core": "~2.6.2",
     "jasmine-spec-reporter": "~4.1.0",
-    "karma": "~1.7.0",
+    "karma": "^2.0.4",
     "karma-chrome-launcher": "~2.1.1",
     "karma-cli": "~1.0.1",
     "karma-coverage-istanbul-reporter": "^1.2.1",
     "karma-jasmine": "~1.1.0",
     "karma-jasmine-html-reporter": "^0.2.2",
-    "protractor": "~5.1.2",
+    "protractor": "^5.3.2",
     "ts-node": "~3.2.0",
     "tslint": "~5.3.2",
     "typescript": "~2.3.3"

Angular-FrontEnd/src/app/app.module.ts

@@ -1,6 +1,8 @@
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
-import { RouterModule ,Routes} from '@angular/router'
+import { RouterModule ,Routes} from '@angular/router';
+
+
 
 import { AppComponent } from './app.component';
 import { NavComponent } from './nav/nav.component';
@@ -14,7 +16,8 @@ import { HomePageComponent } from './home-page/home-page.component';
 import { LoginComponent} from './login/login.component'
 import { LeaderboardPageComponent } from './leaderboard-page/leaderboard-page.component';
 import { CommitteeComponent } from './committee/committee.component';
-import { ContributePageComponent } from './contribute-page/contribute-page.component'
+import { ContributePageComponent } from './contribute-page/contribute-page.component';
+import { ContactComponent } from './contact/contact.component'
 
 
 //defining the routes of the app
@@ -23,7 +26,8 @@ const applicationRoutes:Routes =[
   {path : 'committee' ,component : CommitteeComponent },
   {path : 'login' ,component : LoginComponent},
   {path : 'leaderboard' ,component : LeaderboardPageComponent},
-  {path : 'contribute' ,component : ContributePageComponent}
+  {path : 'contribute' ,component : ContributePageComponent},
+  {path : 'contact' ,component : ContactComponent}
 
 ]
 
@@ -39,7 +43,8 @@ const applicationRoutes:Routes =[
     LeaderboardPageComponent,
     LoginComponent,
     CommitteeComponent,
-    ContributePageComponent
+    ContributePageComponent,
+    ContactComponent
   ],
   imports: [
     BrowserModule,

Angular-FrontEnd/src/app/contact/contact.component.css

@@ -0,0 +1,45 @@
+.container-fluid{
+    background-color: rgb(255, 255, 255);
+    padding: 30px;
+}
+
+.thumbnail{
+    background-color: rgb(255, 255, 255);
+    border: none;
+    text-align: center;
+    padding: 5px;
+}
+
+img{
+    border-radius: 100%;
+    width:60%;
+}
+
+.mainHeading{
+    text-align: center;
+    font-weight: 300;
+
+}
+.header{
+    background-color: rgb(15, 15, 15);
+    color: white;
+}
+.positionTitle{
+    font-size: 20px;
+    font-weight: 300;
+}
+.nameTitle{
+    font-weight: 400;
+    font-size: 20px;
+}
+#typed{
+    padding-top: 100px;
+    padding-bottom: 50px;
+    text-align: center;
+    font-weight: 300;
+    font-size: 30px;
+}
+.middle{
+    width: 100%;
+
+}

Angular-FrontEnd/src/app/contact/contact.component.html

@@ -0,0 +1,52 @@
+
+
+<div class="container-fluid header">
+        <div class="container">
+          <div class="row">
+              <div class="col-xs-12">
+                  <h1 class="mainHeading">CONTACT US</h1>
+              </div>
+          </div>
+        </div>
+      </div>
+
+      <!--Map addition Part-->
+      <div class="container-fluid ">
+            <h1 class="mainHeading">Find <b>US?</b></h1>
+          <div>
+              <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3961.2111897325003!2d79.85766181528925!3d6.865276820999026!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3ae25ba4e617b3d9%3A0xd5a3b0418f1cf497!2sInformatics+Institute+of+Technology+(IIT)!5e0!3m2!1sen!2slk!4v1531836868875" width="100%" height="400px" frameborder="0" style="border:0" allowfullscreen></iframe></div>
+        </div>
+
+    <!--Contact us form-->
+      <div class="container-fluid">
+        <h1 class="mainHeading">Get in <b>Touch?</b></h1>
+        <div class="container middle">
+                <div class="col-md-12">
+                        <div class="form-area">  
+                            <form role="form">
+                            <br style="clear:both">
+
+                                        <div class="form-group">
+                                            <input type="text" class="form-control" id="name" name="name" placeholder="Name"  required>
+                                        </div>
+                                        <div class="form-group">
+                                            <input type="text" class="form-control" id="email" name="email" placeholder="Email" required>
+                                        </div>
+                                        <div class="form-group">
+                                            <input type="text" class="form-control" id="mobile" name="mobile" placeholder="Mobile Number" required>
+                                        </div>
+                                        <div class="form-group">
+                                            <input type="text" class="form-control" id="subject" name="subject" placeholder="Subject" required>
+                                        </div>
+                                        <div class="form-group">
+                                        <textarea class="form-control" type="textarea" id="message" placeholder="Message" maxlength="140" rows="7"></textarea>
+                                            <span class="help-block"><p id="characterLeft" class="help-block ">You have reached the limit</p></span>                    
+                                        </div>
+
+                            <button type="button" id="submit" name="submit" class="btn btn-primary pull-right">Submit Form</button>
+                            </form>
+                        </div>
+        </div>
+
+     </div>
+

Angular-FrontEnd/src/app/contact/contact.component.ts

@@ -0,0 +1,15 @@
+import {Component} from '@angular/core';
+import * as Typed from 'typed.js';
+
+
+@Component({
+    selector: 'app-contact',
+    templateUrl: './contact.component.html',
+    styleUrls: ['./contact.component.css']
+  })
+
+  export class ContactComponent {
+
+  }
+
+

Angular-FrontEnd/src/app/nav/nav.component.html

@@ -35,6 +35,8 @@
             <li class="active"><a [routerLink]="['/leaderboard']">Leaderboard <span class="sr-only">(current)</span></a></li>
             <li><a [routerLink]="['/contribute']">Contribute</a></li>
             <li><a [routerLink]="['/committee']">Committee</a></li>
+            <li><a [routerLink]="['/contact']">Contact Us</a></li>
+            <li><a [routerLink]="['/event']">Events</a></li>
 
           </ul>
           <ul class="nav navbar-nav navbar-right">