Commit 90b8819b authored by sarah's avatar sarah
Browse files

Merge branch 'master' of gitlab.constantvzw.org:osp/work.nord

parents 6638c07d b7914e6c
......@@ -3,20 +3,33 @@
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="project-styles.css">
<!-- <link rel="stylesheet" type="text/css" href="reset.css"> -->
<link rel="stylesheet" type="text/css" href="reset.css">
<title>Nord</title>
</head>
<body>
<main>
<section id="navigation">
<nav>
<a class="home-logo" href="/">nord</a>
<ul>
<li><a href="">live</a></li>
<li><a href="">projects</a></li>
<li><a href="">contact</a></li>
</ul>
</nav>
</section>
<section id="main" class="grid--container">
<!-- level 1 -->
<section id="project-intro">
<h1>Caberdouche</h1>
<p class="short-description">Transformation de deux cafés bar en un bar brasserie.
</p>
<dl class="intro-data">
<dl class="intro-data-flex">
<dt>Auteur</dt>
<dd>Nord</dd>
<dt>Rôle</dt>
......@@ -31,18 +44,16 @@
<dd>Equerre d'Argent 2026</dd>
</dl>
<figure>
<figure class="cover">
<img src="../layouts/print/pict/04_photos pro-images/max/Caberdouche_2_04.jpg" />
</figure>
<figure>
<img src="../layouts/print/pict/01_plans/02_caberdouche_160615_2REZ.jpg" />
</figure>
</section>
<!-- level 2 -->
<section id="project-description">
<p>
Le bar le Carberdouche est situé sur la Place la Liberté, dans un quartier résidentiel à Bruxelles jouissant d’un cadre exceptionnel. Au calme et à l’abri de la circulation, la place est cependant bien connectée, et est à proximité directe du centre de le ville et du Parc Royal, ainsi que de la « petite cein- ture ». Cadrée par une série de bâtiments néo-clas- siques, agréablement verdurisée par de majestueux arbres, la place voyaient trois bars distincts s’ou- vrir sur une zone pavée et piétonne. Ceux-ci étaient contigus et logés au rez-de-chaussée d’un im- meuble de style éclectique teinté de Renaissance. Avec les années, la façade largement vitrée et ho- mogène s’était cependant vu considérablement altérée et traduisait le partionnage des 3 entités Horeca ainsi qu’un rapport beaucoup plus confiden- tiel entre intérieur et extérieur, les vitrines ayant été réduites dans leur hauteur et chargées d’éléments de décorations et de signalisation hétérogènes. La commande concernait la fusion des établisse- ments central et de droite en un seul bar/brasserie convivial. L’enjeu parallèle étant de redonner une cohérence extérieure à l’ensemble de l’immeuble. Indépendamment d’un travail relatif à la création d’une certaine « atmoshphère » intérieure, ainsi que la volonté de rencontrer une réelle ergonomie.
Le bar le Carberdouche est situé sur la Place la Liberté, dans un quartier résidentiel à Bruxelles jouissant d’un cadre exceptionnel. Au calme et à l’abri de la circulation, la place est cependant bien connectée, et est à proximité directe du centre de le ville et du Parc Royal, ainsi que de la « petite cein- ture ». Cadrée par une série de bâtiments néo-clas- siques, agréablement verdurisée par de majestueux arbres, la place voyaient trois bars distincts s’ouvrir sur une zone pavée et piétonne. Ceux-ci étaient contigus et logés au rez-de-chaussée d’un im- meuble de style éclectique teinté de Renaissance. Avec les années, la façade largement vitrée et homogène s’était cependant vu considérablement altérée et traduisait le partionnage des 3 entités Horeca ainsi qu’un rapport beaucoup plus confidentiel entre intérieur et extérieur, les vitrines ayant été réduites dans leur hauteur et chargées d’éléments de décorations et de signalisation hétérogènes. La commande concernait la fusion des établisse- ments central et de droite en un seul bar/brasserie convivial. L’enjeu parallèle étant de redonner une cohérence extérieure à l’ensemble de l’immeuble. Indépendamment d’un travail relatif à la création d’une certaine « atmoshphère » intérieure, ainsi que la volonté de rencontrer une réelle ergonomie.
</p>
<figure>
<img src="../layouts/print/pict/04_photos pro-images/max/Caberdouche_2_06bis.jpg" />
......@@ -57,15 +68,15 @@
<figure>
<img src="../layouts/print/pict/04_photos pro-images/max/Caberdouche_10.jpg" />
</figure>
</section>
<section id="project-collaboration-data">
<!-- project-collaboration-data -->
<div>
<h2>Équipe</h2>
<dl>
<dl class="intro-data-flex">
<dt>Architecture</dt>
<dd>Central, AHA, V+<dd>
<dt>Espace public<dt>
<dd>Saison Menu<dd>
<dd>Central, AHA, V+</dd>
<dt>Espace public</dt>
<dd>Saison Menu</dd>
<dt>Client</dt>
<dd>Privé</dd>
<dt>Paysage</dt>
......@@ -77,22 +88,24 @@
<dt>Graphic design</dt>
<dd>OSP</dd>
</dl>
</div>
<div>
<h2>Sous-traitants</h2>
<dl>
<dl class="intro-data-flex">
<dt>Collaboration artistique</dt>
<dd>Denicolai & Provoost<dd>
<dt>Structure Ir<dt>
<dd>Util<dd>
<dd>Denicolai & Provoost</dd>
<dt>Structure Ir</dt>
<dd>Util</dd>
</dl>
</section>
</div>
<!-- level 3 -->
<section id="project-status-data">
<dl>
<dt>Status</dt>
<dd>Study start<dd>
<dd>Expeted delivery date<dd>
<dd>Delivery date<dd>
<h2>Statut</h2>
<dl class="intro-data-flex">
<dt>Study start</dt>
<dd></dd>
<dt>Expeted delivery date</dt>
<dt>Delivery date</dt>
<dt>Client</dt>
<dd>Privé</dd>
<dt>Procedure</dt>
......@@ -102,15 +115,21 @@
<dt>Budget</dt>
<dd>320.000 € HTVA</dd>
</dl>
</section>
<!-- level 4 -->
<section id="project-details">
</section>
<div id="project-details">
<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>
</div>
<!-- level 5 -->
<section id="project-free-lines">
</section>
</section>
</body>
</html>
......@@ -38,6 +38,13 @@
src: url('fonts/Spectral-Regular.ttf') format('woff');
}
@font-face {
font-family: 'Spectral';
font-weight: normal;
font-style: italic;
src: url('fonts/Spectral-Italic.ttf') format('woff');
}
@font-face {
font-family:'PxGrotesk';
font-weight: normal;
......@@ -61,7 +68,47 @@
}
//* Project page
/* Nav
========================================================================== */
.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;
display: inline-block;
display: inline;
margin-left: 15px;
}
#navigation a {
color:black;
}
#navigation a:hover {
color:var(--orange);
}
#navigation nav ul a {
vertical-align: -7px;
}
/* Project page
========================================================================== */
body {
......@@ -71,12 +118,23 @@
font-family:'PxGrotesk';
font-size: 1.2em;
font-weight: normal;
line-height: 1.2em;
}
main {
padding: 20px;
}
.grid--container {
display: grid;
/* outline: 1px dotted cyan; */
grid-template-columns: 1fr 1fr 1fr;
column-gap: 14pt;
row-gap: 14pt;
grid-auto-flow: row;
}
figure {
position: relative;
}
......@@ -85,11 +143,37 @@
width: 100%;
}
h1 {
.cover {
grid-column: span 2;
}
.live-pict.ref {
background: #d4ddd8;
padding: 70px;
color: black;
grid-column-end: span 1;
grid-column-start: 2;
}
.live-pict.text-ref {
background: #d4ddd8;
padding: 40px;
height: max-content;
grid-column-end: span 2;
}
.live-pict.text-ref > p {
font-family: 'Spectral';
font-weight: 500;
font-size: 1.3em;
line-height: 1.15em;
}
h1 {
font-family: 'PxGrotesk';
letter-spacing: -0.03em;
font-weight: bold;
font-size: 3em;
line-height: 1.05em;
font-size: 6em;
line-height: 1em;
}
h2 {
......@@ -97,12 +181,18 @@
font-weight: bold;
text-transform: uppercase;
font-size: 1.5em;
font-size: 1.8em;
letter-spacing: -0.03em;
margin-top:1em;
}
.short-description{
font-family: 'Spectral';
font-size: 2em;
line-height: 0.8em;
font-family: 'Spectral';
/* font-style: italic; */
font-size: 3em;
letter-spacing: -0.03em;
line-height: 1em;
margin-bottom: 1em;
}
figcaption{
......@@ -111,17 +201,51 @@
padding: 5px 10px 7px 10px;
}
dt {
font-family:'PxGrotesk-Screen';
font-weight: 500;
font-size: 1.2em;
font-weight: normal;
}
dd {
position: relative;
float: left;
font-family:'PxGrotesk';
font-size: 1.2em;
font-weight: normal;
}
dl.intro-data-flex {
display: flex;
flex-flow: row;
flex-wrap: wrap;
width: 100%; /* set the container width*/
overflow: visible;
}
dl.intro-data-flex dt {
flex: 0 0 50%;
text-overflow: ellipsis;
overflow: hidden;
font-family:'PxGrotesk-Screen';
font-size: 1.2em;
line-height: 1.3em;
font-weight: normal;
color:#ff9955;
border-bottom: 1px solid #ff9955;
}
dl.intro-data-flex dd {
margin-left: auto;
text-align: left;
text-overflow: ellipsis;
overflow: hidden;
flex: 0 0 50%;
font-family:'PxGrotesk';
font-size: 1.2em;
line-height: 1.3em;
font-weight: normal;
border-bottom: 1px solid #ff9955;
}
/* Media queries
========================================================================== */
@media only screen and (max-width: 768px) {
.grid--container {
grid-template-columns: 1fr;
}
.grid--container > * {
grid-column-start: 1;
grid-column-end: 1;
}
......@@ -19,7 +19,6 @@ time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
......
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