Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- /* Table des matières */
- /* + Paramètres généraux
- _police
- _Balises block (Body, h1, h2, h3, p)
- _boutons ("plus d'info et "send message")
- /* + Paramètres généraux */
- /* _ Police Roboto */
- @font-face
- {
- font-family: 'robotoregular';
- src: url('Roboto-Regular-webfont.eot');
- src: url('Roboto-Regular-webfont.eot?#iefix') format('embedded-opentype'),
- url('Roboto-Regular-webfont.woff2') format('woff2'),
- url('Roboto-Regular-webfont.woff') format('woff'),
- url('Roboto-Regular-webfont.ttf') format('truetype'),
- url('Roboto-Regular-webfont.svg#robotoregular') format('svg');
- font-weight: normal;
- font-style: normal;
- }
- body
- {
- font-family: 'robotoregular', Arial, sans-serif;
- }
- /* _ Général */
- body
- {
- margin: 0;
- padding: 0;
- width: 100%;
- }
- body h1 h2 h3
- {
- text-transform: uppercase;
- }
- h1
- {
- color: #FFFFFF; /* normal que cela disparaisse vu qu'il est en blanc */
- }
- h2
- {
- text-align: center;
- }
- h3
- {
- color: black;
- }
- p
- {
- color: black;
- }
- /*_ séparateurs */
- hr
- {
- color: #ECECEC;
- text-align: center;
- display: inline-block;
- vertical-align: middle;
- width: 4rem;
- background: #000;
- margin: 0em 0em 0em 0em;
- }
- .separateur
- {
- text-align: center;
- }
- .fa-circle
- {
- color: #5DBCD2;
- }
- .icone_x /* réussir à mettre la borudre dans l'axe ! */
- {
- color: #5DBCD2;
- background-color: white;
- border-radius: 50%;
- border: solid white 3px;
- }
- /*media queries à faire sur une autre page pour ne pas charger */
- @media screen and (max-width: 1280px)
- {
- }
- @media all and (max-device-width: 480px)
- {
- }
- /* Fin Paramètres */
- /* + Header (Logo, Nav, slide, texte et bouton) */
- header
- {
- margin-bottom: 30px;
- box-shadow: 0px 10px 10px #fafafa;
- }
- /* _Logo + nav */
- .conteneur_1
- {
- display: flex;
- flex-wrap: wrap;
- justify-content: space-around;
- margin-bottom: 15px;
- }
- /* _logo */
- .logo_webagency
- {
- display: block;
- padding: auto;
- float: left;
- }
- /* _Nav */
- .menu-horizontal
- {
- display: flex;
- justify-content: flex-end;
- }
- a
- {
- color: #837f7c;
- text-decoration: none;
- }
- ul.menu_horizontal li
- {
- display: inline;
- padding: 1em;
- }
- .menu_horizontal a:hover
- {
- border-top: 2px solid #5CABD1;
- padding-top: 15px;
- }
- /* _slideshow */
- @keyframes conteneur_2
- {
- 0% { left:0; }
- 25% { left:0%; }
- 50% { left:-100%; }
- 75% { left:-100%; }
- 100% { left:0; }
- }
- .conteneur_2
- {
- overflow: hidden;
- padding: 0px 0px 0px 0px;
- width: 100%;
- }
- .slides
- {
- list-style:none;
- position:relative;
- width:200%;
- overflow:hidden;
- padding: 0px;
- margin: 0px;
- -moz-animation:conteneur_2 10s infinite;
- -webkit-animation:conteneur_2 10s infinite;
- animation:conteneur_2 10s infinite;
- }
- .slides > li
- {
- position:relative;
- float:left;
- width:50%;
- }
- .slides > ul
- {
- margin: 0px;
- padding: 0px;
- left: 0;
- }
- .titre_slide
- {
- color: #5cadd3;
- }
- .conteneur_2 img
- {
- display:block;
- width:100%;
- max-width:100%;
- margin-left: 0px;
- padding-left: 0px;
- padding: 0px;
- overflow: hidden;
- }
- .conteneur_2 h1
- {
- font-size:1.5em;
- position:absolute;
- top : 30%;
- left:9%;
- text-align:left;
- color:#fff;
- }
- .conteneur_2 p
- {
- font-size:1em;
- position:absolute;
- top : 45%;
- left:9%;
- text-align:left;
- color:#fff;
- }
- .conteneur_2 button
- {
- font-size:1em;
- padding:0.5em;
- position:absolute;
- border: none;
- top :58%;
- left:9%;
- text-align:left;
- color:#fff;
- background-color: #5cadd3;
- }
- .sliderboutton
- {
- position: absolute;
- top:45%;
- left:-50px;
- background-color: rgba(0,0,0,0.5);
- color: white;
- padding: 20px 25px 20px 25px;
- border-radius: 50px;
- font-size: 2em;
- }
- /* _phrase d'introduction */
- .phrase_intro p
- {
- font-weight: bold;
- font-size: 1,3em;
- }
- .phrase_intro
- {
- display: flex;
- width: 100%;
- flex-direction: column;
- flex-direction: row;
- }
- button
- {
- background-color: #5CABD1;
- color: #FFFFFF;
- padding: 12px 20px;
- border: none;
- border-radius: 4px;
- cursor: pointer;
- box-shadow: 0px 4px 0px #2b638f;
- }
- /* + CSS Nos services */
- /*_ titre + texte */
- .titre_1
- {
- padding-top: 10px;
- }
- .texte_1
- {
- text-align: center;
- }
- .conteneur_3
- {
- box-shadow: 0px 10px 10px #fafafa;
- margin-bottom: 30px;
- }
- .fa-circle
- {
- color: #5DBCD2;
- }
- /* _Image + 3 icones et textes */
- .conteneur_4
- {
- display: flex;
- flex-direction: row;
- justify-content: center;
- width: 100%
- }
- .photo_apple
- {
- width: 40%;
- }
- .texte_service
- {
- width: 50%;
- }
- /* _les 3 icones et textes */
- .icones
- {
- display: flex;
- flex-direction: row;
- margin-right: 15px;
- }
- .texte_service ul li
- {
- list-style-type: none;
- }
- .ux_design
- {
- display: flex;
- flex-direction: row;
- justify-content: space-between;
- }
- .ui_design
- {
- display: flex;
- flex-direction: row;
- justify-content: space-between;
- }
- .seo_design
- {
- display: flex;
- flex-direction: row;
- justify-content: space-between;
- }
- .ux_icon
- {
- color: #5cadd3;
- border: 1px #ebebeb solid;
- border-radius: 50%;
- padding:11px;
- margin:auto;
- }
- .ui_icon
- {
- color: #5cadd3;
- border: 1px #ebebeb solid;
- border-radius: 50%;
- padding:11px;
- margin:auto;
- }
- .seo_icon
- {
- color: #5cadd3;
- border: 1px #ebebeb solid;
- border-radius: 50%;
- padding:11px;
- margin:auto;
- }
- .point_bleu
- {
- background:#5cadd3;
- border-radius:50%;
- border: 2px solid white;
- width:10px;
- height:10px;
- margin: auto;
- margin-left: -8px;
- display: block;
- }
- /* + Nos projets : portfolio */ /* mettre en place le sélecteur en voyant comment
- utiliser au mieux "checked" en css */
- /* _Titre et conteneur_5 */
- .titre_2
- {
- padding-top: 10px;
- }
- .texte_2
- {
- text-align: center;
- }
- .conteneur_5
- {
- background-color: #f5f5f5;
- margin: 10px 0px 10px 0px;
- padding: 50px 0px 40px 0px;
- display: flex;
- flex-direction: column;
- }
- /* _barre dynamique */
- .barre_nav
- {
- display: flex;
- flex-direction: row;
- margin: auto;
- margin-bottom: 30px;
- text-align: center; /* ne se met pas au centre avec safari !!! */
- }
- .barre
- {
- display: flex;
- flex-direction: column;
- text-align: center;
- }
- .barre a
- {
- background-color: #DBDBDB;
- padding : 0px 15px 0px 15px;
- text-decoration: none;
- color: black;
- }
- .barre:first-child a
- {
- border-radius: 5px 0px 0px 5px;
- }
- .barre:last-child a
- {
- border-radius: 0px 5px 5px 0px;
- }
- .barre:hover a
- {
- background-color: #5cadd3;
- border-bottom: 3px solid #468CAD;
- }
- .barre:hover a p
- {
- color: white;
- }
- .indicateur_hover
- {
- width: 0;
- height: 0;
- border-left: 10px solid transparent;
- border-right: 10px solid transparent;
- border-top: 10px solid #468cad;
- position: relative;
- z-index: 2;
- margin: auto;
- opacity: 0;
- }
- .barre:hover .indicateur_hover
- {
- opacity: 1; /* permet de remplacer hidden */
- }
- /* _portfolio */
- .portfolio
- {
- display: flex;
- flex-wrap: wrap;
- justify-content: space-between;
- width: 100%;
- }
- .folios
- {
- width: 22.5%;
- display: flex;
- margin: 10px;
- position: relative;
- justify-content: center;
- }
- .folios img
- {
- width: 100%;
- height: 100%;
- margin: 0;
- padding: 0;
- }
- .icone_oeil_legend
- {
- position: absolute;
- bottom: 0px;
- color: white;
- background-color: rgba(0,0,0,0.5);
- width: 100%;
- height: 33%;
- opacity: 0;
- }
- .icone_oeil_legend p
- {
- color: white;
- }
- .icone_oeil_legend:hover
- {
- opacity: 1;
- }
- .folio_legend bold
- {
- font-weight: bold;
- text-transform: capitalize;
- }
- .fa-eye
- {
- background-color: #5cadd3;
- border: white 1px solid;
- position: absolute;
- border-radius: 150px;
- padding:2px 4px 2px 4px;
- right: 10px;
- top: -15px;
- }
- /* + Section Contact */
- /* _Map et voile */
- .conteneur_6
- {
- position: absolute;
- left: 0px;
- right: 0px;
- z-index: 1;
- pointer-events: none;
- }
- .voile_bleu
- {
- position: absolute;
- width: 100%;
- height: 100%;
- background-color: rgba(135,206,250,0.4);
- z-index: 3;
- bottom: 0px;
- }
- /* _encart contact info */
- .contact_info
- {
- position: absolute;
- bottom: 50px;
- right: 50px;
- background-color: #f5f5f5;
- z-index: 3;
- }
- .contact_info
- {
- border: 4px solid #ccc;
- border-radius: 6px;
- opacity: 0.7;
- padding: 5px 10px 5px 10px;
- margin: 1% 4% 1% 1%;
- }
- .bouton
- {
- padding: 3Px 3px 3Px 3px;
- width: 125px ;
- height: 75px;
- cursor: pointer;
- }
- /* mettre une section footer pour les mentions légales */
- footer
- {
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement