created a new contact page and image 122

assets/css/dashboard.css

@@ -41,11 +41,12 @@ html {
   bottom: 0;
   left: 0;
   background-color: #000;
-  overflow-y: scroll;
+  overflow: hidden;
 }
 
 .the_left_bar {
   display: block;
+  margin-left: auto;
   background-color: #bebebe;
   overflow: hidden;
   height: 80vh;
@@ -81,7 +82,7 @@ html {
   background: rgb(132 131 211);
 }
 .the_left_bar:hover {
-  overflow: scroll;
+  overflow-y: scroll;
 }
 .the_right_bar {
   float: right;
@@ -117,15 +118,15 @@ html {
   background: rgb(132 131 211);
 }
 .the_right_bar:hover {
-  overflow: scroll;
+  overflow: auto;
 }
 
 .the_panel_selector {
   max-width: 95%;
   min-width: 60%;
 }
-.each_item + .each_item{
-	margin-top: 4px;
+.each_item + .each_item {
+  margin-top: 4px;
 }
 
 .the_selected_displayer .each_item {
@@ -134,32 +135,32 @@ html {
   white-space: nowrap;
 }
 .the_selected_displayer .each_item:hover {
-  overflow-x: scroll;
+  overflow-x: hidden;
 }
 
-.the_selected_displayer .each_item label{
-	width: 80px;
-	text-overflow: ellipsis;
-  overflow:hidden;
+.the_selected_displayer .each_item label {
+  width: 80px;
+  text-overflow: ellipsis;
+  overflow: hidden;
   white-space: nowrap;
   margin-top: 4px;
   vertical-align: bottom;
 }
 
-.the_selected_displayer .each_item label:hover{
-	  overflow: visible; 
-    white-space: normal;
-    height:auto;
+.the_selected_displayer .each_item label:hover {
+  overflow: hidden;
+  white-space: normal;
+  height: auto;
 }
 
-.the_selected_displayer .each_item .the_input_side{
-  width: 180px;
-
+.the_selected_displayer .each_item .the_input_side {
+  width: 80px;
 }
 
 .the_bottom_bar .the_bottom_elems {
-  border-radius: 12px;
+  border-radius: 8px;
   border: 2px solid #432424;
+  margin-top: 9px;
   background-color: #000;
   display: inline-block;
   position: static;
@@ -169,40 +170,39 @@ html {
 }
 
 .the_bottom_bar .the_bottom_elems_block {
-  border-radius: 12px;
-  border: 2px solid #432424;
-  background-color: green;
+  border-radius: 8px;
+  border: 1px solid #432424;
+  background-color: rgb(244, 244, 244);
   display: inline-block;
   position: static;
-  color: #fff;
+  color: #5d5d5d;
   padding: 8px;
   cursor: pointer;
 }
 
 .the_panel_submitter {
-  padding: 13px;
+  padding: 12px;
   display: block;
   background-color: darkblue;
-  color: #fedfed;
+  color: #ececec;
   border-radius: 12px;
   font-weight: bold;
 }
 
 .the_add_child_button {
-  padding: 13px;
+  padding: 8px;
   display: block;
-  background-color: green;
-  color: #fedfed;
+  background-color: rgb(59, 78, 139);
+  color: #eaeaea;
   border-radius: 12px;
-  font-weight: bold;
 }
 
 .the_dev_body {
   background-color: #fff;
   color: #000;
   border: 2px solid #940948;
   height: 80vh;
-  max-width: 60%;
+  max-width: 80%;
   display: inline-block;
   text-align: left;
   overflow: scroll;
@@ -239,8 +239,8 @@ html {
 .theTextPopUp {
   width: 50%;
   height: auto;
-  padding: 15px;
-  background-color: #000a8b;
+  padding: 2px;
+  background-color: #1b5149;
   color: blue;
   border-radius: 12px;
   position: absolute;
@@ -253,28 +253,30 @@ html {
 }
 
 .theTextPopUp input {
+  margin-bottom: 12px;
   width: 80%;
-  padding: 15px;
-  border-radius: 12px;
+  padding: 8px;
+  font-size: 16px;
+  border-radius: 6px;
 }
 
 .theTextPopUp textarea {
   width: 80%;
-  padding: 15px;
-  border-radius: 12px;
+  padding: 20px;
+  border-radius: 6px;
 }
 
 .theTextPopUp button {
   width: 80%;
-  padding: 15px;
-  background-color: #fff;
-  color: #000;
+  padding: 10px;
+  background-color: #061a0d;
+  color: #fcfcfc;
 }
 
 .theTextPopUp button:hover {
   width: 80%;
-  padding: 15px;
-  background-color: green;
+  padding: 12px;
+  background-color: rgb(21, 59, 21);
   color: #fefefe;
 }
 
@@ -764,34 +766,31 @@ html {
 }
 
 /*media queries for settings body*/
-@media only screen and (max-width: 900px){
-
-	.the_settings_section .settings_body{
-		left: 10%;
-		width: 80%;
-		top: 24%;
-
-	}
-	.settings_body ul{
-		margin-bottom:1%;
-		padding-left: 9%;
-	}
-	.the_settings_section .setting_item {
-		padding:2%;
-	}
-	#the_settings_section_page{
-	top: 18%;
+@media only screen and (max-width: 900px) {
+  .the_settings_section .settings_body {
+    left: 10%;
+    width: 80%;
+    top: 24%;
+  }
+  .settings_body ul {
+    margin-bottom: 1%;
+    padding-left: 9%;
+  }
+  .the_settings_section .setting_item {
+    padding: 2%;
+  }
+  #the_settings_section_page {
+    top: 18%;
     left: 12.5%;
-		width: 75%;
-    padding: 2%;	
-	}
-	.the_input_side{
-		display: block; 
-		margin:auto; 
-	}
-	.the_settings_section .settings_body .the_save_button{
-		width: 40%;
-		padding: 2%;
-
-	}
+    width: 75%;
+    padding: 2%;
+  }
+  .the_input_side {
+    display: block;
+    margin: auto;
+  }
+  .the_settings_section .settings_body .the_save_button {
+    width: 40%;
+    padding: 2%;
+  }
 }

assets/css/new-dashboard.css

@@ -0,0 +1,131 @@
+body {
+  margin: 0;
+  padding: 0;
+  background-color: #130606;
+}
+header {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  padding: 2px 6%;
+}
+img.logo {
+  display: block;
+  height: 24px;
+  cursor: pointer;
+  margin-right: inherit;
+}
+.navigate_links ul {
+  list-style: none;
+}
+.navigate_links li {
+  display: inline-block;
+
+  padding: 2px 20px;
+}
+.navigate_links ul li a {
+  font-family: "Roboto", sans-serif;
+  font-weight: 400;
+  font-size: 16px;
+  color: whitesmoke;
+  text-decoration: none;
+  transition: all 0.4s ease-in-out;
+  padding: 0px 8px 0px 0px;
+  border-right: 1px solid white;
+}
+.navigate_links ul li a:hover {
+  color: #2980b9;
+  border: 2px solid blue;
+  box-shadow: 3px 3px 3px rgb(116, 176, 109), 3px 3px 3px blue;
+  border-radius: 8px;
+  margin: 20px;
+  padding: 8px;
+}
+button {
+  margin-left: 70px;
+  padding: 9px 12px;
+  border-radius: 15px;
+  background-color: #2980b9;
+  color: rgb(243, 236, 236);
+  border: none;
+  cursor: pointer;
+  transition: all 0.3s ease-in-out;
+}
+button:hover {
+  background-color: rgb(108, 156, 125);
+  color: black;
+}
+
+i {
+  color: white;
+}
+.dropbtn {
+  background-color: #3498db;
+  color: white;
+  padding: 16px;
+  font-size: 16px;
+  border: none;
+  cursor: pointer;
+}
+
+/* Dropdown button on hover & focus */
+.dropbtn:hover,
+.dropbtn:focus {
+  background-color: #2980b9;
+}
+
+/* The container <div> - needed to position the dropdown content */
+.dropdown {
+  position: relative;
+  display: inline-block;
+}
+
+/* Dropdown Content (Hidden by Default) */
+.dropdown-content {
+  margin-top: 10px;
+  display: none;
+  position: absolute;
+  background-color: #f1f1f1;
+  min-width: 160px;
+  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
+  z-index: 1;
+}
+
+/* Links inside the dropdown */
+.dropdown-content a {
+  color: black;
+  padding: 10px 12px;
+  text-decoration: none;
+  display: block;
+}
+
+/* Change color of dropdown links on hover */
+.dropdown-content a:hover {
+  background-color: #ddd;
+}
+
+/* Show the dropdown menu (use JS to add this class when the user clicks on the button) */
+.show {
+  display: block;
+}
+
+.menus {
+  list-style-type: none;
+}
+.menu-item {
+  margin-left: -40px;
+  position: relative;
+  /* Add some space for the icon */
+}
+.menu-item i {
+  position: absolute;
+  right: 0;
+  top: 30%;
+
+  font-size: 16px; /* Adjust icon size */
+}
+
+.menus2 {
+  margin-left: 60px;
+  margin-right: 60px;
+}