improve the introduction

Author: automaticdai

content/_index.md

@@ -5,7 +5,10 @@ draft: false
 menu: true
 ---
 
-## About us
+## About YFRL
+
 YF Robotics Laboratory (YFRL) is an international robotics organisation. YFRL was founded with the vision that robots will contribute to humanity and largely affect the way how people will live in the future. Our mission is to promote STEM and robot education and bring ideas to the public with state-of-the-art robot research and technologies across the world.
 
-We are a group of people from worldwide who love robots. We aim to bring together robot researchers, developers and enthusiasts to build a world with more intelligent, reliable and safer autonomous robots. Please join us by telling us which robot sections you are involved in and what you may be able to contribute to the organisation at [email protected].
+We are a group of people from worldwide who love robots. We aim to bring together robot researchers, developers and enthusiasts to build a world with more intelligent, reliable and safer autonomous robots. 
+
+Please help us by telling us which robot activities you are involved in and what you may be able to contribute to the organisation by sending an email to [email protected].

content/contact.md

@@ -5,11 +5,12 @@ draft: false
 menu: true
 ---
 
-Follow us on Twitter: <a href="https://twitter.com/yfrobotics">@yfrobotics</a>
+**Address**
 
-Address:  
 YF Robotics Laboratory  
-Birmingham, West Midland  
-United Kingdom  
-  
+Birmingham, West Midland, United Kingdom  
+
+**Contact**
+
+Follow us on Twitter: <a href="https://twitter.com/yfrobotics">@yfrobotics</a>  
 Email: [email protected]  

layouts/index.html

@@ -1,23 +1,20 @@
 {{ define "main" }}
 
-<div style="display: flex-container;">
-  
-  <section class="container">
-    <div class="row">
-      <!-- header image -->
-      <img src="images/pepper_robot.jpg" class="img-fluid" alt="Pepper robot">
-    </div>
-  </section>
-  
-  <section class="container">
-    <div class="row justify-content-center minisection">
+<!-- introduction -->
+<div class="div-padding bg-color-black fg-color-white">
+  <section class="container clearfix">
+    <img src="images/pepper_side.jpg" class="float-right" alt="..." style="height:500px; width:auto;">
+    <div class="row minisection">
       <!-- Note that the content for index.html, as a sort of list page, will pull from content/_index.md -->
       {{ .Content }}
     </div>
   </section>
+</div>
 
-  <section class="container">
-    <div class="row justify-content-center minisection">
+<!-- education -->
+<div class="div-padding">
+  <section class="container clearfix">
+    <div class="row minisection">
     {{ with .Site.GetPage "/education" }} 
       <h2>{{ .Title }}</h2>
       {{ .Content }}
@@ -30,29 +27,41 @@ <h3 class="text-center">{{ .Title }}</h3>
     {{ end }}
     </div>
   </section>
-  
+</div>
+
+<!-- contribution -->
+<div class="div-padding bg-color-grey">  
   <section class="container">
-    <div class="row justify-content-center minisection">
     {{ with .Site.GetPage "/contribution" }} 
       <h2>{{ .Title }}</h2>
       {{ .Content }}
+      <div class="row minisection">
       {{range .Pages.ByParam "order"}}
         <div class="col-sm">
         <h3 class="text-center">{{ .Title }}</h3>
         {{ .Content }}
         </div>
       {{ end }}
+      </div>
     {{ end }}
-    </div>
   </section>
+</div>
 
+<!-- contact -->
+<div class="div-padding">
   <section class="container">
     {{ with .GetPage "contact"}} 
-      <h2 class="text-center">{{ .Title }}</h2>
-      {{ .Content}}
+      <h2>{{ .Title }}</h2>
+      <div class="row">
+        <div class="col-6">
+          <img src="images/map.png" class="img-fluid" alt="Responsive image">
+        </div>
+        <div class="col-4">
+          {{ .Content}}
+        </div>
+      </div>
     {{ end}}
   </section>
-  
 </div>
 
 {{ end }}

layouts/partials/footer.html

@@ -1,6 +1,6 @@
 <footer class="text-muted">
     <p class="float-right">
-      <a href="#">Back to top</a>
+      <a href="#" style="padding-right: 20px;">Back to top</a>
     </p>
     <div class="text-center" style="background: #000000; color: #fefefe;">
       <p>Copyright © {{ now.Format "2006" }} {{.Site.Title}}</p>

static/css/style.css

@@ -12,13 +12,26 @@ h3 {
 
 body {
   font-size: 1.2em;
+  color: #0e0e0e;
+}
+
+.div-padding {
+  padding-top: 20px;
+  padding-bottom: 20px;
 }
 
 .minisection {
-  margin-top: 20px;
-  margin-bottom: 20px;
+  ;
 }
 
-.bg1 {
+.bg-color-grey {
   background-color: #eeeeee;
 }
+
+.bg-color-black {
+  background-color: #000000; 
+}
+
+.fg-color-white {
+  color: #fefefe;
+}