/* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } /****************************** * Fin reset.css *****************************/ header { box-shadow: 1px 1px 30px 1px lightgrey; } body{ margin: 0; background-color: #eee; font-family: 'Open Sans', sans-serif; } h2{ font-weight: 600; font-size: 17px; } h3{ font-weight: 400; font-size: 17px; } .title-small{ font-weight: 200; font-size: 15px; margin-top: 15px; } .contenue{ height: 285vh; } .articleHome{ margin: auto; text-align: center; margin-top: 100px; font-family: 'Open Sans', sans-serif; padding-left: 2%; padding-right: 2%; } @media only screen and (min-width: 992px) { .articleHome { padding-right: 10%; padding-left: 10%; } } .nav_imie{ height: 40px; background-color: #1c1c1c; } .nav_blog{ height: 80px; background-color: #110230; } .item_nav_imie{ font-size: 0; } .item_nav_imie a{ text-decoration: none; color: white; -webkit-transition: 400ms; -o-transition: 400ms; transition: 400ms; } .item_nav_imie a:hover{ color: #a5a5a5; } .item_nav_imie{ display: inline-block; color: white; float: right; font-family: 'Open Sans', sans-serif; font-size: 16px; font-weight: 600; } .social{ padding: 9px 0px 0px 20px; } .link{ padding: 11px 0px 0px 20px; } .item_nav_blog_gauche{ padding-top:25px; vertical-align: center; display: inline-block; color: black; float: left; } .item_nav_blog_droite{ color: #fff; font-family: 'Open Sans', sans-serif; margin-top: 30px; margin-right: 60px; display: inline-block; float: right; font-weight: bold; -webkit-transition: 400ms; -o-transition: 400ms; transition: 400ms; } .item_nav_blog_droite:hover{ cursor: pointer; } .item_nav_blog_droite.dev:hover{ color: #ffd75f; } .item_nav_blog_droite.digi:hover{ color: #6bb194; } .item_nav_blog_droite.ops:hover{ color: #2ea3f2; } .item_nav_blog_droite.devops:hover{ color: #ff1c4a; } .item_nav_blog_droite_icon{ padding-top: 27px; display: inline-block; float: right; color: rgba(0, 0, 0, .5); padding-bottom: 10px; border-bottom: rgba(255, 255, 255, 0.1) solid 2px; } .bloc_principal{ width: 100%; height: 500px; margin-top: 70px; background: url("../img/img-home.jpg"); background-position: center; background-size: cover; box-shadow: 1px 1px 30px 1px lightgrey; } .cover-black{ height: 100%; width: 100%; background-color: rgba(0,0,0,0.6); } .bloc_principal_titre{ text-align: center; padding-top: 15px; width: 100%; height: 50px; background-color: #150032; font-family: 'Open Sans', sans-serif; font-size: 20px; color: white; font-weight: 600; } .test2{ padding: 0px 90px; margin-top: 100px; text-align: center; } .content-homediv{ padding: 0; } .item_nav_blog_logo{ padding-top: 2px; display: inline-block; float: left; } .bloc-plus{ margin-top: 40px; float: right; background-color: #190034; padding: 10px 15px; color: white; -webkit-transition: 300ms; -o-transition: 300ms; transition: 300ms; } .bloc-plus:hover{ background-color: #42027e; cursor: pointer; } .p-home { padding-top: 20px; color: white; line-height: 23px; } input {outline: none} /* ----------------------------------------------------- * Articles * ----------------------------------------------------- */ .articles > div { margin-bottom: 75px; } .article { width: 100%; height: 300px; padding: 22px 10% 0 10%; background-color: white; box-shadow: 1px 1px 30px 1px lightgrey; font-family: 'Open Sans', sans-serif; border-bottom: 5px solid black; border-radius: 5px; } .article.dev { border-bottom-color: #f2d761; } .article.digi { border-bottom-color: #6bb194; } .article.ops { border-bottom-color: #64bdea; } .article.devops { border-bottom-color: #ff1c4a; } .article .etiquettes, .post .etiquettes { margin-top: 15px; } .article .date, .article .cat, .post .cat, .post .date { padding: 2px 10px; font-size: 13px; } .article .date, .post .date { color: gray; background-color: #eee; margin-left: 10px; } .article .cat, .post .cat { color: white; font-weight: bold; } .article.ops .cat, .post.ops .cat { background-color: #2ea3f2; } .article.digi .cat, .post.digi .cat { background-color: #6bb194; } .article.dev .cat, .post.dev .cat { background-color: #ffd75f; } .article.devops .cat, .post.devops .cat { background-color: #ff1c4a; } .article .title { line-height: 24px; font-weight: bold; } .article .text{ margin-top: 15px; color:#848484; font-size: 15px; line-height: 20px; } /* ----------------------------------------------------- * Posts * ----------------------------------------------------- */ .bloc-post{ width: 69%; margin-top: 70px; box-shadow: 1px 1px 30px 1px lightgrey; background-position: center; background-size: cover; display: inline-block; border-radius: 5px; } .search{ border-bottom: 5px solid #2ea3f2; } .container-post{ background-color: white; padding: 45px; } .author{ margin-top: 25px; display: flex; flex-flow: row wrap; } .by{ margin-left: 20px; margin-top: 12px; } .name{ margin-bottom: 6px; } .job{ font-size: 12px; } .bloc-filter{ width: 25%; height: 120px; margin-top: 70px; background-color: white; background-size: cover; box-shadow: 1px 1px 30px 1px lightgrey; float: right; padding: 45px; } .post .text{ font-size: 14px; color: #737272ee; line-height: 1.5; margin-top: 28px; } .credit{ background-color: #110230; color:white; padding: 45px; } .fullFooter{ font-family: 'Open Sans', sans-serif; width: 100%; height: 220px; background-color: #1c1c1c; font-weight: bold; } .upFooter{ height: 160px; background-color: #150032; text-align: center; } .lowFooter{ text-align: center; } .lowFooterItem{ font-size:16px; color: white; padding-top:22px; display: inline-block; margin-right:15px; } .iconOnFooter{ padding-top:60px; display: inline-block; color: black; } .pad{ padding:0; } .contenue-recent{ box-shadow: 1px 1px 30px 1px lightgrey; float: right; padding: 14px; background-color: white; display: inline-block; margin-top: 20px; width: 120px; } .next{ float : right; } .filtre{ width: 100%; padding: 6px 10px 6px 10px; color:white; text-transform: uppercase; font-size: 14px; margin-top: 15px; } .dev-color{ background-color: #fccb3a; } .digi-color{ background-color: #6bb194; } .ops-color{ background-color: #2ea3f2; } .devops-color{ background-color: #ff1c4a; } .bloc-recent{ width: 69%; float: left; } .titre-recent{ padding-left:8px; float: left; color: #848484; } .icon-recent{ padding-right: 16px; float: right; } .phraseFooter{ font-size: 17px; padding-top:10px; color: white; font-weight: 400; } #twi{ height: 18px; width: 18px; } #fb{ height: 18px; width: 18px; } #search{ font-family: 'Open Sans', sans-serif; background-color: transparent; border: none; width: 180px; } #glass{ height: 20px; width: 20px; margin-left: 8px; } #info-plus{ padding-top: 5px; } #titre-home{ color: white; padding-bottom: 20px; font-size: 20px; font-weight: bold; } #titre-between{ margin-top: 130px; margin-bottom: 30px; font-family: 'Open Sans', sans-serif; font-size: 22px; } @media screen and (max-width: 640px) { .nav_imie { height: 0; } #twi{ height: 0; width: 0; } #fb{ height: 0; width: 0; } .img-home{ width: 250px; } .test1{ margin-top: 30px; } .articleHome2{ margin-top:30px; } #titre-home{ padding-bottom: 10px; } .p-home{ padding-top: 7px; margin: 0; } .bloc_principal{ height: 630px; } } @media screen and (max-width: 365px) { #search{ background-color: transparent; border: none; width: 60px; border-bottom: #1c1c1c solid 2px; } .img-home{ width: 200px; } .test1{ margin-top: 20px; } .articleHome{ margin-top: 20px; } #titre-home{ padding-bottom: 10px; } .p-home{ padding-top: 7px; } .bloc_principal_titre{ font-size: 20px; } .bloc_principal{ height: 650px; } }