Footer
This commit is contained in:
ZettaScript
parent
f3f0841bb0
commit
9a6af1d0d1
GPG key ID:
3504BC6D362F7DCA
6 changed files with 194 additions and 134 deletions
|
|
@ -29,38 +29,10 @@ html, body {
|
||||||
font-family: LunaSans;
|
font-family: LunaSans;
|
||||||
}
|
}
|
||||||
|
|
||||||
header {
|
@import "header";
|
||||||
height: 48px;
|
@import "footer";
|
||||||
max-width: 1100px;
|
@import "services";
|
||||||
margin: 0 auto 16px auto;
|
@import "process";
|
||||||
padding: 0 4px;
|
|
||||||
font-size: 24px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#header-logo {
|
|
||||||
float: left;
|
|
||||||
height: 48px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#header-menu ul {
|
|
||||||
float: right;
|
|
||||||
list-style-type: none;
|
|
||||||
margin: 9px 0 0 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
#header-menu li {
|
|
||||||
display: inline-block;
|
|
||||||
margin: 0 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#header-menu a {
|
|
||||||
padding: 8px 8px;
|
|
||||||
color: black;
|
|
||||||
}
|
|
||||||
|
|
||||||
#header-menu a:hover, #header-menu a:focus {
|
|
||||||
text-shadow: 1px 2px 1px #ac44ff;
|
|
||||||
}
|
|
||||||
|
|
||||||
main {
|
main {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
@ -102,105 +74,3 @@ a, a:visited {
|
||||||
font-size: 300%;
|
font-size: 300%;
|
||||||
font-family: Amatic;
|
font-family: Amatic;
|
||||||
}
|
}
|
||||||
|
|
||||||
.need_services {
|
|
||||||
margin-top: 16px;
|
|
||||||
display: flex;
|
|
||||||
align-items: stretch;
|
|
||||||
justify-content: center;
|
|
||||||
border-right: 32px solid #ac44ff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.need_box {
|
|
||||||
flex: 38%;
|
|
||||||
font-family: Amatic;
|
|
||||||
font-size: 42px;
|
|
||||||
background: linear-gradient(0.25turn, #0294d9, #ac44ff);
|
|
||||||
color: #fff;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.service_boxes {
|
|
||||||
flex: 62%;
|
|
||||||
text-align: center;
|
|
||||||
font-family: LunaSans;
|
|
||||||
}
|
|
||||||
|
|
||||||
.service_box {
|
|
||||||
display: inline-block;
|
|
||||||
width: 144px;
|
|
||||||
padding-top: 4px;
|
|
||||||
vertical-align: top;
|
|
||||||
}
|
|
||||||
|
|
||||||
.service_box-img {
|
|
||||||
max-width: 128px;
|
|
||||||
max-height: 128px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.service_box-img_wrap {
|
|
||||||
width: 128px;
|
|
||||||
height: 128px;
|
|
||||||
margin: auto;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.service_box-link, .service_box-link:visited {
|
|
||||||
color: #000;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.service_box-link:hover, .service_box-link:focus {
|
|
||||||
text-shadow: 1px 2px 1px #ac44ff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.service_box-title {
|
|
||||||
position: relative;
|
|
||||||
top: 8px;
|
|
||||||
display: inline-block;
|
|
||||||
padding-bottom: 14px;
|
|
||||||
font-size: 24px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.process-title {
|
|
||||||
font-family: Amatic;
|
|
||||||
font-size: 42px;
|
|
||||||
background: linear-gradient(0.25turn, #0294d9, #ac44ff);
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.process_boxes {
|
|
||||||
flex: 62%;
|
|
||||||
text-align: center;
|
|
||||||
font-family: LunaSans;
|
|
||||||
}
|
|
||||||
|
|
||||||
.process_box {
|
|
||||||
display: inline-block;
|
|
||||||
width: 256px;
|
|
||||||
padding-top: 4px;
|
|
||||||
vertical-align: top;
|
|
||||||
}
|
|
||||||
|
|
||||||
.process_box-number {
|
|
||||||
display: inline-block;
|
|
||||||
width: 64px;
|
|
||||||
height: 64px;
|
|
||||||
font-size: 48px;
|
|
||||||
background: linear-gradient(-0.125turn, #0294d9, #ac44ff);
|
|
||||||
color: #fff;
|
|
||||||
border-radius: 32px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.process_box-title {
|
|
||||||
position: relative;
|
|
||||||
top: 8px;
|
|
||||||
display: inline-block;
|
|
||||||
padding-bottom: 14px;
|
|
||||||
font-size: 32px;
|
|
||||||
}
|
|
||||||
|
|
|
||||||
29
sass/css/footer.scss
Normal file
29
sass/css/footer.scss
Normal file
|
|
@ -0,0 +1,29 @@
|
||||||
|
footer {
|
||||||
|
margin-top: 32px;
|
||||||
|
background: linear-gradient(0.25turn, #0294d9, #ac44ff);
|
||||||
|
color: #fff;
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-wrapper {
|
||||||
|
display: flex;
|
||||||
|
max-width: 1100px;
|
||||||
|
padding: 16px 4px;
|
||||||
|
margin: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-pane {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer a {
|
||||||
|
color: #fdb;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer a:hover, footer a:focus {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-bigger {
|
||||||
|
font-size: 24px;
|
||||||
|
}
|
||||||
32
sass/css/header.scss
Normal file
32
sass/css/header.scss
Normal file
|
|
@ -0,0 +1,32 @@
|
||||||
|
header {
|
||||||
|
height: 48px;
|
||||||
|
max-width: 1100px;
|
||||||
|
margin: 0 auto 16px auto;
|
||||||
|
padding: 0 4px;
|
||||||
|
font-size: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#header-logo {
|
||||||
|
float: left;
|
||||||
|
height: 48px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#header-menu ul {
|
||||||
|
float: right;
|
||||||
|
list-style-type: none;
|
||||||
|
margin: 9px 0 0 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
#header-menu li {
|
||||||
|
display: inline-block;
|
||||||
|
margin: 0 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#header-menu a {
|
||||||
|
padding: 8px 8px;
|
||||||
|
color: black;
|
||||||
|
}
|
||||||
|
|
||||||
|
#header-menu a:hover, #header-menu a:focus {
|
||||||
|
text-shadow: 1px 2px 1px #ac44ff;
|
||||||
|
}
|
||||||
40
sass/css/process.scss
Normal file
40
sass/css/process.scss
Normal file
|
|
@ -0,0 +1,40 @@
|
||||||
|
.process-title {
|
||||||
|
font-family: Amatic;
|
||||||
|
font-size: 42px;
|
||||||
|
background: linear-gradient(0.25turn, #0294d9, #ac44ff);
|
||||||
|
color: #fff;
|
||||||
|
margin-top: 16px;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.process_boxes {
|
||||||
|
flex: 62%;
|
||||||
|
text-align: center;
|
||||||
|
font-family: LunaSans;
|
||||||
|
}
|
||||||
|
|
||||||
|
.process_box {
|
||||||
|
display: inline-block;
|
||||||
|
width: 256px;
|
||||||
|
padding-top: 4px;
|
||||||
|
vertical-align: top;
|
||||||
|
margin: 8px 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.process_box-number {
|
||||||
|
display: inline-block;
|
||||||
|
width: 64px;
|
||||||
|
height: 64px;
|
||||||
|
font-size: 48px;
|
||||||
|
background: linear-gradient(-0.125turn, #0294d9, #ac44ff);
|
||||||
|
color: #fff;
|
||||||
|
border-radius: 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.process_box-title {
|
||||||
|
position: relative;
|
||||||
|
top: 8px;
|
||||||
|
display: inline-block;
|
||||||
|
padding-bottom: 14px;
|
||||||
|
font-size: 32px;
|
||||||
|
}
|
||||||
64
sass/css/services.scss
Normal file
64
sass/css/services.scss
Normal file
|
|
@ -0,0 +1,64 @@
|
||||||
|
.need_services {
|
||||||
|
margin-top: 16px;
|
||||||
|
display: flex;
|
||||||
|
align-items: stretch;
|
||||||
|
justify-content: center;
|
||||||
|
border-right: 32px solid #ac44ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.need_box {
|
||||||
|
flex: 38%;
|
||||||
|
font-family: Amatic;
|
||||||
|
font-size: 42px;
|
||||||
|
background: linear-gradient(0.25turn, #0294d9, #ac44ff);
|
||||||
|
color: #fff;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.service_boxes {
|
||||||
|
flex: 62%;
|
||||||
|
text-align: center;
|
||||||
|
font-family: LunaSans;
|
||||||
|
}
|
||||||
|
|
||||||
|
.service_box {
|
||||||
|
display: inline-block;
|
||||||
|
width: 144px;
|
||||||
|
padding-top: 4px;
|
||||||
|
vertical-align: top;
|
||||||
|
margin: 0 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.service_box-img {
|
||||||
|
max-width: 128px;
|
||||||
|
max-height: 128px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.service_box-img_wrap {
|
||||||
|
width: 128px;
|
||||||
|
height: 128px;
|
||||||
|
margin: auto;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.service_box-link, .service_box-link:visited {
|
||||||
|
color: #000;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.service_box-link:hover, .service_box-link:focus {
|
||||||
|
text-shadow: 1px 2px 1px #ac44ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.service_box-title {
|
||||||
|
position: relative;
|
||||||
|
top: 8px;
|
||||||
|
display: inline-block;
|
||||||
|
padding-bottom: 14px;
|
||||||
|
font-size: 24px;
|
||||||
|
}
|
||||||
|
|
@ -29,5 +29,30 @@
|
||||||
</nav>
|
</nav>
|
||||||
</header>
|
</header>
|
||||||
{% block body %}{% endblock body %}
|
{% block body %}{% endblock body %}
|
||||||
|
<footer>
|
||||||
|
<div class="footer-wrapper">
|
||||||
|
<div class="footer-pane">
|
||||||
|
<a href="/services" class="footer-bigger">Nos produits & services</a>
|
||||||
|
<ul>
|
||||||
|
<li><a href="/matériel">Installation matérielle</a></li>
|
||||||
|
<li><a href="/logiciel">Installation et configuration logicielles</a></li>
|
||||||
|
<li><a href="/formation">Formations</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="footer-pane">
|
||||||
|
<a href="/contact" class="footer-bigger">Contactez-nous</a>
|
||||||
|
<ul>
|
||||||
|
<li><a href="tel:+33782306653">07.82.30.66.53</a></li>
|
||||||
|
<li><a href="mailto:info@librezo.com">info@librezo.com</a></li>
|
||||||
|
</ul>
|
||||||
|
<a href="https://git.txmn.tk/tuxmain/librezo">Code source du site</a>
|
||||||
|
</div>
|
||||||
|
<div class="footer-pane">
|
||||||
|
<p>
|
||||||
|
Librezo propose une alternative aux services en ligne en favorisant l'auto-hébergement. Avec Debian 11 et ses solutions logicielles installées sur votre serveur, reprendre et garder le contrôle de vos données n'a jamais été aussi facile.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue