Skip to content

Commit 625efa9

Browse files
bert-githubbert-github
committed
Challenge 5: an example of the kinds of layout found in magazines. This example seems to need a combination of Grid Templates, Exclusions and GCPM for styling the running footer.
1 parent ba2ee71 commit 625efa9

5 files changed

Lines changed: 127 additions & 0 deletions

File tree

‎css3-layout/challenge-05/img1.jpg‎

4.88 KB
Loading

‎css3-layout/challenge-05/img2.jpg‎

3.71 KB
Loading

‎css3-layout/challenge-05/img3.jpg‎

3.13 KB
Loading

‎css3-layout/challenge-05/page.jpg‎

43.5 KB
Loading

‎css3-layout/challenge-05/source.html‎

Lines changed: 127 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,127 @@
1+
<!doctype html public '-//W3C//DTD HTML 4.01//EN'>
2+
<html lang=fr>
3+
<meta content="text/html; charset=utf-8" http-equiv=content-type>
4+
<title>Challenge 5</title>
5+
6+
<script type="text/javascript" src="../jquery.min.js"></script>
7+
<script type="text/javascript" src="../jquery.tpl_layout1.1.6-bb.js"></script>
8+
<script type="text/javascript">
9+
$(function() {$.setTemplateLayout();});
10+
</script>
11+
12+
<style type="text/css">
13+
body {grid: "a a a a"
14+
"b c c d" }
15+
16+
h1, h2.subtitle {flow: a}
17+
h2:nth-of-type(2), h2:nth-of-type(2) ~ p {flow: b}
18+
h2:nth-of-type(3), h2:nth-of-type(3) ~ p {flow: c}
19+
h2:nth-of-type(4), h2:nth-of-type(4) ~ p {flow: d}
20+
21+
::slot(b), ::slot(c), ::slot(d) {border-left: thin solid; padding: 0 1em}
22+
23+
body {font: medium serif; background: white; color: black}
24+
h1 {font: large/1 sans-serif; text-transform: uppercase;
25+
color: gray; float: left; margin: 0 -0.2em 0 0}
26+
h2.subtitle {font: bold 400% American Typewriter, serif;
27+
text-transform: lowercase;
28+
color: gray; margin: 0 0 2em 0; border-bottom: solid 0.2em}
29+
h2 {font: x-large/1 sans-serif; text-transform: uppercase;
30+
margin: 0 0 0.5em 0}
31+
img {width: 100%}
32+
p {text-align: justify}
33+
.signature {font: bold sans-serif; font-variant: small-caps}
34+
.info {font: medium sans-serif; color: hsl(220,70%,50%);
35+
text-align: left}
36+
</style>
37+
38+
<h1>Actualité</h1>
39+
<h2 class=subtitle>Portraits</h2>
40+
41+
<h2>Nicolas Bourriaud, l'histoire revisitée</h2>
42+
43+
<p><img src="img1.jpg"
44+
alt="[photo: portrait de Nicolas Bourriaud]">
45+
46+
<p><em>Il ne faut pas se contenter de préserver le patrimoine, il
47+
faut le faire vivre »,</em> déclare Nicolas Bourriaud (ill. :
48+
2008. ©M. Olsson), nouveau directeur de l'École nationale
49+
supérieure des Beaux-Arts (Ensb—a). L'ancien co—directeur du Palais
50+
de Tokyo a Paris et commissaire d'expositions à la Tate Modern de
51+
Londres lancera dès 2013 un programme d'expositions qui
52+
s'articulera entre l'art du passé et celui du présent. <em>« Je
53+
perçois dans l'art contemporain un intérêt pour l'archive,
54+
l'histoire et la traçabilité du présent »,</em> énonce l'auteur
55+
de <em>Postproduction,</em> qui entend réhabiliter les bâtiments de
56+
l'école et presenter au public les oeuvres anciennes qui sont
57+
conservées dans l'annexe de Saint-Ouen. Parmi ses projets :
58+
rebaptiser <em>« palais des Beaux-Arts »</em> les salles
59+
d'exposition du quai Malaquais, les doter d'une
60+
librairie, <em>« développer la convivialité »</em> en ouvrant un
61+
café a l'horizon 2013, dans un pavillon dessiné par un artiste ou
62+
un designer, et réhabiliter l'ancien Bal des Quat'z'Arts. Enfin,
63+
Nicolas Bourriaud est chargé de mettre en place un doctorat en arts
64+
plastiques, dans le cadre du projet Science Art Création Recherche
65+
(SACRe). <span class=signature >M. B.</span>
66+
67+
<h2>Hervé de Vaublanc et Jérôme Alexandre, la parole de l'art</h2>
68+
69+
<p><img src="img2.jpg"
70+
alt="[photo: Hervé de Vaublanc et Jérôme Alexandre]">
71+
72+
<p>Ancien secrétaire général du College des Bernardins, Herve de
73+
Vaublanc (ill. : à droite. ©Bernard Saint-Genès) est aujourd'hui
74+
directeur adjoint et directeur de la programmation du lieu de
75+
création, de recherche et de formation. <em>« Tous nos projets
76+
artistiques sont nourris de propositions d'arts vivants et de
77+
musiques actuelles »,</em> souligne—t-il. Actuellement, il met en
78+
oeuvre une programmation d'arts plastiques initiée par Jean de
79+
Loisy, <em>« Questions d'artistes »,</em> qui comprendra jusqu'en
80+
juin des expositions de Céleste Boursier-Mougenot, Michel Blazy,
81+
lan Kopp et Tania Mouraud. <em>« Notre force, c'est l'interaction
82+
avec le département de recherche des Bernardins “ La Parole de
83+
l'art ” »,</em> dit-il. Fondé début 2011 par le docteur en
84+
théologie Jérôme Alexandre (ill. : à gauche) en binome avec le
85+
professeur d'esthétique et d'histoire de l'art Bernard Marcadé, ce
86+
département est <em>« le seul lieu de recherche à Paris qui ne
87+
prend pas la question artistique par le biais esthétique ou de
88+
l'histoire de l'art, mais par la question du témoignage vivant des
89+
artistes. Les oeuvres d'art parlent. Ce n'est pas la parole des
90+
concepts, de l'objectivation de la science ou de l'intelligence
91+
détachée, c'est la parole du sensible ».</em> Et l'auteur
92+
de <em>L'Art contemporain, un vis-à-vis essentiel pour la foi,</em>
93+
d'ajouter : <em>« Elle a un lien évident avec une autre forme de
94+
parole agissante, la Révélation
95+
judéo-chrétienne ».</em> <span class=signature >M. B.</span>
96+
97+
<p class=info><span class=name>Collège des Bernardins,</span>
98+
18&ndash;24, rue de Poissy. 75005 Paris 01 53 10 74
99+
44 <a href="http://www.collegedesbernardins.fr/"
100+
>www.collegedesbernardins.fr</a> Exposition « Céleste
101+
Boursier-Mougenot » du 10 février au 14 avril.
102+
103+
<h2>Élisabeth Delorme, l'énergie d'un mécène</h2>
104+
105+
<p><img src="img3.jpg"
106+
alt="[photo: portrait d'Élisabeth Delorme]">
107+
108+
<p>Le ministre de la Culture Frédéric Mitterrand vient de lui
109+
remettre les insignes de Chevalier des arts et lettres. Figure du
110+
mécénat culturel, Élisabeth Delorme accompagne les mutations de la
111+
Fondation d'entreprise EDF depuis sa creation en 2006. <em>« Le 2
112+
décernbre dernier, nous avons renouvelé le mandat de la Fondation
113+
jusqu'à décembre 2015 et nous l'avons élargi au thème de la
114+
science, de l'insertion et de l'emloi, sans oublier l'aide
115+
humanitaire internationale »,</em> annonce cette ancienne
116+
conseillère régionale de Poitou-Charentes. Bien évidemment,
117+
l'action culturelle de la Fondation se poursuit, à travers les
118+
expositions de l'Espace EDF à Paris, au Bazacle à Toulouse, au
119+
musée Electropolis à Mulhouse et avec le parrainage d'événements
120+
tels que « Marseille 2013, Capitale européenne de la culture ».</p>
121+
Attentive aussi bien at la création contemporaine qu'a la
122+
valorisation du patrimoine, celle qui fit inscrire des 1993 la
123+
citadelle de Brouage au réseau des grands sites de France est
124+
persuadée que <em>« l'accès pour tous à l'art et a la culture est
125+
un élément fondateur du lien social ».</em> Son nouveau mandat va
126+
lui donner toute latitude pour mener à bien des projets en ce
127+
sens. <span class=signature >M. B.</span>

0 commit comments

Comments
 (0)