Kuis 1 HTML dan CSS

 Membuat Website Company

Identitas Diri

Nama: Muhammad Rifqi Ma'ruf
NRP: 5025221060
Kelas: Pemrograman Web A
Tahun: 2023

Deskripsi Tugas

Website Company Profile

 

Pembuatan website kantor - Dibutuhkan jasa pembuatan website kantor yang menarik - Dengan tampilan web yang dinamis - User Friendly dan berbasis Database.


 Source Code

**HTML**
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>BRIN - Badan Riset dan Inovasi Nasional</title>
    <link rel="stylesheet" href="styles.css" />

  </head>
  <body>
    <div class="main">
      <div class="navbar">
        <div class="icon">
          <img
            src="https://upload.wikimedia.org/wikipedia/commons/3/3f/Main_Logo_of_National_Research_and_Innovation_Agency_of_Indonesia.svg"
            class="logo"
            alt="BRIN Logo"
          />
          <h2 class="logo">BRIN</h2>
        </div>

        <div class="menu">
          <ul>
            <li><a href="#">BERANDA</a></li>
            <li><a href="#">TENTANG</a></li>
            <li><a href="#">RISET</a></li>
            <li><a href="#">CIVITAS</a></li>
            <li><a href="#">KONTAK</a></li>
          </ul>
        </div>

        <div class="search">
          <input
            class="srch"
            type="search"
            name="search"
            placeholder="Pencarian"
          />
          <button class="btn" type="submit">Search</button>
        </div>
      </div>
        <div class="content">
            <h1>Riset Nasinal</span> <br><span>E-Sains BRIN</span></h1>
            <p class="par">Penyedia Infrastruktur penelitian, pengembangan, dan pengkajian nasional
                <br> baik sumber daya manusia maupun perangkat lunak dan keras <br>  yang unggul.</p>

                <button class="cn"><a href="#">Selengkapnya!</a></button>
        </div>
        <div class="footer">
            <ul class="social-links">
              <li><a href="https://facebook.com/BRIN"><ion-icon name="logo-facebook"></ion-icon></a></li>
              <li><a href="https://twitter.com/BRIN"><ion-icon name="logo-twitter"></ion-icon></a></li>
              <li><a href="https://instagram.com/BRIN"><ion-icon name="logo-instagram"></ion-icon></a></li>
            </ul>
            <p>&copy; 2023 BRIN. All Rights Reserved.</p>
          </div>
    </div>
    <script src="https://unpkg.com/ionicons@5.4.0/dist/ionicons.js"></script>
  </body>
</html>




**CSS**
* {
  margin: 0;
  padding: 0;
}

