add container - Main App Area

KASRA10 · KASRA10 · commit 955317e75dd4 · 2025-08-31T00:07:00.000+03:30
diff --git a/Mini ToDoList App Page/css/responsive.css b/Mini ToDoList App Page/css/responsive.css
@@ -0,0 +1,5 @@
+@media (max-width: 768px) {
+  div.container {
+    width: 90%;
+  }
+}
diff --git a/Mini ToDoList App Page/css/style.css b/Mini ToDoList App Page/css/style.css
@@ -22,10 +22,12 @@ html {
 
 body {
   font-family: var(--primary-font), sans-serif;
+  background-color: var(--white-color);
+  height: 100vh;
   display: flex;
+  flex-flow: column nowrap;
   justify-content: center;
   align-items: center;
-  justify-items: center;
 }
 
 * {
@@ -95,3 +97,12 @@ a.button:hover:after {
 }
 /* End Of PublicItems */
 /* End Of Reset CSS */
+/* Body */
+div.container {
+  width: 60%;
+  height: 75vh;
+  background-color: white;
+  border-radius: var(--default-radius);
+  box-shadow: 3px 6px 10px 3px rgba(0, 0, 0, 0.15);
+}
+/* End Of Body */
diff --git a/Mini ToDoList App Page/index.html b/Mini ToDoList App Page/index.html
@@ -47,6 +47,7 @@
     <title>Mini ToDoList App Page</title>
   </head>
   <body>
+    <div class="container"></div>
     <button><a href="#" class="button">Test Button</a></button>
     <div id="root"></div>
     <script src="./js/main.js"></script>
