https://jaimin-activist-toolkit-spp-student-standouts-2024-gwc-archive.replit.app/

1<!DOCTYPE html>
2<html>
3  <head>
4
5    <title>Activist Toolkit - JAIMIN</title>
6    <meta charset="utf-8" />
7	  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
8	  <meta name="viewport" content="width=device-width, initial-scale=1" />
9
10	  <!-- Link the webpage's stylesheet -->
11	  <link rel="stylesheet" href="/style_general.css" />
12    <link rel="stylesheet" href="/style_radio_btns.css" />
13    <link rel="stylesheet" href="/style_msg_btn.css" />
14    <link rel="stylesheet" href="/style_stat_btn.css" />
15    <link rel="stylesheet" href="/style_mq.css" />
16    <link rel="preconnect" href="https://fonts.googleapis.com">
17    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
18    <link href="https://fonts.googleapis.com/css2?family=Syne:[email protected]&display=swap" rel="stylesheet">
19
20	  <!-- Link the webpage's JavaScript file -->
21	  

21<script src="/script_home.js" defer></script>

21
22
23  </head>
24  
25<body> 
26  
27  <header>
28
29    <!-- Navigation Bar of Home Page -->
30    <nav>
31      <ul>
32        <li>
33          <a href="index.html">Home</a>
34        </li>
35        <li>
36          <a href="myths.html">Myths</a>
37        </li>
38        <li>
39          <a href="take-action.html">Take Action</a>
40        </li>
41        <li>
42          <a href="about.html">About</a>
43        </li>
44      </ul>
45    </nav>
46
47    <!-- Title of Home Page -->
48    <h1>Homelessness in America. It’s everywhere.</h1>
49
50    <!-- Sliding Images on the Home Page -->
51    <div class="home-imgs">
52      <div class="home-imgs-slide">
53        <img src="assets/Homeless Once I Was Like You.jpg"
54             alt="A gray picture of a homeless person sitting on the ground begging for money, with a sign saying 'Once I was like you' in front of them."/>
55        <img src="assets/Homeless Purple Gloves.jpg"
56             alt="A homeless person's hand is shown holding a cardboard sign and wearing purple gloves with a lot of holes."/>
57        <img src="assets/Homeless on Bench.jpg"
58             alt="A homeless person sleeping on a stone bench in a city environment with scaffolding behind them."/>
59        <img src="assets/Homeless with Cart.jpg"
60             alt="A homeless person crouching in a station with all their belongings around them, including bags and umbrellas in shopping cart."/>
61      </div>
62
63      <div class="home-imgs-slide">
64        <img src="assets/Homeless Once I Was Like You.jpg"
65             alt="A gray picture of a homeless person sitting on the ground begging for money, with a sign saying 'Once I was like you' in front of them."/>
66        <img src="assets/Homeless Purple Gloves.jpg"
67             alt="A homeless person's hand is shown holding a cardboard sign and wearing purple gloves with a lot of holes."/>
68        <img src="assets/Homeless on Bench.jpg"
69             alt="A homeless person sleeping on a stone bench in a city environment with scaffolding behind them."/>
70        <img src="assets/Homeless with Cart.jpg"
71             alt="A homeless person crouching in a station with all their belongings around them, including bags and umbrellas in shopping cart."/>
72      </div>
73    </div>
74    
75  </header>  
76
77<main>
78
79  <!-- Subheading #1 of Home Page -->
80  <h2>Let's get to know you.</h2>
81
82  <div class="flex-container">
83    
84  <!-- Text Input Field on Home Page -->
85    <div class="flex-item" id="name-item">
86      <label for="name">What's your name?</label>
87      <br>
88      <input type="text" id="myText"><br>
89    </div>
90
91    <div class="flex-item" id="choice-item">
92
93  <!-- Radio Buttons Input Field on Home Page -->
94      <label for="choices">How much do you know about this issue?</label>
95      <br>
96      
97      <div class="radio-container">  
98        
99        <div class="radio-option">
100          <input type="radio" id="most" name="choice-type" 
101                 value="Very knowledgeable">
102          <label for="most">Very knowledgeable</label>
103        </div>
104        
105        <div class="radio-option">
106          <input type="radio" id="somewhat" name="choice-type" 
107                 value="Somewhat knowledgeable">
108          <label for="somewhat">Somewhat knowledgeable</label>
109        </div>
110        
111        <div class="radio-option">
112          <input type="radio" id="little" name="choice-type" 
113                 value="Little to no knowledge">
114          <label for="little">Little to no knowledge</label>
115        </div>
116        
117      </div>
118      
119    </div>
120
121  <!-- Message Button on Home Page -->
122    <div class="flex-item" id="message-item">
123      <button id="myButton">Click to see message</button>
124      <p id="results"></p>
125    </div>
126    
127  </div>
128
129  <!-- Subheading #2 of Home Page -->
130  <header>
131    <h2>Let's get the stats.</h2>
132  </header>
133
134  <!-- Fact Generator on Home Page -->
135  <div class="stat-container">
136    <button id="statButton">Click to reveal a new statistic</button>
137    <p id="stat">According to the January 2022 PIT Count, 582,462 people were experiencing homelessness across America, which is about 18 out of every 10,000 people</p>
138  </div>
139
140  <!-- Link Reference on Home Page -->
141  <p class="underReference">» Facts from the <a href="https://endhomelessness.org/homelessness-in-america/homelessness-statistics/state-of-homelessness" target="_blank" rel="noopener noreferrer">National Alliance to End Homelessness</a> «</p>
142  
143</main>
144    
145</body>
146</html>