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;
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
@import "header";
|
||||
@import "footer";
|
||||
@import "services";
|
||||
@import "process";
|
||||
|
||||
main {
|
||||
width: 100%;
|
||||
|
|
@ -102,105 +74,3 @@ a, a:visited {
|
|||
font-size: 300%;
|
||||
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>
|
||||
</header>
|
||||
{% 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>
|
||||
</html>
|
||||
|
|
|
|||
Loading…
Reference in a new issue