Final Project

final-project.markdown

Final Project

A Pen by Melina Jana Harzer on CodePen.

License.

index.html

<div class="container">
  <img src="https://cdn.pixabay.com/photo/2017/01/16/19/54/ireland-1985088_1280.jpg" alt="Sheep" style="width:100%;">
  <h1 class="headline">Ecological Consumption
<br>
<h2 class="subheadline">
    In times of mass information, 
<br> how conscious are you?
    </div>
<div/>

<h1 class="mediumtitle">In times of mass information, how conscious are you?</h1>
    
<p class="welcome">FACTS:
<br>
One of the benefits of a vegan diet is the reduction of your impact on the environment. Animals store only a small fraction of the energy they extract from the food they eat, and the rest is wasted as heat. If you eat animal products, most of the energy in the plants those animals ate has been lost as heat and only a fraction of it reaches you. Eating plants is more efficient, meaning that less of the energy the plants contain is wasted. Ultimately, this means that less land is required to support a population of vegans. 
    <br> </p>
			</div>
   
			<div class="container-3">
		        <div class="milk icon">
              <img src="https://i.imgur.com/TOyMAbH.png" alt="milk" width="80" height="80">
        </div>
		        <div class="egg icon">
              <img src="https://i.imgur.com/SXm67kb.png" alt="egg" width="80" height="80">
		        </div>
		        <div class="chicken icon">
              <img src="https://i.imgur.com/CPktHDC.png" alt="chicken" width="80" height="80">
              </div>
	        <div class="steak icon">
            <img src="https://i.imgur.com/RhzdT2w.png" alt="CO2 icon" width="80" height="80">
	        </div>
    <br>
    

<br>
<p class="statement">Here are the key environmental benefits of <em>veganism</em>:
<br>
<br>
1. It reduces groundwater pollution.
<br>
  <br>
2. It cuts down on greenhouse gases.
<br>
  <br>
3. It helps preserve precious land resources.
<br>
  <br>
3. It helps preserve precious land resources.</p>
<br>
              
              <br>
              <br>

<p class=info>COWS PRODUCE 150 BILLION GALLONS OF METHANE PER DAY.
  <br>
  _
 <br> Ross, Phillip. "Cow Farts Have 'Larger Greenhouse Gas Impact' Than Previously Thought; Methane Pushes Climate Change"
  <br>International Business Times. 26 November, 2013
  <br>
   
<p class=info>250 TO 500 LITERS PER COW PER DAY x 1.5 BILLION COWS GLOBALLY EQUALS 99 TO 198.1 BILLION GALLONS. WHICH MEANS A ROUGH AVERAGE OF 150 BILLION GALLONS CH4 GLOBALLY PER DAY.
  <br>
  _
 <br>Miller, Scot M, et al. "Anthropegnic Emissions of Methane in the United States" Proceedings of the National Academy of Sciences. Vol. 110. 18 October 2013</p>
        
        <div class="cow">
              <img src="https://i.imgur.com/ySHaD4H.png" alt="milk" width="100" height="100">
        </div>
        
        

<br>
<br>
<br>
<br>
  
     <p class="statement">EVEN WITHOUT FOSSIL FUELS, WE WILL EXCEED OUR 565 GIGATONNES CO2 LIMIT BY 2030, ALL FROM BREEDING ANIMALS FOR HUMAN CONSUMPTION.
     
  </p>
  
<br>

<!-- Calculator part-->
	
	<div class="calculator">
	  <div class="row">
	    <div class="">
	      <div class="">
	        <h3 class=""><br>
            Now, let's measure your ecological impact . . .</h3>
	      </div>
	      <div class="">
	        <h4>How long have you been vegan?</h4>
	        <!-- Calculator -->
	        <div class="row">
	          <div class="grid-container">
	            <div class="">
	              <label for="years">Years:</label>
	              <input type="number" id="years" min=0 max="99" value="0">
	            </div>
	            <div class="">
	              <label for="months">Months:</label>
	              <input type="number" id="months" min=0 max="12" value="0">
	            </div>
	            <div class="">
	              <input type="button" value="Calculate" onclick="recalc()" >
	            </div>
	            <div class="">
	              
	            </div>
	          </div>
	        </div>
	      </div>
	    </div>
	    <!-- Numbers -->
	    <div class="">
        <div class="grid-container2">
			<div class="">
				
			</div>
			<div class="container-2">
		        <div class="stat">
              <img src="https://i.imgur.com/0bHZ6S9.png" alt="Water icon" width="70" height="70">
		          <div class="index water">Liters of Water:</div>
		          <div id="water" class="number value water">1100</div>
		        </div>
		        <div class="stat">
              <img src="https://i.imgur.com/uZPFmrQ.png" alt="Forest icon" width="70" height="70">
		          <div class="index forest">m2 Forest:</div>
		          <div id="forest" class="number value forest">30</div>
		        </div>
		        <div class="stat">
              <img src="https://i.imgur.com/BzWzBZO.png" alt="Animal icon" width="70" height="70">
		          <div class="index animals">Animal Lives:</div>
		          <div id="lives" class="number value animals">1</div>
		        </div>
        <div class="small-6 columns">
	        <div class="stat">
            <img src="https://i.imgur.com/6YXavOv.png" alt="Grain icon" width="70" height="70">
	          <div class="index grain">kg of of Grain:</div>
	          <div id="grain" class="number value grain">40</div>
	        </div>
	        <div class="stat">
            <img src="https://i.imgur.com/y5LIiai.png" alt="CO2 icon" width="70" height="70">
	          <div class="index co2">kg of cO2:</div>
	          <div id="Co2" class="number value co2">20</div>
	        </div>
          </div>

