Skip to Content

Changes for page Academy

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

Summary

Details

XWiki.GadgetClass[1]
content
... ... @@ -1,5 +1,4 @@
1 1  {{html}}
2 -<!DOCTYPE html>
3 3  <html>
4 4  <head>
5 5  <meta name="viewport" content="width=device-width, initial-scale=1">
... ... @@ -8,14 +8,20 @@
8 8   box-sizing: border-box;
9 9  }
10 10  
11 -/* Create two equal columns that floats next to each other */
10 +body {
11 + font-family: Arial, Helvetica, sans-serif;
12 +}
13 +
14 +/* Float four columns side by side */
12 12  .column {
13 13   float: left;
14 - width: 50%;
15 - padding: 10px;
16 - height: 300px; /* Should be removed. Only for demonstration */
17 + width: 25%;
18 + padding: 0 10px;
17 17  }
18 18  
21 +/* Remove extra left and right margins, due to padding */
22 +.row {margin: 0 -5px;}
23 +
19 19  /* Clear floats after the columns */
20 20  .row:after {
21 21   content: "";
... ... @@ -23,28 +23,61 @@
23 23   clear: both;
24 24  }
25 25  
26 -/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
31 +/* Responsive columns */
27 27  @media screen and (max-width: 600px) {
28 28   .column {
29 29   width: 100%;
35 + display: block;
36 + margin-bottom: 20px;
30 30   }
31 31  }
39 +
40 +/* Style the counter cards */
41 +.card {
42 + box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
43 + padding: 16px;
44 + text-align: center;
45 + background-color: #f1f1f1;
46 +}
32 32  </style>
33 33  </head>
34 34  <body>
35 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>
51 +<h2>Responsive Column Cards</h2>
52 +<p>Resize the browser window to see the effect.</p>
38 38  
39 39  <div class="row">
40 - <div class="column" style="background-color:#aaa;">
41 - <h2>Column 1</h2>
42 - <p>Some text..</p>
55 + <div class="column">
56 + <div class="card">
57 + <h3>Card 1</h3>
58 + <p>Some text</p>
59 + <p>Some text</p>
60 + </div>
43 43   </div>
44 - <div class="column" style="background-color:#bbb;">
45 - <h2>Column 2</h2>
46 - <p>Some text..</p>
62 +
63 + <div class="column">
64 + <div class="card">
65 + <h3>Card 2</h3>
66 + <p>Some text</p>
67 + <p>Some text</p>
68 + </div>
47 47   </div>
70 +
71 + <div class="column">
72 + <div class="card">
73 + <h3>Card 3</h3>
74 + <p>Some text</p>
75 + <p>Some text</p>
76 + </div>
77 + </div>
78 +
79 + <div class="column">
80 + <div class="card">
81 + <h3>Card 4</h3>
82 + <p>Some text</p>
83 + <p>Some text</p>
84 + </div>
85 + </div>
48 48  </div>
49 49  </body>
50 50  </html>