Merge pull request #24 from Mubashir-Md/main

Home page done with responsiveness
T-SIG · Jan 28, 2024 · aff170d · aff170d
2 parents 1acf18f + 9b0d1da
commit aff170d
Show file tree

Hide file tree

Showing 7 changed files with 112 additions and 1,452 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/public/css/.DS_Store b/public/css/.DS_Store
diff --git a/public/css/nav.css b/public/css/nav.css
@@ -89,7 +89,7 @@ nav {
 	top: 0;
 	height: 70px;
 	padding: 0 1.5em;
-	background-color: #121212;
+	/* background-color: #121212; */
 	font-family: 'Montserrat', sans-serif;
 }
 nav .logo {
@@ -118,7 +118,7 @@ nav .nav-item > a {
 }
 nav .nav-item > a:hover
 {
-	background-image: linear-gradient(62deg, #797535de 0%, #a17f22cd 100%);
+	/* background-image: linear-gradient(62deg, #797535de 0%, #a17f22cd 100%); */
 }
 nav .dropdown {
 	position: relative;
@@ -222,7 +222,7 @@ nav.opened .btn-hamburger span:nth-child(3) {
 		display: flex;
 		flex-direction: column;
 		justify-content: start;
-		background-image: linear-gradient(62deg, #797535de 0%, #a17f22cd 100%);
+		/* background-image: linear-gradient(62deg, #797535de 0%, #a17f22cd 100%); */
 		transition: bottom .5s ease-in-out;
 		overflow: hidden;
 		color: #000;

diff --git a/public/css/navbar.css b/public/css/navbar.css
@@ -63,7 +63,7 @@ nav {
 	top: 0;
 	height: 70px;
 	padding: 0 1.5em;
-	background-color: #121212;
+
 	font-family: 'Montserrat', sans-serif;
 }
 nav .logo {
@@ -89,10 +89,7 @@ nav .nav-item > a {
 	color: #edf2fc;
 	text-decoration: none;
 }
-nav .nav-item > a:hover
-{
-	background-image: linear-gradient(62deg, #797535de 0%, #a17f22cd 100%);
-}
+
 nav .dropdown {
 	position: relative;
 }

diff --git a/public/events.html b/public/events.html
@@ -90,7 +90,6 @@
   background-size: 200% auto;
   color: #fff;
   background-clip: text;
-  text-fill-color: transparent;
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   animation: textclip 2s linear infinite;

diff --git a/public/index.css b/public/index.css
@@ -1,51 +1,119 @@
 * {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
 }
 
-div.video{
+div.home {
     height: 100dvh;
     background-color: #000;
     width: 100%;
     display: flex;
     flex-direction: column;
-    justify-content: space-evenly;
+    justify-content: center;
     align-items: center;
-
-    margin-top: 40px;
-    @media (max-width: 500px) {
-        margin-top: 70px;
-
-    }
+
+}
+
+div.home p.text {
+    color: #fff;
+    font-size: 6rem;
+    font-weight: 400;
+    font-family: "Noto Sans Display", sans-serif;
+    text-align: center;
+    margin-bottom: 1rem;
+    line-height: 1.2;
+}
+
+div.home p.last {
+    color: #fff;
+    font-size: 2rem;
+    font-weight: 300;
+    font-family: "Noto Sans Display", sans-serif;
+    text-align: center;
+    margin-bottom: 1rem;
+    line-height: 1.2;
 }
 
-div.video img{
-    max-width: 800px;
-    max-height: 500px;
-    border: #fff solid 2px;
-    @media (max-width: 500px) {
-        height: auto;
-        max-height: 500px;
-        max-width: 250px;
+span.tsig {
+    color: #fff;
+    font-size: 7rem;
+    font-weight: 400;
+    font-family: "Noto Sans Display", sans-serif;
+    text-align: center;
+    background: linear-gradient(to bottom right,
+            #FFFFFF 0%,
+            #FFEA61 25%,
+            #FFEA61 50%,
+            #FFFFB7 75%,
+            #FFD400 100%);
+    -webkit-background-clip: text;
+    background-clip: text;
+    -webkit-text-fill-color: transparent;
+    -webkit-text-fill-color: transparent;
+    background-size: 500% auto;
+    animation: textShine 3s ease-in-out infinite alternate;
+}
+
+@keyframes textShine {
+    0% {
+        background-position: 100% 0%;
+    }
+
+    100% {
+        background-position: 0% 100%;
     }
+}
+
+div.home div.down{
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+    align-items: center;
 
 }
-div.video a {
-    text-decoration: none;
-    color: #000;
-    background-color: #fff;
+div.down a{
+    margin: 10px;
+    background-color: transparent;
+    color: black;
+    font-size: 1.5rem;
+    font-weight: 400;
+    font-family: "Noto Sans Display", sans-serif;
     padding: 10px 20px;
-    border-radius: 5px;
-    font-size: 1.2rem;
+    border: white 2px 
+    solid;
     cursor: pointer;
+    transition: all 0.3s ease-in-out;
+
+}
+div.down p.last{
+    font-size: 2rem;
+    font-weight: 400;
+    font-family: "Noto Sans Display", sans-serif;
     text-align: center;
-    margin: 10px auto;
-    font-weight: bold;
-    @media (max-width: 500px) {
-        margin: 10px auto;
-        width: 50%;
+    margin: 1rem;
+
+}
+a i{
+    font-size: 3rem;
+    color: #FFF;
+}
+
+
+@media (min-width: 270px) and (max-width: 768px) {
+    div.home p.text {
+        font-size: 3rem;
+    }
+
+    div.home p.last {
+        font-size: 1rem;
+    }
+
+    span.tsig {
+        font-size: 4rem;
+    }
+
+    div.home a {
         font-size: 1rem;
-
     }
 }