Change style for 25th Feb worship

Author: ticidesign

css/main.css

@@ -6,48 +6,60 @@ html, body{
 body{
     display: flex;
     flex-direction: column;
-    background-color: #ffffff;
+    justify-content: center;
+    align-items: center;
+    background: #fee13d url(../img/woman.jpg) no-repeat bottom right;
+    height: 100vh;
     min-height: 575px;
-    font-family: 'Source Sans Pro', sans-serif;;
+    font-family: 'Source Sans Pro', sans-serif;
+    font-size: 16px;
 }
 
 header{
     box-sizing: border-box;
     flex: 0 1 auto;
-    background-color: #AD1457;
-    color: white;
 }
 
 section{
+    width: 100%;
     box-sizing: border-box;
     flex: 2 auto;
+    /*display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;*/
 }
 
-footer{
-    background-color: #eeeeee;
+footer {
+    width: calc( 100% - 60px);
+    background-color: #000000;
     font-family: Georgia,serif;
-    color: #9E9E9E;
+    color: #ffffff;
     text-decoration: none;
     font-size: 0.9rem;
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    right: 0;
     padding: 0 30px;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
 }
 
+img {
+    width: 100%;
+    max-width: 500px;
+}
 h1, #logo{
     text-align: center;
 }
 
 h1{
-    margin: 50px;
+    margin: 0 50px 50px 50px;
     font-size: 35px;
 }
 
 .settings {
     margin: 0 auto;
-    max-width: 900px;
+    max-width: 600px;
 }
 
 .settings > p {
@@ -70,18 +82,18 @@ footer a {
 }
 
 footer a:hover {
-    color: #000000;
+    color: #ffffff;
 }
 
 #surprise {
     color: red;
     font-size: 35px;
 }
 
-.float-left {
+/*.float-left {
     float: left;
  }
 
 .float-right {
     float: right;
-}
+}*/

img/woman.jpg

@@ -30,20 +30,20 @@ <h1>Hello everyone. Let's do some interactive coding today! </h1>
 </section>
 
 <footer>
-  <ul class="float-left">
+  <ul>
     <li class="twitter">
-      Twitter: <a href="https://twitter.com/NodeGirlsSydney">@NodeGirlsSydney</a>
-      <a href="https://twitter.com/NodeGirlsMelb">@NodeGirlsMelb</a>
+      Twitter: <a href="https://twitter.com/NodeGirlsSydney" target="_blank">@NodeGirlsSydney</a>
+      <a href="https://twitter.com/NodeGirlsMelb" target="_blank">@NodeGirlsMelb</a>
     </li>
-    <li class="facebook">Facebook: <a href="https://www.facebook.com/NodeGirlsAustralia">NodeGirlsAustralia</a></li>
+    <li class="facebook">Facebook: <a href="https://www.facebook.com/NodeGirlsAustralia" target="_blank">NodeGirlsAustralia</a></li>
   </ul>
-  <ul class="float-right">
-    <li class="website">Website: <a href="http://nodegirls.com.au">http://nodegirls.com.au</a></li>
-    <li class="email">e-mail: <a href="mailto:info@nodegirls.com.au">info@nodegirls.com.au</a></li>
+  <ul>
+    <li class="website">Website: <a href="http://nodegirls.com.au" target="_blank">nodegirls.com.au</a></li>
+    <li class="email">e-mail: <a href="mailto:info@nodegirls.com.au" target="_blank">info@nodegirls.com.au</a></li>
   </ul>
 </footer>
 
 <script src="js/level1.js"></script>
 
 </body>
-</html>
+</html>