TUGAS 8 WEB DESAIN

 

WEBSITE

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>Beranda</title>
    <link rel="stylesheet" type="text/css" href="style.css" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  </head>
  <body>
    <div class="container">
      <header>
        <div class="logo">Politeknik Bhakti Semesta (Demo)</div>
      </header>
      <nav>
        <ul>
          <li><a href="index.html">Beranda</a></li>
          <li><a href="PY.html">Profil Yayasan</a></li>
          <li><a href="PP.html">Profil Politeknik</a></li>
          <li><a href="F.html">Fasilitas</a></li>
          <li><a href="HK.html">Hubungi Kami</a></li>
        </ul>
      </nav>
      <article>
        <div class="konten">
          <a href="BD.html"><img src="gambar/bisnis digital.jpg" /></a>
          <div class="judul">
            <a href="BD.html">Bisnis Digital</a>
          </div>
          <p>
            Program studi Sarjana Terapan (D-IV) Bisnis Digital Politeknik
            Bhakti Semesta berfokus pada pembelajaran project base learning dan
            mengacu pada pembelajaran bisnis dengan menggunakan teknologi
            digital.
          </p>
        </div>
        <div class="konten">
          <a href="RKS.html"><img src="gambar/RKS.jpg" /></a>
          <div class="judul">
            <a href="RKS.html">Rekayasa Keamanan Siber</a>
          </div>

          <p>
            Program Studi Sarjana Terapan Rekayasa Keamanan Siber Politeknik
            Bhakti Semesta merupakan program studi yang mengkhususkan diri pada
            pengembangan keamanan siber untuk melindungi informasi atau sumber
            daya teknologi informasi demi mencegah terjadinya serangan siber.
          </p>
        </div>
        <div class="konten">
          <a href="TRM.html"><img src="gambar/TRM.jpg" /></a>
          <div class="judul">
            <a href="TRM.html">Teknologi Rekayasa Multimedia</a>
          </div>
          <p>
            Program studi Sarjana Terapan (D-IV) Teknologi Rekayasa Multimedia
            Politeknik Bhakti Semesta memiliki kekuatan pada pembelajaran
            multimedia dengan menggunakan teknologi digital dalam setiap mata
            kuliah yang diajarkan.
          </p>
        </div>
      </article>

      <footer>Copyright 2020 web saya</footer>
    </div>
  </body>
</html>


CSS

body {
  font-family: Arial, Helvetica, sans-serif;
  background: #e6e6e6;
  padding: 0;
  margin: 0;
}

.container {
  width: 100%;
  height: auto;
  background: white;
  margin: auto;
  margin-top: 5px;
  padding-bottom: 5px;
}

.logo {
  font-size: xx-large;
  padding: 30px 10px 30px 10px;
  text-align: center;
  color: #ffffff;
  background-color: #1e4683;
  margin-bottom: 1px;
}

.logo {
  background-image: url("gambar/logo.png");
  background-size: 80px;
  background-position: 620px;
  background-repeat: no-repeat;
}

nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #1a75ff;
  border: 1px solid gainsboro;
}

nav li {
  float: left;
}

nav li a {
  display: inline-block;
  color: #ffffff;
  text-align: center;
  padding: 14px 140px;
  text-decoration: none;
}

nav li a:hover {
  opacity: 0.9;
  background-color: #3385ff;
}

article {
  width: 98.8%;
  height: 400px;
  border-radius: 3px;
  margin: 5px 5px 5px 5px;
  border: 1px solid gainsboro;
  clear: both;
  padding-left: 100px;
}

article p {
  padding: 5px 6px 5px 5px;
  line-height: 1.5;
}
article .konten {
  width: 23.5%;
  height: auto;
  margin: 50px 50px 50px 50px;
  border-radius: 3px;
  border: 1px solid black;
  float: left;
}

article .isi {
  width: 98.5%;
  height: auto;
  margin: 5px 5px 5px 5px;
  border-radius: 3px;
  border: 1px solid gainsboro;
  float: left;
}
article .isi .judul {
  font-size: xx-large;
  margin-bottom: 10px;
  margin-left: 10px;
  margin-top: 10px;
}
article .isi p {
  margin-top: 0;
}
article .isi img {
  float: left;
  margin: 5px 5px 5px 5px;
}

