diff options
author | Joris | 2018-11-12 00:34:30 +0100 |
---|---|---|
committer | Joris | 2018-11-12 00:34:30 +0100 |
commit | e1403afbda65dea8496b2d7b7af498ebbb6d7845 (patch) | |
tree | ba1f5d19ceb13a4a1dbf0e7930c9243d1a6899af | |
parent | 53afd96f1dbcb7b1e8dee9b03050422795097220 (diff) | |
download | electricite-chisloup-e1403afbda65dea8496b2d7b7af498ebbb6d7845.tar.gz electricite-chisloup-e1403afbda65dea8496b2d7b7af498ebbb6d7845.tar.bz2 electricite-chisloup-e1403afbda65dea8496b2d7b7af498ebbb6d7845.zip |
Update content and design
-rw-r--r-- | README.md | 2 | ||||
-rw-r--r-- | public/index.html | 74 | ||||
-rw-r--r-- | public/main.css | 147 |
3 files changed, 168 insertions, 55 deletions
@@ -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 @@ <body> <header> - <img class="icon" src="icon-big.png" /> - <div class="title"> - <div>électricité</div> - <div>CHISLOUP</div> + <div class="content"> + <img class="icon" src="icon-big.png" /> + <div class="title"> + <div>électricité</div> + <div>CHISLOUP</div> + </div> </div> </header> <main> - Mes services dans le Morbihan : - - <ul> - <li>électricité générale neuf et rénovation,</li> - <li>domotique,</li> - <li>chauffage,</li> - <li>ventilation,</li> - <li>cloisons sèches.</li> - </ul> - - <iframe - class="map" - frameborder="0" - scrolling="no" - marginheight="0" - marginwidth="0" - src="https://www.openstreetmap.org/export/embed.html?bbox=-3.4030151367187504%2C47.5996813120644%2C-2.4966430664062504%2C48.04503763958813&layer=mapnik"></iframe> + <section> + <h1>Électricité générale</h1> + + <ul> + <li>Courant faible (téléphone, informatique et vidéo)</li> + <li>Rénovation complète d'installation électrique</li> + <li>Réalisation électrique dans les bâtiments tertiaires</li> + <li>Éclairage extérieur</li> + <li>Réalisation d'installations électriques en rénovation</li> + </ul> + </section> + + <section> + <h1> + Domotique + </h1> + + <div> + <h2> + Installation de systèmes pilotables à distance pour maisons + individuelles (technologie Z-Wave) : + </h2> + + <ul> + <li>Accès (volets roulants, portail)</li> + <li>Sécurité (alarmes incendie, intrusion)</li> + <li>Chauffage</li> + <li>Éclairage</li> + <li>Appareils électroniques (chaîne-hifi, TV, vidéo-projecteur)</li> + </ul> + </div> + </section> + + <section> + <h1>Services complémentaires</h1> + + <ul> + <li>Chauffage</li> + <li>Ventilation</li> + </ul> + </section> + + <div class="contact"> + Pour un devis gratuit, contactez-moi par <a href="mailto:chisloup.electricite@gmail.com">mail</a>. + </section> </main> <footer> - <div>Néherlann 56 390 GRAND-CHAMP</div> + <div>Pont-Augan 56 440 LANGUIDIC</div> <div>06 22 88 10 40</div> <a href="mailto:chisloup.electricite@gmail.com">chisloup.electricite@gmail.com</a> </footer> 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; } } |