animated grid cells

Author: zesameri

css/grid.css

@@ -14,7 +14,7 @@
   justify-content: space-around;
   flex: 1;
 }
-.flex-row > p {
+.cell {
   display: flex;
   flex-flow: column;
   justify-content: space-around;
@@ -25,6 +25,9 @@
   align-self: stretch;
   font-size: 1.25em;
 }
-.flex-row > p:hover {
+.cell:hover {
   background: #343840;
 }
+.cell > p:nth-child(2) {
+  display: none;
+}

index.html

@@ -37,23 +37,40 @@ <h1> Meredith Hoo </h1>
       <div class="footer">
         <a href="https://github.com/merhoo"><img src="./assets/github-white.svg"></a>
         <a href="https://www.linkedin.com/in/merhoo/"><img src="assets/linkedin-logo-icon.svg"></a>
-        <!--footer-->
       </div>
     </div>
 
     <!-- Grid  ––––––––––––––––––––––––––––––––––––––––––––––– -->
     <div class="flex-parent" id="menu">
       <div class="flex-row">
-        <p>about</p>
-        <p>goals</p>
+        <div class="cell">
+          <p class="front">about</p>
+          <p class="back">test</p>
+        </div>
+        <div  class="cell">
+          <p class="front">goals</p>
+          <p class="back">test</p>
+        </div>
       </div>
       <div class="flex-row">
-        <p>interests</p>
-        <p>experience</p>
+        <div class="cell">
+          <p class="front">interests</p>
+          <p class="back">test</p>
+        </div>
+        <div class="cell">
+          <p class="front">experience</p>
+          <p class="back">test</p>
+        </div>
       </div>
       <div class="flex-row">
-        <p>projects</p>
-        <p>contact</p>
+        <div class="cell">
+          <p class="front">projects</p>
+          <p class="back">test</p>
+        </div>
+        <div class="cell">
+          <p class="front">contact</p>
+          <p class="back">test</p>
+        </div>
       </div>
     </div>
 

js/main.js

@@ -5,5 +5,8 @@ $(document).ready(function() {
 			scrollTop: $(link).offset().top},
 			'slow');
 	});
-	
+	$(".cell").click(function(){
+		$(this).children(":visible").fadeOut();
+		$(this).children(":hidden").delay(500).fadeIn();
+	});
 });