Skip to content

Commit e00f258

Browse files
lupyanalupyana
committed
WIP: Ride list
Added basic structure for ride list - Shows start and destination - Who is the rider - Rating of the rider see #9
1 parent 8d09f4d commit e00f258

File tree

2 files changed

+154
-5
lines changed

2 files changed

+154
-5
lines changed

‎assets/css/index.css

+48
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,9 @@ a {
3535
.width-50{
3636
width: 50%;
3737
}
38+
.width-80p {
39+
width: 80%;
40+
}
3841
.center {
3942
margin: 0 auto;
4043
}
@@ -88,8 +91,53 @@ a {
8891
.mb-20 {
8992
margin-bottom: 20px;
9093
}
94+
.mb-10 {
95+
margin-bottom: 10px;
96+
}
9197

9298
.spacer{
9399
width: inherit;
94100
margin: 10px 0 10px;
95101
}
102+
103+
.offer-list {
104+
width: 100%;
105+
}
106+
107+
.offer-list {
108+
margin-top: 50px;
109+
background: red;
110+
}
111+
112+
.offer {
113+
background: white;
114+
width: 30%;
115+
display:inline-block;
116+
float: left;
117+
margin: 10px;
118+
padding: 10px;
119+
}
120+
121+
.offer img{
122+
width: 100%;
123+
}
124+
125+
.ride-details div {
126+
display: inline;
127+
float: left;
128+
}
129+
130+
.ride-offerer div {
131+
display: inline;
132+
float: left;
133+
}
134+
135+
.padding-30 {
136+
padding: 30px;
137+
}
138+
139+
.avatar {
140+
background: #eef4f7;
141+
padding: 8px;
142+
border-radius: 100px
143+
}

‎pages/main.html

+106-5
Original file line numberDiff line numberDiff line change
@@ -18,19 +18,120 @@
1818
Notifications
1919
</div>
2020
</a>
21-
<a href="#">
21+
<a href="../index.html">
2222
<div class="">
2323
Log Out
2424
</div>
25-
</a>
25+
</a>
2626
</div>
2727

2828
</div>
2929
</header>
3030
<main>
31-
<div class="width-600 center ">
32-
33-
31+
<div class="width-80p center ">
32+
<div class="offer-list">
33+
<a href="ride.html">
34+
<div class="offer">
35+
<div class="padding-30">
36+
<div class="mb-20">
37+
<img src="https://via.placeholder.com/320x80" alt="">
38+
</div>
39+
<div class="ride-details ">
40+
<div class="width-50 ride-start mb-10">
41+
Kkoo to Mbezi
42+
</div>
43+
<div class="width-50 ride-time text-right mb-10">
44+
Time: 1800 hrs
45+
</div>
46+
</div>
47+
<div class="ride-offerer">
48+
<div class="width-50 ride-start mb-10">
49+
<span class="avatar">BN</span> Benito
50+
</div>
51+
<div class="width-50 ride-time text-right mb-10">
52+
Rating: some stars
53+
</div>
54+
</div>
55+
</div>
56+
</div>
57+
</a>
58+
<a href="ride.html">
59+
<div class="offer">
60+
<div class="padding-30">
61+
<div class="mb-20">
62+
<img src="https://via.placeholder.com/320x80" alt="">
63+
</div>
64+
<div class="ride-details ">
65+
<div class="width-50 ride-start mb-10">
66+
Kkoo to Mbezi
67+
</div>
68+
<div class="width-50 ride-time text-right mb-10">
69+
Time: 1800 hrs
70+
</div>
71+
</div>
72+
<div class="ride-offerer">
73+
<div class="width-50 ride-start mb-10">
74+
<span class="avatar">BN</span> Benito
75+
</div>
76+
<div class="width-50 ride-time text-right mb-10">
77+
Rating: some stars
78+
</div>
79+
</div>
80+
</div>
81+
</div>
82+
</a>
83+
<a href="ride.html">
84+
<div class="offer">
85+
<div class="padding-30">
86+
<div class="mb-20">
87+
<img src="https://via.placeholder.com/320x80" alt="">
88+
</div>
89+
<div class="ride-details ">
90+
<div class="width-50 ride-start mb-10">
91+
Kkoo to Mbezi
92+
</div>
93+
<div class="width-50 ride-time text-right mb-10">
94+
Time: 1800 hrs
95+
</div>
96+
</div>
97+
<div class="ride-offerer">
98+
<div class="width-50 ride-start mb-10">
99+
<span class="avatar">BN</span> Benito
100+
</div>
101+
<div class="width-50 ride-time text-right mb-10">
102+
Rating: some stars
103+
</div>
104+
</div>
105+
</div>
106+
</div>
107+
</a>
108+
<a href="ride.html">
109+
<div class="offer">
110+
<div class="padding-30">
111+
<div class="mb-20">
112+
<img src="https://via.placeholder.com/320x80" alt="">
113+
</div>
114+
<div class="ride-details ">
115+
<div class="width-50 ride-start mb-10">
116+
Kkoo to Mbezi
117+
</div>
118+
<div class="width-50 ride-time text-right mb-10">
119+
Time: 1800 hrs
120+
</div>
121+
</div>
122+
<div class="ride-offerer">
123+
<div class="width-50 ride-start mb-10">
124+
<span class="avatar">BN</span> Benito
125+
</div>
126+
<div class="width-50 ride-time text-right mb-10">
127+
Rating: some stars
128+
</div>
129+
</div>
130+
</div>
131+
</div>
132+
</a>
133+
134+
</div>
34135
</div>
35136
</main>
36137
</body>

0 commit comments

Comments
 (0)