Add top menu to home page

docs/assets/css/main.css

@@ -139,6 +139,10 @@ section a:hover, section a:focus {
     margin: 30px;
 }
 
+.lessmargin {
+    margin: 5px;
+}
+
 .centercontainer {
     display: inline-block;
     text-align: left;
@@ -179,6 +183,10 @@ section a:hover, section a:focus {
     width: 90%;
 }
 
+.third {
+    width: 30%;
+}
+
 @media screen and (min-width: 1000px) {
     .top {
         grid-row: 1;
@@ -251,6 +259,15 @@ section a:hover, section a:focus {
     }
 }
 
+@media screen and (max-width: 500px) {
+    .smallcolumn {
+        flex-direction: column;
+    }
+    .third {
+        width: 60%;
+    }
+}
+
 @media screen and (max-width: 370px) {
 	header {
 		margin: 10px;

docs/index.html

@@ -29,6 +29,26 @@
 	</div>
 	<main>
 		<article>
+			<div class="flex smallcolumn">
+				<section class="iblock center third extrapadding lessmargin">
+					<img src="assets/img/breadicon.png" class="round third"/>
+					<h1>Projects</h1>
+					<span>Food Bank, Financial Aid, Orphanage, Homeless Shelter</span><br />
+					<a href="projects">Read more</a>
+				</section>
+				<section class="iblock center third extrapadding lessmargin">
+					<img src="assets/img/calendar.png" class="round third" />
+					<h1>Calendar</h1>
+					<span>See upcoming blood drives, volunteer days, and more!</span><br />
+					<a href="calendar">See events</a>
+				</section>
+				<section class="iblock center third extrapadding lessmargin">
+					<img src="assets/img/cart.png" class="round third" />
+					<h1>Shop</h1>
+					<span>Help support The Chereb Foundation with a donation!</span><br />
+					<a href="shop">Visit shop</a>
+				</section>
+			</div>
 			<section class="center extrapadding">
 				<h1>Help The Cherub Foundation</h1><br />
 				<span>You can help The Cherub Foundation today in many ways. The list below gives some suggestions on how to help us.</span><br />