diff options
| author | Joris | 2018-10-19 00:50:38 +0200 |
|---|---|---|
| committer | Joris | 2018-10-19 00:50:38 +0200 |
| commit | c29967f0744bf52d53cf8b952c48d9cfab7bacfc (patch) | |
| tree | ec9f581035111988a5d6ba5e743c5a61e8d588f7 | |
| parent | fbee1b851b1eb58e8a9dd2414a8946312424ae70 (diff) | |
| download | electricite-chisloup-c29967f0744bf52d53cf8b952c48d9cfab7bacfc.tar.gz electricite-chisloup-c29967f0744bf52d53cf8b952c48d9cfab7bacfc.tar.bz2 electricite-chisloup-c29967f0744bf52d53cf8b952c48d9cfab7bacfc.zip | |
Improve design
| -rw-r--r-- | public/icon-big.png | bin | 0 -> 159628 bytes | |||
| -rw-r--r-- | public/index.html | 51 | ||||
| -rw-r--r-- | public/main.css | 135 |
3 files changed, 135 insertions, 51 deletions
diff --git a/public/icon-big.png b/public/icon-big.png Binary files differnew file mode 100644 index 0000000..236b7c9 --- /dev/null +++ b/public/icon-big.png diff --git a/public/index.html b/public/index.html index a26b1cf..5cecac0 100644 --- a/public/index.html +++ b/public/index.html @@ -12,34 +12,37 @@ <body> <header> - <h1>Électricité CHISLOUP</h1> + <img class="icon" src="icon-big.png" /> + <div class="title"> + <div>électricité</div> + <div>CHISLOUP</div> + </div> </header> - <h2>CHISLOUP Tony</h2> - <div>Néherlann 56390 GRAND-CHAMP</div> - <div>06 22 88 10 40</div> - <a href="mailto:chisloup.electricite@gmail.com">chisloup.electricite@gmail.com</a> + <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> + <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> - <p> - Prestations à Grand-Champ, Brandivy. Contactez-moi pour avoir plus - d’information. - </p> - - <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> + <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> + </main> + <footer> + <div>Néherlann 56 390 GRAND-CHAMP</div> + <div>06 22 88 10 40</div> + <a href="mailto:chisloup.electricite@gmail.com">chisloup.electricite@gmail.com</a> + </footer> </body> </html> diff --git a/public/main.css b/public/main.css index 8be1388..8810b15 100644 --- a/public/main.css +++ b/public/main.css @@ -2,6 +2,7 @@ html { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; + height: 100%; } *, *:before, *:after { @@ -10,51 +11,68 @@ html { box-sizing: inherit; } -html { +body { margin: 0; - padding: 0; + height: 100%; } -@media only screen and (min-width: 600px) { - html { - background-color: #1E1B18; - height: 100%; - } +/* Header */ + +header { + display: flex; + align-items: center; + justify-content: space-around; + 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 :nth-child(1) { + color: white; + margin-bottom: 10px; +} + +header .title :nth-child(2) { + font-weight: bold; + color: #E90707; } @media only screen and (min-width: 600px) { - body { - margin: 0 auto 70px; - padding: 15px 20px 0; - width: 50%; - min-width: 500px; - min-height: calc(100% - 70px); - font-size: 18px; - background-color: white; - border-bottom-left-radius: 3px; - border-bottom-right-radius: 3px; + header { + font-size: 36px; + padding: 1em; + margin-bottom: 1.5em; + } + + header .icon { + width: 200px; + margin-bottom: 1em; } } @media only screen and (max-width: 600px) { - body { - margin: 25px; - font-size: 16px; + header { + font-size: 26px; + padding: 0.5em; + height: 130px; } -} -h1 { - color: #E90707; - font-size: 26px; + header .icon { + width: 100px; + } } -h2 { - font-size: 16px; -} +/* Main */ ul { list-style: none; padding-left: 10px; + margin-bottom: 2em; } li::before { @@ -66,4 +84,67 @@ li::before { .map { width: 100%; height: 400px; + border-radius: 3px; +} + +@media only screen and (min-width: 600px) { + main { + margin: 0 auto; + width: 50%; + min-width: 600px; + font-size: 18px; + } + + li { + margin-bottom: 3px; + } + + .map { + margin-bottom: 2em; + } +} + +@media only screen and (max-width: 600px) { + main { + padding: 25px; + font-size: 16px; + min-height: calc(100% - 240px); + } + + .map { + margin-bottom: 1em; + } +} + +/* Footer */ + +footer { + background-color: #F6F6F6; +} + +footer :not(:last-child) { + margin-bottom: 5px; +} + +@media only screen and (min-width: 600px) { + footer { + margin: 0 auto; + width: 50%; + padding: 1em; + min-width: 600px; + margin-bottom: 2em; + border: 2px solid #EEEEEE; + border-radius: 3px; + } +} + +@media only screen and (max-width: 600px) { + footer { + display: flex; + flex-direction: column; + justify-content: center; + padding: 0 1em; + border-top: 2px solid #EEEEEE; + height: 110px; + } } |
