Skip to Content

Changes for page Accelerators

Last modified by Erik Bakker on 2025/01/10 15:08
From version 6.1
edited by Erik Bakker
on 2022/04/29 10:43
Change comment: There is no comment for this version
To version 3.1
edited by Erik Bakker
on 2022/04/29 08:02
Change comment: There is no comment for this version

Summary

Details

Page properties
Content
... ... @@ -1,33 +1,16 @@
1 1  {{html}}
2 -<html><body<div class="ez-academy">
3 - <div class="ez-academy__body">
4 - <main class="master">
5 - <div class="card-container">
6 - <a href="/bin/view/Main/eMagiz%20Academy/Microlearnings/" class="card">
7 - <div class="card__body" style="background: url(/bin/download/eMagiz%20Store/WebHome/accelerator.png) center no-repeat; background-size: 20%;">
8 - <h4 class="title">REST Connectivity</h4>
9 - </div>
10 - <ul class="card__footer">
11 - <li class="card__footer-item">
12 - <img class="card__footer-icon card__footer-icon--lessons" src="/bin/download/Main/eMagiz%20Academy/WebHome/icon-lessons24.svg">
13 - <label for="" class="card__footer-label">9</label>
14 - </li>
15 - </ul>
16 - </a>
17 - <a href="../../docs/microlearning/index_academy_microlearning" class="card">
18 - <div class="card__body" style="background: url(/bin/download/eMagiz%20Store/WebHome/System%20Connector.png) center no-repeat; background-size: 20%;">
19 - <h4 class="title">SOAP Connectivity</h4>
20 - </div>
21 - <ul class="card__footer">
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 - </div>
29 - </main></div>
30 -
31 -</div>
32 -</span></body></html>
2 +<div class="text-overlay">
3 + <h2>Essential Atom Packages</h2>
4 + <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sodales posuere felis non efficitur. Mauris mollis elit urna, id tempus... &nbsp;&nbsp;<a href="#" class="read-more">Read More</a></p>
5 +</div><section class="bg">
6 + <h1 class="title">Blog Card</h1>
7 + <div class="blog-card">
8 + <img class="blog-img" src="https://user-images.githubusercontent.com/16360374/37567282-e1932872-2a81-11e8-807b-efc5a997f2f1.jpg" />
9 + <div class="text-overlay">
10 + <h2>Essential Atom Packages</h2>
11 + <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sodales posuere felis non efficitur. Mauris mollis elit urna, id tempus... &nbsp;&nbsp;<a href="#" class="read-more">Read More</a></p>
12 + </div>
13 + </div>
14 + <div class="credit">Created by <a class="creator-link" href="https://brettstevenson.io">Brett Stevenson</a></div>
15 +</section>
33 33  {{/html}}
XWiki.StyleSheetExtension[0]
Caching policy
... ... @@ -1,0 +1,1 @@
1 +long
Code
... ... @@ -1,0 +1,127 @@
1 +@import url("https://fonts.googleapis.com/css?family=Lato:400,400i,700");
2 +@import url("https://fonts.googleapis.com/css?family=Raleway:400,400i,700");
3 +@import url(https://fonts.googleapis.com/css?family=Kaushan+Script);
4 +
5 +* {
6 + font-family: 'Lato','Helvetica Neue', Arial, sans-serif;
7 +}
8 +
9 +.bg {
10 + background: #3a3a3a;
11 + width: 100vw;
12 + height: 100vh;
13 +}
14 +
15 +.title {
16 + color: rgba(#fff, 0.85);
17 + font-family: 'Raleway','Lato','Helvetica Neue', Arial, sans-serif;
18 + font-size: 10vw;
19 + font-weight: 800;
20 + text-align: center;
21 + text-shadow: 0 1px 9px rgba(#000, 0.8);
22 + margin: auto;
23 + margin-top: 0;
24 + padding-top: 7vh;
25 +}
26 +
27 +.blog-card {
28 + display: block;
29 + position: relative;
30 + top: 7vw;
31 + width: 400px;
32 + height: 250px;
33 + margin: auto;
34 + box-shadow: 0 2px 10px rgba(#000, 0.85);
35 + transition: all 450ms ease-out 0s;
36 + overflow: hidden;
37 + .blog-img {
38 + position: absolute;
39 + min-width: 100%;
40 + min-height: 100%;
41 + height: 100%;
42 + top: -9999px;
43 + left: -9999px;
44 + right: -9999px;
45 + bottom: -9999px;
46 + margin: auto;
47 + overflow: hidden;
48 + }
49 + &:hover {
50 + box-shadow: 0 2px 35px rgba(#000, 0.85);
51 + .text-overlay {
52 + background: rgba(#fff, 0.8);
53 + height: 50%;
54 + top: 50%;
55 + transition: all 450ms ease-in-out 0s;
56 + }
57 + p {
58 + height: 60px;
59 + transition: all 350ms ease-in-out 0s;
60 + a {
61 + visibility: visible;
62 + }
63 + }
64 + }
65 +}
66 +
67 +.text-overlay {
68 + position: relative;
69 + background: rgba(#fff, 0.6);
70 + width: 100%;
71 + height: 40%;
72 + top: 60%;
73 + box-shadow: 0 -2px 12px rgba(#000, 0.3);
74 + padding: 10px 12px;
75 + overflow: hidden;
76 + transition: all 450ms ease-in-out 0s;
77 + cursor: pointer;
78 + h2 {
79 + color: rgba(#000, 0.85);
80 + letter-spacing: 0.0225em;
81 + width: auto;
82 + margin: 0;
83 + }
84 + p {
85 + color: #555;
86 + width: 380px;
87 + height: 38px;
88 + margin: 8px 0;
89 + line-height: 1.25;
90 + text-overflow: ellipsis;
91 + overflow: hidden;
92 + }
93 + a {
94 + color: #378AEE;
95 + text-decoration: none;
96 + transition: all 350ms linear;
97 + visibility: hidden;
98 + &:hover {
99 + color: #449CC5;
100 + border-bottom: 1px dotted #47A8F2;
101 + }
102 + }
103 +}
104 +
105 +.credit {
106 + position: relative;
107 + color: rgba(#fff, 0.85);
108 + font-family: "Lato", 'Helvetica Neue', Arial, sans-serif;
109 + font-size: 1.5em;
110 + font-weight: 300;
111 + text-align: center;
112 + bottom: -22vh;
113 + .creator-link {
114 + color: rgba(#fff, 0.95);
115 + font-family: 'Kaushan Script', 'Lato','Helvetica Neue',sans-serif;
116 + font-size: 1.05em;
117 + font-weight: 600;
118 + letter-spacing: 0.5px;
119 + text-decoration: none;
120 + transition: all 350ms linear;
121 + &:hover {
122 + color: #44BCC5;
123 + text-shadow: 0 1px 3px rgba(#000, 0.6);
124 + transition: all 350ms linear;
125 + }
126 + }
127 +}
Name
... ... @@ -1,0 +1,1 @@
1 +Store Cards
Use this extension
... ... @@ -1,0 +1,1 @@
1 +currentPage