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

              
                <div class="illustrator">
        
        <div class="book">
            <h2 class="subject">Adobe Illustrator</h2>
            <h3 class="title">The Adobe Illustrator CS3 Wow! Book</h3>
            <p class="author">by Sharon Steuer</p>
            <p class="price">Price:29.99</p>
            <p class="desc">Adobe Illustrator is the indispensable vector drawing tool used by digital artists around the world. As a core component of Adobe Creative Suite CS3, Illustrator CS3 provides those artists with powerful drawing tools, unparalleled typographic controls, and much more.</p>
            <p class="book-link"><a href="https://www.amazon.co.uk">amazon.com</a></p>
        </div>
        
        <div class="book">
            <h3 class="title">Adobe Illustrator CS3 How-tos</h3>
            <p class="author">by David Karlins and Bruce K. Hopkins</p>
            <p class="price">Price:13.49</p>
            <p class="desc">Adobe Illustrator CS3 is more than just the world's most popular and powerful illustration tool: As part of the Adobe's Creative Suite 3, it's a key component of an overall design workflow that lets users work seamlessly among all of their graphics applications to create graphically rich content for print, Web, motion graphics, and mobile devices.</p>
            <p class="book-link"><a href="https://www.amazon.co.uk">amazon.com</a></p>
        </div>
    
    </div> <!--End of Illustrator-->

    <div class="flash">
        <h2 class="subject">Adobe Flash</h2>
        
        <div class="book">
            <h3 class="title">Foundation Flash CS3 for Designers (Foundation)</h3>
            <p class="author">by T Stiller and D Green</p>
            <p class="price">Price:26.59</p>
            <p class="desc">Flash is one of the most engaging and innovative, and versatile technologies available--allowing the creation of pretty much anything from simple slideshows, animated banners and icons and cartoons, to Rich Internet Applications, Interactive videos, and dynamic user interfaces for web sites, kiosks, or DVDs.</p>
            <p class="book-link"><a href="https://www.amazon.co.uk">amazon.com</a></p>
        </div>
        
        <div class="book">
            <h3 class="title">Essential ActionScript 3.0 (Essential)</h3>
            <p class="author">by C Moock</p>
            <p class="price">Price:27.29</p>
            <p class="desc">More than two years in the making, ActionScript 3.0 presents perhaps the most substantial upgrade to Flash's programming language ever. The enhancements to ActionScript's performance, feature set, ease of use, cleanliness, and sophistication are simply staggering.</p>
            <p class="book-link"><a href="https://www.amazon.co.uk">amazon.com</a></p>
        </div>
        
    </div> <!--End of Flash-->

    <div class="css">
        <h2 class="subject">Cascading Style Sheets</h2>
        
        <div class="book">
            <h3 class="title">Transcending CSS: The Fine Art of Web Design</h3>
            <p class="author">by Andy Clarke, Molly E. Holzschlag and Aaron Gustafson</p>
            <p class="price">25.19</p>
            <p class="desc">The Web has changed, and so has the art of creating Web sites. Few visual designers are natural programmers, and as a result, visualizing how to work with markup, CSS and a range of programmatic techniques to create beautiful design is difficult.</p>
            <p class="book-link"><a href="https://www.amazon.co.uk">amazon.com</a></p>
        </div>
        
        <div class="book">
            <h3 class="title">Bulletproof Web Design</h3>
            <p class="author">by Dan Cederholm</p>
            <p class="price">23.19</p>
            <p class="desc">No matter how visually appealing or content-packed a Web site may be, if it's not adaptable to a variety of situations and reaching the widest possible audience, it isn't really succeeding. In Bulletproof Web Design, author and Web designer extraordinaire, Dan Cederholm outlines standards-based strategies for building designs that provide flexibility, readability, and user control--key components of every sucessful site.</p>
            <p class="book-link"><a href="https://www.amazon.co.uk">amazon.com</a></p>
        </div>
        
        <div class="wrapper">
    <div class="photoshop">
        <div class="book">
          <h1 class="subject">Adobe Photoshop</h1>      
        <h2 Layers: The Complete Guide to Adobe Photoshop's Most Powerful Feature</h2>
        <p class="author">by Matt Kloskowski</p>
        <p class="price">price:14.48</p>
        <p class="desc">When Photoshop guru Matt Kloskowski was asked why he wrote this book, he replied, "It's simple: I wanted to write the Photoshop book that I wished was around when I was learning Photoshop".
amazon.com</p>
        <p class="link">amazon.com</p>  
        </div>
        
       <div class="book">
        <h2 Adobe Photoshop CS3 Classroom in a Book</h2>
        <p class="author"> by Adobe Creative Team</p>
        <p class="price"> Price:27.99</p>
        <p class="desc">This thorough, self-paced guide to Adobe Photoshop CS3--written by the experts at Adobe Systems' is ideal for beginning users who want to learn key Photoshop concepts and techniques, while readers who already have some experience with Photoshop can use this book to learn Photoshop CS3's more advanced features and newest tools.
amazon.com</p>
<p class="link">amazon.com</p>
        
    
              
            
!

CSS

              
                
.photoshop {
    background-color:#4274b3;
}


.illustrator { 
    background-color:#e4a040;
}

.flash {
    background-color:#92262a;
}

.css {
    background-color:#97a33e;
}

.subject {
    color: #ffffff;
}

.title {
    color: white;
    fomt-style: italic;
}

.price {
    color: white;
    font-weight: bold; 
}
              
            
!

JS

              
                
              
            
!
999px

Console