<!DOCTYPE html>
<html amp>
<head>
<meta charset='UTF-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<meta name='generator' content='AmpGeneratorOne 1, github.com'>
<meta name='viewport' content='width=device-width, initial-scale=1, minimum-scale=1'>
<link rel='shortcut icon' href='http://localhost/currentproject/ampgeneratorone/example/resources/favicon.ico' type='image/x-icon'>
<meta name='description' content='While this example could run in a regular browser but it must be tested under an AMP-compatible browser (firefox has a plugin)'><meta itemprop='name' content='AMP Generator One'>
<meta itemprop='description' content='The earliest extant description of what is now often called a cupcake was in 1796, when a recipe for a light cake to bake in small cups was written in American Cookery by Amelia Simmons. The earliest extant documentation of the term cupcake itself was in Seventy-five Receipts for Pastry, Cakes, and Sweetmeats '>
<meta itemprop='image' content='resources/logo/twitter_header_photo_1.png'>
<meta property='og:image' content='resources/logo/twitter_header_photo_1.png'/>
<meta property='og:image:width' content='1500'/>
<meta property='og:image:height' content='500'/>
<meta property='og:title' content='AMP Generator One'/>
<meta property='og:description' content='The earliest extant description of what is now often called a cupcake was in 1796, when a recipe for a light cake to bake in small cups was written in American Cookery by Amelia Simmons. The earliest extant documentation of the term cupcake itself was in Seventy-five Receipts for Pastry, Cakes, and Sweetmeats '/>
<meta property='og:url' content='https://www.canonical.com'/>
<meta property='og:type' content='article'/>
<meta property='og:site_name' content='AMP Generator One'/>
<meta name='twitter:card' content='summary'>
<meta name='twitter:title' content='AMP Generator One'>
<meta name='twitter:description' content='The earliest extant description of what is now often called a cupcake was in 1796, when a recipe for a light cake to bake in small cups was written in American Cookery by Amelia Simmons. The earliest extant documentation of the term cupcake itself was in Seventy-five Receipts for Pastry, Cakes, and Sweetmeats '>
<meta name='twitter:image' content='resources/logo/twitter_header_photo_1.png'>
<meta name='twitter:site' content='@somesite'>
<meta name='twitter:creator' content='@somebody'>
<script type='application/ld+json'>
{
"@context": "http://schema.org/",
"@type": "WebSite",
"name": "AMP Generator One",
"url": "https://www.canonical.com",
"description": "The earliest extant description of what is now often called a cupcake was in 1796, when a recipe for a light cake to bake in small cups was written in American Cookery by Amelia Simmons. The earliest extant documentation of the term cupcake itself was in Seventy-five Receipts for Pastry, Cakes, and Sweetmeats ",
"image":{"@type":"ImageObject",
"url":"resources/logo/twitter_header_photo_1.png",
"width":1500,
"height":500
}
}
</script><title>AMP Generator One</title>
<link rel='canonical' href='https://www.canonical.com'>
<link rel='stylesheet' href='https://use.fontawesome.com/releases/v5.3.1/css/all.css' integrity='sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU' crossorigin='anonymous'>
<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>
<link href='https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i&subset=cyrillic' rel='stylesheet'>
<style amp-custom>
div,span,h1,h2,h3,h4,h5,h6,p,blockquote,a,ol,ul,li,figcaption{font: inherit;}
section{background-color: #eeeeee;}
section,.container,.container-fluid{position: relative;word-wrap: break-word;}
a.ampg-iconfont:hover{text-decoration: none;}
.article .lead p,.article .lead ul,.article .lead ol,.article .lead pre,.article .lead blockquote{margin-bottom: 0;}
a{font-style: normal;font-weight: 400;cursor: pointer;}
a,a:hover{text-decoration: none;}
figure{margin-bottom: 0;}
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6,.text-1,.text-2,.text-3,.text-4{line-height: 1;word-break: break-word;word-wrap: break-word;}
b,strong{font-weight: bold;}
blockquote{padding: 10px 0 10px 20px;position: relative;border-left: 2px solid;border-color: #ff3366;}
input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active{transition-delay: 9999s;transition-property: background-color,color;}
textarea[type='hidden']{display: none;}
body{position: relative;}
section{background-position: 50% 50%;background-repeat: no-repeat;background-size: cover;}
section .ampg-background-video,section .ampg-background-video-preview{position: absolute;bottom: 0;left: 0;right: 0;top: 0;}
.row{display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;display: flex;-webkit-flex-wrap: wrap;-ms-flex-wrap: wrap;flex-wrap: wrap;margin-right: -15px;margin-left: -15px;}
@media (min-width: 576px){.row{margin-right: -15px;margin-left: -15px;}
}
@media (min-width: 768px){.row{margin-right: -15px;margin-left: -15px;}
}
@media (min-width: 992px){.row{margin-right: -15px;margin-left: -15px;}
}
@media (min-width: 1200px){.row{margin-right: -15px;margin-left: -15px;}
}
.hidden{visibility: hidden;}
.ampg-z-index20{z-index: 20;}
.align-left{text-align: left;}
.align-center{text-align: center;}
.align-right{text-align: right;}
@media (max-width: 767px){.align-left,.align-center,.align-right,.ampg-section-btn,.ampg-section-title{text-align: center;}
}
.ampg-light{font-weight: 300;}
.ampg-regular{font-weight: 400;}
.ampg-semibold{font-weight: 500;}
.ampg-bold{font-weight: 700;}
.ampg-figure img,.ampg-figure iframe{display: block;width: 100%;}
.card{background-color: transparent;border: none;}
.card-img{text-align: center;flex-shrink: 0;}
.media{max-width: 100%;margin: 0 auto;}
.ampg-figure{-ms-flex-item-align: center;-ms-grid-row-align: center;-webkit-align-self: center;align-self: center;}
.media-container > div{max-width: 100%;}
.ampg-figure img,.card-img img{width: 100%;}
@media (max-width: 991px){.media-size-item{width: auto;}
.media{width: auto;}
.ampg-figure{width: 100%;}
}
.ampg-section-btn{margin-left: -.25rem;margin-right: -.25rem;font-size: 0;}
nav .ampg-section-btn{margin-left: 0rem;margin-right: 0rem;}
.btn .ampg-iconfont,.btn.btn-sm .ampg-iconfont{cursor: pointer;margin-right: 0.5rem;}
.btn.btn-md .ampg-iconfont,.btn.btn-md .ampg-iconfont{margin-right: 0.8rem;}
[type='submit']{-webkit-appearance: none;}
.ampg-fullscreen .ampg-overlay{min-height: 100vh;}
.ampg-fullscreen{display: flex;display: -webkit-flex;display: -moz-flex;display: -ms-flex;display: -o-flex;align-items: center;-webkit-align-items: center;min-height: 100vh;box-sizing: border-box;padding-top: 3rem;padding-bottom: 3rem;}
amp-img img{max-height: 100%;max-width: 100%;}
img.ampg-temp{width: 100%;}
.super-hide{display: none;}
.is-builder .nodisplay + img[async],.is-builder .nodisplay + img[decoding='async'],.is-builder amp-img > a + img[async],.is-builder amp-img > a + img[decoding='async']{display: none;}
html:not(.is-builder) amp-img > a{position: absolute;top: 0;bottom: 0;left: 0;right: 0;z-index: 1;}
.is-builder .temp-amp-sizer{position: absolute;}
.is-builder amp-youtube .temp-amp-sizer,.is-builder amp-vimeo .temp-amp-sizer{position: static;}
*{box-sizing: border-box;}
body{font-family: Roboto;font-style: normal;line-height: 1.5;}
.ampg-section-title{font-style: normal;line-height: 1.2;}
.ampg-section-subtitle{line-height: 1.3;}
.ampg-text{font-style: normal;line-height: 1.6;}
.text-1{font-family: 'Roboto',sans-serif;font-size: 4.5rem;}
.text-2{font-family: 'Roboto',sans-serif;font-size: 2.2rem;}
.text-4{font-family: 'Roboto',sans-serif;font-size: 0.9rem;}
.text-5{font-family: 'Roboto',sans-serif;font-size: 1.8rem;}
.text-7{font-family: 'Roboto',sans-serif;font-size: 1.1rem;}
@media (max-width: 768px){.text-1{font-size: 3.6rem;font-size: calc( 2.225rem + (4.5 - 2.225) * ((100vw - 20rem) / (48 - 20)));line-height: calc( 1.4 * (2.225rem + (4.5 - 2.225) * ((100vw - 20rem) / (48 - 20))));}
.text-2{font-size: 1.76rem;font-size: calc( 1.42rem + (2.2 - 1.42) * ((100vw - 20rem) / (48 - 20)));line-height: calc( 1.4 * (1.42rem + (2.2 - 1.42) * ((100vw - 20rem) / (48 - 20))));}
.text-4{font-size: 0.72rem;font-size: calc( 0.965rem + (0.9 - 0.965) * ((100vw - 20rem) / (48 - 20)));line-height: calc( 1.4 * (0.965rem + (0.9 - 0.965) * ((100vw - 20rem) / (48 - 20))));}
.text-5{font-size: 1.44rem;font-size: calc( 1.28rem + (1.8 - 1.28) * ((100vw - 20rem) / (48 - 20)));line-height: calc( 1.4 * (1.28rem + (1.8 - 1.28) * ((100vw - 20rem) / (48 - 20))));}
}
.btn{font-weight: 400;border-width: 2px;border-style: solid;font-style: normal;letter-spacing: 2px;margin: .4rem .8rem;white-space: normal;transition-property: background-color,color,border-color,box-shadow;transition-duration: .3s,.3s,.3s,2s;transition-timing-function: ease-in-out;padding: 1rem 2rem;border-radius: 0px;display: inline-flex;align-items: center;justify-content: center;word-break: break-word;}
.btn-sm{border: 1px solid;font-weight: 400;letter-spacing: 2px;-webkit-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;transition: all 0.3s ease-in-out;padding: 0.6rem 0.8rem;border-radius: 0px;}
.btn-md{font-weight: 600;letter-spacing: 2px;margin: .4rem .8rem;-webkit-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;transition: all 0.3s ease-in-out;padding: 1rem 2rem;border-radius: 0px;}
.bg-primary{background-color: #007bff;}
.bg-success{background-color: #28a745;}
.bg-info{background-color: #17a2b8;}
.bg-warning{background-color: #ffc107;}
.bg-danger{background-color: #dc3545;}
.btn-primary,.btn-primary:active,.btn-primary.active{background-color: #007bff;border-color: #007bff;color: #ffffff;}
.btn-primary:hover,.btn-primary:focus,.btn-primary.focus{color: #ffffff;background-color: #1f7dc5;border-color: #1f7dc5;}
.btn-primary.disabled,.btn-primary:disabled{color: #ffffff;background-color: #1f7dc5;border-color: #1f7dc5;}
.btn-secondary,.btn-secondary:active,.btn-secondary.active{background-color: #4addff;border-color: #4addff;color: #ffffff;}
.btn-secondary:hover,.btn-secondary:focus,.btn-secondary.focus{color: #ffffff;background-color: #00cdfd;border-color: #00cdfd;}
.btn-secondary.disabled,.btn-secondary:disabled{color: #ffffff;background-color: #00cdfd;border-color: #00cdfd;}
.btn-info,.btn-info:active,.btn-info.active{background-color: #17a2b8;border-color: #17a2b8;color: #ffffff;}
.btn-info:hover,.btn-info:focus,.btn-info.focus{color: #ffffff;background-color: #4242db;border-color: #4242db;}
.btn-info.disabled,.btn-info:disabled{color: #ffffff;background-color: #4242db;border-color: #4242db;}
.btn-success,.btn-success:active,.btn-success.active{background-color: #28a745;border-color: #28a745;color: #ffffff;}
.btn-success:hover,.btn-success:focus,.btn-success.focus{color: #ffffff;background-color: #088550;border-color: #088550;}
.btn-success.disabled,.btn-success:disabled{color: #ffffff;background-color: #088550;border-color: #088550;}
.btn-warning,.btn-warning:active,.btn-warning.active{background-color: #ffc107;border-color: #ffc107;color: #ffffff;}
.btn-warning:hover,.btn-warning:focus,.btn-warning.focus{color: #ffffff;background-color: #505050;border-color: #505050;}
.btn-warning.disabled,.btn-warning:disabled{color: #ffffff;background-color: #505050;border-color: #505050;}
.btn-danger,.btn-danger:active,.btn-danger.active{background-color: #dc3545;border-color: #dc3545;color: #ffffff;}
.btn-danger:hover,.btn-danger:focus,.btn-danger.focus{color: #ffffff;background-color: #7a7a7a;border-color: #7a7a7a;}
.btn-danger.disabled,.btn-danger:disabled{color: #ffffff;background-color: #7a7a7a;border-color: #7a7a7a;}
.btn-black,.btn-black:active,.btn-black.active{background-color: #333333;border-color: #333333;color: #ffffff;}
.btn-black:hover,.btn-black:focus,.btn-black.focus{color: #ffffff;background-color: #0d0d0d;border-color: #0d0d0d;}
.btn-black.disabled,.btn-black:disabled{color: #ffffff;background-color: #0d0d0d;border-color: #0d0d0d;}
.btn-white,.btn-white:active,.btn-white.active{background-color: #ffffff;border-color: #ffffff;color: #ffffff;}
.btn-white:hover,.btn-white:focus,.btn-white.focus{color: #ffffff;background-color: #d4d4d4;border-color: #d4d4d4;}
.btn-white.disabled,.btn-white:disabled{color: #ffffff;background-color: #d4d4d4;border-color: #d4d4d4;}
.btn-white,.btn-white:active,.btn-white.active{color: #333333;}
.btn-white:hover,.btn-white:focus,.btn-white.focus{color: #333333;}
.btn-white.disabled,.btn-white:disabled{color: #333333;}
.btn-primary-outline,.btn-primary-outline:active,.btn-primary-outline.active{background: none;border-color: #1c6faf;color: #1c6faf;}
.btn-primary-outline:hover,.btn-primary-outline:focus,.btn-primary-outline.focus{color: #ffffff;background-color: #007bff;border-color: #007bff;}
.btn-primary-outline.disabled,.btn-primary-outline:disabled{color: #ffffff;background-color: #007bff;border-color: #007bff;}
.btn-secondary-outline,.btn-secondary-outline:active,.btn-secondary-outline.active{background: none;border-color: #00b8e3;color: #00b8e3;}
.btn-secondary-outline:hover,.btn-secondary-outline:focus,.btn-secondary-outline.focus{color: #ffffff;background-color: #4addff;border-color: #4addff;}
.btn-secondary-outline.disabled,.btn-secondary-outline:disabled{color: #ffffff;background-color: #4addff;border-color: #4addff;}
.btn-info-outline,.btn-info-outline:active,.btn-info-outline.active{background: none;border-color: #2c2cd7;color: #2c2cd7;}
.btn-info-outline:hover,.btn-info-outline:focus,.btn-info-outline.focus{color: #ffffff;background-color: #17a2b8;border-color: #17a2b8;}
.btn-info-outline.disabled,.btn-info-outline:disabled{color: #ffffff;background-color: #17a2b8;border-color: #17a2b8;}
.btn-success-outline,.btn-success-outline:active,.btn-success-outline.active{background: none;border-color: #076d41;color: #076d41;}
.btn-success-outline:hover,.btn-success-outline:focus,.btn-success-outline.focus{color: #ffffff;background-color: #28a745;border-color: #28a745;}
.btn-success-outline.disabled,.btn-success-outline:disabled{color: #ffffff;background-color: #28a745;border-color: #28a745;}
.btn-warning-outline,.btn-warning-outline:active,.btn-warning-outline.active{background: none;border-color: #434343;color: #434343;}
.btn-warning-outline:hover,.btn-warning-outline:focus,.btn-warning-outline.focus{color: #ffffff;background-color: #ffc107;border-color: #ffc107;}
.btn-warning-outline.disabled,.btn-warning-outline:disabled{color: #ffffff;background-color: #ffc107;border-color: #ffc107;}
.btn-danger-outline,.btn-danger-outline:active,.btn-danger-outline.active{background: none;border-color: #6d6d6d;color: #6d6d6d;}
.btn-danger-outline:hover,.btn-danger-outline:focus,.btn-danger-outline.focus{color: #ffffff;background-color: #dc3545;border-color: #dc3545;}
.btn-danger-outline.disabled,.btn-danger-outline:disabled{color: #ffffff;background-color: #dc3545;border-color: #dc3545;}
.btn-black-outline,.btn-black-outline:active,.btn-black-outline.active{background: none;border-color: #000000;color: #000000;}
.btn-black-outline:hover,.btn-black-outline:focus,.btn-black-outline.focus{color: #ffffff;background-color: #333333;border-color: #333333;}
.btn-black-outline.disabled,.btn-black-outline:disabled{color: #ffffff;background-color: #333333;border-color: #333333;}
.btn-white-outline,.btn-white-outline:active,.btn-white-outline.active{background: none;border-color: #ffffff;color: #ffffff;}
.btn-white-outline:hover,.btn-white-outline:focus,.btn-white-outline.focus{color: #333333;background-color: #ffffff;border-color: #ffffff;}
.text-primary{color: #007bff;}
.text-secondary{color: #4addff;}
.text-success{color: #28a745;}
.text-info{color: #17a2b8;}
.text-warning{color: #ffc107;}
.text-danger{color: #dc3545;}
.text-white{color: #ffffff;}
.text-black{color: #000000;}
a.text-primary:hover,a.text-primary:focus{color: #1c6faf;}
a.text-secondary:hover,a.text-secondary:focus{color: #00b8e3;}
a.text-success:hover,a.text-success:focus{color: #076d41;}
a.text-info:hover,a.text-info:focus{color: #2c2cd7;}
a.text-warning:hover,a.text-warning:focus{color: #434343;}
a.text-danger:hover,a.text-danger:focus{color: #6d6d6d;}
a.text-white:hover,a.text-white:focus{color: #b3b3b3;}
a.text-black:hover,a.text-black:focus{color: #4d4d4d;}
.alert-success{background-color: #28a745;}
.alert-info{background-color: #17a2b8;}
.alert-warning{background-color: #ffc107;}
.alert-danger{background-color: #dc3545;}
.btn-form{border-radius: 0;}
.btn-form:hover{cursor: pointer;}
a,a:hover{color: #007bff;}
.ampg-plan-header.bg-primary .ampg-plan-subtitle,.ampg-plan-header.bg-primary .ampg-plan-price-desc{color: #feffff;}
.ampg-plan-header.bg-success .ampg-plan-subtitle,.ampg-plan-header.bg-success .ampg-plan-price-desc{color: #acfad9;}
.ampg-plan-header.bg-info .ampg-plan-subtitle,.ampg-plan-header.bg-info .ampg-plan-price-desc{color: #ffffff;}
.ampg-plan-header.bg-warning .ampg-plan-subtitle,.ampg-plan-header.bg-warning .ampg-plan-price-desc{color: #b6b6b6;}
.ampg-plan-header.bg-danger .ampg-plan-subtitle,.ampg-plan-header.bg-danger .ampg-plan-price-desc{color: #e0e0e0;}
blockquote{padding: 10px 0 10px 20px;position: relative;border-color: #007bff;border-width: 3px;}
ul,ol,pre,blockquote{margin-bottom: 0;margin-top: 0;}
pre{background: #f4f4f4;padding: 10px 24px;white-space: pre-wrap;}
.inactive{-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;pointer-events: none;-webkit-user-drag: none;user-drag: none;}
html,body{height: auto;min-height: 100vh;}
.popover-content ul.show{min-height: 155px;}
#scrollToTop{display: none;}
.ampg-container{max-width: 800px;padding: 0 10px;margin: 0 auto;position: relative;}
h1,h2,h3{margin: auto;}
h1,h3,p{padding: 10px 0;margin-bottom: 15px;}
p,li,blockquote{color: #15181b;letter-spacing: 0.5px;line-height: 1.7;}
.container{padding-right: 15px;padding-left: 15px;width: 100%;margin-right: auto;margin-left: auto;}
@media (max-width: 767px){.container{max-width: 540px;}
}
@media (min-width: 768px){.container{max-width: 720px;}
}
@media (min-width: 992px){.container{max-width: 960px;}
}
@media (min-width: 1200px){.container{max-width: 1140px;}
}
.ampg-row{display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;display: flex;-webkit-flex-wrap: wrap;-ms-flex-wrap: wrap;flex-wrap: wrap;margin-right: -15px;margin-left: -15px;}
.ampg-justify-content-center{justify-content: center;}
@media (max-width: 767px){.ampg-col-sm-12{-ms-flex: 0 0 100%;flex: 0 0 100%;max-width: 100%;padding-right: 15px;padding-left: 15px;}
.ampg-row{margin: 0;}
}
@media (min-width: 768px){.ampg-col-md-3{-ms-flex: 0 0 25%;flex: 0 0 25%;max-width: 25%;padding-right: 15px;padding-left: 15px;}
.ampg-col-md-4{-ms-flex: 0 0 33.333333%;flex: 0 0 33.333333%;max-width: 33.333333%;padding-right: 15px;padding-left: 15px;}
.ampg-col-md-5{-ms-flex: 0 0 41.666667%;flex: 0 0 41.666667%;max-width: 41.666667%;padding-right: 15px;padding-left: 15px;}
.ampg-col-md-6{-ms-flex: 0 0 50%;flex: 0 0 50%;max-width: 50%;padding-right: 15px;padding-left: 15px;}
.ampg-col-md-7{-ms-flex: 0 0 58.333333%;flex: 0 0 58.333333%;max-width: 58.333333%;padding-right: 15px;padding-left: 15px;}
.ampg-col-md-8{-ms-flex: 0 0 66.666667%;flex: 0 0 66.666667%;max-width: 66.666667%;padding-left: 15px;padding-right: 15px;}
.ampg-col-md-10{-ms-flex: 0 0 83.333333%;flex: 0 0 83.333333%;max-width: 83.333333%;padding-left: 15px;padding-right: 15px;}
.ampg-col-md-12{-ms-flex: 0 0 100%;flex: 0 0 100%;max-width: 100%;padding-right: 15px;padding-left: 15px;}
}
@media (min-width: 992px){.ampg-col-lg-2{-ms-flex: 0 0 16.666667%;flex: 0 0 16.666667%;max-width: 16.666667%;padding-right: 15px;padding-left: 15px;}
.ampg-col-lg-3{-ms-flex: 0 0 25%;flex: 0 0 25%;max-width: 25%;padding-right: 15px;padding-left: 15px;}
.ampg-col-lg-4{-ms-flex: 0 0 33.33%;flex: 0 0 33.33%;max-width: 33.33%;padding-right: 15px;padding-left: 15px;}
.ampg-col-lg-5{-ms-flex: 0 0 41.666%;flex: 0 0 41.666%;max-width: 41.666%;padding-right: 15px;padding-left: 15px;}
.ampg-col-lg-6{-ms-flex: 0 0 50%;flex: 0 0 50%;max-width: 50%;padding-right: 15px;padding-left: 15px;}
.ampg-col-lg-8{-ms-flex: 0 0 66.666667%;flex: 0 0 66.666667%;max-width: 66.666667%;padding-left: 15px;padding-right: 15px;}
.ampg-col-lg-10{-ms-flex: 0 0 83.3333%;flex: 0 0 83.3333%;max-width: 83.3333%;padding-right: 15px;padding-left: 15px;}
.ampg-col-lg-12{-ms-flex: 0 0 100%;flex: 0 0 100%;max-width: 100%;padding-right: 15px;padding-left: 15px;}
}
@media (min-width: 1200px){.ampg-col-xl-7{-ms-flex: 0 0 58.333333%;flex: 0 0 58.333333%;max-width: 58.333333%;padding-right: 15px;padding-left: 15px;}
.ampg-col-xl-8{-ms-flex: 0 0 66.666667%;flex: 0 0 66.666667%;max-width: 66.666667%;padding-left: 15px;padding-right: 15px;}
}
section.sidebar-open:before{content: '';position: fixed;top: 0;bottom: 0;right: 0;left: 0;background-color: rgba(0,0,0,0.2);z-index: 1040;}
p{margin-top: 0;}
.ampsidebar .sidebar{padding: 1rem 0;margin: 0;}
.ampsidebar .sidebar > li{list-style: none;display: flex;flex-direction: column;}
.ampsidebar .sidebar a{display: block;text-decoration: none;margin-bottom: 10px;}
.ampsidebar .close-sidebar{width: 30px;height: 30px;position: relative;cursor: pointer;background-color: transparent;border: none;}
.ampsidebar .close-sidebar:focus{outline: 2px auto #007bff;}
.ampsidebar .close-sidebar span{position: absolute;left: 0;width: 30px;height: 2px;border-right: 5px;background-color: #197bc6;}
.ampsidebar .close-sidebar span:nth-child(1){transform: rotate(45deg);}
.ampsidebar .close-sidebar span:nth-child(2){transform: rotate(-45deg);}
@media (min-width: 992px){.ampsidebar .brand-name{min-width: 8rem;}
.ampsidebar .builder-sidebar{margin-left: auto;}
.ampsidebar .builder-sidebar .sidebar li{flex-direction: row;flex-wrap: wrap;}
.ampsidebar .builder-sidebar .sidebar li a{padding: .5rem;margin: 0;}
.ampsidebar .builder-overlay{display: none;}
}
.ampsidebar .hamburger{position: absolute;top: 25px;right: 20px;margin-left: auto;width: 30px;height: 20px;background: none;border: none;cursor: pointer;z-index: 1000;}
@media (min-width: 768px){.ampsidebar .hamburger{top: calc(0.5rem + 55 * 0.5px - 10px);}
}
.ampsidebar .hamburger:focus{outline: none;}
.ampsidebar .hamburger span{position: absolute;right: 0;width: 30px;height: 2px;border-right: 5px;background-color: #197bc6;}
.ampsidebar .hamburger span:nth-child(1){top: 0;transition: all .2s;}
.ampsidebar .hamburger span:nth-child(2){top: 8px;transition: all .15s;}
.ampsidebar .hamburger span:nth-child(3){top: 8px;transition: all .15s;}
.ampsidebar .hamburger span:nth-child(4){top: 16px;transition: all .2s;}
.ampsidebar amp-img{height: 55px;width: 55px;margin-right: 1rem;display: flex;align-items: center;}
@media (max-width: 768px){.ampsidebar amp-img{max-height: 55px;max-width: 55px;}
}
.ampsidebar amp-sidebar{min-width: 260px;z-index: 1050;background-color: #4040ff;}
.ampsidebar amp-sidebar.open:after{content: '';position: absolute;top: 0;left: 0;bottom: 0;right: 0;background-color: red;}
.ampsidebar .open{transform: translateX(0%);display: block;}
.ampsidebar .builder-sidebar{background-color: #4040ff;position: relative;height: 100vh;z-index: 1030;padding: 1rem 2rem;max-width: 20rem;}
.ampsidebar button.sticky-but{position: fixed;}
.ampsidebar .brand{display: flex;align-items: center;align-self: flex-start;padding-right: 30px;}
.ampsidebar .brand p{margin: 0;padding: 0;}
.ampsidebar .brand-name{color: #197bc6;}
.ampsidebar .headerbar{display: flex;flex-direction: column;justify-content: center;padding: .5rem 1rem;min-height: 70px;align-items: center;background: white;}
.ampsidebar .headerbar.sticky-nav{position: fixed;z-index: 1000;width: 100%;}
.ampg-section1{padding-top: 120px;padding-bottom: 60px;background-color: #2389da;}
.ampg-section1 .ampg-title{padding-bottom: 1rem;}
.ampg-section2{padding-top: 90px;padding-bottom: 90px;background-color: rgb(0, 174, 239);}.ampg-section2 .ampg-section-subtitle{text-align: center;}
.ampg-section2 .ampg-text,.ampg-section2 .ampg-section-btn{text-align: center;}
.ampg-section2 .ampg-section-title{text-align: center;}
.ampg-section3{padding-top: 60px;padding-bottom: 60px;background-color: white;}
.ampg-section3 .ampg-text{margin-bottom: 0;}
.ampg-section3 .ampg-section-title{margin: 0;}
.ampg-section4{padding-top: 0px;padding-bottom: 0px;background-color: white;}
.ampg-section4 .image-block{margin: auto;width: 66%;width: 100%;}
.ampg-section4 amp-img{text-align: center;}
.ampg-section4 .ampg-text{margin: 0;padding: .5rem 0;padding: .5rem 15px;}
.ampg-section4 .ampg-section-btn{margin: 0;padding: .5rem 0;padding: .5rem 15px;}
@media (max-width: 767px){.ampg-section4 .image-block{width: 100%;}
}
.ampg-section5{padding-top: 30px;padding-bottom: 30px;background-color: white;}
.ampg-section5 .text-block{margin: auto;}
.ampg-section5 amp-img{text-align: center;}
.ampg-section6{padding-top: 30px;padding-bottom: 30px;background-color: white;}
.ampg-section6 .text-block{margin: auto;}
.ampg-section6 amp-img{text-align: center;}
.ampg-section7{padding-top: 75px;padding-bottom: 75px;background-color: white;}
.ampg-section7 table{width: 100%;border-collapse: collapse;min-width: 500px;}
.ampg-section7 table td{border-top: none;padding: .75rem;}
.ampg-section7 table th{border-top: none;padding: .75rem;border-bottom: 2px solid #cecece;}
.ampg-section7 p{padding: 5px;margin: 0px;}
.ampg-section7 .scroll{overflow-x: auto;}
.ampg-section7 .wrapscroll{width: 100%;}
.ampg-section7 .ampg-section-subtitle{color: #7f7e7e;margin-bottom: 2rem;}
.ampg-section8{padding-top: 90px;padding-bottom: 90px;background-color: white;}
.ampg-section8 .google-map{height: 25rem;position: relative;width: 100%;}
.ampg-section8 .google-map iframe{height: 100%;width: 100%;}
.ampg-section8 .google-map [data-state-details]{color: #6b6763;font-family: Montserrat;height: 1.5em;margin-top: -0.75em;padding-left: 1.25rem;padding-right: 1.25rem;position: absolute;text-align: center;top: 50%;width: 100%;}
.ampg-section8 .google-map[data-state]{background: #e9e5dc;}
.ampg-section8 .google-map[data-state="loading"] [data-state-details]{display: none;}
.ampg-section8 .map-placeholder{display: none;}
.ampg-section8 h4{padding-top: 5rem;color: #767676;text-align: center;}
.ampg-section8 .ampg-section-title{padding-bottom: 3rem;}
.ampg-section9{padding-top: 60px;padding-bottom: 60px;background-color: white;}
.ampg-section9 .ampg-row{margin-left: 0;margin-right: 0;}
.ampg-section9 .ampg-section-title{padding-bottom: 3rem;}
.ampg-section9 .google-map{height: 25rem;position: relative;width: 100%;}
.ampg-section9 .google-map iframe{height: 100%;width: 100%;}
.ampg-section9 .google-map [data-state-details]{color: #6b6763;font-family: Montserrat;height: 1.5em;margin-top: -0.75em;padding-left: 1.25rem;padding-right: 1.25rem;position: absolute;text-align: center;top: 50%;width: 100%;}
.ampg-section9 .google-map[data-state]{background: #e9e5dc;}
.ampg-section9 .google-map[data-state="loading"] [data-state-details]{display: none;}
.ampg-section9 .map-placeholder{display: none;}
.ampg-section9 h4{padding-top: 5rem;color: #767676;text-align: center;}
.ampg-section10{padding-top: 30px;padding-bottom: 30px;background-color: white;}
.ampg-section10 .card{margin-bottom: 20px;position: relative;display: flex;-ms-flex-direction: column;flex-direction: column;min-width: 0;word-wrap: break-word;background-clip: border-box;border-radius: 0;width: 100%;min-height: 1px;}
.ampg-section10 .card .btn{margin: .4rem 4px;}
.ampg-section10 .card-title{margin: 0;}
.ampg-section10 .card-box{padding-top: 2rem;}
.ampg-section10 amp-img{width: 100%;}
.ampg-section11{padding-top: 75px;padding-bottom: 75px;background-color: #909090;}
.ampg-section11{padding-top: 75px;padding-bottom: 75px;background-color: #909090;}
.ampg-section11 .ampg-row{margin: 0 15px;}
@media (max-width: 991px){.ampg-section11 .card{margin-bottom: 20px;}
}
.ampg-section11 .ampg-section-title{margin: 0;padding-bottom: 1rem;}
.ampg-section11 .ampg-text{margin: 0;}
.ampg-section12{padding-top: 60px;padding-bottom: 60px;background-color: white;}
.ampg-section12 blockquote{border-color: #ffc107;}
.ampg-section13{background-image: url('http://localhost/currentproject/ampgeneratorone/example/resources/pexels-photo-1028704.jpeg');}
.ampg-section14{padding-top: 60px;padding-bottom: 60px;background-color: white;}
.ampg-section14 .counter-container ul{margin-bottom: 0;}
.ampg-section14 .counter-container ul li{color: inherit;margin-bottom: 1rem;list-style: none;}
.ampg-section14 .counter-container ul li:before{position: absolute;left: 0px;padding-top: 3px;content: '';display: inline-block;text-align: center;margin: 10px 15px;line-height: 20px;transition: all .2s;color: #ffffff;background: #007bff;width: 10px;height: 10px;border-radius: 50%;border-radius: 0;transform: rotate(45deg);}
.ampg-section15{padding-top: 60px;padding-bottom: 60px;background-color: white;}
.ampg-section15 .counter-container ol{margin-bottom: 0;counter-reset: myCounter;}
.ampg-section15 .counter-container ol li{margin-bottom: 2rem;}
.ampg-section15 .counter-container ol li{z-index: 3;list-style: none;padding-left: .5rem;}
.ampg-section15 .counter-container ol li:before{z-index: 2;position: absolute;left: 0px;counter-increment: myCounter;content: counter(myCounter);text-align: center;margin: 0 10px;line-height: 30px;transition: all .2s;width: 35px;height: 35px;color: #007bff;font-size: 20px;font-weight: bold;border-radius: 50%;border: 2px solid #007bff;opacity: 0.5;}
.ampg-section16{padding-top: 60px;padding-bottom: 60px;background-image: url('http://localhost/currentproject/ampgeneratorone/example/resources/banner_2250x441.jpg');}
.ampg-section17{padding-top: 60px;padding-bottom: 60px;background-color: white;}
.ampg-section18{padding-top: 45px;padding-bottom: 45px;background-color: black;}
.ampg-section18 amp-img{text-align: center;}
.ampg-section18 .items-col .item{margin: 0;}
.ampg-section18 .item,.ampg-section18 .group-title{color: #efefef;padding-top: 0;}
@media (max-width: 767px){.ampg-section18 .items-col{text-align: center;margin: 2rem 0;}
}
.ampfooter{padding-top: 0px;padding-bottom: 0px;background-color: #232323;}
.ampfooter p{margin: 0;color: #ffffff;}
</style>
<script async src='https://cdn.ampproject.org/v0.js'></script>
<script async custom-element='amp-iframe' src='https://cdn.ampproject.org/v0/amp-iframe-0.1.js'></script>
<script async custom-element='amp-sidebar' src='https://cdn.ampproject.org/v0/amp-sidebar-0.1.js'></script>
<script async custom-element='amp-analytics' src='https://cdn.ampproject.org/v0/amp-analytics-0.1.js'></script>
</head>
<body><amp-analytics type="googleanalytics">
<script type=application/json>
{
"vars": {
"account": "UA-xxxxxx-1"
},
"triggers": {
"trackPageviewWithCustomUrl": {
"on": "visible",
"request": "pageview",
"vars": {
"title": "AMP Generator One",
"documentLocation": "https://www.canonical.com"
}
}
}
}
</script>
</amp-analytics>
<amp-sidebar id='sidebar' class='ampsidebar' layout='nodisplay' side='right'>
<div class='builder-sidebar' id='builder-sidebar'>
<button on='tap:sidebar.close' class='close-sidebar'>
<span></span>
<span></span>
</button>
<div class='sidebar text-white' data-app-modern-menu='true'><a class='text-white text-7' href='https://wwww.canonical.com/id/Cupcakes'>Cupcakes</a>
<a class='text-white text-7' href='https://wwww.canonical.com/id/Cake'>Cake</a>
<a class='text-white text-7' href='https://wwww.canonical.com/id/Muffin'>Muffin</a>
<a class='text-white text-7' href='https://wwww.canonical.com/id/Coffee'>Coffee</a>
</div></div></amp-sidebar><section class='menu ampsidebar' id='menu1'>
<nav class='headerbar sticky-nav'>
<div class='brand'>
<span class='brand-logo'>
<a href='https://www.canonical.com'>
<amp-img src='http://localhost/currentproject/ampgeneratorone/example/resources/logo/logo.png' width='70' height='70' alt='Logo'>
</amp-img>
</a>
</span>
<a href='https://www.canonical.com'>
<p class='brand-name ampg-fonts-style text-2'></p>
</a>
</div>
</nav>
<button on='tap:sidebar.toggle' class='ampstart-btn hamburger sticky-but'>
<span></span>
<span></span>
<span></span>
<span></span>
</button>
</section><section class='ampg-section content1 ampg-section1' id='section1'>
<div class='ampg-container'>
<h2 class='ampg-title align-center ampg-fonts-style ampg-bold text-white text-1'>AMP Generator One</h2>
</div>
</section><section class='ampg-section2' id='section2'>
<div class='container'>
<h1 class='ampg-section-title ampg-fonts-style align-right ampg-bold text-white text-1'>
<strong>AMP Generator One</strong></h1>
<h3 class='ampg-section-subtitle ampg-fonts-style align-right text-white ampg-light text-2'>
</h3>
<p class='ampg-fonts-style ampg-text align-right text-white text-7'>While this example could run in a regular browser but it must be tested under an AMP-compatible browser (firefox has a plugin)</p>
<div class='ampg-section-btn align-right'><a class='btn btn-md btn-primary text-4' href='#'>Would you like to know more?</a>\n<a class='btn btn-md btn-danger text-4' href='#'>Would you like to know more?</a>\n </div>
</div>
</section><section class='content3 ampg-section article ampg-section3' id='section3'>
<div class='container'>
<div class='ampg-row ampg-justify-content-center'>
<div class='ampg-col-sm-12 ampg-col-md-10 ampg-col-lg-8'>
<h3 class='ampg-fonts-style ampg-section-title ampg-light text-2'>The Cupcake</h3>
<p class='ampg-text ampg-fonts-style text-7'>
The earliest extant description of what is now often called a cupcake was in 1796, when a recipe for a light cake to bake in small cups was written in American Cookery by Amelia Simmons. The earliest extant documentation of the term cupcake itself was in Seventy-five Receipts for Pastry, Cakes, and Sweetmeats </p>
</div>
</div>
</div>
</section><section class='ampg-section4' id='section4'>
<div>
<div class='image-block'>
<amp-img src='http://localhost/currentproject/ampgeneratorone/example/resources/banner_2250x441.jpg' layout='responsive' width='2250' height='441' alt='The Cupcakes'>
</amp-img>
<div class='ampg-figure-caption'>
<p class='ampg-text align-center ampg-fonts-style text-black text-7'>The Cupcakes
</p>
</div>
<div class='ampg-section-btn align-center'><a class='btn btn-md btn-primary text-4' href='#'>More Information</a>
<a class='btn btn-md btn-warning text-4' href='#'>More Information</a>
</div></div></div></section><section class='section5 ampg-section5' id='section5'>
<div class='container'>
<div class='ampg-row ampg-justify-content-center'>
<div class='image-block ampg-col-sm-12 ampg-col-md-6'>
<amp-img src='http://localhost/currentproject/ampgeneratorone/example/resources/pexels-photo-1073767.jpeg' layout='responsive' width='300' height='300' alt='The Cupcakes'>
</amp-img>
</div>
<div class='text-block ampg-col-sm-12 ampg-col-md-6'>
<h3 class='ampg-section-title ampg-fonts-style align-left text-black text-5'>The Cupcakes</h3>
<p class='ampg-fonts-style ampg-text align-left text-black text-7'>The earliest extant description of what is now often called a cupcake was in 1796, when a recipe for "a light cake to bake in small cups" was written in American Cookery by Amelia Simmons. The earliest extant documentation of the term cupcake itself was in "Seventy-five Receipts for Pastry, Cakes, and Sweetmeats" in 1828 in Eliza Leslie's Receipts cookbook.<br>
In the early 19th century, there were two different uses for the term cup cake or cupcake. In previous centuries, before muffin tins were widely available, the cakes were often baked in individual pottery cups, ramekins, or molds and took their name from the cups they were baked in. This is the use of the name that has remained, and the name of "cupcake" is now given to any small, round cake that is about the size of a teacup. While English fairy cakes vary in size more than American cupcake, they are traditionally smaller and are rarely topped with elaborate icing.<br></p><div class='ampg-section-btn align-left'><a class='btn btn-md btn-primary text-4' href='#'>More Information</a></div></div></div></div></section><section class='section6 ampg-section6' id='section6'>
<div class='container'>
<div class='ampg-row ampg-justify-content-center'>
<div class='text-block ampg-col-sm-12 ampg-col-md-6'>
<h3 class='ampg-section-title ampg-fonts-style align-left text-black text-5'>The Cupcakes</h3>
<p class='ampg-fonts-style ampg-text align-left text-black text-7'>The earliest extant description of what is now often called a cupcake was in 1796, when a recipe for "a light cake to bake in small cups" was written in American Cookery by Amelia Simmons. The earliest extant documentation of the term cupcake itself was in "Seventy-five Receipts for Pastry, Cakes, and Sweetmeats" in 1828 in Eliza Leslie's Receipts cookbook.<br>
In the early 19th century, there were two different uses for the term cup cake or cupcake. In previous centuries, before muffin tins were widely available, the cakes were often baked in individual pottery cups, ramekins, or molds and took their name from the cups they were baked in. This is the use of the name that has remained, and the name of "cupcake" is now given to any small, round cake that is about the size of a teacup. While English fairy cakes vary in size more than American cupcake, they are traditionally smaller and are rarely topped with elaborate icing.<br></p><div class='ampg-section-btn align-left'><a class='btn btn-md btn-primary text-4' href='#'>More Information</a></div></div>
<div class='image-block ampg-col-sm-12 ampg-col-md-6'>
<amp-img src='http://localhost/currentproject/ampgeneratorone/example/resources/pexels-photo-1073767.jpeg' layout='responsive' width='300' height='300' alt='The Cupcakes'>
</amp-img>
</div>
</div></div></section><section class='ampg-section7' id='section7'>
<div class='container'>
<div class='ampg-row ampg-justify-content-center'>
<table cellspacing=0 class='table ampg-text ampg-fonts-style' width=100%><thead><tr><th><p class='ampg-text tabletitle ampg-fonts-style align-left text-7'>Product</p></th><th><p class='ampg-text tabletitle ampg-fonts-style align-left text-7'>Price</p></th></tr></thead><tbody><tr><td><p class='ampg-text ampg-fonts-style text-7'>Cupcake</p></td><td><p class='ampg-text ampg-fonts-style text-7'>200</p></td></tr><tr><td><p class='ampg-text ampg-fonts-style text-7'>Cupcake</p></td><td><p class='ampg-text ampg-fonts-style text-7'>200</p></td></tr><tr><td><p class='ampg-text ampg-fonts-style text-7'>Cupcake</p></td><td><p class='ampg-text ampg-fonts-style text-7'>200</p></td></tr></tbody></table></div></div></section><pre>Note:Google map musn't be at the top of the page. It's an amp restriction</pre><section class='map ampg-section8' id='section8'>
<div class='container'>
<div class='ampg-row ampg-justify-content-center'>
<div class='map-title ampg-col-sm-12 ampg-col-md-12 align-center'>
</div>
<div class='ampg-col-md-12 map-box'>
<div class='google-map'>
<amp-iframe src='https://www.google.com/maps/embed?pb=!1m10!1m8!1m3!1d13320.170086624597!2d-70.60383335!3d-33.422135749999995!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2scl!4v1536022894740'
height='400' layout='fixed-height'
sandbox='allow-scripts allow-same-origin allow-popups'
frameborder='0'>
<h4 placeholder=''>Google Map Loading..</h4>
</amp-iframe></div>
</div>
</div>
</div>
</section><section class='map ampg-section9' id='section9'>
<div class='ampg-row ampg-justify-content-center'>
<div class='map-title ampg-col-sm-12 ampg-col-md-12 align-center'>
</div>
<div class='google-map'><amp-iframe src='https://www.google.com/maps/embed?pb=!1m10!1m8!1m3!1d13320.170086624597!2d-70.60383335!3d-33.422135749999995!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2scl!4v1536022894740'
height='400' layout='fixed-height' sandbox='allow-scripts allow-same-origin allow-popups' frameborder='0'>
<h4 placeholder=''>Google Map Loading...</h4>
</amp-iframe></div>
</div>
</section><section class='ampg-section ampg-section10' id='features10'>
<div class='container'>
<div class='ampg-row ampg-justify-content-center'><div class='card ampg-col-sm-12 ampg-col-md-6 ampg-col-lg-4'>
<div class='card-wrapper'>
<div class='card-img'>
<amp-img src='http://localhost/currentproject/ampgeneratorone/example/resources/cupcake_square.jpg' layout='responsive' width='400' height='400' alt='Cupcake'>
</amp-img>
</div>
<div class='card-box'>
<h4 class='card-title ampg-fonts-style align-left ampg-light text-black text-2'>Cupcake</h4>
<p class='ampg-text ampg-fonts-style align-left text-black text-4'>The earliest extant description of what is now often called a cupcake was in 1796, when a recipe for a light cake to bake in small cups was written in American Cookery by Amelia Simmons. The earliest extant documentation of the term cupcake itself was in Seventy-five Receipts for Pastry, Cakes, and Sweetmeats </p>
<div class='ampg-section-btn align-left'></div>
</div>
</div>
</div><div class='card ampg-col-sm-12 ampg-col-md-6 ampg-col-lg-4'>
<div class='card-wrapper'>
<div class='card-img'>
<amp-img src='http://localhost/currentproject/ampgeneratorone/example/resources/cupcake_square.jpg' layout='responsive' width='400' height='400' alt='Cupcake'>
</amp-img>
</div>
<div class='card-box'>
<h4 class='card-title ampg-fonts-style align-left ampg-light text-black text-2'>Cupcake</h4>
<p class='ampg-text ampg-fonts-style align-left text-black text-4'>The earliest extant description of what is now often called a cupcake was in 1796, when a recipe for a light cake to bake in small cups was written in American Cookery by Amelia Simmons. The earliest extant documentation of the term cupcake itself was in Seventy-five Receipts for Pastry, Cakes, and Sweetmeats </p>
<div class='ampg-section-btn align-left'></div>
</div>
</div>
</div><div class='card ampg-col-sm-12 ampg-col-md-6 ampg-col-lg-4'>
<div class='card-wrapper'>
<div class='card-img'>
<amp-img src='http://localhost/currentproject/ampgeneratorone/example/resources/cupcake_square.jpg' layout='responsive' width='400' height='400' alt='Cupcake'>
</amp-img>
</div>
<div class='card-box'>
<h4 class='card-title ampg-fonts-style align-left ampg-light text-black text-2'>Cupcake</h4>
<p class='ampg-text ampg-fonts-style align-left text-black text-4'>The earliest extant description of what is now often called a cupcake was in 1796, when a recipe for a light cake to bake in small cups was written in American Cookery by Amelia Simmons. The earliest extant documentation of the term cupcake itself was in Seventy-five Receipts for Pastry, Cakes, and Sweetmeats </p>
<div class='ampg-section-btn align-left'></div>
</div>
</div>
</div></div><div class='ampg-row ampg-justify-content-center'><div class='card ampg-col-sm-12 ampg-col-md-6 ampg-col-lg-4'>
<div class='card-wrapper'>
<div class='card-img'>
<amp-img src='http://localhost/currentproject/ampgeneratorone/example/resources/cupcake_square.jpg' layout='responsive' width='400' height='400' alt='Cupcake'>
</amp-img>
</div>
<div class='card-box'>
<h4 class='card-title ampg-fonts-style align-left ampg-light text-black text-2'>Cupcake</h4>
<p class='ampg-text ampg-fonts-style align-left text-black text-4'>The earliest extant description of what is now often called a cupcake was in 1796, when a recipe for a light cake to bake in small cups was written in American Cookery by Amelia Simmons. The earliest extant documentation of the term cupcake itself was in Seventy-five Receipts for Pastry, Cakes, and Sweetmeats </p>
<div class='ampg-section-btn align-left'></div>
</div>
</div>
</div><div class='card ampg-col-sm-12 ampg-col-md-6 ampg-col-lg-4'>
<div class='card-wrapper'>
<div class='card-img'>
<amp-img src='http://localhost/currentproject/ampgeneratorone/example/resources/cupcake_square.jpg' layout='responsive' width='400' height='400' alt='Cupcake'>
</amp-img>
</div>
<div class='card-box'>
<h4 class='card-title ampg-fonts-style align-left ampg-light text-black text-2'>Cupcake</h4>
<p class='ampg-text ampg-fonts-style align-left text-black text-4'>The earliest extant description of what is now often called a cupcake was in 1796, when a recipe for a light cake to bake in small cups was written in American Cookery by Amelia Simmons. The earliest extant documentation of the term cupcake itself was in Seventy-five Receipts for Pastry, Cakes, and Sweetmeats </p>
<div class='ampg-section-btn align-left'></div>
</div>
</div>
</div><div class='card ampg-col-sm-12 ampg-col-md-6 ampg-col-lg-4'>
<div class='card-wrapper'>
<div class='card-img'>
<amp-img src='http://localhost/currentproject/ampgeneratorone/example/resources/cupcake_square.jpg' layout='responsive' width='400' height='400' alt='Cupcake'>
</amp-img>
</div>
<div class='card-box'>
<h4 class='card-title ampg-fonts-style align-left ampg-light text-black text-2'>Cupcake</h4>
<p class='ampg-text ampg-fonts-style align-left text-black text-4'>The earliest extant description of what is now often called a cupcake was in 1796, when a recipe for a light cake to bake in small cups was written in American Cookery by Amelia Simmons. The earliest extant documentation of the term cupcake itself was in Seventy-five Receipts for Pastry, Cakes, and Sweetmeats </p>
<div class='ampg-section-btn align-left'></div>
</div>
</div>
</div></div><div class='ampg-row ampg-justify-content-center'><div class='card ampg-col-sm-12 ampg-col-md-6 ampg-col-lg-4'>
<div class='card-wrapper'>
<div class='card-img'>
<amp-img src='http://localhost/currentproject/ampgeneratorone/example/resources/cupcake_square.jpg' layout='responsive' width='400' height='400' alt='Cupcake'>
</amp-img>
</div>
<div class='card-box'>
<h4 class='card-title ampg-fonts-style align-left ampg-light text-black text-2'>Cupcake</h4>
<p class='ampg-text ampg-fonts-style align-left text-black text-4'>The earliest extant description of what is now often called a cupcake was in 1796, when a recipe for a light cake to bake in small cups was written in American Cookery by Amelia Simmons. The earliest extant documentation of the term cupcake itself was in Seventy-five Receipts for Pastry, Cakes, and Sweetmeats </p>
<div class='ampg-section-btn align-left'></div>
</div>
</div>
</div><div class='card ampg-col-sm-12 ampg-col-md-6 ampg-col-lg-4'>
<div class='card-wrapper'>
<div class='card-img'>
<a href='#'>
<amp-img src='http://localhost/currentproject/ampgeneratorone/example/resources/cupcake_square.jpg' layout='responsive' width='400' height='400' alt='Cupcake Link'>
</amp-img>
</a>
</div>
<div class='card-box'>
<h4 class='card-title ampg-fonts-style align-left ampg-light text-black text-2'>Cupcake Link</h4>
<p class='ampg-text ampg-fonts-style align-left text-black text-4'>The earliest extant description of what is now often called a cupcake was in 1796, when a recipe for a light cake to bake in small cups was written in American Cookery by Amelia Simmons. The earliest extant documentation of the term cupcake itself was in Seventy-five Receipts for Pastry, Cakes, and Sweetmeats </p>
<div class='ampg-section-btn align-left'></div>
</div>
</div>
</div></div></div></section><section class='ampg-section ampg-section11' id='section11'>
<div class='container'>
<div class='ampg-row ampg-justify-content-center'><div class='card ampg-col-sm-12 ampg-col-md-6 ampg-col-lg-6'>
<h3 class='ampg-section-title ampg-fonts-style align-center text-white text-5'>
<i class='fas fa-birthday-cake'></i><br>
Cupcake</h3>
<p class='ampg-text ampg-fonts-style align-center text-white text-4'>The earliest extant description of what is now often called a cupcake was in 1796, when a recipe for a light cake to bake in small cups was written in American Cookery by Amelia Simmons. The earliest extant documentation of the term cupcake itself was in Seventy-five Receipts for Pastry, Cakes, and Sweetmeats </p>
</div><div class='card ampg-col-sm-12 ampg-col-md-6 ampg-col-lg-6'>
<h3 class='ampg-section-title ampg-fonts-style align-center text-white text-5'>
<i class='fas fa-birthday-cake'></i><br>
Cupcake</h3>
<p class='ampg-text ampg-fonts-style align-center text-white text-4'>The earliest extant description of what is now often called a cupcake was in 1796, when a recipe for a light cake to bake in small cups was written in American Cookery by Amelia Simmons. The earliest extant documentation of the term cupcake itself was in Seventy-five Receipts for Pastry, Cakes, and Sweetmeats </p>
</div></div></div></section> <section class='content12 ampg-section article ampg-section12' id='section12'>
<div class='container'>
<div class='ampg-row ampg-justify-content-center'>
<div class='ampg-text ampg-fonts-style ampg-col-sm-12 ampg-col-md-8 text-4'>
<blockquote>The earliest extant description of what is now often called a cupcake was in 1796, when a recipe for a light cake to bake in small cups was written in American Cookery by Amelia Simmons. The earliest extant documentation of the term cupcake itself was in Seventy-five Receipts for Pastry, Cakes, and Sweetmeats </blockquote>
</div>
</div>
</div>
</section><section class='ampg-section13 ' id='section13'>
<div class='container'>
<h1 class='ampg-section-title ampg-fonts-style align-right ampg-bold text-white text-1'>
<strong>Cupcake Link</strong>
</h1>
<h3 class='ampg-section-subtitle ampg-fonts-style align-right text-white ampg-light text-2'>The earliest extant description of what is now often called a cupcake was in 1796, when a recipe for a light cake to bake in small cups was written in American Cookery by Amelia Simmons. The earliest extant documentation of the term cupcake itself was in Seventy-five Receipts for Pastry, Cakes, and Sweetmeats </h3>
<div class='ampg-section-btn align-right'>
<a class='btn btn-md btn-primary text-4' href='#'>link</a>
</div>
</div>
</section><section class='ampg-section ampg-section14' id='section14'>
<div class='ampg-container'>
<div class='ampg-text counter-container ampg-fonts-style text-7'>
<ul><li><strong>Chocolate</strong>- Chocolate #</li>
<li><strong>Chocolate</strong>- Chocolate #</li>
<li><strong>Chocolate</strong>- Chocolate #</li>
</ul></div></div></section><section class='ampg-section ampg-section15' id='section15'>
<div class='ampg-container'>
<div class='ampg-text counter-container ampg-fonts-style text-7'>
<ol><li><strong>Chocolate</strong>- Chocolate #</li>
<li><strong>Chocolate</strong>- Chocolate #</li>
<li><strong>Chocolate</strong>- Chocolate #</li>
</ol></div></div></section><section class='ampg-section ampg-section16' id='section16'>
<div class='ampg-container'>
<div class='ampg-section-btn align-center'><a class='btn btn-md btn-primary text-4' href='#'>primary</a>
<a class='btn btn-md btn-success text-4' href='#'>success</a>
<a class='btn btn-md btn-warning text-4' href='#'>warning</a>
<a class='btn btn-md btn-danger text-4' href='#'>danger</a>
</div></div></section> <section class='ampg-section ampg-section17' id='section17'>
<div class='ampg-container'>
<div class='ampg-section-btn align-center'><a class='btn btn-md btn-primary text-4' href='#'>primary</a>
<a class='btn btn-md btn-success text-4' href='#'>success</a>
<a class='btn btn-md btn-warning text-4' href='#'>warning</a>
<a class='btn btn-md btn-danger text-4' href='#'>danger</a>
</div></div></section> <section class='ampg-section18' id='section18'>
<div class='container'>
<div class='ampg-row ampg-justify-content-center'>
<div class='image-block ampg-col-sm-12 ampg-col-md-4 align-center'>
<div class='items'>
<p class='item ampg-fonts-style align-left text-white text-5'>Cupcakes</p>
<p class='item ampg-fonts-style align-left text-white text-7'>The earliest extant description of what is now often called a cupcake was in 1796, when a recipe for a light cake to bake in small cups was written in American Cookery by Amelia Simmons. The earliest extant documentation of the term cupcake itself was in Seventy-five Receipts for Pastry, Cakes, and Sweetmeats </p>
</div>
<a class='btn btn-md btn-primary text-4' href='#'>primary</a>
</div><div class='items-col ampg-col-sm-12 align-right ampg-col-md-4'>
<div class='items'><p class='item ampg-fonts-style text-5'><a class='text-white' href='#'>Cupcakes</a></p><p class='item ampg-fonts-style text-7'><a class='text-white' href='#'>Easy Little Pandas</a></p><p class='item ampg-fonts-style text-7'><a class='text-white' href='#'>Apple Pie Cupcakes</a></p><p class='item ampg-fonts-style text-7'><a class='text-white' href='#'>Chocolate</a></p></div></div><div class='items-col ampg-col-sm-12 align-right ampg-col-md-4'>
<div class='items'><p class='item ampg-fonts-style text-5'><a class='text-white' href='#'>Muffins</a></p><p class='item ampg-fonts-style text-7'><a class='text-white' href='#'>Apple-Cinnamon</a></p><p class='item ampg-fonts-style text-7'><a class='text-white' href='#'>Banana</a></p></div></div></div>
</div>
</section></div></div></div></section><section class='footer1 ampfooter' id='footer1-3w'>
<div class='container'>
<div class='ampg-col-sm-12 align-center text-white'>
<p class='ampg-text ampg-fonts-style text-7'>
Copyright something(c) <a href='https://www.canonical.com'>See as desktop</a>
</p>
</div>
</div>
</section>
</body>
</html>
|
Download
