v1

package.json

@@ -9,6 +9,7 @@
     "node-sass": "^6.0.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-icons": "4.2.0",
     "react-scripts": "4.0.3",
     "styled-components": "^5.3.0",
     "web-vitals": "^1.1.2"

src/App.js

@@ -1,24 +1,14 @@
-import './App.css';
 import './components/style/hackodisha.scss';
 import Hackodisha from './components/hackodisha';
-import Date from './components/date';
-import Paragraph from './components/paragraph';
 import SocialLinks from './components/socialLinks';
+import Footer from './components/footer/footer';
 
 function App() {
   return (
     <main>
-      {/*  Hackodisha  */}
       <Hackodisha />
-
-      {/* Date  */}
-      <Date />
-
-      {/*  para */}
-      <Paragraph />
-
-      {/*  cards  */}
       <SocialLinks />
+      <Footer/>
     </main>
   );
 }

src/components/card.jsx

@@ -1,16 +1,21 @@
 import styled from 'styled-components';
 export const Card = styled.div`
-  width: fit-content;
   max-width: 300px;
   height: 300px;
   background-color: black;
   box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.29);
   display: flex;
   align-items: center;
-  justify-content: center;
+  justify-content: space-between;
   text-align: center;
-  margin: 10px 90px;
+  margin: 10px 30px;
 
+  @media screen and (max-width:768px){
+    margin: 10px 3px;
+  }
 
+  @media screen and (min-width:769px) and (max-width:1024px){
+    margin: 10px 20px;
+  }
 `;
 export default Card;

src/components/footer/footer.js

@@ -0,0 +1,20 @@
+import React from "react";
+import {
+  FooterContainer,
+  SocialMedia,
+  WebsiteRights,
+} from "./footerElement";
+
+function Footer() {
+  return (
+    <FooterContainer>
+      <SocialMedia>
+          <WebsiteRights>
+            Hack Odisha © {new Date().getFullYear()} All rights reserved.
+          </WebsiteRights>
+          </SocialMedia>
+    </FooterContainer>
+  );
+}
+
+export default Footer;

src/components/footer/footerElement.js

@@ -0,0 +1,20 @@
+import styled from "styled-components";
+
+export const WebsiteRights = styled.p`
+  color: #fff;
+  margin-bottom: 16px;
+`;
+
+export const FooterContainer = styled.div`
+  background-color: transparent;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  margin-top:50px;
+`;
+
+export const SocialMedia = styled.section`
+  max-width: 1000px;
+  width: 100%;
+`;

src/components/hackodisha.jsx

@@ -4,8 +4,18 @@ import React from 'react';
 function Hackodisha() {
   return (
     <div className=" Hackodisha-container">
-      <span className="hack">HACK</span>
-      <span className="odisha">ODISHA</span>
+      <h1 className="hackodisha">HACK<span style={{color:"red"}}>ODISHA</span></h1>
+      <br />
+      <h5 className="date-component">Sept. 18-19, 2021</h5>
+      <br />
+      <div className="paragraph">
+      Hackodisha hackathon brings you an enterprising platform where 
+      you can showcase your unique ideas and expand your 
+      boundaries with your creativity and proficiency. 
+      Webwiz NIT Rourkela is proud to host the hackathon 
+      on the occasion of the diamond jubilee celebration 
+      of NIT Rourkela.
+    </div>
     </div>
   );
 }

src/components/socialLinks.jsx

@@ -6,20 +6,48 @@ function SocialLinks() {
   return (
     <div className="social">
       <div className="social-links-container">
-        <a href="https://devfolio.co/hackodisha/dashboard">
+      <a href="https://devfolio.co/hackodisha/dashboard">
           {' '}
           <Card>
             <div className="box-img-container">
               <img
                 className="box-img-apply-with-devfolio"
-                src={require('./assets/devfolio.png').default}
+                src={require('./assets/devfolio1.webp').default}
                 alt="Hackodisha Devfolio Registeration"
               ></img>
               <span className="box-content">Hackodisha Registration</span>
             </div>
           </Card>
         </a>
 
+        <a href="https://hackodisha.xyz/">
+          {' '}
+          <Card>
+            <div className="box-img-container">
+              <img
+                className="box-img"
+                src={require('./assets/hackodisha-logo.png').default}
+                alt="Hackodisha Website"
+              ></img>
+              <span className="box-content"> Hackodisha website</span>
+            </div>
+          </Card>{' '}
+        </a>
+
+        <a href="https://hackodisha.typeform.com/to/N19eeAoC">
+          {' '}
+          <Card>
+            <div className="box-img-container">
+              <img
+                className="box-img"
+                src={require('./assets/hackodisha-logo.png').default}
+                alt="Hackodisha Website"
+              ></img>
+              <span className="box-content">Join us</span>
+            </div>
+          </Card>{' '}
+        </a>
+
         <a href="https://jarvis.owasp.co.in/">
           <Card>
             <div className="box-img-container">
@@ -46,20 +74,6 @@ function SocialLinks() {
           </Card>
         </a>
 
-        <a href="https://hackodisha.xyz/">
-          {' '}
-          <Card>
-            <div className="box-img-container">
-              <img
-                className="box-img"
-                src={require('./assets/hackodisha-logo.png').default}
-                alt="Hackodisha Website"
-              ></img>
-              <span className="box-content"> Hackodisha website</span>
-            </div>
-          </Card>{' '}
-        </a>
-
         <a href="https://www.instagram.com/webwiz.nitr/">
           {' '}
           <Card>

src/components/style/hackodisha.scss

@@ -10,19 +10,16 @@
   text-align: center;
   box-sizing: border-box;
   text-decoration: none;
+  overflow-x: hidden;
 
   .Hackodisha-container {
-    font-size: 5rem;
-    font-weight: 800;
     margin-top: 5vh;
-    margin-bottom: 10px;
+    margin-bottom: 5vh;
   }
 
-  .hack {
-    color: #ffffff;
-  }
-  .odisha {
-    color: #ff0000;
+  .hackodisha {
+    font-size: 7vw;
+    font-weight: 800;
   }
 
   // for date component
@@ -32,12 +29,25 @@
   }
 
   .paragraph {
-    // text-align: justify;
     padding: 0 10px;
     margin: 5vh 10vw;
     font-size: 2rem;
   }
 
+   @media screen and (max-width: 768px) {
+      .hackodisha{
+        font-size: 3rem;
+      }
+      .date-component{
+        font-size: 1.5rem;
+      }
+      .paragraph{
+        font-size: 1.3rem;
+        margin: 0;
+
+      }
+  }
+
   // for card component
 
   // social media links
@@ -47,9 +57,8 @@
     justify-content: center;
 
     .social-links-container {
-      // width: 80vw;
+      width: 80vw;
       display: flex;
-      //margin: 10vh 20vw;
       flex-wrap: wrap;
       text-decoration: none;
       justify-content: center;
@@ -87,8 +96,6 @@
           justify-content: center;
           align-items: center;
           background-color: black;
-          width: max-content;
-          height: max-content;
           text-decoration: none;
           font-size: 1.5rem;
           font-weight: 500;