1010
1111 < link rel ="stylesheet " href ="{% static 'css/profile.css' %} ">
1212 < style >
13- # bookings {
14- font-family : "Trebuchet MS" , Arial, Helvetica, sans-serif;
15- border-collapse : collapse;
16- width : 100% ;
13+ html ,
14+ body {
15+ height : 100% ;
16+ }
17+
18+ body {
19+ margin : 0 ;
20+ background : linear-gradient (0deg , # 49a09d, # 5f2c82 );
21+ font-family : sans-serif;
22+ font-weight : 100 ;
23+
1724}
1825
19- # bookings td , # bookings th {
20- border : 1px solid # ddd ;
21- padding : 8px ;
26+ .container {
27+ position : absolute;
28+ top : 30% ;
29+ left : 50% ;
30+ transform : translate (-50% , -50% );
2231}
2332
24- # bookings tr : nth-child (even){background-color : # f2f2f2 ;}
33+ table {
34+ width : 1500px ;
35+ border-collapse : collapse;
36+ overflow : hidden;
37+ box-shadow : 0 0 20px rgba (0 , 0 , 0 , 0.1 );
38+ }
2539
26- # bookings tr : hover {background-color : # ddd ;}
40+ th ,
41+ td {
42+ padding : 15px ;
43+ background-color : rgba (255 , 255 , 255 , 0.2 );
44+ color : # fff ;
45+ }
2746
28- # bookings th {
29- padding-top : 12px ;
30- padding-bottom : 12px ;
47+ th {
3148 text-align : left;
32- background-color : # 4CAF50 ;
33- color : white;
49+ }
50+
51+ thead {
52+ th {
53+ background-color : # 55608f ;
54+ }
55+ }
56+
57+ tbody {
58+ tr {
59+ & : hover {
60+ background-color : rgba (255 , 255 , 255 , 0.3 );
61+ }
62+ }
63+ td {
64+ position : relative;
65+ & : hover {
66+ & : before {
67+ content : "" ;
68+ position : absolute;
69+ left : 0 ;
70+ right : 0 ;
71+ top : -9999px ;
72+ bottom : -9999px ;
73+ background-color : rgba (255 , 255 , 255 , 0.2 );
74+ z-index : -1 ;
75+ }
76+ }
77+ }
3478}
3579</ style >
3680</ head >
3983
4084 < section class ="navigation ">
4185 < div class ="nav-container ">
86+ <!-- <div class="back">
87+ <a href="#">Hi {{user.username}}!</a>
88+ </div> -->
89+ < div class ="back ">
90+ < a href ="/ "> < img src ="{% static 'img/back.png' %} " height ="42 " width ="42 " alt ="" /> </ a >
91+ </ div >
4292 < div class ="brand ">
4393 < a href ="# "> Hi {{user.username}}!</ a >
4494 </ div >
4595 < nav >
4696 < div class ="nav-mobile "> < a id ="nav-toggle " href ="#! "> < span > </ span > </ a > </ div >
4797 < ul class ="nav-list ">
98+
4899 < li >
49100 < a href ="/ "> Home</ a >
50101 </ li >
58109 </ nav >
59110 </ div >
60111 </ section >
61- < h1 align ="center "> Your Bookings</ h1 >
62- < div style ="overflow-x:auto; ">
63- < table id ="bookings ">
64- < tr >
65- < th > S No.</ th >
66- < th > Name</ th >
67- < th > Arrival</ th >
68- < th > Departure</ th >
69- < th > Room No.</ th >
70- <!--<th>Field N</th>-->
71- </ tr >
72- {% for item in formsubmits %}
112+ < h1 align ="center "> < font face ="sans-serif " size ="10 " color ="white "> Your Bookings</ font > </ h1 >
113+ < div class ="container ">
114+ < table >
115+ < thead >
116+ < tr >
117+ < th > S. No.</ th >
118+ < th > Name</ th >
119+ < th > Arrival</ th >
120+ < th > Departure</ th >
121+ < th > Room No.</ th >
122+ </ tr >
123+ </ thead >
124+ < tbody >
125+ {% for item in formsubmits %}
73126 <!--<h3>{{ i.id }} {{ i.name}} from {{i.arrive}} to {{i.depart}} room no. {{i.bookingtable.roomID}} </h3>-->
74127 < tr >
75128 < td > {{ forloop.counter }}</ td >
@@ -79,8 +132,10 @@ <h1 align="center">Your Bookings</h1>
79132 < td > {{ item.bookingtable.roomID }}</ td >
80133 </ tr >
81134 {% endfor %}
82- </ table >
83- </ div >
135+
136+ </ tbody >
137+ </ table >
138+ </ div >
84139 < script src ='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js '> </ script >
85140 < script src ="{% static 'js/profile.js' %} "> </ script >
86141</ body >
0 commit comments