Eblast-02-final - Liveweave

<!DOCTYPE html>
<html>
  <head>
  <title>Genspace Eblast</title>
  </head>
  
  
  <body>
    <div class="container">
      <img class="logo" src="https://i.imgur.com/N6guH2T.png"/> 
      <img class="bg" src="https://i.imgur.com/8ytMyvu.png">
      
      <div class="red-block">
        <p class="red-text">TAKE A BREAK TIME WITH GENSPACE</p>
      </div>
      
      <div class="yellow-block">
        <pre class="yellow-text">Wednesday 
July 18 at 12:30pm</pre>
      </div>
      
      <div class="black-block">
        <pre class="black-text">Join us at the Bryant Park Reading Room for a conversation
with Eugenia Bone about her new book, Microbia.

Julie Wolf hosts Eugenia Bone for a conversation 
about her new book Microbia: A Journey into the 
Unseen World Around You.
 </pre>
      </div>
      
      <div class="red-button">
        <p class="top-button-text">Join Here!</p>
      </div>
     
      <div class='grid-container'>
        <div class="lined-box">
         <pre class="headline"><b>Starting Thursday
July 19</b></pre>
         <img class="image" src="https://i.imgur.com/o9ctZs3.png">
         <div class="gap">
          </div>
         <pre class="headline"><b>Neurohacking 101: 
Brain Networks and 
Machine Learning</b></pre>
          
          <pre class="text">This introductory course covers some of
 the most important techniques used in the 
analysis of MRI data, and youâ€™ll learn plenty 
about neuroscience along the way!</pre>
         <p class="link"><b>More Info>></b></p>
         </div>
        
        <div class="lined-box">
         <pre class="headline"><b>Starting July 21</b></pre>
         <img class="image" src="https://i.imgur.com/i5ZngOh.png">

<pre class="headline"><b>Biohacker Boot Camp</b></pre>
         <pre class="text">In this course, students will discover the vast 
and  intricate world of RNA biology. Learn 
how to extract RNA from mouse organs and 
use reverse- transcriptase  PCR to visualize 
how RNA can determine cellular diversity 
beyond the genetic blueprint.</pre>
        <br>
        <p class="link"><b>More Info>></b></p>
        </div>
	 </div>    
      
     <div class="red-button-02">
       <p class="red-text-02">More Classes</p>
      </div>
      
      <div class="yellow-bottom">
        <pre class="bottom-text">Copyright Â© 2017 Genspace, All rights reserved.

Our mailing address is:
140 32nd Street
Brooklyn, NY 11232

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

.container{
  max-width: 700px;
  font-family: Trebuchet MS, Helvetica, sans-serif;
}

.logo{
  width: 150px;
  margin-top: -25;
}

.bg{
  margin-top: -20;
}

.red-block{
  width: 330px;
  height: 170px;
  background-color: #e24259;
  margin-top: -550;
  margin-left: 300;
  position: absolute;
}

.red-text{
  width: 260px;
  font-size: 27px;
  text-align: center;
  color: #FFFFFF;
  margin-top: 55;
  margin-left: 34;
}

.yellow-block{
  width: 180px;
  height: 170px;
  background-color: #fff200;
  margin-top: -320;
  margin-left: 30;
  position: absolute;
}

.yellow-text{
  font-family: Trebuchet MS, Helvetica, sans-serif;
  font-size: 15px;
  text-align: left;
  color: #000000;
  margin-left: 15;
}

.black-block{
  width: 420px;
  height: 170px;
  background-color: #000000;
  margin-top: -320;
  margin-left: 210;
  position: absolute;
}

.black-text{
  font-family: Trebuchet MS, Helvetica, sans-serif;
  font-size: 10px;
  line-height: 12px;
  text-align: left;
  color: #FFFFFF;
  margin-left: 15;
}

.red-button{
  width: 140px;
  height: 50px;
  border-radius: 10px;
  background-color: #e24259;
  margin-top: -220;
  margin-left: 470;
  position: absolute;
}

.top-button-text{
  font-size: 15px;
  text-align: left;
  color: #FFFFFF;
  margin-left: 35;
}

.grid-container{
  display: grid;
  align-content: center;
  grid-template-columns: 50% 50%;  
  grid-column-gap: 1px;
  grid-row-gap: 18px;
  margin: 0 auto;
}

.link{
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #E24259;
  margin-top: 30px;
  margin-left: 19px;
    
}

.image{
  width: 150px;
  border: solid 3px #E24259;
  margin-left: 120;
  margin-top: 20;
  margin-bottom: 60;
}

.lined-box{
  width: 250px;
  height: 400px;
  background-color: #FFFFFF;
  border: solid 3px #E24259;
  margin-top: -60;
  margin-left: 48;
}

.headline{
  font-family: Arial, Helvetica, sans-serif;
  font-size: 17px;
  text-align: left;
  line-height: 18px;
  color: #000000;
  margin-left: 15px;
}

.headline{
  font-family: Arial, Helvetica, sans-serif;
  font-size: 17px;
  text-align: left;
  line-height: 18px;
  color: #000000;
  margin-left: 20;
}

.text{
  font-family: Arial, Helvetica, sans-serif;
  font-size: 9px;
  margin-top: -10px;
  margin-left: 20px;
}

.red-button-02{
  width: 150px;
  height: 50px;
  border-radius: 10px;
  background-color: #e24259;
  margin-top: 100;
  margin-left: 275;
  position: absolute;
  margin-bottom: 40px;
}

.red-text-02{
  width: 290px;
  font-size: 18px;
  color: #FFFFFF;
  margin-top: 15;
  margin-left: 24;
}

.yellow-bottom{
  width: 700px;
  height: 200px;
  background-color: #fff200;
  margin-top: 250;
  position: absolute;
  margin-bottom: 40px;
}

.bottom-text{
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 9px;
  text-align: center;
  margin-top: 40px;
}