Article header, Devis mail template, Fix css name and Fix menu button

Signed-off-by: Adrien Kara <adrien@iglou.eu>
This commit is contained in:
Adrien Kara 2022-02-10 02:17:32 +01:00
parent b96e3a8a10
commit e9344bdc2b
Signed by: adrien
GPG Key ID: 605B69551C56DB62
2 changed files with 252 additions and 59 deletions

View File

@ -20,34 +20,74 @@
</p>
<![endif]-->
<header class="page-header">
<a href="#" class="header-logo" aria-label="Logo Iglou.eu" title="Remonter la page">
<svg class="svg-icon">
<use xlink:href="#svg-iglou"></use>
<header class="page_header">
<a href="#" class="header_logo" aria-label="Logo Iglou.eu" title="Remonter la page">
<svg class="svg_icon">
<use xlink:href="#svg_iglou"></use>
</svg>
</a>
<nav class="header-nav" aria-label="Menu">
<ul class="header-menu">
<li class="menu-entry">
<a href="#" class="menu-entry link">Avantages</a>
<nav class="header_nav" aria-label="Menu">
<ul class="header_menu">
<li class="menu_entry">
<a href="#" class="menu_entry link">Avantages</a>
</li>
<li class="menu-entry">
<a href="#" class="menu-entry link">Services</a>
<li class="menu_entry">
<a href="#" class="menu_entry link">Services</a>
</li>
<li class="menu-entry">
<a href="#" class="menu-entry link">Questions</a>
<li class="menu_entry">
<a href="#" class="menu_entry link">Questions</a>
</li>
<li class="menu-entry">
<a href="#" class="menu-entry link contact">Me contacter</a>
<li class="menu_entry">
<a href="#" class="menu_entry button contact"><span>Contact</span></a>
</li>
</ul>
</nav>
</header>
<main id="main" class="main">
<article class="article">
<h2>Lorem ipsum</h2>
<p>Lorem ipsum dolor sit amet.</p>
<article id="a_primary" class="article">
<div class="hero">
<h1 class="hero__title">Je&#8239;développe&#8239;pour&#8239;vous&thinsp;ce&#8239;qui&#8239;n'existe&#8239;pas.</h1>
<p class="hero__text">Avec plus de 10 ans d'expériences, dans la creation de Logiciels, d'Applications Web & d'API. J'apporte mon expertise dans le solutionement de vos problematiques</p>
<a href="mailto:contact@iglou.eu?subject=%5BDevis%5D%20Cr%C3%A9ation%20sur%20mesure&body=Bonjour%20Adrien%2C%0A%3CVotre%20message%3E%0A%0A%0ANous%20avons%20un%20projet%20%28cocher%20la%20case%20correspondante%29%20%3A%0A-%20%5B%20%5D%20Cr%C3%A9ation%20logicielle%0A-%20%5B%20%5D%20Application%20web%0A-%20%5B%20%5D%20Cr%C3%A9ation%2FExploitation%20API%0A-%20%5B%20%5D%20Automatisation%2FScrapping%0A%0AAvec%20un%20budget%20entre%20...%20et%20...%20%E2%82%AC%0A%0ALe%20projet%20en%20quelques%20lignes%20%3A%0A%3CDescription%20du%20projet%3E%0A%0A%0ACordialement%2C" class=" button with_icon contact">
<svg class="svg_icon">
<use xlink:href="#svg_paperplane"></use>
</svg>
<span>
Demander un devis
</span>
</a>
</div>
<div class="services_preview">
<div class="services_preview__item">
<div class="services_preview__item_icon">
<svg class="svg_icon">
<use xlink:href="#svg_software"></use>
</svg>
</div>
<a href="#" class="services_preview__item_title">Logiciel</a>
<p class="services_preview__item_text">Creation de logiciel blablabla machin truc Creation de logiciel blablabla machin truc</p>
</div>
<div class="services_preview__item">
<div class="services_preview__item_icon">
<svg class="svg_icon">
<use xlink:href="#svg_webapp"></use>
</svg>
</div>
<a href="#" class="services_preview__item_title">Web</a>
<p class="services_preview__item_text">Et le web, la aussi c'est des machin avec des machines mais pas que</p>
</div>
<div class="services_preview__item">
<div class="services_preview__item_icon">
<svg class="svg_icon">
<use xlink:href="#svg_api"></use>
</svg>
</div>
<a href="#" class="services_preview__item_title">API</a>
<p class="services_preview__item_text">We les api c'est cool, et voila quoi We les api c'est cool, et voila quoi</p>
</div>
</div>
</div>
</article>
<article class="article">
@ -65,11 +105,28 @@
</footer>
<svg hidden>
<symbol id="svg-iglou" viewBox="0 0 332 105">
<symbol id="svg_iglou" viewBox="0 0 332 105">
<title>Iglou.eu</title>
<!-- DissolveRegular created by FontForge 20090622 at Mon Jun 4 15:21:10 2018 By deploy user -->
<path d="m67.5 52.5v25c0 3.4-0.65 6.6-2 9.6s-3.1 5.7-5.4 8-4.9 4-8 5.4-6.3 2-9.8 2c-2 6e-3 -4.1-0.14-6.1-0.43-1.1-0.17-2.3-0.39-3.4-0.67-1.4-0.36-2.9-0.81-4.2-1.4-1.2-0.48-2.3-1.1-3.4-1.7-1.3-0.79-2.5-1.7-3.6-2.8-0.62-0.61-1.2-1.3-1.7-2-1.4-1.8-2.2-3.8-2.4-6h9c0.4 1.1 0.93 2.1 1.6 3 0.41 0.56 0.88 1.1 1.4 1.5 0.43 0.35 0.89 0.67 1.4 0.95 0.56 0.32 1.1 0.6 1.8 0.82 0.6 0.22 1.2 0.42 1.9 0.59 0.28 0.068 0.56 0.13 0.85 0.19 0.63 0.12 1.3 0.22 1.9 0.28 1.4 0.15 3.1 0.21 4.9 0.17 0.054-0.0013 0.11-0.0026 0.16-4e-3 1.9 0.012 3.8-0.29 5.7-0.89 0.41-0.14 0.82-0.29 1.2-0.46 2.1-0.9 4-2.1 5.6-3.7s2.8-3.4 3.7-5.6 1.4-4.4 1.4-6.8v-25c0-2.4-0.45-4.7-1.4-6.8s-2.1-4-3.7-5.6-3.4-2.8-5.6-3.8c-2-0.85-4.2-1.3-6.4-1.3-0.15-0.0034-0.31-0.0051-0.46-5e-3 -2.3 0-4.6 0.45-6.6 1.4s-4 2.2-5.6 3.8-2.9 3.5-3.8 5.6-1.4 4.4-1.4 6.8 0.47 4.7 1.4 6.8 2.2 4 3.8 5.6 3.4 2.8 5.6 3.8 4.3 1.4 6.6 1.4v7.5c-3.4 0-6.6-0.65-9.6-2s-5.7-3.1-8-5.3-4-4.9-5.4-7.9c-1.2-2.8-1.8-5.8-1.9-8.9-0.011-0.33-0.017-0.66-0.017-0.99 0-3.4 0.65-6.6 2-9.6s3.1-5.7 5.4-8 4.9-4 8-5.4 6.2-2 9.6-2c3.5 0 6.7 0.65 9.8 2s5.7 3.1 8 5.4 4 4.9 5.4 8 2 6.2 2 9.6zm180 18v7.5c-3.5 0-6.7-0.65-9.8-2s-5.7-3.1-8-5.4-4-4.9-5.4-8-2-6.3-2-9.8c0-3.4 0.65-6.6 2-9.6s3.1-5.7 5.4-8 4.9-4.1 8-5.4 6.3-2 9.8-2c3.4 0 6.6 0.67 9.6 2s5.7 3.1 8 5.4 4.1 4.9 5.4 8 2 6.9 2 9.6v4.8h-25v-7.5h18c0-2-0.45-3.9-1.4-5.7s-2.2-3.4-3.8-4.7c-1.3-1.1-2.8-2-4.4-2.7-0.39-0.17-0.78-0.33-1.2-0.48-2.2-0.81-4.5-1.2-6.8-1.2h-4e-3c-1.9 0-3.8 0.29-5.7 0.89-0.41 0.14-0.82 0.29-1.2 0.46-2.1 0.9-4 2.2-5.6 3.8s-2.8 3.5-3.7 5.6-1.4 4.4-1.4 6.8c-0.012 1.9 0.29 3.8 0.89 5.7 0.14 0.41 0.29 0.82 0.46 1.2 0.9 2.1 2.1 4 3.7 5.6s3.4 2.8 5.6 3.7c2 0.85 4.2 1.3 6.4 1.3 0.15 0.0034 0.31 0.0051 0.46 5e-3zm-132 7.1v-7.5c2.4 0 4.7-0.45 6.8-1.4s4-2.1 5.6-3.7 2.8-3.4 3.7-5.5 1.4-4.4 1.4-6.8-0.45-4.7-1.4-6.8-2.1-4-3.7-5.6-3.4-2.8-5.6-3.7-4.4-1.4-6.8-1.4-4.6 0.45-6.8 1.4-3.9 2.1-5.5 3.7-2.8 3.4-3.7 5.6-1.4 4.4-1.4 6.8h-7.5c0-3.4 0.65-6.6 2-9.6s3.1-5.7 5.4-8 4.9-4 7.9-5.4 6.2-2 9.6-2 6.6 0.65 9.6 2 5.7 3.1 8 5.4 4 4.9 5.4 8 2 6.2 2 9.6c0 3.5-0.65 6.7-2 9.8s-3.1 5.7-5.4 7.9-4.9 4-8 5.2-6.2 1.9-9.6 1.9zm75-25v-0.2h7.6v0.2c0 3.5-0.67 6.7-2 9.8s-3.1 5.7-5.4 8-4.9 4.1-8 5.4-6.3 2-9.7 2c-3.5 0-6.7-0.67-9.8-2s-5.7-3.1-8-5.4-4.1-4.9-5.4-8-2.5-6.3-2-9.8v-25h7.6v25c0 2.4 0.45 4.7 1.4 6.8s2.1 4 3.7 5.6 3.4 2.8 5.6 3.8c2.1 0.91 4.4 1.4 6.7 1.4 0.079 8e-4 0.16 0.0012 0.24 1e-3 2.4 0 4.6-0.47 6.8-1.4s4-2.2 5.6-3.8 2.9-3.4 3.8-5.6 1.4-6.8 1.4-6.8zm132 0v-0.2h7.6v0.2c0 3.5-0.67 6.7-2 9.8s-3.1 5.7-5.4 8-4.9 4.1-8 5.4-6.3 2-9.7 2c-3.5 0-6.7-0.67-9.8-2s-5.7-3.1-8-5.4-4.1-4.9-5.4-8-2-6.3-2-9.8v-25h7.6v25c0 2.4 0.45 4.7 1.4 6.8s2.1 4 3.7 5.6 3.4 2.8 5.6 3.8c2.1 0.91 4.4 1.4 6.7 1.4 0.079 8e-4 0.16 0.0012 0.24 1e-3 2.4 0 4.6-0.47 6.8-1.4s4-2.2 5.6-3.8 2.9-3.4 3.8-5.6 1.4-7 1.4-6.8zm-240 25h-7.5v-75h7.5zm-72-0.2h-7.5v-74h7.5zm195 0.2v-8.1h8.4v8.1z" />
</symbol>
<!--! Font Awesome Pro 6.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. -->
<symbol id="svg_software" viewBox="0 0 640 512">
<title>Software</title>
<path d="M128 96h384v256h64V80C576 53.63 554.4 32 528 32h-416C85.63 32 64 53.63 64 80V352h64V96zM624 384h-608C7.25 384 0 391.3 0 400V416c0 35.25 28.75 64 64 64h512c35.25 0 64-28.75 64-64v-16C640 391.3 632.8 384 624 384zM365.9 286.2C369.8 290.1 374.9 292 380 292s10.23-1.938 14.14-5.844l48-48c7.812-7.813 7.812-20.5 0-28.31l-48-48c-7.812-7.813-20.47-7.813-28.28 0c-7.812 7.813-7.812 20.5 0 28.31l33.86 33.84l-33.86 33.84C358 265.7 358 278.4 365.9 286.2zM274.1 161.9c-7.812-7.813-20.47-7.813-28.28 0l-48 48c-7.812 7.813-7.812 20.5 0 28.31l48 48C249.8 290.1 254.9 292 260 292s10.23-1.938 14.14-5.844c7.812-7.813 7.812-20.5 0-28.31L240.3 224l33.86-33.84C281.1 182.4 281.1 169.7 274.1 161.9z" />
</symbol>
<symbol id="svg_webapp" viewBox="0 0 384 512">
<title>WebApp</title>
<path d="M162.1 257.8c-7.812-7.812-20.47-7.812-28.28 0l-48 48c-7.812 7.812-7.812 20.5 0 28.31l48 48C137.8 386.1 142.9 388 148 388s10.23-1.938 14.14-5.844c7.812-7.812 7.812-20.5 0-28.31L128.3 320l33.86-33.84C169.1 278.3 169.1 265.7 162.1 257.8zM365.3 93.38l-74.63-74.64C278.6 6.742 262.3 0 245.4 0H64C28.65 0 0 28.65 0 64l.0065 384c0 35.34 28.65 64 64 64H320c35.2 0 64-28.8 64-64V138.6C384 121.7 377.3 105.4 365.3 93.38zM336 448c0 8.836-7.164 16-16 16H64.02c-8.838 0-16-7.164-16-16L48 64.13c0-8.836 7.164-16 16-16h160L224 128c0 17.67 14.33 32 32 32h79.1V448zM221.9 257.8c-7.812 7.812-7.812 20.5 0 28.31L255.7 320l-33.86 33.84c-7.812 7.812-7.812 20.5 0 28.31C225.8 386.1 230.9 388 236 388s10.23-1.938 14.14-5.844l48-48c7.812-7.812 7.812-20.5 0-28.31l-48-48C242.3 250 229.7 250 221.9 257.8z" />
</symbol>
<symbol id="svg_api" viewBox="0 0 512 512">
<title>API</title>
<path d="M305.8 2.076C314.4 5.932 320 14.52 320 24V64H336C406.7 64 464 121.3 464 192V358.7C492.3 371 512 399.2 512 432C512 476.2 476.2 512 432 512C387.8 512 352 476.2 352 432C352 399.2 371.7 371 400 358.7V192C400 156.7 371.3 128 336 128H320V168C320 177.5 314.4 186.1 305.8 189.9C297.1 193.8 286.1 192.2 279.9 185.8L199.9 113.8C194.9 109.3 192 102.8 192 96C192 89.2 194.9 82.71 199.9 78.16L279.9 6.161C286.1-.1791 297.1-1.779 305.8 2.077V2.076zM432 456C445.3 456 456 445.3 456 432C456 418.7 445.3 408 432 408C418.7 408 408 418.7 408 432C408 445.3 418.7 456 432 456zM112 358.7C140.3 371 160 399.2 160 432C160 476.2 124.2 512 80 512C35.82 512 0 476.2 0 432C0 399.2 19.75 371 48 358.7V153.3C19.75 140.1 0 112.8 0 80C0 35.82 35.82 .0004 80 .0004C124.2 .0004 160 35.82 160 80C160 112.8 140.3 140.1 112 153.3V358.7zM80 56C66.75 56 56 66.75 56 80C56 93.25 66.75 104 80 104C93.25 104 104 93.25 104 80C104 66.75 93.25 56 80 56zM80 408C66.75 408 56 418.7 56 432C56 445.3 66.75 456 80 456C93.25 456 104 445.3 104 432C104 418.7 93.25 408 80 408z" />
</symbol>
<symbol id="svg_paperplane" viewBox="0 0 512 512">
<title>Paper plane</title>
<path d="M511.6 36.86l-64 415.1c-1.5 9.734-7.375 18.22-15.97 23.05c-4.844 2.719-10.27 4.097-15.68 4.097c-4.188 0-8.319-.8154-12.29-2.472l-122.6-51.1l-50.86 76.29C226.3 508.5 219.8 512 212.8 512C201.3 512 192 502.7 192 491.2v-96.18c0-7.115 2.372-14.03 6.742-19.64L416 96l-293.7 264.3L19.69 317.5C8.438 312.8 .8125 302.2 .0625 289.1s5.469-23.72 16.06-29.77l448-255.1c10.69-6.109 23.88-5.547 34 1.406S513.5 24.72 511.6 36.86z" />
</symbol>
</svg>
</body>

