h3 equipe chasse contenu d'après
This commit is contained in:
@@ -860,10 +860,19 @@ ul.pagination {
|
||||
.titre_bsn p {
|
||||
padding-right: 15%; }
|
||||
|
||||
.after-h1 {
|
||||
transition: width 5s ease-in-out; }
|
||||
.after-h1:hover {
|
||||
width: 100%; }
|
||||
@keyframes anim {
|
||||
0% {
|
||||
width: 0%; }
|
||||
100% {
|
||||
width: 100%; } }
|
||||
|
||||
.after-h1 .test {
|
||||
opacity: 0;
|
||||
transition: opacity 1s ease-in-out;
|
||||
animation: anim 5s 500ms 1 normal ease-in-out forwards; }
|
||||
|
||||
.after-h1:hover .test {
|
||||
opacity: 1; }
|
||||
|
||||
.programmes {
|
||||
display: flex;
|
||||
@@ -907,61 +916,67 @@ ul.pagination {
|
||||
padding-bottom: 6rem;
|
||||
padding-top: 2rem; }
|
||||
|
||||
#mozaique_personnes {
|
||||
display: flex !important;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
width: 70%;
|
||||
margin: auto; }
|
||||
|
||||
.mozaique_personnes {
|
||||
background-color: #d5d2d1; }
|
||||
.mozaique_personnes h3 {
|
||||
padding-top: 3rem;
|
||||
padding-left: 15%;
|
||||
padding-right: 15%;
|
||||
font-family: "Sarabun";
|
||||
font-weight: 800;
|
||||
font-size: 1rem;
|
||||
line-height: 20px;
|
||||
text-align: left; }
|
||||
|
||||
.mozaique {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
width: 50%;
|
||||
padding: 0.5rem; }
|
||||
|
||||
.info {
|
||||
background-color: #fff;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-family: "Sarabun", sans-serif;
|
||||
width: 30rem;
|
||||
height: 30rem; }
|
||||
.info h5 {
|
||||
font-weight: 900;
|
||||
font-size: 1.3rem;
|
||||
margin: 0;
|
||||
padding-top: 1rem;
|
||||
padding-left: 1rem; }
|
||||
.info h6 {
|
||||
font-weight: 300;
|
||||
font-size: 1.1rem;
|
||||
font-style: italic;
|
||||
margin: 0;
|
||||
padding-left: 1rem;
|
||||
padding-bottom: 1rem; }
|
||||
|
||||
.info:hover {
|
||||
background-color: #000;
|
||||
color: #fff;
|
||||
transition: 0.2s ease-in-out; }
|
||||
|
||||
.portrait {
|
||||
background: transparent !important; }
|
||||
.portrait img {
|
||||
width: 5rem !important; }
|
||||
.mozaique_personnes .equipe {
|
||||
display: flex !important;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
width: 65%;
|
||||
margin: auto; }
|
||||
.mozaique_personnes .equipe h3 {
|
||||
padding-top: 3rem;
|
||||
min-width: 100%;
|
||||
font-family: "Sarabun";
|
||||
font-weight: 800;
|
||||
font-size: 1rem;
|
||||
line-height: 20px;
|
||||
text-align: left; }
|
||||
.mozaique_personnes .equipe .personne {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
padding-right: 0.5rem;
|
||||
padding-bottom: 0.5rem; }
|
||||
.mozaique_personnes .equipe .personne .mozaique {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-end;
|
||||
max-width: 30rem; }
|
||||
.mozaique_personnes .equipe .personne .mozaique .portrait {
|
||||
min-width: 10rem;
|
||||
min-height: 10rem;
|
||||
background: red !important; }
|
||||
.mozaique_personnes .equipe .personne .mozaique .portrait img {
|
||||
max-width: 5rem !important;
|
||||
max-height: 5rem !important; }
|
||||
.mozaique_personnes .equipe .personne .mozaique .info {
|
||||
background-color: #fff;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-family: "Sarabun", sans-serif;
|
||||
width: 50%;
|
||||
height: 30rem;
|
||||
min-width: 15rem; }
|
||||
.mozaique_personnes .equipe .personne .mozaique .info h5 {
|
||||
font-weight: 900;
|
||||
font-size: 1.3rem;
|
||||
margin: 0;
|
||||
padding-top: 1rem;
|
||||
padding-right: 1rem;
|
||||
padding-left: 1rem; }
|
||||
.mozaique_personnes .equipe .personne .mozaique .info h6 {
|
||||
font-weight: 300;
|
||||
font-size: 1.1rem;
|
||||
font-style: italic;
|
||||
margin: 0;
|
||||
padding-right: 1rem;
|
||||
padding-bottom: 1rem;
|
||||
padding-left: 1rem; }
|
||||
.mozaique_personnes .equipe .personne .mozaique .info:hover {
|
||||
background-color: #000;
|
||||
color: #fff;
|
||||
transition: 0.2s ease-in-out; }
|
||||
|
||||
.bouton {
|
||||
border: solid;
|
||||
|
||||
@@ -150,10 +150,23 @@
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes anim {
|
||||
0% {width: 0%;}
|
||||
100% {width: 100%}
|
||||
}
|
||||
|
||||
.after-h1 { // fonctionne mais manque "when in View"
|
||||
transition: width 5s ease-in-out;
|
||||
.test {
|
||||
opacity: 0;
|
||||
transition: opacity 1s ease-in-out;
|
||||
animation: anim 5s 500ms 1 normal ease-in-out forwards;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
width: 100%;
|
||||
.test {
|
||||
opacity: 1;
|
||||
}
|
||||
// opacity: 1;
|
||||
// transition: width 5s ease-in-out;
|
||||
}
|
||||
}
|
||||
@@ -332,118 +345,125 @@
|
||||
|
||||
}
|
||||
|
||||
#mozaique_personnes {
|
||||
display: flex !important;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
// margin-left: 15%;
|
||||
// padding-right: 15%;
|
||||
width: 70%;
|
||||
margin: auto;
|
||||
|
||||
|
||||
}
|
||||
.mozaique_personnes {
|
||||
background-color: #d5d2d1;
|
||||
|
||||
|
||||
.mozaique_personnes {
|
||||
background-color: #d5d2d1;
|
||||
|
||||
h3 {
|
||||
padding-top: 3rem;
|
||||
padding-left: 15%;
|
||||
padding-right: 15%;
|
||||
font-family: "Sarabun";
|
||||
font-weight: 800;
|
||||
font-size: 1rem;
|
||||
line-height: 20px;
|
||||
text-align: left;
|
||||
}
|
||||
.equipe {
|
||||
display: flex !important;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
// margin-left: 15%;
|
||||
// padding-right: 15%;
|
||||
width: 65%;
|
||||
margin: auto;
|
||||
// justify-items: center;
|
||||
|
||||
h3 {
|
||||
// display: flex;
|
||||
// flex-grow: 1;
|
||||
padding-top: 3rem;
|
||||
// padding-left: 15%;
|
||||
min-width: 100%;
|
||||
font-family: "Sarabun";
|
||||
font-weight: 800;
|
||||
font-size: 1rem;
|
||||
line-height: 20px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.personne {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
// width: 50%;
|
||||
|
||||
padding-right: 0.5rem;
|
||||
padding-bottom: 0.5rem;
|
||||
|
||||
.mozaique {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
|
||||
// .personne {
|
||||
// // display: flex;
|
||||
// // flex-direction: row;
|
||||
// width: 50%;
|
||||
//
|
||||
// }
|
||||
justify-content: flex-end;
|
||||
max-width: 30rem;
|
||||
|
||||
.portrait {
|
||||
min-width: 10rem;
|
||||
min-height: 10rem;
|
||||
|
||||
// max-width:50% !important;
|
||||
background: red !important;
|
||||
|
||||
.mozaique {
|
||||
// background-color: #fff;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
width: 50%;
|
||||
// max-width: 35%;
|
||||
padding: 0.5rem;
|
||||
// align-items: stretch;
|
||||
// position: relative;
|
||||
// margin-right: 34%;
|
||||
// margin-bottom: 6rem;
|
||||
// margin-left: 15%;
|
||||
// height: auto;
|
||||
img {
|
||||
max-width: 5rem !important;
|
||||
max-height: 5rem !important;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.info {
|
||||
background-color: #fff;
|
||||
display:flex;
|
||||
flex-direction: column;
|
||||
font-family: $font-family-default;
|
||||
width: 50%;
|
||||
height: 30rem;
|
||||
min-width: 15rem;
|
||||
|
||||
h5 {
|
||||
font-weight: 900;
|
||||
font-size: 1.3rem;
|
||||
margin: 0;
|
||||
padding-top: 1rem;
|
||||
padding-right: 1rem;
|
||||
padding-left: 1rem;
|
||||
}
|
||||
h6 {
|
||||
font-weight: 300;
|
||||
font-size: 1.1rem;
|
||||
font-style: italic;
|
||||
margin: 0;
|
||||
padding-right: 1rem;
|
||||
padding-bottom: 1rem;
|
||||
padding-left: 1rem;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: #000;
|
||||
color: #fff;
|
||||
transition:0.2s ease-in-out;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// .personne {
|
||||
// width: 45%;
|
||||
// display: flex;
|
||||
// flex-direction: row;
|
||||
// }
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
// .mozaique :hover {
|
||||
// background-color: #000;
|
||||
// color: #fff;
|
||||
// }
|
||||
|
||||
.info {
|
||||
background-color: #fff;
|
||||
display:flex;
|
||||
flex-direction: column;
|
||||
font-family: $font-family-default;
|
||||
width: 30rem;
|
||||
height: 30rem;
|
||||
|
||||
h5 {
|
||||
font-weight: 900;
|
||||
font-size: 1.3rem;
|
||||
margin: 0;
|
||||
padding-top: 1rem;
|
||||
padding-left: 1rem;
|
||||
}
|
||||
h6 {
|
||||
font-weight: 300;
|
||||
font-size: 1.1rem;
|
||||
font-style: italic;
|
||||
margin: 0;
|
||||
padding-left: 1rem;
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
// comment faire pour donner une largueur à .info 2 fois plus grande que .portrait? les img de .portrait ne semblent pas vouloir bouger...
|
||||
|
||||
|
||||
.info:hover {
|
||||
background-color: #000;
|
||||
color: #fff;
|
||||
transition:0.2s ease-in-out;
|
||||
}
|
||||
|
||||
|
||||
.portrait {
|
||||
// max-width:50% !important;
|
||||
background: transparent !important;
|
||||
|
||||
img {
|
||||
width: 5rem !important;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -1,16 +1,34 @@
|
||||
<div class="callout">
|
||||
{% set image = page.media.images|first %}
|
||||
<div class="callout after-h1">
|
||||
<!-- {% set image = page.media.images|first %}
|
||||
{% if image %}
|
||||
{{ image.cropResize(400,400).html('','','align-'~page.header.image_align)|raw }}
|
||||
{% endif %}
|
||||
<div class="titre_bsn">
|
||||
{% endif %} -->
|
||||
|
||||
<!-- <div class="titre_bsn">
|
||||
<h1>EPAU</h1>
|
||||
|
||||
<div class="test" >
|
||||
<svg width="100%" height="0.5rem">
|
||||
<rect class="after-h1" width="100%" height="100%" style="fill:rgb(255,255,255)" opacity="0.1" />
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<h2>L'EUROPE DES PROJETS ARCHITECTURAUX ET URBAINS</h2>
|
||||
|
||||
<p>Organisme national de recherche et d’expérimentation, sous la tutelle des Ministères en charge de l’architecture et de l’urbanisme, la Cité de l’Architecture et du Patrimoine et de l’Association Europan France</p>
|
||||
|
||||
|
||||
|
||||
{{ content|raw }}
|
||||
</div> -->
|
||||
|
||||
<div class="titre_bsn">
|
||||
|
||||
<h1>EPAU</h1>
|
||||
|
||||
<div class="test" >
|
||||
<svg width="100%" height="0.5rem">
|
||||
<rect class="after-h1" width="100%" height="100%" style="fill:rgb(255,255,255)" />
|
||||
<rect class="" width="100%" height="100%" style="fill:rgb(255,255,255)" />
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -1,17 +1,17 @@
|
||||
|
||||
|
||||
<div id="mozaique_personnes{{ page.header.class}}">
|
||||
<div class="equipe"{{ page.header.class}}">
|
||||
{{ content|raw }}
|
||||
|
||||
|
||||
|
||||
{% for personne in page.header.personnes %}
|
||||
<!-- {{ dump(personne) }} -->
|
||||
<!-- <div class="personne"> -->
|
||||
<div class="personne">
|
||||
<div class="mozaique">
|
||||
<div class="portait">
|
||||
{% if personne.portrait %}
|
||||
<img src="{{page.media[personne.portrait].url|e }}" alt="portrait de {{personne.nom}}" />
|
||||
<img src="{{page.media[personne.portrait].url|e }}" alt="photo de {{personne.nom}}" />
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="info">
|
||||
@@ -42,7 +42,7 @@
|
||||
</div>
|
||||
|
||||
|
||||
<!-- </div> -->
|
||||
</div>
|
||||
|
||||
{% endfor %}
|
||||
|
||||
|
||||
@@ -3,29 +3,7 @@
|
||||
{% if image %}
|
||||
{{ image.cropResize(400,400).html('','','align-'~page.header.image_align)|raw }}
|
||||
{% endif %}
|
||||
<div class="titre_bsn">
|
||||
|
||||
|
||||
<h1>Contact</h1>
|
||||
|
||||
|
||||
<h2></h2>
|
||||
|
||||
<p>Fabienne Dran
|
||||
Assistante de direction
|
||||
|
||||
Fabienne.Dran@developpement-durable.gouv.fr
|
||||
|
||||
33 (0)1 40 81 93 27
|
||||
+33 (0)7 86 50 33 31
|
||||
</p>
|
||||
|
||||
|
||||
<div class="test" >
|
||||
<svg width="50%" height="0.5rem">
|
||||
<rect class="after-h1" width="3%" height="100%" style="fill:rgb(0,0,0)" />
|
||||
</svg>
|
||||
</div>
|
||||
{{ content|raw }}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user