Merge pull request #183 from jarosipatricia/master

Added subscription section

website/src/components/Subscribe/index-sub.css

@@ -0,0 +1,58 @@
+.sub-title {
+  padding-top: 2%;
+  padding-right: 25%;
+}
+
+.sub-container {
+    display: flex;
+}
+
+.sub-child-left {
+  flex: 1;
+  padding-top: 2.8%;
+  padding-right: 3%;
+  padding-left: 10%;
+}
+
+.sub-button {
+  background-color: rgb(233, 190, 110);
+  color: black;
+  font-size: 100%;
+  padding-top: 8px;
+  padding-bottom: 8px;
+  border-radius: 20px;
+  margin: 10px;
+  margin-top: 30px;
+  margin-bottom: 30px;
+  padding-right: 50px;
+  padding-left: 50px;
+}
+
+.sub-button:hover {
+  background-color: rgb(199, 138, 26);
+  color: azure;
+}
+
+.sub-b:hover {
+  color: firebrick;
+  cursor: pointer;
+}
+
+.sub-child-right {
+    flex: 0.3;
+    padding-right: 10%;
+    padding-left: 3%;
+    padding-bottom: 2%;
+    width: 20%;
+    height: 50%;
+}
+
+.sub-child-right:hover {
+  cursor: pointer;
+}
+
+.sub-href {
+  color: grey;
+  font-size: 9px;
+}
+

website/src/components/Subscribe/index.js

@@ -0,0 +1,50 @@
+import React from 'react';
+import '../../../node_modules/bootstrap/dist/css/bootstrap.min.css';
+import './index-sub.css';
+import shelogo from '../../images/others/she-gazette.webp';
+
+var linkToSheGazette = 'https://shegazette.co/index.html'
+
+function goTo(link) {
+  if (typeof window !== 'undefined') {
+    window.location.href = link;
+  }
+}
+
+export default function Subscribe() {
+  return (
+    <div class="sub">
+      <h3 class="sub-title">
+        Subscribe to the newsletter
+      </h3>
+      <div class="sub-container">
+        <div class="sub-child-left">
+        <div>
+        We aim to accomplish more together by collaborating with <b class="sub-b" onClick={(e) => {
+            e.preventDefault();
+            goTo(linkToSheGazette);
+            }}>SheGazette</b>!
+        Please subscribe to their newsletter to get regular updates about opportunities via email.
+        </div>
+        <button
+          class="sub-button"
+          type="button"
+          onClick={(e) => {
+            e.preventDefault();
+            goTo(linkToSheGazette);
+            }}>
+          Subscribe
+        </button>
+        </div>
+        <img
+          class="sub-child-right"
+          src={shelogo}
+          onClick={(e) => {
+            e.preventDefault();
+            goTo(linkToSheGazette);
+          }}
+        />
+      </div>
+    </div>
+  );
+}

website/src/pages/index.js

@@ -12,6 +12,7 @@ import './index.css';
 import CarouselComponent from '../components/CarouselComponent/CarouselComponent';
 import Divider from '../components/Divider';
 import ComputerScienceSection from '../components/ComputerScienceSection';
+import SubscribeSection from '../components/Subscribe';
 
 export default function IndexPage() {
   return (
@@ -30,14 +31,17 @@ export default function IndexPage() {
           given below. ✨
         </div>
       </div>
+
       <Divider />
+
       <ComputerScienceSection />
+
       <Divider />
+
       <div style={{ marginTop: '60px' }}>
         <h3 style={{ textAlign: 'center' }} className="h33">
           Why Women In Technology?
         </h3>
-
         <div className="roww">
           <div className="columnn">
             <div className="wrapper1">
@@ -87,6 +91,11 @@ export default function IndexPage() {
           </div>
         </div>
       </div>
+
+      <Divider />
+
+      <SubscribeSection />
+
     </Layout>
   );
 }