Comments (1)
I copied and pasted more code from AMP Start, but the result is the same.
Here is the new source code:
<html ⚡>
<head>
<meta charset="utf-8">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script custom-element="amp-sidebar" src="https://cdn.ampproject.org/v0/amp-sidebar-0.1.js" async></script>
<script custom-element="amp-accordion" src="https://cdn.ampproject.org/v0/amp-accordion-0.1.js" async></script>
<title>Hello, AMPs</title>
<link rel="canonical" href="https://amp.dev/documentation/guides-and-tutorials/start/create/basic_markup/">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "NewsArticle",
"headline": "Open-source framework for publishing content",
"datePublished": "2015-10-07T12:02:41Z",
"image": [
"logo.jpg"
]
}
</script>
<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>
<noscript>
<style amp-boilerplate>
body {
-webkit-animation: none;
-moz-animation: none;
-ms-animation: none;
animation: none
}
</style>
</noscript>
</head>
<body>
<header class="ampstart-headerbar fixed flex justify-start items-center top-0 left-0 right-0 pl2 pr4">
<div role="button" on="tap:header-sidebar.toggle" tabindex="0" class="ampstart-navbar-trigger md-hide lg-hide pr2">☰</div>
<amp-img src="../img/components/sidebar-example-logo.png" width="110" height="33" layout="fixed" class="my0 mx-auto" alt="Example logo image"></amp-img>
<nav class="ampstart-headerbar-nav ampstart-nav xs-hide sm-hide">
<ul class="list-reset center m0 p0 flex justify-center nowrap">
<li class="ampstart-nav-item ampstart-nav-dropdown relative">
<!-- Start Dropdown -->
<amp-accordion layout="container" disable-session-states="" class="ampstart-dropdown absolute top-0 left-0 right-0 bottom-0">
<section>
<header>Fashion</header>
<ul class="ampstart-dropdown-items list-reset m0 p0">
<li class="ampstart-dropdown-item">
<a href="#" class="text-decoration-none">Styling Tips</a>
</li>
<li class="ampstart-dropdown-item">
<a href="#" class="text-decoration-none">Designers</a>
</li>
</ul>
</section>
</amp-accordion>
<!-- End Dropdown -->
</li>
<li class="ampstart-nav-item ">
<a href="#" class="text-decoration-none block">Travel</a>
</li>
<li class="ampstart-nav-item ampstart-nav-dropdown relative">
<!-- Start Dropdown -->
<amp-accordion layout="container" disable-session-states="" class="ampstart-dropdown absolute top-0 left-0 right-0 bottom-0">
<section>
<header>Food</header>
<ul class="ampstart-dropdown-items list-reset m0 p0">
<li class="ampstart-dropdown-item"><a href="#" class="text-decoration-none">Recipes</a></li>
<li class="ampstart-dropdown-item"><a href="#" class="text-decoration-none">Hosting Tips</a></li>
</ul>
</section>
</amp-accordion>
<!-- End Dropdown -->
</li>
<li class="ampstart-nav-item ">
<a href="#" class="text-decoration-none block">Beauty</a>
</li>
<li class="ampstart-nav-item ">
<a href="#" class="text-decoration-none block">Shop</a>
</li>
</ul>
</nav>
</header>
</body>
</html>
from ampstart.
Related Issues (20)
- Dependency deprecation warning: babel-preset-es2015 (npm)
- Dependency deprecation warning: gulp-util (npm)
- Components files watch issue - not compiled to dist
- Dependency deprecation warning: babel-preset-es2015 (npm)
- Dependency deprecation warning: gulp-util (npm)
- Dependency deprecation warning: babel-preset-es2015 (npm)
- Dependency deprecation warning: gulp-util (npm)
- Ability to specify the amp component with specific version HOT 3
- Preview images missing from AMP Travel Template
- Remove Google+ from social icon list examples HOT 1
- Filters not working in Travel template
- Components Navigation Example with Validation Error
- ReferenceError: primordials is not defined HOT 1
- Is it possible to make the RESPONSIVE MENUBAR with hoverable dropdown? HOT 2
- How is the length of "The author stylesheet specified in tag 'style amp-custom'" computed? HOT 1
- Intallation fails on Windows HOT 1
- Build fails on Windows.
- Rename the default branch of this repo from `master` to `main` HOT 1
- Getting errors while trying to added a Material Ui component with AMP
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from ampstart.