amphtml/examples/a4a-fullwidth.amp.html at master · yieldbot/amphtml · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
<!doctype html>
<html ⚡>
<head>
  <meta charset="utf-8">
  <title>AdSense full-width ad examples</title>
  <link rel="canonical" href="http://nonblocking.io/">
  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
  <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>
  <script async src="https://cdn.ampproject.org/v0.js"></script>
  <script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
  <script async custom-element="amp-ad" src="https://cdn.ampproject.org/v0/amp-ad-0.1.js"></script>
  <style amp-custom>
    body {
      background-color: #DDDDDD;
    }
    /** Put all content in unusual margins for testing. */
    .content {
      margin-left: 15px;
      margin-right: 12px;
    }
    .further-indent {
      margin-left: 30px;
      margin-right: 30px;
    }
    h1 {
      padding: 12px 0;
      margin: 0;
    }
    p {
      margin: 0;
      padding: 6px 2px;
    }
    h1, .everything {
      background-color: #999999;
    }
    amp-ad div[placeholder] {
      background-color: lightgray;
    }
    amp-ad div[fallback] {
      background-color: black;
    }
    amp-ad div[placeholder]::after {
      content: "loading ...";
    }
    amp-ad div[fallback]::after {
      content: "No ad";
      color: white;
    }
    amp-user-notification {
      background-color: lightgray;
      padding: 5px;
    }
    .header-img {
      margin: 0 auto;
      text-align: center;
    }
  </style>
</head>
<body>
<h1>Content!</h1>
<div class="content">

  <div class="header-img">
    <amp-img src="img/hero@1x.jpg"
             width="289" height="216"></amp-img>
  </div>

  <p>
    Canem ipsum dolor sit amet, consectetur adipiscing elit.
    Curabitur ullamcorper turpis vel commodo scelerisque. Phasellus
    luctus nunc ut elit cursus, et imperdiet diam vehicula.
    Duis et nisi sed urna blandit bibendum et sit amet erat.
    Suspendisse potenti. Curabitur consequat volutpat arcu nec
    elementum. Etiam a turpis ac libero varius condimentum.
    Maecenas sollicitudin felis aliquam tortor vulputate,
    ac posuere velit semper.
  </p>

  <amp-ad width="100vw" height=320
          type="adsense"
          data-ad-client="ca-pub-2383777339857329"
          data-ad-slot="4121425836"
          data-adtest="on"
          data-auto-format="rspv"
          data-full-width>
    <div overflow></div>
  </amp-ad>

  <p>
    Fusce pretium tempor justo, vitae consequat dolor maximus eget.
    Aliquam iaculis tincidunt quam sed maximus. Suspendisse faucibus
    ornare sodales. Nullam id dolor vitae arcu consequat ornare a
    et lectus. Sed tempus eget enim eget lobortis.
    Mauris sem est, accumsan sed tincidunt ut, sagittis vel arcu.
    Nullam in libero nisi.
  </p>


  <div class="further-indent">
    <amp-ad width="100vw" height=320
            type="adsense"
            data-ad-client="ca-pub-2383777339857329"
            data-ad-slot="4121425836"
            data-adtest="on"
            data-auto-format="rspv"
            data-full-width>
      <div overflow></div>
    </amp-ad>


    <p>
      Sed pharetra semper fringilla. Nulla fringilla, neque eget
      varius suscipit, mi turpis congue odio, quis dignissim nisi
      nulla at erat. Duis non nibh vel erat vehicula hendrerit eget
      vel velit. Donec congue augue magna, nec eleifend dui porttitor
      sed. Cras orci quam, dignissim nec elementum ac, bibendum et purus.
      Ut elementum mi eget felis ultrices tempus. Maecenas nec sodales
      ex. Phasellus ultrices, purus non egestas ullamcorper, felis
      lorem ultrices nibh, in tristique mauris justo sed ante.
      Nunc commodo purus feugiat metus bibendum consequat. Duis
      finibus urna ut ligula auctor, sed vehicula ex hecuba.
      Sed sed augue auctor, porta turpis ultrices, cursus diam.
      In venenatis aliquet porta. Sed volutpat fermentum quam,
      ac molestie nulla porttitor ac. Donec porta risus ut enim
      pellentesque, id placerat elit ornare.
    </p>
  </div>

  <amp-ad width="100vw" height=320
          type="adsense"
          data-ad-client="ca-pub-2383777339857329"
          data-ad-slot="4121425836"
          data-auto-format="mcrspv"
          data-full-width>
    <div overflow></div>
  </amp-ad>

  <p id="section1">
    Curabitur convallis, urna quis pulvinar feugiat, purus diam
    posuere turpis, sit amet poodle purus justo et mi. Donec
    sapien urna, aliquam ut lacinia quis, varius vitae ex.
    Maecenas efficitur iaculis lorem, at imperdiet orci viverra
    in. Nullam eu erat eu metus ultrices viverra a sit amet leo.
    Pellentesque est felis, pulvinar mollis sollicitudin et,
    suscipit eget massa. Nunc bibendum non nunc et consequat.
    Quisque auctor est vel leo faucibus, non faucibus magna ultricies.
    Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
    posuere cubilia Curae; Vestibulum tortor lacus, bibendum et
    enim eu, vehicula placerat erat. Nullam gravida rhoncus accumsan.
    Integer suscipit iaculis elit nec mollis. Vestibulum eget arcu
    nec lectus finibus rutrum vel sed orci.
  </p>

  <amp-ad width="100vw" height=320
          type="adsense"
          data-ad-client="ca-pub-2383777339857329"
          data-ad-slot="4121425836"
          data-adtest="on"
          data-auto-format="rspv"
          data-full-width>
    <div placeholder></div>
    <div fallback></div>
    <div overflow></div>
  </amp-ad>
</div>

</body>
</html>