CoffeeBridges/introduction_page.html at main · edwinhernandezgomez/CoffeeBridges · 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
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
<!DOCTYPE html>
<html>
    <style>
        * {
          box-sizing: border-box;
          margin: 0;
          padding: 0;
        }

        .container {
          align-self: center;
          max-width: 800px;
          margin: 0 auto;
          padding: 20px;
        }

        h1 {
          color: #4D2D05;
          font-family: Verdana, sans-serif;
          font-size: 36px;
          text-align: center;
        }

        h2 {
          color: #4D2D05;
          margin: 16px;
          font-family: Verdana, sans-serif;
          font-size: 20px;
          text-align: center;
        }

        p {
          color: #8C6C4C;
          font-family: Verdana, sans-serif;
          font-size: 18px;
          line-height: 1.5;
          margin: 10px 0;
        }

        body {
          background-color: #D6B49D;
        }

        /* Three columns side by side */
        .column {
          float: left;
          width: 12.5%;
          margin-bottom: 16px;
          padding: 0 8px;
        }

        /* Display the columns below each other instead of side by side on small screens */
        @media screen and (max-width: 650px) {
          .column {
            width: 100%;
            display: block;
          }
        }

        /* Add some shadows to create a card effect */
        .card {
          box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
        }

        /* Some left and right padding inside the container */
        .container {
          padding: 0 16px;
        }

        /* Clear floats */
        .container::after, .row::after {
          content: "";
          clear: both;
          display: table;
        }

        .title {
          color: #4D2D05;
        }
      </style>
<head>
  <meta charset="UTF-8">
  <title>Bridges for coffee</title>

</head>
<body>
  <div class="container">
    <img src="https://i.imghippo.com/files/0t4PJ1713651566.png"  alt="Coffee" border-radius="10" width="540" height="auto";
    <h1></h1>
        </div>
    <!-- sample rectangle -->

<h1>95% of the world is not within a 5km range of fresh coffee, we set out to solve this problem.</h1>
    <p>We build a web application to solve this issue, It automates the process of building bridge, directly from an understandable maps environment, ensuring that even your 80 year old neightbour can get its coffee </p>
    <p>Our app, automates the bridge building process, and cannot be made possible without our extensive team of experts. From students to foundation designers, to structural engineers. We automated ourselfs away.</p>
    <h1>The founder, and his coffee companions</h1>

    <div class="row">
        <div class="column">
          <div class="card">
            <img src="https://i.ibb.co/Nxt1cky/Mugshotvlad.jpg" alt="Vlad" style="width:100%" width="464" height="464">
            <div class="container">
              <h2>Volodymyr "The citybuilder" Opanasiuk</h2>
              <p class="title">CEO &amp; Founder</p>
              <p>The driver behind our team, loves to play citybuilder in his freetime. We are afraid he will use the tool too much, and London will be full of bridges soon.</p>
            </div>
          </div>
        </div>

        <div class="column">
            <div class="card">
              <img src="https://i.ibb.co/MNksF1y/edwin.jpg" alt="Vlad" style="width:100%">
              <div class="container">
                <h2>Edwin Santiago "The shaper" Hernandez Gomez</h2>
                <p class="title">Coffee drinker</p>
                <p>Edwin uses shapediver in his freetime to automate his coffeemachine, this gives him more time to salsadance, one of his favorite hobbies!</p>
              </div>
            </div>
          </div>

        <div class="column">
          <div class="card">
            <img src="https://i.ibb.co/Dt2FvmM/Giovanni.jpg" alt="Giovanni" style="width:100%">
            <div class="container">
              <h2>Giovanni "The Diffuser" Consiglio</h2>
              <p class="title">Coffee drinker</p>
              <p>Giovanni is the hardest worker of the bunch, after work the races on his motor, he loves coffee while watching motoGP</p>
            </div>
          </div>
        </div>

                <div class="column">
          <div class="card">
            <img src="https://i.ibb.co/cLGPqhQ/Kees.jpg" alt="Kan" style="width:100%">
            <div class="container">
              <h2>Kees "The printer" Leemeijer</h2>
              <p class="title">Coffee drinker</p>
              <p>Learns HTML and CSS at after 12:00, just for a stupid hackatron</p>
            </div>
          </div>
        </div>

        <div class="column">
            <div class="card">
              <img src="https://i.ibb.co/MRvhbbx/Matthijs.png" alt="Kan" style="width:100%"  width="464" height="464">
              <div class="container">
                <h2>Matthijs "Automates to drink more coffee"</h2>
                <p class="title">Coffee drinker</p>
                <p>Matthijs was born in python, He loves automating boring things, so he can have more time to drink coffee</p>
              </div>
            </div>
          </div>

          <div class="column">
            <div class="card">
              <img src="https://i.ibb.co/XppRbqf/Pablo.jpg" alt="Kan" style="width:100%">
              <div class="container">
                <h2>Pablo "the AI student" Nistal</h2>
                <p class="title">Coffee drinker</p>
                <p>The best performing student during the AEC+ Tech hackatron, An excellent padel player, A born hipster, this explains his love for overly expensive coffee</p>
              </div>
            </div>
          </div>

        <div class="column">
          <div class="card">
            <img src="https://i.ibb.co/rbZV3Sg/Sanjay.jpg" alt="John" style="width:100%">
            <div class="container">
              <h2>sanjay "The foundation" joshi</h2>
              <p class="title">Coffee drinker</p>
              <p>Sanjay, loves to climb plastic rocks in his freetime, while drinking coffee</p>
            </div>
          </div>
        </div>
        <div class="column">
            <div class="card">
              <img src="https://i.ibb.co/MBZ8Dbq/KAN.jpg" alt="John" style="width:100%">
              <div class="container">
                <h2>Kan "Expensive PDF guy" Shindo</h2>
                <p class="title">Coffee drinker</p>
                <p>The guy who makes the PDF's, so we can do the fun stuff, and have the money to buy coffee and build bridges</p>
              </div>
            </div>
          </div>
      </div>
</div>
</body>
</html>