index.html

<!doctype html>
<html lang="en">
<head>
  <title>Xtrem Reading</title>

  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <meta name="author" content="Cédric Tamavond & Yoan Thirion. ">
  <meta name="description" content="A technique that allows you to read 2 books in 1 hour in a collaborative way.">

  <meta property="og:url"                content="https://www.xtrem-reading.com/" />
  <meta property="og:type"               content="Website" />
  <meta property="og:title"              content="Xtrem Reading" />
  <meta property="og:image"              content="https://www.xtrem-reading.com/images/xtrem-logo-black.png" />
  <meta property="og:description"        content="A technique that allows you to read 2 books in 1 hour in a collaborative way." />

  <link href="https://fonts.googleapis.com/css?family=Nunito+Sans:300,400,700,900" rel="stylesheet">
  <link rel='icon' href='images/favicon.ico' type='image/x-icon'/ >
  <link rel="stylesheet" type="text/css" href="css/buddy.min.css">
  <link rel="stylesheet" type="text/css" href="css/konami.css">
  <link rel="stylesheet" type="text/css" href="css/custom.css">
  <script type="text/javascript" src="js/buddy.min.js"></script>
  <script type="text/javascript" src="js/konami.js"></script>
  <script async src="https://www.googletagmanager.com/gtag/js?id=UA-139140754-1"></script>
  <script>
		window.dataLayer = window.dataLayer || [];
		function gtag(){dataLayer.push(arguments);}
		gtag('js', new Date());
		gtag('config', 'UA-139140754-1');
	</script>
</head>
<body>
  <div id="pageNavOverlay"></div>


  <!-- .bottom-bar-mobile is used only when you have 5 items MAX, don't use this navigation if you have more than 5 items or less than 3 items,
  sub navigations are hidden if you use .bottom-bar-mobile, the goal is to have a direct approach on the main info -->
  <header class="page-header" role="banner">
    <div class="page-wrapper page-wrapper--full-width">
      <a href="#" class="page-header__logo-color"><img src="images/xtrem-reading-logo.png"  alt=" " /></a>
      <div class="page-nav" id="navOne">
        <nav role="navigation">
          <ul class="nav-primary">
            <li><a href="#home" class="nav-primary--selected">Home</a></li>
            <li><a href="#why">Why</a></li>
            <li><a href="#howto">How to</a></li>
            <li><a href="#facilitation">Facilitation</a></li>
            <li><a href="#resources">Resources</a></li>
            <li><a href="mailto:xtremreading@gmail.com">Contact</a></li>
          </ul>
        </nav>
      </div>
    </div>
  </header>
  <div class="page-header--mobile">
    <a href="#" class="page-header__logo-color"><img src="images/xtrem-reading-logo.png"  alt=" " /></a>
    <a href="#" class="page-header__logo-white"><img src="images/xtrem-reading-logo.png"  alt=" " /></a>
    <button class="trigger-nav-container" data-trigger-nav="navOne">
      <span class="trigger-nav-container__title">Menu</span>
      <span class="trigger-nav-container__icon-burger"></span>
    </button>
  </div>


