-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathaction.html
91 lines (75 loc) · 4.9 KB
/
action.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
<!DOCTYPE html>
<html>
<head>
<!-- title and code to allow fonts, datawrapper, etc to be used -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="HandheldFriendly" content="true">
<title>(G)-STEM</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<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=Istok+Web:wght@700&family=Nunito&display=swap" rel="stylesheet">
</head>
<!-- foundations for nav bar that links to other tabs-->
<body>
<div class="navBar">
<a class="navbarLogo" href="index.html">
<div class="logoImage">
<img class="logo" src="logo.png">
</div>
</a>
<a href="data.html" id="dataTab">Data</a>
<a href="resources.html" id="resourceTab">Resources</a>
<a href="action.html" id="actionTab">Take Action</a>
<a href="experiences.html" id="exTab">STEM Experiences</a>
<a href="about.html" id="aboutTab">About Us</a>
</div>
<h1 class = "actionTitle"> TAKE ACTION </h1>
<!-- scroll arrow that guides users and explains what appears on the page -->
<div class="scrollAction">
<div class="scroll__text">Resources to fight the gender gap</div>
<span class="scroll__line"></span>
</div>
<!-- our cards(resources) for anyone to look through -->
<h2 class = "anyoneTitle">FOR ANYONE</h2>
<div class = "anyoneInfo">
<div class = "anyoneInfo1">
<div class="anyoneHeader">Spread awareness of summer programs and camps</div>
There are many free (yes, free!) summer camps that are based on empowering girls to enter STEM. Some great programs include Kode With Klossy, Girls Who Code, Women in Engineering Summer Program (WIESP), and Women of Color Summer Engineering Camp.</div>
<div class = anyoneInfo2>
<div class="anyoneHeader">Highlight women role models</div>
75% of women do not have a role model in the STEM field! Why? This may be due to there not being many relatable role models for young girls! The few role models set too high of an expectation for girls. Our tip is to find someone who is about three steps ahead of you, so you can find inspiration to achieve your goals!
</div>
<div class = "anyoneInfo3">
<div class="anyoneHeader">Expose young women to different aspects of the fields</div>
There is more to computer science than sitting behind a computer all day and more to engineering than just math. Tell women about the creative aspects of the fields! </div>
</div>
<!-- our cards(resources) for students to look through -->
<h2 class = "studentTitle">FOR STUDENTS</h2>
<div class = "studentInfo">
<div class = "studentInfo1"> <div class="anyoneHeader">Start clubs to inspire girls to join STEM</div>
Establish female-inspiring STEM clubs at your high school! Girls Who Code and Society of Women Engineers have club applications in which students can start their own clubs based on the organization! </div>
<div class = "studentInfo2"> <div class="anyoneHeader">Build relationships with other girls interested in the field</div>
Collaborate with one another, form a community, and show other women that they can be a part of STEM! Building a strong and supportive community at your school can inspire women to join and make them feel that they have a safe space to pursue their dreams!
</div>
<div class = "studentInfo3"> <div class="anyoneHeader">Encourage your female peers to take computer science and engineering courses</div>
Some of your friends may be afraid to take these courses so encourage them! Tell them about your experiences!
</div>
</div>
<!-- our cards(resources) for schools to look through -->
<h2 class = "schoolTitle">FOR SCHOOLS</h2>
<div class = "schoolInfo">
<div class = "schoolInfo1">
<div class="anyoneHeader">Add a wider variety of computer science and engineering classes</div>
There needs to be more classes than just AP Computer Science Principles, AP Computer Science A, and the Principles of Engineering at public high schools. The field is so interdisciplinary! Add more hands-on classes! For example, UX/UI design and robotics classes.</div>
<div class = "schoolInfo2"> <div class="anyoneHeader">Provide encouragement and a supportive environment</div>
Support and encourage women in their abilities to pursue STEM! Tell girls about the STEM opportunities offered at school.</div>
<div class="schoolInfo3"> <div class="anyoneHeader">Invite female STEM guest speakers</div>
Give female students role models by inviting guest speakers to inspire them to join the fields!</div>
</div>
<script src="script.js"></script>
</body>
</html>