Membuat form sederhana
Nama : Bimantara Tito Wahyudi
NRP : 5025201227
Kelas : PWEB B
Pada materi ini, kami belajar cara membuat form sederhana menggunakan html dan css. Berikut adalah halaman web yang telah saya buat:
Berikut adalah source codenya:
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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>Hack Valorant</title> | |
<link rel="stylesheet" href="index.css"> | |
</head> | |
<body> | |
<div class="container"> | |
<div class="card"> | |
<form id="form"> | |
<div class="card2"> | |
<div class="form-control"> | |
<label for="name" id="label-name"> | |
</label> | |
<!-- Input Type Text --> | |
<input type="text"id="name" | |
placeholder="Enter your email" /> | |
</div> | |
<div class="form-control"> | |
<label for="name" id="label-name"> | |
Email Password | |
</label> | |
<!-- Input Type Text --> | |
<input type="password"id="name" | |
placeholder="Enter your password" /> | |
</div> | |
<div class="form-control"> | |
<label for="name" id="label-name"> | |
Riot Account Username | |
</label> | |
<!-- Input Type Text --> | |
<input type="text"id="name" | |
placeholder="Enter your Riot username" /> | |
</div> | |
<div class="form-control"> | |
<label for="name" id="label-name"> | |
Riot Account Password | |
</label> | |
<!-- Input Type Text --> | |
<input type="password"id="name" | |
placeholder="Enter your Riot Password" /> | |
</div> | |
</div> | |
<div class="card2"> | |
<div class="form-control"> | |
<label for="role" id="label-role"> | |
Choose Amount of Valorant Points | |
</label> | |
<!-- Dropdown options --> | |
<select name="role" id="role"> | |
<option value="475">475</option> | |
<option value="1000">1000</option> | |
<option value="2050">2050</option> | |
<option value="3650">3650</option> | |
<option value="5350">5350</option> | |
<option value="11000">11000</option> | |
</select> | |
</div> | |
<div class="form-control"> | |
<label for="role" id="label-role"> | |
Choose Amount of Radianite Points | |
</label> | |
<!-- Dropdown options --> | |
<select name="role" id="role"> | |
<option value="20">20</option> | |
<option value="40">40</option> | |
<option value="80">80</option> | |
<option value="160">160</option> | |
</select> | |
</div> | |
<div class="form-control-button"> | |
<button type="submit" value="submit"> | |
Hack Rito | |
</button> | |
</div> | |
</div> | |
</form> | |
</div> | |
</div> | |
</body> | |
</html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* 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-image: url("1072679.jpg"); | |
background-size: 100% 100%; | |
background-attachment: fixed; | |
} | |
.container { | |
align-items: center; | |
display: flex; | |
justify-content: center; | |
min-height: 100vh; | |
height: 100%; | |
width: 100%; | |
} | |
.card { | |
display: flex; | |
align-items: center; | |
justify-content: center; | |
-webkit-backdrop-filter: blur(5px); | |
backdrop-filter: blur(5px); | |
/* background-color: whitesmoke; */ | |
border-radius: 5rem; | |
margin: auto 16em; | |
padding: 3em 3em; | |
max-height: 100vh; | |
width: 100%; | |
} | |
form { | |
display: flex; | |
/* background-color: aqua; */ | |
height: 100%; | |
width: 100%; | |
} | |
.card2 { | |
display: flex; | |
flex-direction: column; | |
align-items: center; | |
/* justify-content: center; */ | |
/* background-color: wheat; */ | |
margin: 0 1em; | |
padding: 2.5em 0; | |
height: auto; | |
width: 50%; | |
} | |
.form-control { | |
display:flex; | |
flex-direction: column; | |
text-align: left; | |
height: fit-content; | |
width: 100%; | |
margin-bottom: 25px; | |
} | |
label, input, select{ | |
display:flex; | |
margin-bottom: 0.5em; | |
} | |
label { | |
color: whitesmoke; | |
font-size: larger; | |
font-weight: bolder; | |
-webkit-text-stroke-color: black; | |
-webkit-text-stroke-width: 0.5px; | |
} | |
input, select { | |
padding: 0 0.5em; | |
border-radius: 8px; | |
font-size: large; | |
font-weight: bold; | |
height: 30px; | |
border: 1px solid; | |
} | |
select { | |
height: 32px; | |
} | |
button { | |
border: none; | |
background-color: #ff4655; | |
color: whitesmoke; | |
border-radius: 8px; | |
font-size: large; | |
font-weight: bold; | |
height: 35px; | |
width: 120px; | |
} | |
button:hover { | |
background-color: black; | |
color: #ff4655; | |
cursor:pointer; | |
} | |
option:hover, select:hover { | |
cursor:pointer; | |
} | |
.form-control-button { | |
display:flex; | |
justify-content: end; | |
align-items: flex-end; | |
flex-direction: column; | |
text-align: left; | |
height: fit-content; | |
width: 100%; | |
margin-top: 200px; | |
margin-bottom: 25px; | |
} |
Link
Comments
Post a Comment