Skip to content

Commit 1e29614

Browse files
aileen-caileen-c
authored
Footer (#462)
* added user profile to team page * changed footer html and css * footer * fix typo --------- Co-authored-by: aileen7 <[email protected]>
1 parent 94f83d2 commit 1e29614

File tree

5 files changed

+229
-75
lines changed

5 files changed

+229
-75
lines changed

‎_includes/footer.html‎

Lines changed: 109 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -2,139 +2,188 @@
22
<div class="container container-restricted">
33
<div class="footer-content">
44
<div class="footer-aside">
5-
<h2 class="footer-title">ACM Teach LA</h2>
5+
<p class="logo">
6+
<img src="{{site.baseurl}}/img/teachLA_logo_light copy.svg" id="acm-tla-wordmark" alt="ACM Teach LA Wordmark" />
7+
</p>
68
<ul class="footer-links">
79
<li class="footer-link">
8-
<a class="icon" href="https://www.facebook.com/acmteachla" target="_blank" rel="noopener noreferrer">
9-
<span class="fab fa-facebook" aria-label="Facebook Logo & Link"></span>
10+
<a class="icon" href="https://github.com/uclaacm/teach-la-website" target="_blank" rel="noopener noreferrer">
11+
<span class="fab fa-github" aria-label="GitHub Logo & Repository"></span>
1012
</a>
1113
</li>
1214
<li class="footer-link">
13-
<a class="icon" href="https://github.com/uclaacm/teach-la-website" target="_blank" rel="noopener noreferrer">
14-
<span class="fab fa-github" aria-label="GitHub Logo & Repository"></span>
15+
<a class="icon" href="https://www.facebook.com/acmteachla" target="_blank" rel="noopener noreferrer">
16+
<span class="fab fa-facebook" aria-label="Facebook Logo & Link"></span>
1517
</a>
1618
</li>
1719
<li class="footer-link">
1820
<a class="icon" href="https://www.linkedin.com/company/acm-teach-la-acm-ucla" target="_blank" rel="noopener noreferrer">
1921
<span class="fab fa-linkedin" aria-label="LinkedIn Logo & Link"></span>
2022
</a>
2123
</li>
24+
<li class = "footer-link">
25+
<a class="icon" href="mailto: [email protected]" target="_blank" rel="noopener noreferrer">
26+
<span class="fas fa-envelope" aria-label="Email Logo & Link"></span>
27+
</a>
28+
<a href="mailto:[email protected]" target="_blank" rel="noopener noreferrer">
29+
</a>
30+
31+
</li>
2232
</ul>
23-
<p class="footer-link email">
24-
<a class="icon" href="mailto: [email protected]" target="_blank" rel="noopener noreferrer">
25-
<span class="fas fa-envelope" aria-label="Email Logo & Link"></span>
26-
</a>
27-
<a href="mailto:[email protected]" target="_blank" rel="noopener noreferrer">
28-
[email protected]
29-
</a>
30-
</p>
31-
<p class="footer-copyright">
32-
&copy; ACM @ UCLA 2019
33-
<br/>made with <span class="fa fa-heart animated-heartbeat" style="color:tomato" aria-label="animated heartbeat"></span>
34-
</p>
33+
3534
</div>
3635
<div class="footer-main">
3736
<div class="footer-col">
38-
<h3 class="footer-subtitle">Our Work</h3>
37+
<h3 class="footer-subtitle">about</h3>
3938
<ul class="footer-nav">
4039
<li>
41-
<a href="{{site.baseurl}}/classes">Classes</a>
40+
<a href="{{site.baseurl}}/about">our mission</a>
4241
</li>
4342
<li>
44-
<a href="{{site.baseurl}}/dev">Dev Projects</a>
43+
<a href="{{site.baseurl}}/about/#teacher-join">join us</a>
4544
</li>
4645
<li>
47-
<a href="{{site.editor_link}}" target="_blank" rel="noopener noreferrer">Editor</a>
46+
<a href="{{site.baseurl}}/about/#schedule">schedule</a>
4847
</li>
4948
</ul>
5049
</div>
5150
<div class="footer-col">
52-
<h3 class="footer-subtitle">Our Team</h3>
51+
<h3 class="footer-subtitle">blog</h3>
5352
<ul class="footer-nav">
5453
<li>
55-
<a href="{{site.baseurl}}/about">About</a>
54+
<a href="{{site.baseurl}}/blog">teach la blog</a>
5655
</li>
5756
<li>
58-
<a href="{{site.baseurl}}/blog">Blog</a>
57+
<a href="{{site.baseurl}}/reports">reports</a>
5958
</li>
6059
<li>
61-
<a href="{{site.baseurl}}/reports">Reports</a>
60+
<a href="{{site.baseurl}}/blog/teach-la-website/reflection/2022/09/21/board-reflections/">board reflections</a>
6261
</li>
62+
</ul>
63+
</div>
64+
65+
<div class="footer-col">
66+
<h3 class="footer-subtitle">dev</h3>
67+
<ul class="footer-nav">
6368
<li>
64-
<a href="{{site.baseurl}}/team">Team</a>
69+
<a href="{{site.baseurl}}/dev">about dev</a>
6570
</li>
6671
<li>
67-
<a href="{{site.baseurl}}/partners">Partners</a>
72+
<a href="{{site.baseurl}}/dev/#projects">dev projects</a>
73+
</li>
74+
<li>
75+
<a href="{{site.baseurl}}/dev/#WIP">in the works</a>
76+
</li>
77+
</ul>
78+
</div>
79+
80+
<div class="footer-col">
81+
<h3 class="footer-subtitle">team</h3>
82+
<ul class="footer-nav">
83+
<li>
84+
<a href="{{site.baseurl}}/team/#general-board">general board</a>
85+
</li>
86+
<li>
87+
<a href="{{site.baseurl}}/team/#dev-board">dev board</a>
88+
</li>
89+
<li>
90+
<a href="{{site.baseurl}}/team/#instructors-developers">instructors and developers</a>
6891
</li>
6992
</ul>
7093
</div>
7194

7295
{% for class in site.data.classes %}
73-
{% assign loopindex = forloop.index | modulo: 5 %}
74-
{% if forloop.first %}
75-
<div class="footer-col">
76-
<h3 class="footer-subtitle">Classes</h3>
77-
<ul class="footer-nav">
78-
<li>
79-
<a href="{{site.baseurl}}/classes/{{class.path}}">{{ class.short-title }}</a>
80-
</li>
81-
{% elsif loopindex == 1 %}
82-
<div class="footer-col no-title">
96+
{% assign loopindex = forloop.index | modulo: 5 %}
97+
{% if forloop.first %}
98+
<div class="footer-col">
99+
<h3 class="footer-subtitle">curriculum</h3>
83100
<ul class="footer-nav">
84101
<li>
85102
<a href="{{site.baseurl}}/classes/{{class.path}}">{{ class.short-title }}</a>
86103
</li>
87-
{% elsif loopindex == 0 or forloop.last %}
88-
<li>
89-
<a href="{{site.baseurl}}/classes/{{class.path}}">{{ class.short-title }}</a>
90-
</li>
91-
</ul>
92-
</div>
93-
{% else %}
104+
{% elsif loopindex == 1 %}
105+
<div class="footer-col no-title">
106+
<ul class="footer-nav">
107+
<li>
108+
<a href="{{site.baseurl}}/classes/{{class.path}}">{{ class.short-title }}</a>
109+
</li>
110+
{% elsif loopindex == 0 or forloop.last %}
94111
<li>
95112
<a href="{{site.baseurl}}/classes/{{class.path}}">{{ class.short-title }}</a>
96113
</li>
97-
{% endif %}
98-
{% endfor %}
114+
</ul>
115+
</div>
116+
{% else %}
117+
<li>
118+
<a href="{{site.baseurl}}/classes/{{class.path}}">{{ class.short-title }}</a>
119+
</li>
120+
{% endif %}
121+
{% endfor %}
99122

100-
<div class="footer-col">
101-
<h3 class="footer-subtitle">Events</h3>
123+
<div id = "row2first" class="footer-col">
124+
<h3 class="footer-subtitle">Partnered Schools</h3>
102125
<ul class="footer-nav">
103126
<li>
104-
<a href="{{site.baseurl}}/ai-ethics">AI Ethics</a>
127+
<a>Brockton Avenue Elementary School</a>
128+
</li>
129+
<li>
130+
<a>Ralph Waldo Emerson Elementary School</a>
105131
</li>
106132
<li>
107-
<a href="{{site.baseurl}}/careers-cs">Careers in CS</a>
133+
<a>North Hollywood High School</a>
108134
</li>
109135
<li>
110-
<a href="{{site.baseurl}}/citylab-cyber">Cyber Day</a>
136+
<a>Sepulveda Middle School</a>
111137
</li>
112138
<li>
113-
<a href="{{site.baseurl}}/beam-robotics">Robotics x BEAM</a>
139+
<a>Short Avenue Elementary School</a>
114140
</li>
115141
</ul>
116142
</div>
117143

118-
<div class="footer-col">
119-
<h3 class="footer-subtitle">Members</h3>
144+
<div id = "row2second" class="footer-col">
145+
<h3 class="footer-subtitle">Sponsors</h3>
146+
<ul class="footer-nav">
147+
<li>
148+
<a>Blizzard Entertainment</a>
149+
</li>
150+
<li>
151+
<a>Citadel</a>
152+
</li>
153+
<li>
154+
<a>Deloittle</a>
155+
</li>
156+
<li>
157+
<a>Facebook</a>
158+
</li>
159+
<li>
160+
<a>Google</a>
161+
</li>
162+
</div>
163+
164+
<div id = "row2third" class="footer-col">
165+
<h3 class="footer-subtitle"><br></h3>
166+
120167
<ul class="footer-nav">
121168
<li>
122-
<a href="{{site.baseurl}}/join">Join Us</a>
169+
<a> Human Capital</a>
123170
</li>
124171
<li>
125-
<a href="{{site.baseurl}}/docs/dev-setup">Dev Setup</a>
172+
<a>Northrop Grumman</a>
126173
</li>
127174
<li>
128-
<a href="{{site.baseurl}}/docs/static-setup">Team Page</a>
175+
<a>Samsung</a>
129176
</li>
130177
<li>
131-
<a href="{{site.baseurl}}/dev/resources">Dev Resources</a>
178+
<a>Sandia National Laboratories</a>
132179
</li>
133180
<li>
134-
<a href="{{site.baseurl}}/team/interns">Intern Program</a>
181+
<a>Viasat</a>
135182
</li>
136183
</ul>
137-
</div>
184+
</div>
185+
</div>
186+
</div>
138187
</div>
139188
</div>
140189
</div>

‎_sass/_footer.scss‎

Lines changed: 48 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,13 @@
11
.footer{
2-
flex-shrink: 0; // this is to make it a sticky footer
3-
4-
width: 100%;
2+
flex-shrink: 0;
53
padding-top: 2rem;
64
padding-bottom: 2rem;
7-
85
font-family: $font-display;
9-
10-
background-color: $teachla-green;
11-
color: white;
6+
background-color: FFFFFF;
7+
color: $teachla-green;
128

139
a {
14-
color: white;
10+
color:#313235;
1511
text-decoration: none;
1612
}
1713

@@ -22,17 +18,55 @@
2218
grid-template-columns: 2fr 4fr;
2319
column-gap: 2rem;
2420
}
21+
box-shadow: 0px -2px 7px
22+
rgba(0, 0, 0, 0.1);
23+
24+
position: absolute;
25+
padding-top: 50px;
26+
padding-bottom: 50px;
27+
left: 0;
28+
right: 0;
29+
}
30+
31+
.footer-aside {
32+
margin: 0 auto;
33+
position: relative;
34+
}
35+
36+
.logo {
37+
position: relative;
38+
top: 100px;
2539
}
2640

