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 44.1
edited by Erik Bakker
on 2022/04/21 16:08
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,68 @@
1 +{{html}}
2 +<!DOCTYPE html>
3 +<html>
4 +<head>
5 +<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
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: 50px;
15 + padding: 10px;
16 +}
17 +
18 +/* Style the buttons */
19 +.btn {
20 + border: none;
21 + outline: none;
22 + padding: 12px 16px;
23 + background-color: #f1f1f1;
24 + cursor: pointer;
25 +}
26 +
27 +.btn:hover {
28 + background-color: #ddd;
29 +}
30 +
31 +.btn.active {
32 + background-color: #666;
33 + color: white;
34 +}
35 +</style>
36 +</head>
37 +<body>
38 +
39 +
40 +
41 +<div class="row">
42 + <div class="column" style="background-color:#aaa;">
43 + <h2>Column 1</h2>
44 + <p>Some text..</p>
45 + </div>
46 + <div class="column" style="background-color:#bbb;">
47 + <h2>Column 2</h2>
48 + <p>Some text..</p>
49 + </div>
50 +</div>
51 +
52 +<div class="row">
53 + <div class="column" style="background-color:#ccc;">
54 + <h2>Column 3</h2>
55 + <p>Some text..</p>
56 + </div>
57 + <div class="column" style="background-color:#ddd;">
58 + <h2>Column 4</h2>
59 + <p>Some text..</p>
60 + </div>
61 +</div>
62 +
63 +
64 +
65 +</body>
66 +</html>
67 +
68 +{{/html}}
position
... ... @@ -1,0 +1,1 @@
1 +1, 2
title
... ... @@ -1,0 +1,1 @@
1 +$services.localization.render('rendering.macro.html.name')
XWiki.GadgetClass[2]
content
... ... @@ -1,0 +1,4 @@
1 +{{container layoutStyle="columns"}}
2 +(((first column)))
3 +(((second column)))
4 +{{/container}}
position
... ... @@ -1,0 +1,1 @@
1 +1, 3
title
... ... @@ -1,0 +1,1 @@
1 +$services.localization.render('rendering.macro.container.name')