├── src ├── Footer.css ├── Images │ ├── About.jpg │ ├── Contact.jpg │ ├── Home1.png │ └── Home2.jpg ├── Donate_rd.css ├── setupTests.js ├── App.test.js ├── Footer.jsx ├── Home.css ├── reportWebVitals.js ├── Firebase.jsx ├── Contact.jsx ├── index.js ├── Card.jsx ├── App.css ├── Donate.jsx ├── Sdata.jsx ├── index.css ├── App.jsx ├── Navbar.jsx ├── About.jsx ├── Donate_rd.jsx ├── Feedback.jsx ├── logo.svg ├── Home.jsx ├── Donate_rd2.jsx └── Fundraiser.jsx ├── public ├── favicon.ico ├── logo192.png ├── logo512.png ├── robots.txt ├── manifest.json └── index.html ├── .gitignore ├── package.json └── README.md /src/Footer.css: -------------------------------------------------------------------------------- 1 | footer{ 2 | background-color: #efddff; 3 | } -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wissen-snake/charitable/HEAD/public/favicon.ico -------------------------------------------------------------------------------- /public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wissen-snake/charitable/HEAD/public/logo192.png -------------------------------------------------------------------------------- /public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wissen-snake/charitable/HEAD/public/logo512.png -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /src/Images/About.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wissen-snake/charitable/HEAD/src/Images/About.jpg -------------------------------------------------------------------------------- /src/Images/Contact.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wissen-snake/charitable/HEAD/src/Images/Contact.jpg -------------------------------------------------------------------------------- /src/Images/Home1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wissen-snake/charitable/HEAD/src/Images/Home1.png -------------------------------------------------------------------------------- /src/Images/Home2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wissen-snake/charitable/HEAD/src/Images/Home2.jpg -------------------------------------------------------------------------------- /src/Donate_rd.css: -------------------------------------------------------------------------------- 1 | #Share{ 2 | float: left; 3 | margin-left: 350px; 4 | padding: 20px; 5 | } 6 | 7 | #Donate{ 8 | float: right; 9 | margin-right: 350px; 10 | padding: 20px; 11 | } 12 | 13 | .container-share{ 14 | margin-bottom: 100px; 15 | } -------------------------------------------------------------------------------- /src/setupTests.js: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom'; 6 | -------------------------------------------------------------------------------- /src/App.test.js: -------------------------------------------------------------------------------- 1 | import { render, screen } from '@testing-library/react'; 2 | import App from './App'; 3 | 4 | test('renders learn react link', () => { 5 | render(); 6 | const linkElement = screen.getByText(/learn react/i); 7 | expect(linkElement).toBeInTheDocument(); 8 | }); 9 | -------------------------------------------------------------------------------- /src/Footer.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import "./Footer.css"; 3 | 4 | const Footer=() => { 5 | return( 6 | 11 | ); 12 | }; 13 | 14 | export default Footer; -------------------------------------------------------------------------------- /src/Home.css: -------------------------------------------------------------------------------- 1 | h1{ 2 | padding-top: 60px; 3 | } 4 | 5 | .my-3{ 6 | color: #8905ff; 7 | } 8 | 9 | .blood-search{ 10 | padding-left: 30px; 11 | padding-right: 30px; 12 | } 13 | 14 | .my-4{ 15 | color: #8905ff; 16 | padding-top: 100px; 17 | } 18 | 19 | .btn { 20 | border-color: #8905ff; 21 | } 22 | 23 | .btn:hover { 24 | background-color: #efddff; 25 | } -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /src/reportWebVitals.js: -------------------------------------------------------------------------------- 1 | const reportWebVitals = onPerfEntry => { 2 | if (onPerfEntry && onPerfEntry instanceof Function) { 3 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 4 | getCLS(onPerfEntry); 5 | getFID(onPerfEntry); 6 | getFCP(onPerfEntry); 7 | getLCP(onPerfEntry); 8 | getTTFB(onPerfEntry); 9 | }); 10 | } 11 | }; 12 | 13 | export default reportWebVitals; 14 | -------------------------------------------------------------------------------- /src/Firebase.jsx: -------------------------------------------------------------------------------- 1 | import firebase from 'firebase'; 2 | 3 | var firebaseApp = firebase.initializeApp({ 4 | apiKey: "AIzaSyAH5RPxX8khSres-xyK09h1qmaOlc7KOKg", 5 | authDomain: "charitable-feedback-form.firebaseapp.com", 6 | projectId: "charitable-feedback-form", 7 | storageBucket: "charitable-feedback-form.appspot.com", 8 | messagingSenderId: "53255913376", 9 | appId: "1:53255913376:web:a3a244cc82f3ebb03ceec5" 10 | }); 11 | 12 | var db = firebaseApp.firestore(); 13 | 14 | export { db }; -------------------------------------------------------------------------------- /src/Contact.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Feedback from './Feedback'; 3 | import img3 from '../src/Images/Contact.jpg'; 4 | 5 | const Contact=() => { 6 | return( 7 |
8 |
9 |
10 |
11 | Contact img 12 |
13 |
14 | 15 |
16 |
17 | ); 18 | }; 19 | 20 | export default Contact; -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | import {BrowserRouter} from "react-router-dom"; 6 | import reportWebVitals from './reportWebVitals'; 7 | 8 | ReactDOM.render( 9 | 10 | 11 | , 12 | document.getElementById('root') 13 | ); 14 | 15 | // If you want to start measuring performance in your app, pass a function 16 | // to log results (for example: reportWebVitals(console.log)) 17 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 18 | reportWebVitals(); 19 | -------------------------------------------------------------------------------- /src/Card.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { NavLink } from "react-router-dom"; 3 | import web from '../src/Images/Home1.png'; 4 | 5 | const Card=() => { 6 | return(<> 7 |
8 |
9 | ... 10 |
11 |
Card title
12 |

Some quick example text to build on the card title and make up the bulk of the card's content.

13 | Donate Now 14 |
15 |
16 |
17 | 18 | ); 19 | }; 20 | 21 | export default Card; -------------------------------------------------------------------------------- /src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | height: 40vmin; 7 | pointer-events: none; 8 | } 9 | 10 | @media (prefers-reduced-motion: no-preference) { 11 | .App-logo { 12 | animation: App-logo-spin infinite 20s linear; 13 | } 14 | } 15 | 16 | .App-header { 17 | background-color: #282c34; 18 | min-height: 100vh; 19 | display: flex; 20 | flex-direction: column; 21 | align-items: center; 22 | justify-content: center; 23 | font-size: calc(10px + 2vmin); 24 | color: white; 25 | } 26 | 27 | .App-link { 28 | color: #61dafb; 29 | } 30 | 31 | @keyframes App-logo-spin { 32 | from { 33 | transform: rotate(0deg); 34 | } 35 | to { 36 | transform: rotate(360deg); 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /src/Donate.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Card from "./Card"; 3 | import Sdata from "./Sdata"; 4 | const Donate=() => { 5 | return(<> 6 |
7 |

You can Help them!

8 |
9 |
10 |
11 |
12 | { 13 | Sdata.map((val,ind)=>{ 14 | return }) 17 | } 18 |
19 |
20 |
21 |
22 |
23 | 24 | ); 25 | }; 26 | 27 | export default Donate; -------------------------------------------------------------------------------- /src/Sdata.jsx: -------------------------------------------------------------------------------- 1 | import story1 from "../src/Images/Home1.png"; 2 | import story2 from "../src/Images/Home1.png"; 3 | import story3 from "../src/Images/Home1.png"; 4 | import story4 from "../src/Images/Home1.png"; 5 | import story5 from "../src/Images/Home1.png"; 6 | import story6 from "../src/Images/Home1.png"; 7 | 8 | const Sdata=[ 9 | { 10 | imgsrc:story1, 11 | title:"Story 1", 12 | }, 13 | 14 | { 15 | imgsrc:story2, 16 | title:"Story 2", 17 | }, 18 | 19 | { 20 | imgsrc:story3, 21 | title:"Story 3", 22 | }, 23 | 24 | { 25 | imgsrc:story4, 26 | title:"Story 4", 27 | }, 28 | 29 | { 30 | imgsrc:story5, 31 | title:"Story 5", 32 | }, 33 | 34 | { 35 | imgsrc:story6, 36 | title:"Story 6", 37 | }, 38 | 39 | ]; 40 | 41 | export default Sdata; -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Mulish&display=swap'); 2 | 3 | .navbar { 4 | background-color: #efddff; 5 | } 6 | 7 | .navbar-brand { 8 | font-size: 1.9rem; 9 | color: rgb(0, 0, 0); 10 | } 11 | 12 | .navbar-brand:hover { 13 | color: #8905ff; 14 | } 15 | 16 | .nav-link{ 17 | color: rgb(0, 0, 0); 18 | } 19 | 20 | .nav-link:hover{ 21 | color: #8905ff; 22 | } 23 | 24 | h5{ 25 | color: #8905ff; 26 | } 27 | 28 | .br { 29 | display: block; 30 | margin-bottom: 0em; 31 | } 32 | 33 | body { 34 | margin: 0; 35 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 36 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 37 | sans-serif; 38 | -webkit-font-smoothing: antialiased; 39 | -moz-osx-font-smoothing: grayscale; 40 | } 41 | 42 | code { 43 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 44 | monospace; 45 | } 46 | 47 | h3{ 48 | color: #8905ff; 49 | } -------------------------------------------------------------------------------- /src/App.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import "../node_modules/bootstrap/dist/css/bootstrap.min.css"; 3 | import Home from './Home'; 4 | import About from './About'; 5 | import Donate from './Donate'; 6 | import Donate_rd from './Donate_rd'; 7 | import Donate_rd2 from './Donate_rd2'; 8 | import Contact from './Contact'; 9 | import Navbar from './Navbar'; 10 | import Footer from './Footer'; 11 | import Fundraiser from './Fundraiser'; 12 | import { Switch, Route, Redirect } from 'react-router-dom'; 13 | 14 | 15 | const App=() => { 16 | return( 17 | <> 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 |