Home page done

Aditya-0712 · Jul 6, 2023 · 0e76584 · 0e76584
1 parent 46291fb
commit 0e76584
Show file tree

Hide file tree

Showing 2 changed files with 162 additions and 1 deletion.
diff --git a/home.html b/home.html
@@ -17,6 +17,16 @@
                 <div></div>
                 <div></div>
             </div>
+
+            <a href="#" style="color:red">Logout</a>
+            <a href="#" style="margin-left: 0;">Your Blogs</a>
+
+            <div class="user_name">
+                <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512">
+                    <path d="M406.5 399.6C387.4 352.9 341.5 320 288 320H224c-53.5 0-99.4 32.9-118.5 79.6C69.9 362.2 48 311.7 48 256C48 141.1 141.1 48 256 48s208 93.1 208 208c0 55.7-21.9 106.2-57.5 143.6zm-40.1 32.7C334.4 452.4 296.6 464 256 464s-78.4-11.6-110.5-31.7c7.3-36.7 39.7-64.3 78.5-64.3h64c38.8 0 71.2 27.6 78.5 64.3zM256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm0-272a40 40 0 1 1 0-80 40 40 0 1 1 0 80zm-88-40a88 88 0 1 0 176 0 88 88 0 1 0 -176 0z"/>
+                </svg>
+                <p>Username</p>
+            </div>
         </div>
 
         <div class="sidebar" id="sidebar">
@@ -30,7 +40,26 @@
             <a href="#" style="margin-top: 60px;">Your Blogs</a>
             <a href="#" style="color:red">Logout</a>
         </div>
-
+
+        <div class="latest">
+            <p>LATEST BLOGS</p>
+            <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 320 512">
+                <path d="M137.4 374.6c12.5 12.5 32.8 12.5 45.3 0l128-128c9.2-9.2 11.9-22.9 6.9-34.9s-16.6-19.8-29.6-19.8L32 192c-12.9 0-24.6 7.8-29.6 19.8s-2.2 25.7 6.9 34.9l128 128z"/>
+            </svg>
+        </div>
+
+        <div class="post" style="margin-top: 40px;">
+            <div class="poster">
+                <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512">
+                    <path d="M406.5 399.6C387.4 352.9 341.5 320 288 320H224c-53.5 0-99.4 32.9-118.5 79.6C69.9 362.2 48 311.7 48 256C48 141.1 141.1 48 256 48s208 93.1 208 208c0 55.7-21.9 106.2-57.5 143.6zm-40.1 32.7C334.4 452.4 296.6 464 256 464s-78.4-11.6-110.5-31.7c7.3-36.7 39.7-64.3 78.5-64.3h64c38.8 0 71.2 27.6 78.5 64.3zM256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm0-272a40 40 0 1 1 0-80 40 40 0 1 1 0 80zm-88-40a88 88 0 1 0 176 0 88 88 0 1 0 -176 0z"/>
+                </svg>
+                <p>Username</p>
+            </div>
+            <p class="title">Title</p>
+            <p class="content">Hello my name is Aditya Batgeri and this is my first ever blog that I am writing to test out the template for a blog post on this website.</p>
+        </div>
+<!-- ---------------------------------------------------Mobile View ends here--------------------------------------------  -->
+
         <script src="public/home.js"></script>
     </body>
 </html>
diff --git a/public/home.css b/public/home.css
@@ -16,6 +16,7 @@ body
     height: auto;
     margin:10px auto 0px 0px;
     padding-bottom: 10px;
+    background-color: white;
     border-bottom: 1px solid rgba(0,0,0,0.3);
     position: fixed;
     z-index: 1;
@@ -130,4 +131,135 @@ body
     color:white;
     margin:20px auto 0px 20px;
     text-decoration: none;
+}
+
+.latest 
+{
+    display:flex;
+    width:100%;
+    margin:0;
+    padding-top: 100px;
+}
+
+.latest p 
+{
+    display:flex;
+    font-family: lexend-med;
+    font-size:24px;
+    color:#3a3a3a;
+    margin:auto auto auto 20px;
+}
+
+.latest svg 
+{
+    width:20px;
+    height: auto;
+    fill:blueviolet;
+    margin:auto 20px auto auto;
+    position: relative;
+    bottom: 3px;
+}
+
+.post
+{
+    display:flex;
+    flex-direction: column;
+    width:300px;
+    max-height: 500px;
+    padding:20px;
+    background-color: #FFFBF5;
+    margin:20px auto 0px auto;
+    border-radius: 5px;
+    border:1px solid rgba(0,0,0,0.2);
+    overflow-y:scroll;
+}
+
+.poster
+{
+    display:flex;
+    width:100%;
+    height: fit-content;
+    margin:0;
+}
+
+.poster svg 
+{
+    width:30px;
+    height: auto;
+    margin:auto 0px auto 0px;
+    fill:blueviolet;
+}
+
+.poster p 
+{
+    display:flex;
+    font-family: lexend-med;
+    font-size:25px;
+    color:black;
+    margin:auto auto auto 15px;
+}
+
+.title
+{
+    display:flex;
+    font-family: helvetica-med;
+    font-size:30px;
+    margin:25px auto 0px 0px;
+    color:#3a3a3a;
+}
+
+.content
+{
+    display:flex;
+    font-family: lexend-reg;
+    font-size:20px;
+    margin:15px auto 0px auto;
+    color:#3a3a3a;
+}
+
+.topbar .user_name , .topbar a
+{
+    display: none;
+}
+
+@media screen and (min-width:800px)
+{
+    .topbar
+    {
+        border:0;
+    }
+
+    .ham
+    {
+        display:none;
+    }    
+
+    .topbar .user_name
+    {
+        display:flex;
+        width: fit-content;
+        margin:auto 20px auto 0;
+    }
+
+    .topbar .user_name p 
+    {
+        color:#3a3a3a;
+    }
+
+    .topbar a 
+    {
+        display:flex;
+        font-family: helvetica-med;
+        font-size:25px;
+        color:#3a3a3a;
+        margin:auto 50px auto auto;
+        text-decoration: none;
+    }
+
+    .post 
+    {
+        margin:20px auto 0px 20px;
+        width: auto;
+        max-width: 1100px;
+    }
 }