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

              
                <html>

<body>
  <!-- HEADER -->
  
    <h2>
          <table width="100%" height="60px" style="background-color:white">
            <tr align="center">
              <td width="20%" align="right">
                <table>
                  <tr>
                    <td width="50px"><svg viewBox="0 0 32.148 27.396" height="30px"><path d="M3.172 17.184s.313-1.268-.74-2.367c-1.055-1.1-2.38-1.106-2.38-1.106s-.33 1.49.697 2.563c1.026 1.07 2.422.91 2.422.91zM5.5 16.953s1.233-.67 1.46-2.138c.226-1.467-.9-2.498-.9-2.498s-1.08.768-1.314 2.274c-.23 1.508.754 2.363.754 2.363zM7.354 20.652s1.136-.827 1.17-2.31c.03-1.485-1.222-2.36-1.222-2.36s-.97.9-1.004 2.425 1.056 2.245 1.056 2.245zM11.076 20.378c-.108-1.48-1.436-2.234-1.436-2.234s-.882.988-.772 2.51c.11 1.52 1.262 2.134 1.262 2.134s1.053-.93.946-2.41zM13.617 24.633s.743-1.192.214-2.58-2.018-1.728-2.018-1.728-.56 1.203-.02 2.627c.546 1.423 1.825 1.68 1.825 1.68zM3.685 13.936s.966-.88.7-2.38c-.268-1.498-1.367-2.24-1.367-2.24s-1.1 1.057-.84 2.52c.26 1.46 1.507 2.1 1.507 2.1zM4.444 20.06s-.074-1.304-1.404-2.044c-1.333-.74-2.602-.356-2.602-.356s.124 1.522 1.422 2.243c1.3.72 2.584.157 2.584.157zM6.69 22.593s-.363-1.255-1.824-1.68c-1.464-.427-2.616.23-2.616.23s.46 1.455 1.886 1.87c1.426.416 2.553-.42 2.553-.42zM9.2 24.397s-.725-1.087-2.247-1.05c-1.524.038-2.424 1.01-2.424 1.01s.88 1.25 2.362 1.214c1.486-.034 2.307-1.173 2.307-1.173zM10.27 25.133c-1.507.22-2.283 1.294-2.283 1.294s1.02 1.136 2.49.923c1.472-.214 2.15-1.443 2.15-1.443s-.848-.992-2.356-.774z"/><path d="M4.182 14.68l-.727-.028c-.002.08-.183 7.955 11.7 11.505l.208-.696C4.05 22.08 4.17 14.98 4.183 14.68zM28.977 17.204s1.396.16 2.423-.912c1.028-1.072.698-2.562.698-2.562s-1.326.006-2.382 1.106c-1.053 1.1-.74 2.368-.74 2.368zM25.19 14.836c.225 1.47 1.458 2.138 1.458 2.138s.985-.855.755-2.36c-.233-1.508-1.313-2.275-1.313-2.275s-1.127 1.03-.9 2.496zM24.846 16.003s-1.25.875-1.22 2.36c.032 1.482 1.168 2.31 1.168 2.31s1.09-.722 1.056-2.245-1.004-2.425-1.004-2.425zM21.072 20.398c-.106 1.48.946 2.41.946 2.41s1.15-.615 1.262-2.136c.11-1.52-.772-2.51-.772-2.51s-1.327.756-1.436 2.236zM18.317 22.073c-.53 1.388.214 2.58.214 2.58s1.28-.258 1.824-1.68c.542-1.425-.02-2.628-.02-2.628s-1.487.34-2.017 1.728zM28.464 13.956s1.248-.64 1.508-2.1c.26-1.464-.84-2.522-.84-2.522s-1.1.743-1.367 2.242c-.267 1.5.7 2.38.7 2.38zM29.108 18.036c-1.33.74-1.404 2.044-1.404 2.044s1.285.564 2.584-.157c1.298-.72 1.422-2.243 1.422-2.243s-1.27-.383-2.602.356zM27.282 20.933c-1.46.426-1.823 1.68-1.823 1.68s1.127.837 2.553.422c1.425-.415 1.886-1.87 1.886-1.87s-1.154-.658-2.618-.232zM25.195 23.368c-1.522-.037-2.246 1.05-2.246 1.05s.82 1.14 2.306 1.174c1.483.036 2.363-1.213 2.363-1.213s-.9-.974-2.425-1.012zM21.877 25.153c-1.508-.218-2.355.773-2.355.773s.678 1.23 2.148 1.443c1.47.212 2.49-.924 2.49-.924s-.775-1.073-2.283-1.293z"/><path d="M28.693 14.672l-.727.03c.012.3.133 7.398-11.182 10.778l.208.696c11.884-3.55 11.703-11.424 11.7-11.504zM21.77 17.838l-.824-6.72 4.498-4.57-6.447-.862-2.92-5.658V0L13.15 5.665l-6.446.862 4.498 4.57-.824 6.72 5.694-3.095v.018z"/></svg></td>
                    <td>Made In The USA</td>
                  </tr>
                </table>
              </td>
              <td width="20%">
                <table>
                  <tr>
                    <td width="43px"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 494.158 494.158" height="35px"><path d="M405.442 452.373l-58.24-165.418c-6.055 1.895-12.315 3.218-18.83 3.218a62.56 62.56 0 0 1-11.126-.987 62.907 62.907 0 0 1-24.612 32.975l-26.6 75.51L298.557 490a6.242 6.242 0 0 0 5.862 4.158c2.618.018 4.962-1.62 5.878-4.092l22.006-60.362a6.177 6.177 0 0 1 3.757-3.74 6.238 6.238 0 0 1 5.297.544l54.985 33.263c2.265 1.35 5.12 1.16 7.16-.502a6.23 6.23 0 0 0 1.94-6.895zM174.833 320.147a63.31 63.31 0 0 1-30.565-7.89c-.9-.5-1.684-1.116-2.55-1.646L105.406 413.7c-.87 2.472-.08 5.232 1.958 6.894a6.207 6.207 0 0 0 7.143.498l54.983-33.254a6.324 6.324 0 0 1 3.242-.9 6.208 6.208 0 0 1 5.828 4.095l21.99 60.36a6.233 6.233 0 0 0 5.86 4.095h.034a6.253 6.253 0 0 0 5.845-4.157l41.753-118.564c-17.74-.856-34.24-8.9-45.498-22.353-10.015 6.33-21.653 9.734-33.712 9.734zM364.172 119.262a22.436 22.436 0 0 1-14.432-13.396 22.433 22.433 0 0 1 1.713-19.603l.018-.025A30.3 30.3 0 0 0 325.5 40.285c-4.013 0-8.076.796-11.93 2.45a22.348 22.348 0 0 1-8.813 1.813 22.376 22.376 0 0 1-22.12-18.92l-.02-.022A30.3 30.3 0 0 0 252.66 0a30.298 30.298 0 0 0-27.032 16.64 22.403 22.403 0 0 1-19.986 12.294 22.42 22.42 0 0 1-14.722-5.514 30.348 30.348 0 0 0-19.94-7.472 30.228 30.228 0 0 0-15.62 4.342c-11.27 6.783-16.868 20.06-13.87 32.896a22.36 22.36 0 0 1-4.38 19.175 22.427 22.427 0 0 1-17.44 8.315h-.414c-.193 0-.387-.006-.575-.006-12.923 0-24.45 8.208-28.675 20.466a30.322 30.322 0 0 0 10.5 34.104l.033.026a22.318 22.318 0 0 1 8.958 17.505 22.39 22.39 0 0 1-8.332 17.844c-10.243 8.27-13.965 22.186-9.247 34.46 4.513 11.75 15.8 19.424 28.29 19.424a28.5 28.5 0 0 0 1.7-.048c.416-.023.814-.03 1.22-.03a22.41 22.41 0 0 1 16.9 7.69c4.53 5.208 6.34 12.592 5.02 19.375-2.51 12.91 3.618 25.64 15.132 32.005a30.174 30.174 0 0 0 14.652 3.778c7.53 0 14.995-2.808 20.76-8.218a22.368 22.368 0 0 1 15.314-6.06c1.173 0 2.327.088 3.5.272a22.32 22.32 0 0 1 16.1 11.285l.017.022a30.362 30.362 0 0 0 26.536 15.65c1.928 0 3.87-.184 5.81-.56 12.907-2.53 22.718-13.09 24.294-26.16a22.403 22.403 0 0 1 10.67-16.535 22.383 22.383 0 0 1 19.605-1.71l.028.01a30.347 30.347 0 0 0 10.904 2.032c8.957 0 17.693-3.99 23.565-11.254 8.287-10.235 9.01-24.627 1.8-35.665a22.34 22.34 0 0 1-2.442-19.52 22.41 22.41 0 0 1 13.92-13.91 30.315 30.315 0 0 0 20.487-29.234c-.245-13.156-8.945-24.648-21.528-28.452zM237.057 242.328c-50.854 0-92.242-41.372-92.242-92.228 0-50.86 41.39-92.236 92.242-92.236 50.858 0 92.23 41.377 92.23 92.236 0 50.856-41.372 92.228-92.23 92.228z"/><path d="M237.057 90.742c-32.734 0-59.367 26.625-59.367 59.358 0 32.725 26.633 59.35 59.367 59.35s59.35-26.625 59.35-59.35c0-32.733-26.616-59.358-59.35-59.358zM284.572"/></svg></td>
                    <td>Professional Quality</td>
                  </tr>
                </table>
              </td>
              <td width="20%" align="left">
                <table>
                  <tr>
                    <td width="43px"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" height="35px"><path d="M17.913 51.46c.213 0 .44-.015.656-.02.132 2.255.303 4.517.453 6.788.14 2.098 3.426 2.182 3.286.067-.158-2.367-.343-4.726-.487-7.08a44.145 44.145 0 0 0 3.89-.64C31.316 49.4 35.098 47 37 43.444c.193.044.38.092.577.133 1.063.223 2.092.39 3.102.53a47.46 47.46 0 0 0 .15-2.5c.03-.84.042-1.68.033-2.52-.05-4.53-.62-9.087-1.298-13.596-.142-.945.45-1.49 1.17-1.618-.19.33-.263.743-.13 1.217 1.322 4.7 1.623 9.424 1.533 14.174a99.34 99.34 0 0 1-.08 2.496c-.036.834-.08 1.67-.132 2.504-.143 2.338-.327 4.68-.483 7.032-.052.79.374 1.273.935 1.46.94.31 2.264-.212 2.35-1.526.15-2.267.32-4.524.454-6.774.064 0 .13.006.194.006 7.513 0 12.834-3.062 14.596-8.4 2.872-8.7-4.345-21.043-18.385-31.447l-1.795-1.33L38.27 4.92c-.165.176-4.087 4.408-7.645 10.02-.47.74-.9 1.463-1.312 2.18-2.31-3.06-4.18-5.08-4.294-5.2l-1.524-1.636-1.795 1.33C7.66 22.018.445 34.36 3.317 43.06c1.762 5.338 7.083 8.4 14.597 8.4zm4.95-34.434a71.394 71.394 0 0 1 3.944 5.126c-1.973 4.783-2.427 8.925-1.338 12.363 1.005 3.175 3.237 5.606 6.656 7.266-1.36 1.834-3.846 3.147-7.442 3.902-1.06.223-2.08.39-3.07.517-.088-4.73.217-9.433 1.533-14.112.574-2.042-2.577-2.976-3.15-.938-1.43 5.077-1.743 10.17-1.638 15.296-.148.003-.303.014-.447.014-3.066 0-8.422-.646-9.85-4.97-2.314-7.01 5.76-17.267 14.8-24.464z"/></svg></td>
                    <td>Vegan Friendly</td>
                  </tr>
                </table>
              </td>
            </tr>
          </table>
        </h2>
  
  <header>
    <h1 class="text-center">Bright Smiles Bring Bright Futures</h1>
    <h3 class="text-center">With every purchase, we are donating <b>10%</b> of all proceeds to <b>DonorsChoose.org</b>. We don't just believe in creating bright smiles, we also believe in creating bright futures!</h3>
  </header>

  <!-- SERVICES section -->
  <section class="services">

    <div class="container">

      <pre><h5 class="row">
      <img src="https://i.pinimg.com/originals/26/13/cf/2613cf7a899f3cc9727902c40860d056.png" style="height: 110%; width: 140%; left: -800px; top: -200px">
      
