| Line 1: |
Line 1: |
| − | {{#CSS:
| + | A playground, sandbox, test zone for Marc B and Thian. :-) |
| − | <style>
| + | <!-- Google tag (gtag.js) --> |
| − | /* Set up the three columns */
| + | <script async src="https://www.googletagmanager.com/gtag/js?id=G-9FPK3M5Y7K"></script> |
| − | .container {
| + | <script> |
| − | display: flex;
| + | window.dataLayer = window.dataLayer || []; |
| − | flex-wrap: wrap;
| + | function gtag(){dataLayer.push(arguments);} |
| − | justify-content: space-between;
| + | gtag('js', new Date()); |
| − | }
| |
| − | .column {
| |
| − | flex-basis: calc(33.33% - 20px);
| |
| − | margin-bottom: 20px;
| |
| − | }
| |
| | | | |
| − | /* Style the content inside the columns */
| + | gtag('config', 'G-9FPK3M5Y7K'); |
| − | .content {
| + | </script> |
| − | background-color: #f2f2f2;
| + | <html> |
| − | padding: 20px;
| + | <body> |
| − | }
| + | <head> |
| | | | |
| − | /* Responsive design for small screens */
| + | </head> |
| − | @media only screen and (max-width: 768px) {
| + | <h1>My First Heading</h1> |
| − | .column {
| + | <p>My first paragraph.</p> |
| − | flex-basis: 100%;
| |
| − | }
| |
| − | }
| |
| − | </style>
| |
| − | }}
| |
| | | | |
| − | <div class="container">
| + | </body> |
| − | <div class="column">
| + | </html> |
| − | <div class="content">
| |
| − | <h2>Column 1</h2>
| |
| − | <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>
| |
| − | </div>
| |
| − | </div>
| |
| − | <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>
| |
| − | </div>
| |