cssAudio - ActiveCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - Activehtmloctocatspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

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>
<!--
Tip 1: To help you and others understand what code you wrote, write comments!
Tip 2: Indent your code for easy reading and editing.  
Tip 3: For background to use in your website, check out: http://wildtextures.com
Tip 4: For images to use in your website, check out: http://images.google.com

<!-- The head includes the title, which is similar to a filename and is used to identify your webpage but is not displayed on the page-->
<head>
    <title> IBM Shoppe</title>
</head>
<!-- Main webpage design defined in the BODY section of html code. -->
  
<body style="font-family: Futura; font-size:15px; color:#ecf0f1; font-weight: lighter">
    <div class="container" style="width: 100%; height:auto">

      <! This is where you change the header background image>
      <div class="header" style="background-image:url('http://www.wildtextures.com/wp-content/uploads/2012/05/wildtextures-raindrops-ripples-1200x800.jpg'); background-size: 900px; height:150px; border: 3px solid black">
          <br>
          <h1 style="text-align: center; font-size: 70px; font-weight: lighter; color:black; margin-top:5px;">IBM Shoppe</h1>
      </div>
      <! This is where you change the side bar>
      <div class="sidebar" style= "background-color:black; height:1200px; width:20%; float:left; border-left: 3px solid black; border-right: 3px solid black">
          <h2 style="font-size:20px; margin: 10px">Products</h2>
          <ol style="list-style-type: 1; margin-left:-10px; line-height:30px; text-decoration: none;">
              <li><a href="#IBM Logo Shirts" style="color:#ecf0f1;">IBM Logo Shirts</a></li>
              <li><a href="#IBM Logo Bags" style="color:#ecf0f1;">IBM Logo Bags</a></li>
  		              </ol>   
       </div> 
<! This is where you change the background on the main part of your page and add a description of services>    
      <div class="main" style="background-color: #ecf0f1; height:1200px; width:78.7%; float:left; border-right: 3px solid black">
      <p style="color: black; font-weight:lighter; font-size:0.9em; margin-left:10%; margin-right:7%;">
        The IBM Shoppe is the official place to buy exclusive IBM merchandise.  We offer a distinct selection of IBM inspired shirts and bags.
      </p>
      <br>
      <h2 style="color: black; text-align:center"><a name="IBM Logo Shirts"> Shirts</a></h2>
        <p style="color: black; text-align:center; font-weight:bold;">Take an Extra 20% Off each item if you buy more than three shirts!	</p>
    	<table align="center" border="1px solid black" bgcolor="black">
     		 <tr>
    <! This is where you begin to insert your images into the table>
        		<td align="center" style="padding:10px">
              <img src="https://lf.staplespromotionalproducts.com/lf?set=scale[400],env[live],output_format[png],sku_number[200190370],sku_dir[200190],view_code[F1]%26call=url[file:san/com/sku.chain]" height="120" width="150">
        		</td>
            		<td align="center" style="padding:10px">
              <img src="https://lf.staplespromotionalproducts.com/lf?set=scale[2300],env[live],output_format[png],sku_number[200205719],sku_dir[200205],view_code[F1]%26call=url[file:san/com/sku.chain]" height="120" width="150">
           </td>
           <td align="center" style="padding:10px">
              <img src="https://lf.staplespromotionalproducts.com/lf?set=scale[2300],env[live],output_format[png],sku_number[200190519],sku_dir[200190],view_code[F1]%26call=url[file:san/com/sku.chain]" height="120" width="150">
           </td>
        </tr>
        <tr>
           <td style="padding: 10px">Eye Bee M Sweatshirt 
             <br><span style="text-decoration:line-through; opacity:.5">WAS $80.00</span>     NOW $29.99 
             </td>
        	 <td style="padding: 10px">IBM FlashSystems T-Shirt 
             <br><span style="text-decoration:line-through; opacity:.5">WAS $30.00</span>     NOW $15.00 
           </td>
        	 <td style="padding: 10px">IBM Smarter Planet T-Shirt
             <br><span style="text-decoration:line-through; opacity:.5">WAS $40.00</span>     NOW $20.00 
           </td>
        </tr>
     </table>
       <h2 style="text-align:center; color: black"><a name="IBM Logo Bags"> Bags </a></h2>
    <table align="center" border="1px solid black" bgcolor="Black">
      <tr>
        		<td align="center" style="padding:10px">
              <img src="http://lf.staplespromotionalproducts.com/lf?set=scale[2300],env[live],output_format[png],sku_number[200190450],sku_dir[200190],view_code[F1]%26call=url[file:san/com/sku.chain]" height="100" width="100">
        		</td>
            <td align="center">
              <img src="http://lf.staplespromotionalproducts.com/lf?set=scale[2300],env[live],output_format[png],sku_number[200189336],sku_dir[200189],view_code[F1]%26call=url[file:san/com/sku.chain]" height="100" width="100">
           </td>
           <td align="center">
          <img src="http://lf.staplespromotionalproducts.com/lf?set=scale[2300],env[live],output_format[png],sku_number[200189354],sku_dir[200189],view_code[F1]%26call=url[file:san/com/sku.chain]" height="100" width=100">
           </td>
        <tr>
          <td style="padding: 10px">
             Drawstring Cinch Pack
             <br><span style="text-decoration:line-through; opacity:.5">$8.00</span> $5.00 
           </td>
           <td style="padding: 10px">
             THINK Canvas Tote  
             <br><span style="text-decoration:line-through; opacity:.5">$20.00</span> $10.00
           </td>
        	 <td style="padding: 10px">Laminated Tote  
             <br><span style="text-decoration:line-through; opacity:.5">$30.00</span> $15.00
           </td>
        </tr>
     </table>
      </div>
  </body>
</html>
            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console