More work on the webssite

design_files/aretherecookies.com/index.html

@@ -5,7 +5,7 @@
         <meta http-equiv="X-UA-Compatible" content="IE=edge">
         <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
         <title>Are There Cookies? Check for good stuff near you.</title>
-        <link href="https://fonts.googleapis.com/css?family=Fira+Sans:400,700" rel="stylesheet">
+        <link href="https://fonts.googleapis.com/css?family=Fira+Sans:400,500,700" rel="stylesheet">
         <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
         <link rel="stylesheet" href="styles.css">
     </head>
@@ -13,11 +13,37 @@
         <div class="jumbotron jumbotron-fluid atc-header">
             <div class="container">
                 <div class="row align-items-center justify-content-center no-gutters">
-                    <div class="col-lg-2 col-md-3"><img src="img/atc-cookie-logo.png" class="logo img-fluid" alt="logo" /></div>
+                    <div class="col-lg-1 col-md-2"><img src="img/atc-cookie-logo.png" class="logo img-fluid" alt="logo" /></div>
                     <div class="col-lg-5 col-md-6"><h1>Are There Cookies?</h1></div>
                 </div>
             </div>
         </div>
+
+        <div class="container">
+            <div class="row">
+                <div class="col-12">
+                    <h2>Welcome to our Alpha testing program.</h2>
+                    <p><strong>Are There Cookies?</strong> is an app that lets people share and learn what's available near by. Mainly food.</p> 
+                    <ul>
+                        <li>Let other knows how much of somehthing is left</li>
+                        <li>See how much of the thing you want is left</li>
+                    </ul>
+
+                    <a href="https://play.google.com/apps/testing/com.aretherecookies" class="btn btn-primary join">Join the Alpha Test</a>
+                    <!-- <p> Want to know if Whole Foods has any of those Big John cookies left? Look it up on our app. Are you at Whole Foods and 
+                        see that there are only a few cookies left? Let other people know. This works for anything. Are you at that food truck 
+                        and see they are sold our of their special? Let everyone know. Do you want to know if that bakery has anyone cupcakes left? Look it up.</p> -->
+                    
+                </div>
+            </div>
+            <br />
+            <h4 class="text-center">Are There Cookies? Screens</h4>
+            <div class="row justify-content-center screens">
+                <div class="col-sm-3 col-md-2 text-center"><img src="img/Screenshot3.jpg" class="img-fluid" alt="Screenshot 1" /></div>
+                <div class="col-sm-3 col-md-2 text-center"><img src="img/Screenshot2.jpg" class="img-fluid" alt="Screenshot 2" /></div>
+                <div class="col-sm-3 col-md-2 text-center"><img src="img/Screenshot1.png" class="img-fluid" alt="Screenshot 3" /></div>
+            </div>
+        </div>
     </body>
 
     <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

design_files/aretherecookies.com/styles.css

@@ -3,20 +3,35 @@ body {
 }
 .atc-header {
     background-color: #DCDCB0;
+    padding: 1rem 0;
 }
 .atc-header h1 {
     font-weight: 800;
     font-size: 2.4rem;
+    padding: 0;
+    margin: 0;
 }
 .logo {
     padding-right: 10px;
     display: block;
 
 }
+.btn.join {
+    width: 50%;
+    display: block;
+    margin: 0 auto;
+}
+.screens {
+    margin-top: 1rem;
+}
+.screens img {
+    max-height: 144px;
+}
 
 @media only screen and (max-width : 630px) {
     .atc-header h1 {
-        font-size: 1.8rem;
+        font-size: 1.4rem;
+        text-align: center;
     }
     .logo {
         margin: 0 auto 15px auto;
@@ -24,4 +39,9 @@ body {
         height: 80px;
         width: 80px;
     }
+    .btn.join {
+        width: 100%;
+        display: block;
+        margin: 0 auto;
+    }    
 }