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 112.1
edited by Erik Bakker
on 2022/05/02 09:13
Change comment: There is no comment for this version

Summary

Details

Page properties
Title
... ... @@ -1,1 +1,1 @@
1 -eMagiz Academy
1 +Academy
Content
... ... @@ -1,66 +1,130 @@
1 -{{html}}
2 -<html
1 +Welcome to the eMagiz Academy. Here, you will find all the relevant learnings for eMagiz. Below are the five main entry points which will assist you to find the right content for your work.
3 3  
4 -<head>
3 +(% style="border-color:#10137e" %)
4 +----
5 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 -
6 +{{html}}
7 +<div class="ez-academy">
8 + <div class="ez-academy_body">
9 + <main class="master">
10 + <div class="card-container">
11 + <a href="/bin/view/Main/eMagiz%20Academy/Fundamentals/" class="card">
12 + <div class="card__body" style="background: url(/bin/download/Main/Images/General/WebHome/fundamentals.svg) center no-repeat; background-size: 20%;">
13 + <h4 class="title">Fundamentals</h4>
60 60   </div>
61 -
62 -</body>
63 -
64 -</html>
15 + <ul class="card__footer">
16 + <li class="card__footer-item">
17 + <img class="card__footer-icon card__footer-icon--level" src="/bin/download/Main/Images/General/WebHome/icon-level24.svg"/>
18 + <label for="" class="card__footer-label">All</label>
19 + </li>
20 + <li class="card__footer-item">
21 + <img class="card__footer-icon card__footer-icon--roles" src="/bin/download/Main/Images/General/WebHome/icon-roles24.svg"/>
22 + <label for="" class="card__footer-label">All</label>
23 + </li>
24 + <li class="card__footer-item">
25 + <img class="card__footer-icon card__footer-icon--lessons" src="/bin/download/Main/Images/General/WebHome/icon-lessons24.svg"/>
26 + <label for="" class="card__footer-label">9</label>
27 + </li>
28 + </ul>
29 + </a>
30 + <a href="/bin/view/Main/eMagiz%20Academy/Microlearnings/" class="card">
31 + <div class="card__body" style="background: url(/bin/download/Main/Images/General/WebHome/microlearnings2.svg) center no-repeat; background-size: 20%;">
32 + <h4 class="title">Microlearnings</h4>
33 + </div>
34 + <ul class="card__footer">
35 + <li class="card__footer-item">
36 + <img class="card__footer-icon card__footer-icon--level" src="/bin/download/Main/Images/General/WebHome/icon-level24.svg"/>
37 + <label for="" class="card__footer-label">All</label>
38 + </li>
39 + <li class="card__footer-item">
40 + <img class="card__footer-icon card__footer-icon--roles" src="/bin/download/Main/Images/General/WebHome/icon-roles24.svg"/>
41 + <label for="" class="card__footer-label">All</label>
42 + </li>
43 + <li class="card__footer-item">
44 + <img class="card__footer-icon card__footer-icon--lessons" src="/bin/download/Main/Images/General/WebHome/icon-lessons24.svg"/>
45 + <label for="" class="card__footer-label">265</label>
46 + </li>
47 + </ul>
48 + </a>
49 + <a href="/bin/view/Main/eMagiz%20Academy/Use%20Cases/" class="card">
50 + <div class="card__body" style="background: url(/bin/download/Main/Images/General/WebHome/usecases.svg) center no-repeat; background-size: 15%;">
51 + <h4 class="title">Use Cases</h4>
52 + </div>
53 + <ul class="card__footer">
54 + <li class="card__footer-item">
55 + <img class="card__footer-icon card__footer-icon--level" src="/bin/download/Main/Images/General/WebHome/icon-level24.svg"/>
56 + <label for="" class="card__footer-label">All</label>
57 + </li>
58 + <li class="card__footer-item">
59 + <img class="card__footer-icon card__footer-icon--roles" src="/bin/download/Main/Images/General/WebHome/icon-roles24.svg"/>
60 + <label for="" class="card__footer-label">All</label>
61 + </li>
62 + <li class="card__footer-item">
63 + <img class="card__footer-icon card__footer-icon--lessons" src="/bin/download/Main/Images/General/WebHome/icon-lessons24.svg"/>
64 + <label for="" class="card__footer-label">8</label>
65 + </li>
66 + </ul>
67 + </a>
68 + <a href="../../docs/migrationpath/index_academy_migrationpath_all" class="card">
69 + <div class="card__body" style="background: url(/bin/download/Main/Images/General/WebHome/migration-paths.svg) center no-repeat; background-size: 15%;">
70 + <h4 class="title">Migration Paths</h4>
71 + </div>
72 + <ul class="card__footer">
73 + <li class="card__footer-item">
74 + <img class="card__footer-icon card__footer-icon--level" src="/bin/download/Main/Images/General/WebHome/icon-level24.svg"/>
75 + <label for="" class="card__footer-label">All</label>
76 + </li>
77 + <li class="card__footer-item">
78 + <img class="card__footer-icon card__footer-icon--roles" src="/bin/download/Main/Images/General/WebHome/icon-roles24.svg"/>
79 + <label for="" class="card__footer-label">All</label>
80 + </li>
81 + <li class="card__footer-item">
82 + <img class="card__footer-icon card__footer-icon--lessons" src="/bin/download/Main/Images/General/WebHome/icon-lessons24.svg"/>
83 + <label for="" class="card__footer-label">12</label>
84 + </li>
85 + </ul>
86 + </a>
87 + <a href="../../docs/rca-knowledgebase/index_academy_rca-knowledgebase_all" class="card">
88 + <div class="card__body" style="background: url(/bin/download/Main/Images/General/WebHome/rca-knowledgebase.svg) center no-repeat; background-size: 17%;">
89 + <h4 class="title">RCA Knowledge Base</h4>
90 + </div>
91 + <ul class="card__footer">
92 + <li class="card__footer-item">
93 + <img class="card__footer-icon card__footer-icon--level" src="/bin/download/Main/Images/General/WebHome/icon-level24.svg"/>
94 + <label for="" class="card__footer-label">All</label>
95 + </li>
96 + <li class="card__footer-item">
97 + <img class="card__footer-icon card__footer-icon--roles" src="/bin/download/Main/Images/General/WebHome/icon-roles24.svg"/>
98 + <label for="" class="card__footer-label">All</label>
99 + </li>
100 + <li class="card__footer-item">
101 + <img class="card__footer-icon card__footer-icon--lessons" src="/bin/download/Main/Images/General/WebHome/icon-lessons24.svg"/>
102 + <label for="" class="card__footer-label">6</label>
103 + </li>
104 + </ul>
105 + </a>
106 + <a href="https://www.emagiz.com/en/certification/" class="card card--featured">
107 + <div class="card__body" style="background: url(/bin/download/Main/Images/General/WebHome/get_certified.png) center no-repeat; background-size: 20%;">
108 + <h4 class="title">Get Certified!!</h4>
109 + </div>
110 + <ul class="card__footer">
111 + <li class="card__footer-item">
112 + <img class="card__footer-icon card__footer-icon--level" src="/bin/download/Main/Images/General/WebHome/icon-level24.svg"/>
113 + <label for="" class="card__footer-label">All</label>
114 + </li>
115 + <li class="card__footer-item">
116 + <img class="card__footer-icon card__footer-icon--roles" src="/bin/download/Main/Images/General/WebHome/icon-roles24.svg"/>
117 + <label for="" class="card__footer-label">All</label>
118 + </li>
119 + <li class="card__footer-item">
120 + <img class="card__footer-icon card__footer-icon--lessons" src="/bin/download/Main/Images/General/WebHome/icon-lessons24.svg"/>
121 + <label for="" class="card__footer-label">9</label>
122 + </li>
123 + </ul>
124 + </a>
125 + </div>
126 + </div>
127 +</main>
128 +</div>
129 +</div>
65 65  {{/html}}
66 -
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