diff --git a/src/css/style.css b/src/css/style.css
index fb469da3f612967bf32759beac0ceab3eeb83a56..aa19362ec8a1b6712c9bbc7ec5a2bda56d1c86aa 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 9d153eed8af945602ab28c12987ce863855d283a..8281785ee1c2a9d86e2d9e51fd323d6c2758edd2 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>