Skip to Content

Changes for page Academy

Last modified by Erik Bakker on 2024/09/24 16:12
From version 48.1
edited by Erik Bakker
on 2022/04/25 15:29
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,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.StyleSheetExtension[0]
Code
... ... @@ -1,1 +1,161 @@
1 -#xwikicontent {background-color: lightBlue}
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 +}
Use this extension
... ... @@ -1,1 +1,1 @@
1 -always
1 +currentPage