Skip to Content

Changes for page Academy

Last modified by Erik Bakker on 2024/09/24 16:12
From version 55.1
edited by Erik Bakker
on 2022/04/25 15:42
Change comment: There is no comment for this version
To version 30.1
edited by Erik Bakker
on 2022/04/21 15:48
Change comment: Added object

Summary

Details

Page properties
Content
... ... @@ -1,66 +1,1 @@
1 -{{html}}
2 -<html
3 -
4 -<head>
5 -
6 - <title>Card Hover Effect</title>
7 -
8 - <meta name="viewport" content="width=device-width, initial-scale=1">
9 -
10 - <link rel="stylesheet" type="text/css" media="screen" href="style.css" />
11 -
12 - <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN"
13 -
14 - crossorigin="anonymous">
15 -
16 -</head>
17 -
18 -<body>
19 -
20 - <div class="container">
21 -
22 -
23 -
24 - <div class="card">
25 -
26 - <div class="slide slide1">
27 -
28 - <div class="content">
29 -
30 - <div class="icon">
31 -
32 - <i class="fa fa-user-circle" aria-hidden="true"></i>
33 -
34 - </div>
35 -
36 - </div>
37 -
38 - </div>
39 -
40 - <div class="slide slide2">
41 -
42 - <div class="content">
43 -
44 - <h3>
45 -
46 - Hello there!
47 -
48 - </h3>
49 -
50 - <p>Trust yourself and keep going.</p>
51 -
52 - </div>
53 -
54 - </div>
55 -
56 - </div>
57 -
58 -
59 -
60 - </div>
61 -
62 -</body>
63 -
64 -</html>
65 -{{/html}}
66 -
1 +{{dashboard/}}
XWiki.StyleSheetExtension[0]
Caching policy
... ... @@ -1,1 +1,0 @@
1 -long
Code
... ... @@ -1,161 +1,0 @@
1 -body {
2 -
3 - margin: 0;
4 -
5 - padding: 0;
6 -
7 - min-height: 100vh;
8 -
9 - display: flex;
10 -
11 - align-items: center;
12 -
13 - justify-content: center;
14 -
15 - font-family: sans-serif;
16 -
17 - background-color: #f1f1f1;
18 -
19 -}
20 -
21 -.container .card .icon {
22 -
23 - position: absolute;
24 -
25 - top: 0;
26 -
27 - left: 0;
28 -
29 - width: 100%;
30 -
31 - height: 100%;
32 -
33 - background: #2c73df;
34 -
35 -}
36 -
37 -.container .card .icon .fa {
38 -
39 - position: absolute;
40 -
41 - top: 50%;
42 -
43 - left: 50%;
44 -
45 - transform: translate(-50%, -50%);
46 -
47 - font-size: 80px;
48 -
49 - color: #fff;
50 -
51 -}
52 -
53 -.container .card .slide {
54 -
55 - width: 300px;
56 -
57 - height: 200px;
58 -
59 - transition: 0.5s;
60 -
61 -}
62 -
63 -.container .card .slide.slide1 {
64 -
65 - position: relative;
66 -
67 - display: flex;
68 -
69 - justify-content: center;
70 -
71 - align-items: center;
72 -
73 - z-index: 1;
74 -
75 - transition: .7s;
76 -
77 - transform: translateY(100px);
78 -
79 -}
80 -
81 -.container .card:hover .slide.slide1{
82 -
83 - transform: translateY(0px);
84 -
85 -}
86 -
87 -.container .card .slide.slide2 {
88 -
89 - position: relative;
90 -
91 - display: flex;
92 -
93 - justify-content: center;
94 -
95 - align-items: center;
96 -
97 - padding: 20px;
98 -
99 - box-sizing: border-box;
100 -
101 - transition: .8s;
102 -
103 - transform: translateY(-100px);
104 -
105 - box-shadow: 0 20px 40px rgba(0,0,0,0.4);
106 -
107 -}
108 -
109 -.container .card:hover .slide.slide2{
110 -
111 - transform: translateY(0);
112 -
113 -}
114 -
115 -.container .card .slide.slide2::after{
116 -
117 - content: "";
118 -
119 - position: absolute;
120 -
121 - width: 30px;
122 -
123 - height: 4px;
124 -
125 - bottom: 15px;
126 -
127 - left: 50%;
128 -
129 - left: 50%;
130 -
131 - transform: translateX(-50%);
132 -
133 - background: #2c73df;
134 -
135 -}
136 -
137 -.container .card .slide.slide2 .content p {
138 -
139 - margin: 0;
140 -
141 - padding: 0;
142 -
143 - text-align: center;
144 -
145 - color: #414141;
146 -
147 -}
148 -
149 -.container .card .slide.slide2 .content h3 {
150 -
151 - margin: 0 0 10px 0;
152 -
153 - padding: 0;
154 -
155 - font-size: 24px;
156 -
157 - text-align: center;
158 -
159 - color: #414141;
160 -
161 -}
Content Type
... ... @@ -1,1 +1,0 @@
1 -CSS
Name
... ... @@ -1,1 +1,0 @@
1 -TestCSSExtension
Parse content
... ... @@ -1,1 +1,0 @@
1 -Yes
Use this extension
... ... @@ -1,1 +1,0 @@
1 -currentPage
XWiki.DocumentSheetBinding[0]
XWiki.GadgetClass[0]
content
... ... @@ -1,0 +1,9 @@
1 +{{velocity}}
2 +#set ($extraParams = '')
3 +#if ($doc.space != 'Main')
4 + #set ($escapedDocumentReference = $services.rendering.escape($services.model.serialize($doc.documentReference,
5 + 'default'), 'xwiki/2.1'))
6 + #set ($extraParams = "root='document:$escapedDocumentReference'")
7 +#end
8 +{{documentTree showTranslations="false" showAttachments="false" compact="true" $extraParams /}}
9 +{{/velocity}}
position
... ... @@ -1,0 +1,1 @@
1 +1,1
title
... ... @@ -1,0 +1,1 @@
1 +#if ($doc.space == 'Main')$services.localization.render('platform.dashboard.wiki.pages')#{else}$services.localization.render('platform.dashboard.space.documents', [$doc.plainTitle])#end
XWiki.GadgetClass[1]
content
... ... @@ -1,0 +1,89 @@
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>
60 + </div>
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>
68 + </div>
69 + </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>
86 +</div>
87 +</body>
88 +</html>
89 +{{/html}}
position
... ... @@ -1,0 +1,1 @@
1 +1, 2
title
... ... @@ -1,0 +1,1 @@
1 +$services.localization.render('rendering.macro.html.name')