Landing page fixes to help with responsive design

KeiranWDigital · KeiranWDigital · commit 53ffd612e425 · 2020-08-03T22:17:30.000+01:00
diff --git a/css/style.css b/css/style.css
@@ -12,3 +12,40 @@ h1, h2, h3 {
     font: 14px Roboto, Arial, sans-serif;
 }
 
+
+#header {
+    padding-top: 5px;
+    padding-bottom: 5px;
+  }
+
+#keyboardSymbol {margin-bottom:10px;}
+
+@media only screen and (max-width: 600px) {
+  
+    .desktopLogo,.desktopPrompt {
+        display: none;
+    }
+
+    .mobileLogo {
+        display: inline;
+    }
+
+    .mobilePrompt{display: inline;}
+
+    body{padding: 5px;}
+}
+
+@media only screen and (min-width: 600px) {
+   
+    .desktopLogo {
+        display: block;
+    }
+
+    .desktopPrompt {
+        display: inline;
+    }
+
+    .mobilePrompt,.mobileLogo {
+        display: none;
+    }
+}
diff --git a/img/Symbol.png b/img/Symbol.png
diff --git a/index.html b/index.html
@@ -33,17 +33,32 @@
 
 <body>
 
-    <div class="jumbotron text-center">
-        <img src="img/CodeWithLogoSmall.png"  class="img-fluid" height="378" width="400" alt="CodeWith - We are CodeWith. Code with us">
+    <div class="jumbotron text-center" id="header">
+<div class="mobileLogo">
+    <img src="img/Symbol.png" id="keyboardSymbol" height="100" width="200" alt="CodeWith">
+    <h1>We are CodeWith</h1>
+</div>
+
+<div class="desktopLogo">
+    <img src="img/CodeWithLogoSmall.png" height="500" width="476" alt="CodeWith">
+</div>
+        
+
     </div>
 
+
+
     <div class="container">
         <div class="row">
             <div class="col-sm-8">
-                <h2>Welcome to CodeWith</h2>
-                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
-                <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
-                <p class="">Free and informal coding support and mentoring for adults.</p>
+                <p class="lead">
+                    CodeWith provides free and informal support for adults who want
+                    to learn to code, using online resources, workshops and webinars.
+                </p>
+                <p class="lead">
+                    We want to keep everyone up to date with what's going on, so please
+                    sign up to our mailing list <span class="mobilePrompt">below</span><span class="desktopPrompt">to the right</span>
+                </p>
 
             </div>
             <div class="col-sm-4">
@@ -91,7 +106,7 @@ <h2>Subscribe to our mailing list</h2>
 
                 <!--End mc_embed_signup-->
             </div>
-         
+
         </div>
     </div>
 
