Skip to Content

Changes for page Academy

Last modified by Erik Bakker on 2024/09/24 16:12
From version 71.1
edited by Erik Bakker
on 2022/04/25 16:13
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,149 +1,66 @@
1 -Dit is een text basis
1 +{{html}}
2 +<html
2 2  
4 +<head>
3 3  
4 -{{html}}
5 -<html><body<div class="ez-academy">
6 - <div class="ez-academy__body">
7 - <main class="master">
8 - <div class="card-container">
9 - <a href="../../docs/fundamental/index_academy_fundamental_all" class="card">
10 - <div class="card__body" style="background: url(/bin/download/Main/eMagiz%20Academy/WebHome/fundamentals.svg) center no-repeat; background-size: 20%;">
11 - <h4 class="title">Fundamentals</h4>
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 +
12 12   </div>
13 - <ul class="card__footer">
14 - <li class="card__footer-item">
15 - <img class="card__footer-icon card__footer-icon--level" src="/bin/download/Main/eMagiz%20Academy/WebHome/icon-level24.svg">
16 - <label for="" class="card__footer-label">All</label>
17 - </li>
18 - <li class="card__footer-item">
19 - <img class="card__footer-icon card__footer-icon--roles" src="/bin/download/Main/eMagiz%20Academy/WebHome/icon-roles24.svg">
20 - <label for="" class="card__footer-label">All</label>
21 - </li>
22 - <li class="card__footer-item">
23 - <img class="card__footer-icon card__footer-icon--lessons" src="/bin/download/Main/eMagiz%20Academy/WebHome/icon-lessons24.svg">
24 - <label for="" class="card__footer-label">9</label>
25 - </li>
26 - </ul>
27 - </a>
28 - <a href="../../docs/microlearning/index_academy_microlearning" class="card">
29 - <div class="card__body" style="background: url(../../img/microlearning/academy_index/microlearnings2.svg) center no-repeat; background-size: 20%;">
30 - <h4 class="title">Microlearnings</h4>
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 +
31 31   </div>
32 - <ul class="card__footer">
33 - <li class="card__footer-item">
34 - <img class="card__footer-icon card__footer-icon--level" src="../../img/microlearning/academy_index/icon-level24.svg">
35 - <label for="" class="card__footer-label">All</label>
36 - </li>
37 - <li class="card__footer-item">
38 - <img class="card__footer-icon card__footer-icon--roles" src="../../img/microlearning/academy_index/icon-roles24.svg">
39 - <label for="" class="card__footer-label">All</label>
40 - </li>
41 - <li class="card__footer-item">
42 - <img class="card__footer-icon card__footer-icon--lessons" src="../../img/microlearning/academy_index/icon-lessons24.svg">
43 - <label for="" class="card__footer-label">265</label>
44 - </li>
45 - </ul>
46 - </a>
47 - <a href="../../docs/usecase/index_academy_usecase_all" class="card">
48 - <div class="card__body" style="background: url(../../img/microlearning/academy_index/usecases.svg) center no-repeat; background-size: 15%;">
49 - <h4 class="title">Use Cases</h4>
50 - </div>
51 - <ul class="card__footer">
52 - <li class="card__footer-item">
53 - <img class="card__footer-icon card__footer-icon--level" src="../../img/microlearning/academy_index/icon-level24.svg">
54 - <label for="" class="card__footer-label">All</label>
55 - </li>
56 - <li class="card__footer-item">
57 - <img class="card__footer-icon card__footer-icon--roles" src="../../img/microlearning/academy_index/icon-roles24.svg">
58 - <label for="" class="card__footer-label">All</label>
59 - </li>
60 - <li class="card__footer-item">
61 - <img class="card__footer-icon card__footer-icon--lessons" src="../../img/microlearning/academy_index/icon-lessons24.svg">
62 - <label for="" class="card__footer-label">8</label>
63 - </li>
64 - </ul>
65 - </a>
66 - <a href="../../docs/migrationpath/index_academy_migrationpath_all" class="card">
67 - <div class="card__body" style="background: url(../../img/microlearning/academy_index/migration-paths.svg) center no-repeat; background-size: 15%;">
68 - <h4 class="title">Migration Paths</h4>
69 - </div>
70 - <ul class="card__footer">
71 - <li class="card__footer-item">
72 - <img class="card__footer-icon card__footer-icon--level" src="../../img/microlearning/academy_index/icon-level24.svg">
73 - <label for="" class="card__footer-label">All</label>
74 - </li>
75 - <li class="card__footer-item">
76 - <img class="card__footer-icon card__footer-icon--roles" src="../../img/microlearning/academy_index/icon-roles24.svg">
77 - <label for="" class="card__footer-label">All</label>
78 - </li>
79 - <li class="card__footer-item">
80 - <img class="card__footer-icon card__footer-icon--lessons" src="../../img/microlearning/academy_index/icon-lessons24.svg">
81 - <label for="" class="card__footer-label">12</label>
82 - </li>
83 - </ul>
84 - </a>
85 - <a href="../../docs/rca-knowledgebase/index_academy_rca-knowledgebase_all" class="card">
86 - <div class="card__body" style="background: url(../../img/microlearning/academy_index/rca-knowledgebase.svg) center no-repeat; background-size: 17%;">
87 - <h4 class="title">RCA Knowledge Base</h4>
88 - </div>
89 - <ul class="card__footer">
90 - <li class="card__footer-item">
91 - <img class="card__footer-icon card__footer-icon--level" src="../../img/microlearning/academy_index/icon-level24.svg">
92 - <label for="" class="card__footer-label">All</label>
93 - </li>
94 - <li class="card__footer-item">
95 - <img class="card__footer-icon card__footer-icon--roles" src="../../img/microlearning/academy_index/icon-roles24.svg">
96 - <label for="" class="card__footer-label">All</label>
97 - </li>
98 - <li class="card__footer-item">
99 - <img class="card__footer-icon card__footer-icon--lessons" src="../../img/microlearning/academy_index/icon-lessons24.svg">
100 - <label for="" class="card__footer-label">6</label>
101 - </li>
102 - </ul>
103 - </a>
104 - <a href="https://www.emagiz.com/en/certification/" class="card card--featured">
105 - <div class="card__body" style="background: url(../../img/microlearning/academy_index/get_certified.png) center no-repeat; background-size: 20%;">
106 - <h4 class="title">Get Certified!!</h4>
107 - </div>
108 - <ul class="card__footer">
109 - <li class="card__footer-item">
110 - <img class="card__footer-icon card__footer-icon--level" src="../../img/microlearning/academy_index/icon-level24.svg">
111 - <label for="" class="card__footer-label">All</label>
112 - </li>
113 - <li class="card__footer-item">
114 - <img class="card__footer-icon card__footer-icon--roles" src="../../img/microlearning/academy_index/icon-roles24.svg">
115 - <label for="" class="card__footer-label">All</label>
116 - </li>
117 - <li class="card__footer-item">
118 - <img class="card__footer-icon card__footer-icon--lessons" src="../../img/microlearning/academy_index/icon-lessons24.svg">
119 - <label for="" class="card__footer-label">9</label>
120 - </li>
121 - </ul>
122 - </a>
123 - </div>
124 - </main></div>
125 125  
126 -</div>
127 -</span></div></article></div></div><div class="docs-prevnext"></div></div></div><nav class="onPageNav"></nav></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>
128 - document.addEventListener('keyup', function(e) {
129 - if (e.target !== document.body) {
130 - return;
131 - }
132 - // keyCode for '/' (slash)
133 - if (e.keyCode === 191) {
134 - const search = document.getElementById('search_input_react');
135 - search && search.focus();
136 - }
137 - });
138 - </script><script>
139 - var search = docsearch({
140 -
141 - apiKey: '2e1804e3e0c239242d9914d98d6bf260',
142 - indexName: 'emagiz',
143 - inputSelector: '#search_input_react'
144 - });
145 - </script><div id="back-to-top" class="hidden"><svg viewBox="0 0 24 24"><path d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"></path></svg></div></body></html>
146 -{{/html}}
54 + </div>
147 147  
56 + </div>
148 148  
149 -
58 +
59 +
60 + </div>
61 +
62 +</body>
63 +
64 +</html>
65 +{{/html}}
66 +
fundamentals.svg
Author
... ... @@ -1,1 +1,0 @@
1 -XWiki.ebakker
Size
... ... @@ -1,1 +1,0 @@
1 -462 bytes
Content
icon-lessons24.svg
Author
... ... @@ -1,1 +1,0 @@
1 -XWiki.ebakker
Size
... ... @@ -1,1 +1,0 @@
1 -538 bytes
Content
icon-level24.svg
Author
... ... @@ -1,1 +1,0 @@
1 -XWiki.ebakker
Size
... ... @@ -1,1 +1,0 @@
1 -2.1 KB
Content
icon-roles24.svg
Author
... ... @@ -1,1 +1,0 @@
1 -XWiki.ebakker
Size
... ... @@ -1,1 +1,0 @@
1 -1.1 KB
Content
XWiki.StyleSheetExtension[0]
Code
... ... @@ -1,2 +1,161 @@
1 -.navPusher{background-color:#f5f5f5}.docMainWrapper{max-width:1280px !important;display:-ms-grid;display:grid;grid-template-areas:"outer-nav content inner-nav";-ms-grid-columns:auto 32px 1fr 32px auto;grid-template-columns:auto 1fr auto;-ms-grid-rows:1fr;grid-template-rows:1fr;-moz-column-gap:32px;column-gap:32px;position:relative}.docMainWrapper>.docsNavContainer{-ms-grid-row:1;-ms-grid-column:1;grid-area:outer-nav}.docMainWrapper>.docsContainer:first-child{-ms-grid-row:1;-ms-grid-column:3;grid-area:content;position:relative;z-index:2}.docMainWrapper>.docsContainer:first-child .post:after{content:'';width:100%;height:90px;background-color:#f5f5f5;display:block;position:fixed;top:0}.docMainWrapper>.docsContainer:first-child .post>header{display:none}.docMainWrapper>.onPageNav:nth-child(2){-ms-grid-row:1;-ms-grid-column:5;grid-area:inner-nav;margin:0;padding-top:0;max-width:405px;z-index:1}.docMainWrapper>.onPageNav:nth-child(2):empty{margin:0;padding:0;width:0;flex:0}.docMainWrapper>.onPageNav:nth-child(2)>.toc-headings{border:none;padding:16px 32px;background-color:#fff;box-shadow:0 3px 0 0 rgba(16,19,126,0.16)}.docMainWrapper>.onPageNav:nth-child(2)>.toc-headings li{margin:0;padding:0}.docMainWrapper>.onPageNav:nth-child(2)>.toc-headings a{font-size:20px;line-height:30px;color:gray;position:relative;max-width:100%;display:inline-block}.docMainWrapper>.onPageNav:nth-child(2)>.toc-headings a.active{color:#10137e}.docMainWrapper>.onPageNav:nth-child(2)>.toc-headings a:after{content:"";display:none;width:0;position:absolute;height:2px;background-color:#10137e;bottom:0;left:0}.docMainWrapper>.onPageNav:nth-child(2)>.toc-headings a:hover:after{display:inline-block;-webkit-animation:line-left 250ms ease-in-out forwards;animation:line-left 250ms ease-in-out forwards}.container.mainContainer.docsContainer{flex-shrink:0 !important;margin:0 !important;width:100%}.ez-academy__body main.master{width:100%;max-width:1280px;margin:0 auto}.ez-academy *{font-family:Ubuntu;color:#10137e}.ez-academy h1,.ez-academy h2,.ez-academy h3,.ez-academy h4,.ez-academy h5,.ez-academy h6{font-family:"Ubuntu", sans-serif;font-weight:700;color:#10137e;margin-top:0}.ez-academy h2.title{font-size:40px;margin-top:8px;margin-bottom:32px}.ez-academy h3{margin-top:32px;margin-bottom:32px;font-size:32px;line-height:37px}.ez-academy h4{font-size:24px;line-height:28px}.ez-academy ul{margin:0;padding:0;list-style:none;border:none}.ez-academy li{margin:0;display:inline-block}.ez-academy p{font-size:20px;line-height:30px;margin-bottom:8px}.ez-academy__body main ul,.ez-academy__body main p{margin-bottom:16px}@-webkit-keyframes block-left{from{right:0;width:100%}to{right:0;width:0}}@keyframes block-left{from{right:0;width:100%}to{right:0;width:0}}.ez-academy .card{box-shadow:0 3px 0 0 rgba(16,19,126,0.16);min-height:200px;background-color:#fff;display:-ms-grid;display:grid;grid-template-areas:"body" "footer";-ms-grid-columns:1fr;grid-template-columns:1fr;-ms-grid-rows:1fr auto;grid-template-rows:1fr auto}.ez-academy .card__body{-ms-grid-row:1;-ms-grid-column:1;grid-area:body;padding:16px;position:relative}.ez-academy .card__body .title{margin-top:0;text-shadow:0 0 10px #fff;position:relative;z-index:2}.ez-academy .card__body:after{content:'';width:100%;height:100%;display:block;background-color:rgba(255,255,255,0.25);position:absolute;top:0;right:0;z-index:1}.ez-academy .card__body:hover:after{-webkit-animation:block-left 250ms ease-in-out forwards;animation:block-left 250ms ease-in-out forwards}.ez-academy .card__footer{-ms-grid-row:2;-ms-grid-column:1;grid-area:footer;background-color:#10137e;margin:0;list-style:none;display:flex;padding:12px 16px}.ez-academy .card__footer-item{display:flex;margin:0;margin-right:32px}.ez-academy .card__footer-icon{max-height:24px;width:auto;margin-right:8px}.ez-academy .card__footer-label{color:#fff;font-size:20px;line-height:24px}.ez-academy .card--featured{-ms-grid-column-span:3;grid-column:span 3}.ez-academy .card--featured .card__body .title{font-size:32px;line-height:37px}.ez-academy .card-container{display:-ms-grid;display:grid;-ms-grid-columns:(1fr)[3];grid-template-columns:repeat(3, 1fr);gap:32px;padding-bottom:32px}.ez-academy .doc-nav{-ms-grid-row:1;-ms-grid-column:2;display:-ms-grid;display:grid;-ms-grid-columns:auto (1fr)[4];grid-template-columns:auto repeat(4, 1fr);-ms-grid-rows:auto;grid-template-rows:auto;padding-bottom:3px;background-color:#f5f5f5;overflow:hidden;grid-area:nav}.ez-academy .doc-nav__item{padding:16px;display:flex;position:relative;background-color:#fff;box-shadow:0 3px 0 0 rgba(16,19,126,0.16)}.ez-academy .doc-nav__item a{padding:0 32px;display:block;text-align:center;position:relative;width:100%;flex:0 0 100%}.ez-academy .doc-nav__item a:after{content:"";display:none;width:0;position:absolute;height:2px;background-color:#10137e;bottom:0;left:0}.ez-academy .doc-nav__item a:before{content:'';position:absolute;right:0;border:8px solid #f5f5f5;border-left-color:transparent;border-bottom-color:transparent;width:48px;height:48px;flex:0 0 80px;transform:rotate(45deg) translateY(-50%);transform-origin:center;z-index:4}.ez-academy .doc-nav__item:after{content:none}.ez-academy .doc-nav__item:first-child a{border-left:none}.ez-academy .doc-nav__item:last-child a:before{content:none}.ez-academy .doc-nav__item:hover a:after{display:inline-block;-webkit-animation:line-left 250ms ease-in-out forwards;animation:line-left 250ms ease-in-out forwards}.ez-academy .dropdown{display:-ms-grid;display:grid;position:absolute;left:100%;height:48px;width:50%;overflow:hidden;grid-template-areas:"dropdown nav";-ms-grid-columns:minmax(0, 100%) auto;grid-template-columns:minmax(0, 100%) auto}.ez-academy .dropdown__dropdown{-ms-grid-row:1;-ms-grid-column:1;padding-left:32px;font-size:24px;font-weight:700;grid-area:dropdown;text-overflow:ellipsis;overflow:hidden !important;white-space:nowrap;max-width:100%;border:none}.ez-academy .dropdown__nav{-ms-grid-row:1;-ms-grid-column:2;display:flex;grid-area:nav}.ez-academy .dropdown__nav a{margin:auto 0;display:flex}.ez-academy .dropdown__nav img{max-width:32px;height:auto;margin:auto}.ez-academy .micro-learning{max-height:calc(100vh - 170px);overflow-y:hidden;display:-ms-grid;display:grid;grid-template-areas:"nav" "doc";-ms-grid-columns:1fr;grid-template-columns:1fr;-ms-grid-rows:auto 1fr;grid-template-rows:auto 1fr}.ez-academy .micro-learning>.doc{-ms-grid-row:2;-ms-grid-column:1;padding-left:24px;padding-right:24px;grid-area:doc;overflow-y:auto}.ez-academy .micro-learning>.doc h1,.ez-academy .micro-learning>.doc h2,.ez-academy .micro-learning>.doc h3,.ez-academy .micro-learning>.doc h4{top:0;background-color:#f5f5f5}.ez-academy .micro-learning>.doc h1{font-size:36px;top:0}.ez-academy .micro-learning>.doc h2{font-size:28px;top:36px}.ez-academy .micro-learning>.doc h3{font-size:24px;top:66px}.ez-academy .micro-learning>.doc p{font-size:16px;line-height:24px}.ez-academy .micro-learning>.doc a{color:#69b731}.ez-academy .micro-learning>.doc a:hover{text-decoration:underline}.ez-academy .micro-learning>.doc .anchor{top:0 !important}.ez-academy .micro-learning>.doc ul{list-style:disc;padding-left:32px}.ez-academy .micro-learning>.doc ul>li{display:list-item}.ez-academy .strip-container{width:100%;display:flex;flex-direction:column;counter-reset:stripCounter}@-webkit-keyframes line-left{from{left:0;width:0}to{left:0;width:100%}}@keyframes line-left{from{left:0;width:0}to{left:0;width:100%}}@-webkit-keyframes line-middle{from{left:50%;width:0}to{left:0;width:100%}}@keyframes line-middle{from{left:50%;width:0}to{left:0;width:100%}}.ez-academy .strip{background-color:#fff;box-shadow:0 3px 0 0 rgba(16,19,126,0.16);display:block;margin-bottom:16px;counter-increment:stripCounter;position:relative}.ez-academy .strip:after{content:'';display:none;width:0;position:absolute;height:2px;background-color:#10137e;bottom:0;left:0}.ez-academy .strip:hover:after{display:inline-block;-webkit-animation:line-left 250ms ease-in-out forwards;animation:line-left 250ms ease-in-out forwards}.ez-academy .strip__link{display:flex;justify-content:flex-end;padding:16px 32px}.ez-academy .strip__link>*{cursor:pointer}.ez-academy .strip__label{font-weight:500;font-size:20px;line-height:24px;margin:0 auto 0 0}.ez-academy .strip__label span{display:inline-block}.ez-academy .strip__label span:after{content:"." counter(stripCounter) " - "}.ez-academy .strip__attribute{display:flex;margin:0 0 0 32px}.ez-academy .strip__attribute-icon{max-height:24px;width:auto;margin-right:8px}.ez-academy .strip__attribute-label{font-weight:500;font-size:20px;line-height:24px}.ez-academy .tabs{display:flex;position:relative;margin-bottom:16px}.ez-academy .tabs:after{content:'';width:100%;height:2px;background-color:#10137e;position:absolute;bottom:0;left:0}.ez-academy .tabs__item{border:1px solid #10137e;border-left:none;border-bottom:none;border-top-left-radius:8px;border-top-right-radius:8px;background-color:#fff;position:relative}.ez-academy .tabs__item:first-child{border-left:1px solid #10137e}.ez-academy .tabs__item--active{z-index:10}.ez-academy .tabs__item--active .tabs__link{font-weight:700}.ez-academy .tabs__link{font-size:20px;line-height:24px;padding:8px 16px;display:inline-block}
1 +body {
2 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 +}