Add bios to about page and work on styling

pull/1/head
dugo3number2 2023-02-13 15:42:27 -06:00
parent cf6911f1d1
commit ee5e05ea9c
2 changed files with 40 additions and 17 deletions

View File

@ -30,18 +30,27 @@
<p>We currently have two buildings in the United States, one serving as a homeless shelter and the other as an orphanage and food bank. There are currently plans to expand to other countries, however, we currently do not have the funds to do so. We would encourage donations or even just prayer. Donation instructions are on the home page if you are interested.</p> <p>We currently have two buildings in the United States, one serving as a homeless shelter and the other as an orphanage and food bank. There are currently plans to expand to other countries, however, we currently do not have the funds to do so. We would encourage donations or even just prayer. Donation instructions are on the home page if you are interested.</p>
<h2 class="center">Board of Directors</h2> <h2 class="center">Board of Directors</h2>
<section class="center"> <section class="center">
<h3>Philip Chereb - Lead Director</h3> <div>
<img src="../assets/img/philip.png" class="round smallimg" /> <h3>Philip Chereb - Lead Director</h3>
<img src="../assets/img/philip.png" class="round smallimg" />
</div>
<p>Philip Chereb is the founder and lead director of The Chereb Foundation. He mainly operates the homeless shelter, however, he also oversees the non-profit as a whole, helping in making decisions that will help, not hurt, others.</p>
</section> </section>
<section class="center"> <section class="center">
<h3>Brandon Carter - Head of Financial</h3> <div>
<img src="../assets/img/brandon.png" class="round smallimg" /> <h3>Brandon Carter - Head of Financial</h3>
<img src="../assets/img/brandon.png" class="round smallimg" />
</div>
<p>Brandon Carter is the nephew of Philip Chereb and the head of the financial team at The Chereb Foundation. His team manages how much is going into savings for the financial help fund, and also manages how the rest of the money is used.</p>
</section> </section>
<section class="center"> <section class="center">
<h3>Frank Simons - Head of Technology</h3> <div>
<img src="../assets/img/frank.png" class="round smallimg" /> <h3>Frank Simons - Head of Technology</h3>
<img src="../assets/img/frank.png" class="round smallimg" />
</div>
<p>As The Chereb Foundation aims to expand its reach to other countries, Frank Simons aids in providing ways to communicate back to the United States, as well as publish what has happened.</p>
</section> </section>
<h2>The Chereb Foundation is not a legal entity, and is only a fabrication for this Website Design. All names, phone numbers, physical addresses, and buildings in this production are fictitious. No identification with actual persons (living or deceased), places, buildings, and products is intended or should be inferred.</h2> <h2>The Chereb Foundation is not a legal entity, and is only a fabrication for this Website Design. All names, phone numbers, physical addresses, and buildings in this production are fictitious. No identification with actual persons (living or deceased), places, buildings, products, or corporations is intended or should be inferred.</h2>
</article> </article>
</main> </main>
<footer data-m="bounce-up" data-m-duration="0.5"> <footer data-m="bounce-up" data-m-duration="0.5">

View File

@ -89,6 +89,24 @@ main {
margin: 10px; margin: 10px;
} }
.smallimg {
width: 50%;
}
section {
display: flex;
background-color: #444444;
color: #ffffff;
padding: 10px;
border-radius: 50px;
margin: 10px;
align-items: center;
}
section p {
font-size: 1.5vw;
}
@media screen and (min-width: 1000px) { @media screen and (min-width: 1000px) {
.top { .top {
grid-row: 1; grid-row: 1;
@ -136,8 +154,12 @@ main {
font-size: 15px; font-size: 15px;
} }
.smallimg { section {
width: 50%; flex-direction: column;
}
section p {
font-size: 16px;
} }
} }
@ -168,14 +190,6 @@ img {
border-radius: 50px; border-radius: 50px;
} }
section {
background-color: #444444;
color: #ffffff;
padding: 10px;
border-radius: 50px;
margin: 10px;
}
footer { footer {
text-align: center; text-align: center;
} }