123

Pen Settings

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

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

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

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

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.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <!-- Facebook sharing information tags -->
    <meta property="og:title" content="*|MC:SUBJECT|*">
    <title>*|MC:SUBJECT|*</title>
    <link href="http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,700,600,400"
    rel="stylesheet" type="text/css">
    <style type="text/css">
      /* Client-specific Styles */
      			#outlook a{padding:0;} /* Force Outlook to provide a "view in browser" button. */
      			body{width:100% !important;} .ReadMsgBody{width:100%;} .ExternalClass{width:100%;} /* Force Hotmail to display emails at full width */
      			body{-webkit-text-size-adjust:none;} /* Prevent Webkit platforms from changing default text sizes. */
      
      			/* Reset Styles */
      			body{margin:0; padding:0;}
      			img{border:0; height:auto; line-height:100%; outline:none; text-decoration:none;}
      			table td{border-collapse:collapse;}
      			#backgroundTable{height:100% !important; margin:0; padding:0; width:100% !important;}
    </style>
  </head>
  
  <body leftmargin="0" marginwidth="0" topmargin="0" marginheight="0" offset="0"
  style="-webkit-text-size-adjust: none;margin: 0;padding: 0;background-color: #5bd1b7;width: 100% !important;">
    <center>
      <table border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" id="backgroundTable"
      style="margin: 0;padding: 0;background-color: #5bd1b7;height: 100% !important;width: 100% !important;">
        <tr style="background: #2f2735;">
          <td style="border-collapse: collapse;"></td>
          <td align="center" valign="top" style="border-collapse: collapse;">
            <!-- // Begin Template Preheader \\ -->
            <table border="0" cellpadding="10" cellspacing="0" width="600" id="templatePreheader"
            style="background-color: #2f2735;">
              <tr>
                <td valign="top" class="preheaderContent" style="border-collapse: collapse;padding: 0;display: block;"
                height="215">
                  <img alt="Candor" height="215" src="http://usecandor.com/assets/email/candor-header-f642dc0adf61144ecaebd6a5b124a49d.gif"
                  style="display: block;line-height: 50%;padding:0;margin:0;" width="600" />
                </td>
              </tr>
            </table>
          </td>
          <td style="background: #2f2735;border-collapse: collapse;"></td>
        </tr>
        <tr>
          <td style="background: #2f2735;border-collapse: collapse;height:135px;" height="135">&nbsp;</td>
          <td rowspan="2" align="center" valign="top" width="600" style="padding: 0;border-collapse: collapse;">
            <!-- // End Template Preheader \\ -->
            <table border="0" cellpadding="0" cellspacing="0" width="100%" id="templateContainer"
            style="border: none;background-color: #FFFFFF;">
              <tr>
                <td align="center" valign="top" style="border-collapse: collapse;">
                  <!-- // Begin Template Body \\ -->
                  <table border="0" cellpadding="0" cellspacing="0" width="100%" id="templateBody">
                    <tr>
                      <td valign="top" class="bodyContent" style="border-collapse: collapse;background-color: #FFFFFF;">
                        <!-- // Begin Module: Standard Content \\ -->
                        <table border="0" cellpadding="20" cellspacing="0" width="100%">
                          <tr>
                            <td valign="top" colspan="2" style="padding: 45px 45px 20px;border-collapse: collapse;color: #2f2735;font-family: 'Open Sans', Helvetica, Arial;font-size: 16px;line-height: 150%;text-align: left;">
                              <div style="color: #2f2735;font-family: 'Open Sans', Helvetica, Arial;font-size: 16px;line-height: 150%;text-align: left;">
                                 <h3 style="color: #202020;display: block;font-family: 'Open Sans', Helvetica, Arial;font-size: 22px;font-weight: bold;line-height: 100%;margin-top: 0;margin-right: 0;margin-bottom: 10px;margin-left: 0;text-align: left;">Can I be Frank?</h3>

                                <p>People aren’t candid. I’ve been in so many meetings where the best ideas never
                                  make it to the table. I finally had enough and decided to use my background in
                                  behavioral science to do something about it.</p>
                                <p>As social animals, we are extremely sensitive to the views of others. I designed
                                  Candor to overcome group pressure during brainstorms, allowing our candid, unbiased
                                  views to see the light.</p>
                                <p>When used correctly, Candor can generate more diverse and creative ideas in less
                                  time than traditional brainstorming methods. I hope you find it does that and more.</p>
                                <p>
                                  <a href="http://usecandor.com/" style="color: #f05c49;font-weight: 700;text-decoration: none;">Tell me what you think</a> and thanks for using Candor.</p>
                              </div>
                            </td>
                          </tr>
                          <tr>
                            <td style="padding: 0 0 45px 45px;border-collapse: collapse;color: #2f2735;font-family: 'Open Sans', Helvetica, Arial;font-size: 16px;line-height: 150%;text-align: left;">
                              <img alt="Headshot loran" src="http://usecandor.com/assets/email/headshot-loran-9a3764e47b367ef4fc264063b237b114.gif"
                              />
                            </td>
                            <td style="padding: 0 45px 45px 20px;border-collapse: collapse;color: #2f2735;font-family: 'Open Sans', Helvetica, Arial;font-size: 16px;line-height: 150%;text-align: left;"><strong>Loran Nordgren</strong> 
                              <br><i>Behavioral Strategist and Candor creator,</i> 
                              <br><i>Kellogg School of Management</i>
                            </td>
                          </tr>
                        </table>
                        <!-- // End Module: Standard Content \\ -->
                      </td>
                    </tr>
                  </table>
                  <!-- // End Template Body \\ -->
                </td>
              </tr>
              <tr>
                <td align="center" valign="top" style="border-collapse: collapse;">
                  <!-- // Begin Template Body \\ -->
                  <table border="0" cellpadding="0" cellspacing="0" width="100%">
                    <tr>
                      <td valign="top" class="bodyContent" style="border-collapse: collapse;background-color: #FFFFFF;">
                        <!-- // Begin Module: Standard Content \\ -->
                        <table border="0" cellpadding="20" cellspacing="0" width="100%" style="background: #2f2735;text-align:center;"
                        bgcolor="#2f2735">
                          <tr>
                            <td valign="top" style="color: #ffffff;font-size: 20px;font-weight: 600;text-align: center;border-collapse: collapse;font-family: 'Open Sans', Helvetica, Arial;line-height: 150%;">Generate Ideas
                              <br><span style="font-style:italic;color:#abf2e6;">Privately</span>
                            </td>
                            <td valign="top" style="padding-top: 0 !important;border-collapse: collapse;color: #2f2735;font-family: 'Open Sans', Helvetica, Arial;font-size: 16px;line-height: 150%;text-align: left;">
                              <img alt="Icon bolt" src="http://usecandor.com/assets/email/icon-bolt-8cd5472f2be5ca6cf77de334aa3197cd.gif"
                              />
                            </td>
                            <td valign="top" style="color: #ffffff;font-size: 20px;font-weight: 600;text-align: center;border-collapse: collapse;font-family: 'Open Sans', Helvetica, Arial;line-height: 150%;">Evaluate Ideas
                              <br><span style="font-style:italic;color:#abf2e6;">Collectively</span>
                            </td>
                          </tr>
                          <tr>
                            <td colspan="3" style="padding-top: 0;border-collapse: collapse;color: #2f2735;font-family: 'Open Sans', Helvetica, Arial;font-size: 16px;line-height: 150%;text-align: left;">
                              <h1 style="font-size: 40px;color: #ee8c80;margin-bottom: 20px;margin-top: 0;text-align: center;font-weight: normal;display: block;font-family: 'Open Sans', Helvetica, Arial;line-height: 140%;margin-right: 0;margin-left: 0;">Step-by-step guide<br>to using Candor</h1>
                            </td>
                          </tr>
                        </table>
                        <!-- // End Module: Standard Content \\ -->
                      </td>
                    </tr>
                  </table>
                  <!-- // End Template Body \\ -->
                </td>
              </tr>
              <tr>
                <td align="center" valign="top" style="border-collapse: collapse;">
                  <!-- // Begin Template Body \\ -->
                  <table border="0" cellpadding="0" cellspacing="0" width="100%">
                    <tr>
                      <td valign="top" class="bodyContent bodyOrange" style="padding: 25px 25px 25px 25px;background-color: #f05c49;border-collapse: collapse;"
                      bgcolor="#f05c49">
                        <!-- // Begin Module: Standard Content \\ -->
                        <table border="0" cellpadding="20" cellspacing="0" width="100%" style="background: #f05c49;text-align:left;"
                        bgcolor="#f05c49">
                          <tr>
                            <td colspan="2" style="border-collapse: collapse;color: #f4cec9;font-family: 'Open Sans', Helvetica, Arial;font-size: 14px;line-height: 150%;text-align: left;">
                              	<h1 style="color: #ffffff;margin-bottom: 10px;display: block;font-family: 'Open Sans', Helvetica, Arial;font-size: 36px;font-weight: 400;line-height: 140%;margin-top: 0;margin-right: 0;margin-left: 0;text-align: left;">Before the Meeting</h1>

                            </td>
                          </tr>
                          <tr>
                            <td valign="top" style="color: #ffffff;padding-top: 0;border-collapse: collapse;font-family: 'Open Sans', Helvetica, Arial;font-size: 14px;line-height: 150%;text-align: left;">
                              	<h4 style="margin-top: 20px;color: #ffffff;display: block;font-family: 'Open Sans', Helvetica, Arial;font-size: 18px;font-weight: 600;line-height: 100%;margin-right: 0;margin-bottom: 10px;margin-left: 0;text-align: left; text-transform:uppercase;">1. Invite Your Team</h4>

                              <p style="color:#f4cec9;">Send your question or problem to the members of your brainstorming team.</p>
                            </td>
                            <td valign="top" style="text-align: center;padding-top: 0;border-collapse: collapse;color: #f4cec9;font-family: 'Open Sans', Helvetica, Arial;font-size: 14px;line-height: 150%;"
                            align="center" width="134">
                              <img alt="Share code" src="http://usecandor.com/assets/email/icon-sharecode-b5d510814b8726a833813572003bfd5e.gif"
                              />
                            </td>
                          </tr>
                          <tr>
                            <td valign="top" style="color: #ffffff;border-collapse: collapse;font-family: 'Open Sans', Helvetica, Arial;font-size: 14px;line-height: 150%;text-align: left;">
                              	<h4 style="color: #ffffff;display: block;font-family: 'Open Sans', Helvetica, Arial;font-size: 18px;font-weight: 600;line-height: 100%;margin-top: 0;margin-right: 0;margin-bottom: 10px;margin-left: 0;text-align: left;text-transform:uppercase;">2. Generate Ideas Privately</h4>

                              <p style="color:#f4cec9;">Ask people to generate ideas before the meeting begins or devote the first 5 minutes
                                of the meeting to generating ideas privately.</p>
                            </td>
                            <td valign="top" style="text-align: center;border-collapse: collapse;color: #f4cec9;font-family: 'Open Sans', Helvetica, Arial;font-size: 14px;line-height: 150%;"
                            align="center" width="134">
                              <img alt="Icon lightbulb" src="http://usecandor.com/assets/email/icon-lightbulb-b81493bf2701a40cc10b845b6fe01fb4.gif"
                              />
                            </td>
                          </tr>
                          <tr>
                            <td valign="top" style="color: #ffffff;border-collapse: collapse;font-family: 'Open Sans', Helvetica, Arial;font-size: 14px;line-height: 150%;text-align: left;">
                              	<h4 style="color: #ffffff;display: block;font-family: 'Open Sans', Helvetica, Arial;font-size: 18px;font-weight: 600;line-height: 100%;margin-top: 0;margin-right: 0;margin-bottom: 10px;margin-left: 0;text-align: left;text-transform:uppercase;">3. Collect Submissions</h4>

                              <p style="color:#f4cec9;">Have each individual submit his or her ideas to the session organizer through
                                Candor.</p>
                            </td>
                            <td valign="top" style="text-align: center;border-collapse: collapse;color: #f4cec9;font-family: 'Open Sans', Helvetica, Arial;font-size: 14px;line-height: 150%;"
                            align="center" width="134">
                              <img alt="Icon stack" src="http://usecandor.com/assets/email/icon-stack-fec66b8e27c391f7041f8e0f328e23ca.gif"
                              />
                            </td>
                          </tr>
                        </table>
                        <hr class="hr" style="border: none;height: 2px;background: #f37d6d;margin: 1em 0;">
                        <table border="0" cellpadding="20" cellspacing="0" width="100%" style="background: #f05c49;text-align:left;"
                        bgcolor="#f05c49">
                          <tr>
                            <td colspan="2" style="border-collapse: collapse;color: #f4cec9;font-family: 'Open Sans', Helvetica, Arial;font-size: 14px;line-height: 150%;text-align: left;">
                              	<h1 style="color: #ffffff;margin-bottom: 10px;display: block;font-family: 'Open Sans', Helvetica, Arial;font-size: 36px;font-weight: 400;line-height: 140%;margin-top: 0;margin-right: 0;margin-left: 0;text-align: left;">During the Meeting</h1>

                            </td>
                          </tr>
                          <tr>
                            <td valign="top" style="color: #ffffff;border-collapse: collapse;font-family: 'Open Sans', Helvetica, Arial;font-size: 14px;line-height: 150%;text-align: left;">
                              	<h4 style="color: #ffffff;display: block;font-family: 'Open Sans', Helvetica, Arial;font-size: 18px;font-weight: 600;line-height: 100%;margin-top: 0;margin-right: 0;margin-bottom: 10px;margin-left: 0;text-align: left;text-transform:uppercase;">1. GET all the Ideas on the Table</h4>

                              <p style="color:#f4cec9;">Use the Candor web app to project all the cards. Have each person briefly describe
                                all the ideas they generated. It’s critical that at this stage people aren’t evaluating
                                ideas, they are simply hearing all the ideas.</p>
                            </td>
                            <td valign="top" style="text-align: center;border-collapse: collapse;color: #f4cec9;font-family: 'Open Sans', Helvetica, Arial;font-size: 14px;line-height: 150%;"
                            align="center" width="134">
                              <img alt="Icon presentation" src="http://usecandor.com/assets/email/icon-presentation-a5af5d6dfaa57267d805461705b12648.gif"
                              />
                            </td>
                          </tr>
                          <tr>
                            <td valign="top" style="color: #ffffff;border-collapse: collapse;font-family: 'Open Sans', Helvetica, Arial;font-size: 14px;line-height: 150%;text-align: left;">
                              	<h4 style="color: #ffffff;display: block;font-family: 'Open Sans', Helvetica, Arial;font-size: 18px;font-weight: 600;line-height: 100%;margin-top: 0;margin-right: 0;margin-bottom: 10px;margin-left: 0;text-align: left;text-transform:uppercase;">2. Discuss all the ideas</h4>

                              <p style="color:#f4cec9;">Now open up the discussion — eliminate ideas that don’t stand up to scrutiny,
                                modify existing ideas to make them better, cluster ideas into different categorizes,
                                and add new ideas that emerge during the discussion.</p>
                            </td>
                            <td valign="top" style="text-align: center;border-collapse: collapse;color: #f4cec9;font-family: 'Open Sans', Helvetica, Arial;font-size: 14px;line-height: 150%;"
                            align="center" width="134">
                              <img alt="Icon thoughts" src="http://usecandor.com/assets/email/icon-thoughts-a314b1d731c46777206702596f777b13.gif"
                              />
                            </td>
                          </tr>
                          <tr>
                            <td valign="top" style="color: #ffffff;border-collapse: collapse;font-family: 'Open Sans', Helvetica, Arial;font-size: 14px;line-height: 150%;text-align: left;">
                              	<h4 style="color: #ffffff;display: block;font-family: 'Open Sans', Helvetica, Arial;font-size: 18px;font-weight: 600;line-height: 100%;margin-top: 0;margin-right: 0;margin-bottom: 10px;margin-left: 0;text-align: left;text-transform:uppercase;">3. PUT IT TO A VOTE</h4>

                              <p style="color:#f4cec9;">Use Candor to vote on the ideas. If a clear winner emerges, you can stop there.
                                If a few ideas have strong support, you can now focus your discussion on the most
                                popular ideas before voting again.</p>
                            </td>
                            <td valign="top" style="text-align: center;border-collapse: collapse;color: #f4cec9;font-family: 'Open Sans', Helvetica, Arial;font-size: 14px;line-height: 150%;"
                            align="center" width="134">
                              <img alt="Icon vote" src="http://usecandor.com/assets/email/icon-vote-f4f8f17e4c7d28d282129066984b8b12.gif"
                              />
                            </td>
                          </tr>
                          <tr>
                            <td colspan="2" align="center" style="text-align: center;padding-bottom: 60px;border-collapse: collapse;color: #f4cec9;font-family: 'Open Sans', Helvetica, Arial;font-size: 14px;line-height: 150%;">
                              <img alt="Icon appscreen" src="http://usecandor.com/assets/email/icon-appscreen-d9807d29e0d8dff9875cfb6e86ebfb69.gif"
                              />
                            </td>
                          </tr>
                        </table>
                        <!-- // End Module: Standard Content \\ -->
                      </td>
                    </tr>
                  </table>
                  <!-- // End Template Body \\ -->
                </td>
              </tr>
              <tr>
                <td align="center" valign="top" style="border-collapse: collapse;">
                  <!-- // Begin Template Footer \\ -->
                  <table border="0" cellpadding="10" cellspacing="0" width="600" id="templateFooter"
                  style="background-color: #FFFFFF;border-top: 0;">
                    <tr>
                      <td valign="top" class="footerContent" style="border-collapse: collapse;">
                        <!-- // Begin Module: Standard Footer \\ -->
                        <table border="0" cellpadding="10" cellspacing="0" width="100%" style="padding: 40px 60px 80px">
                          <tr>
                            <td valign="top" width="350" style="border-collapse: collapse;">
                              <div mc:edit="std_footer" style="color: #2f2735;font-family: 'Open Sans', Helvetica, Arial;font-size: 12px;line-height: 125%;text-align: center;">	<em>Copyright &copy; 2017, All rights reserved.</em>

                                <br>
                                <p>You are receiving this because you registered for Candor account through the app
                                  or online at
                                  <a href="usecandor.com" style="color: #2f2735;font-weight: normal;text-decoration: underline;">usecandor.com</a>
                                </p>Our mailing address is:
          <br>                      <br>Loran Nordgren
                                <br>Associate Professor
                                <br>Kellogg School of Management
                                <br>2169 Campus Dr
                                <br>Evanston, IL 60208
                                <br>
                                <a href="mailto:info@usecandor.com" style="color: #2f2735;font-weight: normal;text-decoration: underline;">info@usecandor.com</a>
                                <br>
                                <br>
                              </div>
                            </td>
                          </tr>
                        </table>
                        <!-- // End Module: Standard Footer \\ -->
                      </td>
                    </tr>
                  </table>
                  <!-- // End Template Footer \\ -->
                </td>
              </tr>
            </table>
            <br>
          </td>
          <td style="background: #2f2735;border-collapse: collapse;height:135px;" height="135">&nbsp;</td>
        </tr>
        <tr>
          <td style="border-collapse: collapse;">&nbsp;</td>
          <td style="border-collapse: collapse;">&nbsp;</td>
        </tr>
      </table>
    </center>
   
  </body>

</html>
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.

Console