home page added

niranjan-official · Apr 3, 2024 · e0b6a57 · e0b6a57
1 parent f03f174
commit e0b6a57
Show file tree

Hide file tree

Showing 3 changed files with 169 additions and 9 deletions.
diff --git a/assets/ipl-logo.png b/assets/ipl-logo.png
diff --git a/index.html b/index.html
@@ -1,12 +1,100 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" href="style.css">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="style.css" />
+    <link
+      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
+      rel="stylesheet"
+      integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
+      crossorigin="anonymous"
+    />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Anton&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Rowdies:wght@300;400;700&display=swap"
+      rel="stylesheet"
+    />
     <title>IPL-2024</title>
-</head>
-<body>
-    <h1>IPL-2024 Home page</h1>
-</body>
-</html>
+  </head>
+  <body>
+    <div class="min-vh-100 w-100 d-flex flex-column col-12 flex-md-row main">
+      <div
+        class="min-vh-100 col-12 col-md-6 d-flex flex-column justify-content-center align-items-center text-center title-div"
+      >
+        <img class="ipl-logo" src="./assets/ipl-logo.png" alt="" />
+        <h1 class="title font-italic">IPL 2024</h1>
+        <span class="title-date">MARCH 23, 2024 - MAY 29, 2024</span>
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke-width="1.5"
+          stroke="currentColor"
+          class="down-arrow"
+        >
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="m4.5 5.25 7.5 7.5 7.5-7.5m-15 6 7.5 7.5 7.5-7.5"
+          />
+        </svg>
+      </div>
+      <div
+        class="col-12 col-md-6 d-flex flex-column align-items-center p-4 teams"
+      >
+        <h2>Teams</h2>
+        <div class="team-col mt-5">
+          <a
+            href="/mi/mi.html"
+            class="d-flex justify-content-center bg-danger px-5 py-2 team-each"
+          >
+            <span>Mumbai Indians</span>
+          </a>
+          <a
+            href="/csk/csk.html"
+            class="d-flex justify-content-center bg-danger px-5 py-2 team-each"
+          >
+            <span>Chennai Super Kings</span>
+          </a>
+          <a
+            href="/rcb/rcb.html"
+            class="d-flex justify-content-center bg-danger px-5 py-2 team-each"
+          >
+            <span>Royal Challengers</span>
+          </a>
+          <a
+            href="/rr/rr.html"
+            class="d-flex justify-content-center bg-danger px-5 py-2 team-each"
+          >
+            <span>Rajasthan Royals</span>
+          </a>
+          <a
+            href="/dc/dc.html"
+            class="d-flex justify-content-center bg-danger px-5 py-2 team-each"
+          >
+            <span>Delhi Capitals</span>
+          </a>
+          <a
+            href="/kkr/kkr.html"
+            class="d-flex justify-content-center bg-danger px-5 py-2 team-each"
+          >
+            <span>Kolkata Knight Riders</span>
+          </a>
+          <a
+            href="/pbks/pbks.html"
+            class="d-flex justify-content-center bg-danger px-5 py-2 team-each"
+          >
+            <span>Kings XI Punjab</span>
+          </a>
+        </div>
+      </div>
+    </div>
+    <script
+      src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
+      integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
+      crossorigin="anonymous"
+    ></script>
+  </body>
+</html>
diff --git a/style.css b/style.css
@@ -0,0 +1,72 @@
+.main {
+  background-color: rgb(2, 2, 136);
+  color: #fff;
+}
+.title-div{
+    padding-bottom: 4rem;
+}
+.title {
+  font-size: 8rem;
+  font-family: "Anton", sans-serif;
+  font-weight: 600;
+  font-style: normal;
+  line-height: 0.9;
+  margin-top: 3rem;
+  color: gold;
+  text-shadow: 5px 5px #000000;
+}
+.title-date {
+  font-size: 1.1rem;
+  font-family: "Rowdies", sans-serif;
+  font-weight: 400;
+  font-style: normal;
+  color: #fff;
+  letter-spacing: 4.5px;
+}
+.ipl-logo {
+  width: 40%;
+}
+.teams {
+  font-family: "Poppins", sans-serif;
+  font-style: normal;
+}
+.teams h2 {
+    font-weight: 700;
+}
+.team-col{
+    width: 70%;
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+}
+.team-each{
+    width: max;
+    border-radius: 20px;
+    font-weight: 500;
+    font-size: 1.1rem;
+    text-decoration: none;
+    color: #eee;
+}
+.down-arrow{
+    display: none;
+    margin-top: 2rem;
+    width: 3rem;
+}
+@media (max-width: 640px) {
+    .ipl-logo {
+        width: 70%;
+      }
+    .team-col{
+        width: 100%;
+    }
+    .title{
+        line-height: 1;
+    }
+    .title-date {
+        font-size: 0.9rem;
+        letter-spacing: 2px;
+      }
+      .down-arrow{
+        display: block;
+      }
+  }