From e1403afbda65dea8496b2d7b7af498ebbb6d7845 Mon Sep 17 00:00:00 2001 From: Joris Date: Mon, 12 Nov 2018 00:34:30 +0100 Subject: Update content and design --- README.md | 2 + public/index.html | 74 +++++++++++++++++++-------- public/main.css | 147 ++++++++++++++++++++++++++++++++++++++++++------------ 3 files changed, 168 insertions(+), 55 deletions(-) diff --git a/README.md b/README.md index 4e97bbb..d357abf 100644 --- a/README.md +++ b/README.md @@ -1 +1,3 @@ # Électricité CHISLOUP + +https://kilianvalkhof.com/2017/design/sloped-edges-with-consistent-angle-in-css/ diff --git a/public/index.html b/public/index.html index 5cecac0..a69083c 100644 --- a/public/index.html +++ b/public/index.html @@ -12,35 +12,65 @@
- -
-
électricité
-
CHISLOUP
+
+ +
+
électricité
+
CHISLOUP
+
- Mes services dans le Morbihan : - - - - +
+

Électricité générale

+ + +
+ +
+

+ Domotique +

+ +
+

+ Installation de systèmes pilotables à distance pour maisons + individuelles (technologie Z-Wave) : +

+ +
    +
  • Accès (volets roulants, portail)
    • +
  • Sécurité (alarmes incendie, intrusion)
    • +
  • Chauffage
    • +
  • Éclairage
    • +
  • Appareils électroniques (chaîne-hifi, TV, vidéo-projecteur)
    • +
+
+
+ +
+

Services complémentaires

+ + +
+ +
+ Pour un devis gratuit, contactez-moi par mail. +
diff --git a/public/main.css b/public/main.css index 960468d..44cfd4b 100644 --- a/public/main.css +++ b/public/main.css @@ -2,7 +2,6 @@ html { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; - height: 100%; } *, *:before, *:after { @@ -13,23 +12,27 @@ html { body { margin: 0; - height: 100%; + overflow-x: hidden; +} + +a { + color: #050584; } /* Header */ -header { +header .content { display: flex; align-items: center; - justify-content: space-around; + justify-content: center; background-color: #303030; font-family: Arial; letter-spacing: 2px; - box-shadow: 0px 1px 2px 0px rgba(50, 50, 50, 0.5); } -header .title { - text-align: right; +header .title, header .icon { + position: relative; + z-index: 1; } header .title :nth-child(1) { @@ -42,76 +45,152 @@ header .title :nth-child(2) { color: #E90707; } +header::after { + content: " "; + display: block; + width: 150%; + margin: -100px 0 2em -25%; + background-color: #303030; + transform: rotate(2deg); + box-shadow: 0px 1px 2px 0px rgba(50, 50, 50, 0.5); + position: relative; +} + @media only screen and (min-width: 600px) { header { - font-size: 36px; - padding: 0.5em; - margin-bottom: 1.5em; + font-size: 50px; + } + + header .content { + height: 60%; + padding-top: 100px; } header .icon { - width: 150px; + width: 350px; + } + + header::after { + height: 250px; } } @media only screen and (max-width: 600px) { header { font-size: 24px; - padding: 0.5em; - height: 130px; + } + + header .content { + padding-top: 50px; } header .icon { width: 100px; } + + header::after { + height: 150px; + } } /* Main */ -ul { +main h1 { + color: #AE3333; +} + +main h2 { + font-size: 22px; + font-weight: normal; + text-decoration: underline; +} + +main ul { list-style: none; padding-left: 10px; margin-bottom: 2em; } -li::before { +main li { + line-height: 1.5em; +} + +main li::before { content: "•"; - color: #E90707; + color: #AE3333; margin-right: 10px; } -.map { - width: 100%; - height: 400px; - border-radius: 3px; +main .contact { + text-align: center; + font-size: 26px; + background-color: #AE3333; + color: white; + line-height: 1.5em; + box-shadow: 0 2px 15px 0 rgba(0,0,0,0.11), 0 5px 15px 0 rgba(0,0,0,0.08); +} + +main .contact a { + color: white; } @media only screen and (min-width: 600px) { main { - margin: 0 auto; - width: 50%; - min-width: 600px; - font-size: 18px; + font-size: 22px; + } + + main section { + margin: 3em 0; + padding: 3em 1em; + display: flex; + align-items: center; + justify-content: space-around; + } + + main section:nth-child(even) { + flex-direction: row-reverse; + background-color: #F3F3F3; + box-shadow: 0 2px 15px 0 rgba(0,0,0,0.11), 0 5px 15px 0 rgba(0,0,0,0.08); + } + + main h1 { + font-size: 34px; + margin: 0 30px; } - li { - margin-bottom: 3px; + main h2 { + font-size: 22px; } - .map { - margin-bottom: 2em; + main li { + margin-bottom: 12px; + } + + main .contact { + font-size: 26px; + margin-bottom: 3em; + padding: 30px; } } @media only screen and (max-width: 600px) { main { - padding: 25px; - font-size: 16px; + font-size: 18px; min-height: calc(100% - 240px); } - .map { - margin-bottom: 1em; + main section { + padding: 0 25px; + } + + main h1 { + font-size: 24px; + margin: 30px 0 30px; + } + + main .contact { + font-size: 20px; + padding: 20px; } } @@ -119,6 +198,7 @@ li::before { footer { background-color: #F6F6F6; + text-align: center; } footer :not(:last-child) { @@ -131,9 +211,10 @@ footer :not(:last-child) { width: 50%; padding: 1em; min-width: 600px; - margin-bottom: 2em; + margin-bottom: 4em; border: 2px solid #EEEEEE; border-radius: 3px; + font-size: 20px; } } -- cgit v1.2.3