article .konten img {
  width: 95.8%;
  height: 150px;
  margin: 5px 5px 5px 5px;
}
article .konten:hover {
  opacity: 0.9;
}
article .konten .judul a {
  margin-left: 10px;
  text-decoration: none;
  font-size: x-large;
  color: #020101;
}

article .konten a:hover {
  opacity: 0.9;
}

footer {
  clear: both;
  width: 98.8%;
  height: auto;
  text-align: center;
  margin: 5px 5px 5px 5px;
  border-radius: 3px;
  border-bottom: 1px solid gainsboro;
  padding-top: 15px;
  padding-bottom: 15px;
  background-color: rgba(141, 137, 137, 0.699);
}


HASIL















Komentar

Posting Komentar

Postingan populer dari blog ini

Local File Inclusion (LFI) & Remote File Inclusion (RFI) - Sabilla Ardani Putri

Gambar
Local File Inclusion (LFI) & Remote File Inclusion (RFI) Definisi  Local File Inclusion (LFI)   Local File Inclusion (LFI) adalah celah keamanan yang terjadi ketika aplikasi web memungkinkan pengguna untuk memasukkan file lokal dari server melalui input yang tidak divalidasi. Penyerang bisa mengeksploitasi ini untuk membaca file sensitif atau bahkan mengeksekusi kode berbahaya di server.   Definisi  Remote File Inclusion (RFI) Remote File Inclusion (RFI) terjadi saat penyerang mengunggah file berbahaya (biasanya file PHP) ke server, kemudian mengeksekusinya dari jarak jauh. Ini biasanya memanfaatkan celah upload file tanpa validasi yang tepat. Tujuan Serangan Membaca file konfigurasi atau file sensitif seperti password. Mengeksekusi skrip berbahaya. Mendapatkan akses tidak sah atau kontrol atas server. DEMO Local File Inclusion (LFI) Langkah 1: Persiapan Folder & File Buat folder di C:\xampp\htdocs\ dengan nama lfi . Langkah 2: Buat fi...
Baca selengkapnya

TIDAK TERPAKAI - Footprinting dan Reconnaissance menggunakan Whois, Web History, Google Dork, GHDB

Gambar
Footprinting dan Reconnaissance menggunakan Whois, Web History, Google Dork, GHDB Pada artikel kali ini, kita akan membahas bagaimana cara mengumpulkan informasi terkait website bhaktisemesta.ac.id menggunakan beberapa tools yang umum digunakan dalam riset web dan cybersecurity. Tools yang akan kita gunakan meliputi: Whois – Untuk mendapatkan informasi pendaftaran domain, seperti tanggal pembuatan, pemilik, dan penyedia layanan domain. Web History – Untuk melihat riwayat tampilan dan perubahan website dari waktu ke waktu. Google Dork – Untuk menemukan informasi tersembunyi yang tidak terlihat langsung di website tetapi terindeks oleh Google. GHDB (Google Hacking Database) – Untuk mencari potensi celah keamanan atau eksploitasi yang terdokumentasi terkait website tersebut. Dengan menggunakan metode ini, kita dapat memahami lebih dalam tentang struktur dan perkembangan website bhaktisemesta.ac.id , serta mengetahui informasi yang mungkin tidak tersedia secara langsung di halaman ut...
Baca selengkapnya

Manajemen Data Master - Sabilla Ardani Putri

Gambar
  Manajemen Data Master 1. Instalasi Odoo di Ubuntu 1.1 Update Sistem      Sebelum menginstal Odoo, pastikan sistem dalam keadaan terbaru dengan menjalankan perintah              berikut:    sudo apt update && sudo apt upgrade -y 1.2 Install Dependensi      Odoo membutuhkan beberapa paket tambahan untuk berjalan dengan baik. Instal paket-paket berikut:    sudo apt install python3 python3-pip python3-dev libxml2-dev libxslt1-dev zlib1g-dev    libsasl2-dev \ libldap2-dev build-essential libjpeg-dev libpq-dev libffi-dev libssl-dev    libmysqlclient-dev wkhtmltopdf -y 1.3 Install PostgreSQL      Odoo menggunakan PostgreSQL sebagai basis data. Instal PostgreSQL dengan perintah berikut:    sudo apt install postgresql -y      Setelah instalasi selesai, buat user PostgreSQL untuk Odoo:    sudo -u postgres createuser -s odoo ...
Baca selengkapnya