<main>
	<div>
		<img id="konamiImage" class="konami" src="images/konami.gif"/>
		<script>
		function launchEgg() {
			return new Promise(function (resolve, reject) {
					var konamiImage = document.getElementById("konamiImage");
					konamiImage.style.display = 'inherit';
					var currentPosition = 0;

					var id = setInterval(() => {
						if (currentPosition == document.body.offsetWidth) {
							clearInterval(id);
							konamiImage.style.display = 'none';
							resolve();
						} else {
							currentPosition++;
							konamiImage.style.left = currentPosition + 'px';
						}
				}, 10);
			});
		}

		var konami = new Konami(launchEgg);
		konami.load();

		</script>
	</div>
	<section class="page-fullscreen text-center" id="home">
		<div class="page-wrapper">
			<h1>Xtrem Reading <span>Read 2 books in 1 hour</span></h1>
			<p>A technique that allows you to read 2 books <br>in 1 hour in a collaborative way.</p>
			<div class="overlay">
				<div>
					<h1>Xtrem Reading <span>Read 2 books in 1 hour</span></h1>
					<p>A technique that allows you to read 2 books <br>in 1 hour in a collaborative way.</p>
				</div>
			</div>
		</div>
	</section>

	<section class="section-1" id="why">
		<div class="page-wrapper">
			<h2 class="text-center">Why you should use it?</h2>
			<div class="grid-flex grid-use">
				<div class="column">
					<div class="box-1">
						<p><img src="images/xtrem-reading-icon-2.png"></p>
						<h3>Boost your <br>collective intelligence</h3>
						<p>
							Collective intelligence strongly contributes
							to the shift of knowledge and power
							from the individual to the collective.
							Reading collectively helps you being
							motivated to read more books.
						</p>
					</div>
				</div>
				<div class="column">
					<div class="box-1">
						<p><img src="images/xtrem-reading-icon-1.png"></p>
						<h3>Increase your <br>book retention</h3>
						<p>
							Because you read in a way you
							will present what you have taken
							from a book, you will increase
							your retention from the book.
						</p>
					</div>
				</div>
				<div class="column">
					<div class="box-1">
						<p><img src="images/xtrem-reading-icon-3.png"></p>
						<h3>Do not read for <br>nothing anymore</h3>
						<p>
							Filter your entire library in a
							few sessions and prioritize your
							next readings.
						</p>
					</div>
				</div>
			</div>
		</div>
	</section>

	<section class="section-1" id="howto">
		<div class="page-wrapper">
			<h2 class="text-center">How to?</h2>
			<div class="grid-flex row-step v-align-middle">
				<div class="column w-20">
					<div class="step">1</div>
				</div>
				<div class="column w-30">
					<img src="images/xtrem-reading-step-1.png" alt="">
				</div>
				<div class="column w-40">
					<p>Each participant brings a book</p>
					<p>Bring the book that you really want to read in a near future.</p>
				</div>
			</div>

			<div class="grid-flex row-step v-align-middle">
				<div class="column w-20">
					<div class="step">2</div>
				</div>
				<div class="column w-30">
					<img src="images/xtrem-reading-step-2.png" alt="">
				</div>
				<div class="column w-40">
					<p>Share your choices</p>
					<ul class="list-1">
						<li>Pitch your book</li>
						<li>Explain why you really want to read it</li>
						<li>What are your expectations from this book</li>
					</ul>
				</div>
			</div>

			<div class="grid-flex row-step v-align-middle">
				<div class="column w-20">
					<div class="step">3</div>
				</div>
				<div class="column w-30">
					<img src="images/xtrem-reading-step-3.png" alt="">
				</div>
				<div class="column w-40">
					<p>Define groups of 2 or 3</p>
					<p>Based on your interest for each other's groups : <br>	create groups of 2 or 3.</p>
				</div>
			</div>

			<div class="grid-flex row-step v-align-middle">
				<div class="column w-20">
					<div class="step">4</div>
				</div>
				<div class="column w-30">
					<img src="images/xtrem-reading-step-4.png" alt="">
				</div>
				<div class="column w-40">
					<p>Each participant reads 2 books</p>
					<ul class="list-1">
						<li>Set the reading time (15' to 25').</li>
						<li>Read it and take notes to be able to explain what you ave learned.</li>
						<li>Read your first book</li>
						<li>Exchange your book with another participant inside your group</li>
						<li>Read the second book</li>
					</ul>
				</div>
			</div>

			<div class="grid-flex row-step v-align-middle">
				<div class="column w-20">
					<div class="step">5</div>
				</div>
				<div class="column w-30">
					<img src="images/xtrem-reading-step-5.png" alt="">
				</div>
				<div class="column w-40">
					<p>Cross sharing</p>
					<ul class="list-1">
						<li>Spend 5' per book</li>
						<li>Each reader of the current book explains what they have discovered to the rest of the group.</li>
					</ul>
				</div>
			</div>

			<div class="grid-flex row-step v-align-middle">
				<div class="column w-20">
					<div class="step">6</div>
				</div>
				<div class="column w-30">
					<img src="images/xtrem-reading-step-6.png" alt="">
				</div>
				<div class="column w-40">
					<p>Rate the book</p>
					<p>Each xtrem reader evaluates the book he read.</p>
					<ul class="list-1">
						<li>Was it easy to read?</li>
						<li>Would I recommend it?</li>
					</ul>
				</div>
			</div>

		</div>
	</section>

	<section class="section-1" id="facilitation">
		<div class="page-wrapper">
			<h2 class="text-center">Facilitation tips</h2>
			<div class="grid-flex grid-use">
				<div class="column">
					<div class="box-1">
						<p><img src="images/facilitation-1.png"></p>
						<h3>Pace</h3>
						<p>
							Pace is really important during a session
							but be careful, don't oppress people
							by repeating the time elapsed or left.
							<br/>Display a <a href="http://www.timer-tab.com/" target="_blank">timer</a> instead on a big screen for example.
						</p>
					</div>
				</div>
				<div class="column">
					<div class="box-1">
						<p><img src="images/facilitation-2.png"></p>
						<h3>Board</h3>
						<p>
							After each session you can feed
							a physical or <a href="https://trello.com/" target="_blank">virtual board</a> to categorize books you have read.
							You can use "recommendation" for the columns names and "easy to read" as labels like in this <a href="images/xtrem-trello.png" target="_blank">example</a>.
						</p>
					</div>
				</div>
				<div class="column">
					<div class="box-1">
						<p><img src="images/facilitation-3.png"></p>
						<h3>Music</h3>
						<p>
							Try to listen to music during a session.
							It can help people to focus and release the pressure of the exercice.
						</p>
					</div>
				</div>
			</div>
		</div>
	</section>

	<section class="section-1" id="resources">
		<div class="page-wrapper">
			<h2 class="text-center">Resources</h2>
			<div class="grid-flex grid-use">
					<div class="column text-center">
						<a href="rsc/xtrem-reading-infography.png" target="_blank">
							<img src="images/xtrem-reading-print-1.png" style="box-shadow: 0 0 11px 0px rgba(0, 0, 0, 0.2);">
							<p style="margin-top: 10px;color: #000000;font-weight: 700;">Download the infography</p>
						</a>
					</div>
					<div class="column text-center">
						<a href="rsc/xtrem-reading-facilitator-guide.pptx" target="_blank">
							<img src="images/preview-facilitator-guide.png" style="box-shadow: 0 0 11px 0px rgba(0, 0, 0, 0.2);">
							<p style="margin-top: 10px;color: #000000;font-weight: 700;">Facilitator guide</p>
						</a>
					</div>					
					<div class="column text-center">
						<a href="rsc/xtrem-reading-book-card.png" target="_blank">
							<img src="images/xtrem-reading-print-2.png" style="box-shadow: 0 0 11px 0px rgba(0, 0, 0, 0.2);">
							<p style="margin-top: 10px;color: #000000;font-weight: 700;">Print recommendation card</p>
						</a>
					</div>
					<div class="column text-center">
						<a href="rsc/xtrem-reading-bookmark.pdf" target="_blank">
							<img src="images/xtrem-reading-print-3.png" style="box-shadow: 0 0 11px 0px rgba(0, 0, 0, 0.2);">
							<p style="margin-top: 10px;color: #000000;font-weight: 700;">Print bookmarks</p>
						</a>
					</div>
					<div class="column text-center">
						<a href="http://bit.ly/2QAroms" target="_blank">
							<img src="images/xtrem-reading-print-4.png" style="box-shadow: 0 0 11px 0px rgba(0, 0, 0, 0.2);">
							<p style="margin-top: 10px;color: #000000;font-weight: 700;">Boost your collective intelligence</p>
						</a>
					</div>
					<div class="column text-center">
						<a href="https://speakerdeck.com/thirion/xtrem-reading-lisez-2-livres-en-1-heure-et-cultiver-votre-intelligence-collective" target="_blank">
							<img src="images/preview-slide-deck.png" style="box-shadow: 0 0 11px 0px rgba(0, 0, 0, 0.2);">
							<p style="margin-top: 10px;color: #000000;font-weight: 700;">Agile France slides</p>
						</a>
					</div>
					<div class="column text-center">
						<a href="rsc/xtrem-tech-watch-infography.png" target="_blank">
							<img src="images/xtrem-reading-print-5.png" style="box-shadow: 0 0 11px 0px rgba(0, 0, 0, 0.2);">
							<p style="margin-top: 10px;color: #000000;font-weight: 700;">Xtrem tech watch</p>
						</a>
					</div>
				</div>
			</div>
		</div>
	</section>

  <section class="section-1" id="resources">
    <div class="page-wrapper">
      <h2 class="text-center">Book a session now!</h2>
      <p class="text-center"><a href="https://share.hsforms.com/1yZKri1ZKTaeVeqKnOx4pMA32gl4" class="btn bg-main-color">Book a session now!<a></p>
    </div>
  </section>
</main>

<footer>
  <img src="images/xtrem-reading-firl-surf.png" alt="" class="girl-surf">
  <img src="images/xtrem-reading-shark.png" alt="" class="shark">

  <div class="content">
    <p><a href="https://creativecommons.org/licenses/by-sa/4.0/" target="_blank"><img src="images/ico-footer.png" alt=""></a></p>

    © 2019 - <a href="https://www.linkedin.com/in/cedric-tamavond-b30ab917/" target="_blank">Cédric Tamavond</a> &
    <a href="https://www.linkedin.com/in/yoanthirion/" target="_blank">Yoan Thirion</a>.

    <p class="text-center mt-2"><a href="https://www.agilepartner.net/" target="_blank"><img src="images/ap-logo.png" alt="" width="175"/></a></p>
  </div>
</footer>