diff --git a/M/style.css b/M/style.css
new file mode 100644
index 0000000000000000000000000000000000000000..5c919c8363ad4d51c410f61c5433f7f00c4642f2
--- /dev/null
+++ b/M/style.css
@@ -0,0 +1,261 @@
+* {
+    box-sizing: border-box;
+  }
+  
+  .divider {
+    margin-top: 30px;
+    margin-bottom: 30px;
+  }
+
+body {
+  padding: 16px;
+  margin: 0;
+  font-family: Arial, sans-serif;
+  background-color: #ffffff;
+}
+
+header {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-image: url("back.jpg");
+  padding: 30px;
+  margin-bottom: 5px;
+  color: white;
+  margin-left: 33px;
+}
+
+
+header img {
+  height: 80px; /* increase the height of the logo */
+ margin-right: 40px;
+ padding-left: 60px;
+ 
+
+}
+
+header h1 {
+  font-size: 36px; /* increase the font size of the title */
+  text-align: center; /* center the title horizontally */
+}
+
+header input[type="text"] {
+  padding: 10px;
+  border: none;
+  border-radius: 5px;
+  width: 400px;
+  font-size: 16px;
+  margin-left: 40px;
+}
+
+main {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  margin-top: 20px;
+}
+
+.item-list {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  padding: 0 20px;
+}
+
+.item {
+  width: calc(33.33% - 20px);
+  margin-bottom: 20px;
+  background-color: #fff;
+  border-radius: 5px;
+  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
+  overflow: hidden;
+}
+
+.item img {
+  width: 100%;
+  height: 200px;
+  object-fit: cover;
+}
+
+.item h2 {
+  font-size: 18px;
+  margin: 10px;
+  color: #333;
+}
+
+.item p {
+  font-size: 14px;
+  margin: 10px;
+  color: #777;
+}
+
+aside {
+  margin-top: 20px;
+}
+
+button {
+  padding: 10px 20px;
+  background-color: #0057b8;
+  color: #fff;
+  border: none;
+  border-radius: 5px;
+  font-size: 16px;
+  cursor: pointer;
+  margin-right: 10px;
+}
+
+button:hover {
+  background-color: #004da1;
+}
+
+.add-button 
+{
+  background-color: #0057b8;
+  border: none;
+  cursor: pointer;
+}
+  
+.form-popup
+{
+  display: none;
+  border: 3px solid;
+}
+
+.form-container
+{
+  max-width: 300px;
+  padding: 10px;
+  background-color: white;
+}
+
+
+.form-container input[type=text], .form-container input[type=desc]
+{
+  width: 100%;
+  padding: 15px;
+  border: none;
+}
+
+.form-container input[type=text]:focus, .form-container input[type="desc"]:focus
+{
+  background-color: #ddd;
+  outline: none;
+}
+
+
+.form-container .btn
+{
+  background-color: forestgreen;
+  border: none;
+  cursor: pointer;
+  width: 100%;
+  margin-bottom: 10px;
+  opacity: 0.8;
+}
+
+.form-container .cancel
+{
+  background-color: red;
+}
+
+.form-container .btn:hover, .add-button:hover 
+{
+  opacity: 1;
+}
+
+
+.add-text-btn
+{
+  background-color: darkblue;
+  border-radius: 25px;
+  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14),
+  0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
+}
+
+#index-html-page-div1
+{
+  display: flex; 
+  flex-direction: row; 
+  flex-wrap: wrap;
+}
+/* The sidebar menu */
+.sidebar {
+  height: 100%; /* 100% Full-height */
+  width: 0; /* 0 width - change this with JavaScript */
+  position: fixed; /* Stay in place */
+  z-index: 1; /* Stay on top */
+  top: 0;
+  left: 0;
+  background-color: #111; /* Black*/
+  overflow-x: hidden; /* Disable horizontal scroll */
+  padding-top: 60px; /* Place content 60px from the top */
+  transition: 0.5s; /* 0.5 second transition effect to slide in the sidebar */
+}
+
+/* The sidebar links */
+.sidebar a {
+  padding: 8px 8px 8px 32px;
+  text-decoration: none;
+  font-size: 25px;
+  color: #818181;
+  display: block;
+  transition: 0.3s;
+}
+
+/* When you mouse over the navigation links, change their color */
+.sidebar a:hover {
+  color: #f1f1f1;
+  padding: 10 px 20 px;
+  display: block;
+}
+
+/* Position and style the close button (top right corner) */
+.sidebar .closebtn {
+  position: absolute;
+  top: 0;
+  right: 25px;
+  font-size: 36px;
+  margin-left: 50px;
+}
+.sidebar button {
+  padding: 10px 20px;
+  margin-bottom: 30px;
+  display: block;
+}
+.parent-container {
+  height: 50px; /* Define the height of the parent container */
+}
+
+
+/* The button used to open the sidebar */
+.openbtn {
+  font-size: 20px;
+  cursor: pointer;
+  background-color: #111;
+  color: white;
+  padding: 10px 15px;
+  border: none;
+  top: 0;
+  left: 0;
+  z-index: 1;
+  position: sticky;
+}
+
+.openbtn:hover {
+  background-color: #444;
+
+}
+
+/* Style page content - use this if you want to push the page content to the right when you open the side navigation */
+#main {
+  transition: margin-left .5s; /* If you want a transition effect */
+  padding: 20px;
+}
+
+/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
+@media screen and (max-height: 450px) {
+  .sidebar {padding-top: 15px;}
+  .sidebar a {font-size: 18px;}
+}
+