PERSONAL EBLAST - Liveweave

<!DOCTYPE html>
<html>
<head>
<title>Genspace Eblast</title>
</head>
<body>

        <div class="background-1">
        <h1 class="header">TAKE A LUNCH WITH GENSPACE</h1>
        <img class="bryant-park-image" src="https://i.imgur.com/Tp3v68C.jpg" height="365pt" width="600px"/> 
        <div class="text-box-1">
        <br/>
        <br/>
        <p class="body-copy">Take a lunch break tomorrow with Genspace! Join us at the Bryants Park Reading Room for a conversation with Eugenia Bone about her new book Microbia. Then come by the lab and get your hands on some microbes in one of our upcoming workshops! </p>
        <span class="circle-1"></span>
        </div>
        </div>
        
        <div class="background-2"> 
        <div class="yellow-box"></div> 
        <div class="orange-box"><p class="header-2"><strong>GENSPACE CLASSES</strong></p> </div>
        <div class="container">
        <div class="grid-item">
        <img class="image-1" src="https://i.imgur.com/gq6W3wG.png"/>
        <div class="image-box-1"></div>
        <p class="class-names-1"><strong>Solving Cases with Genetic Tracings, a Forensics and Genome workshop </strong> <br> <br> While reading the first genome cost $3 billion and took 13 years to complete in <br>2003, today, the same genome can now be genotyped for $99 and can be given <br>as a Christmas present to connect to long-lost families. The wide adoption of <br>genomics is not without ethical challenges, tensions between scientific progress, <br>individual privacy, and the potential for group-based discrimination. Dr. Sophie <br>Zaaijer and Dr. Kadija Feeryman for a workshop exploring the promises,<br/> challenges,and perils as genomics becomes a part of everyday life. </p>
        <span class="circle-2"></span>    
        <div class="grid-item">
        <img class="image-2" src="https://i.imgur.com/86IytOz.png"/>
        <div class="image-box-2"></div>
        <p class="class-names-2"><strong> Neurohacking 101: Brain Networks and Machine Learning </strong> <br> <br>Do you know you can learn alot about the brain from as little as a half hour in an MRI scanner? There are tens of thousands of brain scan publicly available on the internet. 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 This is our third time offering this workshop at Genspace, and this time weâ€™ve decided to include an optional Python Boot Camp.</p>
       <span class="circle-3"> <strong></strong></span>
       <div class="grid-item"> </div>
       <img class="image-3" src="https://i.imgur.com/j4tgTpJ.png"/>
       <div class="image-box-3"></div>
          <p class="class-names-3"> <strong> RNA EVOLUTION:From primodorial life to masterminds of <br> gene expression</strong> <br><strong><em>October 31</em></strong><br> From dark matter of genomes to primodorial life on earth, RNA is no<br> messenger to genetic code. In this course, students will discover the <br> vast and intrcate world of RNA biology. Lean how to extract RNA from<br> mouse organs and use reverse- transcriptase PCR to visualize how <br> RNA can determine cellular diversity beyond the genetic blueprint.</p>
         <span class="circle-4"></span>
         <div class="grid-item"> </div>
         <img class="image-4" src="https://i.imgur.com/3QPrFJr.png"/>
         <div class="image-box-4"></div>
          <p class="class-names-4"> <strong> BIOHACKER BOOTCAMPE</strong> <br><strong><em>October 29</em></strong><br> We'll extract our own dna, analyze ancestry through bioinformatics, splice <br> genes into bacteria, and learn all the standard techniques such as using <br> pipettes, gel electrophoresis, amplifying DNA with PCR reactions, working <br> with restriction enzymes to build plasmids, and growing and transforming <br> bacteria. </p>
          <span class="circle-5"></span>
          
          <img class="footer
" src="https://i.imgur.com/ffp6jjP.jpg"/>
            
          </div>
       
        
               
	   </div>
       </div>
       </div>

</body>
</html>

.background-1{
  background-color: #D5E0E6;
  height: 650px;
  width: 800px; }

.header{
  color: #E75637;
  padding-left: 16%;
  font-family: "Franklin Gothic Medium", "Franklin Gothic", "ITC Franklin Gothic", Arial, sans-serif;
  font-size: 30;
 }

.background-2{
  background-color:#405F79;
  height: 1300px;
  width: 800px;
}

.bryant-park-image{
    padding: 20px 50px 50px 50px;
    position: relative;
    bottom: -7;
    z-index: 10;
 }