.main {
  width: 100%;
  background: linear-gradient(
      to top,
      rgba(0, 0, 0, 0.5) 30%,
      rgba(0, 0, 0, 0.5) 30%
    ),
    url(https://source.unsplash.com/hv2DRoXTKxI);
  background-position: center;
  background-size: cover;
  height: 109vh;
}

.navbar {
  background-color: #fff;
  border-radius: 15px;
  width: 1200px;
  height: 75px;
  margin: auto;
}

.navbar .logo,
.navbar ul li a {
  color: #676767;
}

.icon {
  width: 200px;
  float: left;
  height: 70px;
}

.logo {
  color: #ff4120e2;
  font-size: 35px;
  font-family: Arial;
  padding-left: 20px;
  float: left;
  padding-top: 10px;
  margin-top: 5px;
  max-height: 48px;
  margin-right: 10px;
}

.menu {
  width: 400px;
  float: left;
  height: 70px;
}

ul {
  float: left;
  display: flex;
  justify-content: center;
  align-items: center;
}

ul li {
  list-style: none;
  margin-left: 62px;
  margin-top: 27px;
  font-size: 14px;
}

ul li a {
  text-decoration: none;
  color: #fff;
  font-family: Arial;
  font-weight: bold;
  transition: 0.4s ease-in-out;
}

ul li a:hover {
  color: #ff4120e2;
}

.search {
  width: 330px;
  float: left;
  margin-left: 270px;
  color: aliceblue;
}

.srch {
  font-family: "Times New Roman";
  width: 200px;
  height: 40px;
  background: transparent;
  border: 1px solid #ff4120e2;
  margin-top: 13px;
  color: #828282;
  border-right: none;
  font-size: 16px;
  float: left;
  padding: 10px;
  border-bottom-left-radius: 5px;
  border-top-left-radius: 5px;
}

.btn {
  width: 100px;
  height: 40px;
  background: #ff4120e2;
  border: 2px solid #ff4120e2;
  margin-top: 13px;
  color: #fff;
  font-size: 15px;
  border-bottom-right-radius: 5px;
  border-bottom-right-radius: 5px;
  transition: 0.2s ease;
  cursor: pointer;
}
.btn:hover {
  color: #000;
}

.btn:focus {
  outline: none;
}

.srch:focus {
  outline: none;
}

.content {
  width: 1200px;
  height: auto;
  margin: auto;
  color: #fff;
  position: relative;
}

.content .par {
  padding-left: 20px;
  padding-bottom: 25px;
  font-family: Arial;
  letter-spacing: 1.2px;
  line-height: 30px;
}

.content h1 {
  font-family: "Times New Roman";
  font-size: 50px;
  padding-left: 20px;
  margin-top: 9%;
  letter-spacing: 2px;
}

.content .cn {
  width: 160px;
  height: 40px;
  background: #ff4120e2;
  border: none;
  margin-bottom: 10px;
  margin-left: 20px;
  font-size: 18px;
  border-radius: 10px;
  cursor: pointer;
  transition: 0.4s ease;
}

.content .cn a {
  text-decoration: none;
  color: #000;
  transition: 0.3s ease;
}

.cn:hover {
  background-color: #fff;
}

.content span {
  color: #ff4120e2;
  font-size: 65px;
}

.form {
  width: 250px;
  height: 380px;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.8) 50%,
    rgba(0, 0, 0, 0.8) 50%
  );
  position: absolute;
  top: -20px;
  left: 870px;
  transform: translate(0%, -5%);
  border-radius: 10px;
  padding: 25px;
}

.form h2 {
  width: 220px;
  font-family: sans-serif;
  text-align: center;
  color: #ff4120e2;
  font-size: 22px;
  background-color: #fff;
  border-radius: 10px;
  margin: 2px;
  padding: 8px;
}

.form input {
  width: 240px;
  height: 35px;
  background: transparent;
  border-bottom: 1px solid #ff4120e2;
  border-top: none;
  border-right: none;
  border-left: none;
  color: #fff;
  font-size: 15px;
  letter-spacing: 1px;
  margin-top: 30px;
  font-family: sans-serif;
}

.form input:focus {
  outline: none;
}

::placeholder {
  color: #fff;
  font-family: Arial;
}

.btnn {
  width: 240px;
  height: 40px;
  background: #ff4120e2;
  border: none;
  margin-top: 30px;
  font-size: 18px;
  border-radius: 10px;
  cursor: pointer;
  color: #fff;
  transition: 0.4s ease;
}
.btnn:hover {
  background: #fff;
  color: #ff4120e2;
}
.btnn a {
  text-decoration: none;
  color: #000;
  font-weight: bold;
}
.form .link {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 17px;
  padding-top: 20px;
  text-align: center;
}
.form .link a {
  text-decoration: none;
  color: #ff4120e2;
}
.liw {
  padding-top: 15px;
  padding-bottom: 10px;
  text-align: center;
}
.icons a {
  text-decoration: none;
  color: #fff;
}
.icons ion-icon {
  color: #fff;
  font-size: 30px;
  padding-left: 14px;
  padding-top: 5px;
  transition: 0.3s ease;
}
.icons ion-icon:hover {
  color: #ff4120e2;
}

.footer {
  background-color: #333;
  color: #fff;
  text-align: center;
  padding: 20px;
  position: fixed;
  width: 100%;
  bottom: 0;
}

.footer .social-links {
  list-style-type: none;
  padding: 0;
  display: flex;
  justify-content: center;
}

.footer .social-links li {
  margin: 0 10px;
}

.footer .social-links img {
  width: 30px;
  height: 30px;
}

.footer .social-links a {
  text-decoration: none;
  color: #fff;
}

.footer .social-links a:hover {
  opacity: 0.7;
}




