HelpingUkraine/index.html at master · craigsw86/HelpingUkraine · 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
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Helping Ukraine</title>
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@1,900&display=swap"
      rel="stylesheet"
    />
    <link
      href="https://fonts.googleapis.com/css2?family=Brygada+1918&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <header>
      <div class="flag">
        <div class="flagStripe">
          <h1
            id="websiteTitle"
            href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@1,900&display=swap"
            rel="stylesheet"
          >
            "Слава Україні!"
          </h1>
        </div>

        <div class="flagStripe">
          <h2>
            This is another great website for donating to Ukraine to help the
            war effort!
          </h2>
          <h2>(What would you be willing to donate to the cause?)</h2>
        </div>
      </div>
    </header>

    <div class="grid-container">
      <div class="grid-item tooltip">
        Food
        <span class="tooltip-text-1"
          >All donated Food MUST be sealed. Fresh produce is accepted, but MUST
          be kept well-preserved during the trip to Ukraine or Poland.</span
        >
      </div>
      <div class="grid-item tooltip">
        Medical Supplies
        <span class="tooltip-text-1"
          >NO OPENED CONTAINERS OF PILLS OR OTHER MEDICINES!</span
        >
      </div>
      <div class="grid-item tooltip">
        Computers & Electronics
        <span class="tooltip-text-1"
          >Any donated Computers and other Electronics MUST be wiped clean of
          all data from previous owner, be in reasonable working condition, and
          come with power cables.</span
        >
      </div>
      <div class="grid-item tooltip">
        Clothing
        <span class="tooltip-text-1"
          >Any donated clothing MUST be clean and not have too many holes. NO
          USED UNDERWEAR; however, we will accept underwear still in the
          package.</span
        >
      </div>
      <div class="grid-item tooltip">
        Cars
        <span class="tooltip-text-1"
          >Any donated cars MUST be Diesel and have at least 2.1L tank. Any
          vehicles with the driving wheel on the righthand side because it comes
          from a country where people drive on the left side of the road (i.e.
          the United Kingdom, Cyprus, etc.) are a plus. However, pickup trucks
          are HIGH PRIORITY because they are multipurpose.</span
        >
      </div>
      <div class="grid-item tooltip">
        Other
        <span class="tooltip-text-1"
          >Do you have anything else which you would like to donate? Reach out
          to us to tell us, and we'll let you know if we can use it!</span
        >
      </div>
    </div>
    <div class="grid-links">
      <div class="grid-item tooltip">
        <a href="https://www.razomforukraine.org/">Razom for Ukraine</a>
        <span class="tooltip-text-2"
          >Here is a great organization for helping Ukraine and Ukrainian
          refugees!</span
        >
      </div>
      <div class="grid-item tooltip">
        <a href="https://car4ukraine.com/">Car4Ukraine</a>
        <span class="tooltip-text-2"
          >These folks have acquired hundreds of cars and fixed them up for
          battle and evacuations, saving countless lives!</span
        >
      </div>
      <div class="grid-item tooltip">
        <a href="https://landmineremoval.org/">Landmine Removal Project</a>
        <span class="tooltip-text-2"
          >Help save the lives of people still in Ukraine, as well as their
          livelihoods!</span
        >
      </div>
    </div>
    <div class="filloutForm">
      <h3>Please fill out this form with the required registration!</h3>
      <form method="post" action="mailto:craig.s.weinstein@gmail.com"></form>
      <fieldset>
        <label for="first-name"
          >Enter your First Name:
          <input id="first-name" name="first-name" type="text required"
        /></label>
        <label for="last-name"
          >Enter your Last Name:
          <input id="last-name" name="last-name" type="text required"
        /></label>
        <label for="email"
          >Enter Your Email Address:
          <input id="email" name="email" type="email" required
        /></label>
      </fieldset>
      <fieldset class="dropdown">
        <label for="referrer">How did you hear about us?</label>
        <select id="referrer" name="referrer">
          <option value="">(SELECT ONE)</option>
          <option value="1">This Website</option>
          <option value="2">Website Administrator</option>
          <option value="3">News Outlets</option>
          <option value="4">Other</option>
        </select>
        <!-- <label
          id="description"
          rows="3"
          cols="30"
          placeholder="I can donate..."
        ></label> -->
        <input type="submit" class="button" value="Submit">
      </fieldset>
    </div>
    <footer>
      <p class="footertext">
        (Background Patterns <a href="http://www.freepik.com">Designed by GarryKillian / Freepik</a>)
      </p>
      <p class="footertext">
        If you have any questions, you can contact us
        <a href="___">here</a> anytime.
      </p>
      <p>© 2022 - 2023</p>
    </footer>
  </body>
</html>