From 1b2b473aff4d1f859beeed1e0795cd9569af8f9b Mon Sep 17 00:00:00 2001
From: Ebuka Peter <peterdbrainy5@gmail.com>
Date: Sun, 21 Apr 2019 11:16:15 -0700
Subject: [PATCH] The create New Student profile page with modal, though still
 making some adjustment

---
 views/createNewStudent.html | 253 ++++++++++++++++++++++++++++++++++++
 1 file changed, 253 insertions(+)
 create mode 100644 views/createNewStudent.html
diff --git a/views/createNewStudent.html b/views/createNewStudent.html
new file mode 100644
index 0000000..58af5c2
--- /dev/null
+++ b/views/createNewStudent.html
@@ -0,0 +1,253 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <title>Student's Profile</title>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link href="https://fonts.googleapis.com/css?family=Work+Sans" rel="stylesheet">
+  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
+  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
+  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
+  <style>
+body {
+    margin: 0;
+    font-family: "Work Sans", sans-serif, -apple-system, BlinkMacSystemFont,
+    "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif,
+    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  } 
+  .navbar {
+   background: linear-gradient(93.23deg, #FC954F -30.64%, #FE2EA5 111.28%);
+   
+  }
+  .navbar-brand {
+    padding-left: 60px;
+  }
+  .navbar .nav-link {
+    color:#ffffff;
+  }
+  .navbar .navbar-brand {
+    color:#ffffff;
+  }
+   .navbar-brand-img{
+    float: right;
+  }
+  .navbar-toggler-icon {
+    background-color: #ffffff;
+  }
+  .modal-title {
+    font-style: normal;
+    font-weight: 800;
+    font-size: 36px;
+    line-height: normal;
+    text-align: center;
+    color: #A92E65;
+  
+  }     
+  .heading {
+    color: #A92E65;
+    text-align: center;
+  }
+  .heading-2{
+    color: #A92E65;
+    text-align: center;
+    margin-top: 70px;
+    margin-bottom: 30px;
+  }
+  .btn-modal {
+    background: #A92E65;
+    border-radius: 100px;
+    color: #ffffff;
+    float: right;
+    margin-bottom: 200px;
+  }
+  .btn-modal:hover {
+    color: black;
+    background-color: #ffffff;
+  }
+  .btn {
+    background: #A92E65;
+    border-radius: 100px;
+    color: #ffffff;
+    margin-top: 80px;
+    margin-bottom: 200px;
+    align-self: center;
+  
+  }
+  .form-control {
+    border: 1px solid #A92E65;
+    box-sizing: border-box;
+    border-radius: 4px;
+    margin-bottom: 30px;
+  }
+
+.comp {
+    color: red;
+    font-weight: 80px;
+}
+.container-fluid{
+  background: linear-gradient(93.23deg, #FC954F -30.64%, #FE2EA5 111.28%);
+  width:
+}
+.copyright {
+  text-align: center;
+  color: #ffffff;
+}
+
+@media screen and (max-width: 670px) {
+.center {
+text-align: center;
+}
+.btn-modal {
+  width: 100%;
+}
+}
+  </style>
+</head>
+<body>
+  <!--Navigation bar-->
+    <nav class="navbar navbar-expand-md ">
+        <a class="navbar-brand" href="#">FeeTracker</a>
+        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
+          <span class="navbar-toggler-icon"></span>
+        </button>
+        <div class="collapse navbar-collapse" id="collapsibleNavbar">
+          <ul class="navbar-nav">
+            <li class="nav-item">
+              <a class="nav-link" href="#">Dashboard</a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="#">Classes</a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="#">Students</a>
+            </li>  
+            <li class="nav-item">
+                <a class="nav-link" href="#">Fees</a>
+              </li>   
+          </ul>
+          <a class="navbar-brand-img" href="#">
+             
+            </a>
+        </div>  
+      </nav>
+      <br>
+
+      <div class="container">
+        <h1 class="welcome">Welcome Admin</h1>
+        <div class="card-deck">
+          <div class="card bg-light">
+            <!--Please help me with the images inside the card, couldn't get them-->
+            <div class="card-body text-center">
+              <p class="card-text">Some image inside the first card</p>
+              <p class="card-text">Some image to increase the height</p>
+              <p class="card-text">Some image to increase the height</p>
+              <p class="card-text">Some image to increase the height</p>
+            </div>
+          </div>
+          <div class="card bg-light">
+            <div class="card-body text-center">
+              <p class="card-text">Some image inside the second card</p>
+            </div>
+          </div>
+          <div class="card bg-light">
+            <div class="card-body text-center">
+              <p class="card-text">Some text inside the third card</p>
+            </div>
+          </div>
+      </div>
+      
+<div class="container">
+  <!-- Button to Open the Modal -->
+  <button type="button" class="btn " data-toggle="modal" data-target="#myModal">
+    Add a Student
+  </button>
+
+  <!-- The Modal -->
+  <div class="modal fade" id="myModal">
+    <div class="modal-dialog modal-lg">
+      <div class="modal-content">
+      
+        <!-- Modal Header -->
+        <div class="modal-header">
+          <h5 class="modal-title">Create New Student Profile</h5>
+          <button type="button" class="close" data-dismiss="modal" aria-label="Close">            
+              <span aria-hidden="true">&times;</button>
+        </div>
+        <!-- Modal body -->
+        <div class="modal-body">
+          <p><h3 class="heading">STUDENT'S INFO</h3></p>
+         <h6 class=>The fields with red asterik are compulsory</h6>
+            <form action="" method="post" class="mt-3">
+                <div class="form-group">
+                    <label for="" class="my-0">First Name.   <span class="comp">*</span></label>
+                    <input type="text" name="Studentsname" class="form-control" placeholder="John"  minlength="5" pattern="[+]{0,1}[0-9\s]+"
+                    maxlength="16" required>
+                </div>
+                <div class="form-group">
+                    <label for="" class="my-0">Last Name.   <span class="comp">*</span></label>
+                    <input type="text" name="guardiansName" class="form-control" placeholder="Adams" minlength="5" pattern="[+]{0,1}[0-9\s]+"
+                     maxlength="16" required>
+                </div>
+                
+                <div class="form-group">
+                    <label for="" class="my-0">Class.  <span class="comp">*</span></label>
+                    <select class="form-control" id="sel1" name="sellist1">
+                      <option>Year 1</option>
+                      <option>Year 2</option>
+                      <option>Year 3</option>
+                      <option>Year 4</option>
+                    </select>
+                  </div>
+
+                  <div class="form-group">
+                      <label for="" class="my-0">Home address<span class="comp">*</span></label>
+                      <textarea class="form-control" rows="3" id="comment" placeholder="Your Home address" minlength="11" heipattern="[+]{0,1}[0-9\s]+"
+                      maxlength="50" required></textarea>
+                  </div>
+
+                  <!--Parents/Guardian Info-->
+                  <p><h3 class="heading-2">PARENT/GUARDIAN INFO</h3></p>
+                  <div class="form-group">
+                      <label for="" class="my-0">First Name.   <span class="comp">*</span></label>
+                      <input type="text" name="Studentsname" class="form-control" placeholder="John"  minlength="5" pattern="[+]{0,1}[0-9\s]+"
+                      maxlength="16" required>
+                  </div>
+                  <div class="form-group">
+                      <label for="" class="my-0">Last Name.   <span class="comp">*</span></label>
+                      <input type="text" name="guardiansName" class="form-control" placeholder="Adams" minlength="5" pattern="[+]{0,1}[0-9\s]+"
+                       maxlength="16" required>
+                  </div>
+                  <div class="form-group">
+                      <label for="" class="my-0">Phone number.    <span class="comp">*</span></label>
+                      <input type="tel" name="guardiansPhoneNumber" class="form-control" placeholder="+23481645909" minlength="11" pattern="[+]{0,1}[0-9\s]+"
+                       maxlength="16" required>
+                      </div>
+
+                  <div class="form-group">
+                      <label for="" class="my-0">Home address<span class="comp">*</span></label>
+                      <textarea class="form-control" rows="3" id="comment" placeholder="Your Home address" minlength="11" heipattern="[+]{0,1}[0-9\s]+"
+                       maxlength="50" required></textarea>
+                      </div>
+        
+                  
+                  <input value="submit" type="submit" name="studentdetails" class="btn-modal px-5 mt-4"></input>
+                </div>
+                
+                </div>
+        
+      </div>
+    </div>  
+</div>
+
+<div class="container-fluid">
+<!--footer-->
+<footer>
+  <div class="copyright">
+		<p>&copy;Copyright
+			<script>document.write(new Date().getFullYear())</script>. All rights reserved</p>
+	</div>
+</footer>
+</div>
+</body>
+</html>