Due to overwhelming requests, <b>reNUE's</b> professional <b>Smartphone Whitening System</b> is now being offered directly to consumers. This professional teeth whitening system uses bright LED technology and boasts 16 individual lights, 8 separately dedicated to each row of teeth. This patented light system has an unmatched 10,000 hour lifespan guarantee. You can expect to have a brighter smile after your first 30 minute session. What makes it convenient, easy to use, and great for traveling? It's powered by your smartphone!

<b>What's In The Box?</b>
<b>•</b>   1 Smartphone USB LED light tray
<b>•</b>   3 Whitening gel syringes
<b>•</b>   1 Reusable applicator tip
<b>•</b>   1 Dust-free case
<b>•</b>   1 Shade guide
<b>•</b>   1 Set of instructions

<b>For Best Results</b>
30 minute sessions are recommended for 3 – 7 consecutive days.

<b>Expectations</b>
Results vary by patient. Age, oral health, hygiene, genetics, and starting shade affects results. Crowns, veneers, fillings, and dentures will not change shade.

<b>Precautions</b>
Avoid skin and eye contact. If eye contact with gel occurs, flush with water for at least 15 minutes. If skin contact occurs, rinse thoroughly with water. Avoid contact with gums and soft tissue. Do not swallow. If ingested, contact a poison control center. Keep out of reach of children. Do not use if you are pregnant or breastfeeding. If you are under the age of 18, ask for parental consent.

<b>Sensitivity</b>
During or after a whitening treatment, sensitivity may occur with some people but it will go away. Those who have existing sensitivity, recession, exposed dentin, exposed root surfaces, recently cracked teeth, open cavities, leaking fillings, or other dental conditions that allow penetration of the gel into the tooth are more susceptible to sensitivity.

<b>After Care</b>
Drink plenty of water to rehydrate your teeth and make sure to continue good oral hygiene.</h5>
  </pre>
    </div>
  </section>

  <!-- ABOUT section -->
  <section class="about">
    <div class="container">
      <div class="row">
        <div id="wrapper">
          <a role="button" href="https://pay.ebay.com/rxo?action=create&rypsvc=true&pagename=ryp&TransactionId=-1&item=263905992876" class="btn btn-default btn-lg" block-align="center">Buy It Now</a>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-xs-12">
      </div>
    </div>
    </div>
  </section>
</body>

</html>
              
            
!

CSS

              
                @import url(https://fonts.googleapis.com/css?family=Alegreya+Sans:400, 600, 700);


/**
 * RESET Styles
 *
 */

body {
	font-size: 16px !important;
  background-image: linear-gradient(#63A92C, #00D0FF);
}

h1, h2, h3, h4, h5, a, p {
	font-family: 'Alegreya Sans', sans-serif !important;
}

h1 {
  padding-top:60px;
}

h2 {
  color: #63A92C !important;
  font-size: 20px;
  fill: #63A92C;
  valign: middle;
  margin-top: 0px;
  position: fixed;
  width: 100%;
  top: 0;
  box-shadow: 0px 5px 10px 0px rgba(000, 000, 000, 0.3);
}

h5 {
  font-size: 22px !important;
  padding: 60px;
  margin-top: -180px !important;
  margin-bottom: -60px !important;
  color: #555;
  font-weight: 400;
  line-height: 1.2;
  flex-wrap: wrap !important;
  overflow-x: hidden;
}

pre {
  white-space: pre-wrap;
  word-break: keep-all;
  border: 2px solid #FFF !important;
}


/**
 * HEADER styles
 *
 */

header {
	padding: 60px;
  padding-bottom: 60px;
  color: white;
}

header h1, 
header h2, 
header h3,

footer h4 {
	color: white;
}

header h1 {
	font-weight: 600;
  letter-spacing: 1px;
}

header h3 {
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: 0.5px;
}

footer h4 {
	font-weight: 600;
}


/**
* CONTAINER FOR CENTERED BUTTON
*
*/

#wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  position:relative;
  width: 200px;
  margin: -20px -100px;
  top:50%; 
  left:50%;
}


/**
 * SERVICES styles
 *
 */

.services .row {
	background: #FFF;
	//border: 1px solid #999;
}

.services .services-info {
	margin: 0 0 30px;
	padding: 10px;
	//border: 1px solid #9b9357;
	border-radius: 3px;
}

.services i {
	color: #5a5533;
}

.services a {
	color: black;
	padding: 3px;
}

.services a:hover {
	text-decoration: none;
  color: white;
}


/**
 * ABOUT styles
 *
 */

 .about .row:first-child {
	margin-top: 30px;
	//border-bottom: 1px solid #c4be95;
	padding: 10px;
}

.about h3, 
.about a {
	margin: 10px 0;
  border: 0px;
  border-radius: 4px !important;
}

.about a {
	display: block;
	margin-right: auto;
	margin-left: auto;
}

.about .row:last-child {
	margin-top: 20px;
	margin-bottom: 20px;
}

.about .row:last-child p {
	font-size: 1.3em;
	margin: 0;
	padding: 0px 5px 5px;
	font-weight: 300;
}


/**
 * MEDIA QUERIES styles
 *
 */

@media only screen and (min-width: 641px) {

	header {
    margin: auto;
    width: 60%;
	}
  
	.services .row {
		margin-top: -70px;
	} 

	.about a {
		width: 100%;
	}
    
}

@media only screen and (min-width: 1200px) {

  .services .services-info {
    margin: 30px 0;
  }
  
}


              
            
!

JS

              
                
              
            
!
999px

Console