Nama : Bimantara Tito Wahyudi
NRP : 5025201227
Kelas : Pemrograman Web B
Deskripsi
Pada kesempatan kali ini kami diberikan sebuah kuis untuk membuat form menggunakan html, css, dan js yang telah dipelajari di pertemuan-pertemuan sebelumnya
Hasil form:
index.html
<!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>Kuis 1</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="container">
<div class="card">
<h1>Formulir Pendaftaran</h1>
<h2>Pekan Olahraga dan Seni Guru TKA/TPA</h2>
<h2>Tahun 2020</h2>
<div class="container2">
<div class="card2">
<h3>NAMA PESERTA</h3>
<h3>TEMPAT TANGGAL LAHIR</h3>
<h3>UTUSAN UNIT TKA/TPA</h3>
<h3>KELURAHAN/DESA</h3>
<h3>KECAMATAN</h3>
<h3>NOMOR TELEPON</h3>
<h3>JENIS LOMBA</h3>
</div>
<div class="card3">
<form action="">
<input type="text"id="name" />
<input type="text"id="ttl" />
<input type="text"id="unit" />
<input type="text"id="urban" />
<input type="text"id="sub" />
<input type="text"id="phone" />
<select name="" id="" multiple>
<option value="1">1. Tarik Tambang (4 Perempuan + 1 Laki = 5 Orang)</option>
<option value="2">2. Lari Estafet (4 Perempuan)</option>
<option value="3">3. Gobak Sodor (4 Perempuan)</option>
<option value="4">4. Tartil (1 orang perwakilan TKA/TPA)</option>
<option value="5">5. Ceramah (1 orang perwakilan TKA/TPA</option>
</select>
<button type="button" id="submitBtn">Submit</button>
</form>
</div>
</div>
</div>
</div>
</body>
</html>
index.css
/* Fonts */
@font-face {
font-family: 'open_sansregular';
src: url('opensans-regular-webfont.woff2') format('woff2'),
url('opensans-regular-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
/* CSS Reset */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
font-style: normal;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/* Custom CSS */
* {
font-family: sans-serif;
}
body {
background-color: lightgray;
}
.header {
display:flex;
align-items: center;
background-color: #0096FF;
padding-left: 3em;
height: 60px;
}
.header h1 {
color:whitesmoke;
font-size: large;
}
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin: 6.3em 16em;
max-width: 100%;
}
.card {
display: flex;
flex-direction: column;
justify-content: center;
background-color: whitesmoke;
border-radius: 10px;
box-shadow: 0px 0px 20px -8px grey;
padding: 3em;
width: 100%;
height: 25em;
margin-bottom: 6em;
}
.card p {
margin-bottom: 20px;
}
.card h1 {
font-size: large;
margin-bottom: 10px;
}
select {
margin-bottom: 30px;
border: 1px solid lightgray;
border-radius: 20px;
width: 40%;
height: 40px;
padding: 0 2em;
appearance: none;
}
select:hover, button:hover {
cursor:pointer;
}
#searchBtn {
border: 1px solid lightgray;
border-radius: 10px;
height: 40px;
width: 80px;
font-size: 15px;
background-color: #FF008E;
color: whitesmoke;
}
#searchBtn:hover {
background-color: #D22779;
}
#res {
display: flex;
flex-direction: column;
}
.res-card {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: pink;
height: 50px;
width: 350px;
padding: 2em;
margin-bottom: 20px;
border-radius: 0 0 10px 10px;
/* box-shadow: 0px 0px 20px -5px grey; */
}
.urban {
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
background-color: #FF008E;
color: whitesmoke;
padding: 0 2em;
height: 30px;
width: 350px;
border-radius: 10px 10px 0 0;
/* box-shadow: 0px 0px 20px -5px grey; */
}
.code {
margin-bottom: 10px;
font-weight: bold;
}
Comments
Post a Comment