webapprentice

<p>Here is some placeholder text</p>


  <div id="disqus_thread"></div>
  <script type="text/javascript">
      /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
      var disqus_shortname = 'webapprentice'; // required: replace example with your forum shortname

      /* * * DON'T EDIT BELOW THIS LINE * * */
      (function() {

webapprentice

<div id='container'>
  <img src='assets/slideshow_3.png' id='myimage' />
</div>

<p style='text-align: center'>
Click the image to expand - Hit the ESC key to collapse
</p>

<style type="text/css">

webapprentice

<div id="map_canvas"></div>

<style>
   #map_canvas {
    margin-left: auto;
    margin-right: auto;
    padding: 0;
    width: 600px;
    height: 400px;
  }

webapprentice

<div id="map_canvas"></div>

<style>
   #map_canvas {
    margin-left: auto;
    margin-right: auto;
    padding: 0;
    width: 600px;
    height: 400px;
  }

webapprentice

<p>URL: http://maps.googleapis.com/maps/api/streetview?size=400x400&location=47.65072,-122.351209&heading=200&pitch=30&fov=60&sensor=false</p>

<img 
src="http://maps.googleapis.com/maps/api/streetview?size=400x400&location=47.65072,-122.351209&heading=200&pitch=30&fov=60&sensor=false"
alt="Street View Image"/>

webapprentice

  <script src="/javascripts/ckeditor/ckeditor.js"></script>

  <form action="/tutorial_43_demo_1" method="post">
  <textarea class="ckeditor" rows="5" cols="40" name="editor"><%= @text %></textarea>
  <br>
  <input type="submit" value="Submit">
  </form>

  <hr>
  <p>Raw text sent to the server:</p>

webapprentice

<style type="text/css" media="screen">
    textarea {
        display: block;
        margin: auto;
        width: 600px;
        height: 5px;
    }
    #editor_div {
        display: block;
        margin: auto;

webapprentice

  <form action="/tutorial_45_demo_1" method="post">
    <p>
    Name: <input type="text" name="name" size="40">
    </p>
    <script type="text/javascript"
       src="http://www.google.com/recaptcha/api/challenge?k=YOUR_RECAPTCHA_PUBLIC_KEY_GOES_HERE">
    </script>
    <noscript>
       <iframe src="http://www.google.com/recaptcha/api/noscript?k=YOUR_RECAPTCHA_PUBLIC_KEY_GOES_HERE"
           height="300" width="500" frameborder="0"></iframe><br>

webapprentice

<script type="text/javascript" src="//assets.pinterest.com/js/pinit.js" data-pin-hover="true"></script>

<img src="/assets/slideshow_3.png" alt="Bronze mice by the Old Bridge in Heidelberg" width="300px" />
<p><a href="//www.pinterest.com/pin/create/button/?url=http%3A%2F%2Fweb-apprentice-demo.craic.com%2Ftutorials%3Ftutorial%3D43%26demo%3D1&media=http%3A%2F%2Fweb-apprentice-demo.craic.com%2Fassets%2Fslideshow_3.png&description=Web%20Apprentice%20Demo%20%2346%20-%20Embed%20Pinterest%20Buttons" data-pin-do="buttonPin" data-pin-config="none">
<img src="//assets.pinterest.com/images/pidgets/pinit_fg_en_rect_gray_20.png" /></a>
Bronze mice by the Old Bridge in Heidelberg
</p>

<img src="/assets/slideshow_1.png" alt="Heidelberg Saturday Market" width="300px"/>
<p>Heidelberg Saturday Market</p>

webapprentice

<style>

  .form-row {
    padding: 5px;
  }
  .tag {
    font-family: Courier, monospace;
    display: inline-block;
    width: 150px;
  }