about page editing

Author: zesameri

about.html

@@ -12,7 +12,9 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <!-- FONT
   –––––––––––––––––––––––––––––––––––––––––––––––––– -->
-  <link href="https://fonts.googleapis.com/css?family=Varela+Round" rel="stylesheet">
+  <!--link href="https://fonts.googleapis.com/css?family=Varela+Round" rel="stylesheet"-->
+  <link href="https://fonts.googleapis.com/css?family=Varela+Round|Kalam" rel="stylesheet">
+
   <!-- CSS
   –––––––––––––––––––––––––––––––––––––––––––––––––– -->
   <link rel="stylesheet" href="css/main.css">
@@ -40,28 +42,61 @@
 
   <!-- Landing page ––––––––––––––––––––––––––––––– -->
   <section class="about">
-    <div class="biz-card">
-      <div class="logo">
-        <img src="assets/black.svg"/>
-        <h1>Meredith Hoo</h1>
-      </div>
-      <div class="contact">
-        <h2>Software Engineer</h2>
-        <p>New York, NY</p>
-        <p>c: 516-492-8916</p>
-        <p>e: me@merhoo.me</p>
+    <div class="flip-container" ontouchstart="this.classList.toggle('hover');">
+      <div class="flipper">
+        <div class="front">
+          <img src="assets/black.svg"/>
+          <h1>MEREDITH HOO</h1>
+          <h2>Software Engineer</h2>
+          <p>New York, NY</p>
+        </div>
+        <div class="back">
+          <img src="assets/black.svg"/>
+          <h1>MEREDITH HOO</h1>
+          <h2>Software Engineer</h2>
+          <p>New York, NY</p>
+        </div>
       </div>
     </div>
-    <div class="polaroid-images">
-    	<a href="" title="FLOWER"><img src="assets/print1.jpg" alt="Cave" title="Cave" /></a>
-    	<a href="" title="ROSES"><img src="assets/print2.jpg" alt="Island" title="Island" /></a>
-    	<a href="" title="BLUE"><img src="assets/print3.jpg" alt="Islands Forest" title="Islands Forest" /></a>
-    	<a href="" title="CRAZE"><img src="assets/print4.jpg" alt="Decking" title="Decking" /></a>
-    	<a href="" title="FEMINE"><img src="assets/print5.jpg" alt="Lake" title="Lake" /></a>
-    	<a href="" title="Mountains"><img src="assets/print6.jpg" alt="Mountains" title="Mountains" /></a>
-    	<a href="" title="CRANES IN THE SKY"><img src="assets/print7.jpg" alt="Forest" title="Forest" /></a>
-    	<a href="" title="Coast Valley"><img src="assets/print2.png" alt="Coast Valley" title="Coast Valley" /></a>
-      <a href="" title="SUMMER IN DC"><img src="assets/me3.jpg" alt="Coast Valley" title="Coast Valley" /></a>
+    <div class="backdrop">
+    	<a class="photo" title="FLOWER"><img src="assets/purchase.jpg" alt="Cave"/></a>
+    	<a class="photo" title="ROSES"><img src="assets/books.jpg" alt="Island"/></a>
+
+    	<a class="photo" title="BLUE"><img src="assets/brkfst.jpg" alt="Islands Forest"/></a>
+    	<a class="photo" title="rockport"><img src="assets/me5.jpg" alt="Decking"/></a>
+      <a class="index-card">
+        <h1> NEW YORK </h1>
+        <p>  New York City comprises 5 boroughs sitting</p>
+        <p>  meets the Atlantic Ocean. At its core is </p>
+        <p>  populated borough that’s among the world’s</p>
+        <p>  financial and cultural centers. Its iconic</p>
+        <p>  such as the Empire State Building and  </p>
+        <p>  Broadway theater is staged in</p>
+      </a>
+    	<a class="photo" title="choir"><img src="assets/choir.jpg" alt="Lake" title="Lake" /></a>
+    	<a class="photo" title="Mountains"><img src="assets/beauty.jpg" alt="Mountains"/></a>
+      <a class="index-card">
+        <h1> NEW YORK </h1>
+        <p>  New York City comprises 5 boroughs sitting</p>
+        <p>  meets the Atlantic Ocean. At its core is </p>
+        <p>  populated borough that’s among the world’s</p>
+        <p>  financial and cultural centers. Its iconic</p>
+        <p>  such as the Empire State Building and  </p>
+        <p>  Broadway theater is staged in</p>
+      </a>
+    	<a class="photo" title="CRANES IN THE SKY"><img src="assets/painting.jpg" alt="Forest"/></a>
+    	<a class="photo" title="Stars"><img src="assets/stars.jpg" alt="Coast Valley"/></a>
+      <a class="photo" title="SUMMER IN DC"><img src="assets/me3.jpg" alt="Coast Valley"/></a>
+      <a class="index-card">
+        <h1> NEW YORK </h1>
+        <p>  New York City comprises 5 boroughs sitting</p>
+        <p>  meets the Atlantic Ocean. At its core is </p>
+        <p>  populated borough that’s among the world’s</p>
+        <p>  financial and cultural centers. Its iconic</p>
+        <p>  such as the Empire State Building and  </p>
+        <p>  Broadway theater is staged in</p>
+      </a>
+
     </div>
   </section>
   <!-- End Document ––––––––––––––––––––––––––––––– -->