-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathmabardetail.html
121 lines (110 loc) · 5.62 KB
/
mabardetail.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Match Up</title>
<link rel="stylesheet" href="css/mabardetail.css">
</head>
<body>
<section class="navbar" >
<a href="mabar.html">
<img src="css/img/back button.png" alt="">
</a>
<p>TITLE</p>
<a href="#">
<img src="css/img/report.png" alt="">
</a>
</section>
<section class="container" >
<div class="left-content">
<div class="left1">
<div class="left1-logo">
</div>
<div class="left1-box">
<p>TITLE</p>
<div style="display: flex; align-items: center; width: 50%;">
<img class="left1-icon" src="css/img/bola icon.png" alt="">
<!-- <div class="left1-icon">
</div> -->
<p style="font-size: 0.8vw; margin-left: 5%;" >Olahraga</p>
</div>
<div>
<div class="access">
Terbuka
</div>
<div class="age">
15-17
</div>
</div>
</div>
</div>
<hr>
<div class="left2">
<div>Deskripsi Mabar</div>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum luctus ultrices erat. Fusce dapibus eros elit, quis consectetur tortor interdum eget. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nam scelerisque pretium nisl id efficitur. Vivamus vestibulum hendrerit neque, vitae venenatis lorem ornare ac. Maecenas gravida in est eu laoreet. Vestibulum interdum sapien metus, in vehicula ligula fringilla in. Praesent Ornar Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum luctus ultrices erat. Fusce dapibus eros elit, quis consectetur tortor interdum eget. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nam scelerisque pretium nisl id efficitur. Vivamus vestibulum hendrerit neque, vitae venenatis lorem ornare ac. Maecenas gravida in est eu laoreet. Vestibulum interdum sapien metus, in vehicula ligula fringilla in. Praesent Ornar</span>
</div>
<hr>
<div class="left3">
<div>Lokasi Mabar</div>
<span>Detail Lokasi</span>
<div class="maps">
</div>
</div>
</div>
<div class="right-content">
<div>
<span class="biaya" >Biaya Masuk</span>
<span class="harga" style="display: block;" >Rp 5000 <text style="color: grey; font-size: 1.3vw;" >/Tim</text> </span>
<button>
Ambil Sparring
</button>
<div class="line1">
<div style="background: url(css/img/calender.png); background-position: center; background-size: contain;" class="icon">
</div>
Tanggal Dan Waktu
</div>
<div class="line1">
<div style="background: url(css/img/target.png); background-position: center; background-size: contain;" class="icon">
</div>
Lokasi
</div>
<div class="line1">
<div style="background: url(css/img/clock.png); background-position: center; background-size: contain;" class="icon">
</div>
Lama Bermain
</div>
<br>
<span class="biaya" >Informasi Tambahan</span><br><br>
<span style="font-size: 1vw;" >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum luctus ultrices erat. Fusce dapibus eros elit, quis consectetur tortor interdum eget. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nam scelerisque pretium nisl id efficitur. Vivamus vestibulum hendrerit neque, vitae venenatis lorem ornare ac. Maecenas gravida in est eu laoreet. Vestibulum interdum sapien metus, in vehicula ligula fringilla in. Praesent Ornar</span>
</div>
<div class="member">
<div class="member-top">
<span style="font-size: 1.2vw; color: grey; " >Member</span>
<span style="font-size: 1.2vw; color: grey; ">0</span>
</div>
<div class="member-bottom">
<div class="member1">
<div class="host-logo">
</div>
<span style="margin-left: 5%;" >
<p style="font-family: opensans-bold; font-size: 1vw; " >Tyo</p>
<p style="font-size: 0.8vw;">Host</p>
</span>
</div>
<div class="member1">
<div class="member-logo">
</div>
<span style="margin-left: 5%;" >
<p style="font-family: opensans-bold; font-size: 1vw; " >USERNAME</p>
<p style="font-size: 0.8vw;">member</p>
</span>
</div>
</div>
</div>
</div>
</section>
<section class="white-space" ></section>
</body>
</html>