Scribd
Upload
5 views11 pages

PWD Uts

Uploaded by

nazifahzofrizofri
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
5 views11 pages

PWD Uts

Uploaded by

nazifahzofrizofri
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 11

1. <!

DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Formulir Pendaftaran</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f5f5f5;
text-align: center;
}

.container {
width: 50%;
margin: auto;
background-color: white;
padding: 20px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
border-radius: 8px;
}

.header {
background-color: #4CAF50;
color: white;
padding: 10px;
font-weight: bold;
border-radius: 5px 5px 0 0;
overflow: hidden;
position: relative;
height: 30px;
/* Adjust height as needed */
}

.marquee-text {
position: absolute;
width: 100%;
height: 100%;
display: inline-block;
white-space: nowrap;
animation: marquee 10s linear infinite;
}
@keyframes marquee {
0% {
transform: translateX(100%);
}

100% {
transform: translateX(-100%);
}
}

.title {
font-size: 24px;
margin: 20px 0;
display: flex;
justify-content: center;
align-items: center;
}

.title img {
width: 80px;
margin: 0 10px;
}

form {
text-align: left;
margin: 20px;
}

label {
display: block;
margin: 10px 0 5px;
}

input[type="text"],
input[type="email"],
input[type="date"],
select,
textarea {
width: 100%;
padding: 8px;
margin: 5px 0;
border: 1px solid #ccc;
border-radius: 4px;
}
input[type="radio"] {
margin-right: 10px;
}

.button-container {
text-align: center;
margin-top: 20px;
}

.button-container button {
background-color: #4CAF50;
color: white;
padding: 10px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
}

.button-container button:hover {
background-color: #45a049;
}
</style>
</head>

<body>

<div class="container">
<div class="header">
<div class="marquee-text">SELAMAT DATANG DI FORMULIR PENDAFTARAN</div>
</div>
<div class="title">
<img src="logo-unindra.png" alt="Logo">
Formulir Pendaftaran
<img src="logo-unindra.png" alt="Logo">
</div>

<form>
<label for="name">Nama Lengkap:</label>
<input type="text" id="name" name="name" required>

<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<label for="phone">Nomor Telepon:</label>
<input type="text" id="phone" name="phone" required>

<label for="birthdate">Tanggal Lahir:</label>


<input type="date" id="birthdate" name="birthdate" required>

<label>Jenis Kelamin:</label>
<div>
<label for="male">Laki-laki</label><br>
<input type="radio" id="male" name="gender" value="Laki-laki" required><br><br>

<label for="female">Perempuan</label><br>
<input type="radio" id="female" name="gender" value="Perempuan" required>
</div>

<label for="program">Program Studi:</label>


<select id="program" name="program" required>
<option value="Teknik Informatika">Teknik Informatika</option>
<option value="Sistem Informasi">Sistem Informasi</option>
<option value="Fisika">Fisika</option>
</select>

<label for="address">Alamat:</label>
<textarea id="address" name="address" rows="3" required></textarea>

<div class="button-container">
<button type="submit">Kirim</button>
</div>
</form>
</div>

</body>

</html>
2. <!DOCTYPE html>
<html lang="id">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Jadwal Mata Pelajaran Siswa</title>
<style>
table {
width: 60%;
border-collapse: collapse;
margin: auto;
font-family: Arial, sans-serif;
}

th,
td {
border: 1px solid black;
padding: 10px;
text-align: center;
}

th {
font-weight: bold;
}

.header {
background-color: #f2dede;
}

.name-column {
background-color: #f2dede;
}

.subject-column {
background-color: #dff0d8;
}

.day-column {
background-color: #d9edf7;
}

.time-column {
background-color: #fcf8e3;
}

.title {
text-align: center;
font-size: 24px;
font-weight: bold;
margin-top: 20px;
}
</style>
</head>

<body>

<div class="title">Jadwal Mata Pelajaran Siswa</div>

