-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathtestcard2.html
95 lines (84 loc) · 4.25 KB
/
testcard2.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
<!doctype html>
<html lang="en">
<head>
<title>Title</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS v5.2.1 -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
<style>
.base-board {
border-radius: 50px;
background-color: #e7e7e7;
height: 200px;
}
.small-card {
border-radius: 1rem;
}
.side-text {
max-width: 50px;
background-color: #006fba;
}
</style>
</head>
<body>
<div class="contianer-fluid">
<div class="row mx-2 mt-3">
<div class="col-lg-5 col-12 base-board d-inline-flex flex-column" style="height:260px!important">
<div class="mt-3 d-flex shadow" style="background-color: white;height:65%;border-radius:40px 40px 0 0">
<div class="col-4 d-flex mt-4 ms-4">
<img src="bl-logo.png" alt="" style="height:100px;border-radius:20px" id="icon" class='shadow'>
<div style="height:30px;width:30px;border-radius:25%;background-color:#e7e7e7;color:#006fba;text-align:center;padding-top:5px;margin-top:80px;margin-left:-15px;font-weight:900"
class="shadow">藍</div>
</div>
<div class="col-8 d-flex">
<div class="flex-column d-flex text-start pt-4 ps-3">
<div class="h1">
忠孝復興
</div>
<div style="font-size:large;font-weight:800">
難易度：難
</div>
<div class="mt-2">
<button class="btn btn-secondary">移動</button>
<button class="btn btn-secondary">佔領</button>
</div>
</div>
</div>
</div>
<div class=" mt-2 mb-2 d-flex justify-content-center pt-1 shadow "
style="background-color: white;border-radius:0 0 40px 40px">
<img src="location.webp" alt="" style="height:35px" class="mt-3">
<p class="pt-4" style="font-size: larger; font-weight:800">忠孝敦化二號出口右轉</p>
</div>
</div>
</div>
<div class="row base-board px-3 py-2 mx-2 mt-3" style="border-radius:1.5rem">
<div class="col small-card side-text me-3 ps-3 shadow d-inline-flex align-items-center"
style="color:white;font-size:larger;font-weight:800">
任務卡
</div>
<div class="col small-card p-3 shadow" style="color:#929292;background-color:white;font-weight:700">
出站問路人昆陽在中國是哪一省 問五個都答不出來或答錯可查google 答案只能隊隨知道：雲南省
</div>
</div>
<div class="row px-3 py-2 mx-2 mt-3" style="border-radius:1.5rem;background-color:#e7e7e7">
<div class="col small-card side-text me-3 py-auto ps-3 shadow d-inline-flex align-items-center"
style="color:white;font-size:larger;font-weight:800;background-color:rgb(229, 153, 86)">
提示
</div>
<div class="col small-card p-3 shadow" style="color:#929292;background-color:white">
<img src="0.jpeg" alt="" style="max-width: 100%;">
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"
integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous">
</script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"
integrity="sha384-7VPbUDkoPSGFnVtYi0QogXtr74QeVeeIs99Qfg5YCF+TidwNdjvaKZX19NZ/e6oz" crossorigin="anonymous">
</script>
</body>
</html>