Changeset 49263ae
- Timestamp:
- 02/07/23 13:04:18 (23 months ago)
- Branches:
- master
- Children:
- f7b0906
- Parents:
- d09caa7
- Location:
- src/main/resources/templates
- Files:
-
- 2 edited
Legend:
- Unmodified
- Added
- Removed
-
src/main/resources/templates/films.html
rd09caa7 r49263ae 197 197 <div xmlns:th="http://www.thymeleaf.org"> 198 198 <div class="main"> 199 <!-- <div th:each="film : ${films}" class="container">--> 200 <!-- <div class="card">--> 201 <!-- <div class="imgBx">--> 202 <!-- <img th:src="@{${film.getUrl()}}"/>--> 203 <!-- </div>--> 204 <!-- <div class="contentBx">--> 205 <!-- <h2 th:text="${film.getName()}"></h2>--> 206 <!-- <div class="size">--> 207 <!-- <h3>Duration :</h3>--> 208 <!-- <span th:text="${film.getDuration()}"></span>--> 209 <!-- </div>--> 210 <!-- <div class="color">--> 211 <!-- <h3>Genre:</h3>--> 212 <!-- <span th:text="${film.getGenre()}"></span>--> 213 <!-- </div>--> 214 <!-- <form th:action="@{'/home/getFilm/{id}' (id=${film.getId_film()})}"--> 215 <!-- th:method="GET">--> 216 <!-- <button class="button" type="submit">Details</button>--> 217 <!-- </form>--> 218 219 220 <!-- </div>--> 221 <!-- </div>--> 222 <!-- </div>--> 199 223 <div th:each="film : ${films}" class="container"> 200 224 <div class="card"> … … 220 244 </div> 221 245 </div> 222 </div>223 <div th:each="film : ${films}" class="container">224 <div class="card">225 <div class="imgBx">226 <img th:src="@{${film.getUrl()}}"/>227 </div>228 <div class="contentBx">229 <h2 th:text="${film.getName()}"></h2>230 <div class="size">231 <h3>Duration :</h3>232 <span th:text="${film.getDuration()}"></span>233 </div>234 <div class="color">235 <h3>Genre:</h3>236 <span th:text="${film.getGenre()}"></span>237 </div>238 <form th:action="@{'/home/getFilm/{id}' (id=${film.getId_film()})}"239 th:method="GET">240 <button class="button" type="submit">Details</button>241 </form>242 243 244 </div>245 </div>246 246 </div> 247 247 </div> -
src/main/resources/templates/projections.html
rd09caa7 r49263ae 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 9 </body> 10 </html> 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 200 <!--<div th:each="projection: ${projections}">--> 201 202 <div th:each="projection: ${projections}" class="container"> 203 <div class="card"> 204 <div class="imgBx"> 205 <img th:src="@{${projection.film.getUrl()}}"/> 206 </div> 207 <div class="contentBx"> 208 <h2 th:text="${projection.film.getName()}"></h2> 209 <div class="size"> 210 <h3>Duration :</h3> 211 <span th:text="${projection.film.getDuration()}"></span> 212 </div> 213 <div class="color"> 214 <h3>Genre:</h3> 215 <span th:text="${projection.film.getGenre()}"></span> 216 </div> 217 </div> 218 </div> 219 </div> 220 </div> 221 </div> 222 </div>
Note:
See TracChangeset
for help on using the changeset viewer.