Merge pull request #41 from IngridFuentes/master

Home Page created

Author: sunithapatel

src/App.js

@@ -1,10 +1,10 @@
 import '../src/assets/css/App.css';
-import Main from './components/Main/Main';
+import HomePage from './components/HomePage/HomePage';
 
 function App() {
   return (
     <div className="App">
-      <Main />
+      <HomePage />
     </div>
   );
 }

src/App.test.js

@@ -1,8 +1,8 @@
 import { render, screen } from '@testing-library/react';
 import App from './App';
 
-test('renders Supported by Women Who Code link', () => {
+test('renders title on Home page', () => {
   render(<App />);
-  const linkElement = screen.getByText(/Supported by Women Who Code/i);
-  expect(linkElement).toBeInTheDocument();
-});
+  const titleElement = screen.getByText('Open Source Internships');
+  expect(titleElement).toBeInTheDocument();
+});

src/components/HomePage/HomePage.js

@@ -0,0 +1,24 @@
+import React from "react";
+import './Homepage.css';
+
+
+
+const HomePage = () => {
+
+    return (
+
+    <div className="body-style">
+        <h1 className="title"> Open Source Internships</h1>
+        <span className="sentence">We are an organization to help you find open source internships</span>
+        <div className="open-source-line">What Open Source is ... </div>
+        <div className="open-source-definition">a term that is referred to Open Source Software that is designed to be 
+             publicly accessible meaning that any user can see, modify, and distribute the code.
+        </div>
+        <span className="ending-line">We are here to help you!</span>
+        <button className="button">Start</button>
+    </div>
+    )
+
+}
+
+export default HomePage;

src/components/HomePage/Homepage.css

@@ -0,0 +1,101 @@
+.body-style{
+    margin: 0;
+    height: 100%;
+    background: radial-gradient(111.36% 277.12% at -7.7% 2.76%, rgba(135, 55, 103, 0.74499) 0%, rgba(54, 55, 79, 0.74499) 0.02%, rgba(198, 209, 211, 0.889953) 9.88%, rgba(215, 231, 243, 0) 61.62%, #A98C9D 99.84%, rgba(204, 142, 179, 0) 120%, #ab8e9f 100%);
+    display: flex;
+    flex-direction: column;
+    justify-content: unset;
+    align-items: center;
+}
+
+  h1.title{
+    display: flex;
+    justify-content: center;
+    width: 100%;
+    height: 28px;
+    font-family: Roboto;
+    font-style: normal;
+    font-weight: normal;
+    font-size: 35px;
+    line-height: 28px;
+    color: #4A4747;
+    border-bottom: 3px solid #BBBBBB;
+    box-shadow: 0px 4px 4px rgb(0 0 0 / 25%);
+    margin-top: 25px;
+    padding-bottom: 50px;
+  }
+  .sentence{
+    display: flex;
+    justify-content: center;
+    width: 650px;
+    height: 21px;
+    font-family: Roboto;
+    font-style: normal;
+    font-weight: normal;
+    font-size: 25px;
+    line-height: 21px;
+    color: #5C4949;
+    margin-top: 45px;
+  }
+  .open-source-line{
+    display: flex;
+    align-self: flex-start;
+    width: 250px;
+    height: 21px;
+    font-family: Roboto;
+    font-style: normal;
+    font-weight: normal;
+    font-size: 25px;
+    line-height: 21px;
+    color: #5C4949;
+    margin-top: 100px;
+    margin-left: 150px;
+  }
+
+  .open-source-definition{
+      display: flex;
+      text-align: -webkit-center;
+      width: 750px;
+      max-width: fit-content;
+      height: 90px;
+      max-height: fit-content;
+      font-family: Roboto;
+      font-style: normal;
+      font-weight: normal;
+      font-size: 22px;
+      line-height: 23px;
+      margin-top: 25px;
+      margin-left: 340px;
+      color: #5C4949;
+      border-color: none;
+      background:#DEE0E4;
+      border-radius: 5px;
+      box-shadow: inset 0px 0px 8px;
+      padding-top: 15px;
+  }
+  
+  .ending-line{
+    display: flex;
+    justify-content: center;
+    width: 220px;
+    height: 21px;
+    font-family: Roboto;
+    font-style: normal;
+    font-weight: normal;
+    font-size: 22px;
+    line-height: 21px;
+    color: #000000;
+    margin-top: 100px;
+  }
+  button.button{
+      display: flex;
+      justify-content: center;
+      width: 149px;
+      height: 31px;
+      background: rgba(36, 16, 36, 0.79);
+      border-radius: 5px;
+      color: white;
+      font-size: large;
+      margin-top: 40px;
+      margin-bottom: 50px;
+  }