Sidebar Widget

Yup Yup

by Charles Butler

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.2/css/font-awesome.min.css">
<section class="wager-box">
  <img class="bbd" src="http://i.imgur.com/wJjpL35.png">
  <img src="http://i.imgur.com/MRe6sQ4.png">
</section>
<section class="social-box">
  <img src="http://www.capitalotb.com/wp-content/uploads/2016/05/live-stream.png">
  <h3>Get Social</h3>

  <div class="badge facebook">
    <i class="fa fa-facebook fa-fw"></i>
  </div>
  <div class="badge google">
    <i class="fa fa-google fa-fw"></i>
  </div>
  <div class="badge twitter">
    <i class="fa fa-twitter fa-fw"></i>
  </div>
  <div class="clear"> </div>

  <img src="http://www.capitalotb.com/wp-content/uploads/2016/05/handicap-report-btn-2.png">
</section>
<section class="subscribe">


  <div class="subscribe-pitch">

    <h3>Stay Updated!</h3>
    <p>Subscribe to our newsletter to get the latest scoop right to your inbox.
      <p>
  </div>
  <form onsubmit="return verifyRequired3414();" accept-charset="UTF-8" id="icpsignup3414" name="icpsignup" action="http://app.icontact.com/icp/signup.php" method="post" class="subscribe-form">
    <input type="hidden" value="http://www.capitalotb.com/index.php?option=com_contact&amp;view=contact&amp;id=1&amp;Itemid=99" name="redirect">
    <input type="hidden" value="http://www.icontact.com/www/signup/error.html" name="errorredirect">

    <input type="hidden" value="9888246" name="listid">
    <input type="hidden" value="N2QD" name="specialid:9888246">

    <input type="hidden" value="422555" name="clientid">
    <input type="hidden" value="3414" name="formid">
    <input type="hidden" value="1" name="reallistid">
    <input type="hidden" value="0" name="doubleopt">

    <input type="email" name="fields_email" class="subscribe-input" placeholder="Email address" autofocus>

    <button type="submit" name="submit" class="subscribe-submit">Subscribe</button>
  </form>
</section>

CSS

.clear {
          clear: both;
        }
        /* clear float */
        .bbd {
          border-bottom: 1px dashed #ccc;
        }
        .wager-box {
          margin: 0px auto;
          padding: 10px;
          min-width: 300px;
          width: 300px;
          background: white;
          border-radius: 5px;
          -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
          box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
          margin-bottom: 20px;
        }
        
        .wager-box {}
        
        .wager-box > h3 {
          font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
          margin: 0 0 7px;
          font-size: 19px;
          font-weight: normal;
          color: #222;
          text-transform: uppercase;
        }
        
        .social-box {
          margin: 0px auto;
          padding: 10px;
          min-width: 300px;
          width: 300px;
          background: white;
          border-radius: 5px;
          -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
          box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
          margin-bottom: 20px;
        }
        
        .social-box > h3 {
          font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
          margin: 0 0 7px;
          font-size: 19px;
          font-weight: normal;
          color: #222;
          text-transform: uppercase;
        }
        
        .social-box p {
          font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
          font-size: 13px;
          line-height: 18px;
          color: #484848;
        }
        
        .badge {
          display: inline-block;
          float: left;
          width: 33.333333%;
          padding: 0.4em 0em;
          text-align: center;
          font-size: 27px;
        }
        
        input {
          -webkit-box-sizing: border-box;
          -moz-box-sizing: border-box;
          box-sizing: border-box;
        }
        
        ::-moz-focus-inner {
          padding: 0;
         ...