Skip to Content

Changes for page Academy

Last modified by Erik Bakker on 2024/09/24 16:12
From version 33.1
edited by Erik Bakker
on 2022/04/21 15:51
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,51 +1,0 @@
1 -{{html}}
2 -<!DOCTYPE html>
3 -<html>
4 -<head>
5 -<meta name="viewport" content="width=device-width, initial-scale=1">
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: 50%;
15 - padding: 10px;
16 - height: 300px; /* Should be removed. Only for demonstration */
17 -}
18 -
19 -/* Clear floats after the columns */
20 -.row:after {
21 - content: "";
22 - display: table;
23 - clear: both;
24 -}
25 -
26 -/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
27 -@media screen and (max-width: 600px) {
28 - .column {
29 - width: 100%;
30 - }
31 -}
32 -</style>
33 -</head>
34 -<body>
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>
38 -
39 -<div class="row">
40 - <div class="column" style="background-color:#aaa;">
41 - <h2>Column 1</h2>
42 - <p>Some text..</p>
43 - </div>
44 - <div class="column" style="background-color:#bbb;">
45 - <h2>Column 2</h2>
46 - <p>Some text..</p>
47 - </div>
48 -</div>
49 -</body>
50 -</html>
51 -{{/html}}
position
... ... @@ -1,1 +1,0 @@
1 -1, 2
title
... ... @@ -1,1 +1,0 @@
1 -$services.localization.render('rendering.macro.html.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