Вы находитесь на странице: 1из 4

<!

DOCTYPE html>
<html>
<head>
<title>Soal UTS</title>
<style type="text/css">
body {
background-color: rgba(34,34,90,0.2);
}
.container {
width: 90%;
margin: 0 auto;
min-height: 500px;
background-color: white;
padding: 5px;
font-family: sans-serif;
}
.header {
padding: 10px;
font-family: arial;
}
.nav {
margin: 5px 10px;
}
.nav>nav>a {
text-decoration: none;
padding: 5px 10px;
color: orange;
font-family: arial;
}
.nav>nav>a:hover {
text-decoration: none;
padding: 5px 10px;
color: white;
background-color: orange;
font-family: arial;
}
.content {
min-height: 300px;
/*background-color: silver;*/
margin-top: 10px;
overflow: hidden;
}
.main-content {
width: 74%;
/*background-color: blue;*/
min-height: 400px;
padding: 10px;
float: left;
}
.sidebar {
width: 20%;
/*background-color: pink;*/
min-height: 400px;
margin-right: 30px;
float: right;
/*border-left: 1px solid #808080;*/
}
.footer {
min-height: 400px;
background-color: orange;
color: white;
padding: 10px;
}
.widgets-footer {
display: -webkit-flex; /* Safari */
-webkit-justify-content: center; /* Safari 6.1+ */
display: flex;
justify-content: center;
}
.widget-foot {
width: 23%;
min-height: 350px;
float: left;
margin: 5px 10px;
border: 1px solid #FFFFFF;
}
table {
border-collapse: collapse;
border: 1px solid black;
}

th,td {
border: 1px solid black;
padding: 5px;
}
.box-persemester {
width: 100%;
min-height: 350px;
float: left;
margin: 5px 10px;
text-align: center;
color: white;
padding: 10px;
}
.box-persemester>p>a {
text-decoration: none;
color: #FFFFFF;
}
.title-semester {
width: 80px;
height: 80px;
border: 1px solid #FFFFFF;
border-radius: 100%;
vertical-align: middle;
margin-bottom: 30px;
}

</style>
</head>
<body>
<div class="container">
<div class="header">
<h2>UMT Informatika</h2>
<marquee>:: Selamat Mengerjakan Ujian Tengah Semester
::</marquee>
<hr>
</div>
<div class="nav">
<nav>
<a href="beranda.html">Beranda</a>
<a href="profile.html">Profile</a>
<a href="visi.html">Visi dan Misi</a>
<a href="berita.html">Berita</a>
<a href="informasi.html">Informasi</a>
<a href="kurikulum.html">Kurikulum</a>
<a href="galeri.html">Galeri</a>
<a href="dosen.html">Dosen</a>
</nav>
</div>
<div class="content">
<div class="main-content">
<h3>Deskripsi Mata Kuliah</h3>
<hr>
<table>
<tr>
<td>Kode Mata Kuliah</td>
<td>KKNIIF02</td>
</tr>
<tr>
<td>Nama Mata Kuliah</td>
<td>Pemrogramman Web Dasar</td>
</tr>
<tr>
<td>Jumlah SKS</td>
<td>3</td>
</tr>
<tr>
<td>Semester</td>
<td>5</td>
</tr>
<tr>
<td>Deskripsi</td>
<td>Lorem ipsum dolor sit amet, consectetur
adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam</td>
</tr>
<tr>
<td>Capaian Pembelajaran</td>
<td></td>
</tr>

</table>
</div>
<div class="sidebar">
<div class="box-persemester" style="background-color:
purple">
<center><div class="title-
semester"><h1>1</h1></div></center>
<p><a href="detail_matakuliah.html">Matakuliah
1</a></p>
<p><a href="detail_matakuliah.html">Matakuliah
2</a></p>
<p><a href="detail_matakuliah.html">Matakuliah
3</a></p>
<p><a href="detail_matakuliah.html">Matakuliah
4</a></p>
<p><a href="detail_matakuliah.html">Matakuliah
5</a></p>
<p><a href="detail_matakuliah.html">Matakuliah
6</a></p>
<p><a href="detail_matakuliah.html">Matakuliah
7</a></p>
<p><a href="detail_matakuliah.html">Matakuliah
8</a></p>
</div>
</div>
</div>
<div class="footer">
<div class="widgets-footer">
<div class="widget-foot">Box Logo</div>
<div class="widget-foot">Box Category</div>
<div class="widget-foot">Box Contact Us</div>
<div class="widget-foot">Box Subscribers</div>
</div>
</div>
</div>
</body>
</html>

Вам также может понравиться