Permalink
Browse files

Bio ready

 * parallax + timeline effect in javascript

 * poster images at right size

 * ready to write content for bio

A lot of visual enhancement may be done, though.

Signed-off-by: Martin Richard <martius@martiusweb.net>
  • Loading branch information...
1 parent 4d8f833 commit ce11133387942b8d76cded8fbd42a43e7cacca13 @Martiusweb committed Feb 23, 2012
View
234 bio.html
@@ -5,87 +5,157 @@
id: bio
---
-<!-- h1>Le cinéma de <strong>Christopher Nolan</strong></h1 -->
<h1>Biographie, Cinématographie</h1>
-<div class="timeline">
- <div class="hr"></div>
- <ol>
- <li>
- <a href="#following">&nbsp;</a>
- <section>
- <h2>Following</h2>
- <p>Août 1998</p>
- </section>
- </li>
- <li>
- <a href="#">&nbsp;</a>
- <section>
- <h2>Août 1998</h2>
- <p>Following</p>
- </section>
- </li>
- <li>
- <a href="#">&nbsp;</a>
- <section>
- <h2>Août 1998</h2>
- <p>Following</p>
- </section>
- </li>
- <li>
- <a href="#">&nbsp;</a>
- <section>
- <h2>Août 1998</h2>
- <p>Following</p>
- </section>
- </li>
- <li>
- <a href="#">&nbsp;</a>
- <section>
- <h2>Août 1998</h2>
- <p>Following</p>
- </section>
- </li>
- <li>
- <a href="#">&nbsp;</a>
- <section>
- <h2>Août 1998</h2>
- <p>Following</p>
- </section>
- </li>
- <li>
- <a href="#">&nbsp;</a>
- <section>
- <h2>Août 1998</h2>
- <p>Following</p>
- </section>
- </li>
- <li>
- <a href="#">&nbsp;</a>
- <section>
- <h2>Août 1998</h2>
- <p>Following</p>
- </section>
- </li>
- <li>
- <a href="#">&nbsp;</a>
- <section>
- <h2>Août 1998</h2>
- <p>Following</p>
- </section>
- </li>
- <li>
- <a href="#">&nbsp;</a>
- <section>
- <h2>Août 1998</h2>
- <p>Following</p>
- </section>
- </li>
- <li>
- <a href="#">&nbsp;</a>
- <section>
- <h2>Août 1998</h2>
- <p>Following</p>
- </section>
- </li>
- </ol>
+<div id="timeline">
+<div class="hr"></div>
+<ol>
+ <li>
+ <a href="#earlylife">&nbsp;</a>
+ <section>
+ <h2>Jeunesse</h2>
+ <p>Juillet 1970</p>
+ </section>
+ </li>
+ <li>
+ <a href="#short">&nbsp;</a>
+ <section>
+ <h2>Court-métrages</h2>
+ <p>1989, 1996, 1997</p>
+ </section>
+ </li>
+ <li>
+ <a href="#following">&nbsp;</a>
+ <section>
+ <h2>Following</h2>
+ <p>Septembre 1998</p>
+ </section>
+ </li>
+ <li>
+ <a href="#memento">&nbsp;</a>
+ <section>
+ <h2>Memento</h2>
+ <p>Septembre 2000</p>
+ </section>
+ </li>
+ <li>
+ <a href="#insomnia">&nbsp;</a>
+ <section>
+ <h2>Insomnia</h2>
+ <p>Mai 2002</p>
+ </section>
+ </li>
+ <li>
+ <a href="#batmanbegins">&nbsp;</a>
+ <section>
+ <h2>Batman Begins</h2>
+ <p>Juin 2005</p>
+ </section>
+ </li>
+ <li>
+ <a href="#theprestige">&nbsp;</a>
+ <section>
+ <h2>The Prestige</h2>
+ <p>Octobre 2006</p>
+ </section>
+ </li>
+ <li>
+ <a href="#tdk">&nbsp;</a>
+ <section>
+ <h2>The Dark Knight</h2>
+ <p>Juillet 2008</p>
+ </section>
+ </li>
+ <li>
+ <a href="#inception">&nbsp;</a>
+ <section>
+ <h2>Inception</h2>
+ <p>Juillet 2010</p>
+ </section>
+ </li>
+ <li>
+ <a href="#tdkr">&nbsp;</a>
+ <section>
+ <h2>The Dark Knight Rises</h2>
+ <p>Juillet 2012</p>
+ </section>
+ </li>
+</ol>
+</div>
+<nav>
+<a class="prev" href="javascript:;">&lt;</a>
+<a class="next" href="javascript:;">&gt;</a>
+</nav>
+<div id="scene">
+<div>
+ <section>
+ <aside><img src="images/nolan_portrait1.jpg" alt="Poster de Following"></aside>
+ <article>
+ <h2>Jeunesse</h2>
+ <p>TODO</p>
+ </article>
+ </section>
+ <section>
+ <aside><img src="images/posters/doodlebug.jpg" alt="Poster de Following"></aside>
+ <article>
+ <h2>Court-métrages</h2>
+ <p>TODO</p>
+ </article>
+ </section>
+ <section>
+ <aside><img src="images/posters/following.jpg" alt="Poster de Following"></aside>
+ <article>
+ <h2>Following</h2>
+ <p>TODO</p>
+ </article>
+ </section>
+ <section>
+ <aside><img src="images/posters/memento.jpg" alt="Poster de Memento"></aside>
+ <article>
+ <h2>Memento</h2>
+ <p>TODO</p>
+ </article>
+ </section>
+ <section>
+ <aside><img src="images/posters/insomnia.jpg" alt="Poster d'Insomnia"></aside>
+ <article>
+ <h2>Insomnia</h2>
+ <p>TODO</p>
+ </article>
+ </section>
+ <section>
+ <aside><img src="images/posters/batmanbegins.jpg" alt="Poster de Batman Begins"></aside>
+ <article>
+ <h2>Batman Begins</h2>
+ <p>TODO</p>
+ </article>
+ </section>
+ <section>
+ <aside><img src="images/posters/theprestige.jpg" alt="Poster de The Prestige"></aside>
+ <article>
+ <h2>The Prestige</h2>
+ <p>TODO</p>
+ </article>
+ </section>
+ <section>
+ <aside><img src="images/posters/tdk.jpg" alt="Poster de The Dark Knight"></aside>
+ <article>
+ <h2>The Dark Knight</h2>
+ <p>TODO</p>
+ </article>
+ </section>
+ <section>
+ <aside><img src="images/posters/inception.jpg" alt="Poster d'Inception"></aside>
+ <article>
+ <h2>Inception</h2>
+ <p>TODO</p>
+ </article>
+ </section>
+ <section>
+ <aside><img src="images/posters/tdkr.jpg" alt="Poster de The Dark Knight Rises"></aside>
+ <article>
+ <h2>The Dark Knight Rises</h2>
+ <p>TODO</p>
+ </article>
+ </section>
+</div>
</div>
View
@@ -209,6 +209,11 @@ table { border-collapse: collapse; border-spacing: 0; }
}
@font-face {
+ font-family: "Gotham Thin";
+ src: url('../fonts/Gotham/Gotham-Thin.ttf');
+}
+
+@font-face {
font-family: "Inception";
src: url('../fonts/inception-webfont.eot');
src: url('../fonts/inception-webfont.eot?#iefix') format('embedded-opentype'),
@@ -230,7 +235,7 @@ body {
header, footer {
position: fixed;
width: 100%;
- overflow: none;
+ overflow: hidden;
background: -moz-linear-gradient(top, #3D4850 3%, #313d45 4%, #232B30 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(3%,#3D4850), color-stop(4%,#313d45), color-stop(100%,#232B30));
box-shadow: 0 0 10px #333333;
@@ -408,29 +413,28 @@ body.home {
}
/** Bio */
-.timeline {
- width: 100%;
+#timeline {
padding-top: 3px;
+ width: 100%;
overflow: hidden;
}
-.timeline .hr {
+#timeline .hr {
margin: 0;
border: 3px #cccccc solid;
}
-.timeline > ol {
+#timeline > ol {
margin: 0;
padding: 0 0 0 40px;
list-style: none;
position: relative;
bottom: 11px;
display: table;
- width: 3300px;
}
-.timeline > ol > li {
- width: 300px;
+#timeline > ol > li {
+/* width: 300px; /* This value is overriden by the Js property */
display: table-cell;
}
-.timeline > ol > li > a {
+#timeline > ol > li > a {
display: block;
width: 10px;
height: 10px;
@@ -441,18 +445,81 @@ body.home {
border: 3px white solid;
-moz-transition: background-color 500ms ease;
}
-.timeline > ol > li > a:hover {
+#timeline > ol > li > a:hover {
background-color: rgba(0, 0, 255, 1);
}
-.timeline h2 {
+#timeline h2 {
font-family: "Gotham Black";
letter-spacing: normal;
margin: 0;
}
-.timeline p {
+#timeline p {
margin: 0;
}
+#bio nav a.prev, #bio nav a.next {
+ text-decoration: none;
+ color: red;
+ background-color: rgba(100, 100, 100, 0.2);
+ font-size: 80px;
+ font-family: "Gotham Thin";
+ display: inline-block;
+ text-align: center;
+ line-height: 90px;
+ width: 80px;
+ height: 80px;
+ border-radius: 50px;
+ position: fixed;
+ margin: 40px 20px 0 20px;
+ top: 50%;
+ z-index: 100;
+ -moz-transition: background-color 200ms ease-in;
+ -webkit-transition: background-color 200ms ease-in;
+ transition: background-color 200ms ease-in;
+}
+#bio nav a.next {
+ right: 0;
+}
+#bio nav a.prev:hover, #bio nav a.next:hover {
+ background-color: rgba(100, 100, 100, 0.5);
+}
+
+#scene {
+ width: 100%;
+ box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ -wekit-box-sizing: border-box;
+ overflow: hidden;
+ padding: 6% 150px;
+}
+
+#scene > div {
+ width: 100000px;
+}
+
+#scene section {
+ display: table;
+ float: left;
+}
+#scene section aside, #scene section article {
+ display: table-cell;
+}
+#scene section aside {
+ vertical-align: middle;
+ width: 40%;
+ text-align: right;
+ padding: 0 15px;
+}
+
+/** Parallax effect styles (dynamically applied) */
+.parallax_moving {
+ position: relative;
+ right: 0px;
+ -moz-transition-duration: 1500ms;
+ -moz-transition-property: right;
+ -moz-transition-timing-function: ease;
+}
+
/* =============================================================================
Non-semantic helper classes
Please define your styles before this section.
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Oops, something went wrong.

0 comments on commit ce11133

Please sign in to comment.