some design fix + logics

app.js

@@ -0,0 +1 @@
+// Some logics will be implimented 

index.html

@@ -117,8 +117,51 @@ <h1>Tagged</h1>
             </section>
         <section class="container">
             <!-- Note Preview Here -->
+             <br>
+             <h1> &nbsp; Sample Notes Container || <small>Tool List</small></h1>
+             <br>
+             <hr>
+
             <div id="note" class="note">
-                Your Note Here
+                <h1>Title of Your Note Here</h1>
+                <p>
+                    Your Note Here
+                </p>
+
+                <code>
+                    //Add Some Code Here
+                </code>
+
+                <h2>Some List</h2>
+                <ul>
+                    <li>List  item 1</li>
+                    <li>List  item 1</li>
+                    <li>List  item 1</li>
+                    <li>List  item 1</li>
+                    <li>List  item 1</li>
+                    <li>List  item 1</li>
+                    <li>List  item 1</li>
+                </ul>
+
+                <br>
+
+                <br>
+
+                <h2>Some Paragraph</h2>
+
+                <p>
+                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem reiciendis iste exercitationem alias, natus quos, deserunt eum optio eius inventore iure obcaecati nisi fuga laudantium assumenda, nam quam veniam. Consequatur.
+                </p>
+
+                <h2>Some Images</h2>
+
+                <p>
+                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti enim earum unde iusto accusamus eligendi officiis! Dolorem alias nisi minus quia consectetur voluptas est fugit fugiat! Ullam id odit eaque!
+
+                </p>
+
+                <img src="./logo.png" alt="">
+
             </div>
         </section>
     </main>

style.css

@@ -88,28 +88,40 @@ section {
 .notes {
     display: flex;
     flex-direction: column;
-    }
-
+}
+
+#note {
+    padding: 40px 0 200px 10px ;
+    height: 100vh;
+    line-height: 40px;
+    overflow: scroll;
+    /* padding: 40px 0 200px 10px; */
+}
+
+#note ul, #note li{
+    margin: 0 0 0 10px;
+}
+
+#note img {
+    max-width: 100%;
+}
 .note {
     border: 1px solid;
     padding: 8px;
     cursor: pointer;
     /* border-radius: 20px ; */
     margin: 4px;
     transition: all .1s ease ;
-
-    }
-
-    #note {
-    min-height: 100vh;
+    opacity: .9;
+    background: rgb(255, 255, 255);
 
 }
 
 .note:hover {
     scale: 1.002;
-    margin: 10px;
+    /* margin: 10px; */
     border: 1px solid palevioletred;
-    background: transparent;
+    opacity: 1.2;
 }
 
 .notetitle {
@@ -137,7 +149,7 @@ section {
     display: flex;
     flex-grow: 1;
     flex-direction: row;
-    justify-content: space-around;
+    justify-content: flex-end;
     font-weight: bolder;
 }
 
@@ -147,7 +159,12 @@ section {
     padding: 4px;
     border-radius: 20px;
     max-height: max-content;
-
+    margin: 2px;
+    border: 2px solid transparent;
+}
+
+.notetags span:hover {
+    border: 2px solid;
 }
 
 .notetime {