-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
128 lines (122 loc) · 5.71 KB
/
index.html
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 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>Макет 5</title>
<link rel = "stylesheet" type = "text/css" href="css/normalize.css">
<link rel = "stylesheet" type = "text/css" href="css/style.css">
<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=Work+Sans:wght@400;500;600&display=swap" rel="stylesheet">
<style>
</style>
</head>
<body>
<header>
<a margin-left: 15px href="#">
<img margin-left: 15px class="logoImg" src = "images/logo.png" alt = "На главную" width="113" height="35" >
</a>
<img class="menuImg" src = "images/menu.svg" alt = "Меню">
</header>
<main>
<section class = "section1">
<div class = "div-section1">
<box1>
<h1 class='h1center'>VOLUNTEERS</h1>
<h2 class = 'left'>Make magical math moments in your community.</h2>
<p class='left'>Mathopolis relies on volunteers to help create magical math moments for kids. We have a number of ways to get involved, from playing math puzzles in a virtual classroom to hosting your own festival. </p>
</box1>
<img class = 'GrannywithblackImg center' src = "images/Granny with black girl.png" alt = "VOLUNTEERS" width="283" height = "261">
</div>
</section>
<section class = "section2">
<h2 class = 'center1'>TESTIMONIALS</h2>
<p class="Author">I am a biochemist, but I loved helping students explore a logic puzzle about a pirate captain and crew (complete with pirate hats).</p>
<p>David H.</p>
<p>Festival Volunteer</p>
<div class = 'radiobuttons'>
<label color: #FFFFFF><input type="radio" name = "slider"></label>
<label><input type="radio" name = "slider"></label>
<label><input type="radio" name = "slider"></label>
</div>
</section>
<section class = "section3">
<div class = "div-section3">
<img class = "image-section3" src = "images/BlackGirlWithChess.png" alt = "PICTURE" width = "262" height = "262">
<box class = "lefter">
<h2 class='center1'>LEAD AN ACTIVITY</h2>
<p class='box-section3'>Play a puzzle with kids at a virtual math circle or in-person festival. Volunteers lead our puzzles by encouraging independent exploration and asking strategic questions to help with deeper thinking.</p>
<a href="#" class="center1 whiteh3">
<button class="button">
<a href = "tel:+79166189553"><p class = "button_text">ATTEND THE WORKSHOP</p></a>
</button>
</box>
</div>
</a>
</section>
<section class = "section4">
<div class = "div-section4">
<img class = "image-section4" src = "images/AdultBlackGirl.png" alt="PICTURE" width="300px">
<div>
<h2 class = 'whiteh2 lefter'>RUN A CLASSROOM VISIT</h2>
<p class = 'center whiteh3 lefter'>Lead virtual classroom visits in your neighborhood elementary or middle school. We train volunteers (including high school and college students) on how to manage this virtual outreach activity. The only thing you need to bring is an open mind and the desire to bring fun math into a kid’s life.</p>
</div>
</div>
</section>
<section class = "section5">
<div class = "div-section5">
<img class = "image-section5" src = "images/People.png" alt = "PICTURE">
<div class = "lefter">
<h2 class = "center1">HOST A FESTIVAL</h2>
<p class = "lefter">A math festival is a one-time event where children gather and explore math through puzzles. Our festivals are hosted by volunteers who want to connect the children in their community with a joyful math experience. We have all the resources you need to host a festival. </p>
<button class="button">
<a href = "mailto:adam.natur@mail.ru"><p class = "button_text">LEARN MORE</p></a>
</button>
</div>
</div>
</section>
</main>
<footer>
<div class = "div-footer">
<div>
<img src = "images/BIGLOGO.png" alt="PICTURE">
<p class="footer-text lefter">We're a fiscally-sponsored project of a 501(c)3, Social and Environmental Entrepreneurs.</p>
</div>
<div class = "divlist">
<p>STUDENTS</p>
<p>PARENTS</p>
<p>TEACHERS</p>
<p>VOLUNTEERS</p>
<p>EVENTS</p>
<p>PUZZLES</p>
<p>ABOUT</p>
<p>NEWS</p>
<p>STORE</p>
<p>DONATE</p>
</ul>
</div>
<div>
<h3 class = 'center1'>Follow us:</h3>
<div class ='Links'>
<a href=""><img src = "images/TwitterLink.svg" alt = "Twitter"></a>
<a href="http://instagram.com"><img src = "images/InstagramLink.svg" alt = "Instagram"></a>
<a href="https://facebook.com/"><img src = "images/FacebookLink.svg" alt = "Facebook"></a>
<a href="https://www.youtube.com"><img src="images/YoutubeLink.svg" alt = "Youtube"></a>
</div>
<div class = "centering">
<button class="button">
<a href ="Form.html"><p class = "button_text">SUPPORT OUR CASES</p></a>
</button>
</div>
</div>
</div>
<p class="lefter"> © 2007–2022 Mathopolis</p> </div>
</footer>
</body>
</html>