├── .gitignore
├── README.md
├── package-lock.json
├── package.json
├── public
    ├── _redirects
    ├── index.html
    ├── logo.png
    ├── manifest.json
    └── robots.txt
└── src
    ├── API
        └── index.js
    ├── App.css
    ├── App.js
    ├── App.test.js
    ├── Pages
        ├── Cases
        │   ├── Cards
        │   │   ├── Cards.js
        │   │   └── Cards.module.css
        │   ├── Cases.js
        │   ├── Cases.module.css
        │   ├── Chart
        │   │   ├── Chart.js
        │   │   └── Chart.module.css
        │   └── CountryPicker
        │   │   ├── CountryPicker.js
        │   │   └── CountryPicker.module.css
        ├── Home
        │   ├── AboutPage
        │   │   ├── AboutPage.js
        │   │   └── AboutPage.module.css
        │   ├── CoverPage
        │   │   ├── CoverPage.js
        │   │   └── CoverPage.module.css
        │   ├── DoDonts
        │   │   ├── DoDonts.js
        │   │   └── DoDonts.module.css
        │   ├── HandWash
        │   │   ├── HandWash.js
        │   │   └── Handwash.module.css
        │   ├── Home.js
        │   ├── Home.module.css
        │   ├── Protect
        │   │   └── Protect.js
        │   ├── Symptoms
        │   │   └── Symptoms.js
        │   ├── Take-steps
        │   │   ├── TakeSteps.js
        │   │   └── TakeSteps.module.css
        │   ├── Transmission
        │   │   └── Transmission.js
        │   └── Treatment
        │   │   ├── Treatment.js
        │   │   └── Treatment.module.css
        └── NotFound
        │   ├── NotFound.js
        │   └── NotFound.module.css
    ├── UI
        ├── Footer
        │   ├── Footer.js
        │   └── Footer.module.css
        ├── Header
        │   ├── Header.js
        │   └── Header.module.css
        └── ReusablePage
        │   ├── Reusable.module.css
        │   └── ReusablePage.js
    ├── images
        ├── Cover-Page
        │   └── main-image.png
        ├── Handwash
        │   ├── hand-1.png
        │   ├── hand-2.png
        │   ├── hand-3.png
        │   ├── hand-4.png
        │   ├── hand-5.png
        │   └── hand-6.png
        ├── Not-Found
        │   └── 404.png
        ├── Protect
        │   ├── advice1.png
        │   ├── advice2.png
        │   ├── advice3.png
        │   └── advice4.png
        ├── Symptom
        │   ├── symptom1.png
        │   ├── symptom2.png
        │   └── symptom3.png
        ├── Take-Steps
        │   └── whatiscovid.png
        ├── Transmission
        │   ├── contacting.png
        │   ├── cough.png
        │   └── person.png
        ├── do-donts
        │   ├── donts-a.png
        │   ├── donts-b.png
        │   ├── donts-c.png
        │   ├── dos-a.png
        │   ├── dos-b.png
        │   ├── dos-c.png
        │   └── protect.png
        ├── logo.png
        └── updates-logo.png
    ├── index.css
    ├── index.js
    ├── serviceWorker.js
    └── setupTests.js


/.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 | #CHECKOUT LIVE: [CLICK HERE](https://project-covid.netlify.app/)
2 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "project-covid",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "dependencies": {
 6 |     "@testing-library/jest-dom": "^4.2.4",
 7 |     "@testing-library/react": "^9.5.0",
 8 |     "@testing-library/user-event": "^7.2.1",
 9 |     "axios": "^0.19.2",
10 |     "chart.js": "^2.9.3",
11 |     "classnames": "^2.2.6",
12 |     "react": "^16.13.1",
13 |     "react-chartjs-2": "^2.9.0",
14 |     "react-countup": "^4.3.3",
15 |     "react-dom": "^16.13.1",
16 |     "react-icons": "^3.10.0",
17 |     "react-loading-skeleton": "^2.1.1",
18 |     "react-router-dom": "^5.2.0",
19 |     "react-scripts": "3.4.1"
20 |   },
21 |   "scripts": {
22 |     "start": "react-scripts start",
23 |     "build": "react-scripts build",
24 |     "test": "react-scripts test",
25 |     "eject": "react-scripts eject"
26 |   },
27 |   "eslintConfig": {
28 |     "extends": "react-app"
29 |   },
30 |   "browserslist": {
31 |     "production": [
32 |       ">0.2%",
33 |       "not dead",
34 |       "not op_mini all"
35 |     ],
36 |     "development": [
37 |       "last 1 chrome version",
38 |       "last 1 firefox version",
39 |       "last 1 safari version"
40 |     ]
41 |   }
42 | }
43 | 


--------------------------------------------------------------------------------
/public/_redirects:
--------------------------------------------------------------------------------
1 | /*  /index.html  200


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <link rel="icon" href="logo.png" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
 7 |     <meta name="theme-color" content="#000000" />
 8 |     <meta
 9 |       name="description"
10 |       content="Web site created using create-react-app"
11 |     />
12 |     <link rel="apple-touch-icon" href="logo.png" />
13 | 
14 |     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
15 |     <link
16 |       href="https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap"
17 |       rel="stylesheet"
18 |     />
19 |     <link
20 |       href="https://fonts.googleapis.com/css2?family=Oswald:wght@700&display=swap"
21 |       rel="stylesheet"
22 |     />
23 |     <title>Corona Tracker</title>
24 |   </head>
25 |   <body>
26 |     <noscript>You need to enable JavaScript to run this app.</noscript>
27 |     <div id="root"></div>
28 |   </body>
29 | </html>
30 | 


--------------------------------------------------------------------------------
/public/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/suhelhasan/project-covid/aee09d30a75ad10322bd4b22ef05d45154aaccf2/public/logo.png


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/public/robots.txt:
--------------------------------------------------------------------------------
1 | # https://www.robotstxt.org/robotstxt.html
2 | User-agent: *
3 | Disallow:
4 | 


--------------------------------------------------------------------------------
/src/API/index.js:
--------------------------------------------------------------------------------
 1 | import axios from "axios";
 2 | 
 3 | const url = "https://covid19.mathdro.id/api";
 4 | 
 5 | export const fetchData = async (country) => {
 6 |   let changableURL = url;
 7 |   if (country) {
 8 |     changableURL = `${url}/countries/${country}`;
 9 |   }
10 |   try {
11 |     const {
12 |       data: { confirmed, recovered, deaths, lastUpdate },
13 |     } = await axios.get(changableURL);
14 |     return { confirmed, recovered, deaths, lastUpdate };
15 |   } catch (error) {
16 |     console.log(error);
17 |   }
18 | };
19 | 
20 | export const fetchDailyData = async () => {
21 |   try {
22 |     const { data } = await axios.get(`${url}/daily`);
23 | 
24 |     const modifiedData = data.map((dailyData) => ({
25 |       confirmed: dailyData.confirmed.total,
26 |       deaths: dailyData.deaths.total,
27 |       date: dailyData.reportDate,
28 |     }));
29 |     return modifiedData;
30 |   } catch (error) {
31 |     console.log(error);
32 |   }
33 | };
34 | 
35 | export const countriesData = async () => {
36 |   try {
37 |     const {
38 |       data: { countries },
39 |     } = await axios.get(`${url}/countries`);
40 | 
41 |     return countries.map((country) => country.name);
42 |   } catch (error) {
43 |     console.log(error);
44 |   }
45 | };
46 | 


--------------------------------------------------------------------------------
/src/App.css:
--------------------------------------------------------------------------------
 1 | :root {
 2 |   --theme-color-one: #a56cc1;
 3 |   --theme-color-two: #a6acec;
 4 |   --theme-color-three: #ace7ef;
 5 |   --theme-color-four: #cefff1;
 6 | }
 7 | * {
 8 |   box-sizing: border-box;
 9 |   margin: 0;
10 |   padding: 0;
11 | }
12 | body {
13 |   font-family: "Roboto", sans-serif;
14 |   background-color: var(--theme-color-three);
15 |   color: #3d4b69;
16 | }
17 | 
18 | ::-webkit-scrollbar {
19 |   width: 12px;
20 |   background-color: #fff;
21 | }
22 | ::-webkit-scrollbar-thumb {
23 |   /* background: linear-gradient(transparent, #1468cd); */
24 |   background: #1468cd;
25 |   border-radius: 6px;
26 | }
27 | 


--------------------------------------------------------------------------------
/src/App.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import "./App.css";
 3 | import { Route, Switch } from "react-router-dom";
 4 | import Header from "./UI/Header/Header";
 5 | import Footer from "./UI/Footer/Footer";
 6 | import Home from "./Pages/Home/Home";
 7 | import Cases from "./Pages/Cases/Cases";
 8 | import NotFound from "./Pages/NotFound/NotFound";
 9 | 
10 | function App() {
11 |   return (
12 |     <div className="App">
13 |       <Header />
14 |       <Switch>
15 |         <Route exact path="/" component={Home} />
16 |         <Route exact path="/cases" component={Cases} />
17 |         <Route component={NotFound} />
18 |       </Switch>
19 |       <Footer />
20 |     </div>
21 |   );
22 | }
23 | 
24 | export default App;
25 | 


--------------------------------------------------------------------------------
/src/App.test.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { render } from '@testing-library/react';
 3 | import App from './App';
 4 | 
 5 | test('renders learn react link', () => {
 6 |   const { getByText } = render(<App />);
 7 |   const linkElement = getByText(/learn react/i);
 8 |   expect(linkElement).toBeInTheDocument();
 9 | });
10 | 


--------------------------------------------------------------------------------
/src/Pages/Cases/Cards/Cards.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import styling from "./Cards.module.css";
 3 | import CountUp from "react-countup";
 4 | 
 5 | export default function Cards({
 6 |   data: { confirmed, recovered, deaths, lastUpdate },
 7 | }) {
 8 |   if (!confirmed) {
 9 |     return <h1>Loading...</h1>;
10 |   }
11 | 
12 |   return (
13 |     <div className={styling.Cards}>
14 |       <div className={styling.Card1}>
15 |         <h2>Infected</h2>
16 |         <h2>
17 |           <CountUp
18 |             start={0}
19 |             end={confirmed.value}
20 |             duration={1.5}
21 |             separator=","
22 |           />
23 |         </h2>
24 |         <h4>{new Date(lastUpdate).toDateString()}</h4>
25 |         <p>Number of active cases of COVID-19</p>
26 |       </div>
27 |       <div className={styling.Card2}>
28 |         <h2>Recoverd</h2>
29 |         <h2>
30 |           <CountUp
31 |             start={0}
32 |             end={recovered.value}
33 |             duration={1.5}
34 |             separator=","
35 |           />
36 |         </h2>
37 |         <h4>{new Date(lastUpdate).toDateString()}</h4>
38 |         <p>Number of recoveries cases of COVID-19</p>
39 |       </div>
40 |       <div className={styling.Card3}>
41 |         <h2>Deaths</h2>
42 |         <h2>
43 |           <CountUp start={0} end={deaths.value} duration={1.5} separator="," />
44 |         </h2>
45 |         <h4>{new Date(lastUpdate).toDateString()}</h4>
46 |         <p>Number of deaths caused by COVID-19</p>
47 |       </div>
48 |     </div>
49 |   );
50 | }
51 | 


