AMP in DNN

AMP of DNN-Hosting

HTML

<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-sidebar" src="https://cdn.ampproject.org/v0/amp-sidebar-0.1.js"></script>
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
<link href='https://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
<nav class="navbar navbar-default navbar-fixed-top">
  <h2 class="outline">DNN Hosting</h2>
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#page-top">
        <amp-img class="img-responsive" src="http://dnn-hosting.nl/Portals/2/Skins/DNNHosting2016/images/logoIdas.png" alt="Idas Internet &amp; ICT Logo" title="Idas Internet &amp; ICT Logo" layout="responsive" width="80" height="50"></amp-img>
      </a>
      <div id="mobMenuBtnWrap" class="col-sm-6 col-xs-4 pull-right">
        <button id="mobMenuBtn" on='tap:sidebar.open'>
          <div id="mobMenuIcon">
            <span class="iconMobMenu first"></span>
            <span class="iconMobMenu"></span>
            <span class="iconMobMenu"></span>
          </div>
          <div id="mobMenuTxt">MENU</div>
        </button>
      </div>
    </div>
  </div>
</nav>
<amp-sidebar id='sidebar' layout="nodisplay" side="right">
  <ul class="list-unstyled text-center">
    <li>
      <a href="/Bestellen">Bestellen</a>
    </li>
    <li><a href="tel:055-5768945"><i class="fa fa-phone" aria-hidden="true"></i>055-5768945</a></li>
    <li><a href="mailto:[email protected]"><i class="fa fa-envelope" aria-hidden="true"></i>[email protected]</a></li>
 ...

CSS

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
   }
 }
 
 body {
   -webkit-animation: none;
   -moz-animation: none;
   -ms-animation: none;
   animation: none
 }
 
 html {
   -ms-text-size-adjust: 100%;
   -webkit-text-size-adjust: 100%
 }
 
 body {
   margin: 0;
   height: auto;
   position: relative;
   width: 100%;
   overflow-x: hidden;
   height: 100%;
   overflow-x: hidden;
   font-family: "Roboto Slab", "Helvetica Neue", Helvetica, Arial, sans-serif;
   webkit-tap-highlight-color: #770028
 }
 
 aside,
 footer,
 header,
 main,
 nav,
 section {
   display: block
 }
 
 strong {
   font-weight: 700
 }
 
 amp-img {
   border: 0
 }
 
 hr {
   -webkit-box-sizing: content-box;
   -moz-box-sizing: content-box;
   box-sizing: content-box;
   height: 0
 }
 
 button,
 input,
 textarea {
   color: inherit;
   font: inherit;
   margin: 0
 }
 
 button {
   overflow: visible
 }
 
 button,
 select {
   text-transform: none
 }
 
 button {
   -webkit-appearance: button;
   cursor: pointer
 }
 
 input {
   line-height: normal
 }
 
 input[type="checkbox"] {
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
   padding: 0
 }
 
 :before,
 :after {
   -webkit-box-sizing: border-box;
 ...