Skip to content

Commit

Permalink
spacing
Browse files Browse the repository at this point in the history
  • Loading branch information
@me-liu
me-liu committed Jan 11, 2024
1 parent 4c6d989 commit b0d53d5
Showing 1 changed file with 114 additions and 208 deletions.
322 changes: 114 additions & 208 deletions src/components/About.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,220 +9,126 @@ import crowd from '../graphics/crowd.webp';
---

<section>
<h4 id="about">ABOUT US</h4>
<div class="spacer"></div>
<div class="header">
<h3>
At Hack for Impact, you will join over
<div class="text">200+ hackers</div>
at UC Berkeley to innovate for social good.
</h3>
</div>

<div class="mission-vision">
<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>
<section>
<h4 id="about">ABOUT US</h4>
<div class="spacer"></div>
<div class="header">
<h3>
At Hack for Impact, you will join over
<div class="text">200+ hackers</div>
at UC Berkeley to innovate for social good.
</h3>
<h3>
At Hack for Impact, you will join over
<div class="text">200+ hackers</div>
at UC Berkeley to innovate for social good.
</h3>
</div>
<div class="bigRow">
<h2 class="left">The Mission</h2>
<div>

<div class="mission-vision">
<div class="bigRow">
<h2 class="left">Our Vision</h2>
<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:
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 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>
</div>
<div class="bigRow">
<h2 class="left">The Mission</h2>
<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.
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>
</div>
</div>
</section>

<style lang="scss">
@use '../styles/colors';
section {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
width: 100%;
margin: 0 auto;
padding-top: 5rem;
}
div.spacer {
height: 1.5rem;
}

div.mission-vision {
max-width: 58.625rem;
}

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;
}
div.text {
font: serif;
font-weight: 600;
display: inline-block;
}
div.imageRow {
display: flex;
align-items: flex-start;
gap: 24px;
margin-top: 40px;
}
.img {
border-radius: 8px;
width: 264px;
height: 171px;
}
</style>
</section>

<style lang="scss">
@use '../styles/colors';
section {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
width: 100%;
margin: 0 auto;
padding-top: 5rem;
}
div.spacer {
height: 1.5rem;
}

div.mission-vision {
max-width: 58.625rem;
}

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;
}

div.text {
font: serif;
font-weight: 600;
display: inline-block;
}

div.imageRow {
display: flex;
align-items: flex-start;
gap: 24px;
margin-top: 40px;
}

.img {
border-radius: 8px;
width: 264px;
height: 171px;
}
</style>
<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>

<div class="spacer"></div>

<div class ="imageRow">
<div class = "imgbox">
<img
src="/about/working.webp"
width="264"
height="171"
alt="hello"
/>
</div>
<div class = "imgbox">
<img
src="/about/crowd-large.webp"
width="264"
height="171"
alt=""
/>
</div>
<div class = "imgbox">
<img
src="/about/fourppl.webp"
width="264"
height="171"
alt=""
/>
</div>
<div class = "imgbox">
<img
src="/about/bear.webp"
width="264"
height="171"
alt=""
/>
</div>
<div class = "imgbox">
<img
src="/about/anniew.webp"
width="264"
height="171"
alt=""
/>
</div>
<div class = "imgbox">
<img
src="/about/crowd.webp"
width="264"
height="171"
alt=""
/>
</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;
}

div.spacer {
height: 1.5rem;
}

div.header {
display: inline-block;
}

div.header h2{
display: inline-block;
}
div.imageRow {
display: inline-flex;
align-items: flex-start;
gap: 24px;
margin-top: 40px;
}
.img {
border-radius: 18px;
width: 264px;
height: 171px;
}
</style>

0 comments on commit b0d53d5

Please sign in to comment.