--------------------------------------------------------------------------------
/src/Pages/Cases/Cards/Cards.module.css:
--------------------------------------------------------------------------------
 1 | .Cards {
 2 |   width: 100%;
 3 |   height: 21vh;
 4 |   display: flex;
 5 |   justify-content: space-around;
 6 |   align-items: center;
 7 |   background-color: #f7f9fe;
 8 |   font-family: "Roboto", sans-serif;
 9 |   text-align: center;
10 | }
11 | .Cards p {
12 |   font-weight: bold;
13 | }
14 | .Cards > div {
15 |   width: 25%;
16 |   height: 100%;
17 |   display: flex;
18 |   flex-direction: column;
19 |   justify-content: space-around;
20 |   align-items: center;
21 |   border-radius: 5px;
22 |   box-shadow: 0 4px 8px 0 rgba(2, 2, 2, 0.1), 0 6px 20px 0 rgba(7, 7, 7, 0.1);
23 | }
24 | .Card1 {
25 |   border-bottom: 4px solid #056cc4;
26 | }
27 | .Card1 h2:first-child,
28 | .Card1 h4 {
29 |   color: #056cc4;
30 | }
31 | .Card2 {
32 |   border-bottom: 4px solid #3dca93;
33 | }
34 | .Card2 h2:first-child,
35 | .Card2 h4 {
36 |   color: #3dca93;
37 | }
38 | .Card3 {
39 |   border-bottom: 4px solid #ff5363;
40 | }
41 | .Card3 h2:first-child,
42 | .Card3 h4 {
43 |   color: #ff5363;
44 | }
45 | @media screen and (max-width: 680px) {
46 |   .Cards {
47 |     width: 100%;
48 |     height: 80vh;
49 |     flex-direction: column;
50 |   }
51 |   .Cards p {
52 |     font-weight: bold;
53 |   }
54 |   .Cards > div {
55 |     width: 90%;
56 |     height: 100%;
57 |     margin: 13px 0;
58 |   }
59 | }
60 | 


--------------------------------------------------------------------------------
/src/Pages/Cases/Cases.js:
--------------------------------------------------------------------------------
 1 | import React, { useEffect, useState } from "react";
 2 | import styling from "./Cases.module.css";
 3 | 
 4 | import Cards from "./Cards/Cards";
 5 | import Chart from "./Chart/Chart";
 6 | import CountryPicker from "./CountryPicker/CountryPicker";
 7 | 
 8 | import { fetchData, fetchDailyData, countriesData } from "../../API/index";
 9 | 
10 | export default function Cases() {
11 |   let [data, setData] = useState({});
12 |   const [dailyData, setDailyData] = useState({});
13 |   let [countries, setCountries] = useState([]);
14 |   let [country, setCountry] = useState("");
15 | 
16 |   useEffect(() => {
17 |     (async () => {
18 |       setData(await fetchData(country));
19 |     })();
20 |   }, [country]);
21 | 
22 |   useEffect(() => {
23 |     (async () => {
24 |       setDailyData(await fetchDailyData());
25 |     })();
26 |   }, []);
27 | 
28 |   useEffect(() => {
29 |     (async () => {
30 |       setCountries(await countriesData());
31 |     })();
32 |   }, []);
33 | 
34 |   let handleCountryChange = async (countryName) => {
35 |     setCountry(countryName);
36 |   };
37 |   // console.log(data);
38 |   return (
39 |     <div className={styling.Cases}>
40 |       <Cards data={data} />
41 |       <CountryPicker
42 |         changeCountry={handleCountryChange}
43 |         countries={countries}
44 |       />
45 |       <Chart dailyData={dailyData} data={data} country={country} />
46 |     </div>
47 |   );
48 | }
49 | 


--------------------------------------------------------------------------------
/src/Pages/Cases/Cases.module.css:
--------------------------------------------------------------------------------
 1 | .Cases {
 2 |   width: 100%;
 3 |   height: 100vh;
 4 |   display: flex;
 5 |   flex-direction: column;
 6 |   justify-content: space-around;
 7 |   align-items: center;
 8 |   background-color: #f7f9fe;
 9 |   padding: 14vh 5vw 0 5vw;
10 | }
11 | @media screen and (max-width: 680px) {
12 |   .Cases {
13 |     width: 100%;
14 |     height: auto;
15 |     /* display: flex;
16 |   flex-direction: column;
17 |   justify-content: space-around;
18 |   align-items: center;
19 |   background-color: #f7f9fe;
20 |   padding: 14vh 5vw 0 5vw; */
21 |   }
22 | }
23 | 


--------------------------------------------------------------------------------
/src/Pages/Cases/Chart/Chart.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import styling from "./Chart.module.css";
 3 | import { Line, Bar } from "react-chartjs-2";
 4 | 
 5 | export default function Chart({
 6 |   dailyData,
 7 |   country,
 8 |   data: { confirmed, deaths, recovered },
 9 | }) {
10 |   const lineChart = dailyData[0] ? (
11 |     <Line
12 |       data={{
13 |         labels: dailyData.map(({ date }) => date),
14 |         datasets: [
15 |           {
16 |             data: dailyData.map(({ confirmed }) => confirmed),
17 |             label: "Infected",
18 |             fill: true,
19 |             borderColor: "#056cc4",
20 |           },
21 |           {
22 |             data: dailyData.map(({ deaths }) => deaths),
23 |             label: "Deaths",
24 |             fill: true,
25 |             borderColor: "#ff5363",
26 |           },
27 |         ],
28 |       }}
29 |     />
30 |   ) : null;
31 | 
32 |   const barChart = confirmed ? (
33 |     <Bar
34 |       data={{
35 |         labels: ["Infected", "Recovered", "Deaths"],
36 |         datasets: [
37 |           {
38 |             label: "People",
39 |             backgroundColor: ["#056cc4", "#3dca93", "#ff5363"],
40 |             data: [confirmed.value, recovered.value, deaths.value],
41 |           },
42 |         ],
43 |       }}
44 |       options={{
45 |         legend: { display: false },
46 |         title: { display: true, text: `Current state in ${country}` },
47 |       }}
48 |     />
49 |   ) : null;
50 | 
51 |   return <div className={styling.Chart}>{country ? barChart : lineChart}</div>;
52 | }
53 | 


--------------------------------------------------------------------------------
/src/Pages/Cases/Chart/Chart.module.css:
--------------------------------------------------------------------------------
1 | .Chart {
2 |   width: 65%;
3 | }
4 | @media screen and (max-width: 680px) {
5 |   .Chart {
6 |     width: 100%;
7 |   }
8 | }
9 | 


--------------------------------------------------------------------------------
/src/Pages/Cases/CountryPicker/CountryPicker.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import styling from "./CountryPicker.module.css";
 3 | 
 4 | export default function CountryPicker({ countries, changeCountry }) {
 5 |   return (
 6 |     <div className={styling.CountryPicker}>
 7 |       <select defaultValue="" onChange={(e) => changeCountry(e.target.value)}>
 8 |         <option value="">Global</option>
 9 |         {countries.map((country, i) => (
10 |           <option key={i} value={country}>
11 |             {country}
12 |           </option>
13 |         ))}
14 |       </select>
15 |     </div>
16 |   );
17 | }
18 | 


--------------------------------------------------------------------------------
/src/Pages/Cases/CountryPicker/CountryPicker.module.css:
--------------------------------------------------------------------------------
 1 | .CountryPicker {
 2 |   width: 100%;
 3 |   display: flex;
 4 |   justify-content: center;
 5 |   align-items: center;
 6 | }
 7 | .CountryPicker > select {
 8 |   width: 30%;
 9 |   height: 6vh;
10 |   font-size: 17px;
11 |   border: none;
12 |   background-color: #f7f9fe;
13 |   border-bottom: 1px solid #056cc4;
14 | }
15 | select:focus {
16 |   outline: none;
17 | }
18 | @media screen and (max-width: 680px) {
19 |   .CountryPicker {
20 |     padding: 15px 0px;
21 |   }
22 |   .CountryPicker > select {
23 |     width: 80%;
24 |     height: 6vh;
25 |     font-size: 17px;
26 |     border: none;
27 |     background-color: #f7f9fe;
28 |     border-bottom: 1px solid #056cc4;
29 |   }
30 | }
31 | 


--------------------------------------------------------------------------------
/src/Pages/Home/AboutPage/AboutPage.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import styling from "./AboutPage.module.css";
 3 | import { FaCaretRight } from "react-icons/fa";
 4 | 
 5 | export default function AboutPage() {
 6 |   return (
 7 |     <div className={styling.AboutPage} id="about">
 8 |       <div className={styling.ImageSection}>
 9 |         <div>
10 |           <div>What you need to know</div>
11 |           <div>
12 |             <a href="#spread">How corona virus spread</a>
13 |             <FaCaretRight />
14 |           </div>
15 |           <div>
16 |             <a href="#symptoms">Symptoms of coronavirus</a>
17 |             <FaCaretRight />
18 |           </div>
19 |           <div>
20 |             <a href="#prevention">Prevention & Advice</a>
21 |             <FaCaretRight />
22 |           </div>
23 |           <div>
24 |             <a href="#treatment">Treatment of coronavirus</a>
25 |             <FaCaretRight />
26 |           </div>
27 |           <div>
28 |             <a href="#TakeSteps">Myth-Busters of coronavirus</a>
29 |             <FaCaretRight />
30 |           </div>
31 |           <div>
32 |             <a href="#protectYourself">How to protect yourself</a>
33 |             <FaCaretRight />
34 |           </div>
35 |         </div>
36 |       </div>
37 |       <div className={styling.TextSection}>
38 |         <div>
39 |           <h3>ABOUT THE DISEASE</h3>
40 |           <h1>CORONAVIRUS (COVID-19)</h1>
41 |         </div>
42 |         <div>
43 |           <h3>
44 |             COVID-19 is a new illness that can affect your lungs and airways.
45 |             It's caused by a virus called coronavirus. It was discovered in
46 |             December 2019 in Wuhan, Hubei, China.
47 |           </h3>
48 |         </div>
49 |         <div>
50 |           <p>
51 |             Common signs of infection include respiratory symptoms, fever,
52 |             cough, shortness of breath and breathing difficulties. In more
53 |             severe cases, infection can cause pneumonia, severe acute
54 |             respiratory syndrome, kidney failure and even death.
55 |           </p>
56 |           <p>
57 |             Standard recommendations to prevent infection spread include regular
58 |             hand washing, covering mouth and nose when coughing and sneezing,
59 |             thoroughly cooking meat and eggs. Avoid close contact with anyone
60 |             showing symptoms of respiratory illness such as coughing and
61 |             sneezing.
62 |           </p>
63 |         </div>
64 |       </div>
65 |     </div>
66 |   );
67 | }
68 | 


