landing (#3)

* Delete src directory * Add files via upload
technical-council-nitt · Sep 25, 2023 · 474500c · 474500c
1 parent 4bafd7f
commit 474500c
Show file tree

Hide file tree

Showing 23 changed files with 765 additions and 218 deletions.
diff --git a/src/App.jsx b/src/App.jsx
@@ -1,12 +1,12 @@
-import Router from './Router'
-
-function App() {
-
-  return (
-    <>
-      <Router />
-    </>
-  )
-}
-
-export default App
+import Router from './Router'
+
+function App() {
+
+  return (
+    <>
+      <Router />
+    </>
+  )
+}
+
+export default App
diff --git a/src/Components/AboutUs/index.jsx b/src/Components/AboutUs/index.jsx
@@ -1,14 +1,26 @@
-
-
-
-const AboutUs = () => {
-
-    return (
-        <>
-            <h1>About Us</h1>
-        </>
-    )
-}
-
-
-export default AboutUs;
+import "./styles.css";
+
+const AboutUs = () => {
+  return (
+    <div className="aboutPage">
+      <div className="inBox">
+        <div className="Box">
+          <div className="text-wrapper">About Us</div>
+          <p className="div">
+            The department lays prime focus on academics interspersed with
+            co-curricular and extra-curricular activities that bring the
+            versatility of its students to the fore and gives them a sound sense
+            of perspective. The faculty comprises of experienced and dedicated
+            teachers who with their expert inputs encourage students to explore
+            new avenues. The computer society “Websters” was started with the
+            aim to foster interest in the world of computers and technology. It
+            provides a platform for like-minded brains to communicate with each
+            other and expand their horizons.
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default AboutUs;
diff --git a/src/Components/AboutUs/styles.css b/src/Components/AboutUs/styles.css
@@ -0,0 +1,52 @@
+@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300&family=Montserrat:wght@300&family=PT+Sans:wght@700&family=Roboto+Mono:wght@300&family=Syne:wght@700&display=swap");
+
+.aboutPage {
+  background: linear-gradient(180deg, rgb(11, 2, 33) 0%, rgb(11, 1, 33) 100%);
+  background-color: rgba(255, 255, 255, 1);
+  min-height: 100vh;
+  width: 100vw;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.inBox {
+  background: linear-gradient(
+    180deg,
+    rgba(255, 255, 255, 0.05) 0%,
+    rgba(255, 255, 255, 0) 100%
+  );
+  border-radius: 20px;
+  box-shadow: inset 0px 0.5px 0px #ffffff80, 0px -2px 40px #bb9bff26,
+    0px -2px 10px #e9dfff4c;
+  width: 85vw;
+  min-height: 85vh;
+}
+
+.Box {
+  width: 80%;
+  margin: auto;
+  min-height: 84vh;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+  align-items: center;
+}
+
+.text-wrapper {
+  color: #ebebeb;
+  font-family: "Montserrat", Helvetica;
+  font-size: 4rem;
+  font-weight: 700;
+  letter-spacing: 0;
+  text-align: center;
+}
+
+.div {
+  align-self: stretch;
+  color: #ffffff;
+  font-family: "Montserrat", Helvetica;
+  font-size: 2rem;
+  font-weight: 300;
+  text-align: center;
+}
diff --git a/src/Components/Contact/index.jsx b/src/Components/Contact/index.jsx
@@ -1,14 +1,14 @@
-
-
-
-const Contact = () => {
-
-    return (
-        <>
-            <h1>Contact</h1>
-        </>
-    )
-}
-
-
+
+
+
+const Contact = () => {
+
+    return (
+        <>
+            <h1>Contact</h1>
+        </>
+    )
+}
+
+
 export default Contact;
diff --git a/src/Components/FaQs/index.jsx b/src/Components/FaQs/index.jsx
@@ -1,14 +1,14 @@
-
-
-
-const FaQs = () => {
-
-    return (
-        <>
-            <h1>FaQs</h1>
-        </>
-    )
-}
-
-
+
+
+
+const FaQs = () => {
+
+    return (
+        <>
+            <h1>FaQs</h1>
+        </>
+    )
+}
+
+
 export default FaQs;
diff --git a/src/Components/Header/header.css b/src/Components/Header/header.css
@@ -1,5 +1,41 @@
-
-
-.header{
-    color: blue;
-}
+@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300&family=Montserrat:wght@300&family=PT+Sans:wght@700&family=Roboto+Mono:wght@300&family=Syne:wght@700&display=swap");
+
+.navbarContent {
+  margin-top: 0vh;
+  margin: auto;
+  position: sticky;
+  display: flex;
+  justify-content: space-between;
+  color: #ececec;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 150%;
+  align-items: center;
+  width: 95svw;
+  position: relative;
+  top: 2vh;
+}
+.navbarMenu {
+  display: flex;
+  justify-content: space-around;
+  min-width: 40%;
+  color: #ececec;
+  font-family: Montserrat;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 150%; /* 24px */
+}
+
+nav {
+  width: 100vw;
+}
+
+.navbarMenu div {
+  margin-right: 10px;
+}
+
+.navbarContent img {
+  margin-left: 30px;
+  size: 120%;
+}
diff --git a/src/Components/Header/index.jsx b/src/Components/Header/index.jsx
@@ -1,14 +1,28 @@
-
-import "./header.css"
-
-const Header = () => {
-
-    return (
-        <>
-            <h1 className="header">Header</h1>
-        </>
-    )
-}
-
-
-export default Header;
+import "./header.css";
+import logo from "../../assets/logo.svg";
+
+const Header = () => {
+  return (
+    <nav className="navbar">
+      <div className="navbarContent">
+        <img src={logo} alt="Logo" className="logo" />
+        <div className="navbarMenu">
+          <div>
+            <p>About Us</p>
+          </div>
+          <div>
+            <p>Timeline</p>
+          </div>
+          <div>
+            <p>Sponsors</p>
+          </div>
+          <div>
+            <p>Contact</p>
+          </div>
+        </div>
+      </div>
+    </nav>
+  );
+};
+
+export default Header;
diff --git a/src/Components/Judges/index.jsx b/src/Components/Judges/index.jsx
@@ -1,14 +1,75 @@
-
-
-
-const Judges = () => {
-
-    return (
-        <>
-            <h1>Judges</h1>
-        </>
-    )
-}
-
-
-export default Judges;
+import "./styles.css";
+import logo from "../../assets/logo.svg";
+const Judges = () => {
+  return (
+    <div className="judgesPage">
+      <div className="Inbox">
+        <div className="judges-speakers">Judges &amp; Speakers</div>
+        <div className="box">
+          <div className="inlineBlock">
+            <div className="judge">
+              <div className="info">
+                <div className="designation">SOFTWARE</div>
+                <div className="title">TECHNICAL COUNCIL</div>
+                <div className="place">NIT TRICHY TECH COUNCIL</div>
+              </div>
+              <img src={logo} alt="logo" />
+            </div>
+          </div>
+          <div className="inlineBlock">
+            <div className="judge">
+              <div className="info">
+                <div className="designation">SOFTWARE</div>
+                <div className="title">TECHNICAL COUNCIL</div>
+                <div className="place">NIT TRICHY TECH COUNCIL</div>
+              </div>
+              <img src={logo} alt="logo" />
+            </div>
+          </div>
+          <div className="inlineBlock">
+            <div className="judge">
+              <div className="info">
+                <div className="designation">SOFTWARE</div>
+                <div className="title">TECHNICAL COUNCIL</div>
+                <div className="place">NIT TRICHY TECH COUNCIL</div>
+              </div>
+              <img src={logo} alt="logo" />
+            </div>
+          </div>
+          <div className="inlineBlock">
+            <div className="judge">
+              <div className="info">
+                <div className="designation">SOFTWARE</div>
+                <div className="title">TECHNICAL COUNCIL</div>
+                <div className="place">NIT TRICHY TECH COUNCIL</div>
+              </div>
+              <img src={logo} alt="logo" />
+            </div>
+          </div>
+          <div className="inlineBlock">
+            <div className="judge">
+              <div className="info">
+                <div className="designation">SOFTWARE</div>
+                <div className="title">TECHNICAL COUNCIL</div>
+                <div className="place">NIT TRICHY TECH COUNCIL</div>
+              </div>
+              <img src={logo} alt="logo" />
+            </div>
+          </div>
+          <div className="inlineBlock">
+            <div className="judge">
+              <div className="info">
+                <div className="designation">SOFTWARE</div>
+                <div className="title">TECHNICAL COUNCIL</div>
+                <div className="place">NIT TRICHY TECH COUNCIL</div>
+              </div>
+              <img src={logo} alt="logo" />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Judges;