acmditu · aditya345-coder · Nov 21, 2022 · Nov 21, 2022
diff --git a/Blogs_Page/Blogs.html b/Blogs_Page/Blogs.html
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="CSS/styles.css"> 
+    <title>Blog Page</title>
+</head>
+<div class="Main">
+    <!-- Heading -->
+    <div class="Title_our_blogs"><P>OUR BLOGS</p></div>
+    <!-- javascript year button  -->
+    <div class="year_Box">
+        <select id="ddlYears"></select>
+        <script type="text/javascript">
+        window.onload = function () {
+            //Reference the DropDownList.
+            var ddlYears = document.getElementById("ddlYears");
+
+            //Determine the Current Year.
+            var currentYear = (new Date()).getFullYear();
+
+            //Loop and add the Year values to DropDownList.
+            for (var i = 2015; i <= currentYear; i++) {
+                var option = document.createElement("OPTION");
+                option.innerHTML = i;
+                option.value = i;
+                ddlYears.appendChild(option);
+            }
+        };
+        </script>
+    </div> 
+    <!-- javascript year button ends -->
+    <div class="left_container">
+        <div class="Event_image1"></div>
+        <div class="Event_image2"></div>
+        <div class="Event_image3"></div>
+    </div>
+    <div class="line"></div>
+    <div class="right_container">
+        <div class="Event_image4"></div>
+        <div class="Event_image5"></div>
+        <div class="Event_image6"></div>
+    </div>
+
+    <div class="middle_container">
+        <div>
+            <div class="line-1"></div>
+            <div class="circle_1"></div>
+            <div class="circle_2"></div>
+            <div class="circle_3"></div>
+            </div>
+        </div>
+    </div>
+</div>
+<body>
+
+</body>
+</html>
diff --git a/Blogs_Page/CSS/styles.css b/Blogs_Page/CSS/styles.css
@@ -0,0 +1,102 @@
+*{
+    margin: 0rem;
+    padding: 0rem;
+  }
+  .Title_our_blogs{
+      font-size: 3rem;
+      color: #ffffff;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-weight: bolder;
+      background-color: #3051FF;
+  }
+  .left_container{
+      display: flex;
+      flex-direction: row;
+      align-items: flex-end;
+      justify-content:end;
+      margin-left: 25rem;
+      margin-top: 3rem;
+  }
+  .Event_image1{
+      content: url(/Blogs_Page/Images/Acm_Image_102.webp);
+      width: 29rem;
+      height: 18rem;
+      margin-right: 58rem;
+  }
+  .right_container{
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      text-align: center;
+  }
+  .Event_image4{
+      content: url(/Blogs_Page/Images/Acm_Image_102.webp);
+      width: 29rem;
+      height: 18rem;
+      margin-left: 58rem;
+  }
+  .Event_image6{
+      content: url(/Blogs_Page/Images/Acm_Image_103.jpg);
+      width: 29rem;
+      height: 18rem;
+      margin-right: 58rem;
+  }
+  /* Javascript for date */
+  .year{
+      display: flex;
+      color: #ffffff;
+      font-size: 5rem;
+  }
+  .year_Box{
+      /* date box*/
+      display: block;
+      width: 3.4375rem;
+      height: 10rem;
+      margin-left: 45.75rem;
+   }
+  #ddlYears{   
+      /*year -javascript*/
+      width: 3.4375rem;
+      height: 1.875rem;
+      margin-left: 0.6rem;
+      margin-top: 3rem;
+      /* display:block; */
+  }
+  /* Javascript ends */
+  /* Circles in between line */
+  .circle_1{
+      height: 1.25rem;
+      width: 1.25rem;
+      border-radius: 50%;
+      margin-left: 47.6rem;
+      margin-top: -148rem;
+      background: #3051FF;
+      box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+  }
+  .circle_2{
+      height: 1.25rem;
+      width: 1.25rem;
+      border-radius: 50%;
+      margin-left: 47.6rem;
+      margin-top: 17rem;
+      background: #3051FF;
+      box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);   
+  }
+  .circle_3{
+      height: 1.25rem;
+      width: 1.25rem;
+      border-radius: 50%;
+      margin-left: 47.6rem;
+      margin-top: 17rem;
+      background: #3051FF;
+      box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);   
+  }
+  .line-1{
+      border-left: 8px solid #3051FF;
+      height: 150rem;
+      margin-left: 48rem;
+      margin-top: -48rem;
+  }
diff --git a/Blogs_Page/Images/Acm_Image_101.jpg b/Blogs_Page/Images/Acm_Image_101.jpg
diff --git a/Blogs_Page/Images/Acm_Image_102.webp b/Blogs_Page/Images/Acm_Image_102.webp
diff --git a/Blogs_Page/Images/Acm_Image_103.jpg b/Blogs_Page/Images/Acm_Image_103.jpg