.text-box-1{
  background-color:#F2BF37;
  height: 140px;
  width: 680px;
  margin-left: 2%;
  position: absolute;
  top: 420px;
  color: #405F79;}

.body-copy{
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;; 
  margin-left: 5.5%;
  font-size: 17px;
  position: absolute;
  top: 25px;
}

.circle-1{
  height: 100px;
  width: 100px;
  background-color: #E75637;
  border-radius: 50%;
  display: block;
  position: absolute;
  right: -12px;
  top: 87pt;
  box-shadow: 5px 5px 5px #686868;
}
.yellow-box{
  background-color:#F2BF37;
  height: 180px;
  width: 690px;
  margin-left: 3%;
  position: absolute;
  top: 680px;
  color: #405F79;
  box-shadow: 6px 6px 6px #3D3D3D;
  
}

.orange-box{
  background-color:#E75637;
  height: 180px;
  width:600px;
  margin-left: 8%;
  position: absolute;
  top: 700px;
  color: #405F79;
  box-shadow: 6px 6px 6px #3D3D3D;}

.header-2{
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  position: absolute;
  top: 50;
  left: 140px;
  color: #FFFFFF;
  font-size: 22pt;
}

.grid-container{
  max-width: 700px;
  margin-top: 40px;
  margin-bottom: 30px;
  padding-right: 20px;
  display: grid;
  grid-template-columns: 50% 50% 50% 50%;
  grid-column-gap: 30px;
  grid-row-gap: 30px; }

.grid-item{
	width: 100%;
	grid-row-gap: 20px;
	max-width:  500px;
	margin: 0 auto;}

.image-1{
  position: absolute;
  padding-top: 35%;
  margin-left: -118;
  z-index: 10;
  width: 315px;
}

.image-box-1{
  background-color:#D5E0E6;
  height: 210px;
  width:355px;
  margin-left: -18%;
  position: absolute;
  top: 1015px;
  color: #405F79;
  box-shadow: 6px 6px 6px #3D3D3D;
}

.class-names-1{
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;; 
  position: absolute;
  top: 820pt;
  margin-left: -89pt;
  font-size: 8.9px;
  color: #405F79;
}

.circle-2{
  height: 100px;
  width: 100px;
  background-color: #E75637;
  border-radius: 50%;
  display: block;
  position: absolute;
  right: 350px;
  top: 895pt;
  box-shadow: 5px 5px 5px #353535;}

.image-2{
  position: absolute;
  padding-top: 35%;
  margin-left: 290;
  z-index: 10;
  width: 285px;}

.image-box-2{
  background-color:#D5E0E6;
  height: 210px;
  width:340px;
  margin-left: 35%;
  position: absolute;
  top: 1015px;
  color: #405F79;
  box-shadow: 6px 6px 6px #3D3D3D;
}

.class-names-2{
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;; 
  position: absolute;
  top: 820pt;
  margin-left: 220pt;
  font-size: 8.9px;
  color: #405F79;
}
.circle-3{
  height: 100px;
  width: 100px;
  background-color: #E75637;
  border-radius: 50%;
  display: block;
  position: absolute;
  right: -20px;
  top: 895pt;
  box-shadow: 5px 5px 5px #353535;}

.image-3{
  position: absolute;
  padding-top: 92%;
  margin-left: -110;
  z-index: 10;
  width: 285px;}

.image-box-3{
  background-color:#D5E0E6;
  height: 240px;
  width:340px;
  margin-left: -18%;
  position: absolute;
  top: 1390px;
  color: #405F79;
  box-shadow: 6px 6px 6px #3D3D3D;
}

.class-names-3{
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;; 
  position: absolute;
  top: 1135pt;
  margin-left: -83pt;
  font-size: 8.9px;
  color: #405F79;
  z-index: 10;
}

.circle-4{
  height: 100px;
  width: 100px;
  background-color: #E75637;
  border-radius: 50%;
  display: block;
  position: absolute;
  right: 365px;
  top: 1200pt;
  box-shadow: 5px 5px 5px #353535;}

.image-4{
  position: absolute;
  padding-top: 92%;
  margin-left: 36.8%;
  z-index: 10;
  width: 285px;}

.image-box-4{
  background-color:#D5E0E6;
  height: 240px;
  width:340px;
  margin-left: 33%;
  position: absolute;
  top: 1390px;
  color: #405F79;
  box-shadow: 6px 6px 6px #3D3D3D;
}

.class-names-4{
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;; 
  position: absolute;
  top: 1135pt;
  margin-left: 206pt;
  font-size: 8.9px;
  color: #405F79;
  z-index: 10;
}
 
.circle-5{
  height: 100px;
  width: 100px;
  background-color: #E75637;
  border-radius: 50%;
  display: block;
  position: absolute;
  right: -10px;
  top: 1200pt;
  box-shadow: 5px 5px 5px #353535;}

.footer{
  height: 280px;
  width: 800px;
  position: absolute;
  top: 1800;
  left: 10px;
}