From 35f7cfdf8f097b8820763955e3cc280785352ebd Mon Sep 17 00:00:00 2001
From: Roland Bernard <rolbernard@unibz.it>
Date: Mon, 5 Apr 2021 18:33:37 +0200
Subject: [PATCH] Added styling to the footer
---
src/css/style.css | 38 ++++++++++++++++++++++++++++++++--
src/index.html | 52 +++++++++++++++++++----------------------------
2 files changed, 57 insertions(+), 33 deletions(-)
diff --git a/src/css/style.css b/src/css/style.css
index fb469da..aa19362 100644
--- a/src/css/style.css
+++ b/src/css/style.css
@@ -177,6 +177,41 @@ h4 {
}
}
+footer .footer-container {
+ display: flex;
+ flex-direction: row;
+ flex-wrap: nowrap;
+ align-items: center;
+ justify-content: center;
+ text-align: center;
+}
+
+footer .footer-copyright {
+ flex: 1 1 100%;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+}
+
+footer .footer-more {
+ flex: 1 1 100%;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+}
+
+footer .footer-nav {
+ flex: 1 1 100%;
+ display: flex;
+ flex-direction: column;
+ align-items: start;
+ justify-content: center;
+}
+
+
+
a {
text-decoration: none;
transition: box-shadow 300ms ease;
@@ -280,9 +315,8 @@ nav a {
@media screen and (min-width: 1280px) {
body {
- padding-top: 100px;
+ padding: 5rem 0;
}
-
.hero-section .hero-container {
height: calc(100vh - 100px);
}
diff --git a/src/index.html b/src/index.html
index 9d153ee..8281785 100644
--- a/src/index.html
+++ b/src/index.html
@@ -18,14 +18,14 @@
<body>
<div class="page-container">
<main>
- <section class="hero-section">
+ <section class="hero-section" id="hero">
<div class="hero-container">
<header>
<a href="index.html">
<img src="img/logo.svg" alt="Logo" width="100" height="35">
</a>
<nav>
- <a href="#">Home</a>
+ <a href="#hero">Home</a>
<a href="#team">Team</a>
<a href="#contact">Contact</a>
</nav>
@@ -173,35 +173,25 @@
</section>
</main>
<footer>
- <table>
- <tr>
- <td>
- <div>
- <img src="img/logo.svg" alt="Logo" width="70" height="24"> <br>
- <div>
- © <a href="index.html">ryoko</a>, 2021 <br>
- All rights reserved.
- </div>
- </div>
- </td>
- <td>
- <div>
- <h3>Find out more!</h3>
- <ul>
- <li>
- <a href="index.html">Home</a>
- </li>
- <li>
- <a href="index.html#team">Team</a>
- </li>
- <li>
- <a href="index.html#contact">Contact</a>
- </li>
- </ul>
- </div>
- </td>
- </tr>
- </table>
+ <div class="content-container footer-container">
+ <div class="footer-copyright">
+ <img src="img/logo.svg" alt="Logo" width="70" height="24">
+ <p>
+ © <a href="index.html">ryoko</a>, 2021
+ </p>
+ <p>
+ All rights reserved.
+ </p>
+ </div>
+ <div class="footer-more">
+ <h3>Find out more!</h3>
+ <div class="footer-nav">
+ <a href="#hero">Home</a>
+ <a href="#team">Team</a>
+ <a href="#contact">Contact</a>
+ </div>
+ </div>
+ </div>
</footer>
</div>
</body>
--
GitLab