--------------------------------------------------------------------------------
/src/Pages/Home/AboutPage/AboutPage.module.css:
--------------------------------------------------------------------------------
  1 | .AboutPage {
  2 |   width: 100%;
  3 |   height: 100vh;
  4 |   background-color: #ffffff;
  5 |   display: flex;
  6 |   justify-content: space-around;
  7 |   align-items: center;
  8 |   padding: 0 5vw;
  9 |   font-family: "Roboto", sans-serif;
 10 | }
 11 | .ImageSection {
 12 |   display: flex;
 13 |   align-items: center;
 14 |   justify-content: center;
 15 |   width: 40%;
 16 |   height: 100%;
 17 | }
 18 | .ImageSection > div {
 19 |   width: 80%;
 20 |   height: 63%;
 21 |   background-color: #f7f9fe;
 22 |   border: 1px solid #d6d8d8;
 23 |   border-radius: 5px;
 24 |   display: flex;
 25 |   flex-direction: column;
 26 |   justify-content: center;
 27 |   align-items: center;
 28 | }
 29 | .ImageSection > div > div {
 30 |   width: 100%;
 31 |   height: 14%;
 32 |   background-color: #fff;
 33 |   border-bottom: 1px solid #d6d8d8;
 34 |   display: flex;
 35 |   align-items: center;
 36 |   justify-content: space-between;
 37 |   padding: 0% 7%;
 38 |   color: #1468cd;
 39 | }
 40 | .ImageSection > div > div:first-child {
 41 |   color: #3d4b69;
 42 |   font-weight: bold;
 43 |   font-size: 20px;
 44 | }
 45 | .ImageSection > div > div:last-child {
 46 |   border: none;
 47 | }
 48 | .ImageSection a {
 49 |   color: #1468cd;
 50 |   text-decoration: none;
 51 |   font-size: 17px;
 52 | }
 53 | .TextSection {
 54 |   width: 50%;
 55 |   height: 100%;
 56 |   display: flex;
 57 |   flex-direction: column;
 58 |   justify-content: center;
 59 |   align-items: flex-end;
 60 |   text-align: justify;
 61 |   text-align: right;
 62 | }
 63 | .TextSection > div {
 64 |   padding: 10px 0px;
 65 | }
 66 | .TextSection h1 {
 67 |   font-family: "Oswald", sans-serif;
 68 |   color: #50658e;
 69 |   font-size: 40px;
 70 |   font-weight: 700;
 71 | }
 72 | .TextSection h3 {
 73 |   font-size: 20px;
 74 |   font-weight: 900;
 75 | }
 76 | .TextSection p {
 77 |   font-size: 17px;
 78 |   margin: 5px 0;
 79 |   line-height: 23px;
 80 | }
 81 | .TextSection > div:first-child > h3 {
 82 |   color: #1468cd;
 83 |   font-family: "Oswald", sans-serif;
 84 | }
 85 | @media screen and (max-width: 680px) {
 86 |   .AboutPage {
 87 |     height: 120vh;
 88 |     flex-direction: column;
 89 |   }
 90 |   .ImageSection {
 91 |     width: 90%;
 92 |     order: 2;
 93 |   }
 94 |   .ImageSection > div {
 95 |     width: 100%;
 96 |     height: 100%;
 97 |   }
 98 |   .ImageSection > div > div {
 99 |     width: 100%;
100 |     height: 20%;
101 |   }
102 |   .ImageSection > div > div:first-child {
103 |     font-size: 17px;
104 |   }
105 |   .ImageSection > div > div:last-child {
106 |     border: none;
107 |   }
108 |   .ImageSection a {
109 |     color: #1468cd;
110 |     text-decoration: none;
111 |     font-size: 17px;
112 |   }
113 |   .TextSection {
114 |     width: 90%;
115 |     height: 100%;
116 |     order: 1;
117 |   }
118 |   .TextSection h1 {
119 |     font-size: 30px;
120 |   }
121 |   .TextSection h3 {
122 |     font-size: 15px;
123 |   }
124 |   .TextSection p {
125 |     font-size: 16px;
126 |     line-height: 19px;
127 |   }
128 | }
129 | 


--------------------------------------------------------------------------------
/src/Pages/Home/CoverPage/CoverPage.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import styling from "./CoverPage.module.css";
 3 | import image from "../../../images/Cover-Page/main-image.png";
 4 | import { FaCaretRight } from "react-icons/fa";
 5 | 
 6 | export default function CoverPage() {
 7 |   return (
 8 |     // <Skeleton>
 9 |     <div className={styling.CoverPage} id="coverPage">
10 |       <div className={styling.textSection}>
11 |         <div className={styling.Heading}>
12 |           <div>
13 |             <h1>CORONA</h1>
14 |           </div>
15 |           <div>
16 |             <div>
17 |               <h1>COVID-19</h1>
18 |             </div>
19 |             <div>
20 |               <h1>VIRUS</h1>
21 |             </div>
22 |           </div>
23 |         </div>
24 |         <div className={styling.punchLine}>
25 |           <p>
26 |             The Coronavirus (COVID-19) was first reported in Wuhan, Hubei, China
27 |             in December 2019, the outbreak was later recognized as a pandemic by
28 |             the World Health Organization (WHO) on 11 March 2020
29 |           </p>
30 |         </div>
31 |         <div className={styling.buttons}>
32 |           <button>
33 |             <a href="#treatment">How to Protect</a>
34 |           </button>
35 |           <h3>
36 |             <a href="#about">
37 |               About COVID-19 <FaCaretRight />
38 |             </a>
39 |           </h3>
40 |         </div>
41 |       </div>
42 | 
43 |       <div className={styling.imgSection}>
44 |         <img src={image} alt="happy" srcset="" />
45 |       </div>
46 |     </div>
47 |     // </Skeleton>
48 |   );
49 | }
50 | 


--------------------------------------------------------------------------------
/src/Pages/Home/CoverPage/CoverPage.module.css:
--------------------------------------------------------------------------------
  1 | .CoverPage {
  2 |   width: 100%;
  3 |   height: 88vh;
  4 |   margin-top: 12vh;
  5 |   display: flex;
  6 |   justify-content: space-between;
  7 |   align-items: center;
  8 |   background-color: #f7f9fe;
  9 |   padding: 0 5vw;
 10 |   font-family: "Roboto", sans-serif;
 11 | }
 12 | 
 13 | .textSection {
 14 |   width: 50%;
 15 |   height: 100%;
 16 |   display: flex;
 17 |   flex-direction: column;
 18 |   justify-content: center;
 19 | }
 20 | 
 21 | .Heading {
 22 |   display: flex;
 23 |   font-family: "Oswald", sans-serif;
 24 | }
 25 | .Heading > div {
 26 |   display: flex;
 27 |   flex-direction: column;
 28 |   justify-content: center;
 29 |   align-items: center;
 30 | }
 31 | 
 32 | .Heading > div:nth-child(1) > h1 {
 33 |   font-size: 84px;
 34 |   font-weight: 700;
 35 |   color: #50658e;
 36 | }
 37 | 
 38 | .Heading > div:nth-child(2) > div:nth-child(1) {
 39 | }
 40 | .Heading > div:nth-child(2) > div:nth-child(1) > h1 {
 41 |   font-size: 28px;
 42 |   color: #f86168;
 43 |   margin-bottom: -10px;
 44 | }
 45 | .Heading > div:nth-child(2) > div:nth-child(2) {
 46 | }
 47 | .Heading > div:nth-child(2) > div:nth-child(2) > h1 {
 48 |   font-size: 40px;
 49 |   color: #50658e;
 50 |   padding-top: 0px;
 51 | }
 52 | .punchLine p {
 53 |   font-size: 17px;
 54 |   margin: 20px 0px;
 55 | }
 56 | .buttons {
 57 |   margin: 20px 0px;
 58 |   display: flex;
 59 |   align-items: center;
 60 | }
 61 | .buttons > button {
 62 |   border: none;
 63 |   border-radius: 20px;
 64 |   background-color: #1468cd;
 65 |   padding: 12px 28px;
 66 |   color: #fff;
 67 |   font-size: 17px;
 68 | }
 69 | .buttons > button:focus {
 70 |   outline: none;
 71 | }
 72 | .buttons a {
 73 |   color: #1468cd;
 74 |   text-decoration: none;
 75 |   margin-left: 20px;
 76 | }
 77 | .buttons > button > a {
 78 |   color: #fff;
 79 |   margin-left: 0;
 80 | }
 81 | .imgSection {
 82 |   width: 50%;
 83 |   height: 100%;
 84 |   display: flex;
 85 |   align-items: center;
 86 |   justify-content: flex-end;
 87 | }
 88 | .imgSection img {
 89 |   width: 100%;
 90 | }
 91 | @media screen and (max-width: 680px) {
 92 |   .CoverPage {
 93 |     flex-direction: column;
 94 |     margin-top: 9vh;
 95 |     height: 91vh;
 96 |   }
 97 | 
 98 |   .textSection {
 99 |     width: 90%;
100 |     height: 100%;
101 |     order: 2;
102 |   }
103 | 
104 |   .Heading > div:nth-child(1) > h1 {
105 |     font-size: 50px;
106 |   }
107 | 
108 |   .Heading > div:nth-child(2) > div:nth-child(1) > h1 {
109 |     font-size: 19px;
110 |   }
111 | 
112 |   .Heading > div:nth-child(2) > div:nth-child(2) > h1 {
113 |     font-size: 28px;
114 |   }
115 |   .punchLine p {
116 |     font-size: 15px;
117 |     margin: 15px 0px;
118 |   }
119 |   .buttons h3 {
120 |     font-size: 15px;
121 |   }
122 |   .buttons > button {
123 |     border-radius: 20px;
124 |     padding: 12px 22px;
125 |     font-size: 14px;
126 |   }
127 | 
128 |   .imgSection {
129 |     width: 80%;
130 |     order: 1;
131 |   }
132 |   .imgSection img {
133 |     width: 100%;
134 |   }
135 | }
136 | 


--------------------------------------------------------------------------------
/src/Pages/Home/DoDonts/DoDonts.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import styling from "./DoDonts.module.css";
 3 | import mainImage from "../../../images/do-donts/protect.png";
 4 | import does1 from "../../../images/do-donts/dos-a.png";
 5 | import does2 from "../../../images/do-donts/dos-b.png";
 6 | import does3 from "../../../images/do-donts/dos-c.png";
 7 | import dont1 from "../../../images/do-donts/donts-a.png";
 8 | import dont2 from "../../../images/do-donts/donts-b.png";
 9 | import dont3 from "../../../images/do-donts/donts-c.png";
10 | import { FaCheckCircle, FaTimesCircle } from "react-icons/fa";
11 | 
12 | export default function DoDonts() {
13 |   return (
14 |     <div className={styling.DoDonts} id="protectYourself">
15 |       <div className={styling.TextSection}>
16 |         <h3>DO’S & DON’TS</h3>
17 |         <h1>PROTECT YOURSELF</h1>
18 |         <p>
19 |           The best thing you can do now is plan for how you can adapt your daily
20 |           routine. Take few steps to protect yourself as Clean your hands often,
21 |           Avoid close contact, Cover coughs and sneezes, clean daily used
22 |           surfaces etc. The best way to prevent illness is to avoid being
23 |           exposed to this virus
24 |         </p>
25 |       </div>
26 |       <div className={styling.imageSection}>
27 |         <div className={styling.Dos}>
28 |           <div>
29 |             <h4>Wash Your Hands</h4>
30 | 
31 |             <img src={does1} alt="" srcset="" />
32 |           </div>
33 |           <div>
34 |             <h4>Drink Much Watar</h4>
35 |             <img src={does2} alt="" srcset="" />
36 |           </div>
37 |           <div>
38 |             <h4>Use Face Mask</h4>
39 |             <img src={does3} alt="" srcset="" />
40 |           </div>
41 |         </div>
42 |         {/*  */}
43 |         <div className={styling.MainImage}>
44 |           <img src={mainImage} alt="" srcset="" />
45 |         </div>
46 |         {/*  */}
47 | 
48 |         <div className={styling.Donts}>
49 |           <div>
50 |             <img src={dont1} alt="" srcset="" />
51 |             <h4>Avoid Close Contact</h4>
52 |           </div>
53 |           <div>
54 |             <img src={dont2} alt="" srcset="" />
55 |             <h4>Don’t Touch Face</h4>
56 |           </div>
57 |           <div>
58 |             <img src={dont3} alt="" srcset="" />
59 |             <h4>Social Distancing</h4>
60 |           </div>
61 |         </div>
62 |       </div>
63 |     </div>
64 |   );
65 | }
66 | 


