Skip to Content

Changes for page Academy

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

Summary

Details

Page properties
Content
... ... @@ -1,1 +1,66 @@
1 -{{dashboard/}}
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 +
XWiki.DocumentSheetBinding[0]
XWiki.GadgetClass[0]
content
... ... @@ -1,9 +1,0 @@
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,1 +1,0 @@
1 -1,1
title
... ... @@ -1,1 +1,0 @@
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,68 +1,0 @@
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,1 +1,0 @@
1 -1, 2
title
... ... @@ -1,1 +1,0 @@
1 -$services.localization.render('rendering.macro.html.name')
XWiki.GadgetClass[2]
content
... ... @@ -1,1 +1,0 @@
1 -{{container layoutStyle="columns"}}{{/container}}
position
... ... @@ -1,1 +1,0 @@
1 -1, 3
title
... ... @@ -1,1 +1,0 @@
1 -$services.localization.render('rendering.macro.container.name')
XWiki.StyleSheetExtension[0]
Caching policy
... ... @@ -1,0 +1,1 @@
1 +long
Code
... ... @@ -1,0 +1,161 @@
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,0 +1,1 @@
1 +CSS
Name
... ... @@ -1,0 +1,1 @@
1 +TestCSSExtension
Parse content
... ... @@ -1,0 +1,1 @@
1 +Yes
Use this extension
... ... @@ -1,0 +1,1 @@
1 +currentPage