View File

@ -435,11 +435,11 @@ progress {
}
/*!
* Iglou.eu v3.0.0
* Copyright 2022 Iglou.eu
* Copyright 2022 Adrien Kara
* Licensed under MIT (/LICENSE)
*/
* Iglou.eu v3.0.0
* Copyright 2022 Iglou.eu
* Copyright 2022 Adrien Kara
* Licensed under MIT (/LICENSE)
*/
:root {
/* Color */
--c-pink: #ff355a;
@ -467,6 +467,10 @@ progress {
--h-size: 2em;
--h-marge: 1em;
--b-radius: 3px;
/* Default */
--button-color: var(--c-blue);
--button-background: var(--c-white);
}
/* # Animations */
@ -474,6 +478,7 @@ progress {
/* # Global */
body {
color: var(--c-dark);
/*! margin-top: calc(var(--h-size) + var(--h-marge) * 2); */
background-color: var(--c-white);
}
@ -481,13 +486,94 @@ body {
text-decoration: none;
}
.svg-icon {
.svg_icon {
max-width: 100%;
height: 100%;
}
.article {
padding: 0 var(--p-marge);
}
.button {
display: inline-block;
text-decoration: unset;
padding: .5em 1em;
margin: .5em;
border-radius: var(--b-radius);
border: .1em solid;
position: relative;
background-color: var(--button-background);
}
.button:not(.with_icon)>span {
position: relative;
z-index: 1;
transition: var(--t-duration) color;
}
.button:not(.with_icon):hover>span,
.button:not(.with_icon):focus>span {
color: var(--button-background);
}
.button::after {
top: .1em;
left: .1em;
right: 100%;
bottom: .1em;
content: "";
position: absolute;
border-radius: var(--b-radius);
background-color: transparent;
transition-duration: var(--t-duration);
transition-property: background-color, right;
transition-timing-function: ease-out;
}
.button:hover::after,
.button:focus::after {
right: .1em;
background-color: var(--button-color);
}
.button.with_icon>.svg_icon {
height: 1em;
width: 1em;
fill: var(--button-color);
position: relative;
z-index: 1;
left: 0;
transition-duration: var(--t-duration);
transition-property: fill, left, transform;
}
.button.with_icon:hover>.svg_icon,
.button.with_icon:focus>.svg_icon {
left: 42%;
fill: var(--button-background);
transform: rotate(45deg);
}
.warning {
color: var(--c-pink);
text-align: center;
padding: 1em;
border-width: .1em .1em .1em .5em;
border-style: solid;
border-radius: 0 var(--b-radius) var(--b-radius) 0;
}
.browserupgrade {
position: relative;
top: 1em;
width: 50%;
margin: 1em auto;
}
/* # Header */
.page-header {
.page_header {
position: fixed;
top: 0;
left: 0;
@ -500,29 +586,29 @@ body {
z-index: 1000;
}
.header-logo {
.header_logo {
display: block;
height: var(--h-size);
width: calc(var(--h-size) * 4);
}
.header-logo>.svg-icon {
.header_logo>.svg_icon {
fill: var(--c-blue);
stroke: var(--c-blue);
stroke-width: 0.20em;
}
.header-menu {
.header_menu {
gap: 0 2em;
height: 100%;
margin: auto;
display: flex;
padding: unset;
list-style: none;
flex-direction: row;
height: 100%;
}
.menu-entry.link {
.menu_entry.link {
color: var(--c-gray);
border: .1em solid transparent;
padding: 0 .5em;
@ -534,7 +620,7 @@ body {
text-transform: capitalize;
}
.menu-entry.link::after {
.menu_entry.link::after {
content: "";
left: .5em;
width: 0;
@ -544,49 +630,99 @@ body {
border-bottom: .1em solid transparent;
transition-duration: var(--t-duration);
transition-property: width, border-color;
transition-timing-function: cubic-bezier(.68, -0.55, .27, 1.55);
transition-timing-function: cubic-bezier(.79, .14, .15, .86);
}
.menu-entry.link:focus,
.menu-entry.link:hover {
.menu_entry.link:focus,
.menu_entry.link:hover {
color: var(--c-blue);
}
.menu-entry.link:focus::after,
.menu-entry.link:hover::after {
.menu_entry.link:focus::after,
.menu_entry.link:hover::after {
width: 100%;
border-bottom: .1em solid var(--c-blue);
}
.menu-entry.link.contact {
color: var(--c-blue);
border: .1em solid var(--c-blue);
display: block;
overflow: hidden;
transition: var(--t-duration) color ease-in-out;
.menu_entry.contact {
margin: auto;
padding: 0 1em;
display: inline-block;
font-weight: 500;
line-height: 200%;
text-transform: capitalize;
}
.menu-entry.link.contact::after {
top: 100%;
left: 50%;
bottom: unset;
width: 150%;
height: 400%;
border: unset;
z-index: -1;
border-radius: 50%;
/* # Articles */
/* ## Primary */
#a_primary {
margin: 2em 0;
display: grid;
min-height: calc(100vh + 2em);
padding-top: calc(var(--h-size) + var(--h-marge) * 2);
background-size: 100% auto;
background-repeat: no-repeat;
background-position: bottom center;
grid-template-rows: 1fr auto;
}
.hero {
margin: auto;
padding: 0 30vw;
text-align: center;
}
.hero__title {
color: var(--c-blue);
font-family: cera-round-pro, "Helvetica Neue", "Helvetica", "Arial", sans-serif;
font-weight: 600;
}
.hero__text {
color: var(--c-gray);
}
.services_preview {
gap: 3em;
display: grid;
margin-top: 2em;
grid-template-columns: repeat(3, 1fr);
}
.services_preview__item_icon {
width: 2.5em;
height: 2.5em;
padding: .5em;
grid-area: icon;
border-radius: var(--b-radius);
background-color: var(--c-blue);
transition-delay: var(--t-duration);
transition-property: top, left;
transition-timing-function: cubic-bezier(.17, .84, .44, 1);
}
.menu-entry.link.contact:hover {
color: var(--c-light);
.services_preview__item_icon>.svg_icon {
fill: var(--c-white);
}
.menu-entry.link.contact:hover::after {
top: -80%;
left: -25%;
.services_preview__item_title {
color: var(--c-dark);
grid-area: title;
font-size: 1.2em;
font-weight: 600;
text-decoration: unset;
}
.services_preview__item_text {
color: var(--c-gray);
margin: 0;
grid-area: text;
}
.services_preview__item {
gap: 0 1em;
padding: 1em;
display: grid;
box-shadow: 0 0 2em -.5em var(--c-lgray);
grid-template: "icon title"auto "icon text"auto / auto 1fr;
border-radius: var(--b-radius);
border-bottom: 2px solid var(--c-blue);
background-color: var(--c-white);
}