├── .gitignore ├── README.md ├── package.json ├── public └── index.html ├── src ├── components │ ├── DonationForm │ │ ├── Agreement │ │ │ ├── Agreement.module.css │ │ │ └── index.jsx │ │ ├── DonationForm.module.css │ │ ├── GiftFrequency │ │ │ ├── GiftFrequency.jsx │ │ │ └── GiftFrequency.module.css │ │ ├── NameInput │ │ │ ├── NameInput.module.css │ │ │ └── index.jsx │ │ ├── SelectAmount │ │ │ ├── SelectAmount.jsx │ │ │ └── SelectAmount.module.css │ │ ├── SubmitButton │ │ │ ├── SubmitButton.module.css │ │ │ └── index.jsx │ │ └── index.jsx │ └── HelpUs │ │ ├── HelpUs.module.css │ │ ├── HelpUsTitle │ │ ├── HelpUsTitle.module.css │ │ └── index.jsx │ │ └── index.jsx ├── containers │ ├── App.js │ └── App.module.css ├── index.css └── index.js └── yarn.lock /.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 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ## Preview 2 | 3 | ![Day 1359 Donate Section UI Design](https://user-images.githubusercontent.com/66781740/119239751-55764180-bb60-11eb-8404-2ba82bffcaec.png) 4 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "donation-landing", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.11.4", 7 | "@testing-library/react": "^11.1.0", 8 | "@testing-library/user-event": "^12.1.10", 9 | "react": "^17.0.2", 10 | "react-dom": "^17.0.2", 11 | "react-scripts": "4.0.3", 12 | "web-vitals": "^1.0.1" 13 | }, 14 | "scripts": { 15 | "start": "react-scripts start", 16 | "build": "react-scripts build", 17 | "test": "react-scripts test", 18 | "eject": "react-scripts eject" 19 | }, 20 | "eslintConfig": { 21 | "extends": [ 22 | "react-app", 23 | "react-app/jest" 24 | ] 25 | }, 26 | "browserslist": { 27 | "production": [ 28 | ">0.2%", 29 | "not dead", 30 | "not op_mini all" 31 | ], 32 | "development": [ 33 | "last 1 chrome version", 34 | "last 1 firefox version", 35 | "last 1 safari version" 36 | ] 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 13 | Donation Landing 14 | 15 | 16 | 17 |
18 | 19 | 20 | -------------------------------------------------------------------------------- /src/components/DonationForm/Agreement/Agreement.module.css: -------------------------------------------------------------------------------- 1 | .Agreement { 2 | display: flex; 3 | margin-top: 3rem; 4 | color: var(--white); 5 | user-select: none; 6 | } 7 | 8 | .CheckBox { 9 | margin-right: 0.5rem; 10 | border: 2px solid var(--dark-blue); 11 | background-color: var(--medium-blue); 12 | height: 2rem; 13 | width: 2rem; 14 | -webkit-appearance: none; 15 | -moz-appearance: none; 16 | -o-appearance: none; 17 | appearance: none; 18 | border-radius: 4px; 19 | outline: none; 20 | transition-duration: 0.3s; 21 | cursor: pointer; 22 | } 23 | 24 | .CheckBox:checked { 25 | background-color: var(--dark-blue); 26 | } 27 | -------------------------------------------------------------------------------- /src/components/DonationForm/Agreement/index.jsx: -------------------------------------------------------------------------------- 1 | import classes from './Agreement.module.css'; 2 | 3 | const Agreement = () => { 4 | return ( 5 |
6 | 11 | 14 |
15 | ); 16 | }; 17 | 18 | export default Agreement; 19 | -------------------------------------------------------------------------------- /src/components/DonationForm/DonationForm.module.css: -------------------------------------------------------------------------------- 1 | .DonationForm { 2 | flex: 1; 3 | } 4 | @media (min-width: 992px) { 5 | .DonationForm { 6 | max-width: 45%; 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /src/components/DonationForm/GiftFrequency/GiftFrequency.jsx: -------------------------------------------------------------------------------- 1 | import classes from './GiftFrequency.module.css'; 2 | 3 | const GiftFrequency = () => { 4 | return ( 5 |
6 |
7 |

Gift frequency

8 |
9 |
10 |
11 | 18 | 19 |
20 |
21 | 27 | 28 |
29 |
30 |
31 | ); 32 | }; 33 | 34 | export default GiftFrequency; 35 | -------------------------------------------------------------------------------- /src/components/DonationForm/GiftFrequency/GiftFrequency.module.css: -------------------------------------------------------------------------------- 1 | .GiftFrequency { 2 | margin-top: 6rem; 3 | } 4 | 5 | .Title { 6 | color: var(--white); 7 | padding-bottom: 0.8rem; 8 | } 9 | .Frequency { 10 | padding: 0.2rem; 11 | background: var(--dark-blue); 12 | border-radius: 5rem; 13 | display: flex; 14 | justify-content: space-between; 15 | align-items: center; 16 | flex-wrap: wrap; 17 | max-width: 90%; 18 | } 19 | 20 | .RadioWrapper { 21 | padding: 1.5rem 0.6rem; 22 | } 23 | 24 | .Radio { 25 | display: none; 26 | } 27 | 28 | .Radio:checked + label { 29 | background-color: var(--medium-blue); 30 | } 31 | 32 | .RadioWrapper label { 33 | cursor: pointer; 34 | color: var(--white); 35 | height: 90%; 36 | padding: 1rem 1.4rem; 37 | border-radius: 5rem; 38 | transition: all ease-in-out 0.1s; 39 | } 40 | 41 | .RadioWrapper label:hover { 42 | background-color: var(--medium-blue); 43 | } 44 | 45 | @media (min-width: 499px) { 46 | .Frequency { 47 | max-width: 80%; 48 | } 49 | .RadioWrapper { 50 | padding: 1.5rem 1rem; 51 | } 52 | .RadioWrapper label { 53 | padding: 1rem 1.9rem; 54 | } 55 | } 56 | 57 | @media (min-width: 992px) { 58 | .GiftFrequency { 59 | margin-top: 1rem; 60 | } 61 | } 62 | 63 | @media (min-width: 1200px) { 64 | .GiftFrequency { 65 | margin-top: 1rem; 66 | } 67 | .Frequency { 68 | max-width: 70%; 69 | } 70 | .RadioWrapper label { 71 | padding: 1rem 2.1rem; 72 | } 73 | } 74 | -------------------------------------------------------------------------------- /src/components/DonationForm/NameInput/NameInput.module.css: -------------------------------------------------------------------------------- 1 | .NameInputWrapper { 2 | padding: 0; 3 | margin-top: 3rem; 4 | border: 0; 5 | display: flex; 6 | flex-direction: column; 7 | } 8 | .NameInputWrapper label { 9 | color: var(--white); 10 | padding-bottom: 0.8rem; 11 | } 12 | 13 | .NameInput { 14 | padding: 1rem; 15 | border: 1.5px solid var(--dark-blue); 16 | background: var(--medium-blue); 17 | color: var(--white); 18 | border-radius: 3px; 19 | } 20 | 21 | .NameInput::placeholder { 22 | color: var(--white); 23 | opacity: 0.6; 24 | } 25 | 26 | .NameInputWrapper a { 27 | margin-top: 1rem; 28 | color: var(--soft-blue); 29 | text-decoration: none; 30 | } 31 | -------------------------------------------------------------------------------- /src/components/DonationForm/NameInput/index.jsx: -------------------------------------------------------------------------------- 1 | import classes from './NameInput.module.css'; 2 | 3 | const NameInput = () => ( 4 |
5 | 6 | 12 | Click here to give in honor of other person 13 |
14 | ); 15 | 16 | export default NameInput; 17 | -------------------------------------------------------------------------------- /src/components/DonationForm/SelectAmount/SelectAmount.jsx: -------------------------------------------------------------------------------- 1 | import classes from './SelectAmount.module.css'; 2 | 3 | const SelectAmount = () => { 4 | return ( 5 |
6 |
7 |

Selct amount (in US dollar)

8 |
9 |
10 |
11 | 18 | 19 |
20 |
21 | 22 | 23 |
24 |
25 | 26 | 27 |
28 |
29 | 30 | 31 |
32 |
33 | 39 | 40 |
41 |
42 |
43 | ); 44 | }; 45 | 46 | export default SelectAmount; 47 | -------------------------------------------------------------------------------- /src/components/DonationForm/SelectAmount/SelectAmount.module.css: -------------------------------------------------------------------------------- 1 | .SelectAmount { 2 | margin-top: 3rem; 3 | } 4 | 5 | .Title { 6 | color: var(--white); 7 | padding-bottom: 0.8rem; 8 | } 9 | 10 | .Amounts { 11 | display: grid; 12 | grid-template-columns: repeat(4, minmax(0, 1fr)); 13 | row-gap: 1.6rem; 14 | margin-top: 0.5rem; 15 | } 16 | 17 | .Radio { 18 | display: none; 19 | } 20 | .RadioWrapper { 21 | margin-right: 0.5rem; 22 | } 23 | 24 | .Radio:checked + label { 25 | background-color: var(--white); 26 | color: var(--dark-blue); 27 | } 28 | 29 | .Radio + label { 30 | cursor: pointer; 31 | color: var(--white); 32 | height: 90%; 33 | border-radius: 5rem; 34 | padding: 0.4rem 1rem; 35 | border: 1px solid var(--dark-blue); 36 | transition: all ease-in-out 0.1s; 37 | font-weight: bold; 38 | } 39 | 40 | .Radio + label:hover { 41 | background-color: var(--white); 42 | color: var(--dark-blue); 43 | } 44 | 45 | @media (min-width: 499px) { 46 | .Amounts { 47 | grid-template-columns: repeat(5, 1fr); 48 | margin-top: 0.5rem; 49 | } 50 | } 51 | -------------------------------------------------------------------------------- /src/components/DonationForm/SubmitButton/SubmitButton.module.css: -------------------------------------------------------------------------------- 1 | .DonateButton { 2 | margin-top: 3rem; 3 | padding: 1rem 2rem; 4 | background: var(--blue-sky); 5 | color: var(--white); 6 | border-radius: 3px; 7 | border: 0; 8 | cursor: pointer; 9 | font-weight: 500; 10 | font-size: 1.4rem; 11 | } -------------------------------------------------------------------------------- /src/components/DonationForm/SubmitButton/index.jsx: -------------------------------------------------------------------------------- 1 | import classes from './SubmitButton.module.css'; 2 | 3 | const SubmitButton = () => ( 4 | 5 | ); 6 | 7 | export default SubmitButton; 8 | -------------------------------------------------------------------------------- /src/components/DonationForm/index.jsx: -------------------------------------------------------------------------------- 1 | import GiftFrequency from './GiftFrequency/GiftFrequency'; 2 | import classes from './DonationForm.module.css'; 3 | import SelectAmount from './SelectAmount/SelectAmount'; 4 | import Agreement from './Agreement'; 5 | import NameInput from './NameInput'; 6 | import SubmitButton from './SubmitButton'; 7 | 8 | const DonationForm = () => { 9 | return ( 10 |
e.preventDefault()}> 11 | 12 | 13 | 14 | 15 | 16 | 17 | ); 18 | }; 19 | 20 | export default DonationForm; 21 | -------------------------------------------------------------------------------- /src/components/HelpUs/HelpUs.module.css: -------------------------------------------------------------------------------- 1 | .HelpUs { 2 | color: var(--white); 3 | flex: 1; 4 | } 5 | 6 | .HelpUsParagraph { 7 | font-weight: 600; 8 | line-height: 1.7rem; 9 | text-align: justify; 10 | } 11 | 12 | @media (min-width: 992px) { 13 | .HelpUs { 14 | max-width: 45%; 15 | } 16 | .HelpUsParagraph { 17 | max-width: 90%; 18 | } 19 | } 20 | 21 | @media (min-width: 1200px) { 22 | .HelpUs { 23 | max-width: 50%; 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /src/components/HelpUs/HelpUsTitle/HelpUsTitle.module.css: -------------------------------------------------------------------------------- 1 | .HelpUsTitle { 2 | padding-bottom: 1rem; 3 | font-size: 1.6rem; 4 | } 5 | 6 | .HelpUs { 7 | color: var(--white); 8 | flex: 1; 9 | } 10 | 11 | @media (min-width: 1200px) { 12 | .HelpUsTitle { 13 | font-size: 2rem; 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /src/components/HelpUs/HelpUsTitle/index.jsx: -------------------------------------------------------------------------------- 1 | import classes from './HelpUsTitle.module.css' 2 | 3 | const HelpUsTitle = () => ( 4 |
5 |

Help us do more

6 |
7 | ); 8 | 9 | export default HelpUsTitle; 10 | -------------------------------------------------------------------------------- /src/components/HelpUs/index.jsx: -------------------------------------------------------------------------------- 1 | import classes from './HelpUs.module.css'; 2 | import HelpUsTitle from './HelpUsTitle'; 3 | 4 | const HelpUs = () => { 5 | return ( 6 |
7 | 8 |

9 | We'll get right to the point: we're asking you to support us. We're a 10 | nonprofit that relies on support from people like you. If everyone 11 | reading this gives $10 monthly, we can thrive for years. 12 |

13 |
14 | ); 15 | }; 16 | 17 | export default HelpUs; 18 | -------------------------------------------------------------------------------- /src/containers/App.js: -------------------------------------------------------------------------------- 1 | import DonationForm from '../components/DonationForm'; 2 | import HelpUs from '../components/HelpUs'; 3 | import classes from './App.module.css'; 4 | 5 | function App() { 6 | return ( 7 |
8 | 9 | 10 |
11 | ); 12 | } 13 | 14 | export default App; 15 | -------------------------------------------------------------------------------- /src/containers/App.module.css: -------------------------------------------------------------------------------- 1 | .App { 2 | padding: 2rem; 3 | background: var(--medium-blue); 4 | display: flex; 5 | flex-direction: column; 6 | } 7 | 8 | @media (min-width: 499px) { 9 | .App { 10 | height: 100vh; 11 | } 12 | } 13 | 14 | @media (min-width: 576px) { 15 | .App { 16 | max-width: 35rem; 17 | margin: 0 auto; 18 | } 19 | } 20 | 21 | @media (min-width: 992px) { 22 | .App { 23 | max-height: 45rem; 24 | max-width: 61rem; 25 | border-radius: 1rem; 26 | flex-direction: row; 27 | justify-content: space-between; 28 | } 29 | } 30 | 31 | @media (min-width: 1200px) { 32 | .App { 33 | max-width: 70rem; 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | outline: 0; 5 | box-sizing: border-box; 6 | } 7 | :root { 8 | --dark-blue: #21213b; 9 | --medium-blue: #2f2f4f; 10 | --soft-blue: #708aff; 11 | --blue-sky: #1865f2; 12 | --white: #fff; 13 | } 14 | 15 | body { 16 | font-family: 'Open Sans', sans-serif; 17 | background: var(--dark-blue); 18 | height: 100vh; 19 | } 20 | fieldset { 21 | border: 0; 22 | padding-block-start: 0; 23 | margin-inline-end: 0; 24 | padding-block-end: 0; 25 | margin-inline-start: 0; 26 | padding-inline-start: 0; 27 | padding-inline-end: 0; 28 | } 29 | @media (min-width: 992px) { 30 | body { 31 | display: flex; 32 | align-items: center; 33 | flex-direction: column; 34 | justify-content: center; 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './containers/App'; 5 | 6 | ReactDOM.render( 7 | 8 | 9 | , 10 | document.getElementById('root') 11 | ); 12 | --------------------------------------------------------------------------------