Commit bien trop tardif avec un milliard de changements
This commit is contained in:
parent
1820886aa4
commit
0a924b119e
67
.htaccess
Normal file
67
.htaccess
Normal file
|
|
@ -0,0 +1,67 @@
|
|||
|
||||
# REecriture et redirections
|
||||
RewriteEngine On
|
||||
RewriteCond %{REQUEST_FILENAME} !-f
|
||||
RewriteCond %{REQUEST_FILENAME} !-d
|
||||
RewriteRule ^(.*)\.html$ /$1 [L,R=301]
|
||||
|
||||
# LA 404
|
||||
ErrorDocument 404 /404.html
|
||||
|
||||
# MOD_DEFLATE COMPRESSION
|
||||
SetOutputFilter DEFLATE
|
||||
AddOutputFilterByType DEFLATE text/html text/css text/plain text/xml application/x-javascript application/x-httpd-php
|
||||
#Pour les navigateurs incompatibles
|
||||
BrowserMatch ^Mozilla/4 gzip-only-text/html
|
||||
BrowserMatch ^Mozilla/4\.0[678] no-gzip
|
||||
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
|
||||
BrowserMatch \bMSI[E] !no-gzip !gzip-only-text/html
|
||||
#ne pas mettre en cache si ces fichiers le sont déjà
|
||||
SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png)$ no-gzip
|
||||
#les proxies doivent donner le bon contenu
|
||||
Header append Vary User-Agent env=!dont-vary
|
||||
|
||||
# BEGIN Expire headers
|
||||
<IfModule mod_expires.c>
|
||||
ExpiresActive On
|
||||
ExpiresDefault "access plus 7200 seconds"
|
||||
ExpiresByType image/jpg "access plus 2592000 seconds"
|
||||
ExpiresByType image/jpeg "access plus 2592000 seconds"
|
||||
ExpiresByType text/css "access plus 2592000 seconds"
|
||||
ExpiresByType text/html "access plus 7200 seconds"
|
||||
ExpiresByType application/xhtml+xml "access plus 7200 seconds"
|
||||
ExpiresByType application/javascript A2592000
|
||||
ExpiresByType application/x-javascript "access plus 2592000 seconds"
|
||||
</IfModule>
|
||||
# END Expire headers
|
||||
|
||||
# BEGIN Cache-Control Headers
|
||||
<IfModule mod_headers.c>
|
||||
<FilesMatch "\.(ico|jpe?g|png|gif|swf|css|gz)$">
|
||||
Header set Cache-Control "max-age=2592000, public"
|
||||
</FilesMatch>
|
||||
<FilesMatch "\.(js)$">
|
||||
Header set Cache-Control "max-age=2592000, private"
|
||||
</FilesMatch>
|
||||
<filesMatch "\.(html|htm)$">
|
||||
Header set Cache-Control "max-age=7200, public"
|
||||
</filesMatch>
|
||||
# Disable caching for scripts and other dynamic files
|
||||
<FilesMatch "\.(pl|php|cgi|spl|scgi|fcgi)$">
|
||||
Header unset Cache-Control
|
||||
</FilesMatch>
|
||||
</IfModule>
|
||||
# END Cache-Control Headers
|
||||
|
||||
# KILL THEM ETAGS
|
||||
Header unset ETag
|
||||
FileETag none
|
||||
|
||||
# protect the htaccess file
|
||||
<files .htaccess>
|
||||
order allow,deny
|
||||
deny from all
|
||||
</files>
|
||||
|
||||
# protection de la lecture des répertoires
|
||||
Options -Indexes
|
||||
51
404.html
Normal file
51
404.html
Normal file
|
|
@ -0,0 +1,51 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=320, initial-scale=1", shrink-to-fit=no">
|
||||
|
||||
<!-- SEO Meta Tags -->
|
||||
<meta name="description" content="404 - La ressource demandée n'existe pas">
|
||||
<meta name="author" content="Matt Marcha">
|
||||
|
||||
<!-- OG Meta Tags to improve the way the post looks when you share the page on LinkedIn, Facebook, Google+ -->
|
||||
<meta property="og:site_name" content="Matt Marcha, solutions web écologiques" /> <!-- website name -->
|
||||
<meta property="og:site" content="https://matt.marcha.pro" /> <!-- website link -->
|
||||
<meta property="og:title" content="404"/> <!-- title shown in the actual shared post -->
|
||||
<meta property="og:description" content="Erreur 404 - La ressource demandée n'existe pas" /> <!-- description shown in the actual shared post -->
|
||||
<meta property="og:image" content="https://matt.marcha.pro/images/coverimage.jpg" /> <!-- image link, make sure it's jpg -->
|
||||
<meta property="og:url" content="https://matt.marcha.pro/" /> <!-- where do you want your post to link to -->
|
||||
<meta property="og:type" content="website" />
|
||||
|
||||
<!-- Website Title -->
|
||||
<title>Solutions web écologiques - Matt Marcha</title>
|
||||
|
||||
<!-- Favicon -->
|
||||
<link rel="icon" href="images/favicon.svg">
|
||||
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
<header class="err404">
|
||||
<h1 style="display: none;">Erreur 404</h1>
|
||||
<div class="half white">
|
||||
<p class="err404">404</span></p>
|
||||
</div>
|
||||
<div class="half blue">
|
||||
<p class="err404">404</p>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<section class="err404">
|
||||
<p>Il n'y a pas grand chose ici. <br />On retourne à l'<a href="/">accueil</a> ?</p>
|
||||
</section>
|
||||
|
||||
<footer class="err404">
|
||||
<div class="copyright">
|
||||
<p>Copyright © 2020 <a href="https://matt.marcha.pro">Matt Marcha</a></p>
|
||||
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
BIN
images/coverimage.jpg
Normal file
BIN
images/coverimage.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 6.5 KiB |
141
images/favicon.svg
Normal file
141
images/favicon.svg
Normal file
|
|
@ -0,0 +1,141 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg
|
||||
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||
xmlns:cc="http://creativecommons.org/ns#"
|
||||
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
width="150mm"
|
||||
height="150mm"
|
||||
viewBox="0 0 150 150"
|
||||
version="1.1"
|
||||
id="svg8"
|
||||
inkscape:version="1.0.1 (3bc2e813f5, 2020-09-07)"
|
||||
sodipodi:docname="favicon.svg">
|
||||
<defs
|
||||
id="defs2">
|
||||
<clipPath
|
||||
clipPathUnits="userSpaceOnUse"
|
||||
id="clipPath948">
|
||||
<rect
|
||||
style="fill:#ff8dc6;fill-opacity:1;fill-rule:evenodd;stroke-width:0.0160847;stroke-miterlimit:4;stroke-dasharray:none"
|
||||
id="rect950"
|
||||
width="7.6737299"
|
||||
height="3.6368055"
|
||||
x="33.075729"
|
||||
y="67.69043" />
|
||||
</clipPath>
|
||||
<clipPath
|
||||
clipPathUnits="userSpaceOnUse"
|
||||
id="clipPath958">
|
||||
<rect
|
||||
style="fill:#ff8dc6;fill-opacity:1;fill-rule:evenodd;stroke-width:0.2779;stroke-miterlimit:4;stroke-dasharray:none"
|
||||
id="rect960"
|
||||
width="141.49835"
|
||||
height="62.773354"
|
||||
x="8.5016451"
|
||||
y="75" />
|
||||
</clipPath>
|
||||
</defs>
|
||||
<sodipodi:namedview
|
||||
id="base"
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#666666"
|
||||
borderopacity="1.0"
|
||||
inkscape:pageopacity="0.0"
|
||||
inkscape:pageshadow="2"
|
||||
inkscape:zoom="0.98994949"
|
||||
inkscape:cx="-305.55297"
|
||||
inkscape:cy="451.31619"
|
||||
inkscape:document-units="mm"
|
||||
inkscape:current-layer="layer1"
|
||||
inkscape:document-rotation="0"
|
||||
showgrid="false"
|
||||
inkscape:pagecheckerboard="true"
|
||||
inkscape:window-width="2560"
|
||||
inkscape:window-height="1380"
|
||||
inkscape:window-x="0"
|
||||
inkscape:window-y="27"
|
||||
inkscape:window-maximized="1"
|
||||
fit-margin-top="0"
|
||||
fit-margin-left="0"
|
||||
fit-margin-right="0"
|
||||
fit-margin-bottom="0" />
|
||||
<metadata
|
||||
id="metadata5">
|
||||
<rdf:RDF>
|
||||
<cc:Work
|
||||
rdf:about="">
|
||||
<dc:format>image/svg+xml</dc:format>
|
||||
<dc:type
|
||||
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||
<dc:title></dc:title>
|
||||
</cc:Work>
|
||||
</rdf:RDF>
|
||||
</metadata>
|
||||
<g
|
||||
inkscape:label="Calque 1"
|
||||
inkscape:groupmode="layer"
|
||||
id="layer1">
|
||||
<rect
|
||||
style="fill:#ffffff;fill-opacity:1;stroke-width:0.491016;stroke-miterlimit:4;stroke-dasharray:none"
|
||||
id="rect837-6"
|
||||
width="150"
|
||||
height="48.229565"
|
||||
x="2.2781296e-06"
|
||||
y="74.999992" />
|
||||
<rect
|
||||
style="fill:#008dc6;fill-opacity:1;fill-rule:evenodd;stroke-width:0.463886;stroke-miterlimit:4;stroke-dasharray:none"
|
||||
id="rect833-1"
|
||||
width="150"
|
||||
height="53.547382"
|
||||
x="0"
|
||||
y="21.452618" />
|
||||
<rect
|
||||
style="fill:#008dc6;fill-opacity:1;fill-rule:evenodd;stroke-width:0.549;stroke-miterlimit:4;stroke-dasharray:none"
|
||||
id="rect833"
|
||||
width="150"
|
||||
height="75"
|
||||
x="1.110223e-16"
|
||||
y="-75"
|
||||
ry="8.3755121"
|
||||
rx="10.920729"
|
||||
transform="scale(1,-1)" />
|
||||
<rect
|
||||
style="fill:#ffffff;fill-opacity:1;stroke-width:0.612308;stroke-miterlimit:4;stroke-dasharray:none"
|
||||
id="rect837"
|
||||
width="150"
|
||||
height="75"
|
||||
x="0"
|
||||
y="75"
|
||||
ry="10.440123"
|
||||
rx="9.98207" />
|
||||
<text
|
||||
xml:space="preserve"
|
||||
style="font-style:normal;font-weight:normal;font-size:10.5833px;line-height:1.25;font-family:sans-serif;white-space:pre;inline-size:27.9313;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:0.264583"
|
||||
x="32.664673"
|
||||
y="74.903236"
|
||||
id="text841"
|
||||
transform="matrix(18.894623,0,0,16.778534,-619.94565,-1121.7664)"
|
||||
clip-path="url(#clipPath948)"><tspan
|
||||
x="32.664673"
|
||||
y="74.903236"><tspan
|
||||
style="fill:#ffffff;fill-opacity:1;stroke-width:0.264583">M</tspan></tspan></text>
|
||||
<g
|
||||
id="g907"
|
||||
clip-path="url(#clipPath958)">
|
||||
<text
|
||||
xml:space="preserve"
|
||||
style="font-style:normal;font-weight:normal;font-size:10.5833px;line-height:1.25;font-family:sans-serif;white-space:pre;inline-size:27.9313;fill:#008dc6;fill-opacity:1;stroke:none;stroke-width:0.264583"
|
||||
x="32.664673"
|
||||
y="74.903236"
|
||||
id="text841-2"
|
||||
transform="matrix(18.894623,0,0,16.778534,-619.94569,-1121.7665)"><tspan
|
||||
x="32.664673"
|
||||
y="74.903236"><tspan
|
||||
style="fill:#008dc6;fill-opacity:1;stroke-width:0.264583">M</tspan></tspan></text>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 4.6 KiB |
60
index.html
60
index.html
|
|
@ -1,10 +1,28 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=320, initial-scale=1">
|
||||
<title>Développeur web écologique à Lyon</title>
|
||||
<link rel="stylesheet" href="https://maxst.icons8.com/vue-static/landings/line-awesome/line-awesome/1.3.0/css/line-awesome.min.css">
|
||||
<meta name="viewport" content="width=320, initial-scale=1", shrink-to-fit=no">
|
||||
|
||||
<!-- SEO Meta Tags -->
|
||||
<meta name="description" content="Développeur web indépendant à Lyon, attaché au respect de l'environnement. Développement de sites, applications et plateformes web. Expertise et accompagnement en gestion de projets, communication, RGPD. Démarche d'écoconception et de sobriété numérique.">
|
||||
<meta name="author" content="Matt Marcha">
|
||||
|
||||
<!-- OG Meta Tags to improve the way the post looks when you share the page on LinkedIn, Facebook, Google+ -->
|
||||
<meta property="og:site_name" content="Matt Marcha, solutions web écologiques" /> <!-- website name -->
|
||||
<meta property="og:site" content="https://matt.marcha.pro" /> <!-- website link -->
|
||||
<meta property="og:title" content="Solutions web écologiques - Matt Marcha"/> <!-- title shown in the actual shared post -->
|
||||
<meta property="og:description" content="Développeur web indépendant à Lyon, attaché au respect de l'environnement. Développement de sites, applications et plateformes web. Expertise et accompagnement en gestion de projets, communication, RGPD. Démarche d'écoconception et de sobriété numérique." /> <!-- description shown in the actual shared post -->
|
||||
<meta property="og:image" content="https://matt.marcha.pro/images/coverimage.jpg" /> <!-- image link, make sure it's jpg -->
|
||||
<meta property="og:url" content="https://matt.marcha.pro/" /> <!-- where do you want your post to link to -->
|
||||
<meta property="og:type" content="website" />
|
||||
|
||||
<!-- Website Title -->
|
||||
<title>Solutions web écologiques - Matt Marcha</title>
|
||||
|
||||
<!-- Favicon -->
|
||||
<link rel="icon" href="images/favicon.svg">
|
||||
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
|
|
@ -24,7 +42,7 @@
|
|||
<section id="a-propos" class="content">
|
||||
<nav>
|
||||
<div class="toggle-buttons">
|
||||
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="address-card" class="open svg-inline--fa fa-address-card fa-w-18" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path fill="currentColor" d="M528 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h480c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zm-352 96c35.3 0 64 28.7 64 64s-28.7 64-64 64-64-28.7-64-64 28.7-64 64-64zm112 236.8c0 10.6-10 19.2-22.4 19.2H86.4C74 384 64 375.4 64 364.8v-19.2c0-31.8 30.1-57.6 67.2-57.6h5c12.3 5.1 25.7 8 39.8 8s27.6-2.9 39.8-8h5c37.1 0 67.2 25.8 67.2 57.6v19.2zM512 312c0 4.4-3.6 8-8 8H360c-4.4 0-8-3.6-8-8v-16c0-4.4 3.6-8 8-8h144c4.4 0 8 3.6 8 8v16zm0-64c0 4.4-3.6 8-8 8H360c-4.4 0-8-3.6-8-8v-16c0-4.4 3.6-8 8-8h144c4.4 0 8 3.6 8 8v16zm0-64c0 4.4-3.6 8-8 8H360c-4.4 0-8-3.6-8-8v-16c0-4.4 3.6-8 8-8h144c4.4 0 8 3.6 8 8v16z"></path></svg>
|
||||
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="address-card" class="pulse open svg-inline--fa fa-address-card fa-w-18" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path fill="currentColor" d="M528 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h480c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zm-352 96c35.3 0 64 28.7 64 64s-28.7 64-64 64-64-28.7-64-64 28.7-64 64-64zm112 236.8c0 10.6-10 19.2-22.4 19.2H86.4C74 384 64 375.4 64 364.8v-19.2c0-31.8 30.1-57.6 67.2-57.6h5c12.3 5.1 25.7 8 39.8 8s27.6-2.9 39.8-8h5c37.1 0 67.2 25.8 67.2 57.6v19.2zM512 312c0 4.4-3.6 8-8 8H360c-4.4 0-8-3.6-8-8v-16c0-4.4 3.6-8 8-8h144c4.4 0 8 3.6 8 8v16zm0-64c0 4.4-3.6 8-8 8H360c-4.4 0-8-3.6-8-8v-16c0-4.4 3.6-8 8-8h144c4.4 0 8 3.6 8 8v16zm0-64c0 4.4-3.6 8-8 8H360c-4.4 0-8-3.6-8-8v-16c0-4.4 3.6-8 8-8h144c4.4 0 8 3.6 8 8v16z"></path></svg>
|
||||
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="times" class="close svg-inline--fa fa-times fa-w-11" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 352 512">
|
||||
<path fill="currentColor" d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"></path>
|
||||
</svg>
|
||||
|
|
@ -115,8 +133,8 @@
|
|||
<section id="prestations" class="content">
|
||||
<nav>
|
||||
<div class="toggle-buttons">
|
||||
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="question" class="open svg-inline--fa fa-question fa-w-12" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512">
|
||||
<path fill="currentColor" d="M202.021 0C122.202 0 70.503 32.703 29.914 91.026c-7.363 10.58-5.093 25.086 5.178 32.874l43.138 32.709c10.373 7.865 25.132 6.026 33.253-4.148 25.049-31.381 43.63-49.449 82.757-49.449 30.764 0 68.816 19.799 68.816 49.631 0 22.552-18.617 34.134-48.993 51.164-35.423 19.86-82.299 44.576-82.299 106.405V320c0 13.255 10.745 24 24 24h72.471c13.255 0 24-10.745 24-24v-5.773c0-42.86 125.268-44.645 125.268-160.627C377.504 66.256 286.902 0 202.021 0zM192 373.459c-38.196 0-69.271 31.075-69.271 69.271 0 38.195 31.075 69.27 69.271 69.27s69.271-31.075 69.271-69.271-31.075-69.27-69.271-69.27z"></path>
|
||||
<svg aria-hidden="true" focusable="false" data-icon="laptop-code" class="open pulse" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512">
|
||||
<path fill="currentColor" d="M255.03 261.65c6.25 6.25 16.38 6.25 22.63 0l11.31-11.31c6.25-6.25 6.25-16.38 0-22.63L253.25 192l35.71-35.72c6.25-6.25 6.25-16.38 0-22.63l-11.31-11.31c-6.25-6.25-16.38-6.25-22.63 0l-58.34 58.34c-6.25 6.25-6.25 16.38 0 22.63l58.35 58.34zm96.01-11.3l11.31 11.31c6.25 6.25 16.38 6.25 22.63 0l58.34-58.34c6.25-6.25 6.25-16.38 0-22.63l-58.34-58.34c-6.25-6.25-16.38-6.25-22.63 0l-11.31 11.31c-6.25 6.25-6.25 16.38 0 22.63L386.75 192l-35.71 35.72c-6.25 6.25-6.25 16.38 0 22.63zM624 416H381.54c-.74 19.81-14.71 32-32.74 32H288c-18.69 0-33.02-17.47-32.77-32H16c-8.8 0-16 7.2-16 16v16c0 35.2 28.8 64 64 64h512c35.2 0 64-28.8 64-64v-16c0-8.8-7.2-16-16-16zM576 48c0-26.4-21.6-48-48-48H112C85.6 0 64 21.6 64 48v336h512V48zm-64 272H128V64h384v256z"></path>
|
||||
</svg>
|
||||
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="times" class="close svg-inline--fa fa-times fa-w-11" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 352 512">
|
||||
<path fill="currentColor" d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"></path>
|
||||
|
|
@ -245,9 +263,7 @@
|
|||
<section id="projets" class="content">
|
||||
<nav>
|
||||
<div class="toggle-buttons">
|
||||
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="folder-open" class="open svg-inline--fa fa-folder-open fa-w-18" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
|
||||
<path fill="currentColor" d="M572.694 292.093L500.27 416.248A63.997 63.997 0 0 1 444.989 448H45.025c-18.523 0-30.064-20.093-20.731-36.093l72.424-124.155A64 64 0 0 1 152 256h399.964c18.523 0 30.064 20.093 20.73 36.093zM152 224h328v-48c0-26.51-21.49-48-48-48H272l-64-64H48C21.49 64 0 85.49 0 112v278.046l69.077-118.418C86.214 242.25 117.989 224 152 224z"></path>
|
||||
</svg>
|
||||
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="images" class="open pulse" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path fill="currentColor" d="M480 416v16c0 26.51-21.49 48-48 48H48c-26.51 0-48-21.49-48-48V176c0-26.51 21.49-48 48-48h16v208c0 44.112 35.888 80 80 80h336zm96-80V80c0-26.51-21.49-48-48-48H144c-26.51 0-48 21.49-48 48v256c0 26.51 21.49 48 48 48h384c26.51 0 48-21.49 48-48zM256 128c0 26.51-21.49 48-48 48s-48-21.49-48-48 21.49-48 48-48 48 21.49 48 48zm-96 144l55.515-55.515c4.686-4.686 12.284-4.686 16.971 0L272 256l135.515-135.515c4.686-4.686 12.284-4.686 16.971 0L512 208v112H160v-48z"></path></svg>
|
||||
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="times" class="close svg-inline--fa fa-times fa-w-11" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 352 512">
|
||||
<path fill="currentColor" d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"></path>
|
||||
</svg>
|
||||
|
|
@ -390,7 +406,7 @@
|
|||
<section id="contact" class="content">
|
||||
<nav>
|
||||
<div class="toggle-buttons">
|
||||
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="envelope" class="open svg-inline--fa fa-envelope fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
|
||||
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="envelope" class="pulse open svg-inline--fa fa-envelope fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
|
||||
<path fill="currentColor" d="M502.3 190.8c3.9-3.1 9.7-.2 9.7 4.7V400c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V195.6c0-5 5.7-7.8 9.7-4.7 22.4 17.4 52.1 39.5 154.1 113.6 21.1 15.4 56.7 47.8 92.2 47.6 35.7.3 72-32.8 92.3-47.6 102-74.1 131.6-96.3 154-113.7zM256 320c23.2.4 56.6-29.2 73.4-41.4 132.7-96.3 142.8-104.7 173.4-128.7 5.8-4.5 9.2-11.5 9.2-18.9v-19c0-26.5-21.5-48-48-48H48C21.5 64 0 85.5 0 112v19c0 7.4 3.4 14.3 9.2 18.9 30.6 23.9 40.7 32.4 173.4 128.7 16.8 12.2 50.2 41.8 73.4 41.4z"></path>
|
||||
</svg>
|
||||
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="times" class="close svg-inline--fa fa-times fa-w-11" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 352 512">
|
||||
|
|
@ -402,8 +418,8 @@
|
|||
<h2>Contact</h2>
|
||||
<p class="contact">
|
||||
+33.76.76.10.338
|
||||
<a class="button" href="tel:+33767610338" alt="appeler">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
|
||||
<a class="button phone float" href="tel:+33767610338" alt="appeler">
|
||||
<svg focusable="false" data-icon="phone" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
|
||||
<path fill="currentColor" d="M497.39 361.8l-112-48a24 24 0 0 0-28 6.9l-49.6 60.6A370.66 370.66 0 0 1 130.6 204.11l60.6-49.6a23.94 23.94 0 0 0 6.9-28l-48-112A24.16 24.16 0 0 0 122.6.61l-104 24A24 24 0 0 0 0 48c0 256.5 207.9 464 464 464a24 24 0 0 0 23.4-18.6l24-104a24.29 24.29 0 0 0-14.01-27.6z"></path>
|
||||
</svg>
|
||||
</a>
|
||||
|
|
@ -411,8 +427,8 @@
|
|||
|
||||
<p class="contact">
|
||||
matthias@martin-chave.pro
|
||||
<a class="button" href="mailto: matthias@martin-chave.pro" alt="envoyer un email">
|
||||
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="at" class="svg-inline--fa fa-at fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
|
||||
<a class="button email float" href="mailto: matthias@martin-chave.pro" alt="envoyer un email">
|
||||
<svg focusable="false" data-icon="at" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
|
||||
<path fill="currentColor" d="M256 8C118.941 8 8 118.919 8 256c0 137.059 110.919 248 248 248 48.154 0 95.342-14.14 135.408-40.223 12.005-7.815 14.625-24.288 5.552-35.372l-10.177-12.433c-7.671-9.371-21.179-11.667-31.373-5.129C325.92 429.757 291.314 440 256 440c-101.458 0-184-82.542-184-184S154.542 72 256 72c100.139 0 184 57.619 184 160 0 38.786-21.093 79.742-58.17 83.693-17.349-.454-16.91-12.857-13.476-30.024l23.433-121.11C394.653 149.75 383.308 136 368.225 136h-44.981a13.518 13.518 0 0 0-13.432 11.993l-.01.092c-14.697-17.901-40.448-21.775-59.971-21.775-74.58 0-137.831 62.234-137.831 151.46 0 65.303 36.785 105.87 96 105.87 26.984 0 57.369-15.637 74.991-38.333 9.522 34.104 40.613 34.103 70.71 34.103C462.609 379.41 504 307.798 504 232 504 95.653 394.023 8 256 8zm-21.68 304.43c-22.249 0-36.07-15.623-36.07-40.771 0-44.993 30.779-72.729 58.63-72.729 22.292 0 35.601 15.241 35.601 40.77 0 45.061-33.875 72.73-58.161 72.73z"></path>
|
||||
</svg>
|
||||
</a>
|
||||
|
|
@ -420,12 +436,22 @@
|
|||
|
||||
<p class="contact">
|
||||
linkedin.com/in/matthias-mc/
|
||||
<a class="button" href="https://www.linkedin.com/in/matthias-mc/" alt="contacter via linkedin" target="_blank">
|
||||
<svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="linkedin-in" class="svg-inline--fa fa-linkedin-in fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
|
||||
<a class="button linkedin float" href="https://www.linkedin.com/in/matthias-mc/" alt="contacter via linkedin" target="_blank">
|
||||
<svg aria-hidden="true" focusable="false" data-icon="linkedin-in" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
|
||||
<path fill="currentColor" d="M100.28 448H7.4V148.9h92.88zM53.79 108.1C24.09 108.1 0 83.5 0 53.8a53.79 53.79 0 0 1 107.58 0c0 29.7-24.1 54.3-53.79 54.3zM447.9 448h-92.68V302.4c0-34.7-.7-79.2-48.29-79.2-48.29 0-55.69 37.7-55.69 76.7V448h-92.78V148.9h89.08v40.8h1.3c12.4-23.5 42.69-48.3 87.88-48.3 94 0 111.28 61.9 111.28 142.3V448z"></path>
|
||||
</svg>
|
||||
</a>
|
||||
</p>
|
||||
|
||||
<footer>
|
||||
<nav class="mentions">
|
||||
<a href="/mentions-legales.html">Mentions légales</a>
|
||||
</nav>
|
||||
<div class="copyright">
|
||||
<p>Copyright © 2020 <a href="https://matt.marcha.pro">Matt Marcha</a></p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
|
|
|||
138
mentions-legales.html
Normal file
138
mentions-legales.html
Normal file
|
|
@ -0,0 +1,138 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=320, initial-scale=1, shrink-to-fit=no">
|
||||
<title>Solution web écologiques - Matt Marcha</title>
|
||||
|
||||
<!-- SEO Meta Tags -->
|
||||
<meta name="description" content="">
|
||||
<meta name="author" content="Matt Marcha">
|
||||
|
||||
<!-- OG Meta Tags to improve the way the post looks when you share the page on LinkedIn, Facebook, Google+ -->
|
||||
<meta property="og:site_name" content="Matt Marcha, solutions web écologiques" /> <!-- website name -->
|
||||
<meta property="og:site" content="https://matt.marcha.pro" /> <!-- website link -->
|
||||
<meta property="og:title" content="Mentions légales"/> <!-- title shown in the actual shared post -->
|
||||
<meta property="og:description" content="Mentions légales et politique de vie privée du site https://matt.marcha.pro" /> <!-- description shown in the actual shared post -->
|
||||
<meta property="og:image" content="https://matt.marcha.pro/images/header-background.jpg" /> <!-- image link, make sure it's jpg -->
|
||||
<meta property="og:url" content="https://matt.marcha.pro/" /> <!-- where do you want your post to link to -->
|
||||
<meta property="og:type" content="website" />
|
||||
|
||||
<!-- Website Title -->
|
||||
<title>Solutions web écologiques - Matt Marcha</title>
|
||||
|
||||
<!-- Favicon -->
|
||||
<link rel="icon" href="images/favicon.svg">
|
||||
|
||||
<link rel="stylesheet" href="style.css">
|
||||
|
||||
<!-- Matomo -->
|
||||
<script type="text/javascript">
|
||||
var _paq = window._paq = window._paq || [];
|
||||
|
||||
_paq.push([function() {
|
||||
var self = this;
|
||||
function getOriginalVisitorCookieTimeout() {
|
||||
var now = new Date(),
|
||||
nowTs = Math.round(now.getTime() / 1000),
|
||||
visitorInfo = self.getVisitorInfo();
|
||||
var createTs = parseInt(visitorInfo[2]);
|
||||
var cookieTimeout = 33696000; // 13 mois en secondes
|
||||
var originalTimeout = createTs + cookieTimeout - nowTs;
|
||||
return originalTimeout;
|
||||
}
|
||||
this.setVisitorCookieTimeout( getOriginalVisitorCookieTimeout() );
|
||||
}]);
|
||||
/* tracker methods like "setCustomDimension" should be called before "trackPageView" */
|
||||
_paq.push(["setDomains", ["*.matt.marcha.pro","*.https//matthias.martin-chave.pro"]]);
|
||||
_paq.push(['trackPageView']);
|
||||
_paq.push(['enableLinkTracking']);
|
||||
(function() {
|
||||
var u="//stats.marcha.pro/";
|
||||
_paq.push(['setTrackerUrl', u+'matomo.php']);
|
||||
_paq.push(['setSiteId', '3']);
|
||||
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
|
||||
g.type='text/javascript'; g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
|
||||
})();
|
||||
</script>
|
||||
<!-- End Matomo Code -->
|
||||
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<main class="mentions">
|
||||
<nav><a href="/">< Retour au site</a> </nav>
|
||||
<header id="header" class="ex-header">
|
||||
<h1>Mentions légales</h1>
|
||||
</header>
|
||||
|
||||
<section>
|
||||
|
||||
<h2>Responsables et intervenants</h2>
|
||||
<p>Conformément aux dispositions de la loi n° 2004-575 du 21 juin 2004 pour la confiance en l’économie numérique, il est précisé aux utilisateurs du site <a href="https://matt.marcha.pro">matt.marcha.pro</a> l’identité des différents intervenants dans le cadre de sa réalisation et de son suivi.</p>
|
||||
|
||||
<h3>Éditeur, directeur de publication</h3>
|
||||
<p><strong>Matt Marcha</strong><br>Micro-entrepreneur<br>5 place Jean Jaurès<br>69007 Lyon<br>
|
||||
<strong>Email</strong> :
|
||||
<a href="mailto:matt@marcha.pro">matt@marcha.pro</a><br>
|
||||
<strong>Téléphone</strong> : <a rel="noreferrer noopener" href="tel:+33676710338" target="_blank">+33.67.67.10.338</a><br>
|
||||
<strong>SIRET</strong> : 79877559900011</p>
|
||||
|
||||
<h3>Hébergement</h3>
|
||||
<p><strong>Infomaniak</strong><br>
|
||||
Rue Eugène-Marziano 25<br>1227 Genève GE<br>
|
||||
<a href="tel:+41228203544">+41 22 820 35 44</a><br>
|
||||
<a rel="noreferrer noopener" aria-label="https://www.infomaniak.com (s’ouvre dans un nouvel onglet)" href="https://www.infomaniak.com" target="_blank">https://www.infomaniak.com</a>
|
||||
</p>
|
||||
<h2>Protection des données personnelles</h2>
|
||||
|
||||
<h3>Cookies et traqueurs</h3>
|
||||
|
||||
<p>Le site <a href="https://matt.marcha.pro">matt.marcha.pro</a> utilise la technologie des cookies pour surveiller l’évolution du trafic de ses visiteurs, aussi appelée mesure d’audience. Les cookies sont de petits fichiers textes ou éléments d’information stockés sur votre ordinateur ou appareil portable (ex : smartphone ou tablette) lorsque vous visitez le site.</p>
|
||||
<p>Lors de votre visite sur le site <a href="https://matt.marcha.pro">matt.marcha.pro</a>, des cookies sont déposés sur votre ordinateur afin de nous permettre d’effectuer correctement notre mesure d’audience. Les informations personnelles à propos du visiteurs (adresse IP) sont anonymisées et les cookies sont automatiquement supprimés au bout de 13 mois, conformément à la réglementation en vigueur. Vous pouvez vous opposer au dépôt de ces cookies au moyen de l’option ci-dessous :</p>
|
||||
<iframe style="border: 0; width: 100%;" src="https://stats.marcha.pro/index.php?module=CoreAdminHome&action=optOut&language=fr&backgroundColor=&fontColor=&fontSize=&fontFamily="></iframe>
|
||||
|
||||
<h3>Utilisation de données personnelles</h3>
|
||||
<p>Le site peut accéder à des données personnelles vous concernant dans le cas où vous utilisez le formulaire de contact. Les données personnelles concernées sont :</p>
|
||||
<ul><li>Votre nom</li><li>Votre email</li></ul>
|
||||
<p>Ces données sont collectées dans le but de vous identifier auprès de la personne que vous contactez et de lui permettre de répondre à votre demande. Les renseigner est obligatoire pour utiliser le formulaire de contact.</p>
|
||||
<p>Celles-ci sont transférées par email à l'adresse matt@marcha.pro, dont l'unique gérant est <a href="https://matt.marcha.pro">Matt Marcha</a> et seront stockées sur des serveurs situés dans l'Union Européenne, appartenant à <a rel="noreferrer noopener" aria-label="https://www.infomaniak.com (s’ouvre dans un nouvel onglet)" href="https://www.infomaniak.com" target="_blank">Infomaniak</a>.
|
||||
<p>Vos données seront exploitées afin de répondre à votre requête et conservées jusqu'à suppression du message les contenant, soit une durée maximale de 3 ans (trois ans) à compter de la date de fin de traitement de la requête.</p>
|
||||
|
||||
<h3>Droit d’accès, de rectification et d’opposition</h3>
|
||||
<p> Conformément à la réglementation européenne en vigueur, les visiteurs de <a href="https://matt.marcha.pro">matt.marcha.pro</a> disposent des droits suivants : </p>
|
||||
<ul>
|
||||
<li>droit d'accès (article 15 RGPD) et de rectification (article 16 RGPD), de mise à jour, de complétude des données des Utilisateurs droit de verrouillage ou d’effacement des données des Utilisateurs à caractère personnel (article 17 du RGPD), lorsqu’elles sont inexactes, incomplètes, équivoques, périmées, ou dont la collecte, l'utilisation, la communication ou la conservation est interdite </li>
|
||||
<li>droit de retirer à tout moment un consentement (article 13-2c RGPD) </li>
|
||||
<li>droit à la limitation du traitement des données des Utilisateurs (article 18 RGPD) </li>
|
||||
<li>droit d’opposition au traitement des données des Utilisateurs (article 21 RGPD) </li>
|
||||
<li>droit à la portabilité des données que les Utilisateurs auront fournies, lorsque ces données font l’objet de traitements automatisés fondés sur leur consentement ou sur un contrat (article 20 RGPD) </li><li>droit de définir le sort des données des Utilisateurs après leur mort et de choisir à qui <a href="https://matt.marcha.pro">matt.marcha.pro</a> devra communiquer (ou non) ses données à un tiers qu’ils aura préalablement désigné</li>
|
||||
</ul>
|
||||
|
||||
<h3>Délégué à la protection des données</h3>
|
||||
<p>Pour toute question concernant vos données personnelles collectées, traitées ou exploitées par le site <a href="https://matt.marcha.pro">matt.marcha.pro</a>, vous pouvez contacter le Délégué à la protection des données :<br>
|
||||
<strong>Matt Marcha</strong><br>
|
||||
<strong>Email</strong> :
|
||||
<a href="mailto:matt@marcha.pro">matt@marcha.pro</a><br>
|
||||
<strong>Téléphone</strong> : <a rel="noreferrer noopener" href="tel:+33676710338" target="_blank">+33.67.67.10.338</a><br>
|
||||
</p>
|
||||
|
||||
<h2>Droit applicable et attribution de juridiction.</h2>
|
||||
|
||||
<p>Tout litige en relation avec l’utilisation du site <a href="https://matt.marcha.pro">matt.marcha.pro</a> est soumis au droit français. En dehors des cas où la loi ne le permet pas, il est fait attribution exclusive de juridiction aux tribunaux compétents de Lyon.</p>
|
||||
|
||||
<h2>Crédits</h2>
|
||||
|
||||
<p>Pictogrammes par <a href="https://fontawesome.com/" target="_blank">Font Awesome Free</a> - <a href="https://fontawesome.com/license/free" target="_blank">Licence</a></p>
|
||||
|
||||
</section>
|
||||
|
||||
<footer>
|
||||
<div class="copyright">
|
||||
<p>Copyright © 2020 <a href="https://matt.marcha.pro">Matt Marcha</a></p>
|
||||
|
||||
</div>
|
||||
</footer>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
377
style.css
377
style.css
|
|
@ -22,13 +22,13 @@ Généralités
|
|||
|
||||
:root {
|
||||
--blue: #008dc6;
|
||||
--citrus: #9bd066;
|
||||
--citrus: #90ca28;
|
||||
--dark-grey: #5b5b5b;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-size: 18px;
|
||||
font-size: 16px;
|
||||
font-family: "Montserrat", sans-serif;
|
||||
position: relative;
|
||||
line-height: 1.3;
|
||||
|
|
@ -55,6 +55,10 @@ strong {
|
|||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
a:visited {
|
||||
color: var(--citrus);
|
||||
}
|
||||
|
||||
|
|
@ -68,6 +72,10 @@ a {
|
|||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.button:visited {
|
||||
color: white;
|
||||
}
|
||||
|
||||
/**
|
||||
Accueil / Fond
|
||||
*/
|
||||
|
|
@ -94,11 +102,13 @@ header p.slogan {
|
|||
font-weight: 400;
|
||||
}
|
||||
header .name {
|
||||
left: 5px;
|
||||
width: 5.5em;
|
||||
/*! padding-left: 5px; */
|
||||
text-transform: uppercase;
|
||||
font-size: 3.2em;
|
||||
font-weight: 600;
|
||||
line-height: 40px;
|
||||
line-height: 0.7em;
|
||||
left: calc(50vw - 2.75em);
|
||||
}
|
||||
|
||||
header .name span.mar {
|
||||
|
|
@ -110,11 +120,11 @@ header .name span.cha {
|
|||
}
|
||||
|
||||
header .white .name {
|
||||
bottom: -3px;
|
||||
bottom: -0.06em;
|
||||
}
|
||||
|
||||
header .blue .name {
|
||||
top: 3px;
|
||||
top: .055em;
|
||||
}
|
||||
|
||||
header .name span.light {
|
||||
|
|
@ -167,6 +177,45 @@ Boutons de section / Navigation
|
|||
|
||||
section nav {
|
||||
position: fixed;
|
||||
border-radius: 0 2em 0 0;
|
||||
}
|
||||
|
||||
section nav:after {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
position: absolute;
|
||||
bottom: 0.4em;
|
||||
text-align: center;
|
||||
font-size: .7em;
|
||||
font-variant: small-caps;
|
||||
font-weight: 600;
|
||||
opacity: 0;
|
||||
animation-name: onoff;
|
||||
animation-duration: 12s;
|
||||
animation-delay: 2s;
|
||||
animation-iteration-count: infinite;
|
||||
animation-timing-function: ease-in;
|
||||
}
|
||||
|
||||
section#a-propos nav:after {
|
||||
content: "À propos";
|
||||
color: var(--blue);
|
||||
}
|
||||
|
||||
section#prestations nav:after {
|
||||
content: "Services";
|
||||
color: var(--blue);
|
||||
}
|
||||
|
||||
section#projets nav:after {
|
||||
content: "Projets";
|
||||
color: white;
|
||||
}
|
||||
|
||||
section#contact nav:after {
|
||||
content: "Contact";
|
||||
color: white;
|
||||
}
|
||||
|
||||
.toggle-buttons svg {
|
||||
|
|
@ -174,6 +223,7 @@ section nav {
|
|||
width: 50px;
|
||||
height: 45px;
|
||||
z-index: 35;
|
||||
transition: bottom .2s;
|
||||
}
|
||||
|
||||
.toggle-buttons .close {
|
||||
|
|
@ -184,6 +234,10 @@ section nav {
|
|||
z-index: 23;
|
||||
}
|
||||
|
||||
.toggle:checked + section nav:after {
|
||||
opacity: 0 !important;
|
||||
}
|
||||
|
||||
.toggle:checked + section .toggle-buttons {
|
||||
z-index: 22;
|
||||
}
|
||||
|
|
@ -223,6 +277,7 @@ section#projets nav {
|
|||
bottom: 0;
|
||||
left: 0;
|
||||
background-color: var(--blue);
|
||||
border-radius: 0 2em 0 0;
|
||||
}
|
||||
|
||||
/* contact */
|
||||
|
|
@ -236,7 +291,7 @@ section#contact nav {
|
|||
section#projets .toggle-buttons svg,
|
||||
section#contact .toggle-buttons svg {
|
||||
color: white;
|
||||
bottom: 5px;
|
||||
bottom: 15px;
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -300,8 +355,14 @@ section#contact .content {
|
|||
|
||||
.toggle:checked + section .content {
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
/*** règle media pour pas pénaliser les grandes largeurs**/
|
||||
@media only screen and (max-width : 768px) {
|
||||
.toggle:checked + section .content {
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
/************** intérieur **************/
|
||||
|
||||
|
|
@ -396,6 +457,15 @@ section .content {
|
|||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
section .content::-webkit-scrollbar {
|
||||
display: none; /* Chrome, Safari and Opera */
|
||||
}
|
||||
|
||||
section .content {
|
||||
-ms-overflow-style: none; /* IE and Edge */
|
||||
scrollbar-width: none; /* Firefox */
|
||||
}
|
||||
|
||||
section .content h2 {
|
||||
text-align: center;
|
||||
margin: 10px 55px;
|
||||
|
|
@ -507,7 +577,7 @@ section .content .historique span.detail {
|
|||
.projet .project-header .accordion-title {
|
||||
margin: 2em 1em .2em;
|
||||
padding: 0;
|
||||
transition: margin-top .2;
|
||||
transition: margin-top .2s;
|
||||
}
|
||||
|
||||
.projet .project-header .subtitle {
|
||||
|
|
@ -613,7 +683,7 @@ section .content .historique span.detail {
|
|||
height: 3em;
|
||||
text-align: center;
|
||||
background-color: white;
|
||||
color: var(--blue);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.contact .button svg {
|
||||
|
|
@ -625,8 +695,297 @@ section .content .historique span.detail {
|
|||
margin: auto;
|
||||
width: 1.5em;
|
||||
height: 1.5em;
|
||||
color: var(--blue);
|
||||
}
|
||||
|
||||
section#contact footer {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
bottom: 0;
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
section#contact footer .mentions {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
section#contact footer .mentions a {
|
||||
text-align: center;
|
||||
font-size: .9em;
|
||||
|
||||
font-weight: 600;
|
||||
color: white;
|
||||
}
|
||||
|
||||
section#contact footer .copyright {
|
||||
font-size: .7em;
|
||||
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* --- */
|
||||
|
||||
/* ---- MENTIONS LÉGALES ------*/
|
||||
|
||||
main.mentions {
|
||||
margin-top: 3em;
|
||||
padding: 0 1em;
|
||||
height: auto;
|
||||
width: auto;
|
||||
overflow: initial;
|
||||
|
||||
}
|
||||
|
||||
.mentions nav {
|
||||
position: fixed;
|
||||
width: 100vw;
|
||||
background-color: var(--blue);
|
||||
padding: .5em;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.mentions nav a {
|
||||
padding-left: 1em;
|
||||
font-size: .9em;
|
||||
text-decoration: none;
|
||||
font-weight: 600;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.mentions section {
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
padding-bottom: 5em;
|
||||
}
|
||||
|
||||
.mentions footer {
|
||||
background-color: var(--blue);
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.mentions footer .copyright {
|
||||
font-size: .8em;
|
||||
color: white;
|
||||
text-align: center;
|
||||
}
|
||||
/* --- */
|
||||
|
||||
/* ---- 404 ------*/
|
||||
|
||||
header.err404 .half {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
header.err404 .err404 {
|
||||
width: 5.5em;
|
||||
/*! padding-left: 5px; */
|
||||
text-transform: uppercase;
|
||||
font-size: 9em;
|
||||
font-weight: 600;
|
||||
line-height: 0.7em;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
header.err404 .white .err404 {
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
section.err404 {
|
||||
position: absolute;
|
||||
top: calc((50vh + 5em));
|
||||
color: white;
|
||||
padding: 0 1em;
|
||||
font-weight: 400;
|
||||
text-align: center;
|
||||
width: calc(100% - 2em);
|
||||
|
||||
}
|
||||
|
||||
footer.err404 {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
bottom: 0;
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
footer.err404 .copyright {
|
||||
font-size: .5em;
|
||||
color: white;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* --- */
|
||||
|
||||
/* ------- ANIMATION ----------*/
|
||||
|
||||
.float {
|
||||
animation-name: float;
|
||||
animation-duration: 4s;
|
||||
animation-iteration-count: infinite;
|
||||
animation-timing-function: ease-in-out;
|
||||
}
|
||||
|
||||
.pulse {
|
||||
animation-name: pulse;
|
||||
animation-duration: 6s;
|
||||
animation-delay: 2s;
|
||||
animation-iteration-count: infinite;
|
||||
animation-timing-function: ease-out;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0% { filter: drop-shadow( 0px 0px 0px); }
|
||||
18% { filter: drop-shadow( 0px 0px 80px ) ;}
|
||||
19% { filter: drop-shadow( 0px 0px 80px rgba(255, 255, 255, 0));}
|
||||
20% { filter: unset}
|
||||
}
|
||||
|
||||
@keyframes onoff {
|
||||
0% { opacity: 0; }
|
||||
8% { opacity: 1; }
|
||||
50% { opacity: 1; }
|
||||
58% { opacity: 0; }
|
||||
100% { opacity: 0; }
|
||||
}
|
||||
|
||||
@keyframes float {
|
||||
0% { filter: drop-shadow( 0px 0px 0px); }
|
||||
50% { filter: drop-shadow( 0px 0px 5px); }
|
||||
100% { filter: drop-shadow( 0px 0px 0px ) ;}
|
||||
}
|
||||
|
||||
|
||||
/* --- */
|
||||
|
||||
/* ------- RESPONSIVE DESIGN ----------*/
|
||||
|
||||
@media only screen and (min-width : 321px ) {
|
||||
|
||||
section nav::after {
|
||||
bottom: calc(5vh - .6em);
|
||||
}
|
||||
|
||||
|
||||
.toggle,
|
||||
.toggle-buttons {
|
||||
margin: 5vh 5vw;
|
||||
transition: margin .2s;
|
||||
}
|
||||
|
||||
section#projets nav::after,
|
||||
section#contact nav::after
|
||||
{
|
||||
bottom: calc(5vh - 1.4em);
|
||||
}
|
||||
|
||||
section#projets .toggle-buttons svg,
|
||||
section#contact .toggle-buttons svg
|
||||
{
|
||||
bottom: calc(5vh - 5px);
|
||||
}
|
||||
|
||||
.toggle:checked,
|
||||
.toggle:checked + section .toggle-buttons {
|
||||
margin: 15px;
|
||||
}
|
||||
|
||||
.toggle:checked + section#projets .toggle-buttons svg,
|
||||
.toggle:checked + section#contact .toggle-buttons svg
|
||||
{
|
||||
bottom: 15px;
|
||||
}
|
||||
|
||||
section .content h2 {
|
||||
margin-top: calc((15px + 1em) / 2)
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
@media only screen and (min-width : 481px) {
|
||||
body {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
section .content .resume,
|
||||
section .content h3,
|
||||
section .content h4,
|
||||
section .content p,
|
||||
section .content ul {
|
||||
margin-left: 1em;
|
||||
margin-right: 1em;
|
||||
}
|
||||
|
||||
.toggle {
|
||||
margin: 3vh 3vw;
|
||||
width: calc(3vw + 50px);
|
||||
height: calc(3vh + 50px);
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width : 769px) {
|
||||
|
||||
body {
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
header .name {
|
||||
line-height: .69em;
|
||||
}
|
||||
|
||||
section .content {
|
||||
max-width: 768px;
|
||||
max-height: 1280px;
|
||||
top: unset;
|
||||
left: unset;
|
||||
border: 5px solid var(--dark-grey);
|
||||
}
|
||||
|
||||
section#a-propos .content {
|
||||
margin-top: -768px;
|
||||
margin-left: -1280px;
|
||||
top: 0;
|
||||
left: 0;
|
||||
border-top: 0;
|
||||
border-left: 0;
|
||||
}
|
||||
|
||||
section#prestations .content {
|
||||
margin-top: -768px;
|
||||
margin-right: -1280px;
|
||||
top: 0;
|
||||
right: 0;
|
||||
border-top: 0;
|
||||
border-right: 0;
|
||||
}
|
||||
|
||||
section#projets .content {
|
||||
margin-bottom: -768px;
|
||||
margin-left: -1280px;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
border-bottom: 0;
|
||||
border-left: 0;
|
||||
}
|
||||
|
||||
section#contact .content {
|
||||
margin-bottom: -768px;
|
||||
margin-right: -1280px;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
border-bottom: 0;
|
||||
border-right: 0;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue