DAFE1200FinalProject/challenge.html at master · mkmbaran/DAFE1200FinalProject · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" lang="en">
    <title>Urban CROPS</title>
    <link rel="stylesheet" href="styles.css"/>
    <meta http-equiv="ScreenOrientation" content="autoRotate:disabled">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,200;0,300;0,400;0,600;0,700;1,400&display=swap"
            rel="stylesheet"/>

    <link rel="stylesheet" href="styles-4k.css"
        media="screen and (min-device-width: 2560px">
    <link rel="stylesheet" href="styles-tablet.css"
        media="screen and (max-device-width: 1023px)">
    <link rel="stylesheet" href="styles-smartphone.css"
        media="screen and (max-device-width: 480px)">
</head>

<body>
<div class="fixed-top">
    <div class="brand">Urban CROPS</div>
    <nav>
        <a href="index.html">Home</a>
        <a href="challenge.html">Challenge</a>
        <a href="solution.html">Solution</a>
        <a href="sources.html">Sources</a>
    </nav>
</div>

<section id='city-mask'>
    <img src="./images/city-masks.jpg" alt="people who have mask during pandemic">
</section>

<section id="challenge">
    <h2>The challenge we face</h2>
    <p>The COVID-19 pandemic is one of the largest issues we have faced in the 21st century.
    The virus has single-handedly put major strains on the world economy, cost millions of people their jobs and main source of income, and has forced us to delay our environmental and climate concerns for the foreseeable future.
    In addition, our ever-growing urbanisation projects have put more and more people together in metropolitan areas, and rapidly increasing our demands for food and other necessities.
    As the cities and their populations grow, we move further and further away from the farms that supply our daily needs. In turn, this lack of direct access to food can lead to increased urban food insecurity and malnutrition in the future.
    <a class="source1" href="./sources.html#COVID"><sup>[1]</sup></a>
    </p>

    <h2>Hunger is a real issue for the urban poor</h2>
    <p>Low and irregular incomes make it hard for the urban poor to eat well. Inadequate housing that lacks safe storage space and irregular earnings force people to buy their food daily and in small quantities.
        Food prices in metropolitan areas are also ever growing. <a class="source1" href="./sources.html#sourceurbanpoor"><sup>[2]</sup></a></p>

    <h2>Food safety is a growing concern</h2>
    <p>There are ever growing concerns about using pesticide and other chemicals in food mass-production.
        The urban poor cannot afford organic produce, and to avoid stomach upsets they must wash vegetables several times, which is time and energy consuming where access to water is limited.
        <a class="source1" href="./sources.html#sourcefoodinsecurity"><sup>[3]</sup></a></p>

    <h2>Cities depend on natural resources</h2>
    <p>As the population of urban citizens increases the need for food in cities increases proportionally.</p>
    <p>As cities expand, they take fertile lands out of commission and withdraw more water, which places pressure on the agriculture system to be more efficient in its use of natural resources.
        <a class="source1" href="./sources.html#sourceurbanhunger"><sup>[4]</sup></a></p>
</section>

<footer>
    <span>© UrbanFarming 2020</span>
    <details class="center">
        <summary>Contact us</summary>
        Tlf: 004712121212 <br />
        E-mail: <a href="mailto:group30@urbancrops.com" target="_blank">group30@urbancrops.com</a>
    </details>
    <details class="right">
        <summary>Attributions</summary>
        All images downloaded from: <a href="https://stock.adobe.com/no/" target="_blank">stock adobe</a>
        </details>
</footer>

</body>