Color, images, and longer blerbs on the cards

docs/assets/css/main.css

@@ -110,13 +110,28 @@ main {
 }
 
 section {
-    background-color: #bbbbbb;
+    background-color: #aaaaff;
     color: #000000;
     padding: 10px;
     border-radius: 50px;
     margin: 10px;
 }
 
+.red {
+    background-color: #880000;
+    color: #ffffff;
+}
+
+.green {
+    background-color: #008800;
+    color: #ffffff;
+}
+
+.blue {
+    background-color: #000088;
+    color: #ffffff;
+}
+
 .flex {
     display: flex;
     align-items: center;
@@ -138,6 +153,15 @@ section a:hover, section a:focus {
     color: #666666;
 }
 
+
+.red a, .green a, .blue a {
+    color: #bbbbbb;
+}
+
+.red a:hover, .green a:hover, .blue a:hover, .red a:focus, .green a:focus, .blue a:focus {
+    color: #999999;
+}
+
 .extrapadding {
     padding: 25px;
 }
@@ -221,6 +245,10 @@ section a:hover, section a:focus {
 }
 
 @media screen and (max-width: 1000px) {
+    .largercolumn {
+        flex-direction: column;
+    }
+
     #menu {
         display: inline-block;
     }
@@ -262,7 +290,7 @@ section a:hover, section a:focus {
     }
 
     .iblock {
-        width: 100%;
+        width: 60%;
     }
 }
 
@@ -302,6 +330,10 @@ img {
     border-radius: 50px;
 }
 
+.smallround {
+    border-radius: 10px;
+}
+
 footer {
     text-align: center;
 }

docs/index.html

@@ -30,23 +30,23 @@
 	</div>
 	<main>
 		<article>
-			<div class="flex smallcolumn">
-				<section class="iblock center third extrapadding lessmargin">
-					<img src="assets/img/breadicon.png" class="round third"/>
+			<div class="flex largercolumn">
+				<section class="iblock center third extrapadding lessmargin red">
+					<img src="assets/img/projects.png" class="smallround third"/>
 					<h1>Projects</h1>
-					<span>Food Bank, Financial Aid, Orphanage, Homeless Shelter</span><br />
+					<span>We have a range of ministries from food banks to orphanages! Come check them out on the projects page!</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" />
+				<section class="iblock center third extrapadding lessmargin green">
+					<img src="assets/img/calendar.png" class="smallround third" />
 					<h1>Calendar</h1>
-					<span>See upcoming blood drives, volunteer days, and more!</span><br />
+					<span>See upcoming events happening within our organization around the world or in your hometown on the calendar!</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" />
+				<section class="iblock center third extrapadding lessmargin blue">
+					<img src="assets/img/shop.png" class="smallround third" />
 					<h1>Shop</h1>
-					<span>Help support The Cherub Foundation with a donation!</span><br />
+					<span>Buy a t-shirt to inspire yourself and others, or donate entirely to The Cherub Foundation for the greatest impact!</span><br />
 					<a href="shop">Visit shop</a>
 				</section>
 			</div>