Skip to content

Commit 324eb0c

Browse files
22tushar22tushar
committed
feat:schedule UI enhance (timeline pattern)
1 parent 6d1f9e6 commit 324eb0c

2 files changed

Lines changed: 323 additions & 55 deletions

File tree

‎Projects/Gym-Website/css/schedule.css‎

Lines changed: 266 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,266 @@
1+
*{
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
font-family: 'Montserret', serif;
6+
}
7+
8+
.schedule-section{
9+
margin-top: 50px;
10+
}
11+
12+
.scheduleHeading h1{
13+
text-align: center;
14+
font-size: 20px;
15+
color: #08080a;
16+
font-weight:600;
17+
letter-spacing: 9px;
18+
}
19+
20+
.schedule{
21+
position: relative;
22+
margin-top: 30px;
23+
margin: 50px auto;
24+
padding: 40px 0;
25+
width: 1000px;
26+
box-sizing: border-box;
27+
}
28+
29+
.schedule:before{
30+
content: '';
31+
position: absolute;
32+
left: 50%;
33+
width: 2px;
34+
height: 94%;
35+
/* background: #6AB6BB; */
36+
background: linear-gradient(#3f1f26,#803b09);
37+
}
38+
.schedule ul{
39+
margin: 0;
40+
padding: 0;
41+
}
42+
43+
.schedule ul li{
44+
list-style: none;
45+
position: relative;
46+
width: 50%;
47+
padding: 20px 40px;
48+
box-sizing: border-box;
49+
margin: 30px 0;
50+
}
51+
52+
.schedule ul li:nth-child(odd){
53+
float: left;
54+
text-align: right;
55+
clear: both;
56+
}
57+
58+
.schedule ul li:nth-child(even){
59+
float: right;
60+
text-align: left;
61+
clear: both;
62+
}
63+
64+
.schedule-content{
65+
padding-bottom: 20px;
66+
}
67+
68+
.schedule-content p{
69+
width: 90%;
70+
float: right;
71+
text-align: justify;
72+
color: rgb(58, 57, 57);
73+
}
74+
75+
.sch-2 p, .sch-4 p{
76+
float: left;
77+
}
78+
79+
.schedule ul li:nth-child(odd):before{
80+
content: '';
81+
position: absolute;
82+
top:24px;
83+
right: -6px;
84+
width: 10px;
85+
height: 10px;
86+
background: rgb(165, 16, 23);
87+
border-radius: 50%;
88+
box-shadow: 0 0 0 3px rgba(233, 33, 76, 0.2);
89+
}
90+
91+
.schedule ul li:nth-child(even):before{
92+
content: '';
93+
position: absolute;
94+
top:24px;
95+
left: -4px;
96+
width: 10px;
97+
height: 10px;
98+
background: #a51024;
99+
border-radius: 50%;
100+
box-shadow: 0 0 0 3px rgba(233, 33, 60, 0.2);
101+
}
102+
103+
.schedule ul li h3{
104+
margin: 0;
105+
padding: 0;
106+
font-weight: 600;
107+
color: #a51010;
108+
109+
}
110+
111+
.schedule ul li p{
112+
margin: 10px 0 0;
113+
padding: 0;
114+
}
115+
116+
.schedule ul li .schedule-register h4{
117+
margin: 0;
118+
padding: 0;
119+
font-size: 14px;
120+
}
121+
.schedule ul li:nth-child(1) .schedule-register{
122+
position: absolute;
123+
top: 12px;
124+
right: -210px;
125+
margin: 0;
126+
padding: 8px 16px;
127+
/* background: #109CA5; */
128+
background: linear-gradient(#3f1f26,#800909);
129+
color: #fff;
130+
border-radius: 18px;
131+
box-shadow: 0 0 0 3px rgba(233, 33, 70, 0.3);
132+
}
133+
.schedule ul li:nth-child(3) .schedule-register{
134+
position: absolute;
135+
top: 12px;
136+
right: -245px;
137+
margin: 0;
138+
padding: 8px 16px;
139+
/* background: #109CA5; */
140+
background: linear-gradient(#3f1f26,#800917);
141+
color: #fff;
142+
border-radius: 18px;
143+
box-shadow: 0 0 0 3px rgba(233, 33, 43, 0.3);
144+
}
145+
.schedule ul li:nth-child(5) .schedule-register{
146+
position: absolute;
147+
top: 12px;
148+
right: -180px;
149+
margin: 0;
150+
padding: 8px 16px;
151+
/* background: #109CA5; */
152+
background: linear-gradient(#3f1f26,#80091b);
153+
color: #fff;
154+
border-radius: 18px;
155+
box-shadow: 0 0 0 3px rgba(233, 33, 53, 0.3);
156+
}
157+
.schedule ul li:nth-child(2) .schedule-register{
158+
position: absolute;
159+
top: 12px;
160+
left: -230px;
161+
margin: 0;
162+
padding: 8px 16px;
163+
/* background: #109CA5; */
164+
background: linear-gradient(#3f1f26,#800911);
165+
color: #fff;
166+
border-radius: 18px;
167+
box-shadow: 0 0 0 3px rgba(233, 33, 36, 0.3);
168+
}
169+
.schedule ul li:nth-child(4) .schedule-register{
170+
position: absolute;
171+
top: 12px;
172+
left: -205px;
173+
margin: 0;
174+
padding: 8px 16px;
175+
/* background: #109CA5; */
176+
background: linear-gradient(#3f1f26,#d60849);
177+
color: #fff;
178+
border-radius: 18px;
179+
box-shadow: 0 0 0 3px rgba(33, 233, 200, 0.3);
180+
}
181+
/* .schedule ul li:nth-child(odd) .schedule-register{
182+
position: absolute;
183+
top: 12px;
184+
right: -230px;
185+
margin: 0;
186+
padding: 8px 16px;
187+
background: #109CA5;
188+
color: #fff;
189+
border-radius: 18px;
190+
box-shadow: 0 0 0 3px rgba(33,233,200,0.3);
191+
} */
192+
193+
/* .schedule ul li:nth-child(even) .schedule-register{
194+
position: absolute;
195+
top: 12px;
196+
left: -230px;
197+
margin: 0;
198+
padding: 8px 16px;
199+
background: #109CA5;
200+
color: #fff;
201+
border-radius: 18px;
202+
box-shadow: 0 0 0 3px rgba(33, 233, 200, 0.3);
203+
} */
204+
205+
.schedule-content p span{
206+
font-weight: 600;
207+
font-size: 17px;
208+
}
209+
210+
@media (max-width: 1000px){
211+
.schedule{
212+
width:100%;
213+
}
214+
.schedule p{
215+
width: 80%;
216+
}
217+
.schedule-content p span{
218+
font-weight: 600;
219+
font-size: 11px;
220+
}
221+
}
222+
@media (max-width: 767px) {
223+
.scheduleHeading h1{
224+
text-align: center;
225+
font-size: 40px;
226+
color: rgb(94, 12, 22);
227+
font-weight: bold;
228+
letter-spacing: 8px;
229+
}
230+
.schedule p{
231+
float: left;
232+
width: 100%;
233+
font-size: 15px;
234+
text-align: justify;
235+
}
236+
.schedule{
237+
width:100%;
238+
margin: 0;
239+
}
240+
.schedule:before{
241+
left: 20px;
242+
}
243+
.schedule ul li{
244+
margin:27px 0;
245+
}
246+
.schedule ul li:nth-child(odd),
247+
.schedule ul li:nth-child(even){
248+
width:100%;
249+
text-align: left;
250+
padding-left: 50px;
251+
padding-bottom: 50px;
252+
}
253+
.schedule ul li:nth-child(odd):before,
254+
.schedule ul li:nth-child(even):before{
255+
top: -18px;
256+
left:16px;
257+
}
258+
.schedule ul li:nth-child(odd) .schedule-register,
259+
.schedule ul li:nth-child(even) .schedule-register{
260+
top: -30px;
261+
left: 50px;
262+
right: inherit;
263+
264+
}
265+
266+
}

‎Projects/Gym-Website/index.html‎

Lines changed: 57 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
<meta name="viewport" content="width=device-width, initial-scale=1">
66
<link rel="stylesheet" href="css/animate.css">
77
<link rel="stylesheet" type="text/css" href="css/style.css">
8+
<link rel="stylesheet" type="text/css" href="css/schedule.css">
89
<style>
910
.wow:first-child {
1011
visibility: hidden;
@@ -214,61 +215,62 @@ <h2>Start Your Training Today</h2>
214215
<!-- End Start Today -->
215216

216217
<!-- Start Schedule -->
217-
<section class="schedule" id="schedule">
218-
<div class="container">
219-
<div class="content">
220-
<div class="box text wow slideInLeft">
221-
<h2>Classes Schedule</h2>
222-
<p>
223-
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries,
224-
</p>
225-
<img src="images/schedule1.png" alt="schedule" />
226-
</div>
227-
<div class="box timing wow slideInRight">
228-
<table class="table">
229-
<tbody>
230-
<tr>
231-
<td class="day">Monday</td>
232-
<td><strong>9:00 AM</strong></td>
233-
<td>Body Building <br/> 9:00 to 10:00 AM</td>
234-
<td>Room No:210</td>
235-
</tr>
236-
<tr>
237-
<td class="day">Tuesday</td>
238-
<td><strong>9:00 AM</strong></td>
239-
<td>Body Building <br/> 9:00 to 10:00 AM</td>
240-
<td>Room No:210</td>
241-
</tr>
242-
<tr>
243-
<td class="day">Wednesday</td>
244-
<td><strong>9:00 AM</strong></td>
245-
<td>Body Building <br/> 9:00 to 10:00 AM</td>
246-
<td>Room No:210</td>
247-
</tr>
248-
<tr>
249-
<td class="day">Thursday</td>
250-
<td><strong>9:00 AM</strong></td>
251-
<td>Body Building <br/> 9:00 to 10:00 AM</td>
252-
<td>Room No:210</td>
253-
</tr>
254-
<tr>
255-
<td class="day">Friday</td>
256-
<td><strong>9:00 AM</strong></td>
257-
<td>Body Building <br/> 9:00 to 10:00 AM</td>
258-
<td>Room No:210</td>
259-
</tr>
260-
<tr>
261-
<td class="day">Saturday</td>
262-
<td><strong>9:00 AM</strong></td>
263-
<td>Body Building <br/> 9:00 to 10:00 AM</td>
264-
<td>Room No:210</td>
265-
</tr>
266-
</tbody>
267-
</table>
268-
</div>
269-
</div>
270-
</div>
271-
</section>
218+
<section class="schedule-section" id="schedule-section">
219+
<div class="scheduleHeading">
220+
<h1>Workout Gallery</h1>
221+
</div>
222+
<div class="schedule">
223+
<ul>
224+
<li class="sch-1">
225+
<div class="schedule-content">
226+
<h3><b>Monday, 9:00 AM - 10:00 AM </b></h3>
227+
<br>Room No. 210</i><br> <br>
228+
</div>
229+
<div class="schedule-register">
230+
<h4>Body Building</h4>
231+
</div>
232+
</li>
233+
<li class="sch-2">
234+
<div class="schedule-content">
235+
<h3><b>Monday, 9:00 AM - 10:00 AM </b></h3>
236+
<br>Room No. 210</i><br> <br>
237+
</div>
238+
<div class="schedule-register">
239+
<h4>Body Building</h4>
240+
</div>
241+
</li>
242+
<li class="sch-3">
243+
<div class="schedule-content">
244+
<h3><b>Monday, 9:00 AM - 10:00 AM </b></h3>
245+
<br>Room No. 210</i><br> <br>
246+
</div>
247+
<div class="schedule-register">
248+
<h4>Body Building</h4>
249+
</div>
250+
</li>
251+
<li class="sch-4">
252+
<div class="schedule-content">
253+
<h3><b>Monday, 9:00 AM - 10:00 AM </b></h3>
254+
<br>Room No. 210</i><br> <br>
255+
</div>
256+
<div class="schedule-register">
257+
<h4>Body Building</h4>
258+
</div>
259+
</li>
260+
<li class="sch-5">
261+
<div class="schedule-content">
262+
<h3><b>Monday, 9:00 AM - 10:00 AM </b></h3>
263+
<br>Room No. 210</i><br> <br>
264+
</div>
265+
<div class="schedule-register">
266+
<h4>Body Building</h4>
267+
</div>
268+
</li>
269+
<div style="clear: both;"></div>
270+
</ul>
271+
</div>
272+
</section>
273+
272274
<!-- End Schedule -->
273275

274276
<!-- Start Gallery -->

0 commit comments

Comments
 (0)