Line 1: |
Line 1: |
− | <div class="container">
| + | A playground, sandbox, test zone for Marc B and Thian. :-) |
− | <div class="column">
| + | <!-- Google tag (gtag.js) --> |
− | <div class="content">
| + | <script async src="https://www.googletagmanager.com/gtag/js?id=G-9FPK3M5Y7K"></script> |
− | <h2>Column 1</h2>
| + | <script> |
− | <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eleifend elit enim, non ultrices dolor scelerisque id. Integer auctor nunc purus, ac suscipit lectus tristique eu.</p>
| + | window.dataLayer = window.dataLayer || []; |
− | </div>
| + | function gtag(){dataLayer.push(arguments);} |
− | </div>
| + | gtag('js', new Date()); |
− | <div class="column">
| |
− | <div class="content">
| |
− | <h2>Column 2</h2>
| |
− | <p>Phasellus accumsan lobortis magna, a ultricies sapien hendrerit id. Vestibulum sed lorem id libero lobortis aliquam in vitae enim. Ut ornare dapibus velit, eget egestas enim bibendum ac.</p>
| |
− | </div>
| |
− | </div>
| |
− | <div class="column">
| |
− | <div class="content">
| |
− | <h2>Column 3</h2>
| |
− | <p>Curabitur vel neque vel tortor accumsan bibendum. Nullam a mauris ipsum. Nullam ullamcorper, mauris ac vehicula varius, turpis purus aliquet est, eget pretium odio urna eu enim.</p>
| |
− | </div>
| |
− | </div> | |
| | | |
− | {{#CSS:
| + | gtag('config', 'G-9FPK3M5Y7K'); |
− | <style> | + | </script> |
− | .container {
| + | <html> |
− | display: flex;
| + | <body> |
− | flex-wrap: wrap;
| + | <head> |
− | justify-content: space-between;
| + | |
− | }
| + | </head> |
− | .column {
| + | <h1>My First Heading</h1> |
− | flex-basis: calc(33.33% - 20px);
| + | <p>My first paragraph.</p> |
− | margin-bottom: 20px;
| + | |
− | }
| + | </body> |
− | .content {
| + | </html> |
− | background-color: #f2f2f2;
| |
− | padding: 20px;
| |
− | }
| |
− | @media only screen and (max-width: 768px) {
| |
− | .column {
| |
− | flex-basis: 100%;
| |
− | }
| |
− | }
| |
− | </style>
| |
− | </div> | |
− | }}
| |