Skip to Content

Changes for page Academy

Last modified by Erik Bakker on 2024/09/24 16:12
From version 26.1
edited by Erik Bakker
on 2022/04/21 15:41
Change comment: Added object
To version 32.1
edited by Erik Bakker
on 2022/04/21 15:50
Change comment: Added object

Summary

Details

XWiki.GadgetClass[1]
content
... ... @@ -1,48 +1,51 @@
1 1  {{html}}
2 -<section class="info">
3 - <img src="https://codetheweb.blog/assets/img/icon2.png">
4 - <h1>Learn HTML &mdash; <a href="https://codetheweb.blog/" target="_blank">Code The Web</a></h1>
5 -</section>
6 -<section class="cards-wrapper">
7 - <div class="card-grid-space">
8 - <div class="num">01</div>
9 - <a class="card" href="https://codetheweb.blog/2017/10/06/html-syntax/" style="--bg-img: url(https://images1-focus-opensocial.googleusercontent.com/gadgets/proxy?container=focus&resize_w=1500&url=https://codetheweb.blog/assets/img/posts/html-syntax/cover.jpg)">
10 - <div>
11 - <h1>HTML Syntax</h1>
12 - <p>The syntax of a language is how it works. How to actually write it. Learn HTML syntax…</p>
13 - <div class="date">6 Oct 2017</div>
14 - <div class="tags">
15 - <div class="tag">HTML</div>
16 - </div>
17 - </div>
18 - </a>
2 +<!DOCTYPE html>
3 +<html>
4 +<head>
5 +<meta name="viewport" content="width=device-width, initial-scale=1">
6 +<style>
7 +* {
8 + box-sizing: border-box;
9 +}
10 +
11 +/* Create two equal columns that floats next to each other */
12 +.column {
13 + float: left;
14 + width: 50%;
15 + padding: 10px;
16 + height: 300px; /* Should be removed. Only for demonstration */
17 +}
18 +
19 +/* Clear floats after the columns */
20 +.row:after {
21 + content: "";
22 + display: table;
23 + clear: both;
24 +}
25 +
26 +/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
27 +@media screen and (max-width: 600px) {
28 + .column {
29 + width: 100%;
30 + }
31 +}
32 +</style>
33 +</head>
34 +<body>
35 +
36 +<h2>Responsive Two Column Layout</h2>
37 +<p>Resize the browser window to see the responsive effect (the columns will stack on top of each other instead of floating next to each other, when the screen is less than 600px wide).</p>
38 +
39 +<div class="row">
40 + <div class="column" style="background-color:#aaa;">
41 + <h2>Column 1</h2>
42 + <p>Some text..</p>
19 19   </div>
20 - <div class="card-grid-space">
21 - <div class="num">02</div>
22 - <a class="card" href="https://codetheweb.blog/2017/10/09/basic-types-of-html-tags/" style="--bg-img: url('https://images1-focus-opensocial.googleusercontent.com/gadgets/proxy?container=focus&resize_w=1500&url=https://codetheweb.blog/assets/img/posts/basic-types-of-html-tags/cover.jpg')">
23 - <div>
24 - <h1>Basic types of HTML tags</h1>
25 - <p>Learn about some of the most common HTML tags…</p>
26 - <div class="date">9 Oct 2017</div>
27 - <div class="tags">
28 - <div class="tag">HTML</div>
29 - </div>
30 - </div>
31 - </a>
44 + <div class="column" style="background-color:#bbb;">
45 + <h2>Column 2</h2>
46 + <p>Some text..</p>
32 32   </div>
33 - <div class="card-grid-space">
34 - <div class="num">03</div>
35 - <a class="card" href="https://codetheweb.blog/2017/10/14/links-images-about-file-paths/" style="--bg-img: url('https://images1-focus-opensocial.googleusercontent.com/gadgets/proxy?container=focus&resize_w=1500&url=https://codetheweb.blog/assets/img/posts/links-images-about-file-paths/cover.jpg')">
36 - <div>
37 - <h1>Links, images and about file paths</h1>
38 - <p>Learn how to use links and images along with file paths…</p>
39 - <div class="date">14 Oct 2017</div>
40 - <div class="tags">
41 - <div class="tag">HTML</div>
42 - </div>
43 - </div>
44 - </a>
45 - </div>
46 - <!-- https://images.unsplash.com/photo-1520839090488-4a6c211e2f94?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=38951b8650067840307cba514b554ba5&auto=format&fit=crop&w=1350&q=80 -->
47 -</section>
48 +</div>
49 +</body>
50 +</html>
48 48  {{/html}}