Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Outreach - Perspective</title>
  
   <link href='http://fonts.googleapis.com/css?family=Open+Sans|Open+Sans+Condensed:300,700' rel='stylesheet' type='text/css'>
<meta charset=utf-8/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
 
  
  <title>Outreach - Perspective</title>
  </head>
</head>
<body>
<style>
  body {
  font-family: "Open Sans", Helvetica, Arial, sans-serif;
    background-color: rgb(61,79,127);
    color: #FFFF00;
  margin: 0px;
  padding:0px;
  }
    
    <!-- comment-->
    h1,h2,h3,h4 {
       margin-top: 0px;
       margin-bottom: 0px;
    }      
    
    h1 { font-family: "Open Sans Condensed", "Open Sans" Helvetica, Arial, sans-serif;
    font-size: 42px;
    line-height: 42px;
      text-align:center;
      color: #FFCC00;
      margin-bottom: 20px;
      text-shadow: -1px 1px 1px rgba(0, 0, 0, 1);
        }
    h2 { font-family: "Open Sans Condensed", "Open Sans", Helvetica, Arial, sans-serif; .
      font-size: 17px; line-height: 17px;
      text-align:center;
      color: #FFCC00;
      text-transorm: uppercase; 
      margin-top: 5px;
      text-shadow: -1px 1px 1px rgba(0, 0, 0, 0.75);  
      }
    h3 { font-family: "Open Sans Condensed", "Open Sans", Helvetica, Arial, sans-serif; 
      font-size: 22px; 
      line-height: 22px; 
      color: #FFFF00;
      text-align: center; 
      text-transform: uppercase; }
    h4 { font-size: 16px; line-height: 16px; 
      margin-bottom: 3px;
      text-align: center
    }
    p { font-size: 14px;}
    a { 
      color: #FFFF00;
      text-decoration: none;
      border: 1 px solid #2f45531;
      padding-top: 12px;
      padding-bottom: 16px;
      text-align: center;
      display: block; 
    }
  
    .header {
      background-color: #990000;
      border-top: 4px solid rgb(26,66,74);
      border-bottom: 2px solid rgb(26,66,74);
      padding-left: 20px;
        padding-top:12px;
        padding-bottom:10px;
        padding-right: 20px;
    }
    
    .main { 
      background-color: #536895;
        padding-left:20px;
        padding-top:10px;
        padding-bottom:24px;
        padding-right:20px;
       }
    .button {
    color: #FFFF00;
    text-decoration: none;
    background-color: blue;
    border: 1px solid #2f4531;
    padding-top: 12px;
    padding-bottom: 16px;
    text-align: center;
    display: block;
    font-size: 18px;
    font-weight: bold;
    }
   
    .img {
      float: center;
      border: 5px solid #2f45531;
    }
  
  .spinner {
  margin: 100px auto;
  width: 40px;
  height: 40px;
  position: relative;
  text-align: center;
  
  -webkit-animation: rotate 2.0s infinite linear;
  animation: rotate 2.0s infinite linear;
}
​
.dot1, .dot2 {
  width: 60%;
  height: 60%;
  display: inline-block;
  position: absolute;
  top: 0;
  background-color: #FFFF00;
  border-radius: 100%;
  
  -webkit-animation: bounce 2.0s infinite ease-in-out;
  animation: bounce 2.0s infinite ease-in-out;
}
​
.dot2 {
  top: auto;
  bottom: 0px;
  -webkit-animation-delay: -1.0s;
  animation-delay: -1.0s;
}
​
@-webkit-keyframes rotate { 100% { -webkit-transform: rotate(360deg) }}
@keyframes rotate { 100% { transform: rotate(360deg); -webkit-transform: rotate(360deg) }}
​
@-webkit-keyframes bounce {
  0%, 100% { -webkit-transform: scale(0.0) }
  50% { -webkit-transform: scale(1.0) }
}
​
@keyframes bounce {
  0%, 100% { 
    transform: scale(0.0);
    -webkit-transform: scale(0.0);
  } 50% { 
    transform: scale(1.0);
    -webkit-transform: scale(1.0);
  }
}
</style>
</head>
  
  <body>
  <!-- Header -->
    <div class="header">
      <h1>Hey Alan</h1><h2>This is my  Out Reach for Perspective -<br><br>Getting Together</h2>
<h2>If you have time Sunday <br><br>(or Monday 2nd choice)<br></h2></div>
  
  <!-- Reaching Out - Perspective -->
  <div class="main">At the meeting I attended this morning, I heard a lot of great shares.  I am writing around surrender and lettting go<br>Am having some self judgement re: my surrender hasn't happened yet.  Surrender doesn't happen when I am in self judgement<br>Neg - critical self judgement is historic and really UP for Me<center>
     <h3>My Surrender is elusive<br>I Have Fear <br>I won't be taken care of</h3>
  <h4>I Have Fear<br>Letting Go and Trusting God<br>Fear That I'm not doing IT RIGHT</h4>
  <br><br><br>  
    
Next week is the big game
    
    <p><div class="image"><img src="http://s28.postimg.org/q2ho4r1n1/usc_v_ucla.jpg"</p>
    
 <div class="spinner">
  <div class="dot1"></div>
  <div class="dot2"></div>
</div>   
</body>
</html>
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
grasshopperpro
0viewers