Bulding the Grades Page with HTML and CSS #17

GSG-K3 · Feb 25, 2020 · 2856eb8 · 2856eb8
1 parent 55fd710
commit 2856eb8
Show file tree

Hide file tree

Showing 2 changed files with 74 additions and 1 deletion.
diff --git a/public/grades.html b/public/grades.html
@@ -8,14 +8,43 @@
       href="https://fonts.googleapis.com/css?family=Anton&display=swap"
       rel="stylesheet"
     />
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
+    />
+
     <title>Student Managment System</title>
   </head>
   <body>
     <section class="topsection">
       <img src="./imges/school.png" alt="school picture" />
       <h1>Student Managment System</h1>
     </section>
-    <section class="gradesTable"></section>
+
+    <form class="searchForm" action="page.php">
+      <input type="text" placeholder="Search.." name="search" />
+      <button type="submit">
+        <i class="fa fa-search" aria-hidden="true"></i>
+      </button>
+    </form>
+
+    <section class="gradesTable">
+      <table class="gradesTable_std">
+        <tr>
+          <th>Course</th>
+          <th>
+            Grades
+          </th>
+        </tr>
+        <tr>
+          <td>
+            90
+          </td>
+          <td>80</td>
+        </tr>
+      </table>
+    </section>
+
     <script src="dom.js"></script>
   </body>
 </html>
diff --git a/public/style.css b/public/style.css
@@ -40,3 +40,47 @@
   margin-top: 36px;
   box-shadow: 30px 10px 10px 10px #aaaaaa;
 }
+.searchForm {
+  width: 100%;
+  height: 60px;
+  display: flex;
+  align-items: center;
+  margin-left: 56px;
+  padding-bottom: 5px;
+  padding-top: 10px;
+}
+
+.searchForm input {
+  height: 25px;
+  border: 1px solid grey;
+  width: 46vw;
+  background: #f1f1f1;
+}
+.searchForm button {
+  width: 76px;
+  height: 26px;
+  background-color: #4e9cc9;
+  color: beige;
+  font-size: 3vw;
+}
+
+.gradesTable {
+  margin-left: 51px;
+  padding-top: 20px;
+}
+.gradesTable_std td,
+.gradesTable_std th {
+  border: 1px solid #ddd;
+  padding: 21px;
+  font-size: 25px;
+  text-align: center;
+}
+
+.gradesTable_std th {
+  padding-top: 12px;
+  padding-bottom: 12px;
+  text-align: left;
+  background-color: #4e9cc9;
+  color: white;
+  font-size: 25px;
+}