code4nova · EdzonQS · Aug 20, 2018 · Jul 13, 2018 · Jul 26, 2018 · Jul 27, 2018
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,5 @@
+node_modules
+
+dist
+
+.cache
diff --git a/README.md b/README.md
@@ -1 +1,4 @@
 # projectplay-front-end
+
+* `npm install`
+* `npm start`
diff --git a/about.html b/about.html
@@ -0,0 +1,108 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<meta http-equiv="X-UA-Compatible" content="IE=edge">
+<title>project-play</title>
+<link rel="stylesheet" href="assets/css/grid.css"> 
+<link rel="stylesheet" href="assets/css/global.css"> 
+<link rel="stylesheet" href="assets/css/responsive.css"> 
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
+<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
+<script src="assets/js/main.js"></script>
+</head>
+<body>
+ <img id="background-img" src="assets/media/img/bg.png" alt="body_background">
+ <header>
+  <div class="banner">
+    <p>Text your address (include city, state) to 703.520.2676 to find playspaces near you!</p>
+  </div>
+  <nav> 
+   <div id="btn-menu">
+    <span class="fa fa-bars"></span>
+   </div>
+   <div class="side-image">
+     <a href="index.html">
+      <img src="assets/media/img/projectplay-logo.svg" alt="side-image">
+     </a>
+   </div>
+   <ul class="menu">
+    <li><a href="about.html">About project play</a></li>
+    <li><a href="why-play.html">Why Play</a></li>
+    <li><a href="play-ideas.html">Play Ideas</a></li>
+    <li><a href="contact.html">Contact</a></li>
+    <li><a href="photo-gallery.html">Photo Gallery</a></li>
+   </ul>
+  </nav>
+ </header>
+ <main>
+  <aside>
+    <div id="side-map">
+      <a href="index.html">
+      <img src="assets/media/img/sidebar-map_NEW.png" alt="side-img">
+      </a>
+    </div>
+  </aside> 
+  <section id="page-content">
+      <article>
+          <p>Project Play is a joint venture of the Alexandria Childhood Obesity Action Network 
+             (A-COAN) and the FitArlington Healthy Community Action Team (H-CAT) that seeks to 
+             improve play opportunities in Northern Virginia by:
+           </p>
+          <ul>
+              <li>promoting higher quality play spaces throughout the Alexandria and Arlington,</li>
+              <li>advocating for fairer distribution of play spaces across Alexandria and Arlington,</li>
+              <li>providing easy-to find information about play spaces, and</li>
+              <li>generating interest in play and offering ideas for play</li>
+          </ul>
+          <p>An A-COAN task force created Project Play in 2009 in an effort to improve play 
+             opportunities for children in the City of Alexandria, Virginia. Neighbors, early 
+             childhood and healthy living activists, folks from the Parks and Recreation and
+             Health Departments, and other City offices and organizations have joined together 
+             in A-COAN to improve and enhance play spaces for kids in Alexandria. 
+          </p>
+    </article>
+    <article>
+        <h3>The Play Space Audit</h3>
+        <p>Did you know that Alexandria is the first city in the country to commission an 
+           assessment of every play space in the City? Thanks to Project Play, we now know 
+           a lot about most outdoor play spaces in the City! You can find the audit here.Did 
+           you know that Alexandria is the first city in the country to commission an assessment 
+           of every play space in the City? Thanks to Project Play, we now know a lot about most 
+           outdoor play spaces in the City! 
+           <a href="http://healthieralexandria.org/HealthyLifestyles/content.aspx?id=57274" alt="Alexandria Play Space Audit" target="_blank">You can find the audit here.</a> 
+        </p>
+    </article>
+    <article>
+        <h3>Alexandria Has a Play Policy</h3>
+        <p>The Alexandria  City Council adopted a Play Policy thanks to the advocacy and 
+           hard work of the Project Play team, and based in large part on the play space 
+           assessment we commissioned. <a href="http://alexandriaplays.org/wp-content/uploads/2014/06/Playspace-Policy.pdf" alt="Alexandria Play Policy" target="_blank">Read it here</a>. Now our City departments have official
+           guidelines when they make important decisions about play spaces for kids all over
+           Alexandria.
+        </p>
+    </article>
+    <article>
+        <h3>Expanding Project Play</h3>
+        <p>In 2015, A-COAN invited the FitArlington H-CAT to add Arlington’s playgrounds
+           to Project Play, expanding play opportunities for both jurisdictions alike. 
+           Like A-COAN, H-CAT consists of a mixture of community members and Arlington 
+           County employees who are passionate about the health and well-being of Arlington’s 
+           children. Funded by the Virginia Foundation for Healthy Youth, FitArlington’s H-CAT 
+           supports the Arlington area in efforts to reduce childhood obesity and promote health
+           by encouraging healthy living. The H-CAT Subcommittee on Early Education spearheaded
+           the effort to join Project Play by recruiting volunteers from the community to assess, 
+           categorize, and evaluate more than 90 playgrounds in public parks and schoolyards 
+           across Arlington. The Team is thrilled to add on to what A-COAN started, and improve
+           access to play spaces for families across the region.
+        </p>
+    </article>
+    <p id="copyright">©2018&nbsp;Project Play Alexandria.&nbsp;All rights reserved.</p>
+  </section>
+ </main>
+ <footer>
+ </footer>
+<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCzKpIVbHrX5FU6qv-ke0LU1p4JlfNNfxU&callback=myMap"></script>
+</body>
+</html>
diff --git a/assets/css/gallery.css b/assets/css/gallery.css
@@ -0,0 +1,102 @@
+
+.row > .column {
+    padding: 0 8px;
+}
+.row:after {
+    content:"";
+    display: table;
+    clear: both;
+}
+/* [create four equal columns that floats next to eachother] */
+.column {
+    float: left;
+    width: 25%;
+}
+.column img {
+    height: 100%;
+    width: 100%;
+    max-width: 100%;
+    max-height: 100%;
+}
+/* [The Modal (background)] */
+.modal {
+    display: none;
+    position: fixed;
+    z-index: 1;
+    padding-top: 100px;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+    background-color: rgba(0,0,0,0.5);
+}
+/* [Modal-content] */
+.modal-content {
+    position: relative;
+    background-color: #fefefe;
+    margin: auto;
+    padding: 0;
+    width: 90%;
+    max-width: 1200px;
+}
+/* [The Close Button] */
+.close {
+    color: white;
+    position: absolute;
+    top: 10px;
+    right: 25px;
+    font-size: 35px;
+    font-weight: bold;
+}
+.close:hover,
+.close:focus {
+    color: #999;
+    text-decoration: none;
+    cursor: pointer;
+}
+/* [Next & previous buttons] */
+#page-content .prev,
+#page-content .next {
+    cursor: pointer;
+    position: absolute;
+    top: 50%;
+    width: auto;
+    padding: 16px;
+    margin-top:  -50px;
+    color: white;
+    font-weight: bold;
+    font-size: 20px;
+    transition: 0.6s ease;
+    border-radius: 0 3px 3px 0;
+    user-select: none;
+    -webkit-user-select: none;
+}
+/* [Position the "next button" to the right] */
+.next {
+    right: 0;
+    border-radius: 3px 0 0 3px;
+}
+
+/* [On hover, add a black background color with a little bit see-through] */
+.prev:hover,
+.next:hover {
+    background-color: rgba(0,0,0,0.8);
+}
+/* [Number text (1 / 3 etc)] */
+.numbertext {
+    color: #f2f2f2;
+    font-size: 12px;
+    padding: 8px 12px;
+    position: absolute;
+    top: 0;
+}
+img.hover-shadow {
+    transition: 0.3s;
+}
+.hover-shadow:hover {
+    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
+}
+.second {
+    margin-bottom: 4em;
+}