resolving merge conflicts

Author: MarissaWood

README.md

@@ -1,36 +1,49 @@
 # Cat Clicker
-This is a simple JavaScript app that keeps track of the number of clicks while on the selected photo.  You may choose between five different cat photos.  Once you switch to another photo your click count is lost (for now).
+
+This is a simple JavaScript app that keeps track of the number of clicks while on the selected photo. You may choose between five different cat photos. Once you switch to another photo your click count is lost (for now).
 
 The live, playable game can be found [here](https://js-goose.github.io/cat-clicker/).
 
 # Project Design
-I chose something simple and easy on the eyes as I'm not the best designer.  I feel as though the layout works well and has a natural flow to it.
+
+I chose something simple and easy on the eyes as I'm not the best designer. I feel as though the layout works well and has a natural flow to it.
+
+# Example of Play
+
+![alt text](https://github.com/mepda/cat-clicker/blob/master/img/example.png?raw=true)
 
 # Playing Locally
+
 Fork or download the repo and once saved locally open up `index.html` in your favorite browser.
 
 # Instructions
-* On load, the image displayed is a placeholder and will not count clicks
-* Choose a cat from the left menu
-* Click on the photo of your selected cat to incriment your count
-* Count is not reset upon selecting another cat
 
-# Required Dependencies 
-* There are no required dependencies.
+- On load, the image displayed is a placeholder and will not count clicks
+- Choose a cat from the left menu
+- Click on the photo of your selected cat to incriment your count
+- Count is not reset upon selecting another cat
+
+# Required Dependencies
 
-# Optional Dependencies 
-* There are no optional dependencies.
+- There are no required dependencies.
+
+# Optional Dependencies
+
+- There are no optional dependencies.
 
 # Pull Requests
-I am the only contributor to this code (besdies the aforementioned credited sources) and the project is complete (I think).  There's not much to this project but if you feel the desire to contribute I won't say no.
 
-# Licensing 
+I am the only contributor to this code (besdies the aforementioned credited sources) and the project is complete (I think). There's not much to this project but if you feel the desire to contribute I won't say no.
+
+# Licensing
+
 This project is licensed under the [MIT License](https://github.com/JS-goose/cat-clicker/blob/master/LICENSE) and you are **free** to do the following with the code, subject to the conditions provided within the license found at the link above:
-* use
-* copy
-* modify
-* merge
-* publish
-* distribute
-* sublicense
-* sell
+
+- use
+- copy
+- modify
+- merge
+- publish
+- distribute
+- sublicense
+- sell

css/normalize.css

@@ -123,16 +123,11 @@
     line-height: 0;
     position: relative;
     vertical-align: baseline;
-  }
-  
-  sub {
     bottom: -0.25em;
-  }
-  
-  sup {
     top: -0.5em;
   }
 
+  
   /* Embedded content
      ========================================================================== */
 
@@ -342,4 +337,4 @@
   [hidden] {
     display: none;
   }
-  
+  

css/style.css

@@ -31,7 +31,15 @@
   grid-area: aside;
   grid-row: 2 / span 2;
   justify-content: center;
+  /* The .catSelection itself is the `aside` in the .wrapper grid above. If the
+   * value below is `center`, this will shift up and down as the `content` grid
+   * section adjusts in height, e.g. the photo for Bethany is taller, ergo this
+   * section will shift down.
   align-content: center;
+   *
+   * a value of `start` will keep this flush top.
+   */
+  align-content: start;
 }
 .catSelection h1, ul {
   padding: 20px;
@@ -40,6 +48,7 @@
 .catSelection li {
   text-align: center;
   padding: 5px;
+  border: 1px solid transparent;
 }
 .catItem:hover {
   background-color: var(--link-blue);
@@ -121,8 +130,6 @@ a {
 landscape view on smaller phones. 
 Larger phones will still get the desktop version on landscape) */
 
-/* completed fir first PR for hacktoberfest */
-
 @media only screen and (max-width: 768px) {
   .wrapper, .catSelection {
     display: block;
@@ -170,4 +177,4 @@ Larger phones will still get the desktop version on landscape) */
   .trademark h2, #social {
     font-size: 1rem;
   }
-}
+}

img/example.png

@@ -10,8 +10,11 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <title>Cat Clicker!</title>
-    <meta name="description" content="">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
+    
+    <meta name = "keywords" content = "Cat Clicker, Simple Javascript app, Cat photo click count" />
+    <meta name = "description" content="This is a simple JavaScript app that keeps track of the number of clicks on the selected photo.">
+    <meta name = "author" content = "JS-goose" />
+    <meta name ="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="./css/style.css">
     <link rel="stylesheet" href="./css/normalize.css">
     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ"
@@ -93,4 +96,4 @@ <h2>Built by me,
     </section>
 </body>
 
-</html>
+</html>