DavidJentes
/
websitedesign2023
mirror of https://github.com/DavidJentes/websitedesign2023
1
0
Fork 0
Code

Make projects page into a grid

pull/1/head
dugo3number2 2023-02-12 18:45:06 -06:00
parent 43722d1890
commit edfd53a10a
2 changed files with 46 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
docs/assets/css/main.css
View File

@ -80,8 +80,31 @@ main {
display: none; display: none;
} }
.smallimg { .grid {
width: 25%; display: inline-grid;
columns: 2;
}
.griditem {
margin: 10px;
}
@media screen and (min-width: 1000px) {
.top {
grid-row: 1;
}
.bottom {
grid-row: 2;
}
.left {
grid-column: 1;
}
.right {
grid-column: 2;
}
} }
@media screen and (max-width: 1000px) { @media screen and (max-width: 1000px) {

26
docs/projects/index.html
View File

@ -27,26 +27,28 @@
<main data-m="drop" data-m-duration="0.5"> <main data-m="drop" data-m-duration="0.5">
<h1>Projects</h1> <h1>Projects</h1>
<article> <article>
<div class="center"> <div class="grid">
<div class="center griditem top left">
<h2>Feeding the Hungry</h2> <h2>Feeding the Hungry</h2>
<img src="../assets/img/bread.png" class="round smallimg" /> <img src="../assets/img/bread.png" class="round" />
</div>
<p>At our food bank in Nashville, TN, our goal is to feed as many people as we possibly can in a day. We have long lines coming towards the window and the benches outside are always filled, rain or shine.</p> <p>At our food bank in Nashville, TN, our goal is to feed as many people as we possibly can in a day. We have long lines coming towards the window and the benches outside are always filled, rain or shine.</p>
<div class="center"> </div>
<div class="center griditem top right">
<h2>Financial Aid</h2> <h2>Financial Aid</h2>
<img src="../assets/img/money.png" class="round smallimg" /> <img src="../assets/img/money.png" class="round" />
</div>
<p>If you contact us and tell us about your situation and how much you need, we can help you with financial aid. We may request extra information if your request looks suspicious.</p> <p>If you contact us and tell us about your situation and how much you need, we can help you with financial aid. We may request extra information if your request looks suspicious.</p>
<div class="center"> </div>
<div class="center griditem bottom left">
<h2>Orphanage</h2> <h2>Orphanage</h2>
<img src="../assets/img/hill.png" class="round smallimg" /> <img src="../assets/img/hill.png" class="round" />
</div>
<p>Our orphanage takes care of over 100 kids, with most finding homes within 4 years. We are planning on offering sponsorships soon. We school all of our kids that are of age using <a href="https://aceschooloftomorrow.com">the A.C.E. curriculum</a>.</p> <p>Our orphanage takes care of over 100 kids, with most finding homes within 4 years. We are planning on offering sponsorships soon. We school all of our kids that are of age using <a href="https://aceschooloftomorrow.com">the A.C.E. curriculum</a>.</p>
<div class="center">
<h2>Homeless Shelter</h2>
<img src="../assets/img/street.png" class="round smallimg" />
</div> </div>
<div class="center griditem bottom right">
<h2>Homeless Shelter</h2>
<img src="../assets/img/street.png" class="round" />
<p>Our homeless shelter aims to help any person no matter what age if they have nowhere to go. Our homeless shelter is located in Wisconsin Rapids, WI.</p> <p>Our homeless shelter aims to help any person no matter what age if they have nowhere to go. Our homeless shelter is located in Wisconsin Rapids, WI.</p>
</div>
</div>
</article> </article>
</main> </main>
<footer data-m="bounce-up" data-m-duration="0.5"> <footer data-m="bounce-up" data-m-duration="0.5">