Changes for page Academy
Last modified by Erik Bakker on 2024/09/24 16:12
Summary
-
Objects (1 modified, 0 added, 0 removed)
Details
- XWiki.GadgetClass[1]
-
- content
-
... ... @@ -1,61 +1,89 @@ 1 -{{html clean="false"}} 2 -<div class="container"> 3 - <div class="card"> 4 - <div class="card__header"> 5 - <img src="https://source.unsplash.com/600x400/?computer" alt="card__image" class="card__image" width="600"> 1 +{{html}} 2 +<html> 3 +<head> 4 +<meta name="viewport" content="width=device-width, initial-scale=1"> 5 +<style> 6 +* { 7 + box-sizing: border-box; 8 +} 9 + 10 +body { 11 + font-family: Arial, Helvetica, sans-serif; 12 +} 13 + 14 +/* Float four columns side by side */ 15 +.column { 16 + float: left; 17 + width: 25%; 18 + padding: 0 10px; 19 +} 20 + 21 +/* Remove extra left and right margins, due to padding */ 22 +.row {margin: 0 -5px;} 23 + 24 +/* Clear floats after the columns */ 25 +.row:after { 26 + content: ""; 27 + display: table; 28 + clear: both; 29 +} 30 + 31 +/* Responsive columns */ 32 +@media screen and (max-width: 600px) { 33 + .column { 34 + width: 100%; 35 + display: block; 36 + margin-bottom: 20px; 37 + } 38 +} 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 +} 47 +</style> 48 +</head> 49 +<body> 50 + 51 +<h2>Responsive Column Cards</h2> 52 +<p>Resize the browser window to see the effect.</p> 53 + 54 +<div class="row"> 55 + <div class="column"> 56 + <div class="card"> 57 + <h3>Card 1</h3> 58 + <p>Some text</p> 59 + <p>Some text</p> 6 6 </div> 7 - <div class="card__body"> 8 - <span class="tag tag-blue">Technology</span> 9 - <h4>What's new in 2022 Tech</h4> 10 - <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi perferendis molestiae non nemo doloribus. Doloremque, nihil! At ea atque quidem!</p> 61 + </div> 62 + 63 + <div class="column"> 64 + <div class="card"> 65 + <h3>Card 2</h3> 66 + <p>Some text</p> 67 + <p>Some text</p> 11 11 </div> 12 - <div class="card__footer"> 13 - <div class="user"> 14 - <img src="https://i.pravatar.cc/40?img=1" alt="user__image" class="user__image"> 15 - <div class="user__info"> 16 - <h5>Jane Doe</h5> 17 - <small>2h ago</small> 18 - </div> 19 - </div> 20 - </div> 21 21 </div> 22 - <div class="card"> 23 - <div class="card__header"> 24 - <img src="https://source.unsplash.com/600x400/?food" alt="card__image" class="card__image" width="600"> 70 + 71 + <div class="column"> 72 + <div class="card"> 73 + <h3>Card 3</h3> 74 + <p>Some text</p> 75 + <p>Some text</p> 25 25 </div> 26 - <div class="card__body"> 27 - <span class="tag tag-brown">Food</span> 28 - <h4>Delicious Food</h4> 29 - <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi perferendis molestiae non nemo doloribus. Doloremque, nihil! At ea atque quidem!</p> 30 - </div> 31 - <div class="card__footer"> 32 - <div class="user"> 33 - <img src="https://i.pravatar.cc/40?img=2" alt="user__image" class="user__image"> 34 - <div class="user__info"> 35 - <h5>Jony Doe</h5> 36 - <small>Yesterday</small> 37 - </div> 38 - </div> 39 - </div> 40 40 </div> 41 - <div class="card"> 42 - <div class="card__header"> 43 - <img src="https://source.unsplash.com/600x400/?car,automobile" alt="card__image" class="card__image" width="600"> 78 + 79 + <div class="column"> 80 + <div class="card"> 81 + <h3>Card 4</h3> 82 + <p>Some text</p> 83 + <p>Some text</p> 44 44 </div> 45 - <div class="card__body"> 46 - <span class="tag tag-red">Automobile</span> 47 - <h4>Race to your heart content</h4> 48 - <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi perferendis molestiae non nemo doloribus. Doloremque, nihil! At ea atque quidem!</p> 49 - </div> 50 - <div class="card__footer"> 51 - <div class="user"> 52 - <img src="https://i.pravatar.cc/40?img=3" alt="user__image" class="user__image"> 53 - <div class="user__info"> 54 - <h5>John Doe</h5> 55 - <small>2d ago</small> 56 - </div> 57 - </div> 58 - </div> 59 59 </div> 60 60 </div> 87 +</body> 88 +</html> 61 61 {{/html}}