Commit c6cd9a16 authored by sarah's avatar sarah
Browse files

last home page layout

parent 7bb00141
......@@ -7,9 +7,10 @@
<style>
:root {
counter-reset: gridItems 0;
font-family:
}
body {
font-family: "Px Grotesk Regular";
font-family: "Px Grotesk";
}
.grid--container {
......@@ -74,15 +75,51 @@
outline: 1px dotted red;
}
h1.rotated {
/* h1.rotated {
writing-mode: vertical-lr;
writing-mode: tb;
transform: rotate(180deg);
}*/
dt::before {
content: "—";
}
dd {
/* font-family: "Sprat";
font-size: 0.85em;
line-height: 1.4em;*/
margin: 0;
}
</style>
</head>
<body>
<section class="grid--container">
<div>
<h1 class="rotated">Maison Losseau</h1>
<p>Aménagement intérieur, scénographie,
muséographie du Centre d’Interprétation
de la Maison Losseau</p>
<dl>
<dt>Adresse</dt>
<dd>39-41 Rue de Nimy, Mons (BE)</dd>
<dt>Auteur</dt>
<dd>Nord (collab. label architecture)</dd>
<dt>Client</dt>
<dd>Province du Hainaut</dd>
<dt>Superficie</dt>
<dd>364 m2</dd>
<dt>Budget</dt>
<dd>592 087,75 € HTVA</dd>
<dt>Budget global final</dt>
<dd>592 087,75 € HTVA</dd>
<dt>Début d’étude</dt>
<dd>octobre 2014</dd>
<dt>Fin chantier</dt>
<dd>septembre 2015</dd>
</dl>
</div>
<div><img src="../losseau/photos/Losseau-000.jpg" /></div>
<div><img src="../losseau/photos/Losseau-001.jpg" /></div>
<div><img src="../losseau/photos/Losseau-002.jpg" /></div>
......@@ -93,7 +130,54 @@
<div><img src="../losseau/photos/Losseau-007.jpg" /></div>
<div><img src="../losseau/photos/Losseau-008.jpg" /></div>
<div><img src="../losseau/photos/Losseau-009.jpg" /></div>
<div>
<div><img src="../losseau/photos/Losseau-010.jpg" /></div>
<div><img src="../losseau/photos/Losseau-011.jpg" /></div>
<div><img src="../losseau/photos/Losseau-012.jpg" /></div>
<div><img src="../losseau/photos/Losseau-013.jpg" /></div>
<div><img src="../losseau/photos/Losseau-014.jpg" /></div>
<div><img src="../losseau/photos/Losseau-015.jpg" /></div>
<div><img src="../losseau/photos/Losseau-016.jpg" /></div>
<div><img src="../losseau/photos/Losseau-017.jpg" /></div>
<div><img src="../losseau/photos/Losseau-018.jpg" /></div>
<div><img src="../losseau/photos/Losseau-019.jpg" /></div>
<div><img src="../losseau/photos/Losseau-020.jpg" /></div>
<div><img src="../losseau/photos/Losseau-021.jpg" /></div>
<div><img src="../losseau/photos/Losseau-022.jpg" /></div>
<div><img src="../losseau/photos/Losseau-023.jpg" /></div>
<div><img src="../losseau/photos/Losseau-024.jpg" /></div>
<div><img src="../losseau/photos/Losseau-025.jpg" /></div>
<div><img src="../losseau/photos/Losseau-026.jpg" /></div>
<div><img src="../losseau/photos/Losseau-027.jpg" /></div>
<div><img src="../losseau/photos/Losseau-028.jpg" /></div>
<div><img src="../losseau/photos/Losseau-029.jpg" /></div>
<div><img src="../losseau/photos/Losseau-030.jpg" /></div>
<div><img src="../losseau/photos/Losseau-031.jpg" /></div>
<div><img src="../losseau/photos/Losseau-032.jpg" /></div>
<div><img src="../losseau/photos/Losseau-033.jpg" /></div>
<div><img src="../losseau/photos/Losseau-034.jpg" /></div>
<div><img src="../losseau/photos/Losseau-035.jpg" /></div>
<div><img src="../losseau/photos/Losseau-036.jpg" /></div>
<div><img src="../losseau/photos/Losseau-037.jpg" /></div>
<div><img src="../losseau/photos/Losseau-038.jpg" /></div>
<div><img src="../losseau/photos/Losseau-039.jpg" /></div>
<div><img src="../losseau/photos/Losseau-040.jpg" /></div>
<div><img src="../losseau/photos/Losseau-041.jpg" /></div>
<div><img src="../losseau/photos/Losseau-042.jpg" /></div>
<div><img src="../losseau/photos/Losseau-043.jpg" /></div>
<div><img src="../losseau/photos/Losseau-044.jpg" /></div>
<div><img src="../losseau/photos/Losseau-045.jpg" /></div>
<div><img src="../losseau/photos/Losseau-046.jpg" /></div>
<div><img src="../losseau/photos/Losseau-047.jpg" /></div>
<div><img src="../losseau/photos/Losseau-048.jpg" /></div>
<div><img src="../losseau/photos/Losseau-049.jpg" /></div>
<div><img src="../losseau/photos/Losseau-050.jpg" /></div>
<div><img src="../losseau/photos/Losseau-051.jpg" /></div>
<div><img src="../losseau/photos/Losseau-052.jpg" /></div>
<div><img src="../losseau/photos/Losseau-053.jpg" /></div>
<div><img src="../losseau/photos/Losseau-054.jpg" /></div>
<div><img src="../losseau/photos/Losseau-055.jpg" /></div>
<div><img src="../losseau/photos/Losseau-056.jpg" /></div>
<div>
<p>
Le projet consiste en l’aménagement complet
du Centre d’Interprétation de la Maison Losseau,
......@@ -139,22 +223,6 @@ des nombreux partenaires. Ainsi mené, le marché
public devient une réelle opportunité d’investissement et de création au service de la communauté.
</p>
</div>
<div>
<h1 class="rotated">Maison Losseau</h1>
</div>
<div>
<p>Aménagement intérieur, scénographie,
muséographie du Centre d’Interprétation
de la Maison Losseau</p>
<dt>Adresse</dt> <dd>39-41 Rue de Nimy, Mons (BE)</dd>
<dt>Auteur</dt> <dd>Nord (collab. label architecture)</dd>
<dt>Client</dt> <dd>Province du Hainaut</dd>
<dt>Superficie</dt> <dd>364 m2</dd>
<dt>Budget</dt> <dd>592 087,75 € HTVA</dd>
<dt>Budget global final</dt> <dd>592 087,75 € HTVA</dd>
<dt>Début d’étude</dt> <dd>octobre 2014</dd>
<dt>Fin chantier</dt> <dd>septembre 2015</dd>
</div>
</section>
<script src="grid.js"></script>
<script>
......
......@@ -21,11 +21,77 @@
</section>
<section id="main" class="grid--container">
<div class="projects-iceberg"><img src="pict/Screenshot_20200330_091319.png" /></div>
<div class="live-pict"><img src="pict/Screenshot_20200330_092828.png" /></div>
<div class="live-quotes"><p>«We believe that every major urban project is full of hopes and fantasies.»</p></div>
<div class="projects-plan"><img src="pict/Screenshot_20200330_091436.png"/></div>
<div class="live-pict"><img src="pict/Screenshot_20200330_092120.png" /></div>
<figure class="projects-iceberg projects-pict">
<img src="pict/Screenshot_20200330_091319.png" />
<figcaption><p>Maquette en cours ~ <a>Projet B</a></p></figcaption>
</figure>
<figure class="live-pict ref">
<img src="pict/Screenshot_20200330_092828.png" />
<figcaption><p>Extrait de <span class="extract-title">Pirou-Plage</span>, Agnès Varda</p></figcaption>
</figure>
<figure class="live-quotes"><p>“We believe that every major urban project is full of hopes and fantasies.”</p><figcaption><p>Valentin Bollaert ~ <a>Losseau project</a></p></figcaption></figure>
<figure class="projects-plan projects-pict"><img src="pict/Screenshot_20200330_091436.png"/><figcaption><p>Façade ~ <a>Projet B</a></p></figcaption></figure>
<figure class="live-pict projects-pict">
<img src="pict/Screenshot_20200330_092120.png" />
<figcaption><p>Scenographie ~ <a>Projet B</a></p></figcaption>
</figure>
<figure class="live-pict projects-pict">
<img src="pict/002_caberdoucche_photo_170524-1.jpg" />
<figcaption><p>~ <a>Caberdouche</a></p></figcaption>
</figure>
<figure class="live-pict projects-pict">
<img src="pict/22491527_1463766763699994_2747640659864714406_n.png" />
<figcaption><p>~ <a>Caberdouche</a></p></figcaption>
</figure>
<figure class="live-pict projects-pict">
<img src="pict/IMG_2054.JPG" />
</figure>
<figure class="live-quotes"><p>«&nbsp;Les compétences des deux associées sont complémentaires. Valentin prends davantage en charge les questions techniques et constructives, et Pauline les questions relatives à la communication et l’administration. Nous restons cependant attentifs à ne pas nous enfermer dans des attributions “confortables” ou caricaturales vis à vis de nos compétences et restons très attachés à la figure de l'“architecte généraliste”.&nbsp;»</p><figcaption><p>Valentin Bollaert</p></figcaption></figure>
<figure class="live-pict projects-pict">
<img src="pict/IMG_20170612_093324.jpg" />
</figure>
<figure class="live-pict projects-pict">
<img src="pict/interieur.gif" />
<figcaption><p>Intérieur ~ <a>Caberdouche</a></p></figcaption>
</figure>
<figure class="live-pict">
<img src="pict/Screenshotfrom2020-08-04-16-37-46.png" />
<figcaption><p><span>Across</span> lecture of 2019</p></figcaption>
</figure>
<figure class="live-pict projects-pict">
<img src="pict/Screenshotfrom2020-08-04-16-37-58.png" />
<figcaption><p>~ <a>A+ Magazine 2020 </a></p></figcaption>
</figure>
<!-- <figure class="live-pict projects-pict">
<img src="pict/Screenshotfrom2020-08-04-16-38-10.png" />
<figcaption><p>Scenographie ~ <a>Projet B</a></p></figcaption>
</figure> -->
<figure class="live-pict ref">
<img src="pict/Screenshotfrom2020-08-04-16-38-31.png" />
<figcaption><p>Tournai ~ <a>Eva Le Roi</a></p></figcaption>
</figure>
<figure class="live-pict">
<img src="pict/Screenshotfrom2020-08-04-16-38-44.png" />
<figcaption><p><span>Dévorage voilages</span> installation dans le nouvel atelier du photograveur Olivier Dengis</p></figcaption>
</figure>
<figure class="live-pict">
<img src="pict/Screenshotfrom2020-08-04-17-57-16.png" />
<figcaption><p><span>Dévorage voilages</span>production de 5 rideaux 450*260cm pour l’atelier d’un photograveur,</p>
<p class="date">02-03.2020, posted from Pauline's phone</p></figcaption>
</figure>
</section>
</body>
......
......@@ -20,7 +20,6 @@ time, mark, audio, video {
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
......
......@@ -50,18 +50,23 @@
/* Nav
========================================================================== */
body {
}
.home-logo {
font-family: 'PxGrotesk';
font-weight: 500;
flex: 1 0;
font-size: 1.5em;
}
#navigation {
margin: 10px 0 27px 0;
width: 100%;
}
#navigation nav {
display: flex;
}
#navigation nav ul {
flex: 10 0;
}
#navigation li {
font-family: 'PxGrotesk';
font-weight: normal;
......@@ -69,11 +74,28 @@ body {
display: inline;
margin-left: 15px;
}
#navigation a {
color:black;
}
#navigation a:hover {
color:var(--orange);
}
#navigation nav ul a {
vertical-align: -7px;
}
/* Main
========================================================================== */
body {
font-family:'PxGrotesk';
}
main {
padding: 20px;
}
#main {
/* background-color: #f7941eff; */
}
......@@ -86,18 +108,67 @@ body {
row-gap: 6pt;
grid-auto-flow: row;
}
a:hover {
color: var(--orange)
}
figure {
position: relative;
}
img {
width: 100%;
}
.live-pict.ref {
background: black;
padding: 20px;
color: var(--orange);
}
.live-pict.ref:hover {
background: black;
color: var(--orange);
}
.live-pict img{
/*.live-pict img{
max-width: 650px;
}
.projects-plan img{
max-width: 650px;
}*/
.live-quotes {
background-image: linear-gradient(141deg, #ff9955, white);
padding: 25px;
}
.live-quotes {
font-family:'Sprat';
font-size : 32pt;
line-height: 32pt;
background-image: linear-gradient(#ff9955, white);
padding: 20px;
.live-quotes > p {
font-family: 'Spectral';
font-weight: bold;
font-size: 2.7em;
line-height: 1.05em;
}
.projects-pict {
align-self: center;
}
.projects-pict figcaption p {
display: none;
}
.projects-pict:hover figcaption{
position: absolute;
/* bottom: 0;
*//* padding: 0 10px;
*/ background: white;
bottom: 0;
padding: 5px 10px 7px 10px;
}
.projects-pict:hover figcaption p {
display: block;
}
p {
font-family:'PxGrotesk';
}
figcaption p {
margin-top: 6px;
}
.extract-title {
font-style: italic;
}
\ No newline at end of file
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment