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>
<html ⚡>
  <meta charset="utf-8">
  <!-- Add the AMP project boilerplate JS -->
  <script async src="https://cdn.ampproject.org/v0.js"></script>
    <script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script></script>
  <script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>
  <!-- Add canonical URL, even if the site is entirely AMP --> 
  <link rel="canonical" href="https://codepen.io/Stefany93/live/cdf060ecd1fac62b91ce43a6a0b87c06">
  <!-- Scale responsiveness -->
 <script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>

<script async custom-element="amp-video" src="https://cdn.ampproject.org/v0/amp-video-0.1.js"></script>

<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
  <!-- Boilerplate CSS  -->
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
  <!-- Custom CSS --> 
  <style amp-custom>
    .label{font-size:.875rem;font-weight:700;display:block;margin-bottom:.5rem}.input{font-family:inherit;font-size:inherit;display:block;width:100%;height:2.5rem;padding:.5rem;margin-bottom:1rem;border:1px solid #ccc;border-radius:3px}.select{font-family:inherit;font-size:inherit;display:block;width:100%;height:2.5rem;padding:.5rem;margin-bottom:1rem;border:1px solid #ccc;border-radius:3px}.textarea{font-family:inherit;font-size:inherit;display:block;width:100%;padding:.5rem;margin-bottom:1rem;border:1px solid #ccc;border-radius:3px}.btn{font-family:inherit;font-size:inherit;font-weight:700;text-decoration:none;cursor:pointer;display:inline-block;line-height:1.125rem;padding:.5rem 1rem;margin:0;height:auto;border:1px solid transparent;vertical-align:middle;-webkit-appearance:none;color:inherit;background-color:transparent}.btn:hover{text-decoration:none}.btn:focus{outline:0;border-color:rgba(0,0,0,.125);box-shadow:0 0 0 3px rgba(0,0,0,.25)}::-moz-focus-inner{border:0;padding:0}.btn-small{padding:.25rem .5rem}.btn-big{padding:1rem 1.25rem}.btn-narrow{padding-left:.5rem;padding-right:.5rem}.btn-primary{color:#fff;background-color:#940000;border-radius:3px}.btn-primary:hover{box-shadow:inset 0 0 0 20rem rgba(0,0,0,.0625)}.btn-primary:active{box-shadow:inset 0 0 0 20rem rgba(0,0,0,.125),inset 0 3px 4px 0 rgba(0,0,0,.25),0 0 1px rgba(0,0,0,.125)}.btn-primary.is-disabled,.btn-primary:disabled{opacity:.5}.h00{font-size:4rem}.h0{font-size:3rem}.h1,h1{font-size:2rem}.h2,h2{font-size:1.5rem}.h3,h3{font-size:1.25rem}.h4,h4{font-size:1rem}.h5,h5{font-size:.875rem}.h6,h6{font-size:.75rem}.font-family-inherit{font-family:inherit}.font-size-inherit{font-size:inherit}.text-decoration-none{text-decoration:none}.bold{font-weight:700}.regular{font-weight:400}.italic{font-style:italic}.caps{text-transform:uppercase;letter-spacing:.2em}.left-align{text-align:left}.center{text-align:center}.right-align{text-align:right}.justify{text-align:justify}.nowrap{white-space:nowrap}.break-word{word-wrap:break-word}.line-height-1{line-height:1}.line-height-2{line-height:1.125}.line-height-3{line-height:1.25}.line-height-4{line-height:1.5}.list-style-none{list-style:none}.underline{text-decoration:underline}.truncate{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.list-reset{list-style:none;padding-left:0}.inline{display:inline}.block{display:block}.inline-block{display:inline-block}.table{display:table}.table-cell{display:table-cell}.overflow-hidden{overflow:hidden}.overflow-scroll{overflow:scroll}.overflow-auto{overflow:auto}.clearfix:after,.clearfix:before{content:" ";display:table}.clearfix:after{clear:both}.left{float:left}.right{float:right}.fit{max-width:100%}.max-width-1{max-width:24rem}.max-width-2{max-width:32rem}.max-width-3{max-width:48rem}.max-width-4{max-width:64rem}.border-box{box-sizing:border-box}.align-baseline{vertical-align:baseline}.align-top{vertical-align:top}.align-middle{vertical-align:middle}.align-bottom{vertical-align:bottom}.m0{margin:0}.mt0{margin-top:0}.mr0{margin-right:0}.mb0{margin-bottom:0}.ml0{margin-left:0}.mx0{margin-left:0;margin-right:0}.my0{margin-top:0;margin-bottom:0}.m1{margin:.5rem}.mt1{margin-top:.5rem}.mr1{margin-right:.5rem}.mb1{margin-bottom:.5rem}.ml1{margin-left:.5rem}.mx1{margin-left:.5rem;margin-right:.5rem}.my1{margin-top:.5rem;margin-bottom:.5rem}.m2{margin:1rem}.mt2{margin-top:1rem}.mr2{margin-right:1rem}.mb2{margin-bottom:1rem}.ml2{margin-left:1rem}.mx2{margin-left:1rem;margin-right:1rem}.my2{margin-top:1rem;margin-bottom:1rem}.m3{margin:2rem}.mt3{margin-top:2rem}.mr3{margin-right:2rem}.mb3{margin-bottom:2rem}.ml3{margin-left:2rem}.mx3{margin-left:2rem;margin-right:2rem}.my3{margin-top:2rem;margin-bottom:2rem}.m4{margin:4rem}.mt4{margin-top:4rem}.mr4{margin-right:4rem}.mb4{margin-bottom:4rem}.ml4{margin-left:4rem}.mx4{margin-left:4rem;margin-right:4rem}.my4{margin-top:4rem;margin-bottom:4rem}.mxn1{margin-left:-.5rem;margin-left:calc(.5rem * -1);margin-right:-.5rem;margin-right:calc(.5rem * -1)}.mxn2{margin-left:-1rem;margin-left:calc(1rem * -1);margin-right:-1rem;margin-right:calc(1rem * -1)}.mxn3{margin-left:-2rem;margin-left:calc(2rem * -1);margin-right:-2rem;margin-right:calc(2rem * -1)}.mxn4{margin-left:-4rem;margin-left:calc(4rem * -1);margin-right:-4rem;margin-right:calc(4rem * -1)}.m-auto{margin:auto}.mt-auto{margin-top:auto}.mr-auto{margin-right:auto}.mb-auto{margin-bottom:auto}.ml-auto{margin-left:auto}.mx-auto{margin-left:auto;margin-right:auto}.my-auto{margin-top:auto;margin-bottom:auto}.p0{padding:0}.pt0{padding-top:0}.pr0{padding-right:0}.pb0{padding-bottom:0}.pl0{padding-left:0}.px0{padding-left:0;padding-right:0}.py0{padding-top:0;padding-bottom:0}.p1{padding:.5rem}.pt1{padding-top:.5rem}.pr1{padding-right:.5rem}.pb1{padding-bottom:.5rem}.pl1{padding-left:.5rem}.py1{padding-top:.5rem;padding-bottom:.5rem}.px1{padding-left:.5rem;padding-right:.5rem}.p2{padding:1rem}.pt2{padding-top:1rem}.pr2{padding-right:1rem}.pb2{padding-bottom:1rem}.pl2{padding-left:1rem}.py2{padding-top:1rem;padding-bottom:1rem}.px2{padding-left:1rem;padding-right:1rem}.p3{padding:2rem}.pt3{padding-top:2rem}.pr3{padding-right:2rem}.pb3{padding-bottom:2rem}.pl3{padding-left:2rem}.py3{padding-top:2rem;padding-bottom:2rem}.px3{padding-left:2rem;padding-right:2rem}.p4{padding:4rem}.pt4{padding-top:4rem}.pr4{padding-right:4rem}.pb4{padding-bottom:4rem}.pl4{padding-left:4rem}.py4{padding-top:4rem;padding-bottom:4rem}.px4{padding-left:4rem;padding-right:4rem}.col{float:left;box-sizing:border-box}.col-right{float:right;box-sizing:border-box}.col-1{width:8.33333%}.col-2{width:16.66667%}.col-3{width:25%}.col-4{width:33.33333%}.col-5{width:41.66667%}.col-6{width:50%}.col-7{width:58.33333%}.col-8{width:66.66667%}.col-9{width:75%}.col-10{width:83.33333%}.col-11{width:91.66667%}.col-12{width:100%}@media (min-width:40em){.sm-col{float:left;box-sizing:border-box}.sm-col-right{float:right;box-sizing:border-box}.sm-col-1{width:8.33333%}.sm-col-2{width:16.66667%}.sm-col-3{width:25%}.sm-col-4{width:33.33333%}.sm-col-5{width:41.66667%}.sm-col-6{width:50%}.sm-col-7{width:58.33333%}.sm-col-8{width:66.66667%}.sm-col-9{width:75%}.sm-col-10{width:83.33333%}.sm-col-11{width:91.66667%}.sm-col-12{width:100%}}@media (min-width:52em){.md-col{float:left;box-sizing:border-box}.md-col-right{float:right;box-sizing:border-box}.md-col-1{width:8.33333%}.md-col-2{width:16.66667%}.md-col-3{width:25%}.md-col-4{width:33.33333%}.md-col-5{width:41.66667%}.md-col-6{width:50%}.md-col-7{width:58.33333%}.md-col-8{width:66.66667%}.md-col-9{width:75%}.md-col-10{width:83.33333%}.md-col-11{width:91.66667%}.md-col-12{width:100%}}@media (min-width:64em){.lg-col{float:left;box-sizing:border-box}.lg-col-right{float:right;box-sizing:border-box}.lg-col-1{width:8.33333%}.lg-col-2{width:16.66667%}.lg-col-3{width:25%}.lg-col-4{width:33.33333%}.lg-col-5{width:41.66667%}.lg-col-6{width:50%}.lg-col-7{width:58.33333%}.lg-col-8{width:66.66667%}.lg-col-9{width:75%}.lg-col-10{width:83.33333%}.lg-col-11{width:91.66667%}.lg-col-12{width:100%}}.flex{display:flex}@media (min-width:40em){.sm-flex{display:flex}}@media (min-width:52em){.md-flex{display:flex}}@media (min-width:64em){.lg-flex{display:flex}}.flex-column{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-start{align-items:flex-start}.items-end{align-items:flex-end}.items-center{align-items:center}.items-baseline{align-items:baseline}.items-stretch{align-items:stretch}.self-start{align-self:flex-start}.self-end{align-self:flex-end}.self-center{align-self:center}.self-baseline{align-self:baseline}.self-stretch{align-self:stretch}.justify-start{justify-content:flex-start}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.justify-around{justify-content:space-around}.justify-evenly{justify-content:space-evenly}.content-start{align-content:flex-start}.content-end{align-content:flex-end}.content-center{align-content:center}.content-between{align-content:space-between}.content-around{align-content:space-around}.content-stretch{align-content:stretch}.flex-auto{flex:1 1 auto;min-width:0;min-height:0}.flex-none{flex:none}.order-0{order:0}.order-1{order:1}.order-2{order:2}.order-3{order:3}.order-last{order:99999}.relative{position:relative}.absolute{position:absolute}.fixed{position:fixed}.top-0{top:0}.right-0{right:0}.bottom-0{bottom:0}.left-0{left:0}.z1{z-index:1}.z2{z-index:2}.z3{z-index:3}.z4{z-index:4}.border{border-style:solid;border-width:1px}.border-top{border-top-style:solid;border-top-width:1px}.border-right{border-right-style:solid;border-right-width:1px}.border-bottom{border-bottom-style:solid;border-bottom-width:1px}.border-left{border-left-style:solid;border-left-width:1px}.border-none{border:0}.rounded{border-radius:3px}.circle{border-radius:50%}.rounded-top{border-radius:3px 3px 0 0}.rounded-right{border-radius:0 3px 3px 0}.rounded-bottom{border-radius:0 0 3px 3px}.rounded-left{border-radius:3px 0 0 3px}.not-rounded{border-radius:0}.hide{position:absolute;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px)}@media (max-width:40em){.xs-hide{display:none}}@media (min-width:40em) and (max-width:52em){.sm-hide{display:none}}@media (min-width:52em) and (max-width:64em){.md-hide{display:none}}@media (min-width:64em){.lg-hide{display:none}}.display-none{display:none}@media (min-width:40em){.sm-m0{margin:0}.sm-mt0{margin-top:0}.sm-mr0{margin-right:0}.sm-mb0{margin-bottom:0}.sm-ml0{margin-left:0}.sm-mx0{margin-left:0;margin-right:0}.sm-my0{margin-top:0;margin-bottom:0}.sm-m1{margin:.5rem}.sm-mt1{margin-top:.5rem}.sm-mr1{margin-right:.5rem}.sm-mb1{margin-bottom:.5rem}.sm-ml1{margin-left:.5rem}.sm-mx1{margin-left:.5rem;margin-right:.5rem}.sm-my1{margin-top:.5rem;margin-bottom:.5rem}.sm-m2{margin:1rem}.sm-mt2{margin-top:1rem}.sm-mr2{margin-right:1rem}.sm-mb2{margin-bottom:1rem}.sm-ml2{margin-left:1rem}.sm-mx2{margin-left:1rem;margin-right:1rem}.sm-my2{margin-top:1rem;margin-bottom:1rem}.sm-m3{margin:2rem}.sm-mt3{margin-top:2rem}.sm-mr3{margin-right:2rem}.sm-mb3{margin-bottom:2rem}.sm-ml3{margin-left:2rem}.sm-mx3{margin-left:2rem;margin-right:2rem}.sm-my3{margin-top:2rem;margin-bottom:2rem}.sm-m4{margin:4rem}.sm-mt4{margin-top:4rem}.sm-mr4{margin-right:4rem}.sm-mb4{margin-bottom:4rem}.sm-ml4{margin-left:4rem}.sm-mx4{margin-left:4rem;margin-right:4rem}.sm-my4{margin-top:4rem;margin-bottom:4rem}.sm-mxn1{margin-left:-.5rem;margin-right:-.5rem}.sm-mxn2{margin-left:-1rem;margin-right:-1rem}.sm-mxn3{margin-left:-2rem;margin-right:-2rem}.sm-mxn4{margin-left:-4rem;margin-right:-4rem}.sm-ml-auto{margin-left:auto}.sm-mr-auto{margin-right:auto}.sm-mx-auto{margin-left:auto;margin-right:auto}}@media (min-width:52em){.md-m0{margin:0}.md-mt0{margin-top:0}.md-mr0{margin-right:0}.md-mb0{margin-bottom:0}.md-ml0{margin-left:0}.md-mx0{margin-left:0;margin-right:0}.md-my0{margin-top:0;margin-bottom:0}.md-m1{margin:.5rem}.md-mt1{margin-top:.5rem}.md-mr1{margin-right:.5rem}.md-mb1{margin-bottom:.5rem}.md-ml1{margin-left:.5rem}.md-mx1{margin-left:.5rem;margin-right:.5rem}.md-my1{margin-top:.5rem;margin-bottom:.5rem}.md-m2{margin:1rem}.md-mt2{margin-top:1rem}.md-mr2{margin-right:1rem}.md-mb2{margin-bottom:1rem}.md-ml2{margin-left:1rem}.md-mx2{margin-left:1rem;margin-right:1rem}.md-my2{margin-top:1rem;margin-bottom:1rem}.md-m3{margin:2rem}.md-mt3{margin-top:2rem}.md-mr3{margin-right:2rem}.md-mb3{margin-bottom:2rem}.md-ml3{margin-left:2rem}.md-mx3{margin-left:2rem;margin-right:2rem}.md-my3{margin-top:2rem;margin-bottom:2rem}.md-m4{margin:4rem}.md-mt4{margin-top:4rem}.md-mr4{margin-right:4rem}.md-mb4{margin-bottom:4rem}.md-ml4{margin-left:4rem}.md-mx4{margin-left:4rem;margin-right:4rem}.md-my4{margin-top:4rem;margin-bottom:4rem}.md-mxn1{margin-left:-.5rem;margin-right:-.5rem}.md-mxn2{margin-left:-1rem;margin-right:-1rem}.md-mxn3{margin-left:-2rem;margin-right:-2rem}.md-mxn4{margin-left:-4rem;margin-right:-4rem}.md-ml-auto{margin-left:auto}.md-mr-auto{margin-right:auto}.md-mx-auto{margin-left:auto;margin-right:auto}}@media (min-width:64em){.lg-m0{margin:0}.lg-mt0{margin-top:0}.lg-mr0{margin-right:0}.lg-mb0{margin-bottom:0}.lg-ml0{margin-left:0}.lg-mx0{margin-left:0;margin-right:0}.lg-my0{margin-top:0;margin-bottom:0}.lg-m1{margin:.5rem}.lg-mt1{margin-top:.5rem}.lg-mr1{margin-right:.5rem}.lg-mb1{margin-bottom:.5rem}.lg-ml1{margin-left:.5rem}.lg-mx1{margin-left:.5rem;margin-right:.5rem}.lg-my1{margin-top:.5rem;margin-bottom:.5rem}.lg-m2{margin:1rem}.lg-mt2{margin-top:1rem}.lg-mr2{margin-right:1rem}.lg-mb2{margin-bottom:1rem}.lg-ml2{margin-left:1rem}.lg-mx2{margin-left:1rem;margin-right:1rem}.lg-my2{margin-top:1rem;margin-bottom:1rem}.lg-m3{margin:2rem}.lg-mt3{margin-top:2rem}.lg-mr3{margin-right:2rem}.lg-mb3{margin-bottom:2rem}.lg-ml3{margin-left:2rem}.lg-mx3{margin-left:2rem;margin-right:2rem}.lg-my3{margin-top:2rem;margin-bottom:2rem}.lg-m4{margin:4rem}.lg-mt4{margin-top:4rem}.lg-mr4{margin-right:4rem}.lg-mb4{margin-bottom:4rem}.lg-ml4{margin-left:4rem}.lg-mx4{margin-left:4rem;margin-right:4rem}.lg-my4{margin-top:4rem;margin-bottom:4rem}.lg-mxn1{margin-left:-.5rem;margin-right:-.5rem}.lg-mxn2{margin-left:-1rem;margin-right:-1rem}.lg-mxn3{margin-left:-2rem;margin-right:-2rem}.lg-mxn4{margin-left:-4rem;margin-right:-4rem}.lg-ml-auto{margin-left:auto}.lg-mr-auto{margin-right:auto}.lg-mx-auto{margin-left:auto;margin-right:auto}}@media (min-width:40em){.sm-p0{padding:0}.sm-pt0{padding-top:0}.sm-pr0{padding-right:0}.sm-pb0{padding-bottom:0}.sm-pl0{padding-left:0}.sm-px0{padding-left:0;padding-right:0}.sm-py0{padding-top:0;padding-bottom:0}.sm-p1{padding:.5rem}.sm-pt1{padding-top:.5rem}.sm-pr1{padding-right:.5rem}.sm-pb1{padding-bottom:.5rem}.sm-pl1{padding-left:.5rem}.sm-px1{padding-left:.5rem;padding-right:.5rem}.sm-py1{padding-top:.5rem;padding-bottom:.5rem}.sm-p2{padding:1rem}.sm-pt2{padding-top:1rem}.sm-pr2{padding-right:1rem}.sm-pb2{padding-bottom:1rem}.sm-pl2{padding-left:1rem}.sm-px2{padding-left:1rem;padding-right:1rem}.sm-py2{padding-top:1rem;padding-bottom:1rem}.sm-p3{padding:2rem}.sm-pt3{padding-top:2rem}.sm-pr3{padding-right:2rem}.sm-pb3{padding-bottom:2rem}.sm-pl3{padding-left:2rem}.sm-px3{padding-left:2rem;padding-right:2rem}.sm-py3{padding-top:2rem;padding-bottom:2rem}.sm-p4{padding:4rem}.sm-pt4{padding-top:4rem}.sm-pr4{padding-right:4rem}.sm-pb4{padding-bottom:4rem}.sm-pl4{padding-left:4rem}.sm-px4{padding-left:4rem;padding-right:4rem}.sm-py4{padding-top:4rem;padding-bottom:4rem}}@media (min-width:52em){.md-p0{padding:0}.md-pt0{padding-top:0}.md-pr0{padding-right:0}.md-pb0{padding-bottom:0}.md-pl0{padding-left:0}.md-px0{padding-left:0;padding-right:0}.md-py0{padding-top:0;padding-bottom:0}.md-p1{padding:.5rem}.md-pt1{padding-top:.5rem}.md-pr1{padding-right:.5rem}.md-pb1{padding-bottom:.5rem}.md-pl1{padding-left:.5rem}.md-px1{padding-left:.5rem;padding-right:.5rem}.md-py1{padding-top:.5rem;padding-bottom:.5rem}.md-p2{padding:1rem}.md-pt2{padding-top:1rem}.md-pr2{padding-right:1rem}.md-pb2{padding-bottom:1rem}.md-pl2{padding-left:1rem}.md-px2{padding-left:1rem;padding-right:1rem}.md-py2{padding-top:1rem;padding-bottom:1rem}.md-p3{padding:2rem}.md-pt3{padding-top:2rem}.md-pr3{padding-right:2rem}.md-pb3{padding-bottom:2rem}.md-pl3{padding-left:2rem}.md-px3{padding-left:2rem;padding-right:2rem}.md-py3{padding-top:2rem;padding-bottom:2rem}.md-p4{padding:4rem}.md-pt4{padding-top:4rem}.md-pr4{padding-right:4rem}.md-pb4{padding-bottom:4rem}.md-pl4{padding-left:4rem}.md-px4{padding-left:4rem;padding-right:4rem}.md-py4{padding-top:4rem;padding-bottom:4rem}}@media (min-width:64em){.lg-p0{padding:0}.lg-pt0{padding-top:0}.lg-pr0{padding-right:0}.lg-pb0{padding-bottom:0}.lg-pl0{padding-left:0}.lg-px0{padding-left:0;padding-right:0}.lg-py0{padding-top:0;padding-bottom:0}.lg-p1{padding:.5rem}.lg-pt1{padding-top:.5rem}.lg-pr1{padding-right:.5rem}.lg-pb1{padding-bottom:.5rem}.lg-pl1{padding-left:.5rem}.lg-px1{padding-left:.5rem;padding-right:.5rem}.lg-py1{padding-top:.5rem;padding-bottom:.5rem}.lg-p2{padding:1rem}.lg-pt2{padding-top:1rem}.lg-pr2{padding-right:1rem}.lg-pb2{padding-bottom:1rem}.lg-pl2{padding-left:1rem}.lg-px2{padding-left:1rem;padding-right:1rem}.lg-py2{padding-top:1rem;padding-bottom:1rem}.lg-p3{padding:2rem}.lg-pt3{padding-top:2rem}.lg-pr3{padding-right:2rem}.lg-pb3{padding-bottom:2rem}.lg-pl3{padding-left:2rem}.lg-px3{padding-left:2rem;padding-right:2rem}.lg-py3{padding-top:2rem;padding-bottom:2rem}.lg-p4{padding:4rem}.lg-pt4{padding-top:4rem}.lg-pr4{padding-right:4rem}.lg-pb4{padding-bottom:4rem}.lg-pl4{padding-left:4rem}.lg-px4{padding-left:4rem;padding-right:4rem}.lg-py4{padding-top:4rem;padding-bottom:4rem}}@media (min-width:40em){.sm-inline{display:inline}.sm-block{display:block}.sm-inline-block{display:inline-block}.sm-table{display:table}.sm-table-cell{display:table-cell}.sm-overflow-hidden{overflow:hidden}.sm-overflow-scroll{overflow:scroll}.sm-overflow-auto{overflow:auto}.sm-left{float:left}.sm-right{float:right}}@media (min-width:52em){.md-inline{display:inline}.md-block{display:block}.md-inline-block{display:inline-block}.md-table{display:table}.md-table-cell{display:table-cell}.md-overflow-hidden{overflow:hidden}.md-overflow-scroll{overflow:scroll}.md-overflow-auto{overflow:auto}.md-left{float:left}.md-right{float:right}}@media (min-width:64em){.lg-inline{display:inline}.lg-block{display:block}.lg-inline-block{display:inline-block}.lg-table{display:table}.lg-table-cell{display:table-cell}.lg-overflow-hidden{overflow:hidden}.lg-overflow-scroll{overflow:scroll}.lg-overflow-auto{overflow:auto}.lg-left{float:left}.lg-right{float:right}}@media (min-width:40em){.sm-relative{position:relative}.sm-absolute{position:absolute}.sm-fixed{position:fixed}.sm-top-0{top:0}.sm-right-0{right:0}.sm-bottom-0{bottom:0}.sm-left-0{left:0}}@media (min-width:52em){.md-relative{position:relative}.md-absolute{position:absolute}.md-fixed{position:fixed}.md-top-0{top:0}.md-right-0{right:0}.md-bottom-0{bottom:0}.md-left-0{left:0}}@media (min-width:64em){.lg-relative{position:relative}.lg-absolute{position:absolute}.lg-fixed{position:fixed}.lg-top-0{top:0}.lg-right-0{right:0}.lg-bottom-0{bottom:0}.lg-left-0{left:0}}@media (min-width:40em){.sm-left-align{text-align:left}.sm-center{text-align:center}.sm-right-align{text-align:right}.sm-justify{text-align:justify}}@media (min-width:52em){.md-left-align{text-align:left}.md-center{text-align:center}.md-right-align{text-align:right}.md-justify{text-align:justify}}@media (min-width:64em){.lg-left-align{text-align:left}.lg-center{text-align:center}.lg-right-align{text-align:right}.lg-justify{text-align:justify}}@media (min-width:40em){.sm-h00{font-size:4rem}.sm-h0{font-size:3rem}.sm-h1{font-size:2rem}.sm-h2{font-size:1.5rem}.sm-h3{font-size:1.25rem}.sm-h4{font-size:1rem}.sm-h5{font-size:.875rem}.sm-h6{font-size:.75rem}}@media (min-width:52em){.md-h00{font-size:4rem}.md-h0{font-size:3rem}.md-h1{font-size:2rem}.md-h2{font-size:1.5rem}.md-h3{font-size:1.25rem}.md-h4{font-size:1rem}.md-h5{font-size:.875rem}.md-h6{font-size:.75rem}}@media (min-width:64em){.lg-h00{font-size:4rem}.lg-h0{font-size:3rem}.lg-h1{font-size:2rem}.lg-h2{font-size:1.5rem}.lg-h3{font-size:1.25rem}.lg-h4{font-size:1rem}.lg-h5{font-size:.875rem}.lg-h6{font-size:.75rem}}.black{color:#000}.gray{color:#444}.silver{color:#ededed}.white{color:#fff}.aqua{color:#7fdbff}.blue{color:#0074d9}.navy{color:#001f3f}.teal{color:#39cccc}.green{color:#2ecc40}.olive{color:#3d9970}.lime{color:#01ff70}.yellow{color:#ffdc00}.orange{color:#ff851b}.red{color:#ff4136}.fuchsia{color:#f012be}.purple{color:#b10dc9}.maroon{color:#940000}.color-inherit{color:inherit}.muted{opacity:.5}.bg-black{background-color:#000}.bg-gray{background-color:#444}.bg-silver{background-color:#ededed}.bg-white{background-color:#fff}.bg-aqua{background-color:#7fdbff}.bg-blue{background-color:#0074d9}.bg-navy{background-color:#001f3f}.bg-teal{background-color:#39cccc}.bg-green{background-color:#2ecc40}.bg-olive{background-color:#3d9970}.bg-lime{background-color:#01ff70}.bg-yellow{background-color:#ffdc00}.bg-orange{background-color:#ff851b}.bg-red{background-color:#ff4136}.bg-fuchsia{background-color:#f012be}.bg-purple{background-color:#b10dc9}.bg-maroon{background-color:#940000}.bg-cover{background-size:cover}.bg-contain{background-size:contain}.bg-center{background-position:center}.bg-top{background-position:top}.bg-right{background-position:right}.bg-bottom{background-position:bottom}.bg-left{background-position:left}.bg-no-repeat{background-repeat:no-repeat}.bg-repeat-x{background-repeat:repeat-x}.bg-repeat-y{background-repeat:repeat-y}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Helvetica,sans-serif}section>h2{margin-top:.25em}
    /* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table { 
	border-collapse: collapse;
	border-spacing: 0;
}
    
    

</style>
  <!-- AMP html magic which is like normal html (almost) --> 
  <body>
<div class="products_carousel" >    
                  <amp-carousel height="418"
                     layout="fixed-height"
                     type="carousel" 
                     class="category-carousel"
                     controls
                     > 
 
                    <div class="slide">
                      <figure style="">
                          <a href="#" > <amp-img src="https://picsum.photos/258/193?image=9"
                            width="258"
                            height="193"
                            alt="a sample image"></amp-img></a>
                            <figcaption><a href="#" class="block">  
                            
                          <h3 class="h3 mb1" style="white-space: normal;max-width: 258px;">
                            Super Cool Laptop 

                          </h3>  

                            <div class="mb2 bg-white py rounded">  
                <div class="text-maroon maroon-text mb1 ">
                  <div class="bold">$24,500.00 USD</div> 
                </div> 
                 <div class="">
                  <div> Located in Leeds, AL, US</div>
                </div>
              </div>
                            
       
                      </a></figcaption>
                        </figure>
                    </div>
                      <div class="slide">
                      <figure style="">
                          <a href="#" > <amp-img src="https://picsum.photos/258/193?image=9"
                            width="258"
                            height="193"
                            alt="a sample image"></amp-img></a>
                            <figcaption><a href="#" class="block">  
                            
                          <h3 class="h3 mb1" style="white-space: normal;max-width: 258px;">
                            Super Cool Laptop 

                          </h3>  

                            <div class="mb2 bg-white py rounded">  
                <div class="text-maroon maroon-text mb1 ">
                  <div class="bold">$24,500.00 USD</div> 
                </div> 
                 <div class="">
                  <div> Located in Leeds, AL, US</div>
                </div>
              </div>
                            
       
                      </a></figcaption>
                        </figure>
                    </div>
                      <div class="slide">
                      <figure style="">
                          <a href="#" > <amp-img src="https://picsum.photos/258/193?image=9"
                            width="258"
                            height="193"
                            alt="a sample image"></amp-img></a>
                            <figcaption><a href="#" class="block">  
                            
                          <h3 class="h3 mb1" style="white-space: normal;max-width: 258px;">
                            Super Cool Laptop 

                          </h3>  

                            <div class="mb2 bg-white py rounded">  
                <div class="text-maroon maroon-text mb1 ">
                  <div class="bold">$24,500.00 USD</div> 
                </div> 
                 <div class="">
                  <div> Located in Leeds, AL, US</div>
                </div>
              </div>
                            
       
                      </a></figcaption>
                        </figure>
                    </div>
       
                   </amp-carousel>
   
      </div> 
            
          
!
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