--------------------------------------------------------------------------------
/src/Pages/Home/DoDonts/DoDonts.module.css:
--------------------------------------------------------------------------------
  1 | .DoDonts {
  2 |   width: 100%;
  3 |   height: 100vh;
  4 |   display: flex;
  5 |   flex-direction: column;
  6 |   justify-content: space-around;
  7 |   align-items: center;
  8 |   background-color: #f7f9fe;
  9 |   padding: 5vh 6vw;
 10 |   font-family: "Roboto", sans-serif;
 11 | }
 12 | .TextSection {
 13 |   width: 60%;
 14 |   height: 35vh;
 15 |   display: flex;
 16 |   flex-direction: column;
 17 |   justify-content: center;
 18 |   align-items: center;
 19 |   text-align: center;
 20 | }
 21 | .TextSection h1 {
 22 |   font-family: "Oswald", sans-serif;
 23 |   color: #50658e;
 24 |   font-size: 40px;
 25 | }
 26 | .TextSection h3 {
 27 |   color: #1468cd;
 28 | }
 29 | .TextSection p {
 30 |   line-height: 23px;
 31 | }
 32 | .imageSection {
 33 |   width: 100%;
 34 |   height: 65vh;
 35 |   width: 90%;
 36 |   display: flex;
 37 |   justify-content: space-between;
 38 |   align-items: center;
 39 | }
 40 | .Donts,
 41 | .Dos {
 42 |   width: 23%;
 43 |   height: 100%;
 44 |   display: flex;
 45 |   flex-direction: column;
 46 |   justify-content: space-around;
 47 |   align-items: center;
 48 | }
 49 | 
 50 | .Donts > div,
 51 | .Dos > div {
 52 |   display: flex;
 53 |   justify-content: center;
 54 |   align-items: center;
 55 | }
 56 | .Donts img,
 57 | .Dos img {
 58 |   border: 2px solid #2a81ea;
 59 |   border-radius: 50%;
 60 |   width: 40%;
 61 | }
 62 | .DoDonts h4 {
 63 |   text-align: center;
 64 |   width: 60%;
 65 |   color: #2a81ea;
 66 | }
 67 | .MainImage {
 68 |   width: 50%;
 69 |   height: 100%;
 70 |   display: flex;
 71 |   justify-content: center;
 72 |   align-items: center;
 73 | }
 74 | .MainImage img {
 75 |   width: 90%;
 76 | }
 77 | @media screen and (max-width: 680px) {
 78 |   .DoDonts {
 79 |     padding: 2vh 2vw;
 80 |     height: 130vh;
 81 |   }
 82 |   .TextSection {
 83 |     width: 100%;
 84 |     height: 25%;
 85 |   }
 86 |   .TextSection h1 {
 87 |     font-size: 30px;
 88 |   }
 89 |   .TextSection h3 {
 90 |     color: #1468cd;
 91 |     font-size: 17px;
 92 |   }
 93 |   .TextSection p {
 94 |     line-height: 19px;
 95 |   }
 96 |   .imageSection {
 97 |     height: 75%;
 98 |     width: 100%;
 99 |     flex-direction: column;
100 |   }
101 |   .Dos {
102 |     order: 2;
103 |   }
104 |   .Donts {
105 |     order: 3;
106 |   }
107 |   .Donts,
108 |   .Dos {
109 |     width: 100%;
110 |     height: 100%;
111 |     flex-direction: row;
112 |   }
113 | 
114 |   .Donts > div,
115 |   .Dos > div {
116 |     flex-direction: column;
117 |   }
118 |   .Donts img,
119 |   .Dos img {
120 |     width: 60%;
121 |   }
122 |   .DoDonts h4 {
123 |     width: 100%;
124 |   }
125 |   .MainImage {
126 |     order: 1;
127 |     width: 90%;
128 |   }
129 |   .MainImage img {
130 |     width: 100%;
131 |   }
132 | }
133 | 


--------------------------------------------------------------------------------
/src/Pages/Home/HandWash/HandWash.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import styling from "./Handwash.module.css";
 3 | import hand1 from "../../../images/Handwash/hand-1.png";
 4 | import hand2 from "../../../images/Handwash/hand-2.png";
 5 | import hand3 from "../../../images/Handwash/hand-3.png";
 6 | import hand4 from "../../../images/Handwash/hand-4.png";
 7 | import hand5 from "../../../images/Handwash/hand-5.png";
 8 | import hand6 from "../../../images/Handwash/hand-6.png";
 9 | 
10 | export default function HandWash() {
11 |   return (
12 |     <div id="symptoms" className={styling.HandWash}>
13 |       <div className={styling.TextSection}>
14 |         <h1>Follow steps to wash hands</h1>
15 |         <h3>It is necessary step to avoid corona</h3>
16 |       </div>
17 |       <div className={styling.ImageSection}>
18 |         <div>
19 |           <div>
20 |             <img src={hand1} alt="" srcset="" />
21 |             <h4>Focus on Wrist</h4>
22 |           </div>
23 |           <div>
24 |             <img src={hand2} alt="" srcset="" />
25 |             <h4>Clean with Water</h4>
26 |           </div>
27 |         </div>
28 |         <div>
29 |           <div>
30 |             <img src={hand3} alt="" srcset="" />
31 |             <h4>Back to Hands</h4>
32 |           </div>
33 |           <div>
34 |             <img src={hand4} alt="" srcset="" />
35 |             <h4>Between Fingers</h4>
36 |           </div>
37 |         </div>
38 |         <div>
39 |           <div>
40 |             <img src={hand5} alt="" srcset="" />
41 |             <h4>Palm to Palm</h4>
42 |           </div>
43 |           <div>
44 |             <img src={hand6} alt="" srcset="" />
45 |             <h4>Soap on Hand</h4>
46 |           </div>
47 |         </div>
48 |       </div>
49 |     </div>
50 |   );
51 | }
52 | 


--------------------------------------------------------------------------------
/src/Pages/Home/HandWash/Handwash.module.css:
--------------------------------------------------------------------------------
 1 | .HandWash {
 2 |   width: 100%;
 3 |   height: 70vh;
 4 |   display: flex;
 5 |   flex-direction: column;
 6 |   justify-content: space-between;
 7 |   align-items: center;
 8 |   background-color: #f7f9fe;
 9 |   padding: 5vh 5vw;
10 |   font-family: "Roboto", sans-serif;
11 | }
12 | .TextSection {
13 |   display: flex;
14 |   flex-direction: column;
15 |   justify-content: center;
16 |   align-items: center;
17 |   text-align: center;
18 |   width: 100%;
19 |   height: 40%;
20 | }
21 | .TextSection h1 {
22 |   font-size: 40px;
23 |   color: #465675;
24 |   font-family: "Oswald", sans-serif;
25 |   font-weight: bold;
26 | }
27 | .TextSection h3 {
28 |   color: #1468cd;
29 | }
30 | .ImageSection {
31 |   display: flex;
32 |   justify-content: space-around;
33 |   align-items: center;
34 |   width: 100%;
35 |   height: 60%;
36 |   text-align: center;
37 | }
38 | .ImageSection > div {
39 |   width: 32%;
40 |   display: flex;
41 |   align-items: center;
42 |   justify-content: center;
43 | }
44 | .ImageSection > div > div {
45 |   display: flex;
46 |   flex-direction: column;
47 |   align-items: center;
48 |   justify-content: center;
49 | }
50 | .ImageSection img {
51 |   display: flex;
52 |   width: 80%;
53 |   height: 80%;
54 |   border-radius: 50%;
55 |   box-shadow: 0 4px 8px 0 rgba(2, 2, 2, 0.1), 0 6px 20px 0 rgba(7, 7, 7, 0.1);
56 | }
57 | .ImageSection h4 {
58 |   margin-top: 15px;
59 | }
60 | @media screen and (max-width: 680px) {
61 |   .HandWash {
62 |     width: 100%;
63 |     height: 105vh;
64 |   }
65 |   .TextSection {
66 |     width: 100%;
67 |     height: 20%;
68 |   }
69 |   .TextSection h1 {
70 |     font-size: 30px;
71 |   }
72 |   .ImageSection {
73 |     flex-direction: column;
74 |     width: 100%;
75 |     height: 80%;
76 |   }
77 |   .ImageSection > div {
78 |     width: 90%;
79 |     display: flex;
80 |   }
81 | 
82 |   .ImageSection img {
83 |     display: flex;
84 |     width: 70%;
85 |     height: 70%;
86 |     border-radius: 50%;
87 |     box-shadow: 0 4px 8px 0 rgba(2, 2, 2, 0.1), 0 6px 20px 0 rgba(7, 7, 7, 0.1);
88 |   }
89 |   .ImageSection h4 {
90 |     margin-top: 15px;
91 |   }
92 | }
93 | 


--------------------------------------------------------------------------------
/src/Pages/Home/Home.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import styling from "./Home.module.css";
 3 | import CoverPage from "./CoverPage/CoverPage";
 4 | import AboutPage from "./AboutPage/AboutPage";
 5 | import Transmission from "./Transmission/Transmission";
 6 | import Symptoms from "./Symptoms/Symptoms";
 7 | import Protect from "./Protect/Protect";
 8 | import TakeSteps from "./Take-steps/TakeSteps";
 9 | import Handwash from "./HandWash/HandWash.js";
10 | import Treatment from "./Treatment/Treatment";
11 | import DoDonts from "./DoDonts/DoDonts";
12 | import { Link } from "react-router-dom";
13 | import updatesLogo from "../../images/updates-logo.png";
14 | 
15 | export default function Home() {
16 |   return (
17 |     <div className={styling.Home}>
18 |       <CoverPage />
19 |       <AboutPage />
20 |       <Transmission />
21 |       <Symptoms />
22 |       <Protect />
23 |       <TakeSteps />
24 |       <Handwash />
25 |       <Treatment />
26 |       <DoDonts />
27 |       <div className={styling.moveTo}>
28 |         <Link to="/cases">
29 |           <img src={updatesLogo} alt="" srcset="" />
30 |         </Link>
31 |       </div>
32 |     </div>
33 |   );
34 | }
35 | 


--------------------------------------------------------------------------------
/src/Pages/Home/Home.module.css:
--------------------------------------------------------------------------------
 1 | .moveTo {
 2 |   position: fixed;
 3 |   bottom: 15px;
 4 |   right: 15px;
 5 |   background-color: #056cc4;
 6 |   width: 60px;
 7 |   height: 60px;
 8 |   border-radius: 50%;
 9 |   display: flex;
10 |   flex-direction: column;
11 |   justify-content: center;
12 |   align-items: center;
13 |   color: #fff;
14 |   font-size: 13px;
15 |   box-shadow: 0 4px 8px 0 rgba(2, 2, 2, 0.3), 0 6px 20px 0 rgba(7, 7, 7, 0.3);
16 |   text-align: center;
17 | }
18 | .moveTo img {
19 |   width: 60%;
20 |   animation: blinker 3s linear infinite;
21 | }
22 | @keyframes blinker {
23 |   50% {
24 |     opacity: 0.2;
25 |   }
26 | }
27 | 


