Problem_Interactive/Problem.html at master · luxii5/Problem_Interactive · 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
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
<!DOCTYPE html>
  <html>
    <head>
      <!--Import Google Icon Font-->
      <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
      <!--Import materialize.css-->
      <link type="text/css" rel="stylesheet" href="css/materialize.min.css"  media="screen,projection"/>
      <link type="text/css" rel="stylesheet" href="css/propio.css"  media="screen,projection"/>

      <!--Let browser know website is optimized for mobile-->
      <meta name="viewport" content="width=device-width, initial-scale=1.0"/>


      <div class="navbar-fixed">
        <nav class="black">
        </nav>
      </div> <!-- navbar fixed -->


      <ul id="slide-out" class="sidenav">
      <li><div class="user-view">
        <div class="background">
          <img src="images/office.jpg">
        </div>
        <a href="#user"><img class="circle" src="images/yuna.jpg"></a>
        <a href="#name"><span class="white-text name">John Doe</span></a>
        <a href="#email"><span class="white-text email">jdandturk@gmail.com</span></a>
      </div></li>
      <li><a href="#!"><i class="material-icons">cloud</i>First Link With Icon</a></li>
      <li><a href="#!">Second Link</a></li>
      <li><div class="divider"></div></li>
      <li><a class="subheader">Subheader</a></li>
      <li><a class="waves-effect" href="#!">Third Link With Waves</a></li>
    </ul>
    <a href="#" data-target="slide-out" class="sidenav-trigger"><i class="material-icons">menu</i></a>


    </head>

    <body>

      <img class="responsive-img" src="http://info7.blob.core.windows.net.optimalcdn.com/images/2016/11/06/550215_yakarta_indonesia_trafico.jpg"style="width:100%">
      <div class="container">

        <div class="row">
          <div class="col s12">
            <h1 class="center">Traffic congestion</h1>
            <h1 class="center sub">Bad for everyone</h2>
          </div>
        </div>


        <div class="row"> <!-- Problem definition -->
          <div class="col s12">
            <p class="center">
              Heavy traffic in big cities is an issue we have to deal with every day. The excess of motorized
              vehicles keeps us from getting to work in time, leaves a big carbon footprint, stresses our cars’
              engines, increases chances of collision, and overwhelms even the best of us.

              There are other alternatives to cars that are able to lighten the streets,
              but must people don’t invest on them. What can we do?

            </p>
          </div>
        </div> <!-- Problem definition -->


        <div class="row"> <!-- Social impact -->
          <div class="col s12">
            <p>It is a non-productive activity we deal with daily.</p>
            <p>Delays when getting to work or home.</p>
            <p>It leaves you with less leisure time because you take up extra time to get to your destination.</p>
            <p>Increases fuel consumption of your vehicle due to continuous braking and acceleration.</p>
            <p>Higher emission of harmful gases into the atmosphere.</p>
            <p>Tight space between cars increases the possibility of road accidents.</p>
            <p>It drives us crazy!</p>
          </div>
        </div> <!-- Social impact -->


      </div>


      <!--JavaScript at end of body for optimized loading-->
      <script type="text/javascript" src="js/materialize.js"></script>

      <script>
        document.addEventListener('DOMContentLoaded', function() {
        var elems = document.querySelectorAll('.sidenav');
        var instances = M.Sidenav.init(elems);
        });
      </script>


    </body>
  </html>