added icons

static/css/styles.css

-* {
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
-    font-family: 'Poppins', sans-serif;
-}
-
+/* 
 body {
     min-height: 100vh;
-}
-
-a {
-    text-decoration: none;
-}
+} */
 
+/* 
 li {
     list-style: none;
-}
+} */
 
-h1,
+/* h1,
 h2 {
     color: #444;
-}
+} */
 
 h3 {
-    color: #999;
+    color: rgba(92, 88, 88, 0.963);
 }
 
-.btn {
+/* .btn {
     background: #f05462;
     color: white;
     padding: 5px 10px;
@@ -34,21 +25,21 @@ h3 {
 }
 
 .btn:hover {
-    color: #f05462;
-    background: white;
+    color: #423839;
+    background: rgb(5, 0, 0);
     padding: 3px 8px;
     border: 2px solid #f05462;
-}
+} */
 
 .title {
     display: flex;
-    font-weight: 1000;
-    font-size: 25px;
-    align-items: center;
+    /* font-weight: 1000; */
+    font-size: 30px;
+    /* align-items: center; */
     /* justify-content: space-around; */
     justify-content: center;
-    padding: 10px 10px;
-    border-bottom: 2px solid #999;
+    padding: 10px;
+    /* border-bottom: 2px solid #999; */
     /* height: 14vh; */
 }
 
@@ -63,32 +54,33 @@ td {
 }
 
 .side-menu {
-    position: fixed;
-    background: #f05462;
-    width: 18vw;
     min-height: 100vh;
-    display: flex;
-    flex-direction: column;
+    background: #6AB187;
+    width: 20vw;
+    position: fixed;
+    /* display: flex; */
+    /* flex-direction: column; */
 }
 
 .side-menu .brand-name {
-    height: 10vh;
-    display: flex;
+    height:10vh;
+    /* display: flex;
     align-items: center;
-    justify-content: center;
+    justify-content: center; */
 }
 
 .side-menu a {
-    font-size: 24px;
-    padding: 10px 40px;
-    color: white;
     display: flex;
-    align-items: center;
+    color: white;
+    font-size:26px;
+    padding:15px 40px;
+    /* align-items: center; */
 }
 
 .side-menu a:hover {
-    background: white;
-    color: #f05462;
+    color: #6AB187;
+    background: rgb(255, 255, 255);
+
 }
 
 .container {
@@ -96,164 +88,180 @@ td {
     right: 0;    
     width: 80vw;
     height: 100vh;
-    background: #f1f1f1;
+    background: #6AB187;
 }
 
 .container .header {
-    position: fixed;
-    top: 0;
-    right: 0;
-    width: 80vw;
-    height: 10vh;
-    background: white;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
-    z-index: 1;
+    box-shadow:0 6px 6px 0 rgba(0, 0, 0, 0.6);
+    z-index:1;
+    justify-content:center;
+    right:0;
+    width:80vw;
+    background:white;
+    display:flex;
+    position:fixed;
+    top:0;
+    align-items:center;
+    height:12vh;
 }
 
 .container .header .dashboard_title {
-    height: 14vh;
-    font-size: 30px;
-    font-weight: 1000;
-    display: flex;
-    align-items: center;
-    justify-content: center;
+    align-items:center;
+    display:flex;
+    height:14vh;
+    justify-content:center;
+    font-weight:990;
+    font-size:30px;
 }
 
 /* .title {
-    height: 14vh;
-    font-size: 30px;
-    font-weight: 1000;
-    display: flex;
-    align-items: center;
-    justify-content: center;
+    height:14vh;
+    font-size:30px;
+    font-weight:1000;
+    display:flex;
+    align-items:center;
+    justify-content:center;
 } */
 
 .container .content {
-    position: relative;
-    margin-top: 10vh;
-    min-height: 90vh;
-    background: #f1f1f1;
+    background:#f1efef;
+
+    position:relative;
+    margin-top:12vh;
+    /* min-height:90vh; */
 }
 
 .container .content .cards {
-    padding: 20px 15px;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    flex-wrap: wrap;
+    display:flex;
+    padding:15px 15px;
+    flex-wrap:wrap;
+
+    align-items:center;
+    justify-content:space-between;
 }
 
 .container .content .cards .card {
-    width: 250px;
-    height: 150px;
-    background: white;
-    margin: 20px 10px;
-    display: flex;
-    align-items: center;
-    justify-content: space-around;
-    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+    display:flex;
+    box-shadow:0 6px 20px 0 rgba(0, 0, 0, 0.4);
+    height:150px;
+    margin:17px 9px;
+    background:rgb(249, 246, 246);
+    align-items:center;
+    width:250px;
+    justify-content:space-around;
+
+
 }
 
 .container .content .content-2 {
-    min-height: 60vh;
-    display: flex;
-    justify-content: space-around;
-    align-items: flex-start;
-    flex-wrap: wrap;
+    display:flex;
+    justify-content:space-around;
+    align-items:flex-start;
+    flex-wrap:wrap;
+    /* min-height:70vh; */
+
 }
 
 .container .content .content-2 .recent-payments {
-    min-height: 100%;
-    background: white;
-    /* margin: 0 25px 25px 25px; */
-    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
-    display: flex;
-    flex-direction: column;
-    /* margin: auto; */
-    margin-top: 0vh;
-    margin-bottom: 5vh;
+    min-height:100%;
+    background:white;
+    /* margin:0 25px 25px 25px; */
+    box-shadow:0 4px 8px 0 rgba(0, 0, 0, 0.2);
+    display:flex;
+    flex-direction:column;
+    /* margin:auto; */
+    margin-top:0px;
+    margin-bottom:20px;
 }
 
-/* .container .content .content-2 .recent-payments {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    overflow: hidden;
-    background: white;
-    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+.container .content .content-2 .recent-payments {
+    justify-content:center;
+    align-items:center;
+    box-shadow:0 6px 20px 0 rgba(0, 0, 0, 0.2);
+    display:flex;
+    overflow:hidden;
+    background:white;
+
 }
 
 .container .content .content-2 .recent-payments img{
-    min-width: 100%;
-    min-height: 100%
-} */
+    min-width:100%;
+    min-height:100%
+}
 
 .container .content .content-2 .new-students {
-    min-height: 100%;
-    background: white;
-    /* margin: 0 25px 25px 25px; */
-    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
-    display: flex;
-    flex-direction: column;
-    margin-bottom: 5vh;
-    /* margin-top: 10vh; */
+    min-height:100%;
+    background:white;
+    /* margin:0 25px 25px 25px; */
+    box-shadow:0 6px 20px 0 rgba(0, 0, 0, 0.4);
+    display:flex;
+    flex-direction:column;
+    margin-bottom:5vh;
+    /* margin-top:10vh; */
 }
 
 .container .content .content-2 .new-students .performance{
-    min-height: 100%;
-    background: white;
-    /* margin: 0 25px 25px 25px; */
-    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
-    display: flex;
-    flex-direction: column;
-    /* margin-top: 10vh; */
+    display:flex;
+    min-height:100%;
+    flex-direction:column;
+    background:white;
+    /* margin:0 25px 25px 25px; */
+    box-shadow:0 6px 20px 0 rgba(0, 0, 0, 0.4);
+    /* margin-top:10vh; */
 }
 
 .container .content .content-2 .new-students table td:nth-child(1) img {
-    height: 40px;
-    width: 40px;
+    height:40px;
+    width:40px;
 }
 
-@media screen and (max-width: 1050px) {
+/* @media screen and (max-width:1050px) {
     .side-menu li {
-        font-size: 18px;
+        font-size:18px;
     }
 }
 
-@media screen and (max-width: 940px) {
+@media screen and (max-width:940px) {
     .side-menu li span {
-        display: none;
+        display:none;
     }
     .side-menu {
-        align-items: center;
+        align-items:center;
     }
     .side-menu li img {
-        width: 40px;
-        height: 40px;
+        width:40px;
+        height:40px;
     }
     .side-menu li:hover {
-        background: #f05462;
-        padding: 8px 38px;
-        border: 2px solid white;
+        background:#f05462;
+        padding:8px 38px;
+        border:2px solid white;
     }
 }
 
 @media screen and (max-width:536px) {
     .brand-name h1 {
-        font-size: 16px;
+        font-size:16px;
     }
     .container .content .cards {
-        justify-content: center;
+        justify-content:center;
     }
     .side-menu li img {
-        width: 30px;
-        height: 30px;
+        width:30px;
+        height:30px;
     }
     .container .content .content-2 .recent-payments table th:nth-child(2),
     .container .content .content-2 .recent-payments table td:nth-child(2) {
-        display: none;
+        display:none;
     }
+} */
+
+a {text-decoration:none;}
+
+
+*{padding:0;
+    /* box-sizing:border-box; */
+    font-family:Georgia;
+    margin:0;
 }
+    
\ No newline at end of file

templates/classrooms.html

@@ -42,7 +42,7 @@
                         <h3>Classrooms</h3>
                     </div>
                     <div class="icon-case">
-                        <img src="{{ url_for('static', filename='img/students.png') }}" alt="">
+                        <img src="{{ url_for('static', filename='img/goodcond.png') }}" alt="">
                     </div>
                 </div>
                 <div class="card">
@@ -51,7 +51,7 @@
                         <h3>Good Condition</h3>
                     </div>
                     <div class="icon-case">
-                        <img src="{{ url_for('static', filename='img/teachers.png') }}" alt="">
+                        <img src="{{ url_for('static', filename='img/goodcond_class.png') }}" alt="">
                     </div>
                 </div>
                 <div class="card">
@@ -60,7 +60,7 @@
                         <h3>Need Minor Repair</h3>
                     </div>
                     <div class="icon-case">
-                        <img src="{{ url_for('static', filename='img/schools.png') }}" alt="">
+                        <img src="{{ url_for('static', filename='img/min_repair.png') }}" alt="">
                     </div>
                 </div>
                 <div class="card">
@@ -69,7 +69,7 @@
                         <h3>Need Major Repair</h3>
                     </div>
                     <div class="icon-case">
-                        <img src="{{ url_for('static', filename='img/income.png') }}" alt="">
+                        <img src="{{ url_for('static', filename='img/maj_repair.png') }}" alt="">
                     </div>
                 </div>
             </div>

templates/facilities.html

@@ -42,7 +42,7 @@
                         <h3>Enrolment &lt;= 50</h3>
                     </div>
                     <div class="icon-case">
-                        <img src="{{ url_for('static', filename='img/students.png') }}" alt="">
+                        <img src="{{ url_for('static', filename='img/team.png') }}" alt="">
                     </div>
                 </div>
                 <div class="card">
@@ -51,7 +51,7 @@
                         <h3>Schools with Drinking Water</h3>
                     </div>
                     <div class="icon-case">
-                        <img src="{{ url_for('static', filename='img/teachers.png') }}" alt="">
+                        <img src="{{ url_for('static', filename='img/water.png') }}" alt="">
                     </div>
                 </div>
                 <div class="card">
@@ -60,7 +60,7 @@
                         <h3>Schools with Girls' Toilet</h3>
                     </div>
                     <div class="icon-case">
-                        <img src="{{ url_for('static', filename='img/schools.png') }}" alt="">
+                        <img src="{{ url_for('static', filename='img/toilet.png') }}" alt="">
                     </div>
                 </div>
                 <div class="card">
@@ -69,7 +69,7 @@
                         <h3>Schools with Ramp</h3>
                     </div>
                     <div class="icon-case">
-                        <img src="{{ url_for('static', filename='img/income.png') }}" alt="">
+                        <img src="{{ url_for('static', filename='img/ramp.png') }}" alt="">
                     </div>
                 </div>
                 <div class="card">
@@ -78,7 +78,7 @@
                         <h3>Single Classroom Schools</h3>
                     </div>
                     <div class="icon-case">
-                        <img src="{{ url_for('static', filename='img/teachers.png') }}" alt="">
+                        <img src="{{ url_for('static', filename='img/s_class.png') }}" alt="">
                     </div>
                 </div>
                 <div class="card">
@@ -87,7 +87,7 @@
                         <h3>Single Teacher Schools</h3>
                     </div>
                     <div class="icon-case">
-                        <img src="{{ url_for('static', filename='img/schools.png') }}" alt="">
+                        <img src="{{ url_for('static', filename='img/s_teacher.png') }}" alt="">
                     </div>
                 </div>
             </div>

templates/schools.html

@@ -42,7 +42,7 @@
                         <h3>Schools</h3>
                     </div>
                     <div class="icon-case">
-                        <img src="{{ url_for('static', filename='img/students.png') }}" alt="">
+                        <img src="{{ url_for('static', filename='img/school_1.png') }}" alt="">
                     </div>
                 </div>
                 <div class="card">
@@ -51,7 +51,7 @@
                         <h3>Government</h3>
                     </div>
                     <div class="icon-case">
-                        <img src="{{ url_for('static', filename='img/teachers.png') }}" alt="">
+                        <img src="{{ url_for('static', filename='img/govt.png') }}" alt="">
                     </div>
                 </div>
                 <div class="card">
@@ -60,7 +60,7 @@
                         <h3>Private</h3>
                     </div>
                     <div class="icon-case">
-                        <img src="{{ url_for('static', filename='img/schools.png') }}" alt="">
+                        <img src="{{ url_for('static', filename='img/private.png') }}" alt="">
                     </div>
                 </div>
                 <div class="card">
@@ -69,7 +69,7 @@
                         <h3>Others</h3>
                     </div>
                     <div class="icon-case">
-                        <img src="{{ url_for('static', filename='img/income.png') }}" alt="">
+                        <img src="{{ url_for('static', filename='img/others.png') }}" alt="">
                     </div>
                 </div>
             </div>

templates/teachers.html

@@ -42,7 +42,7 @@
                         <h3>Teachers</h3>
                     </div>
                     <div class="icon-case">
-                        <img src="{{ url_for('static', filename='img/students.png') }}" alt="">
+                        <img src="{{ url_for('static', filename='img/teachers.png') }}" alt="">
                     </div>
                 </div>
                 <div class="card">
@@ -51,7 +51,7 @@
                         <h3>Government</h3>
                     </div>
                     <div class="icon-case">
-                        <img src="{{ url_for('static', filename='img/teachers.png') }}" alt="">
+                        <img src="{{ url_for('static', filename='img/govt.png') }}" alt="">
                     </div>
                 </div>
                 <div class="card">
@@ -60,7 +60,7 @@
                         <h3>Private</h3>
                     </div>
                     <div class="icon-case">
-                        <img src="{{ url_for('static', filename='img/schools.png') }}" alt="">
+                        <img src="{{ url_for('static', filename='img/private.png') }}" alt="">
                     </div>
                 </div>
                 <div class="card">
@@ -69,7 +69,7 @@
                         <h3>Others</h3>
                     </div>
                     <div class="icon-case">
-                        <img src="{{ url_for('static', filename='img/income.png') }}" alt="">
+                        <img src="{{ url_for('static', filename='img/others.png') }}" alt="">
                     </div>
                 </div>
             </div>