Primer pas al frontal de visitants
This commit is contained in:
parent
3af40cc7bc
commit
826741a381
|
|
@ -180,6 +180,7 @@ body, dialog {
|
|||
color: var(--numerus--text-color);
|
||||
}
|
||||
|
||||
|
||||
img, picture, video, canvas, svg {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
|
|
@ -262,26 +263,6 @@ tbody tr:nth-child(even) {
|
|||
background-color: var(--numerus--header--background-color);
|
||||
}
|
||||
|
||||
.web {
|
||||
margin: 8.5rem 4rem;
|
||||
background-color: var(--numerus--header--background-color);
|
||||
}
|
||||
|
||||
.web h1 {
|
||||
padding-bottom: .9375em;
|
||||
border-bottom: 1px solid var(--numerus--color--black);
|
||||
margin-bottom: .625em;
|
||||
}
|
||||
|
||||
#login {
|
||||
background-color: var(--numerus--color--hay);
|
||||
padding: 1.25em;
|
||||
}
|
||||
|
||||
#login h2 {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
div[role="alert"].error {
|
||||
padding: 1.25em;
|
||||
background-color: var(--numerus--color--red);
|
||||
|
|
@ -10237,3 +10218,154 @@ div[x-data="snackbar"] div[role="alert"].enter.end, div[x-data="snackbar"] div[r
|
|||
.ri-zzz-line:before {
|
||||
content: '\f2df';
|
||||
}
|
||||
|
||||
|
||||
/* web */
|
||||
|
||||
|
||||
|
||||
.web {
|
||||
margin: 3rem;
|
||||
background-color: var(--numerus--header--background-color);
|
||||
}
|
||||
|
||||
.web h1 {
|
||||
padding-bottom: .9375em;
|
||||
border-bottom: 1px solid var(--numerus--color--black);
|
||||
}
|
||||
|
||||
#login {
|
||||
background-color: var(--numerus--color--hay);
|
||||
padding: 1.25em;
|
||||
}
|
||||
|
||||
#login h2 {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
.contenidor {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
padding: 5rem 0;
|
||||
border-bottom: 1px solid var(--numerus--color--black);
|
||||
}
|
||||
|
||||
.graella {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(6, 1fr);
|
||||
grid-template-rows: repeat(3, 1fr);
|
||||
grid-column-gap: 0px;
|
||||
grid-row-gap: 0px;
|
||||
}
|
||||
|
||||
.caixa {
|
||||
|
||||
}
|
||||
|
||||
.caixa-1 {
|
||||
grid-area: 1 / 1 / 2 / 3;
|
||||
background: var(--numerus--color--yellow);
|
||||
font-size: calc(16px + 5vw);
|
||||
display: grid;
|
||||
align-content: center;
|
||||
justify-content: start;
|
||||
border-bottom: 1px solid var(--numerus--color--black);
|
||||
}
|
||||
.caixa-2 {
|
||||
grid-area: 1 / 3 / 2 / 6;
|
||||
padding: 1rem;
|
||||
border-bottom: 1px solid var(--numerus--color--black);
|
||||
}
|
||||
.caixa-3 {
|
||||
grid-area: 1 / 6 / 2 / 7;
|
||||
background: var(--numerus--color--white);
|
||||
border-bottom: 1px solid var(--numerus--color--black);
|
||||
}
|
||||
.caixa-4 {
|
||||
grid-area: 2 / 1 / 3 / 3;
|
||||
border-bottom: 1px solid var(--numerus--color--black);
|
||||
}
|
||||
.caixa-5 {
|
||||
grid-area: 2 / 3 / 3 / 4;
|
||||
background: var(--numerus--color--red);
|
||||
padding: 1rem;
|
||||
border-bottom: 1px solid var(--numerus--color--black);
|
||||
}
|
||||
.caixa-6 {
|
||||
grid-area: 2 / 4 / 3 / 5;
|
||||
border-bottom: 1px solid var(--numerus--color--black);
|
||||
}
|
||||
.caixa-7 {
|
||||
grid-area: 2 / 5 / 3 / 7;
|
||||
background: var(--numerus--color--green);
|
||||
font-size: calc(16px + 5vw);
|
||||
display: grid;
|
||||
align-content: center;
|
||||
justify-content: end;
|
||||
border-bottom: 1px solid var(--numerus--color--black);
|
||||
}
|
||||
.caixa-8 {
|
||||
grid-area: 3 / 1 / 4 / 2;
|
||||
background: var(--numerus--color--black);
|
||||
color: var(--numerus--color--white);
|
||||
padding: 1rem;
|
||||
border-bottom: 1px solid var(--numerus--color--black);
|
||||
}
|
||||
.caixa-9 {
|
||||
grid-area: 3 / 2 / 4 / 7;
|
||||
font-size: calc(16px + 5vw);
|
||||
display: grid;
|
||||
align-content: center;
|
||||
justify-content: end;
|
||||
border-bottom: 1px solid var(--numerus--color--black);
|
||||
}
|
||||
|
||||
|
||||
/* web responsive */
|
||||
|
||||
@media screen and (max-width: 992px) {
|
||||
|
||||
.contenidor {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(1, 1fr);
|
||||
}
|
||||
.graella {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
grid-template-rows: repeat(5, 1fr);
|
||||
grid-column-gap: 0px;
|
||||
grid-row-gap: 0px;
|
||||
}
|
||||
.caixa-1 {
|
||||
grid-area: 1 / 1 / 2 / 2; /* posició 1*/
|
||||
}
|
||||
.caixa-2 {
|
||||
grid-area: 1 / 2 / 2 / 3; /* posició 2*/
|
||||
}
|
||||
.caixa-3 {
|
||||
grid-area: 2 / 1 / 3 / 2; /* posició 3*/
|
||||
}
|
||||
.caixa-4 {
|
||||
grid-area: 5 / 1 / 6 / 2; /* posició 7*/
|
||||
display: none;
|
||||
}
|
||||
.caixa-5 {
|
||||
grid-area: 2 / 2 / 3 / 3; /*posició 4*/
|
||||
}
|
||||
.caixa-6 {
|
||||
grid-area: 5 / 2 / 6 / 3; /* posició 8*/
|
||||
display: none;
|
||||
}
|
||||
.caixa-7 {
|
||||
grid-area: 3 / 1 / 4 / 2; /* posició 5*/
|
||||
justify-content: start;
|
||||
}
|
||||
.caixa-8 {
|
||||
grid-area: 3 / 2 / 4 / 3; /* posició 6*/
|
||||
}
|
||||
.caixa-9 {
|
||||
grid-area: 4 / 1 / 5 / 3; /* posició 9*/
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,6 +3,22 @@
|
|||
{{- end }}
|
||||
|
||||
{{ define "content" -}}
|
||||
<h1><img src="/static/numerus.svg" alt="Numerus" width="620" height="77"></h1>
|
||||
<a href="/login">{{( pgettext "Login" "title" )}}</a>
|
||||
|
||||
<h1><img src="/static/numerus.svg" alt="Numerus" width="261" height="33"></h1>
|
||||
<div class="contenidor">
|
||||
<p>Si vols accedir al teu usuari només has d'anar a la pàgina d'<a href="/login">entrada</a> i apuntar les teves credencials al seu lloc.</p>
|
||||
</div>
|
||||
<div class="graella">
|
||||
<div class="caixa caixa-1"><p>gestor</p></div>
|
||||
<div class="caixa caixa-2"></div>
|
||||
<div class="caixa caixa-3"> </div>
|
||||
<div class="caixa caixa-4"> </div>
|
||||
<div class="caixa caixa-5"><p>Eina per simplificar la gestió d'autònoms i petites empreses.</p></div>
|
||||
<div class="caixa caixa-6"> </div>
|
||||
<div class="caixa caixa-7"><p>79%</p></div>
|
||||
<div class="caixa caixa-8">Redueix el temps de gestió, tingues controlats els teus números.</div>
|
||||
<div class="caixa caixa-9"><p>aplicació</p></div>
|
||||
</div>
|
||||
|
||||
|
||||
{{- end }}
|
||||
|
|
|
|||
Loading…
Reference in New Issue