footergit status

app/assets/stylesheets/application.scss

@@ -18,4 +18,5 @@
 @import "rails_bootstrap_forms.css";
 @import "global";
 @import "nav";
+@import "footer";
 

app/assets/stylesheets/footer.scss

@@ -0,0 +1,13 @@
+footer {
+  width: 100%;
+  a {
+    color: $primary;
+    &:hover {
+      text-decoration: none;
+    }
+  }
+
+  .outlined-box {
+    border: 2px solid $white;
+  }
+}

app/assets/stylesheets/global.scss

@@ -53,3 +53,6 @@ body{
   margin-left: 1.5rem;
 }
 
+.width-fit-content {
+  width: fit-content !important;
+}

app/views/layouts/_footer.html.erb

@@ -0,0 +1,47 @@
+<footer class="bg-black text-white mt-5 pt-5 pb-3">
+  <div class="container px-0">
+    <div class="row d-flex flex-md-row flex-column justify-content-md-between mb-5">
+      <div class="w-auto">
+        <img style="height: 80px; pointer-events: auto;" src="<%= image_url("smartcitizen_logo2.svg") %>" alt="Smart Citizen">
+      </div>
+      <div class="w-auto">
+        <div class="outlined-box p-3 row align-items-center width-fit-content">
+          <div class="col-md-auto">Follow us</div>
+          <a class="col-auto" href="https://twitter.com/smartcitizenkit">
+            <img height="36" src="<%= image_url("tw.svg") %>" alt="Twitter" />
+          </a>
+          <a class="col-md-auto" href="https://www.facebook.com/smartcitizenBCN/">
+            <img height="36" src="<%= image_url("fb.svg") %>" alt="Facebook" />
+          </a>
+          <a class="col-md-auto" href="https://www.instagram.com/smartcitizenkit/">
+            <img height="36" src="<%= image_url("in.svg") %>" alt="Instagram" />
+          </a>
+        </div>
+      </div>
+      <div class="w-auto">
+        <div class="outlined-box p-3 row align-items-center width-fit-content">
+          <div class="col-md-auto">A project by</div>
+          <div class="col-md-auto">
+            <img height="36" src="<%= image_url("logo_fablab_bcn_small.png") %>" alt="Fablab BCN" />
+          </div>
+          <div class="col-md-auto">
+            <img height="16" src="<%= image_url("iaac.png") %>" alt="IAAC">
+          </div>
+        </div>
+      </div>
+      <div class="w-auto">
+        <div class="row align-items-center width-fit-content">
+          <div class="col-md-auto d-flex justify-content-space-around flex-direction-column">
+            <img height="48" src="<%= image_url("eu_flag.png") %>" alt="" />
+          </div>
+          <div class="col-md-auto d-flex justify-content-space-around flex-direction-column mb-0">
+            <p><small>Smart Citizen has received funding from the<br />European Community’s H2020 Programme<br />under Grant Agreement No. 689954.</small></p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="row text-center">
+      <p><small>Except where otherwise noted, content on this site by Smart Citizen® is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/">Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License</a>. Check the <a rel="policy" href="https://smartcitizen.me/policy">Terms of use and Privacy Policy</a>.</small></p>
+    </div>
+  </div>
+</footer>

app/views/layouts/application.html.erb

@@ -21,5 +21,6 @@
         <%= yield %>
       </main>
     </div>
+    <%= render partial: "layouts/footer" %>
   </body>
 </html>