**HASIL**

**CATATAN PENULIS**
Website belum mencapai hasil terbaik karena keterbatasan waktu dan resource yang saya dapat, seharusnya setiap navigasi bar memiliki informasi masing masing, tetapi saat website tersebut di upload saya masih belum sempat membuatnya.

Meskipun demikian, kebutuhan berdasarkan deskripsi tugas ada 3 yaitu membuat website yang menarik dinamis dan user friendly, sehingga saya menangkap kebutuhan CSS sangat ditekankan.


Komentar

Posting Komentar

Postingan populer dari blog ini

KUIS 2 PWEB A

Gambar
 KUIS 2 PWEB A #Identitas Diri Nama: Muhammad Rifqi Ma'ruf NRP: 5025221060 Kelas: Pemrograman Web A Tahun: 2023 #Deskripsi Tugas Tuliskan spesifikasi kebutuhan perangkat lunak dan struktur menu yang cocok untuk aplikasi yang akan dibuat (individu - jam kuliah) Buatlah desain database dan struktur tabel yang akan menampung data yang dikelola (individu  - jam kuliah) Desan Frond End dan page yang akan dibuat untuk aplikasi (individu - jam kuliah) Sebutkan daftar action untuk backend yang akan dibutuhkan. Jelaskan digunakan apa saja (individu - jam kuliah) Implementasikan dan buat domumentasinya. Presentasikan jawabanmu ke dalam bentuk video dan embedded ke blog jawaban. (Boleh kelompok maks3 - paling lambat 12 Des 2023 Jam 08:00) #Jawaban #1.  Spesifikasi Kebutuhan Perangkat Lunak Manajemen Siswa Manajemen Siswa Pendaftaran siswa baru dan pembaruan informasi Penyimpanan data siswa termasuk nama, usia, alamat, data kontak, dan riwayat belajar Manajemen Jadwal Bimbi...
Baca selengkapnya

Belajar Membuat CV Pribadi Menggunakan HTML

Gambar
Tugas 1 CV Pribadi (HTML) Identitas Diri Nama: Muhammad Rifqi Ma'ruf NRP: 5025221060 Kelas: Pemrograman Web A Tahun: 2023 Deskripsi Tugas Tugas pertama adalah membuat Curriculum Vitae (CV) pribadi dalam format HTML. Di dalamnya terdapat identitas diri, deskripsi tugas, mindset belajar, alat dan software yang dikuasai, serta kemampuan-kemampuan. Semua informasi ini diatur dengan markup HTML untuk menciptakan halaman web yang terstruktur dan informatif. Source Code <! DOCTYPE html > < html lang = "en" >   < head >     < meta charset = "UTF-8" />     < meta name = "viewport" content = "width=device-width, initial-scale=1.0" />     < title > Curriculum Vitae </ title >   </ head >   < body >     < h1 > Curriculum Vitae </ h1 >     < h2 > Personal Information </ h2 >     < ul >       < li > Nama: Muhammad Ri...
Baca selengkapnya

Belajar membuat CV pribadi mengunakan HTML dan CSS

Gambar
  Tugas 2 CV Pribadi (CSS) Identitas Diri Nama: Muhammad Rifqi Ma'ruf NRP: 5025221060 Kelas: Pemrograman Web A Tahun: 2023 Deskripsi Tugas Saya telah membuat sebuah Curriculum Vitae (CV) pribadi menggunakan HTML dan CSS. CV ini mencakup identitas diri, profil pribadi, mindset, alat atau tool-sets yang saya kuasai, dan keterampilan atau skill-sets yang saya miliki. CV ini dirancang untuk memperlihatkan informasi penting tentang diri saya kepada orang lain, termasuk nama, NRP, kelas, dan deskripsi mengenai diri saya, minat, keahlian, serta pengalaman. Dengan ini, saya berharap CV ini dapat memberikan gambaran yang jelas tentang siapa saya dan apa yang saya tawarkan. Source Code: <! DOCTYPE html > < html lang = "id" >   < head >     < meta charset = "UTF-8" />     < meta       name = "viewport"       content = "width=device-width, initial-scale=1.0"     />     < title > C...
Baca selengkapnya