--------------------------------------------------------------------------------
/src/Pages/Home/Protect/Protect.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import Transmission from "../../../UI/ReusablePage/ReusablePage";
 3 | import symptom1 from "../../../images/Protect/advice1.png";
 4 | import symptom2 from "../../../images/Protect/advice2.png";
 5 | import symptom3 from "../../../images/Protect/advice3.png";
 6 | import symptom4 from "../../../images/Protect/advice4.png";
 7 | 
 8 | export default function Protect() {
 9 |   return (
10 |     <div id="prevention">
11 |       <Transmission
12 |         addClassForImg="additionClassForImages"
13 |         addClassForMultiple="addClassForBg"
14 |         subHeading="HOW TO PROTECT YOURSELF?"
15 |         heding="PREVENTION & ADVICE"
16 |         textHeading="There is currently no vaccine to prevent coronavirus disease 2019 (COVID-19). The best way to prevent illness is to avoid being exposed to this virus. Stay aware of the latest information on the COVID-19 outbreak, available on the WHO website and through your national and local public health authority."
17 |         imageSection1={{
18 |           image: symptom1,
19 |           heading: "Practice respiratory hygiene",
20 |           text:
21 |             "Maintain good respiratory hygiene as covering your mouth & nose with your bent elbow or tissue when cough or sneeze.",
22 |         }}
23 |         imageSection2={{
24 |           image: symptom2,
25 |           heading: "Avoid touching face",
26 |           text:
27 |             "Hands touch many surfaces and can pick up viruses. So, hands can transfer the virus to your eyes, nose or mouth and can make you sick.",
28 |         }}
29 |         imageSection3={{
30 |           image: symptom3,
31 |           heading: "Maintain social distancing",
32 |           text:
33 |             "Maintain at least 1 metre (3 feet) distance between yourself & anyone who is coughing or sneezing. If you are too close, get chance to infected.",
34 |         }}
35 |         imageSection4={{
36 |           image: symptom4,
37 |           heading: "Wash your hands frequently",
38 |           text:
39 |             "Regularly and thoroughly clean your hands with an alcohol-based hand rub or wash them with soap and water for at least 20 seconds",
40 |         }}
41 |       />
42 |     </div>
43 |   );
44 | }
45 | 


--------------------------------------------------------------------------------
/src/Pages/Home/Symptoms/Symptoms.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import Transmission from "../../../UI/ReusablePage/ReusablePage";
 3 | import symptom1 from "../../../images/Symptom/symptom1.png";
 4 | import symptom2 from "../../../images/Symptom/symptom2.png";
 5 | import symptom3 from "../../../images/Symptom/symptom3.png";
 6 | 
 7 | export default function Symptoms() {
 8 |   return (
 9 |     <div id="symptoms">
10 |       <Transmission
11 |         addClassForImg="additionClassForImages"
12 |         subHeading="WHAT ARE THE SYMPTOMS OF COVID-19"
13 |         heding="SYMPTOMS OF CORONAVIRUS"
14 |         textHeading="The most common symptoms of COVID-19 are fever, tiredness, and dry cough. Some patients may have aches and pains, nasal congestion, runny nose, sore throat or diarrhea. These symptoms are usually mild and begin gradually. Also the symptoms may appear 2-14 days after exposure. "
15 |         imageSection1={{
16 |           image: symptom1,
17 |           heading: "Shortness of breath",
18 |           text:
19 |             "Difficulty breathing – Around 1 out of every 6 people who gets COVID-19 becomes seriously ill and develops difficulty breathing or shortness of breath.",
20 |         }}
21 |         imageSection2={{
22 |           image: symptom2,
23 |           heading: "Cough",
24 |           text:
25 |             "Continuous cough – this means coughing a lot for more than an hour, or 3 or more coughing episodes in 24 hours (if you usually have a cough, it may be worse than usual)",
26 |         }}
27 |         imageSection3={{
28 |           image: symptom3,
29 |           heading: "Fever",
30 |           text:
31 |             "High Fever – this means you feel hot to touch on your chest or back (you do not need to measure your temperature). It is a common sign and also may appear in 2-10 days if you affected ",
32 |         }}
33 |       />
34 |     </div>
35 |   );
36 | }
37 | 


--------------------------------------------------------------------------------
/src/Pages/Home/Take-steps/TakeSteps.js:
--------------------------------------------------------------------------------
  1 | import React from "react";
  2 | import styling from "./TakeSteps.module.css";
  3 | import doctorImage from "../../../images/Take-Steps/whatiscovid.png";
  4 | import { FaCheckCircle } from "react-icons/fa";
  5 | 
  6 | export default function TakeSteps() {
  7 |   return (
  8 |     <div className={styling.TakeSteps} id="TakeSteps">
  9 |       <div>
 10 |         <div className={styling.imageSection}>
 11 |           <img src={doctorImage} alt="" />
 12 |         </div>
 13 |         <div className={styling.textSection}>
 14 |           <h1>Take steps to protect others</h1>
 15 |           <div>
 16 |             <div className={styling.checkIcon}>
 17 |               <FaCheckCircle />
 18 |             </div>
 19 |             <div>
 20 |               <span className={styling.boldText}>Stay home if you’re sick</span>{" "}
 21 |               – Stay home if you are sick, except to get medical care.
 22 |             </div>
 23 |           </div>
 24 |           <div>
 25 |             <div className={styling.checkIcon}>
 26 |               <FaCheckCircle />
 27 |             </div>
 28 |             <div>
 29 |               <span className={styling.boldText}>
 30 |                 Cover your mouth and nose
 31 |               </span>{" "}
 32 |               – with a tissue when you cough or sneeze (throw used tissues in
 33 |               the trash) or use the inside of your elbow.
 34 |             </div>
 35 |           </div>
 36 |           <div>
 37 |             <div className={styling.checkIcon}>
 38 |               <FaCheckCircle />
 39 |             </div>
 40 |             <div>
 41 |               <span className={styling.boldText}>
 42 |                 Wear a facemask if you are sick
 43 |               </span>{" "}
 44 |               – You should wear a facemask when you are around other people
 45 |               (e.g., sharing a room or vehicle) and before you enter a
 46 |               healthcare provider’s
 47 |             </div>
 48 |           </div>
 49 |           <div>
 50 |             <div className={styling.checkIcon}>
 51 |               <FaCheckCircle />
 52 |             </div>
 53 |             <div>
 54 |               <span className={styling.boldText}>
 55 |                 Clean AND disinfect frequently touched surfaces daily
 56 |               </span>
 57 |               – This includes phones, tables, light switches, doorknobs,
 58 |               countertops, handles, desks, toilets, faucets, and sinks
 59 |             </div>
 60 |           </div>
 61 |           <div>
 62 |             <div className={styling.checkIcon}>
 63 |               <FaCheckCircle />
 64 |             </div>
 65 |             <div>
 66 |               <span className={styling.boldText}>Clean the dirty surfaces</span>{" "}
 67 |               – Use detergent or soap and water prior to disinfection
 68 |             </div>
 69 |           </div>
 70 |           <div>
 71 |             <div className={styling.checkIcon}>
 72 |               <FaCheckCircle />
 73 |             </div>
 74 |             <div>
 75 |               <span className={styling.boldText}>
 76 |                 Stay informed about the local COVID-19 situation
 77 |               </span>{" "}
 78 |               – Get up-to-date information about local COVID-19 activity from
 79 |               public health officials.
 80 |             </div>
 81 |           </div>
 82 |           <div>
 83 |             <div className={styling.checkIcon}>
 84 |               <FaCheckCircle />
 85 |             </div>
 86 |             <div>
 87 |               <span className={styling.boldText}>
 88 |                 Dedicated, lined trash can
 89 |               </span>{" "}
 90 |               – If possible, dedicate a lined trash can for the ill person. Use
 91 |               gloves when removing garbage bags, and handling & disposing of
 92 |               trash.
 93 |             </div>
 94 |           </div>
 95 |         </div>
 96 |       </div>
 97 |     </div>
 98 |   );
 99 | }
100 | 


--------------------------------------------------------------------------------
/src/Pages/Home/Take-steps/TakeSteps.module.css:
--------------------------------------------------------------------------------
 1 | .TakeSteps {
 2 |   width: 100%;
 3 |   height: 100vh;
 4 |   display: flex;
 5 |   justify-content: center;
 6 |   align-items: center;
 7 |   background-color: #f7f9fe;
 8 |   padding: 5vh 5vw;
 9 |   font-family: "Roboto", sans-serif;
10 |   color: #3d4b69;
11 | }
12 | .TakeSteps > div {
13 |   background-color: #fff;
14 |   width: 100%;
15 |   height: 77vh;
16 |   display: flex;
17 |   justify-content: space-between;
18 |   align-items: center;
19 |   text-justify: auto;
20 | }
21 | 
22 | .imageSection {
23 |   width: 45%;
24 |   height: 100%;
25 |   display: flex;
26 |   justify-content: center;
27 |   align-items: center;
28 | }
29 | .imageSection img {
30 |   height: 100%;
31 | }
32 | .checkIcon {
33 |   color: #3dca93;
34 |   margin-right: 10px;
35 | }
36 | .textSection {
37 |   width: 55%;
38 |   height: 100%;
39 |   display: flex;
40 |   flex-direction: column;
41 |   justify-content: space-around;
42 | }
43 | .textSection > div {
44 |   display: flex;
45 |   font-size: 16px;
46 |   line-height: 23px;
47 | }
48 | .boldText {
49 |   font-weight: bolder;
50 | }
51 | @media screen and (max-width: 680px) {
52 |   .TakeSteps {
53 |     height: 160vh;
54 |   }
55 |   .TakeSteps > div {
56 |     height: 160vh;
57 |     flex-direction: column;
58 |   }
59 | 
60 |   .imageSection {
61 |     width: 90%;
62 |     height: 40%;
63 |     order: 2;
64 |   }
65 |   .imageSection img {
66 |     height: 100%;
67 |   }
68 |   .textSection {
69 |     width: 90%;
70 |     height: 60%;
71 |     order: 1;
72 |   }
73 | }
74 | 


--------------------------------------------------------------------------------
/src/Pages/Home/Transmission/Transmission.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import symptom1 from "../../../images/Transmission/cough.png";
 3 | import symptom2 from "../../../images/Transmission/contacting.png";
 4 | import symptom3 from "../../../images/Transmission/person.png";
 5 | import Transmissio from "../../../UI/ReusablePage/ReusablePage";
 6 | export default function Transmission() {
 7 |   return (
 8 |     <div id="spread">
 9 |       <Transmissio
10 |         subHeading="HOW CORONAVIRUS IS SPREAD"
11 |         heding="TRANSMISSION OF COVID-19"
12 |         textHeading="Because it's a new illness, we do not know exactly how coronavirus
13 |           spreads. from person to person. Similar viruses are spread in cough
14 |           droplets."
15 |         imageSection1={{
16 |           image: symptom1,
17 |           heading: "Droplets that from infected person coughs or sneezes",
18 |           text:
19 |             "The coronavirus is thought to spread mainly from person to person. This can happen between people who are in close contact with one another.",
20 |         }}
21 |         imageSection2={{
22 |           image: symptom2,
23 |           heading: "Touching or contact with infected surfaces or objects",
24 |           text:
25 |             "A person can get COVID-19 by touching a surface or object that has the virus on it and then touching their own mouth, nose, or possibly their eyes.",
26 |         }}
27 |         imageSection3={{
28 |           image: symptom3,
29 |           heading: "Person-to-person spread as close contact with infected",
30 |           text:
31 |             "The coronavirus is thought to spread mainly from person to person. This can happen between people who are in close contact with one another",
32 |         }}
33 |       />
34 |     </div>
35 |   );
36 | }
37 | 


