diff --git a/css/main.css b/css/main.css index 70b6e2d..4e4404a 100644 --- a/css/main.css +++ b/css/main.css @@ -1,5 +1,9 @@ @import url("font-sourcesanspro.css"); +svg { + fill: #ffffff; +} + html { background-color: #1c0920; color: white; @@ -20,6 +24,7 @@ body { line-height: 1.85em; font-family: 'Source Sans Pro', sans-serif; font-weight: 300; + margin: 0; } #nav { @@ -256,10 +261,18 @@ hr::after { background-size: 100% 150%; } +body { + background: linear-gradient(145deg, #c7bbbd 0%, #7b6b75 10%,#58445d 18%,#7b6b75 25%,#544352 40%, #362437 55%, #aa9aa5 94%); + width: 100%; + height: 100%; + z-index: 0; + background-size: 100% 150%; +} + main { width: 64em; max-width: calc(100% - 4em); - background-color: #ffffff12; + background-color: #1c0920ad; border: 2px solid #553f59; margin: auto; color: #fffd; @@ -270,19 +283,20 @@ main > section { border-bottom: 2px solid #553f59; } +main > section:last-child { + border:0; +} + main section h2 { font-size: 2em; font-weight: 300; line-height: 1.5; margin: 0 0 0.7em 0; letter-spacing: -0.025em; + text-align: center; } -main section.main h2 { - text-align: center; -} - -main section.main h2::after { +main section h2::after { display: block; content: ''; width: 65%; @@ -291,7 +305,7 @@ main section.main h2::after { border-radius: 2px; } -main section.main h2::after { +main section h2::after { background-image: -moz-linear-gradient(90deg, transparent, #422d4f, #df7366, #422d4f, transparent); background-image: -webkit-linear-gradient(90deg, transparent, #422d4f, #df7366, #422d4f, transparent); background-image: -ms-linear-gradient(90deg, transparent, #422d4f, #df7366, #422d4f, transparent); @@ -299,7 +313,7 @@ main section.main h2::after { } .main footer { - margin: 1.5em 0.5em 0; + padding: 1.5em 0.5em 0; opacity: 0.85; text-align: left; } @@ -358,72 +372,23 @@ main section.main h2::after { } #contact { - display: flex; - border: 0; - padding: 0; - /*width: 80%; - margin: auto; - background-color: #ffffff12;*/ + position: relative; } #contact * { box-sizing: border-box; } -#contact > section { - flex-basis: 50%; - flex-grow: 1; - flex-shrink: 1; - border-left: 2px solid #553f59; -} - -#contact > section:first-child { - padding: 4rem; - border: 0; -} - -#contact section section { - display: table-row; - width: 100%; - white-space: nowrap; -} - -#contact section section > * { - display: table-cell; - padding: 4rem 0.5rem 3rem; - border-bottom: 2px solid #553f59; -} - -#contact section section p, #contact section section ul { - font-size: 1rem; - color: #d6c6d9; -} - -#contact section section > *:first-child { - padding-left: 4rem; -} - -#contact section section > *:last-child { - padding-right: 4rem; - width: 100%; -} - #contact input[type="text"], #contact input[type="password"], #contact input[type="email"], #contact select { height: 3rem; } #contact .fields { - display: flex; - flex-wrap: wrap; - width: calc(100% + 3rem); - margin: -1.5rem 0 2rem -1.5rem; + margin: -1rem 0 1rem; } #contact .fields .field{ - padding: 1.5rem 0 0 1.5rem; - width: calc(100% - 1.5rem); - flex-shrink: 0; - flex-grow: 0; + padding: 0 0 1.5rem; } #contact input[type="text"], #contact input[type="password"], #contact input[type="email"], #contact select, #contact textarea { @@ -436,13 +401,15 @@ main section.main h2::after { border-radius: 0; border: solid 2px #553f59; color: inherit; + line-height: 3em; } -#contact input[type="text"]:focus, #contact input[type="password"]:focus, #contact input[type="email"]:focus, #contact select:focus, #contact textarea:focus { +#contact form input[type="text"]:focus, #contact form input[type="password"]:focus, #contact form input[type="email"]:focus, #contact form select:focus, #contact form textarea:focus { border-color: #a869a7; } -#contact input[type="submit"]:hover, #contact input[type="reset"]:hover, #contact input[type="button"]:hover, #contact button:hover, #contact .button:hover, #contact a:hover{ +#contact form input[type="submit"]:hover, #contact form input[type="reset"]:hover, #contact form input[type="button"]:hover, #contact form button:hover, +#contact form .button:hover, #contact form a:hover{ color: #a869a7; } @@ -460,11 +427,32 @@ main section.main h2::after { padding: 0.75rem 1rem; } -#contact ul, #contact li { +#contact ul { margin: 0; padding: 0; } +#contact .social_network { + position: absolute; + right: 6em; + bottom: 2.4em; +} + +#contact .social_network .icons { + display: flex; + justify-content: center; +} + +#contact li img, #contact li svg { + width: 2em; + height: 2em; + margin: 0 0.5em; +} + +#contact li a:hover svg { + fill: currentColor; +} + #contact input[type="submit"], #contact input[type="reset"], #contact input[type="button"], #contact button, #contact .button { background-color: transparent; box-shadow: inset 0 0 0 2px; @@ -488,7 +476,7 @@ main section.main h2::after { main footer, body > footer { line-height: 0.8rem; - margin: 2.5em 0 2em 0; + padding: 2.5em 0 2em 0; font-size: 0.8em; text-align: center; opacity: 0.75; diff --git a/docker.svg b/docker.svg new file mode 100644 index 0000000..b4228d5 --- /dev/null +++ b/docker.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/github.svg b/github.svg new file mode 100644 index 0000000..113acf9 --- /dev/null +++ b/github.svg @@ -0,0 +1,2 @@ + \ No newline at end of file diff --git a/index.html b/index.html index 1777acb..7f46e43 100644 --- a/index.html +++ b/index.html @@ -57,6 +57,7 @@ +

Qui est Jean-Cloud ?

@@ -98,12 +99,6 @@ La plateforme vidéo À VENIR pour partager et visioner les vidéos du réseau PeerTube -
  • - - - - La plateforme vidéo À VENIR pour partager et visioner les vidéos du réseau PeerTube -

    • - -
    + + -
    -

    Ils nous font confiance

    -

    -

    -

    -
    +
    +

    Ils nous font confiance

    +

    +

    +

    +
    - -
    -
    + +

    Nous contacter

    @@ -170,29 +164,27 @@
    • -
    -
    -
    -

    Hébergement des services

    -

    Grenoble, Lyon et alentours

    -
    -
    -

    Email

    -

    Via le formulaire ci-contre

    -
    -
    + +
    +
    -
    -
    - - - + + + +