/* STRUCTURE DE LA PAGE */ /* */ /* image ou couleur de fond de la page entière */ /*

avec le menu (pas obligatoire) */ /*

*/ /*

avec un include du pied de page */ /* */ /* /* LES FONT */ @font-face { font-family:"Comfortaa-Bold"; src:url('Comfortaa/Comfortaa-Bold.ttf'); font-display: swap; } @font-face { font-family:"Comfortaa-Light"; src:url('Comfortaa/Comfortaa-Light.ttf'); font-display: swap; } @font-face { font-family:"Comfortaa-Medium"; src:url('Comfortaa/Comfortaa-Medium.ttf'); font-display: swap; } @font-face { font-family:"Comfortaa-Regular"; src:url('Comfortaa/Comfortaa-Regular.ttf'); font-display: swap; } @font-face { font-family:"Comfortaa-SemiBold"; src:url('Comfortaa/Comfortaa-SemiBold.ttf'); font-display: swap; } @font-face { font-family:"Comfortaa-VariableFont_wght"; src:url('Comfortaa/Comfortaa-VariableFont_wght.ttf'); font-display: swap; } html, p {line-height: 1.45rem; font-family: Comfortaa-Regular, sans serif; font-size: 14px; color: black; } strong {font-family:"Comfortaa-Bold"; } /* pour que Sylvie aie le bold */ html {min-height: 100vh } /* mariage 100vh = 100% de la hauteur de la fenetre du navigateur */ /* BODY, MAIN, FOOTER, HEADER, CONTAINER, CONTENT VOIR AUSSI PLUS BAS FORMAT BLEU */ /* pour fixer le footer au bas et le header en haut de l'écran et éviter qu'il soit sur le texte, padding de la même height que dans footer_position et header_position ci-dessous */ body {min-height: 100vh; padding-bottom:40px; padding-top:90px; background-color:white} main {min-height: 90vh; background-color:white} /* footer éventuellement un bord supérieur vert border-top:1px solid rgba(40,123,108) */ .footer_position {position:fixed; left:0px; right:0px; bottom:0; height:40px; background-color:white; } .footer_contenu {position:absolute; left:0; right:0; bottom:2px; line-height:1rem; background-color:transparent; } /* pour la div de la page footer background à adapter */ footer {font-size:12px; color:rgba(40,123,108); font-family:"Comfortaa-Bold", sans serif;} /* footer, taille et couleur vert de la police */ .header_position {position:fixed; left:0; right:0; top:0; height:90px; background-color:white; z-index:20} .header_contenu {position:absolute; left:0; right:0; padding-top:5px; background-color:white} /* pour la div de la page header background à adapter */ /* la class container est définie dans grid de la manière suivante: */ /* .container {max-width:1170px; margin: auto; padding-left: 15px; padding-right: 15px; } fera 1170px sur gd ecran, il faudra 100% sur plus petits ecrans */ /* POUR SITE 5.5 inventory */ div.galerie {display: block; float: none; text-align: center; margin-left: auto; margin-right: auto; } img.galerie {width:20vw; height:20vw; margin:auto; margin:2px; object-position: center; object-fit: cover;} .tete_colonne {color : rgba(34, 103, 90); /* vert plus foncé */ margin-bottom:10px; } .funding_line {height:60px; line-height:24px; margin-top:20px} .funding_logo {height:80px; line-height:80px; margin-top:-15px; margin-bottom:20px} .funding_line_sans_logo {height:80px; line-height:80px} .funding_line_avossites {height:80px; line-height:30px} .funding_logo_avossites {height:80px; line-height:80px; margin-top:-15px; margin-bottom:10px} /* AVOSSITES POUR LA BANNIERE, IMAGE DU LAC ET TEXTE PAR DESSUS */ .contenant {position: relative; text-align: center;color: white;} .texte_centrer {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);} /* FIN LA BANNIERE, IMAGE DU LAC ET TEXTE PAR DESSUS AVOSSITES */ .container, .footer_position, .footer_contenu, .header_position, .header_contenu, .content {width: 100%; margin: auto } /* .content, .content * {background: transparent; } tous les fonds transparents */ /* BLOCKS */ .centre {display: block; float: none; text-align: center; margin-left: auto; margin-right: auto; } .centreg {display: block; float: none; margin-left: auto; margin-right: auto; } .droite {display: block; float: right; text-align: center; } .gauche {display: block; float: left; } /* TEXTE */ .texte_centre {text-align: center; } .texte_just {text-align: justify; } .texte_droite {text-align: right; } .texte_gauche {text-align: left; } .alignement_g_d {text-align:left} /* à gauche pour le mobile et à droite pour le fixe */ /* BR */ .retour_g {clear: left; } .retour_d {clear: right; } .retour_all {clear: both; } .petit {content:" "; display:block; margin-top:-17px; height:0px} /* COULEURS POUR LA CONSTRUCTION, FONDS ET BORDS */ .fond_blanc {background-color: white} .fond_bleu {background-color: blue} .fond_jaune {background-color: yellow} .fond_noir {background-color: black} .fond_rouge {background-color: red} .fond_vert {background-color: green} .bord_blanc {border: 1px solid white} .bord_bleu {border: 1px solid blue} .bord_jaune {border: 1px solid yellow} .bord_noir {border: 1px solid black} .bord_rouge {border: 1px solid red} .bord_vert {border: 1px solid green} /* LES LIENS A */ a {font-family:"Comfortaa-Bold", sans serif; padding-top:0px; text-decoration:none;} a:link {color:#606161; text-decoration:underline} /* liens inventory */ a:hover {background-color:rgba(47, 140, 123, 0.3); color:black; padding:0px} /* vert plus transparent */ a:visited {color:#606161; text-decoration:underline} /* */ a:active {color:rgba(47, 140, 123);} /* vert lorsqu'on garde le clic dessus */ a.menu_active {color:white; padding:10px; line-height:35px; font-size:16px} a.menu_repos {color:white; padding:10px; line-height:35px; font-size:16px} /* vert */ a.menu_repos:hover {color:rgba(47, 140, 123, 0.5)} /* vert plus transparent */ .onmouse:hover {background-color:rgba(47, 140, 123, 0.3); color:black; padding:3px} /* WIDTH MARGIN PADDING DES H P UL ET LI */ p {padding-bottom: 8px} /* LISTE */ /* LISTE PAGE DEMENAGEMENT PRIVE ET ENTREPRISES VOIR AUSSI AUTRES FORMATS */ ul.demenag {list-style:none; text-align:left; padding:0px; margin:0px} li.demenag {margin-bottom:10px} .demenag>li::before {content: "\2714"; color:black; font-size:16px; padding-right:5px} /* SAMSUNG les Heavy Check Mark sont rouge */ h1, h2, h3, h4, h5, h6 {font-family:"Comfortaa-Regular", sans serif; margin: 0px; } /* TAILLES DES H */ h4 {font-size: 0.8rem; /* dans formulaire */ line-height: 1.2rem; color:black} h5 { font-size: 0.375rem; line-height: 0.4em ; color:black} h6 { font-size: 0.281rem; line-height: 0.3em ; color:black} h3 { font-family:"Comfortaa-Bold", sans serif; font-size: 1.6rem; line-height: 1.6rem; padding-top:12px; padding-bottom:12px; padding-left:20px; /* pas pris en compte */ margin-top: 25px; background-color:rgba(47, 140, 123) ; /* vert */ color:white} h3.contacts {font-family:"Comfortaa-Bold", sans serif; font-size: 1.3rem; line-height: 1.5rem; margin-bottom:5px; color:rgba(47, 140, 123); background-color: white} /* vert */ h2 {font-family:"Comfortaa-Bold", sans serif; font-size: 1.6rem; line-height: 1.8rem; margin-bottom:20px; color:rgba(47, 140, 123)} /* vert */ h1 {font-family:"Comfortaa-Bold", sans serif; font-size: 1.8rem; line-height: 2rem; color:rgba(47, 140, 123) } /* vert */ /* FORMULAIRES */ .espace {margin-top:12px;} /* aligner les labels */ form>section {margin-top: 20px; } input, select, textarea { border: 1px solid rgba(47,140,123,0.6); /* vert */ border-radius: 5px; background-color:white; font-family:"Comfortaa-Bold", sans serif; color: black ; font-size: 0.8rem; padding: 10px ; } input[type="submit"], input[type="reset"] { font-family:"Comfortaa-Bold", sans serif; font-size: 0.8rem; color: black; display: block; margin: auto; padding: 7px ; } input[type="radio"], input[type="checkbox"] /* voir autre format */ { height:1.2em; width:1.2em; margin-top:0.9em; margin-left:1.5em; } input, select, textarea, input[type="submit"], input[type="reset"] { height: 25px; margin-bottom:5px ; } input[type="image"] {background: transparent; } input[type="submit"] { border:1px solid rgba(47,140,123, 0.6); background-color:rgba(47,140,123, 0.2); } /* vert */ /* FORMAT MOBILE */ /* Définitions des visibilités fixes et mobiles */ .mobile {} .fixe {display: none} .inline_fixe {display: none} .inline_mobile {display:inline-block} .inline-fixe {display: none} .inline-mobile {display:inline-block} /* IMAGES */ [type="image"] {border: none; height: 55px; width: 50px; margin-top: -7px; margin-left: 10px; } /* pour la loupe */ .banniere {width: 100%; /* avossites, photo sur toutes les pages */ margin: auto; margin-top: 10px; margin-bottom: 20px} .photo_portrait {height: 170px; /* mariage, marie-rolande */ width: auto; margin-top: 7px ; margin-right: 10px; margin-bottom: 10px; float: left; } .photo_contact { width: 290px; /* mariage, chaise page contact */ height: auto; margin-bottom: 20px; } .galerie_photo { /* mariage, page galerie, les vignettes */ height: 150px; width: auto; display: block; margin: auto; margin-top: 25px; } .photo {height: 90vmin; /* mariage, pas utilisé pages diaporama la photo en grand */ width: auto; margin: auto; margin-top: -20px;} .diapo { /* mariage, affichage déroulement des numéros des photos, chocolat brun foncé comme police */ text-decoration: none; display: inline-block; color: #6d2711 ; font-size: 20px; font-weight: 400; } .logo_menu {width:50%; /* les trois traits horizontaux */ margin-right:10px; margin-top:3px; } .logo_chasseur {width:80%; /* logo du site */ float:left; margin-left:10px; margin-top:-5px; } .plan{width:100%} /* page contacts chasseur */ .format {background-color: yellow; } /* ROUGE col-xs */ @media all and (min-width:350px) /* SAMSUNG URSULE A5 2017 */ { .sticky_country { position:sticky; top:90px; z-index:10; height:100px; background-color:white; margin-bottom:20px; border-bottom: 0.5px solid rgba(47,140,123,1) } /* inventory */ .sticky_owners { position:sticky; top:90px; z-index:10; height:170px; background-color:white; margin-bottom:40px; border-bottom: 0.5px solid rgba(47,140,123,1) } /* inventory */ .sticky_designers { position:sticky; top:90px; z-index:10; height:170px; background-color:white; margin-bottom:40px; border-bottom: 0.5px solid rgba(47,140,123,1) } /* inventory */ .sticky_builders { position:sticky; top:90px; z-index:10; height:170px; background-color:white; margin-bottom:40px; border-bottom: 0.5px solid rgba(47,140,123,1)} /* inventory */ .sticky_boats { position:sticky; top:50px; z-index:10; height:260px; background-color:white; margin-bottom:60px; border-bottom: 0.5px solid rgba(47,140,123,1)} .sticky_countries { position:sticky; top:40px; z-index:10; height:225px; background-color:white; margin-bottom:0px; border-bottom: 0.5px solid rgba(47,140,123,1)} .image_droite { display:block; /* image centrée sur le mobile chasseur */ width:90%; margin:30px auto; border:1px solid rgba(47, 140, 123)} .photo_dossier {width:80%; /* image de la page qui sommes nous centrée sur le mobile chasseur */ margin:30px auto ; border:1px solid rgba(47, 140, 123)} p.texte_dossier {margin-top:5px; margin-bottom:10px} .chasseurs-express {width:100%; /* image historique page qui sommes nous */ margin-top:15px; margin-bottom:30px; border:1px solid rgba(47, 140, 123)} .format {background-color: red; } } /* FIN SAMSUNG URSULE A5 2017 */ /* VERT col-xs */ @media all and (min-width:550px) /* natels position horizontale */ { body {padding-bottom:0px; padding-top:70px; background-color:white} main {background-color:white} .header_position {position:fixed; left:0; right:0; top:0; height:70px; background-color:white; z-index:20} .header_contenu {position:absolute; left:0; right:0; padding-top:5px; background-color:transparent} /* pour la div de la page header background à adapter */ .footer_position {position:relative; height:40px; background-color:white; } .footer_contenu {position:relative; padding-top:15px; padding-bottom:0px; background-color:transparent; } /* pour la div de la page footer background à adapter */ .logo_menu {width:35%; /* les trois traits horizontaux */ margin:auto; } .logo_chasseur {width:45%; /* logo du site */ float:left; margin-left:10px; margin-top:-10px } .plan{width:80%} /* page contacts chasseur */ .format {background-color: green; } } /* FIN natels position horizontale */ /* BLEU col-sm*/ @media all and (min-width:768px) /* TABLETTES ET PLUS GRANDS à partir d'ici, considéré comme FIXE */ { .funding_line {height:100px; line-height:100px} /* 5.5 INVENTORY */ .funding_logo {height:80px; line-height:80px; margin-top:20px; margin-bottom:18px} .funding_line_sans_logo {height:80px; line-height:80px} .funding_line_avossites {height:100px; line-height:50px} .funding_logo_avossites {height:100px; line-height:100px; margin-top:0px; margin-bottom:0px} /* Définitions des visibilités fixes et mobiles paula */ .fixe {display: block} .mobile {display: none} .inline_fixe {display: inline-block} .inline_mobile {display:none} .inline-fixe {display: inline-block} .inline-mobile {display:none} /* BODY, MAIN, FOOTER, HEADER, CONTAINER, CONTENT */ body {min-height: 100vh; padding-bottom:40px; padding-top:100px; background-color:white} main {min-height: 100vh; background-color:white} .header_position {position:fixed; left:0; right:0; top:0; height:100px; background-color:white; z-index:20} .header_contenu {position:absolute; left:0; right:0; padding-top:5px; background-color:white} /* pour la div de la page header background à adapter */ .footer_position {position:fixed; left:0px; right:0px; bottom:0; height:40px; background-color:white; } .footer_contenu {position:absolute; left:0; right:0; bottom:8px; line-height:1rem; background-color:transparent; } /* pour la div de la page footer background à adapter */ /* pour la div de la page footer */ /* POUR SITE 5.5 inventory */ div.galerie {display: block; float: none; text-align:left; margin-left:16px; margin-right: auto; } img.galerie {width:80px; height:80px; margin:auto; margin:1px; object-position: center; object-fit: cover;} .sticky_country { position:sticky; top:130px; z-index:10; height:150px; background-color:white; margin-bottom:60px; border-bottom: 0.5px solid rgba(47,140,123,1) } /* inventory */ .sticky_owners { position:sticky; top:160px; z-index:10; height:120px; background-color:white; margin-bottom:80px; border-bottom: 0.5px solid rgba(47,140,123,1); width:102% } /* inventory */ .sticky_designers { position:sticky; top:160px; z-index:10; height:120px; background-color:white; margin-bottom:80px; border-bottom: 0.5px solid rgba(47,140,123,1) } /* inventory */ .sticky_builders {position:sticky; top:160px; z-index:10; height:120px; background-color:white; margin-bottom:80px; border-bottom: 0.5px solid rgba(47,140,123,1)} /* inventory */ .sticky_boats { position:sticky; top:120px; z-index:10; height:160px; background-color:white; margin-bottom:60px; border-bottom: 0.5px solid rgba(47,140,123,1)} .sticky_countries { position:sticky; top:140px; z-index:10; height:180px; background-color:white; margin-bottom:0px; border-bottom: 0.5px solid rgba(47,140,123,1)} h2.owners {position:fixed; top:201px; left: 25vw; z-index:12} h2.designers {position:fixed; top:201px; left: 28vw; z-index:12} h2.builders {position:fixed; top:201px; left: 27vw; z-index:12} /* LISTE */ /* LISTE PAGE DEMENAGEMENT demenag VOIR AUSSI AUTRES FORMATS */ ul.demenag {margin-left:25px} li.demenag {margin-bottom:10px} .demenag>li::before {font-size:18px; padding-right:15px} h3 {font-family:"Comfortaa-Bold", sans serif; /* 5.5 inventory */ font-size: 1.6rem; line-height: 1.8rem; padding-left:40px; /* n'est pas pris !! */ padding-top:10px; padding-bottom:10px; margin-top: 30px; margin-bottom:10px; background-color:rgba(47, 140, 123, 0.9); /* vert */ color:white} h2 {font-family:"Comfortaa-Bold", sans serif; /* 5.5 inventory */ font-size: 1.3rem; line-height: 1.4rem; margin-bottom:0px; color:rgba(47, 140, 123)} /* vert */ h1 {font-family:"Comfortaa-Bold", sans serif; /* 5.5 inventory */ font-size: 1.7rem; line-height: 1.8rem; color:rgba(47, 140, 123)} /* vert */ /* FORMULAIRE voir autre format */ .espace {margin-top: 12px;} input, select, textarea, input[type="submit"], input[type="reset"] { height: 25px; margin-bottom:8px } input[type="submit"], input[type="reset"] {} input[type="radio"], input[type="checkbox"] { height:1.2em; width:1.2em; margin-top:0.9em; margin-left:2.5em; margin-right:0.2em; } .banniere {width:100%; margin-top:0px; margin-bottom:10px } /* avossites, photo sur toutes les pages */ .photo_contact {height: 350px; /* mariage, chaise page contact */ width: auto; margin-top: 7px ; margin-right: 12px; margin-bottom: 8px; float: left; } .photo {height: 70vmin; /* mariage, pages diaporama la photo en grand pas utilisé */ width: auto;} .logo_fixe {width:120px} .image_droite { display:inline-block; /* image à droite chasseur */ float:right; margin: 0px 0px 20px 20px; width:300px; border:1px solid rgba(47, 140, 123)} .photo_dossier { /* image à droite chasseur */ float:right; margin: 10px 0px 20px 20px; width:300px; border:1px solid rgba(47, 140, 123)} p.texte_dossier {margin-top:5px; margin-bottom:10px} .chasseurs-express {width:80%; /* image historique page qui sommes nous */ margin-top:15px; margin-bottom:50px; border:1px solid rgba(47, 140, 123)} .format {background-color: blue; } } /* FIN TABLETTES ET PLUS GRANDS */ /* GRIS col-sm */ @media all and (min-width:810px) /* NOTEBOOK horizontal */ { .format {background-color: grey; } } /* FIN NOTEBOOK horizontal */ /* BLANC col-sm */ @media all and (min-width:850px) /* NOTEBOOK horizontal */ { .format {background-color: white; } } /* FIN NOTEBOOK horizontal */ /* PINK col-md */ @media all and (min-width:992px) /* NOTEBOOK ET PLUS GRAND */ { a.menu_repos {padding:15px; line-height:35px; font-size:18px} a.menu_active {padding:15px; line-height:35px; font-size:18px} h2 {font-family:"Comfortaa-Bold", sans serif; /* 5.5 inventory */ font-size: 1.5rem; line-height: 1.5rem; margin-bottom:0px; color:rgba(47, 140, 123)} /* vert */ h1 {font-family:"Comfortaa-Bold", sans serif; font-size: 1.8rem; line-height: 2rem; } h2.owners {position:fixed; top:201px; left: 28vw; z-index:12} h2.designers {position:fixed; top:201px; left: 29vw; z-index:12} h2.builders {position:fixed; top:201px; left: 28vw; z-index:12} /* IMAGES */ .format {background-color: pink; } } /* FIN NOTEBOOK ET PLUS GRAND */ /* BROWN col-lg */ @media all and (min-width:1200px) /* GRANDS ECRANS ET MINI TABLETTE RETINA */ { h2.owners {position:fixed; top:201px; left: 32vw; z-index:12} h2.designers {position:fixed; top:201px; left: 33vw; z-index:12} h2.builders {position:fixed; top:201px; left: 32vw; z-index:12} .format {background-color: brown; } } /* FIN GRANDS ECRANS ET MINI TABLETTE RETINA */ /* BLACK col-lg */ @media all and (min-width:1500px) /* TRES GRANDS ECRANS */ { h2.owners {position:fixed; top:201px; left: 35vw; z-index:12} h2.designers {position:fixed; top:201px; left: 36vw; z-index:12} h2.builders {position:fixed; top:201px; left: 35vw; z-index:12} .format {background-color: black; } }