-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathprojet-ferme.html
102 lines (69 loc) · 3.54 KB
/
projet-ferme.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
<html>
<head>
<title>Marion Villette - Animal Farm</title>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1"/>
<link rel="stylesheet" type="text/css" href="style/reset.css">
<link rel="stylesheet" type="text/css" href="style/style.css">
<link rel="shortcut icon" type="image/png" href="imports/favicon.png">
<script type="text/javascript" src="js/jquery.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
</head>
<body>
<header>
<div id="categories">
<figure class="list" data-filter="motion" style="opacity: 0; cursor: default;">
<img src="imports/motion2.png" id="gr">
<figcaption>motion</figcaption>
</figure>
<figure class="list" data-filter="print" style="cursor: default;">
<img src="imports/print.png">
<figcaption>print</figcaption>
</figure>
<figure class="list" data-filter="other" style="opacity: 0; cursor: default;">
<img src="imports/autre.png">
<figcaption>autre</figcaption>
</figure>
</div>
<div id="logodiv">
<a href="index.html"><img src="imports/logo.svg" id="logo"></a>
</div>
<div id="apropos">
<div id="aproposin">
<a href="about.html"><img src="imports/girl.jpg"></a>
<a href="about.html" class="lien">à propos</a>
</div>
</div>
</header>
<section id="section2-projet">
<p id="seiche-projet"></p>
<div id="grande-description">
<div id="description-projet"><h2 id="titre">Animal Farm</h2><h3 id="sous-titre">DNMADE 1</h3><p id="blabla">Ce leporello est une revisite illustrée du célèbre roman satirique La ferme des animaux de George Orwell. L'histoire est découpée en 10 titres et 10 scènes, froides et impitoyablement cycliques.</p></div>
</div>
<!-- <p id="next">Projet suivant</p> -->
</section>
<section id="immense-projet">
<img src="imports/frise.svg" style="width: 100vw; position: relative; right: 15%;">
<figure class="figure grande-hb">
<figcaption>Première étape: abstraction de l'histoire en 10 scènes. Chacune d'entre elles est un moment clé pour comprendre les enjeux de ce roman.
</figcaption>
</figure>
<figure class="figure grande-hb">
<iframe title="vimeo-player" class="img-haut-l video-ferme" src="https://player.vimeo.com/video/688834793?h=92b130a14d" frameborder="0" allowfullscreen></iframe>
<figcaption >Ce roman est plein de scènes de joie et de souffrance, de tristesse et de peur, de révolution et de soumission. Mais malgré tout cela, tous les efforts des personnages, la situation finale est en tous points identique au début du roman. L'édition choisie est donc un loporello, qui retransmet l'idée d'un cycle dont on ne peut sortir.</figcaption>
</figure>
<figure class="figure" id="grande-docs">
<figcaption>La couverture est simple, seulement à base de typographie (<a class="lien" href="https://velvetyne.fr/fonts/commune-nuit-debout/" target="_blank">Commune Nuit Debout,</a> de Velvetyne). Solide, géométrique, haute et étroite, elle présage le thème froid et dur de l'histoire.</figcaption>
<img src="imports/mockup-ferme.jpg" class="img-d">
</figure>
<figure class="figure">
<img src="imports/mockup-ferme2.jpg" class="img-d">
</figure>
<div id="boutons">
<button class="btn-proj"><a href="projet-leana.html" class="btn-proj">← Projet précédent</a></button>
<button class="btn-proj"><a href="projet-photo.html" class="btn-proj">Projet suivant →</a></button>
</div>
</section>
</body>
</html>