amphtml/examples/amp-ad/insurads.amp.html at 20f096e6dc547f1aec1a7bcf1af7329253dc8100 · ampproject/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
<!doctype html>
<html ⚡ lang="en">

<head>
  <meta charset="utf-8" />
  <title>InsurAds example - AMP News Example</title>
  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1" />
  <link rel="canonical" href="http://nonblocking.io/" >
  <style amp-custom>
    amp-ad {
      max-width: 500px;
    }

    .talldiv {
      height: 2000px;
    }

    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-ad div[placeholder]::after,
    amp-ad div[fallback]::after {
      font-size: 20px;
      line-height: 30px;
      text-align: center;
      position: absolute;
      left: 0;
      right: 0;
      top: calc(50% - 15px);
    }

    .news-section {
      display: flex;
      justify-content: space-between;
      margin: 30px 0;
    }

    .news-article {
      flex: 1;
      padding: 10px;
    }
  </style>
  <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 custom-element="amp-ad" src="https://cdn.ampproject.org/v0/amp-ad-0.1.js"></script>
  <script async src="https://cdn.ampproject.org/v0.js"></script>
</head>

<body>
  <div style="max-width: 800px; margin: 0 auto; padding: 20px;">
    <h2>InsurAds example</h2>
    <h1>Today's Headlines</h1>

    <div style="background-color: #f0f0f0; padding: 15px; border-radius: 5px; margin: 20px 0;">
      <h3>Breaking News</h3>
      <p>Stay updated with the latest news from around the world. Fast, reliable, and always up to date.</p>
      <button style="background-color: #0066cc; color: white; border: none; padding: 10px 15px; border-radius: 3px;">
        Subscribe Now
      </button>
    </div>

    <amp-ad type="insurads" data-public-id="4WMPI6PV" width="300" height="250" data-multi-size="300x250,300x50,300x50"
      data-slot="/134642692/AMPTestsV3" json='{"targeting":{"target":["news"],"pos":["amp"]}}'>
    </amp-ad>

    <div class="news-section">
      <div class="news-article">
        <h4>World</h4>
        <p>Global leaders meet to discuss climate change initiatives and future cooperation.</p>
      </div>
      <div class="news-article">
        <h4>Technology</h4>
        <p>New smartphone release sets the bar for innovation and user experience.</p>
      </div>
      <div class="news-article">
        <h4>Sports</h4>
        <p>Local team wins championship in a thrilling final match.</p>
      </div>
    </div>
  </div>
</body>

</html>