Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[feat] create about section (Our Vision, The Mission) #13

Merged
merged 8 commits into from
Jan 11, 2024
Merged

[feat] create about section (Our Vision, The Mission) #13

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
15626a4
create skeleton
ccatherinetan Jan 11, 2024
b750be9
change div to section
ccatherinetan Jan 11, 2024
264d900
fill out Our Mission + Vision
ccatherinetan Jan 11, 2024
ac422d1
add and use b
ccatherinetan Jan 11, 2024
9b72ccf
clean up / remove comments
ccatherinetan Jan 11, 2024
4357938
check style (prettier)
ccatherinetan Jan 11, 2024
c33d48d
remove b from global styles
ccatherinetan Jan 11, 2024
053f587
create div for mission and vision
ccatherinetan Jan 11, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
89 changes: 88 additions & 1 deletion src/components/About.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,88 @@
<section></section>
<section>
<h4 id="about">ABOUT US</h4>
<div class="spacer"></div>
<div class="header">
<h3>At Hack for Impact, you will join over&nbsp;</h3>
<h2>200+ hackers</h2>
<h3>&nbsp;at UC Berkeley to innovate for social good.</h3>
</div>
jinkang-0 marked this conversation as resolved.
Show resolved Hide resolved


<div class="bigRow">
<h2 class="left">Our Vision</h2>
<p>To solve the most pressing challenges of our world,
we will need the best and the brightest minds to work collaboratively on
creative, ethical, and technical solutions that will propel humanity forward.
Our audience is anyone, anywhere, who believes that
technology can solve hard problems, grow prosperity,
and expand human possibilities.</p>
</div>
<div class="bigRow">
<h2 class="left">The Mission</h2>
<div>
<p>Hack for Impact 2024 is a 1-day hackathon co-hosted by
Blueprint and Cal Hacks at UC Berkeley.
The event’s mission is two-fold:</p>
<div class="captionRow">
<div class="image-placeholder"></div>
<p>To <b>empower</b> student hackers to develop creative solutions
for relevant social causes and collaborate with
non-profit organizations on ethical innovation
with tangible community impact.</p>
</div>
<div class="captionRow">
<div class="image-placeholder"></div>
<p>To <b>educate</b> students via a <b>series of workshops and speaker panels</b>
to learn about professional opportunities in social good,
as well as emerging technologies and their ethical aspects.</p>
</div>
</div>
</div>
</section>

<style lang="scss">
@use '../styles/colors';
section {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
max-width: 58.625rem;
margin: 0 auto;
padding-top: 5rem;
}
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

For the purpose of the image carousel, it's best to make this width: 100% and contain the Vision and Mission sections inside a smaller child div.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

MMM this makes sense -- lemme do that

div.spacer {
height: 1.5rem;
}

div.bigRow {
margin-top: 8.3125rem;
display: flex;
flex-direction: row;
gap: 0 6.125rem;
text-align: left;
}

.image-placeholder {
background-color: colors.$secondary;
min-width: 10.5rem;
height: 7.0625rem;
}

h2.left {
display: inline-block;
min-width: 12rem;
}

div.captionRow {
display: flex;
flex-direction: row;
margin-top: 3.75rem;
gap: 0 1.5rem;
}

div.header {
display: inline-block;
// flex-direction: row;
}
</style>
5 changes: 5 additions & 0 deletions src/styles/_global.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,11 @@ p {
line-height: 150%;
}

b {
@extend p;
font-weight: 700;
}

ccatherinetan marked this conversation as resolved.
Show resolved Hide resolved
span {
font-size: 0.875rem;
}
Expand Down