--------------------------------------------------------------------------------
/src/Pages/Home/Treatment/Treatment.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import styling from "./Treatment.module.css";
 3 | import { FaCaretRight } from "react-icons/fa";
 4 | 
 5 | export default function Treatment() {
 6 |   return (
 7 |     <div className={styling.Treatment} id="treatment">
 8 |       <div className={styling.TreatmentBox}>
 9 |         <div>
10 |           <h3>Self Care</h3>
11 |           <p>
12 |             If you have mild symptoms, stay at home until you’ve recovered. You
13 |             can relieve your symptoms if you:
14 |           </p>
15 |           <p>
16 |             <FaCaretRight />
17 |             Rest and sleep
18 |           </p>
19 |           <p>
20 |             <FaCaretRight />
21 |             Keep warm
22 |           </p>
23 |           <p>
24 |             <FaCaretRight />
25 |             Drink plenty of liquids
26 |           </p>
27 |           <p>
28 |             <FaCaretRight />
29 |             Use a room humidifier or take a hot shower to help ease a sore
30 |             throat and cough
31 |           </p>
32 |         </div>
33 |         <div>
34 |           <h3>Medical Treatments</h3>
35 |           <p>
36 |             If you develop a fever, cough, and have difficulty breathing,
37 |             promptly seek medical care. Call in advance and tell your health
38 |             provider of any recent travel or recent contact with travelers
39 |           </p>
40 |         </div>
41 |       </div>
42 |       <div className={styling.TreatmentText}>
43 |         <h3>BE CAREFULL & STAY SAFE</h3>
44 |         <h1>TREATMENT FOR CORONAVIRUS</h1>
45 |         <p>
46 |           <b>
47 |             To date, there is no vaccine and no specific antiviral medicine to
48 |             prevent or treat COVID-2019.
49 |           </b>{" "}
50 |           However, those affected should receive care to relieve symptoms.
51 |           People with serious illness should be hospitalized. Most patients
52 |           recover thanks to supportive care
53 |         </p>
54 |         <p>
55 |           <b>Antibiotics do not help, as they do not work against viruses.</b>
56 |           Treatment aims to relieve the symptoms while your body fights the
57 |           illness. You'll need to stay in isolation, away from other people,
58 |           until you have recovered
59 |         </p>
60 |       </div>
61 |     </div>
62 |   );
63 | }
64 | 


--------------------------------------------------------------------------------
/src/Pages/Home/Treatment/Treatment.module.css:
--------------------------------------------------------------------------------
 1 | .Treatment {
 2 |   width: 100%;
 3 |   height: 90vh;
 4 |   display: flex;
 5 |   justify-content: space-between;
 6 |   align-items: center;
 7 |   background-color: #2766bb;
 8 |   padding: 5vh 8vw;
 9 |   font-family: "Roboto", sans-serif;
10 |   color: aliceblue;
11 | }
12 | .TreatmentBox {
13 |   background-color: #1b47a1;
14 |   width: 40%;
15 |   height: 80%;
16 |   display: flex;
17 |   flex-direction: column;
18 |   justify-content: space-around;
19 |   align-items: center;
20 |   border-radius: 5px;
21 | }
22 | .TreatmentBox > div:first-child {
23 |   width: 90%;
24 |   height: 60%;
25 |   display: flex;
26 |   flex-direction: column;
27 |   justify-content: space-around;
28 | }
29 | .TreatmentBox > div:last-child {
30 |   width: 90%;
31 |   height: 30%;
32 |   display: flex;
33 |   flex-direction: column;
34 |   justify-content: space-around;
35 | }
36 | .TreatmentBox h3 {
37 |   font-family: "Oswald", sans-serif;
38 | }
39 | .TreatmentText {
40 |   width: 50%;
41 |   height: 50%;
42 |   display: flex;
43 |   flex-direction: column;
44 |   justify-content: space-around;
45 |   align-items: flex-end;
46 |   text-align: justify;
47 |   text-align: right;
48 | }
49 | .TreatmentText h1 {
50 |   font-family: "Oswald", sans-serif;
51 |   font-size: 40px;
52 | }
53 | .TreatmentText p {
54 |   font-size: 16px;
55 |   line-height: 25px;
56 | }
57 | .TreatmentText h3 {
58 |   color: #73e3ff;
59 |   font-family: "Oswald", sans-serif;
60 | }
61 | @media screen and (max-width: 680px) {
62 |   .Treatment {
63 |     width: 100%;
64 |     height: 100vh;
65 |     flex-direction: column;
66 |     justify-content: space-around;
67 |     padding: 2vh 4vw;
68 |   }
69 |   .TreatmentBox {
70 |     width: 100%;
71 |     height: 70%;
72 |   }
73 | 
74 |   .TreatmentText {
75 |     width: 100%;
76 |     height: 50%;
77 |   }
78 |   .TreatmentText h1 {
79 |     font-size: 30px;
80 |   }
81 |   .TreatmentText p {
82 |     font-size: 15px;
83 |     line-height: 23px;
84 |   }
85 | }
86 | 


--------------------------------------------------------------------------------
/src/Pages/NotFound/NotFound.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import styling from "./NotFound.module.css";
 3 | import NotFoundImage from "../../images/Not-Found/404.png";
 4 | 
 5 | export default function NotFound() {
 6 |   return (
 7 |     <div className={styling.NotFound}>
 8 |       <img src={NotFoundImage} alt="" />
 9 |     </div>
10 |   );
11 | }
12 | 


--------------------------------------------------------------------------------
/src/Pages/NotFound/NotFound.module.css:
--------------------------------------------------------------------------------
 1 | .NotFound {
 2 |   width: 100%;
 3 |   height: 100vh;
 4 |   display: flex;
 5 |   justify-content: center;
 6 |   align-items: center;
 7 |   background-color: #fff;
 8 | }
 9 | .NotFound img {
10 |   height: 100%;
11 | }
12 | 


--------------------------------------------------------------------------------
/src/UI/Footer/Footer.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import styling from "./Footer.module.css";
 3 | import logo from "../../images/logo.png";
 4 | 
 5 | export default function Footer() {
 6 |   return (
 7 |     <div className={styling.Footer}>
 8 |       <div>
 9 |         <div>
10 |           <img src={logo} alt="logo" srcset="" />
11 |           <p>
12 |             This website is for health information and advice about coronavirus
13 |             (COVID-19), how to prevent and protect yourself from disease.
14 |           </p>
15 |         </div>
16 | 
17 |         <div className={styling.additional}>
18 |           <h3>IMPORTANT LINK</h3>
19 |           <a href="https://www.who.int/">WHO Website</a>
20 |           <a href="https://www.cdc.gov/">CDC Website</a>
21 |           <a href="https://www.nhs.uk/">NHS Website</a>
22 |           <a href="https://www.health.harvard.edu/">Harvard Health</a>
23 |         </div>
24 |       </div>
25 |       <div>
26 |         <div className={styling.additional}>
27 |           <h3>HELPFULL LINK</h3>
28 |           <a href="#coverPage">Healthcare Professionals</a>
29 |           <a href="#coverPage">Healthcare Facilities</a>
30 |           <a href="#coverPage">Older Adults & Medical Conditions</a>
31 |           <a href="#coverPage">Repare your Family</a>
32 |         </div>
33 |         <div className={styling.additional}>
34 |           <h3>QUICK LINK</h3>
35 |           <a href="#coverPage">Symptoms</a>
36 |           <a href="#coverPage">Prevention</a>
37 |           <a href="#coverPage">Protect Youself</a>
38 |           <a href="#coverPage">About Corona</a>
39 |         </div>
40 |       </div>
41 |     </div>
42 |   );
43 | }
44 | 


--------------------------------------------------------------------------------
/src/UI/Footer/Footer.module.css:
--------------------------------------------------------------------------------
 1 | .Footer {
 2 |   background-color: #151c2e;
 3 |   width: 100%;
 4 |   height: 50vh;
 5 |   display: flex;
 6 |   padding: 5vh 5vw;
 7 |   font-family: "Roboto", sans-serif;
 8 |   justify-content: space-around;
 9 |   align-items: center;
10 | }
11 | .Footer > div {
12 |   display: flex;
13 |   width: 50%;
14 |   height: 85%;
15 |   border-bottom: 1px solid rgb(42, 42, 42);
16 |   border-top: 1px solid rgb(42, 42, 42);
17 | }
18 | .Footer > div > div {
19 |   display: flex;
20 |   flex-direction: column;
21 |   justify-content: space-around;
22 |   width: 50%;
23 |   height: 100%;
24 | }
25 | .Footer img {
26 |   width: 55%;
27 | }
28 | .Footer h3 {
29 |   color: rgb(204, 200, 200);
30 |   font-family: "Oswald", sans-serif;
31 | }
32 | .Footer p {
33 |   color: rgb(204, 200, 200);
34 | }
35 | .Footer a {
36 |   color: rgb(141, 140, 140);
37 |   text-decoration: none;
38 | }
39 | .Footer a:hover {
40 |   color: rgb(204, 200, 200);
41 | }
42 | .additional {
43 |   align-items: flex-end;
44 |   padding-right: 10px;
45 | }
46 | @media screen and (max-width: 680px) {
47 |   .Footer {
48 |     background-color: #151c2e;
49 |     width: 100%;
50 |     height: 70vh;
51 |     display: flex;
52 |     padding: 5vh 5vw;
53 |     flex-direction: column;
54 |   }
55 |   .Footer > div {
56 |     display: flex;
57 |     width: 100%;
58 |     height: 100%;
59 |   }
60 |   .Footer > div > div {
61 |     text-align: right;
62 |     align-items: flex-end;
63 |   }
64 |   .Footer img {
65 |     width: 55%;
66 |   }
67 | }
68 | 


--------------------------------------------------------------------------------
/src/UI/Header/Header.js:
--------------------------------------------------------------------------------
 1 | import React, { useState } from "react";
 2 | import { Link, NavLink } from "react-router-dom";
 3 | import styling from "./Header.module.css";
 4 | import logo from "../../images/logo.png";
 5 | 
 6 | export default function Header() {
 7 |   // CHANGING NAVBAR ON SCROLL
 8 |   let [navStyle, setNavStyle] = useState(styling.Header);
 9 |   window.onscroll = function myFunction() {
10 |     if (window.innerHeight / 7 > window.scrollY) {
11 |       setNavStyle(styling.Header);
12 |     } else {
13 |       setNavStyle(styling.newHeader);
14 |     }
15 |   };
16 | 
17 |   return (
18 |     <div className={navStyle}>
19 |       <div className={styling.logo}>
20 |         <p>
21 |           <Link to="/">
22 |             <img src={logo} alt="logo" />
23 |           </Link>
24 |         </p>
25 |       </div>
26 |       <div className={styling.PageLinks}>
27 |         <p>
28 |           <NavLink activeClassName={styling.active} exact to="/">
29 |             Home
30 |           </NavLink>
31 |         </p>
32 |         <p>
33 |           <NavLink activeClassName={styling.active} exact to="/cases">
34 |             Cases
35 |           </NavLink>
36 |         </p>
37 |       </div>
38 |     </div>
39 |   );
40 | }
41 | 


--------------------------------------------------------------------------------
/src/UI/Header/Header.module.css:
--------------------------------------------------------------------------------
  1 | .Header {
  2 |   width: 100%;
  3 |   height: 12vh;
  4 |   background-color: #f7f9fe;
  5 |   position: fixed;
  6 |   top: 0;
  7 |   display: flex;
  8 |   justify-content: space-between;
  9 |   align-items: center;
 10 |   padding: 0 5vw;
 11 |   z-index: 10000000;
 12 | }
 13 | .newHeader {
 14 |   width: 100%;
 15 |   height: 12vh;
 16 |   box-shadow: 0 4px 8px 0 rgba(1, 1, 1, 0.1), 0 6px 20px 0 rgba(0, 0, 0, 0.1);
 17 |   /* box-shadow: 0 4px 8px 0 rgba(2, 2, 2, 0.1), 0 6px 20px 0 rgba(7, 7, 7, 0.1); */
 18 | 
 19 |   background-color: #fff;
 20 |   position: fixed;
 21 |   top: 0;
 22 |   display: flex;
 23 |   justify-content: space-between;
 24 |   align-items: center;
 25 |   padding: 0 5vw;
 26 | }
 27 | 
 28 | .Header a,
 29 | .newHeader a {
 30 |   text-decoration: none;
 31 |   margin-left: 30px;
 32 |   font-size: 16px;
 33 |   font-weight: bold;
 34 |   color: black;
 35 | }
 36 | .active {
 37 |   background-color: #1468cd;
 38 |   padding: 9px 30px;
 39 |   border-radius: 20px;
 40 |   color: #fff !important;
 41 | }
 42 | /* .logo img {
 43 |   width: 43%;
 44 | } */
 45 | .logo a {
 46 |   padding-left: 0;
 47 | }
 48 | .Header a:hover,
 49 | .newHeader a:hover {
 50 |   color: #3d434e;
 51 | }
 52 | 
 53 | .PageLinks {
 54 |   display: flex;
 55 | }
 56 | @media screen and (max-width: 680px) {
 57 |   .Header {
 58 |     width: 100%;
 59 |     height: 9vh;
 60 |     /* background-color: #f7f9fe;
 61 |     position: fixed;
 62 |     top: 0;
 63 |     display: flex;
 64 |     justify-content: space-between;
 65 |     align-items: center;
 66 |     padding: 0 5vw;
 67 |     z-index: 10000000; */
 68 |   }
 69 |   .newHeader {
 70 |     width: 100%;
 71 |     height: 9vh;
 72 |     /* box-shadow: 0 4px 8px 0 rgba(1, 1, 1, 0.1), 0 6px 20px 0 rgba(0, 0, 0, 0.1); */
 73 |     /* box-shadow: 0 4px 8px 0 rgba(2, 2, 2, 0.1), 0 6px 20px 0 rgba(7, 7, 7, 0.1); */
 74 | 
 75 |     /* background-color: #fff;
 76 |     position: fixed;
 77 |     top: 0;
 78 |     display: flex;
 79 |     justify-content: space-between;
 80 |     align-items: center;
 81 |     padding: 0 5vw; */
 82 |   }
 83 | 
 84 |   .Header a,
 85 |   .newHeader a {
 86 |     /* text-decoration: none; */
 87 |     margin-left: 12px;
 88 |     font-size: 12px;
 89 |     /* font-weight: bold;
 90 |     color: black; */
 91 |   }
 92 |   .active {
 93 |     background-color: #1468cd;
 94 |     padding: 7px 15px;
 95 |     /* border-radius: 20px;
 96 |     color: #fff !important; */
 97 |   }
 98 |   .logo img {
 99 |     width: 70%;
100 |   }
101 |   /* .logo a {
102 |     padding-left: 0;
103 |   }
104 |   .Header a:hover,
105 |   .newHeader a:hover {
106 |     color: #3d434e;
107 |   }
108 | 
109 |   .PageLinks {
110 |     display: flex;
111 |   } */
112 | }
113 | 


--------------------------------------------------------------------------------
/src/UI/ReusablePage/Reusable.module.css:
--------------------------------------------------------------------------------
  1 | .Transmission {
  2 |   width: 100%;
  3 |   height: 100vh;
  4 |   display: flex;
  5 |   flex-direction: column;
  6 |   justify-content: space-between;
  7 |   align-items: center;
  8 |   background-color: #f7f9fe;
  9 |   padding: 5vh 5vw;
 10 |   font-family: "Roboto", sans-serif;
 11 | }
 12 | 
 13 | .TextSection {
 14 |   width: 70%;
 15 |   height: 30%;
 16 |   display: flex;
 17 |   flex-direction: column;
 18 |   justify-content: center;
 19 |   align-items: center;
 20 |   text-align: center;
 21 | }
 22 | .TextSection h3 {
 23 |   color: #1468cd;
 24 |   font-size: 18px;
 25 | }
 26 | .TextSection h1 {
 27 |   font-family: "Oswald", sans-serif;
 28 |   color: #50658e;
 29 |   font-size: 40px;
 30 | }
 31 | .TextSection p {
 32 |   font-size: 18px;
 33 | }
 34 | .ImageSection {
 35 |   width: 100%;
 36 |   height: 65%;
 37 |   display: flex;
 38 |   justify-content: space-between;
 39 |   align-items: center;
 40 | }
 41 | .ImageSection > div {
 42 |   width: 30%;
 43 |   height: 100%;
 44 |   display: flex;
 45 |   flex-direction: column;
 46 |   justify-content: center;
 47 |   align-items: center;
 48 |   box-shadow: 0 4px 8px 0 rgba(2, 2, 2, 0.1), 0 6px 20px 0 rgba(7, 7, 7, 0.1);
 49 |   border-radius: 5px;
 50 | }
 51 | 
 52 | .ImageSection h3 {
 53 |   color: #1468cd;
 54 |   margin: 5% 5% 0% 5%;
 55 | }
 56 | .ImageSection p {
 57 |   margin: 3% 5% 0% 5%;
 58 | }
 59 | .ImageSection img {
 60 |   width: 100%;
 61 | }
 62 | .ImageSection > .addClassForBg {
 63 |   box-shadow: none;
 64 |   text-align: center;
 65 |   height: 80%;
 66 | }
 67 | 
 68 | .ImageSection > div > .addClassForImg {
 69 |   border-radius: 50%;
 70 |   width: 50%;
 71 |   height: 45%;
 72 |   box-shadow: 0 4px 8px 0 rgba(2, 2, 2, 0.1), 0 6px 20px 0 rgba(7, 7, 7, 0.1);
 73 | }
 74 | .ImageSection > .addClassForBg > .addClassForImg {
 75 |   height: 48%;
 76 | }
 77 | 
 78 | @media screen and (max-width: 680px) {
 79 |   .Transmission {
 80 |     height: auto;
 81 |   }
 82 | 
 83 |   .TextSection {
 84 |     width: 90%;
 85 |     height: 30%;
 86 |     display: flex;
 87 |   }
 88 |   .TextSection h3 {
 89 |     font-size: 15px;
 90 |   }
 91 |   .TextSection h1 {
 92 |     font-size: 30px;
 93 |   }
 94 |   .TextSection p {
 95 |     font-size: 16px;
 96 |   }
 97 |   .ImageSection {
 98 |     flex-direction: column;
 99 |   }
100 |   .ImageSection > div {
101 |     width: 90%;
102 |     margin: 20px 0;
103 |   }
104 | 
105 |   .ImageSection h3 {
106 |     color: #1468cd;
107 |     margin: 5% 5% 0% 5%;
108 |   }
109 |   .ImageSection p {
110 |     margin: 3% 5% 0% 5%;
111 |   }
112 |   .ImageSection img {
113 |     width: 100%;
114 |   }
115 |   .ImageSection > .addClassForBg {
116 |     box-shadow: none;
117 |     text-align: center;
118 |     height: 80%;
119 |   }
120 | 
121 |   .ImageSection > div > .addClassForImg {
122 |     border-radius: 50%;
123 |     width: 50%;
124 |     height: 45%;
125 |     box-shadow: 0 4px 8px 0 rgba(2, 2, 2, 0.1), 0 6px 20px 0 rgba(7, 7, 7, 0.1);
126 |   }
127 |   .ImageSection > .addClassForBg > .addClassForImg {
128 |     height: 48%;
129 |   }
130 | }
131 | 


--------------------------------------------------------------------------------
/src/UI/ReusablePage/ReusablePage.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import styling from "./Reusable.module.css";
 3 | 
 4 | export default function Transmission(props) {
 5 |   return (
 6 |     <div id="spread" className={styling.Transmission}>
 7 |       <div className={styling.TextSection}>
 8 |         <h3>{props.subHeading}</h3>
 9 |         <h1>{props.heding}</h1>
10 |         <p>{props.textHeading}</p>
11 |       </div>
12 |       <div className={styling.ImageSection}>
13 |         <div
14 |           className={props.addClassForMultiple ? styling.addClassForBg : null}
15 |         >
16 |           <img
17 |             src={props.imageSection1.image}
18 |             className={props.addClassForImg ? styling.addClassForImg : null}
19 |             alt=""
20 |             srcset=""
21 |           />
22 | 
23 |           <h3>{props.imageSection1.heading}</h3>
24 |           <p>{props.imageSection1.text}</p>
25 |         </div>
26 |         <div
27 |           className={props.addClassForMultiple ? styling.addClassForBg : null}
28 |         >
29 |           <img
30 |             src={props.imageSection2.image}
31 |             className={props.addClassForImg ? styling.addClassForImg : null}
32 |             alt=""
33 |             srcset=""
34 |           />
35 | 
36 |           <h3>{props.imageSection2.heading}</h3>
37 |           <p>{props.imageSection2.text}</p>
38 |         </div>
39 |         <div
40 |           className={props.addClassForMultiple ? styling.addClassForBg : null}
41 |         >
42 |           <img
43 |             src={props.imageSection3.image}
44 |             className={props.addClassForImg ? styling.addClassForImg : null}
45 |             alt=""
46 |             srcset=""
47 |           />
48 | 
49 |           <h3>{props.imageSection3.heading}</h3>
50 |           <p>{props.imageSection3.text}</p>
51 |         </div>
52 |         {props.addClassForMultiple && !props.addClassForSix ? (
53 |           <div
54 |             className={props.addClassForMultiple ? styling.addClassForBg : null}
55 |           >
56 |             <img
57 |               src={props.imageSection4.image}
58 |               className={props.addClassForImg ? styling.addClassForImg : null}
59 |               alt=""
60 |               srcset=""
61 |             />
62 | 
63 |             <h3>{props.imageSection4.heading}</h3>
64 |             <p>{props.imageSection4.text}</p>
65 |           </div>
66 |         ) : null}
67 |       </div>
68 |     </div>
69 |   );
70 | }
71 | 


--------------------------------------------------------------------------------
/src/images/Cover-Page/main-image.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/suhelhasan/project-covid/aee09d30a75ad10322bd4b22ef05d45154aaccf2/src/images/Cover-Page/main-image.png


--------------------------------------------------------------------------------
/src/images/Handwash/hand-1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/suhelhasan/project-covid/aee09d30a75ad10322bd4b22ef05d45154aaccf2/src/images/Handwash/hand-1.png


--------------------------------------------------------------------------------
/src/images/Handwash/hand-2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/suhelhasan/project-covid/aee09d30a75ad10322bd4b22ef05d45154aaccf2/src/images/Handwash/hand-2.png


