1 | <style xmlns:sec="http://www.w3.org/1999/xhtml">
|
---|
2 | @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
|
---|
3 |
|
---|
4 |
|
---|
5 | *{
|
---|
6 | font-family: 'Poppins', sans-serif;
|
---|
7 | }
|
---|
8 |
|
---|
9 |
|
---|
10 | .container{
|
---|
11 |
|
---|
12 | position: relative;
|
---|
13 | }
|
---|
14 |
|
---|
15 | .container .card{
|
---|
16 | position: relative;
|
---|
17 | width: 250px;
|
---|
18 | height: 300px;
|
---|
19 | background: #232323;
|
---|
20 | border-radius: 20px;
|
---|
21 | overflow: hidden;
|
---|
22 | }
|
---|
23 |
|
---|
24 | .container .card:before{
|
---|
25 | content: '';
|
---|
26 | position: absolute;
|
---|
27 | top: 0;
|
---|
28 | left: 0;
|
---|
29 | width: 100%;
|
---|
30 | height: 100%;
|
---|
31 | background: black;
|
---|
32 | transition: 0.5s ease-in-out;
|
---|
33 | }
|
---|
34 |
|
---|
35 |
|
---|
36 | .container .card:after{
|
---|
37 | position: absolute;
|
---|
38 |
|
---|
39 | font-size: 6em;
|
---|
40 | font-weight: 600;
|
---|
41 | font-style: italic;
|
---|
42 | color: rgba(255,255,25,0.05)
|
---|
43 | }
|
---|
44 |
|
---|
45 | .container .card .imgBx{
|
---|
46 | position: absolute;
|
---|
47 | width: 100%;
|
---|
48 | height: 300px;
|
---|
49 | transition: 0.5s;
|
---|
50 | }
|
---|
51 |
|
---|
52 | .container .card:hover .imgBx{
|
---|
53 | top: 0%;
|
---|
54 |
|
---|
55 | }
|
---|
56 |
|
---|
57 | .container .card .imgBx img{
|
---|
58 | position: absolute;
|
---|
59 | width: 100%;
|
---|
60 | }
|
---|
61 |
|
---|
62 | .container .card .contentBx{
|
---|
63 | position: absolute;
|
---|
64 | bottom: 0;
|
---|
65 | width: 100%;
|
---|
66 | height: 300px;
|
---|
67 | text-align: center;
|
---|
68 | transition: 1s;
|
---|
69 | z-index: 10;
|
---|
70 | }
|
---|
71 |
|
---|
72 | .container .card:hover .contentBx{
|
---|
73 | height: 300px;
|
---|
74 | }
|
---|
75 |
|
---|
76 | .container .card .contentBx h2{
|
---|
77 | position: relative;
|
---|
78 | font-weight: 300;
|
---|
79 | letter-spacing: 1px;
|
---|
80 | color: #fff;
|
---|
81 | margin: 0;
|
---|
82 | }
|
---|
83 |
|
---|
84 | .container .card .contentBx .size, .container .card .contentBx .color, .container .card .contentBx .button {
|
---|
85 | display: flex;
|
---|
86 | justify-content: start;
|
---|
87 | align-items: start;
|
---|
88 | padding: 8px 20px;
|
---|
89 | transition: 0.5s;opacity: 0;
|
---|
90 | visibility: hidden;
|
---|
91 | padding-top: 0;
|
---|
92 | padding-bottom: 0;
|
---|
93 | }
|
---|
94 |
|
---|
95 | .container .card .contentBx .button {
|
---|
96 | display: flex;
|
---|
97 | justify-content: center;
|
---|
98 | align-items: center;
|
---|
99 | padding: 8px 20px;
|
---|
100 | transition: 0.5s;opacity: 0;
|
---|
101 | visibility: hidden;
|
---|
102 | padding-top: 0;
|
---|
103 | padding-bottom: 0;
|
---|
104 | }
|
---|
105 | .container .card:hover .contentBx .size{
|
---|
106 | opacity: 1;
|
---|
107 | visibility: visible;
|
---|
108 | transition-delay: 0.5s;
|
---|
109 | }
|
---|
110 | .container .card:hover .contentBx .button{
|
---|
111 | opacity: 1;
|
---|
112 | visibility: visible;
|
---|
113 | transition-delay: 0.5s;
|
---|
114 | }
|
---|
115 |
|
---|
116 | .container .card:hover .contentBx .color{
|
---|
117 | opacity: 1;
|
---|
118 | visibility: visible;
|
---|
119 | transition-delay: 0.6s;
|
---|
120 | }
|
---|
121 |
|
---|
122 | .container .card .contentBx .size h3, .container .card .contentBx .color h3{
|
---|
123 | color: #fff;
|
---|
124 | font-weight: 600;
|
---|
125 | font-size: 8px;
|
---|
126 | text-transform: uppercase;
|
---|
127 | letter-spacing: 2px;
|
---|
128 | margin-right: 10px;
|
---|
129 | }
|
---|
130 |
|
---|
131 | .container .card .contentBx .size span{
|
---|
132 | width: 26px;
|
---|
133 | height: 26px;
|
---|
134 | text-align: center;
|
---|
135 | line-height: 26px;
|
---|
136 | font-size: 8px;
|
---|
137 | display: inline-block;
|
---|
138 | color: #111;
|
---|
139 | background: #fff;
|
---|
140 | margin: 0 5px;
|
---|
141 | transition: 0.5s;
|
---|
142 | color: #111;
|
---|
143 | border-radius: 4px;
|
---|
144 | cursor: pointer;
|
---|
145 | }
|
---|
146 |
|
---|
147 |
|
---|
148 |
|
---|
149 | .container .card .contentBx .color span{
|
---|
150 | width: 100%;
|
---|
151 | height: 20px;
|
---|
152 | color: white;
|
---|
153 | margin: 0 5px;
|
---|
154 | cursor: pointer;
|
---|
155 | }
|
---|
156 |
|
---|
157 |
|
---|
158 | .container .card .contentBx a{
|
---|
159 | display: inline-block;
|
---|
160 | padding: 10px 20px;
|
---|
161 | background: #fff;
|
---|
162 | border-radius: 4px;
|
---|
163 | margin-top: 10px;
|
---|
164 | text-decoration: none;
|
---|
165 | font-weight: 600;
|
---|
166 | color: #111;
|
---|
167 | opacity: 0;
|
---|
168 | transform: translateY(50px);
|
---|
169 | transition: 0.5s;
|
---|
170 | margin-top: 0;
|
---|
171 | }
|
---|
172 |
|
---|
173 | .container .card:hover .contentBx a{
|
---|
174 | opacity: 1;
|
---|
175 | transition-delay: 0.75s;
|
---|
176 |
|
---|
177 | }
|
---|
178 | .main{
|
---|
179 | margin-top: 100px;
|
---|
180 | display: flex;
|
---|
181 | align-items: flex-start;
|
---|
182 | justify-content: flex-start;
|
---|
183 | }
|
---|
184 | .button {
|
---|
185 | top:250px;
|
---|
186 | background-color: white;
|
---|
187 | border: none;
|
---|
188 | color: black;
|
---|
189 | padding: 10px 20px;
|
---|
190 | text-align: center;
|
---|
191 | text-decoration: none;
|
---|
192 | display: inline-block;
|
---|
193 | font-size: 16px;
|
---|
194 | border-radius: 20px;
|
---|
195 | }
|
---|
196 | </style>
|
---|
197 | <div xmlns:th="http://www.thymeleaf.org">
|
---|
198 | <div class="main">
|
---|
199 | <div th:each="event : ${events}" class="container">
|
---|
200 | <div class="card">
|
---|
201 | <div class="imgBx">
|
---|
202 | <img th:src="@{${event.img_url}}"/>
|
---|
203 | </div>
|
---|
204 | <div class="contentBx">
|
---|
205 | <h2 th:text="${event.theme}"></h2>
|
---|
206 | <div class="size">
|
---|
207 | <h3>Duration :</h3>
|
---|
208 | <span th:text="${event.getDuration()}"></span>
|
---|
209 | </div>
|
---|
210 | <form th:action="@{'/home/getFilm/{id}' (id=${event.getId_event()})}"
|
---|
211 | th:method="GET">
|
---|
212 | <button class="button" type="submit">Датали</button>
|
---|
213 | </form>
|
---|
214 | </div>
|
---|
215 |
|
---|
216 | </div>
|
---|
217 | </div>
|
---|
218 | </div>
|
---|
219 | </div> |
---|