A HTML, CSS and JavaScript demo

</head>
<body>
  <img class="center" src="https://i.imgur.com/pr5LdYj.png"/>
  <div class="box center">
    <img class="image-bread center" src="https://i.imgur.com/pabWJ1I.png"/>
    <h2>Take a lunch break tomorrow with Genspace! Join us at the Bryant Park Reading Room for a conversation with Eugenia Bone about her 
new book, Microbia.</h2>
    <img class="image-small center" src="https://i.imgur.com/g5BBLnl.png"/>
    <h1>Workshop with Genspace!</h1>
    <div class="grid">
      <div>
        <img class="image-icon" src="https://i.imgur.com/qemKZOy.png"/>
        <h3>RNA Evolution: From Primordial
Life to Masterminds of Gene
Expression</h3>
        <strong><p>Starting July 28</p></strong>
        <p>From dark matter of genomes to primordial life on earth, RNA is no longer the simple messenger to the genetic code. In this course, students will discover the vast and intricate world of RNA biology. Learn how to extract RNA from mouse organs and use 
reversetranscriptase PCR to visualize how RNA can determine cellular diversity beyond the 
genetic blueprint.</p>
        <img class="image-right" src="https://i.imgur.com/8dBiGR0.png"/>
  
      </div>
      <div>    
        <img class="image-icon" src="https://i.imgur.com/VPOkOri.png"/>
        <h3>Biohacker Boot Camp</h3>
        <strong><p>Starting August 9</p></strong>
        <p>We'll extract our own DNA, analyze ancestry through bioinformatics, splice genes into bacteria, and learn all the standard techniques such as using pipettes, gel electrophoresis, amplifying DNA with PCR reactions, working with restriction enzymes to build plasmids, and growing and transforming 
bacteria.</p>
        <img class="image-right" src="https://i.imgur.com/8dBiGR0.png"/>
      </div>
      <div>
        <img class="image-icon" src="https://i.imgur.com/AbkV9IZ.png"/>
        <h3>Solving Cases with Genetic Traces: A Forensics and 
Genomics 
Workshop</h3>
        <strong><p>Starting August 11</p></strong>
        <p>
While reading the first human genome cost $3 billion and took 13 years to complete in 2003, today, that same genome can now be genotyped for $99 and can be given as a Christmas present to connect to long-lost family members. The wide adoption of genomics is not without ethical 
challenges, tensions between scientific progress, individual privacy, and the potential for group-based discrimination. Join Dr. Sophie 
Zaaijer and Dr. Kadija Ferryman for a 
workshop exploring the promises, challenges, and perils as genomics becomes a part of 
everyday life.</p>
        <img class="image-right" src="https://i.imgur.com/8dBiGR0.png"/>
      </div>
      <div>
        <img class="image-icon" src="https://i.imgur.com/7VZZDQW.png"/>
        <h3>Biotech Crash Course</h3>
        <strong><p>Starting August 11</p></strong>
        <p>This introductory course covers the basic 
techniques that facilitated the biotechnology 
revolution, and will show you where it is headed in the near future. Learn about the fundamental characteristics of DNA and how we can take advantage of these to cut and paste DNA, making lots of copies of specific DNA sequences, or assembling new DNA sequences into a new genetic program.</p>
        <img class="image-right" src="https://i.imgur.com/8dBiGR0.png"/>
      </div>
    </div>  
    <div class="center">   
      <h4>For further information</h4>
      <img src="https://i.imgur.com/beF9GAw.png"/>
    </div> 
    <div class="brown-box">
      <p>Copyright Â© 2017 Genspace, All rights reserved.</p>

<p>Our mailing address is:<br/>
         140 32nd Street<br/>
         Brooklyn, NY 11232</p>

<p>Want to change how you receive these emails?
         You can update your preferences or unsubscribe from this list.</p>
    </div>
  </div>
</body>
</html>

body{
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  color: #385a04;
  background-color: #adbf1d;
  }

h1{
  color: #473918;
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 90%;
  text-align: center;
}

h3{
  width: 90%;
}

h4{
  color: #473918;
  display: block;
  margin-left: auto;
  margin-right: auto;
  font-size: 150%;
}

p{
  width: 300;
}

.box{
  width: 600;
  margin: 30 10 10 10;
  padding: 20 10 10 10;
  background-color: #dbce50;
}

.center{
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}

.center h2{
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 90%;
  text-align: center;

}

.image-small{
  width: 30%;
}

.image-icon{
  width: 90%;
}

#image-bread{
  width: 50%;
}

.image-right{
  margin-left: 200;
}

.grid{
  display: grid;
  margin-top: 70px;
  grid-template-columns: 350 350;
  grid-column-gap: 0px;
  grid-row-gap: 50px;
}

.brown-box{
  background-color: #674827;
  color: #adbf1d;
  padding: 10% 10% 10% 10%;
  text-align: center;
  font-size: 10px;
}