Skip to content
Snippets Groups Projects
Commit 35f7cfdf authored by Bernard Roland (Student Com20)'s avatar Bernard Roland (Student Com20)
Browse files

Added styling to the footer

parent daf1de65
No related branches found
No related tags found
1 merge request!1Adding css
Hide whitespace changes
Inline Side-by-side
src/css/style.css
+ 36
− 2
View file @ 35f7cfdf
...@@ -177,6 +177,41 @@ h4 { ...@@ -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 { a {
text-decoration: none; text-decoration: none;
transition: box-shadow 300ms ease; transition: box-shadow 300ms ease;
...@@ -280,9 +315,8 @@ nav a { ...@@ -280,9 +315,8 @@ nav a {
@media screen and (min-width: 1280px) { @media screen and (min-width: 1280px) {
body { body {
padding-top: 100px; padding: 5rem 0;
} }
.hero-section .hero-container { .hero-section .hero-container {
height: calc(100vh - 100px); height: calc(100vh - 100px);
} }
......
src/index.html
+ 21
− 31
View file @ 35f7cfdf
...@@ -18,14 +18,14 @@ ...@@ -18,14 +18,14 @@
<body> <body>
<div class="page-container"> <div class="page-container">
<main> <main>
<section class="hero-section"> <section class="hero-section" id="hero">
<div class="hero-container"> <div class="hero-container">
<header> <header>
<a href="index.html"> <a href="index.html">
<img src="img/logo.svg" alt="Logo" width="100" height="35"> <img src="img/logo.svg" alt="Logo" width="100" height="35">
</a> </a>
<nav> <nav>
<a href="#">Home</a> <a href="#hero">Home</a>
<a href="#team">Team</a> <a href="#team">Team</a>
<a href="#contact">Contact</a> <a href="#contact">Contact</a>
</nav> </nav>
...@@ -173,35 +173,25 @@ ...@@ -173,35 +173,25 @@
</section> </section>
</main> </main>
<footer> <footer>
<table> <div class="content-container footer-container">
<tr> <div class="footer-copyright">
<td> <img src="img/logo.svg" alt="Logo" width="70" height="24">
<div> <p>
<img src="img/logo.svg" alt="Logo" width="70" height="24"> <br> &copy; <a href="index.html">ryoko</a>, 2021
<div> </p>
&copy; <a href="index.html">ryoko</a>, 2021 <br> <p>
All rights reserved. All rights reserved.
</div> </p>
</div> </div>
</td> <div class="footer-more">
<td> <h3>Find out more!</h3>
<div> <div class="footer-nav">
<h3>Find out more!</h3> <a href="#hero">Home</a>
<ul> <a href="#team">Team</a>
<li> <a href="#contact">Contact</a>
<a href="index.html">Home</a> </div>
</li> </div>
<li> </div>
<a href="index.html#team">Team</a>
</li>
<li>
<a href="index.html#contact">Contact</a>
</li>
</ul>
</div>
</td>
</tr>
</table>
</footer> </footer>
</div> </div>
</body> </body>
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment