Merge pull request #776 from isimarjitsingh/main

CODE CHANGE: UI improvement of posts and vlogs content #747
PriyaGhosal · Oct 15, 2024 · e66d0c8 · e66d0c8
2 parents 0f5f6ad + 6951d80
commit e66d0c8
Showing 1 changed file with 195 additions and 19 deletions.
diff --git a/index.html b/index.html
@@ -766,25 +766,201 @@ <h3 id="h1darkbtn">Adventure Trek in Himachal</h3>
       </div>
     </section>
     <!--posts section-->
-    <header class="posts_blog">
-      <h1>POSTS AND VLOGS</h1>
-    </header>
-
-    <main class="main_blogs">
-      <section id="upload">
-        <h2>Upload Content</h2>
-        <form id="upload-form">
-          <input type="file" id="file-input">
-          <button type="submit">Upload</button>
-        </form>
-      </section>
-
-      <section id="content">
-        <h2>Content</h2>
-        <ul id="content-list"></ul>
-      </section>
-    </main>
-
+    <div id="posts">
+      <header class="posts_blog">
+        <h1>POSTS AND VLOGS</h1>
+      </header>
+
+      <main class="main_blogs">
+        <section id="upload">
+          <h2>Upload Content</h2>
+          <form id="upload-form">
+            <input type="file" id="file-input">
+            <button id="submit" type="submit">Upload</button>
+          </form>
+        </section>
+
+        <section id="content">
+          <h2>Content</h2>
+          <input id="content-input" type="text">
+          <ul id="content-list"></ul>
+        </section>
+      </main>
+    </div>
+    <style>
+
+        /* Container for the posts and vlogs section */
+        #posts {
+          max-width: 1200px;
+          margin: 50px auto;
+          padding: 20px;
+          background-color: #fff;
+          box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+          border-radius: 12px;
+        }
+
+        #content-input{
+          width: 400px;
+          height: 200px;
+          border-color: #81c784;
+        }
+
+        /* Header styling */
+        header.posts_blog {
+          background-color: #4caf50;
+          padding: 20px;
+          text-align: center;
+          border-radius: 12px 12px 0 0;
+        }
+
+        header.posts_blog h1 {
+          color: #fff;
+          font-size: 2.5rem;
+          margin: 0;
+          letter-spacing: 2px;
+          text-transform: uppercase;
+        }
+
+        /* Main section styling */
+        main.main_blogs {
+          display: flex;
+          justify-content: space-between;
+          padding: 20px;
+        }
+
+        /* Upload Section */
+        #upload {
+          width: 40%;
+          background-color: #e8f5e9;
+          padding: 20px;
+          border-radius: 10px;
+          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+        }
+
+        #upload h2 {
+          font-size: 1.8rem;
+          color: #4caf50;
+          margin-bottom: 15px;
+        }
+
+        #upload-form {
+          display: flex;
+          flex-direction: column;
+        }
+
+        #file-input {
+        border: 2px dashed #4caf50;
+        background-color: #f1f8e9;
+        color: #4caf50;
+        font-size: 1rem;
+        cursor: pointer;
+        text-align: center;
+        transition: border-color 0.3s, background-color 0.3s;
+      }
+
+      /* Hover state: change border and background color */
+      #file-input:hover {
+        border-color: #81c784;
+        background-color: #e8f5e9;
+      }
+
+      /* Focus state: when the input is clicked */
+      #file-input:focus {
+        outline: none;
+        border-color: #66bb6a;
+        background-color: #c8e6c9;
+      }
+
+      /* Active state: when file is being dragged over the input */
+      #file-input:active,
+      #file-input:focus-visible {
+        border-color: #388e3c;
+        background-color: #a5d6a7;
+      }
+
+      /* File input placeholder text styling */
+      #file-input::file-selector-button {
+        color: #fff;
+        background-color: #4caf50;
+        border: none;
+        padding: 10px 15px;
+        border-radius: 5px;
+        cursor: pointer;
+        transition: background-color 0.3s;
+      }
+
+      #file-input::file-selector-button:hover {
+        background-color: #66bb6a;
+      }
+
+
+        #submit{
+          background-color: #876bb1;
+          margin-left: 40px;
+          margin-top: 20px;
+
+        }
+
+        #submit:hover{
+          background-color: #744caf;
+        }
+
+        #upload-form button {
+
+          color: #fff;
+          padding: 10px;
+          border: 1px solid #4caf50; /* Add a border to make the button more visible */
+          cursor: pointer;
+          font-size: 1.2rem;
+          transition: background-color 0.3s;
+        }
+
+        #upload-form button:hover {
+          background-color: #c081c7;
+        }
+
+        /* Content Section */
+        #content {
+          width: 55%;
+        }
+
+        #content h2 {
+          font-size: 1.8rem;
+          color: #4caf50;
+          margin-bottom: 15px;
+        }
+
+        #content-list {
+          list-style-type: none;
+          padding: 0;
+        }
+
+        #content-list li {
+          background-color: #e8f5e9;
+          padding: 15px;
+          margin-bottom: 10px;
+          border-radius: 8px;
+          transition: background-color 0.3s;
+          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
+        }
+
+        #content-list li:hover {
+          background-color: #c8e6c9;
+        }
+
+        /* Media query for responsiveness */
+        @media (max-width: 768px) {
+          main.main_blogs {
+            flex-direction: column;
+          }
+
+          #upload, #content {
+            width: 100%;
+            margin-bottom: 20px;
+          }
+        }
+
+    </style>
     <script src="script.js"></script>
     <!--forum Section-->
     <header class="forum_1">