Readme Instructions

Mapping the Pulse Genome - an infographic

Intro

This web micro-site is a tool that can be used to help raise awareness and to celebrate the role of beans, chickpeas, lentils and other pulses in feeding the world. The infographic has been designed to be responsive, and will look good on all screen sizes.

This infographic was written in english, and no translations are yet available.

Basic Installation

For standalone installations, simply copy the files and folders below to your webserver.


index.html
js/
css/
img/
fonts/

Advanced Install

For advanced integration into an existing website, or CMS (Wordpress, Joomla), the assets should be placed into a root folder on the server.


/genome/js/
/genome/css/
/genome/img/
/genome/fonts/

The following dependencies should be placed in the head of your document, or where immediately before the formatting code:


<link rel="stylesheet" href="/genome/css/genome.style.css">
<script src="/genome/js/jquery.scrollme.min.js"></script>
<script src="/genome/js/main.js"></script>

The following code can then be placed within your website structure.


<div class="genome-document">
	<div class="box-shadow">
		<section id="intro">
			<img class="feature-plant animate-right" src="/genome/img/intro/feature-plant.png" alt="DNA" />
			<img class="mobile-plant" src="/genome/img/intro/dna.png" alt="DNA" />
			<div class="genome-row">
				<img class="intro-logo" src="/genome/img/intro/pulses-logo.png" alt="Pulses" />

				<div class="header-text">
					<h1>How will  Mapping <br /><span class="uppercase">Pulse Genomes</span></h1>
					<h2>Help Feed a Global Need?</h2>
				</div>
			</div>
			<div class="genome-row dotted-border">
				<p>
				Pulses are the edible seeds of plants in the legume family, such as peas, beans, chickpeas and lentils. Scientists are sequencing the genomes of several pulse crops to help meet the changing needs and challenges of feeding the world.
				</p>
			</div>
			<div class="genome-row learn-more">
			<img class="lentil scrollme animateme" src="/genome/img/intro/lentil-pile.jpg" alt="Lentil"
				data-when="enter"
		        data-from="0.8"
		        data-to="0.1"
		        data-opacity="1"
		        data-translatex="100" />
				<p><strong>Click below to learn</strong> more about this process, and the importance of pulses as a global food. </p>
			</div>
		</section>
		<div class="divider green arrow"></div>
		<section id="section1" class="collapse">
			<div class="header">
				<a class="expander" href="#mendel">
					<h2>
						How did pulses&nbsp;shape&nbsp;the 
					</h2>
					<h1>HISTORY <span>of</span> GENETICS?</h1>
				</a>
			</div>
			<div class="divider brown arrow"></div>
			<div class="genome-row mendel">
				<img class="gregor-img" src="/genome/img/section1/mendel.png" alt="Gregor Mendel" />
				<p class="intro-text"><strong>Gregor Mendel</strong> was an Augustinian friar, and later Abbott, of the monastery in Brno (modern-day Czech Republic), which was a centre of learning and science.</p>
				<div class="dotted-border">
					<p>His work with pea plants is the <strong>foundation</strong> of our modern <strong>understanding of genetics</strong>.</p>
				</div>
				<h3>He chose to work with pea plants because:</h3>
				<ul class="numbered">
					<li class="animateme scrollme" 
						data-when="enter"
				        data-from="0.3"
				        data-to="0.0"
				        data-opacity="0"
				        data-scale="1.5"
				        data-translatey="100"
				        data-translatex="-100">
				        They had <strong>clear character differences</strong>, for example seed shape was either round or wrinkled;</li>
					<li class="animateme scrollme" 
						data-when="enter"
				        data-from="0.3"
				        data-to="0.0"
				        data-opacity="0"
				        data-scale="1.5"
				        data-translatey="100"
				        data-translatex="-100">
				        The <strong>structure</strong> of the flowers made it easy to make crosses;</li>
					<li class="animateme scrollme"
						data-when="enter"
				        data-from="0.3"
				        data-to="0.0"
				        data-opacity="0"
				        data-scale="1.5"
				        data-translatey="100"
				        data-translatex="-100">
				        The <strong>offspring of his experiments</strong> were fertile and could be used to continue the experiment.</li>
				</ul>
			</div>


			<div class="divider pale-green"></div>
			<div class="genome-row">
				<h4>Mendel showed that the male and the female contributed equally to inheritance and explained how particular characteristics that differed between parents (a character pair) were inherited.</h4>
			</div>
			<img class="inheritance-chart scrollme animateme" src="/genome/img/section1/pea-chart.jpg" alt="Pea Inheritance Chart" 
					data-when="enter"
			        data-from="0.75"
			        data-to="0.0"
			        data-opacity="0"
			        data-translatey="100"  />
			<div class="genome-row pale-green-bg">
				<ul class="two-column arrow">
					<li>For a given character pair, the offspring of a cross resembled one parent and not the other. The form that appears he described as ‘dominant’, and the other ‘recessive’.</li>
					<li>He explained this by suggesting that a factor is inherited from each parent and if the factors are different then the dominant one is seen, but they both contribute equally to the next generation.</li>
				</ul>
			</div>
			<div class="genome-row last-section">
				<h2>In the 150 years since Mendel's&nbsp;discoveries </h2>
				<img class="seed-flower scrollme animateme" src="/genome/img/section1/seed-flower.jpg" 
					data-when="enter"
			        data-from="0.75"
			        data-to="0.0"
			        data-opacity="0"
			        data-translatey="100" 
			        data-rotatez="20"
		        />
				<p>People around the world have used the science of genetics to innovate and improve pulses - creating an incredibly diverse variety to <strong>meet the needs of a growing population, growing conditions</strong> and people’s <strong>growing taste for delicious pulses</strong>!</p>
				<img class="scrollme animateme" src="/genome/img/section1/spoons.jpg" 
					data-when="enter"
			        data-from="0.5"
			        data-to="0.0"
			        data-opacity="0"
			        data-translatey="100" 
			        data-rotatez="-20" />
			</div>
		</section>


		<section id="section2" class="collapse">
			<div class="header">
				<a class="expander" href="#people">
					<h2>
						How does knowing more&nbsp;about&nbsp;pulses
					</h2>
					<h1>BENEFIT PEOPLE?</h1>
				</a>
			</div>
			<div class="divider green arrow"></div>


			<div class="genome-row benefits">
				<img class="single-lentil" src="/genome/img/section2/single-lentil.png" alt="Single Lentil" />

				<img class="girl-img" src="/genome/img/section2/girl-lentils.png" alt="People Love Pulses" />



				<p class="intro-text"><strong>With such a large variety</strong> of pulses to appeal to any taste, there is almost <strong>no limit</strong> to the number of ways they are eaten today.</p>

