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 48.1
edited by Erik Bakker
on 2022/04/25 15:29
Change comment: There is no comment for this version

Summary

Details

Page properties
Content
... ... @@ -1,66 +1,1 @@
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 -
1 +{{dashboard/}}
XWiki.StyleSheetExtension[0]
Code
... ... @@ -1,161 +1,1 @@
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 -}
1 +#xwikicontent {background-color: lightBlue}
Use this extension
... ... @@ -1,1 +1,1 @@
1 -currentPage
1 +always