41+
.footer-links {
42+
position: relative;
43+
left: 5px;
44+
column-gap: 12px;
45+
}
46+
47+
2748
.footer-main {
2849
display: grid;
50+
padding-left: 15px;
51+
height: 300px;
2952

3053
@media (min-width: $desktop-width) {
31-
grid-template-columns: repeat(4, 1fr);
54+
grid-template-columns: repeat(5, 1fr);
3255
column-gap: 1rem;
56+
57+
#row2first {grid-area: 2 / 1 / 2 / 3; }
58+
#row2second {grid-area: 2 / 3 / 2 / 3; }
59+
#row2third {grid-area: 2 / 4 / 2 / 6; }
3360
}
3461
}
3562

63+
#row2second {
64+
display: flex;
65+
flex-direction: column;
66+
max-height: 10 rem;
67+
flex-wrap: wrap;
68+
}
69+
3670
.footer-col {
3771
padding-bottom: 1rem;
3872

@@ -55,9 +89,10 @@
5589

5690
.footer-subtitle {
5791
margin: 0;
92+
font-size: 14px;
93+
line-height: 2.5;
94+
font-weight: normal;
5895

59-
font-size: 1.5rem;
60-
line-height: 2;
6196
}
6297

6398
.footer-links {
@@ -104,11 +139,11 @@
104139
margin: 0;
105140
padding: 0;
106141

107-
font-size: 1rem;
142+
font-size: 14px;
108143
list-style: none;
109144

110145
a {
111-
line-height: 2rem;
146+
line-height: 1.5rem;
112147
}
113148
}
114149
}

‎_team/achen.md‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
---
2+
name: "Aileen Chen"
3+
group: "member"
4+
title: "Developer"
5+
pronouns: "she/her"
6+
img: achen.jpg
7+
graduating year: 2026
8+
email: [email protected]
9+
github: "aileen7"
10+
---

0 commit comments

Comments
 (0)