--------------------------------------------------------------------------------
/src/images/Handwash/hand-3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/suhelhasan/project-covid/aee09d30a75ad10322bd4b22ef05d45154aaccf2/src/images/Handwash/hand-3.png


--------------------------------------------------------------------------------
/src/images/Handwash/hand-4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/suhelhasan/project-covid/aee09d30a75ad10322bd4b22ef05d45154aaccf2/src/images/Handwash/hand-4.png


--------------------------------------------------------------------------------
/src/images/Handwash/hand-5.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/suhelhasan/project-covid/aee09d30a75ad10322bd4b22ef05d45154aaccf2/src/images/Handwash/hand-5.png


--------------------------------------------------------------------------------
/src/images/Handwash/hand-6.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/suhelhasan/project-covid/aee09d30a75ad10322bd4b22ef05d45154aaccf2/src/images/Handwash/hand-6.png


--------------------------------------------------------------------------------
/src/images/Not-Found/404.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/suhelhasan/project-covid/aee09d30a75ad10322bd4b22ef05d45154aaccf2/src/images/Not-Found/404.png


--------------------------------------------------------------------------------
/src/images/Protect/advice1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/suhelhasan/project-covid/aee09d30a75ad10322bd4b22ef05d45154aaccf2/src/images/Protect/advice1.png


--------------------------------------------------------------------------------
/src/images/Protect/advice2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/suhelhasan/project-covid/aee09d30a75ad10322bd4b22ef05d45154aaccf2/src/images/Protect/advice2.png


--------------------------------------------------------------------------------
/src/images/Protect/advice3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/suhelhasan/project-covid/aee09d30a75ad10322bd4b22ef05d45154aaccf2/src/images/Protect/advice3.png


--------------------------------------------------------------------------------
/src/images/Protect/advice4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/suhelhasan/project-covid/aee09d30a75ad10322bd4b22ef05d45154aaccf2/src/images/Protect/advice4.png


--------------------------------------------------------------------------------
/src/images/Symptom/symptom1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/suhelhasan/project-covid/aee09d30a75ad10322bd4b22ef05d45154aaccf2/src/images/Symptom/symptom1.png


--------------------------------------------------------------------------------
/src/images/Symptom/symptom2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/suhelhasan/project-covid/aee09d30a75ad10322bd4b22ef05d45154aaccf2/src/images/Symptom/symptom2.png


--------------------------------------------------------------------------------
/src/images/Symptom/symptom3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/suhelhasan/project-covid/aee09d30a75ad10322bd4b22ef05d45154aaccf2/src/images/Symptom/symptom3.png


--------------------------------------------------------------------------------
/src/images/Take-Steps/whatiscovid.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/suhelhasan/project-covid/aee09d30a75ad10322bd4b22ef05d45154aaccf2/src/images/Take-Steps/whatiscovid.png


--------------------------------------------------------------------------------
/src/images/Transmission/contacting.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/suhelhasan/project-covid/aee09d30a75ad10322bd4b22ef05d45154aaccf2/src/images/Transmission/contacting.png


--------------------------------------------------------------------------------
/src/images/Transmission/cough.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/suhelhasan/project-covid/aee09d30a75ad10322bd4b22ef05d45154aaccf2/src/images/Transmission/cough.png


--------------------------------------------------------------------------------
/src/images/Transmission/person.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/suhelhasan/project-covid/aee09d30a75ad10322bd4b22ef05d45154aaccf2/src/images/Transmission/person.png


--------------------------------------------------------------------------------
/src/images/do-donts/donts-a.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/suhelhasan/project-covid/aee09d30a75ad10322bd4b22ef05d45154aaccf2/src/images/do-donts/donts-a.png


--------------------------------------------------------------------------------
/src/images/do-donts/donts-b.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/suhelhasan/project-covid/aee09d30a75ad10322bd4b22ef05d45154aaccf2/src/images/do-donts/donts-b.png


--------------------------------------------------------------------------------
/src/images/do-donts/donts-c.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/suhelhasan/project-covid/aee09d30a75ad10322bd4b22ef05d45154aaccf2/src/images/do-donts/donts-c.png


--------------------------------------------------------------------------------
/src/images/do-donts/dos-a.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/suhelhasan/project-covid/aee09d30a75ad10322bd4b22ef05d45154aaccf2/src/images/do-donts/dos-a.png


--------------------------------------------------------------------------------
/src/images/do-donts/dos-b.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/suhelhasan/project-covid/aee09d30a75ad10322bd4b22ef05d45154aaccf2/src/images/do-donts/dos-b.png


--------------------------------------------------------------------------------
/src/images/do-donts/dos-c.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/suhelhasan/project-covid/aee09d30a75ad10322bd4b22ef05d45154aaccf2/src/images/do-donts/dos-c.png


--------------------------------------------------------------------------------
/src/images/do-donts/protect.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/suhelhasan/project-covid/aee09d30a75ad10322bd4b22ef05d45154aaccf2/src/images/do-donts/protect.png


--------------------------------------------------------------------------------
/src/images/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/suhelhasan/project-covid/aee09d30a75ad10322bd4b22ef05d45154aaccf2/src/images/logo.png


--------------------------------------------------------------------------------
/src/images/updates-logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/suhelhasan/project-covid/aee09d30a75ad10322bd4b22ef05d45154aaccf2/src/images/updates-logo.png


--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |   margin: 0;
 3 |   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
 4 |     "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
 5 |     sans-serif;
 6 |   -webkit-font-smoothing: antialiased;
 7 |   -moz-osx-font-smoothing: grayscale;
 8 | }
 9 | 
10 | code {
11 |   font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
12 |     monospace;
13 | }
14 | html {
15 |   scroll-behavior: smooth;
16 | }
17 | 


--------------------------------------------------------------------------------
/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 * as serviceWorker from "./serviceWorker";
 6 | import { BrowserRouter } from "react-router-dom";
 7 | 
 8 | ReactDOM.render(
 9 |   <React.StrictMode>
10 |     <BrowserRouter>
11 |       <App />
12 |     </BrowserRouter>
13 |   </React.StrictMode>,
14 |   document.getElementById("root")
15 | );
16 | 
17 | serviceWorker.unregister();
18 | 


--------------------------------------------------------------------------------
/src/serviceWorker.js:
--------------------------------------------------------------------------------
  1 | // This optional code is used to register a service worker.
  2 | // register() is not called by default.
  3 | 
  4 | // This lets the app load faster on subsequent visits in production, and gives
  5 | // it offline capabilities. However, it also means that developers (and users)
  6 | // will only see deployed updates on subsequent visits to a page, after all the
  7 | // existing tabs open on the page have been closed, since previously cached
  8 | // resources are updated in the background.
  9 | 
 10 | // To learn more about the benefits of this model and instructions on how to
 11 | // opt-in, read https://bit.ly/CRA-PWA
 12 | 
 13 | const isLocalhost = Boolean(
 14 |   window.location.hostname === 'localhost' ||
 15 |     // [::1] is the IPv6 localhost address.
 16 |     window.location.hostname === '[::1]' ||
 17 |     // 127.0.0.0/8 are considered localhost for IPv4.
 18 |     window.location.hostname.match(
 19 |       /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
 20 |     )
 21 | );
 22 | 
 23 | export function register(config) {
 24 |   if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
 25 |     // The URL constructor is available in all browsers that support SW.
 26 |     const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);
 27 |     if (publicUrl.origin !== window.location.origin) {
 28 |       // Our service worker won't work if PUBLIC_URL is on a different origin
 29 |       // from what our page is served on. This might happen if a CDN is used to
 30 |       // serve assets; see https://github.com/facebook/create-react-app/issues/2374
 31 |       return;
 32 |     }
 33 | 
 34 |     window.addEventListener('load', () => {
 35 |       const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
 36 | 
 37 |       if (isLocalhost) {
 38 |         // This is running on localhost. Let's check if a service worker still exists or not.
 39 |         checkValidServiceWorker(swUrl, config);
 40 | 
 41 |         // Add some additional logging to localhost, pointing developers to the
 42 |         // service worker/PWA documentation.
 43 |         navigator.serviceWorker.ready.then(() => {
 44 |           console.log(
 45 |             'This web app is being served cache-first by a service ' +
 46 |               'worker. To learn more, visit https://bit.ly/CRA-PWA'
 47 |           );
 48 |         });
 49 |       } else {
 50 |         // Is not localhost. Just register service worker
 51 |         registerValidSW(swUrl, config);
 52 |       }
 53 |     });
 54 |   }
 55 | }
 56 | 
 57 | function registerValidSW(swUrl, config) {
 58 |   navigator.serviceWorker
 59 |     .register(swUrl)
 60 |     .then(registration => {
 61 |       registration.onupdatefound = () => {
 62 |         const installingWorker = registration.installing;
 63 |         if (installingWorker == null) {
 64 |           return;
 65 |         }
 66 |         installingWorker.onstatechange = () => {
 67 |           if (installingWorker.state === 'installed') {
 68 |             if (navigator.serviceWorker.controller) {
 69 |               // At this point, the updated precached content has been fetched,
 70 |               // but the previous service worker will still serve the older
 71 |               // content until all client tabs are closed.
 72 |               console.log(
 73 |                 'New content is available and will be used when all ' +
 74 |                   'tabs for this page are closed. See https://bit.ly/CRA-PWA.'
 75 |               );
 76 | 
 77 |               // Execute callback
 78 |               if (config && config.onUpdate) {
 79 |                 config.onUpdate(registration);
 80 |               }
 81 |             } else {
 82 |               // At this point, everything has been precached.
 83 |               // It's the perfect time to display a
 84 |               // "Content is cached for offline use." message.
 85 |               console.log('Content is cached for offline use.');
 86 | 
 87 |               // Execute callback
 88 |               if (config && config.onSuccess) {
 89 |                 config.onSuccess(registration);
 90 |               }
 91 |             }
 92 |           }
 93 |         };
 94 |       };
 95 |     })
 96 |     .catch(error => {
 97 |       console.error('Error during service worker registration:', error);
 98 |     });
 99 | }
100 | 
101 | function checkValidServiceWorker(swUrl, config) {
102 |   // Check if the service worker can be found. If it can't reload the page.
103 |   fetch(swUrl, {
104 |     headers: { 'Service-Worker': 'script' },
105 |   })
106 |     .then(response => {
107 |       // Ensure service worker exists, and that we really are getting a JS file.
108 |       const contentType = response.headers.get('content-type');
109 |       if (
110 |         response.status === 404 ||
111 |         (contentType != null && contentType.indexOf('javascript') === -1)
112 |       ) {
113 |         // No service worker found. Probably a different app. Reload the page.
114 |         navigator.serviceWorker.ready.then(registration => {
115 |           registration.unregister().then(() => {
116 |             window.location.reload();
117 |           });
118 |         });
119 |       } else {
120 |         // Service worker found. Proceed as normal.
121 |         registerValidSW(swUrl, config);
122 |       }
123 |     })
124 |     .catch(() => {
125 |       console.log(
126 |         'No internet connection found. App is running in offline mode.'
127 |       );
128 |     });
129 | }
130 | 
131 | export function unregister() {
132 |   if ('serviceWorker' in navigator) {
133 |     navigator.serviceWorker.ready
134 |       .then(registration => {
135 |         registration.unregister();
136 |       })
137 |       .catch(error => {
138 |         console.error(error.message);
139 |       });
140 |   }
141 | }
142 | 


--------------------------------------------------------------------------------
/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/extend-expect';
6 | 


--------------------------------------------------------------------------------