Added social icons on the left of the website and changed the title o…

package.json

@@ -1,5 +1,5 @@
 {
-  "homepage": ".",
+  "homepage": "http://.",
   "name": "girl-code-it-website",
   "version": "0.1.0",
   "private": true,
@@ -52,5 +52,15 @@
     "Community",
     "Coding"
   ],
-  "description": "Official website of Girl Code It"
+  "description": "Official website of Girl Code It",
+  "main": "index.js",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/RiyaGupta89/Girl-Code-It-Website-Frontend.git"
+  },
+  "author": "",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/RiyaGupta89/Girl-Code-It-Website-Frontend/issues"
+  }
 }

src/homepage/CSS/AboutUs.module.css

@@ -28,12 +28,16 @@
 
 .AboutImage {
   margin-top: 15%;
+  padding-left: 20px;
+  padding-right: 20px;
 }
 
 .description {
   text-align: justify;
   font-family: "Inter", sans-serif;
   font-size: 1.1rem;
+  padding-left: 20px;
+  padding-right: 20px;
 }
 
 .rectangle {
@@ -87,6 +91,10 @@ a:hover {
     right: 30%;
     /* margin-top: -42px; */
   }
+  .Jumbotron {
+    padding-left: 30px;
+    padding-right: 30px;
+  }
 }
 
 @media screen and (max-width: 375px) {

src/homepage/CSS/Banner.module.css

@@ -8,6 +8,39 @@
 .container {
   margin-top: 40px;
 }
+.SocialLinks1 {
+  display: flex;
+  flex-direction: column;
+  font-size: 1.25rem;
+  position:fixed;
+  /* position: absolute; */
+  bottom: 260px;
+  /* top:290px; */
+  /* top: 45vh; */
+  margin-right: 30px;
+  z-index: 100000;
+}
+
+.Shift1 {
+  color: #111;
+  padding: 1%;
+  margin: 7px 0px;
+  padding: 3px 6px;
+  z-index: 100000;
+  background-color: #fff;
+  border-radius: 10px;
+  vertical-align: middle;
+}
+
+.divshift1 {
+  background-color: #008dc8;
+  border-top-right-radius: 25px;
+  border-bottom-right-radius: 25px;
+  margin: 3px 0;
+  padding: 6px 5px;
+  width: 44px;
+}
+
 .heading {
   font-family: "Arial";
   font-weight: normal;
@@ -71,12 +104,13 @@ a {
 }
 .rectangle {
   height: 5px;
-  width: 130px;
+  width: 180px;
   background-color: #008dc8;
   position: relative;
   bottom: 50px;
   float: right;
-  right: 190px;
+  right: 120px;
+  /* right: 377px; */
 }
 
 @media screen and (min-width: 1199px) {
@@ -197,6 +231,13 @@ a {
   .Button {
     left: 24%;
   }
+  .container-sm {
+    padding-left: 20px;
+    padding-right: 20px;
+  }
+  #impact {
+    margin-left: 30px;
+  }
 }
 @media screen and (max-width: 503px) {
   .Button {
@@ -213,6 +254,24 @@ a {
   .Button {
     left: 20%;
   }
+  .heading {
+    font-size: 50px;
+  }
+  .containersmall,
+  .containerimpact {
+    padding-left: 30px;
+    padding-right: 30px;
+  }
+
+
+  /* .SocialLinks1 {
+    font-size: 1.15rem;
+    bottom: 30px;
+  }
+  .Shift1 {
+    margin: 5px 7px;
+  } */
+
 }
 @media screen and (max-width: 390px) {
   .Button {

src/homepage/CSS/FAQS.module.css

@@ -8,6 +8,8 @@
     text-align: center;
     margin-top: 100px;
     letter-spacing: 0;
+    padding-left: 40px;
+    padding-right: 40px;
 }
 .onHover:hover{
   text-decoration: none;
@@ -83,8 +85,9 @@
     width: 82%;
     margin-left: 10%;
     padding: 7px;
-    padding-left: 0px;
+    padding-left: 0px; 
   }
+
   .faqQuestion{
     font-size: 1.25rem;
   }

src/homepage/CSS/Impact.module.css

@@ -125,7 +125,7 @@ body {
 
 @media (max-width: 768px) {
   .Card {
-    margin-left: 5%;
+    margin-left: 9%;
   }
 
   .Button {

src/homepage/CSS/QuestionsForm.module.css

@@ -38,3 +38,12 @@
     padding-right: 25px;
     padding-left: 25px;
 }
+
+
+@media (max-width: 450px) {
+    .form,
+    .img {
+        margin-left: 30px;
+        margin-right: 30px;
+    }
+}

src/homepage/CSS/TestimonialCard.module.css

@@ -76,3 +76,14 @@
     min-height: 30px;
   }
 }
+
+@media(max-width: 450px) {
+ .card {
+   margin-left: 30px;
+   margin-right: 30px;
+ }
+ .containerfaq {
+   margin-left: 30px;
+   margin-right: 30px;
+ }
+}

src/homepage/Components/Banner.js

@@ -5,25 +5,85 @@ import code from "../assets/code.svg";
 import girl from "../assets/girl.svg";
 import smallscreen from "../assets/smallscreen.png";
 import { Link } from "react-scroll";
+import {
+  FaLinkedinIn,
+  FaInstagram,
+  FaTwitter,
+  FaRegLightbulb,
+  FaGithub,
+} from "react-icons/fa";
 
 export default function Banner() {
   return (
     <Jumbotron id="home" className={styles.Jumbotron} fluid>
+      <div className={styles.SocialLinks1}>
+        <div className={styles.divshift1}>
+          <a
+            href="https://www.linkedin.com/company/14568052/admin/"
+            target="_blank"
+            className={styles.Shift1}
+          >
+            {" "}
+            <FaLinkedinIn />{" "}
+          </a>
+        </div>
+        <div className={styles.divshift1}>
+          <a
+            href="https://www.instagram.com/girlcodeit/"
+            target="_blank"
+            className={styles.Shift1}
+          >
+            {" "}
+            <FaInstagram />{" "}
+          </a>
+        </div>
+        <div className={styles.divshift1}>
+          <a
+            href="https://twitter.com/GirlCodeIt1"
+            target="_blank"
+            className={styles.Shift1}
+          >
+            {" "}
+            <FaTwitter />{" "}
+          </a>
+        </div>
+        <div className={styles.divshift1}>
+          <a
+            href="https://github.com/GirlCodeIt1"
+            target="_blank"
+            className={styles.Shift1}
+          >
+            {" "}
+            <FaGithub />{" "}
+          </a>
+        </div>
+      </div>
       <Container className={styles.container}>
         <Row>
           <Col md={6} lg={7}>
             <h1 className={styles.heading}>
-              Give wings to <br className={styles.align} /> your
+              Give wings  <br className={styles.align} /> to your
               <span style={{ color: "#008dc8" }}> dreams </span>
             </h1>
             <div className={styles.rectangle} />
-            <a className = {styles.Button}><Link to="impact" offset={-200} duration={1000} style={{ color: "white"}}> 
-              Our courses
-            </Link></a>
+            <a className={styles.Button}>
+              <Link
+                to="impact"
+                offset={-200}
+                duration={1000}
+                style={{ color: "white" }}
+              >
+                Our courses
+              </Link>
+            </a>
             <br className={styles.set} />
             <br className={styles.align} />
             <br className={styles.align} />
-            <a href = "https://docs.google.com/forms/d/e/1FAIpQLSccNJQ-1Jf8T6JVLmCr_evXRVGqKO6SBJNyZ5rdRyMqPzMHHg/viewform" className={styles.Button} style = {{marginLeft: "80px"}}>
+            <a
+              href="https://docs.google.com/forms/d/e/1FAIpQLSccNJQ-1Jf8T6JVLmCr_evXRVGqKO6SBJNyZ5rdRyMqPzMHHg/viewform"
+              className={styles.Button}
+              style={{ marginLeft: "80px" }}
+            >
               Volunteer
             </a>
           </Col>
@@ -33,25 +93,29 @@ export default function Banner() {
           </Col>
         </Row>
       </Container>
+
       <Container className={styles.containersmall} fluid>
         <h1 style={{ textAlign: "center" }} className={styles.heading}>
-          Give wings to <br className={styles.align} /> your
+          Give wings <br className={styles.align} /> to your
           <span style={{ color: "#008dc8" }}> dreams </span>
           <div className={styles.Rectsmall} />
         </h1>
         <Image
-          className="justify-content-md-center"
+          className="justify-content-md-center img"
           style={{ maxWidth: "90%" }}
           src={smallscreen}
           alt="girl code"
           fluid
         />
         <br />
         <br />
-        <a href = "#about" className = {styles.Button}> 
+        <a href="#about" className={styles.Button}>
           About Us
         </a>
-        <a href = "https://docs.google.com/forms/d/e/1FAIpQLSccNJQ-1Jf8T6JVLmCr_evXRVGqKO6SBJNyZ5rdRyMqPzMHHg/viewform/" className={styles.Button}>
+        <a
+          href="https://docs.google.com/forms/d/e/1FAIpQLSccNJQ-1Jf8T6JVLmCr_evXRVGqKO6SBJNyZ5rdRyMqPzMHHg/viewform/"
+          className={styles.Button}
+        >
           Volunteer
         </a>
       </Container>

src/homepage/Components/FAQS.js

@@ -38,7 +38,10 @@ export default class FAQS extends Component {
             <span style={{ color: "#008dc8" }}> Questions</span>
           </h1>
           <Row style={{ marginTop: "50px" }}>
-            <div>{FAQCards}</div>
+          <Row> <div>
+          {FAQCards}
+          </div>
+          </Row>
           </Row>
         </Container>
       </div>

src/homepage/Components/Impact.js

@@ -18,7 +18,7 @@ export default class Impact extends Component {
 
     return (
       <Jumbotron style={{ backgroundColor: "#ffffff" }}>
-        <Container fluid="sm">
+        <Container fluid="sm" className="containerimpact">
           <h1 className={styles.Heading}>
             How are we creating an{" "}
             <span style={{ color: "#008dc8", fontWeight: 900 }}>Impact</span>?

src/homepage/Components/QuestionsForm.js

@@ -77,11 +77,13 @@ export default class QuestionsForm extends Component {
             Still have some <span style={{ color: "#008dc8" }}>Questions</span>?
           </h1>
           <Row
+
+
             className="justify-content-md-center"
             style={{ marginTop: "50px" }}
           >
             <Col md={"auto"} lg={6}>
-              <Image src={questionsForm} alt="QuestionsForm" fluid />
+              <Image className={styles.img} src={questionsForm} alt="QuestionsForm" fluid />
             </Col>
             <Col lg={5}>
               {/* feedback messages */}
@@ -95,7 +97,7 @@ export default class QuestionsForm extends Component {
                 <Alert variant="danger">{this.state.error}</Alert>
               )}
 
-              <Form onSubmit={this.handleSubmit} ref={this.formRef}>
+              <Form className={styles.form} onSubmit={this.handleSubmit} ref={this.formRef}>
                 <Form.Group>
                   <Form.Control
                     type="text"