Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <figure><h2>Q&A</h2>
<h1>Drawing electrons</h1>
<img id="top" src="https://communitymeetings.files.wordpress.com/2014/12/circuitscribe_02_gif_inaction.gif" height="400" width="400"/>

</figure>
  
  <img id="bg" src="https://communitymeetings.files.wordpress.com/2014/12/circuitscribe_07_photo.jpg"  />
<p id="intro">An engineer turns ideas into prototypes. An entrepreneur turn prototypes into products we use. Brett Walker is both. The Champaign-based young engineering PhD is the CEO of a successful Kickstarter project, Circuit Scribe. Crowed funded by 12,277 backers on the online fundraising platform, his product looks like a normal pen but it has conductive ink inside that enables the pen to draw magic (electrons). <span> by Penny Yi Wang <span> </p>
<ul style="list-style-type:none">
  <li>
<p class="q">Circuit Scribe is such a cool concept. Where did you get the idea of a conductive ink pen?</p>
<p class="a">The group I worked with at graduate school had a lot of funding for conductive ink work. A colleague published a paper on pen and paper electronics. And there’s a good response to it. That sort of back-burnered for a while, just because getting a small run of pens done on the commercial side is very difficult. We started doing background research and decided the Kickstarter campaign would be a really good way to launch this. We hired a campaign company to do a video and marketing around the campaign. We launched our campaign and it just blew up from there. </p>
   <p> 
    <iframe width="640" height="360"  src="//www.youtube.com/embed/e0NM1jJbjrM" frameborder="0" allowfullscreen></iframe>
    </p>
</li>
<li>
<p class="q">What kind of clients do you supply this product to?</p>
<p class="a">On the consumer side, it is anywhere from grandparents trying to teach genius grandchildren electronics, to the education community – we see a lot of tractions in school districts and other areas that are interested in replacing their ways to teach circuits with this pen – as well as the maker community – as quickly as you can doodle a sketch on the back of a piece of paper, that sketch is actually a working circuit. </p>
</li>
<li>
<p class="q"><img src="https://communitymeetings.files.wordpress.com/2014/12/paperduino_gif_2_1024.gif" width="500" height="400" align="right"/>
Did anyone use the pen to make something that surprised you?</p>
<p class="a">
  There is a guy used it to make his own home entertainment control center. So he used it to control the volume on his TV and his speakers, to change channels, etc. Which is really cool to see that advanced application come out of the pen.</p>

  
</li>
<li>
<p class="q">
You got more than $670,000 from the Kickstarter campaign, way more than you originally asked for. What makes your product stand out?</p>
<p class="a">
Having a product that started in the $20 to $25 range really helps to sell a lot. Twenty to twenty-five bucks, you don’t really think that hard about spending. If you lose $25, it is in the disposable income range, whereas $3,000 is definitely not a disposable income for an average American, definitely not me. It is also intuitive – everybody knows how to use a rollerball pen. It’s something you do not really give instruction manual to people to figure our how to use.  It’s also helps because you can make cool stuff with. I think those things came together really. It may have not done as well in other types of media. </p>
</li>
<li>
<p class="q">
<img src="https://communitymeetings.files.wordpress.com/2014/12/circuitscribe_04_gif_prototype.gif" width="521.5" height="486.25" align="left"/>What do your backers get in return? Or are they angel investors?</p>
<p class="a">
They are definitely not angel investors. For tangible goods, the technology sector of Kickstarter, it boils down to glorified preorders. You give them a discount from what your ultimate retail price is going to be for the products. For instance, if you pledged $20, we will send you a Circuit Scribe pen and an LED component. Our retail for that is $25. The same thing goes to our different levels of kits, basic kit, maker kit, and developer kit. We give a real bonus to the early adopters; we get funds in the doors so that we can reiterate the product pretty quickly and manufacture at a much higher scale we would have been able to normally. So it’s a win-win. </p>
</li>
<li>
 <p class="q">
What do you think of the Kickstarter model?</p>
<p class="a">
The only problem for small businesses, especially when you don’t get enough outside funding, is this really catch-22. It’s really about how to get your products mass-produced. In order to get it mass-produced, you have to have a lot of money behind you. In order to have a lot of money behind you, you need to have sold a lot of products already. The nice thing about Kickstarter is that, if you have an idea that really appeals people and this mass consumer range, you can pay for a lot of your product development and manufacturing up front. Because if you have someone so hooked on your product after watching a video wants to give you money, that means chances are they are going to give you valuable feedback and want to see you succeed moving forward. So they are going to encourage a lot of people to buy it. </p>
</li>
<li>
  <p class="q">
Obviously you are a successful Kickstarter case. What do you think are some things others can do to improve their campaigns?</p>
<p class="a">
There’s no “do x and you get y result.” Kickstarters is filled with variables. You have to take the perspectives of a third party observer. If you were just randomly going on to Kickstarter looking for something that you are interested in, what would you actually invest in? It is probably going to be the project that is the most polished, that has an appealing video and a really good final prototype that’s is showing proof it is more than concept. And you definitely need to do professional page development and a video. That’s a must. And really do background search on Kickstarter campaigns and see if it really makes sense for you to do a kickstarter. </p>
</li>
<li>
  <p class="q">
What is an important question startups should ask themselves before committing to kickstarter?</p>
<p class="a">
Is this the product area a good area for Kickstarter? Sometimes the answer is no. Some products just don’t do well on Kickstarter for a number of reasons. It is not because they did a poor job. It is just there are some things that are harder to get support on a Kickstarter based fund.</p>  
</li>
  
  </ul>
  
  <img id="end" src="https://communitymeetings.files.wordpress.com/2014/12/circuitscribe_05_gif_arduino.gif" width="500" height="320" align="middle" />
              
            
!

CSS

              
                @import url(https://fonts.googleapis.com/css?family=Lobster|Indie+Flower|Titillium+Web);
body{
  padding: 0% 20% 0% 20%
}

figure{
  position:relative; 
  margin: 150px auto; margin-top:0;
  width:400px;
  height:400px;
}

h2
{
    display:absolute;
  top:136px;
  left:100px;
  font-size:15px;
  font-family: 'Titillium Web';
}

h1
{
  display:absolute;
  top:143px;
  left:100px;
  font-family:Lobster;
  
}

span
{display:inline; font-style: italic;}

#top {position:absolute; z-index:-2;}

h2, h1{position:absolute;}

#intro, li {font-family: 'Titillium Web'; margin-left:60px;margin-right:60px; line-height:30px;}

li{ margin-left: 20px;}

.q {font-family:'Indie Flower'; font-size: 20px; }

intro {text-decoration: underline;}

img{padding:15px;}

#bg {position:fixed; top:0; left:0; z-index:-10;opacity: 0.3; padding:0;}

#end {margin-left:50px;}
              
            
!

JS

              
                
              
            
!
999px

Console