Add files via upload

mathewjosephta · Aug 26, 2024 · 4f26b92 · 4f26b92
1 parent 1d23f27
commit 4f26b92
Show file tree

Hide file tree

Showing 3 changed files with 119 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Mini Calender by Mathew</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <div class="hero">
+        <h1 id="heading"> <span>Mini</span> Calendar</h1>
+        <div class="calendar">
+            <div class="box">
+                <div class="left">
+                    <p id="date">01</p>
+                    <p id="day">Sunday</p>
+                </div>
+                <div class="right">
+                    <p id="month">January</p>
+                    <p id="year">2020</p>
+                </div>
+            </div>
+        </div>
+        <p id="copyright">© Created by Mathew Joseph T A</p>
+    </div>
+
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/script.js b/script.js
@@ -0,0 +1,14 @@
+const date = document.getElementById('date');
+const day = document.getElementById('day');
+const month = document.getElementById('month');
+const year = document.getElementById('year');
+
+const today = new Date();
+
+const weekDays = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
+const allMonths = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
+
+date.innerHTML = (today.getDate()<10?"0":"") + today.getDate();
+day.innerHTML = weekDays[today.getDay()];
+month.innerHTML = allMonths[today.getMonth()];
+year.innerHTML = today.getFullYear();
diff --git a/style.css b/style.css
@@ -0,0 +1,76 @@
+*{
+    margin:0 ;
+    padding: 0;
+    font-family:'Poppins',sans-serif;
+    box-sizing: border-box;
+}
+
+.hero{
+    background: linear-gradient(45deg, #1d0000, #20205b);
+    height: 100%;
+    width: 100%;
+    min-height: 100vh;
+}
+
+#heading{
+    color: #fff;
+    text-align: center;
+    font-size: 60px;
+    padding-top: 50px;
+    font-weight: 500;
+}
+
+#heading span{
+    color: #f4351e ;
+}
+
+.calendar{
+    display: flex;
+    justify-content: center;
+    margin-top: 30px;
+    margin-bottom: 0px;
+}
+
+.box{
+    width: 300px;
+    height: 250px;
+    background: #fff;
+    display: flex;
+    align-items: center;
+    border-radius: 10px;
+}
+
+.left, .right{
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    font-size: 24px;
+}
+
+.right{
+    width: 42%;
+    background-color: #f4351e;
+    color: #fff;
+    border-top-right-radius: 10px;
+    border-bottom-right-radius: 10px;
+}
+
+.left{
+    width: 58%;
+}
+
+#date{
+    font-size: 100px;
+    line-height: 90px;
+}
+
+#copyright{
+    color: #fff;
+    text-align: center;
+    font-size: 20px;
+    font-weight: 500;
+    margin-top: 100px;
+
+}