Commit ff03485f authored by Jérémy GAILLARD's avatar Jérémy GAILLARD
Browse files

feat: amélioration mise en page header

parent 6242bbc4
<template>
<header>
<a href="https://www.toodego.com/connect/" target="_blank"><img class="logo_left" src="../static/toodego.svg" alt="Logo_Toodego" ></a>
<a href="https://www.toodego.com/connect/" target="_blank" class="toodego_link"><img class="logo_left" src="../static/toodego.svg" alt="Logo_Toodego" ></a>
<div class="text">
<p> <b>Facilitez vous la ville</b> </p>
<p> pendant le confinement ! </p>
<p> <b>Facilitez vous la ville</b> <br/> pendant le confinement ! </p>
</div>
<div class="right">
<div class="nav-toolbar" @click='stats("ClickHome")'>
......@@ -42,43 +41,38 @@ export default {
header {
display: flex;
align-items: center;
padding: 0.5% 10% 0.2% 10%;
padding: 0.5% 10% 0.2% 10%;
justify-content: space-between;
}
a {
float:left;
font-size: 0.9vw;
font-size: 90%;
font-weight: bold;
margin: 0 3%;
color: black;
text-decoration: none;
outline: 0;
}
logo_left{
max-width: 100%;
.logo_left{
float: left;
}
.text p{
text-align: left;
margin: 0;
}
.right {
display: flex;
right: 10%;
position: absolute;
justify-content: flex-end;
flex-grow: 1;
justify-content:flex-end;
}
label {
background-color: var(--very-light-grey);
.nav-toolbar {
margin: 0 5%
}
.nav-toolbar{
margin: 0 25%;
label {
background-color: var(--very-light-grey);
}
a:hover{
......@@ -95,6 +89,13 @@ a:hover{
border-bottom: 2px solid var(--medium-red);
}
@media (max-width: 700px) {
.text p{
display: none;
}
}
/* mobile */
@media (max-width: 600px) {
......@@ -102,17 +103,11 @@ a:hover{
padding: 0.5% 0;
}
logo_left{
max-width: 60%;
}
.text p{
display: none;
.right {
justify-content: space-around;
margin-right: 10%
}
.nav-toolbar{
margin: 0 10%;
}
a {
font-size: 3vw;
}
......
Supports Markdown
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