Skip to Content

Changes for page Academy

Last modified by Erik Bakker on 2024/09/24 16:12
From version 28.1
edited by Erik Bakker
on 2022/04/21 15:44
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,198 +1,0 @@
1 -{{code}}
2 -@import url('https://fonts.googleapis.com/css?family=Heebo:400,700|Open+Sans:400,700');
3 -
4 -:root {
5 - --color: #3c3163;
6 - --transition-time: 0.5s;
7 -}
8 -
9 -* {
10 - box-sizing: border-box;
11 -}
12 -
13 -body {
14 - margin: 0;
15 - min-height: 100vh;
16 - font-family: 'Open Sans';
17 - background: #fafafa;
18 -}
19 -
20 -a {
21 - color: inherit;
22 -}
23 -
24 -.cards-wrapper {
25 - display: grid;
26 - justify-content: center;
27 - align-items: center;
28 - grid-template-columns: 1fr 1fr 1fr;
29 - grid-gap: 4rem;
30 - padding: 4rem;
31 - margin: 0 auto;
32 - width: max-content;
33 -}
34 -
35 -.card {
36 - font-family: 'Heebo';
37 - --bg-filter-opacity: 0.5;
38 - background-image: linear-gradient(rgba(0,0,0,var(--bg-filter-opacity)),rgba(0,0,0,var(--bg-filter-opacity))), var(--bg-img);
39 - height: 20em;
40 - width: 15em;
41 - font-size: 1.5em;
42 - color: white;
43 - border-radius: 1em;
44 - padding: 1em;
45 - /*margin: 2em;*/
46 - display: flex;
47 - align-items: flex-end;
48 - background-size: cover;
49 - background-position: center;
50 - box-shadow: 0 0 5em -1em black;
51 - transition: all, var(--transition-time);
52 - position: relative;
53 - overflow: hidden;
54 - border: 10px solid #ccc;
55 - text-decoration: none;
56 -}
57 -
58 -.card:hover {
59 - transform: rotate(0);
60 -}
61 -
62 -.card h1 {
63 - margin: 0;
64 - font-size: 1.5em;
65 - line-height: 1.2em;
66 -}
67 -
68 -.card p {
69 - font-size: 0.75em;
70 - font-family: 'Open Sans';
71 - margin-top: 0.5em;
72 - line-height: 2em;
73 -}
74 -
75 -.card .tags {
76 - display: flex;
77 -}
78 -
79 -.card .tags .tag {
80 - font-size: 0.75em;
81 - background: rgba(255,255,255,0.5);
82 - border-radius: 0.3rem;
83 - padding: 0 0.5em;
84 - margin-right: 0.5em;
85 - line-height: 1.5em;
86 - transition: all, var(--transition-time);
87 -}
88 -
89 -.card:hover .tags .tag {
90 - background: var(--color);
91 - color: white;
92 -}
93 -
94 -.card .date {
95 - position: absolute;
96 - top: 0;
97 - right: 0;
98 - font-size: 0.75em;
99 - padding: 1em;
100 - line-height: 1em;
101 - opacity: .8;
102 -}
103 -
104 -.card:before, .card:after {
105 - content: '';
106 - transform: scale(0);
107 - transform-origin: top left;
108 - border-radius: 50%;
109 - position: absolute;
110 - left: -50%;
111 - top: -50%;
112 - z-index: -5;
113 - transition: all, var(--transition-time);
114 - transition-timing-function: ease-in-out;
115 -}
116 -
117 -.card:before {
118 - background: #ddd;
119 - width: 250%;
120 - height: 250%;
121 -}
122 -
123 -.card:after {
124 - background: white;
125 - width: 200%;
126 - height: 200%;
127 -}
128 -
129 -.card:hover {
130 - color: var(--color);
131 -}
132 -
133 -.card:hover:before, .card:hover:after {
134 - transform: scale(1);
135 -}
136 -
137 -.card-grid-space .num {
138 - font-size: 3em;
139 - margin-bottom: 1.2rem;
140 - margin-left: 1rem;
141 -}
142 -
143 -.info {
144 - font-size: 1.2em;
145 - display: flex;
146 - padding: 1em 3em;
147 - height: 3em;
148 -}
149 -
150 -.info img {
151 - height: 3em;
152 - margin-right: 0.5em;
153 -}
154 -
155 -.info h1 {
156 - font-size: 1em;
157 - font-weight: normal;
158 -}
159 -
160 -/* MEDIA QUERIES */
161 -@media screen and (max-width: 1285px) {
162 - .cards-wrapper {
163 - grid-template-columns: 1fr 1fr;
164 - }
165 -}
166 -
167 -@media screen and (max-width: 900px) {
168 - .cards-wrapper {
169 - grid-template-columns: 1fr;
170 - }
171 - .info {
172 - justify-content: center;
173 - }
174 - .card-grid-space .num {
175 - /margin-left: 0;
176 - /text-align: center;
177 - }
178 -}
179 -
180 -@media screen and (max-width: 500px) {
181 - .cards-wrapper {
182 - padding: 4rem 2rem;
183 - }
184 - .card {
185 - max-width: calc(100vw - 4rem);
186 - }
187 -}
188 -
189 -@media screen and (max-width: 450px) {
190 - .info {
191 - display: block;
192 - text-align: center;
193 - }
194 - .info h1 {
195 - margin: 0;
196 - }
197 -}
198 -{{/code}}
position
... ... @@ -1,1 +1,0 @@
1 -1, 2
title
... ... @@ -1,1 +1,0 @@
1 -$services.localization.render('rendering.macro.code.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