Difference between revisions 85608 and 85609 on foundationwiki

< previous diff
next diff >
Thank You Detail
<html>
  <style type="text/css">
    h1#firstHeading {
      display: none;
    }
    div#thank-you-content div#thank-you-video {
      border: 1px solid #aaa;
      margin: 0 0 30px 0;
      padding: 0;
      width: 760px;
    }
    div#thank-you-content div#thank-you-video div.video-container {
      text-align: center;
    }
    div#thank-you-content div#thank-you-video div.video-container img {
      cursor: pointer;
    }
    div#thank-you-content div#thank-you-video p {
      color: #000;
      display: block;
      font-size: 13px;
      line-height: 18px;
      margin: 0;
      padding: 10px;
    }
    div#thank-you-content {
      margin: 0;
      width: 760px;
    }
    div#thank-you-content h2 {
      border: none;
      color: #000;
      font-size: 20px;
      font-weight: bold;
      line-height: 22px;
      margin: 0 0 10px 0;
      padding: 0;
    }
    div#thank-you-content p {
      font-size: 13px;
      line-height: 18px;
      margin: 0 0 20px 0;
    }
    div#thank-you-content div.left-column {
      float: left;
      width: 405px;
    }
    div#thank-you-content div.left-column p {
      font-size: 13px;
      line-height: 18px;
      margin: 0 0 20px 0;
    }
    div#thank-you-content div.left-columneditors ul {
      margin: 0;
      padding: 0;
    }
    div#thank-you-content div.left-columneditors ul li {
      display: block;
      float: left;
      margin: 0;
      padding: 0;
    }
    div#thank-you-content div.left-columneditors ul li a {
      border: none;
      display: block;
      float: left;
      margin: 0 20px 20px 0;
      padding: 0;
      text-align: left;
      width: 180px;
    }
    div#thank-you-content div.left-columneditors ul li a img {
      border: 1px solid #aaa;
    }
    div#thank-you-content div.left-columneditors ul li a span {
      color: #000;
      display: block;
      font-size: 13px;
      font-weight: bold;
      line-height: 18px;
      margin: 5px 0 0 0;
    }
    div#thank-you-content div.left-columneditors ul li.right a {
      margin-right: 20px;
    }
    div#thank-you-content div.left-columneditors a {
      border: 1px solid #b9b9b9;
      display: block;
      float: left;
      font-size: 13px;
      line-height;
      margin: 10px 0 0 0;
      padding: 5px 0;
      text-align: center;
      width: 403px;
    }
    div#thank-you-content div.right-column {
      float: right;
      width: 325px;
    }
    div#thank-you-content div.right-column ul {
      margin: 0;
      padding: 0;
    }
    div#thank-you-content div.right-column ul li {
      display: block;
      font-size: 13px;
      line-height: 18px;
      margin: 0 0 20px 0;
      padding: 0 0 0 50px;
      position: relative;
    }
    div#thank-you-content div.right-column ul li img {
      left: 0;
      position: absolute;
      top: 0;
    }
    div#thank-you-content div.right-column ul li.first img {
      left: 10px;
    }
    div#thank-you-content div.right-column ul li strong {
      display: block;
      font-size: 16px;
      font-weight: bold;
    }
    div#thank-you-content div.right-column a {
      background: #3366bb;
      border-radius: 5px;
      color: #fff;
      display: block;
      font-size: 18px;
      font-weight: bold;
      margin: 10px 0 0 50px;
      padding: 15px 0;
      text-align: center;
      -moz-border-radius: 5px;
      -webkit-border-radius: 5px;⏎
    }
  </style>
  <div id="thank-you-content">
    <h1>Editor Name Here</h1>
    <div id="thank-you-video">
      <div class="video-container">
        <img src="//upload.wikimedia.org/wikipedia/donate/thumb/8/86/Wikipedia_Puzzle_Globe.jpg/400px-Wikipedia_Puzzle_Globe.jpg" width="640" />
        <div class="commons-video" style="display:none;">
(contracted; show full)
    <p>I could have devoted my time to educating my company's customers only. But instead, I reached Russian speakers everywhere... anyone who wants to learn.</p>
    <p>I'm young. I don't have much money. But I believe in helping others, however I can. On Wikipedia, I share my time, my enthusiasm, my knowledge.</p>

    <div class="editors">
      <h2>Meet some of the editors of Wikipedia.</h2>
      <p>Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus.</p>
      <ul>
        <li>
          <a href="" title="">
            <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/4/47/Balasubramanian_Poongothai-365.jpg/800px-Balasubramanian_Poongothai-365.jpg" alt="Poongothai" width="178" />
            <span>Poongothai</span>
          </a>
        </li>
        <li>
          <a href="" title="">
            <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/5/57/Mei_Jiun_Kwek-206.jpg/800px-Mei_Jiun_Kwek-206.jpg" alt="Mei Jiun" width="178" />
            <span>Mei Jiun</span>
          </a>
        </li>
        <li>
          <a href="" title="">
            <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/b/b5/Viswa_Prabha-4391.jpg/800px-Viswa_Prabha-4391.jpg" alt="Viswa Prabha" width="178" />
            <span>Viswa Prabha</span>
          </a>
        </li>
        <li class="right">
          <a href="" title="">
            <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/1/13/Oarabile_Mudongo-6054.jpg/800px-Oarabile_Mudongo-6054.jpg" alt="Oarabile" width="178" />
            <span>Oarabile</span>
          </a>
        </li>
      </ul>
      <a href="" title="">View More Editors</a>
    </div>⏎
  </div>
  <script type="text/javascript">
    mw.setConfig( 'EmbedPlayer.RewriteSelector', null );
    var playerW = parseInt('760');
    var playerH = playerW * 0.5625; //aspect ratio
    $("div#thank-you-video div.video-container img").click(function () {
      $(this).replaceWith(
        $("<iframe></iframe>", {
            id : "youtube-video",
            width : playerW,
            height : playerH,
            frameborder : 0,
            allowfullscreen : "1",
            src : "https://www.youtube-nocookie.com/embed/" + "3Knv6D6Thi0" + "?rel=0&amp;autoplay=1&amp;origin=https://donate.wikimedia.org"
        })
      );
    });
    $("a#showcommonsvideo").click(function(event){
      event.preventDefault();
      $("div#thank-you-video div.video-container img").css('display', 'none');
      $("div#thank-you-video div.video-container div.commons-video").css('display', 'block');
      $('#mwe_player_0').embedPlayer(function(){
        // play the video once ready:
        $('#mwe_player_0')[0].play();
      });
    });
  </script>
</html>