Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Adjusted spacing and indentation for legibility

  • Loading branch information...
commit 10a69223933ccb304ba84ea2bc88112afee04820 1 parent e1b6e83
@nwtn nwtn authored
Showing with 65 additions and 66 deletions.
  1. +65 −66 template/my_demo.html
View
131 template/my_demo.html
@@ -10,90 +10,89 @@
5. Fill out credits
6. Either email us or do a GitHub pull request on the gh-branch (put your files in a folder with a descriptive name).
-If you need to see how other people have done this, check out: http://demos.responsiveimages.org
-
--->
+If you need to see how other people have done this, check out: http://demos.responsiveimages.org -->
<!--[if lte IE 8]> <html lang="en" class="ie-lte8"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!-->
<html lang="en">
<!--<![endif]-->
-<head>
-<meta charset="utf-8">
-
-<title>[[NAME OF DEMO]]</title>
-<meta name="author" content ="[[YOUR NAME]], contact: [[YOUR EMAIL]]">
+ <head>
+ <meta charset="utf-8">
+
+ <title>[[NAME OF DEMO]]</title>
+ <meta name="author" content ="[[YOUR NAME]], contact: [[YOUR EMAIL]]">
+
+ <meta name="description" content="Our goal is a markup-based means of delivering alternate image sources based on device capabilities.">
+ <meta property="og:url" content="http://responsiveimages.org">
+ <meta property="og:site_name" content="Responsive Images Community Group">
+ <meta property="og:type" content="website">
+ <meta property="og:title" content="Responsive Images Community Group">
+ <meta property="og:image" content="http://responsiveimages.org/img/ricg-icon.png">
+ <meta property="og:description" content="Read the latest news on responsive images, and get involved!">
+ <meta name="viewport" content="width=device-width,initial-scale=1">
+ <link rel="stylesheet" href="http://demos.responsiveimages.org/assets/prism.css">
+ <link rel="stylesheet" href="http://demos.responsiveimages.org/css/demo-page.css">
+ <link rel="stylesheet" href="http://responsiveimages.org/css/enhanced.css" media="only all">
+ </head>
+ <body>
+ <header class="doc-head">
+ <h1 class="logo"><a href="http://responsiveimages.org"><img src="http://responsiveimages.org/img/logo.png" alt="Responsive Images Community Group logo"></a></h1>
+ </header>
-<meta name="description" content="Our goal is a markup-based means of delivering alternate image sources based on device capabilities.">
-<meta property="og:url" content="http://responsiveimages.org">
-<meta property="og:site_name" content="Responsive Images Community Group">
-<meta property="og:type" content="website">
-<meta property="og:title" content="Responsive Images Community Group">
-<meta property="og:image" content="http://responsiveimages.org/img/ricg-icon.png">
-<meta property="og:description" content="Read the latest news on responsive images, and get involved!">
-<meta name="viewport" content="width=device-width,initial-scale=1">
-<link rel="stylesheet" href="http://demos.responsiveimages.org/assets/prism.css">
-<link rel="stylesheet" href="http://demos.responsiveimages.org/css/demo-page.css">
-<link rel="stylesheet" href="http://responsiveimages.org/css/enhanced.css" media="only all">
-</head>
-<body>
-<header class="doc-head">
- <h1 class="logo"><a href="http://responsiveimages.org"><img src="http://responsiveimages.org/img/logo.png" alt="Responsive Images Community Group logo"></a></h1>
-</header>
-<div class="main">
- <section class="picturedemo">
- <h1><a class="navlink" href="../">Demos</a> <span>[[FUNKY DEMO]]</span></h1>
- <figure>
-
- <!-- WRITE YOUR DEMO HERE -->
- <picture>
-
- <source media="(min-width: 320px)" src="images/tiny.jpg">
- <source media="(min-width: 600px)" src="images/small.jpg">
- <source media="(min-width: 800px)" src="images/original.jpg">
-
- <!-- fallback if picture is not supported -->
- <img src="images/original.jpg" alt="">
-
- <!-- alternate text -->
- <p>[[ALT TEXT]]</p>
- </picture>
-
- <figcaption>
- <p><strong>Rotate/resize the window the image change.</strong>
- [[DESCRIBE YOUR DEMO AND WHAT IT DOES]]</p>
- </figcaption>
-
- </figure>
-</section>
+ <div class="main">
+ <section class="picturedemo">
+ <h1><a class="navlink" href="../">Demos</a> <span>[[FUNKY DEMO]]</span></h1>
-<section>
- <h2>HTML</h2>
+ <figure>
+ <!-- WRITE YOUR DEMO HERE -->
+ <picture>
+ <source media="(min-width: 320px)" src="images/tiny.jpg">
+ <source media="(min-width: 600px)" src="images/small.jpg">
+ <source media="(min-width: 800px)" src="images/original.jpg">
+
+ <!-- fallback if picture is not supported -->
+ <img src="images/original.jpg" alt="">
+
+ <!-- alternate text -->
+ <p>[[ALT TEXT]]</p>
+ </picture>
+
+ <figcaption>
+ <p><strong>[[DESCRIBE YOUR DEMO AND WHAT IT DOES]]</strong></p>
+ </figcaption>
+ </figure>
+ </section>
+
+ <section>
+ <h2>HTML</h2>
<div class="demosource"><code class="language-markup">
<!-- COPY YOUR DEMO'S CODE HERE -->
&lt;picture>
-
+
&lt;source media="(min-width: 320px)" src="images/tiny.jpg">
&lt;source media="(min-width: 600px)" src="images/small.jpg">
&lt;source media="(min-width: 800px)" src="images/original.jpg">
-
+
&lt;!-- fallback if picture is not supported -->
&lt;img src="images/original.jpg" alt="">
-
+
&lt;!-- alternate text -->
&lt;p>[[ALT TEXT]]&lt;/p>
&lt;/picture></code></div>
-</section>
-<section>
- <h2>Credits</h2>
- <p><em>Author: <a href="[[YOUR HOMPAGE]]">[[YOUR NAME]]</a> / <a href="https://twitter.com/[[YOUR TWITTER]]">@[[YOUR TWITTER]]</a></em></p>
-</section>
-</div>
-<!-- code highlighting via prism.js -->
-<script src="http://demos.responsiveimages.org//assets/prism.js"></script>
-<script src="http://demos.responsiveimages.org//js/picturefill.js"></script>
-<script>var _gaq=[['_setAccount','UA-35760540-1'],['_trackPageview'],['_setDomainName','responsiveimages.org']];(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];g.src='//www.google-analytics.com/ga.js';s.parentNode.insertBefore(g,s)}(document,'script'))</script>
-</body>
+ </section>
+
+ <section>
+ <h2>Credits</h2>
+ <p><em>Author: <a href="[[YOUR HOMPAGE]]">[[YOUR NAME]]</a> / <a href="https://twitter.com/[[YOUR TWITTER]]">@[[YOUR TWITTER]]</a></em></p>
+ </section>
+ </div>
+
+ <!-- code highlighting via prism.js -->
+ <script src="http://demos.responsiveimages.org//assets/prism.js"></script>
+ <script src="http://demos.responsiveimages.org//js/picturefill.js"></script>
+ <script>var _gaq=[['_setAccount','UA-35760540-1'],['_trackPageview'],['_setDomainName','responsiveimages.org']];(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];g.src='//www.google-analytics.com/ga.js';s.parentNode.insertBefore(g,s)}(document,'script'))</script>
+ </body>
+
</html>
Please sign in to comment.
Something went wrong with that request. Please try again.