<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">

script.js

function recalc() {
  var months =Number($("#months").val()) + Number($("#years").val()) * 12;
  $("#water").text((months) * 124917);
  $("#forest").text((months) * 84);
  $("#lives").text(months * 30);
  $("#grain").text(months * 543);
  $("#Co2").text(months * 273);
}

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

style.css

.welcome {
  color: white;
  font-size: 25px;
  font-weight: normal;
  font-family: 'Lato', sans-serif;
  margin: 350px 60px 150px 190px;}

body {background-color: black;}

body, html {
    height: 100%;}

.bg {background-image: url("https://cdn.pixabay.com/photo/2017/01/16/19/54/ireland-1985088_1280.jpg");

    height: 100%; 

    background-position: center;
    background-repeat: repeat;
    background-size: cover;
}

.headline {
    position: absolute;
    top: 20%;
    left: 40%;
  color: white;
  font-size: 30px;
  font-weight: bold;
  font-family: 'Lato', sans-serif;
  margin: 0px 0px 30px 280px; 
}

.subheadline {
    position: absolute;
    top: 30%;
    left: 40%;
  color: white;
  font-size: 30px;
  font-weight: normal;
  font-family: 'Lato', sans-serif;
  margin: 0px 0px 30px 280px; 
}

img {
    -webkit-filter: grayscale(40%);
    filter: grayscale(40%);
}

.mediumtitle {
  color: white;
  font-size: 24px;
  font-family: 'Lato', sans-serif;
  font-weight: normal;
  margin: 50px 80px 20px 118px;}

.text {
  color: white;
  font-size: 16px;
  border: white 1px dotted;
  margin: 10px 100px 50px 100px;
  padding: 50px;
  line-height: 27px;}


.icon {
  margin: 0px 100px 50px 100px;
}

.boxed {
  margin: 0px 0px 0px 0px;
  padding: 5px;
  color: white;
  font-family: 'Lato', sans-serif;
  font-weight: normal;
  text-align: center;}

.float-left{
  float: left;
  padding: 32px;}

.container {
  height: 750px;
  background-color: white;
  font-color: rgb(250,250,250)}

.background {
  margin: 30px 0px 0px 20px;}

.caption {
  text-color: rgb(255,255,255)}

.statement {
  text-align: left;
  color: white;
  font-size: 20pt;
  border: white 1px dotted;
  padding: 60px;
  font-family: "Lato";
  font-weight: normal;
  padding: 40px 50px 15px 850px;
  background-color: black;
}



.info {
  padding: 75px 500px 30px 200px;
  font-size: 15pt;
  color: white;
  font-family: "Lato";
}

.cow {
  padding: 5px 0px 30px 1200px;
}

.math {
  padding: 40px 500px 0px 500px;
  text-align: center;
  color: white;
  font-family: "Lato";
  font-weight: bold;
  font-size: 14pt;
}

_____Calculator_____

h3{
  text-align: right;
  margin: 400px 500px 20px 500px;
  color: white;
  font-family: "Lato";
  font-size: 20px;
}
h4{
  text-align: center;
  color: white;
  font-family: "Lato";
  font-size: 30px;
}
.row{
  margin: 30px;
  color: white;
  font-size: 18px;
  font-family: "Lato";
  text-align: center;
}
.grid-container {
  display: grid;
  color: white;
  grid-template-columns: 5px 10px 10px;
  margin-left: 25%;
  margin-right: 25%;
  background:  black;
  padding: 15px;
  justify-content: space-evenly;
}

.stat{
  float: left;
  color: white;
  margin: 45px 45px 205px 45px;
  align: center;
}
.container-2{
  margin-left: 15%;
  margin-right: 15%;
  width: 70%;
  align: center;
}

_____Calculator_end_____