Changeset 49263ae


Ignore:
Timestamp:
02/07/23 13:04:18 (22 months ago)
Author:
milamihajlovska <mila.mihajlovska01@…>
Branches:
master
Children:
f7b0906
Parents:
d09caa7
Message:

update in projections.html

Location:
src/main/resources/templates
Files:
2 edited

Legend:

Unmodified
Added
Removed

  • src/main/resources/templates/films.html

    rd09caa7 r49263ae  
    197197<div xmlns:th="http://www.thymeleaf.org">
    198198    <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>-->
    199223        <div th:each="film : ${films}" class="container">
    200224            <div class="card">
    … …  
    220244                </div>
    221245            </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>
    246246            </div>
    247247    </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.