<table>
<tr>
<th class="header" rowspan="2">Nama Siswa</th>
<th class="header" rowspan="2">Mata Pelajaran</th>
<th class="header" rowspan="2">Hari</th>
<th class="header" colspan="2">Jadwal</th>
</tr>
<tr>
<th class="time-column">Jam</th>
</tr>
<tr>
<td class="name-column" rowspan="2">Ahmad</td>
<td class="subject-column">Matematika</td>
<td class="day-column">Senin</td>
<td class="time-column">08:00 - 09:30</td>
</tr>
<tr>
<td class="subject-column">Bahasa Inggris</td>
<td class="day-column">Selasa</td>
<td class="time-column">10:00 - 11:30</td>
</tr>
<tr>
<td class="name-column">Budi</td>
<td class="subject-column">Fisika</td>
<td class="day-column">Rabu</td>
<td class="time-column">09:00 - 10:30</td>
</tr>
</table>
</body>

</html>

3. <!DOCTYPE html>
<html lang="id">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>RESTO SATU</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f9f9e6;
}

.container {
max-width: 800px;
margin: 0 auto;
border: 2px solid #d3b897;
padding: 20px;
text-align: center;
background-color: #fcf8e8;
}

.header {
font-size: 24px;
font-weight: bold;
color: #5a3921;
margin-bottom: 10px;
}

/* Tambahkan garis di bawah judul */


.header::after {
content: "";
display: block;
width: 100%;
height: 4px;
background-color: #d3b897;
margin: 10px 0;
}

.content {
display: flex;
justify-content: space-between;
}

/* Tambahkan garis vertikal pada kolom makanan dan minuman */


.menu-section {
width: 50%;
text-align: left;
}

.menu-section.left {
border-right: 2px solid #d3b897;
padding-right: 20px;
}

.menu-section.right {
border-left: 2px solid #d3b897;
padding-left: 20px;
}

.menu-section h2 {
font-size: 20px;
font-weight: bold;
color: #5a3921;
text-align: center;
margin-bottom: 10px;
}

.menu-section ul {
list-style-type: none;
padding: 0;
margin: 0;
font-size: 18px;
}

.menu-section ul li {
margin-bottom: 5px;
}

.menu-section ul li a {
text-decoration: none;
color: #5a3921;
}

.menu-section ul li a:hover {
color: #8c5e32;
}

.menu-item {
text-align: center;
margin-top: 20px;
padding: 0 20px;
}

/* Ubah ukuran gambar */


.menu-item img {
width: 150px;
/* Ubah ukuran gambar sesuai kebutuhan */
height: auto;
border-radius: 8px;
}

.audio-player {
margin-top: 10px;
}

.footer {
margin-top: 20px;
font-size: 14px;
color: #5a3921;
}
</style>
</head>
<body>

<div class="container">
<div class="header">MENU RESTO SATU</div>

<div class="content">
<div class="menu-section left">
<h2>MAKANAN</h2>
<ul>
<li>1. <a href="#">BAKSO</a></li>
<li>2. <a href="#">SATE</a></li>
<li>3. <a href="#">AYAM BAKAR</a></li>
</ul>
</div>

<div class="menu-item">
<h2>MENU SATE</h2>
<img src="logo-bakso.png" alt="Gambar Bakso">
<div class="audio-player">
<audio controls>
<source src="audio/bakso.mp3" type="audio/mp3">
Your browser does not support the audio element.
</audio>
</div>
</div>

<div class="menu-section right">


<h2>MINUMAN</h2>
<ul>
<li>A. <a href="#">TEH MANIS</a></li>
<li>B. <a href="#">JUS BUAH</a></li>
<li>C. <a href="#">ES CAMPUR</a></li>
<li>D. <a href="#">AIR MINERAL</a></li>
</ul>
</div>
</div>

<div class="footer">
Created by @Nazifah Zopri 202243501149
</div>
</div>

</body>
</html>

You might also like