<p>Pulses are a high fibre, low fat, source of protein that contain important vitamins like folate and vitamin C and minerals like iron and potassium.</p>
			</div>

			<ul class="pulse-variety">
				<li class="scrollme africa-dish animateme" data-when="enter"
			        data-from="0.75"
			        data-to="0.0"
			        data-opacity="0"
			        data-scale="1.5"
			        data-translatey="100">
						<img src="/genome/img/section2/africa-dish.png" class="animateme"
						data-from="0.7"
				        data-to="0"
				        data-rotatez="10"
				        data-translatex="-100"
				        />
				        In parts of <strong>Africa</strong> and the <strong>Middle East</strong>, many types of beans are eaten for breakfast.
				    </li>
				<li class="scrollme france-dish animateme" data-when="enter"
			        data-from="0.75"
			        data-to="0.0"
			        data-opacity="0"
			        data-scale="1.5"
			        data-translatey="100">
						<img src="/genome/img/section2/france-dish.png" class="animateme"
						data-from="0.6"
				        data-to="0"
				        data-rotatez="10"
				        data-translatex="100"
				        />
				        Lentils are loved in <strong>France</strong>, especially in the classic dish Petit salé aux lentilles.
				    </li>
				<li class="scrollme japan-dish animateme" data-when="enter"
			        data-from="0.75"
			        data-to="0.0"
			        data-opacity="0"
			        data-scale="1.5"
			        data-translatey="100">
						<img src="/genome/img/section2/japan-dish.png" class="animateme"
						data-from="0.6"
				        data-to="0"
				        data-rotatez="10"
				        data-translatex="-100"
				        />
			        	Azuki beans are a popular ingredient in sweets in <strong>East Asia</strong> – even ice cream.</li>
				<li class="scrollme india-dish animateme" data-when="enter"
			        data-from="0.75"
			        data-to="0.0"
			        data-opacity="0"
			        data-scale="1.5"
			        data-translatey="100">
						<img src="/genome/img/section2/india-dish.png" class="animateme"
						data-from="0.6"
				        data-to="0"
				        data-rotatez="10"
				        data-translatex="100"
				        />
			        	Roasted and seasoned chickpeas are a popular snack in <strong>India</strong>.</li>
				<li class="scrollme north-america-dish animateme" data-when="enter"
			        data-from="0.75"
			        data-to="0.0"
			        data-opacity="0"
			        data-scale="1.5"
			        data-translatey="100">
						<img src="/genome/img/section2/north-america-dish.png" class="animateme"
						data-from="0.6"
				        data-to="0"
				        data-rotatez="10"
				        data-translatex="-100"
				        />
			        	Peas were carried by early explorers of <strong>North America</strong>, because they were light but filling.</li>
				<li class="scrollme mexico-dish animateme" data-when="enter"
			        data-from="0.75"
			        data-to="0.0"
			        data-opacity="0"
			        data-scale="1.5"
			        data-translatey="100">
						<img src="/genome/img/section2/mexico-dish.png" class="animateme"
						data-from="0.6"
				        data-to="0"
				        data-rotatez="10"
				        data-translatex="100"
				        />
			        	Refried beans from <strong>Mexico</strong> are actually only fried once – and sometimes not at all!</li>
			</ul>

			<div class="divider green"></div>
			<div class="genome-row last-section">

				<img class="people-img scrollme animateme" src="/genome/img/section2/people.png" alt="People Love Pulses"
					data-when="enter"
			        data-from="0.8"
			        data-to="0.1"
			        data-opacity="1"
			        data-translatex="-100"
					data-rotatez="-10" />

				<img class="lentil-img scrollme animateme" src="/genome/img/intro/lentil-pile.jpg" alt="Lentil"
					data-when="enter"
			        data-from="0.8"
			        data-to="0.1"
			        data-opacity="0"
			        data-translatex="100" />

				<h2>More people are eating more pulses in more ways than ever!</h2>
				<p>Sequencing the genomes of pulses will give us a better understanding of this delicious and diverse food - and opportunities to make it better.</p>
			</div>

		</section>



		<section id="section3" class="collapse">
			<div class="header">
				<a class="expander" href="#farmers">
					<h2>
						How does knowing more <br />about pulses
					</h2>
					<h1>BENEFIT FARMERS?</h1>
				</a>
			</div>
			<div class="divider brown arrow"></div>

			<img class="farmer-img" src="/genome/img/section3/farmer-basket.png" alt="Farmers Love Pulses" />

			<div class="genome-row intro">
				<div class="intro-text">
					<p><strong>Pulse crops</strong> provide income, nutrition and crop diversity for farming families all over the&nbsp;world. </p>
					<img class="animateme scrollme" src="/genome/img/section3/chickpea-group.jpg" 
						data-when="enter"
				        data-from="0.8"
				        data-to="0.1"
				        data-opacity="0"
						data-translatey="100"
				        data-scale="1.5" />
				</div>

			</div>

			
			
			<div class="genome-row environment">
				
				<h3>Sometimes it can be tough to grow the plants that make pulses.</h3>
				
				<ul class="environment-list">
					<li class="animateme scrollme"
						data-when="enter"
				        data-from="0.8"
				        data-to="0.1"
				        data-opacity="0"
						data-translatey="100"
				        data-scale="1.5" />
						<img src="/genome/img/section3/heat-item.png" alt="Sometimes it is too hot" />
						<h4>Sometimes it is too&nbsp;hot.</h4>
						<div class="sub-item">Understanding why some pulses can stand the heat will help us develop plants that can thrive at a wide range of temperatures.</div>
					</li>
					<li class="animateme scrollme"
						data-when="enter"
				        data-from="0.8"
				        data-to="0.1"
				        data-opacity="0"
						data-translatey="100"
				        data-scale="1.5" >
						<img src="/genome/img/section3/dry-item.png" alt="Sometimes it is too dry" />
						<h4>Sometimes it is too&nbsp;dry.</h4> 
						<div class="sub-item">Finding out why some pulses can keep growing when the rain stops will help us develop plants that can do morewith less water.</div>
					</li>
					<li class="animateme scrollme"
						data-when="enter"
				        data-from="0.8"
				        data-to="0.1"
				        data-opacity="0"
						data-translatey="100"
				        data-scale="1.5" >
						<img src="/genome/img/section3/infected-item.png" alt="Sometimes they are infected or attacked" />
						<h4>Sometimes they are infected or&nbsp;attacked. </h4>
						<div class="sub-item">Identifying why some pulses are less affected by certain diseases or pests than others will help us develop plants that are resistant to these harms.</div>
					</li>
					</ul>
					<img class="all-three desktop" src="/genome/img/section3/all-three.png" />
					<img class="all-three mobile" src="/genome/img/section3/all-three-mobile.png" />



			</div>
			<div class="divider brown"></div>
			<div class="genome-row last-section">
				
				<img class="tree desktop animateme scrollme" src="/genome/img/section3/tree-bottom-right.png" 
					data-when="enter"
			        data-from="0.7"
			        data-to="0.2"
			        data-opacity="0"
					data-translatex="100"
			        data-rotatez="20" />
				<p><strong>Sequencing the genomes of pulses</strong> will give us more tools to develop pulse plants that are better adapted to the changing climate, and more resistant to the diseases that affect them.</p>


			</div>

		</section>

		<section id="section4" class="collapse">
			<div class="header">
				<a class="expander" href="#world">
					<h2>
						How does knowing more&nbsp;about&nbsp;pulses
					</h2>
					<h1>BENEFIT <span>the</span> WORLD?</h1>
				</a>
			</div>
			<div class="divider green arrow"></div>

			<img class="world-img" src="/genome/img/section4/the-world.png" alt="The World" />

			<div class="genome-row intro">
				<div class="intro-text">
					<p><strong>Pulses</strong> have a low carbon footprint, enrich the soil they are grown in and use a fraction of the water of other protein sources. </p>
				</div>

			</div>

			
			
			<div class="genome-row water">
				<img class="dry-soil" src="/genome/img/section4/soil-sample.png" alt="More food with less water." />
				
				<div class="intro-text">
					<p>All plants and animals need water to grow, but <strong>pulses need less water than many other sources of protein</strong>. </p>
					<p>Development of more drought-tolerant pulses will help the world to grow more food with less water.</p>
				</div>

				<div class="cf"></div>

				<img class="n2 scrollme animateme" src="/genome/img/section4/n2.jpg" alt="n2" 
					data-when="enter"
			        data-from="1"
			        data-to="0.2"
			        data-opacity="0"
					data-translatey="100"
					data-translatex="-100"
					data-scale="1.2" />
				<div>
					<p>Pulses are great at feeding people, but they can also <strong>feed other plants</strong>. </p>
					
					<p>The roots of pulses (and other legumes) make ‘nodules’ which are like fertilizer factories where the plant <strong>works together with bacteria</strong> to obtain nitrogen from the air.</p>
					
					<p><strong>Growing pulses improves soil fertility:</strong> this means that other plants grown on that soil <strong>perform better</strong>. So <strong>increasing the area</strong> of growing pulses, or increasing their frequency in rotations and intercrops, would have broad environmental advantages.</p>
				</div>



			</div>
			<div class="divider green"></div>
			<div class="genome-row last-section">
				
				<p>Increasing the production and improving the performance of pulse crops will enable the world to grow more pulses using water and land more efficiently. Our dependence on fossil fuel will be reduced because these crops do not require nitrogen fertilizer. <strong>Researching pulse genomes helps us understand how these plants work which is the key to unlocking the global potential of pulses for sustainable food production.</strong></p>




			</div>

		</section>

		<section id="conclusion">
			<div class="genome-row">

				<img class="baby-img" src="/genome/img/conclusion/baby.png" />
				<div class="section-text">
					<p><strong>Genome sequence</strong> information helps us to <strong>create tools</strong> to <strong>understand genetic diversity, how plants grow and behave</strong>. </p>
					
					<p>When scientists have <strong>completed sequencing these genomes</strong>, they will have a <strong>better understanding of pulses</strong> and an improved ability to develop new varieties to meet human and environmental needs.</p>
					
					<p><strong>Future generations</strong> will benefit from this increased understanding and the sustainability of this essential food source.</p>
				</div>

				<img class="pulse-logo" src="/genome/img/conclusion/year-of-pulses.png" />

				<img class="bowl-img animateme scrollme" src="/genome/img/conclusion/bowl.png" 
					data-when="enter"
			        data-from="0.7"
			        data-to="0.2"
			        data-opacity="0"
					data-translatey="100"
					data-scale="1.2"
					data-rotatez="-10" />
			</div>
		</section>

	</div>
</div>

Dependencies

Include jQuery

Include ScrollMe

Following the Pulse Brand User Guide

The Pulse Brand has a detailed User Guide that outlines font use. As the licensing restrictions on the primary font, Brandon Grotesque, can not be transferred, the onus is on you to license these web fonts.

While we strongly recommend adhering to the brand guidelines, we understand that not all may be able to do this. A suitable replacement may be found online, but using an alternate font may change the layout. We have included the source SCSS files so that developers can modify font sizes as they wish.

Follow the Pulse Brand User Guide

Credit

NinjaScript font - by P.D. Magnus www.fontmonkey.com

Scrollme by Nick Pearson