Change the footer
continuous-integration/drone/push Build is passing Details

pull/1/head
Colin FRIZOT 2 years ago
parent 205ffd40cf
commit 563d4b8c73

@ -1,7 +1,10 @@
body{ body{
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-between;
height: 100vh; height: 100vh;
margin: 0; margin: 0;
} }
main {
flex: 1;
}

@ -4,15 +4,71 @@
padding: .5rem 1rem; padding: .5rem 1rem;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center;
justify-content: space-between; justify-content: space-between;
gap: 4rem;
} }
.sandkasten-logo { /* Logo and copyrights*/
width: 4rem; .rights {
height: auto; display: grid;
aspect-ratio: 1; grid: 'logo title' auto 'copyright copyright' / auto 1fr;
gap: .5rem;
color: #FFFFFF;
.sandkasten-logo {
grid-area: logo;
width: 4rem;
height: auto;
aspect-ratio: 1;
}
.title {
grid-area: title;
display: flex;
align-items: flex-end;
font-size: 1.25rem;
font-weight: 600;
}
.copyright {
grid-area: copyright;
font-size: 1rem;
}
} }
/*Navigation*/
.navigation {
display: flex;
flex-direction: row;
gap: 3rem;
color: #818181;
.about, .legals {
display: flex;
flex-direction: column;
gap: .5rem;
.title {
color: #FFFFFF;
text-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
}
.links {
display: flex;
flex-direction: column;
gap: .25rem;
> a {
color: #818181;
text-decoration: none;
transition: color .3s ease;
}
:hover {
color: #FFFFFF;
}
}
}
}

@ -1,9 +1,56 @@
<div class="footer" > <div class="footer" >
<!-- Logo and copyrights-->
<div class="rights">
<img class="sandkasten-logo"
routerLink=""
routerLinkActive="active"
[routerLinkActiveOptions]="{ exact: true }"
[src]="sandkasten_logo" alt="Logo-Sandkasten" />
<div class="title">Sandkasten</div>
<div class="copyright">©2023 Sandkasten, Inc. All Rights Reserved</div>
</div>
<img class="sandkasten-logo" <!-- Navigation-->
routerLink="" <div class="navigation">
routerLinkActive="active" <div class="about">
[routerLinkActiveOptions]="{ exact: true }" <span class="title">ABOUT SANDKASTEN</span>
[src]="sandkasten_logo" alt="Logo-Sandkasten" /> <div class="links">
<!-- TODO - Add the router links -->
<a
routerLink=""
routerLinkActive="active"
[routerLinkActiveOptions]="{ exact: true }"
>Our story</a>
<a
routerLink=""
routerLinkActive="active"
[routerLinkActiveOptions]="{ exact: true }"
>Contact us</a>
</div>
</div>
<div class="legals">
<span class="title">LEGAL</span>
<div class="links">
<!-- TODO - Add the router links -->
<a
routerLink=""
routerLinkActive="active"
[routerLinkActiveOptions]="{ exact: true }"
>Terms of service</a>
<a
routerLink=""
routerLinkActive="active"
[routerLinkActiveOptions]="{ exact: true }"
>Privacy</a>
</div>
</div>
</div>
<!-- Socials-->
<div class="socials">
<!-- TODO - Add the socials icons-->
<div>Socials</div>
</div>
</div> </div>

Loading…
Cancel
Save