Skip to Content

Changes for page Academy

Last modified by Erik Bakker on 2024/09/24 16:12
From version 53.1
edited by Erik Bakker
on 2022/04/25 15:39
Change comment: There is no comment for this version
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,139 +1,66 @@
1 -<div class="ez-academy">
2 - <div class="ez-academy__body">
3 - <main class="master">
4 - <h2 class="title">eMagiz Academy Microlearnings</h2>
5 - <p>
6 - <font size="4" face="verdana" color="black">
7 - Welcome to the eMagiz Academy section. In this section you will find all the relevant learnings for eMagiz. Below the three main entry points which will assist you to find the right content for your work.
8 - </br>
9 - <ul>
10 - <li><b>1. Fundamentals</b> - It contains an overview of the most important platform components on a conceptual level</li>
11 - <li><b>2. Microlearnings</b> - It contains all microlearnings with applied knowledge for each of the platform's features. There are four levels of microlearnings ranging from novice to expert. Further, microlearnings are categorized by roles Developer, Architect, and Support Engineer</li>
12 - <li><b>3. Use Cases</b> - a group of microlearnings that will address a specific integration solution in the platform</li>
13 - <li><b>4. Migration Paths</b> - It contains all migration paths to move from a specific state to the newest state on the platform. Examples are migrations of the eMagiz Mendix connector or moving from the Root cloud to the eMagiz Cloud.</li>
14 - <li><b>5. RCA Knowledge Base</b> - It contains a subset of Root Cause Analysis performed on platform and model issues reported to us. By providing these anonymized versions, we intend people will browse through them when they are confronted with a problem.</li>
15 - </ul>
16 - </br>
17 - Last updated - March 2022
18 - </font>
19 - </p>
20 - <div class="card-container">
21 - <a href="../../docs/fundamental/index_academy_fundamental_all" class="card">
22 - <div class="card__body" style="background: url(../../img/microlearning/academy_index/fundamentals.svg) center no-repeat; background-size: 20%;">
23 - <h4 class="title">Fundamentals</h4>
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 +
24 24   </div>
25 - <ul class="card__footer">
26 - <li class="card__footer-item">
27 - <img class="card__footer-icon card__footer-icon--level" src="../../img/microlearning/academy_index/icon-level24.svg"/>
28 - <label for="" class="card__footer-label">All</label>
29 - </li>
30 - <li class="card__footer-item">
31 - <img class="card__footer-icon card__footer-icon--roles" src="../../img/microlearning/academy_index/icon-roles24.svg"/>
32 - <label for="" class="card__footer-label">All</label>
33 - </li>
34 - <li class="card__footer-item">
35 - <img class="card__footer-icon card__footer-icon--lessons" src="../../img/microlearning/academy_index/icon-lessons24.svg"/>
36 - <label for="" class="card__footer-label">9</label>
37 - </li>
38 - </ul>
39 - </a>
40 - <a href="../../docs/microlearning/index_academy_microlearning" class="card">
41 - <div class="card__body" style="background: url(../../img/microlearning/academy_index/microlearnings2.svg) center no-repeat; background-size: 20%;">
42 - <h4 class="title">Microlearnings</h4>
43 - </div>
44 - <ul class="card__footer">
45 - <li class="card__footer-item">
46 - <img class="card__footer-icon card__footer-icon--level" src="../../img/microlearning/academy_index/icon-level24.svg"/>
47 - <label for="" class="card__footer-label">All</label>
48 - </li>
49 - <li class="card__footer-item">
50 - <img class="card__footer-icon card__footer-icon--roles" src="../../img/microlearning/academy_index/icon-roles24.svg"/>
51 - <label for="" class="card__footer-label">All</label>
52 - </li>
53 - <li class="card__footer-item">
54 - <img class="card__footer-icon card__footer-icon--lessons" src="../../img/microlearning/academy_index/icon-lessons24.svg"/>
55 - <label for="" class="card__footer-label">265</label>
56 - </li>
57 - </ul>
58 - </a>
59 - <a href="../../docs/usecase/index_academy_usecase_all" class="card">
60 - <div class="card__body" style="background: url(../../img/microlearning/academy_index/usecases.svg) center no-repeat; background-size: 15%;">
61 - <h4 class="title">Use Cases</h4>
62 - </div>
63 - <ul class="card__footer">
64 - <li class="card__footer-item">
65 - <img class="card__footer-icon card__footer-icon--level" src="../../img/microlearning/academy_index/icon-level24.svg"/>
66 - <label for="" class="card__footer-label">All</label>
67 - </li>
68 - <li class="card__footer-item">
69 - <img class="card__footer-icon card__footer-icon--roles" src="../../img/microlearning/academy_index/icon-roles24.svg"/>
70 - <label for="" class="card__footer-label">All</label>
71 - </li>
72 - <li class="card__footer-item">
73 - <img class="card__footer-icon card__footer-icon--lessons" src="../../img/microlearning/academy_index/icon-lessons24.svg"/>
74 - <label for="" class="card__footer-label">8</label>
75 - </li>
76 - </ul>
77 - </a>
78 - <a href="../../docs/migrationpath/index_academy_migrationpath_all" class="card">
79 - <div class="card__body" style="background: url(../../img/microlearning/academy_index/migration-paths.svg) center no-repeat; background-size: 15%;">
80 - <h4 class="title">Migration Paths</h4>
81 - </div>
82 - <ul class="card__footer">
83 - <li class="card__footer-item">
84 - <img class="card__footer-icon card__footer-icon--level" src="../../img/microlearning/academy_index/icon-level24.svg"/>
85 - <label for="" class="card__footer-label">All</label>
86 - </li>
87 - <li class="card__footer-item">
88 - <img class="card__footer-icon card__footer-icon--roles" src="../../img/microlearning/academy_index/icon-roles24.svg"/>
89 - <label for="" class="card__footer-label">All</label>
90 - </li>
91 - <li class="card__footer-item">
92 - <img class="card__footer-icon card__footer-icon--lessons" src="../../img/microlearning/academy_index/icon-lessons24.svg"/>
93 - <label for="" class="card__footer-label">12</label>
94 - </li>
95 - </ul>
96 - </a>
97 - <a href="../../docs/rca-knowledgebase/index_academy_rca-knowledgebase_all" class="card">
98 - <div class="card__body" style="background: url(../../img/microlearning/academy_index/rca-knowledgebase.svg) center no-repeat; background-size: 17%;">
99 - <h4 class="title">RCA Knowledge Base</h4>
100 - </div>
101 - <ul class="card__footer">
102 - <li class="card__footer-item">
103 - <img class="card__footer-icon card__footer-icon--level" src="../../img/microlearning/academy_index/icon-level24.svg"/>
104 - <label for="" class="card__footer-label">All</label>
105 - </li>
106 - <li class="card__footer-item">
107 - <img class="card__footer-icon card__footer-icon--roles" src="../../img/microlearning/academy_index/icon-roles24.svg"/>
108 - <label for="" class="card__footer-label">All</label>
109 - </li>
110 - <li class="card__footer-item">
111 - <img class="card__footer-icon card__footer-icon--lessons" src="../../img/microlearning/academy_index/icon-lessons24.svg"/>
112 - <label for="" class="card__footer-label">6</label>
113 - </li>
114 - </ul>
115 - </a>
116 - <a href="https://www.emagiz.com/en/certification/" class="card card__--__featured">
117 - <div class="card__body" style="background: url(../../img/microlearning/academy_index/get_certified.png) center no-repeat; background-size: 20%;">
118 - <h4 class="title">Get Certified!!</h4>
119 - </div>
120 - <ul class="card__footer">
121 - <li class="card__footer-item">
122 - <img class="card__footer-icon card__footer-icon--level" src="../../img/microlearning/academy_index/icon-level24.svg"/>
123 - <label for="" class="card__footer-label">All</label>
124 - </li>
125 - <li class="card__footer-item">
126 - <img class="card__footer-icon card__footer-icon--roles" src="../../img/microlearning/academy_index/icon-roles24.svg"/>
127 - <label for="" class="card__footer-label">All</label>
128 - </li>
129 - <li class="card__footer-item">
130 - <img class="card__footer-icon card__footer-icon--lessons" src="../../img/microlearning/academy_index/icon-lessons24.svg"/>
131 - <label for="" class="card__footer-label">9</label>
132 - </li>
133 - </ul>
134 - </a>
135 - </div>
136 - </div>
137 -</main>
138 -</div>
139 -</div>__--
61 +
62 +</body>
63 +
64 +</html>
65 +{{/html}}
66 +
XWiki.StyleSheetExtension[0]
Code
... ... @@ -1,2 +1,161 @@
1 -#xwikicontent {background-color: #f5f5f5;font-family:Ubuntu;color:#10137e
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 +
2 2  }
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 +}