-
Notifications
You must be signed in to change notification settings - Fork 0
/
showcardgrid.html
82 lines (81 loc) · 3.79 KB
/
showcardgrid.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="showcardgrid.css">
</head>
<body>
<div class="main">
<h3>Tambah Kenalan</h3>
<form onsubmit="isiTabel(); return false;" required style="justify-content: center; text-align: center;">
<label style="text-align: left;">Nama</label><br>
<input type="text" id = "input-nama" required class="bor" ><br><br>
<label>Alamat</label><br>
<input type="text" id = "input-alamat" required class="bor" ><br><br>
<label>Instagram</label>
<div class="input-group">
<span class="input-group-text" id="addon-wrapping">@</span>
<input id= "input-username" type="text" class="form-control" aria-label="Username" aria-describedby="addon-wrapping">
</div>
<br>
<label>Jenis Kelamin
<select id="gender" name='Jenis Kelamin' class="bor" style="font-family: sans-serif;" required>
<option>Pria</option>
<option>Wanita</option>
</select>
</label><br><br>
<label>URL Foto Profil</label><br>
<input type="url" id = "input-image-url" required class="bor"><br><br>
<input type="checkbox" required class="bor" id="cb">
<label>Setuju kenalan</label><br><br>
<button type="submit" class="btn">Save</button>
<button type="reset" class="btn">Reset</button>
</form>
</div>
<div class="main">
<h3>Tabel Kenalan</h3>
<div class="container" id="tabelKartu">
<div class="row" style="padding-bottom: 10px;">
<div class="col-sm"> Foto Profil </div>
<div class="col-sm"> Nama </div>
<div class="col-sm"> Alamat </div>
<div class="col-sm"> Instagram </div>
<div class="col-sm"> Delete Item</div>
<div class="col-sm"> Show Card</div>
</div>
</div>
</div>
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close">×</span>
<div class="modalbody">
<div style="margin: auto; margin-left: 15%;">
<img id="image" src="https://media-exp1.licdn.com/dms/image/C5603AQHdgGWX7D739g/profile-displayphoto-shrink_200_200/0/1637252607080?e=1657756800&v=beta&t=yehTJXxNcBtwsQvI5TRf2CQO7_FOwmXNEz__m2y1yVE"
alt="Foto Profil"
width="100" height="100" style="border-radius: 50%; border: #007BFF solid 4px;">
</div>
<div class="container" id="tabelKartu" style="margin: auto; padding-left: 10%;">
<div class="row" style="padding-bottom: 5px;">
<div class="col-sm" style="padding-right: 5px;"> Nama </div>
<div class="col-sm" id="nama"> Nama </div>
</div>
<div class="row" style="padding-bottom: 5px;">
<div class="col-sm" style="padding-right: 5px;"> Alamat</div>
<div class="col-sm" id="alamat"></div>
</div>
<div class="row" style="padding-bottom: 5px;">
<div class="col-sm" style="padding-right: 5px;"> Instagram </div>
<div class="col-sm">
<a id="instagram" href="https://www.instagram.com/in/zulhamdani23/" style="text-decoration: none;">
<p id="username" style="margin-top: 0;margin-bottom: 0;">username</p>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
<script src="showcardgrid.js"></script>
</html>