Belajar Membuat Design Website Kursus Menggunakan HTML dan CSS

TUGAS 3 Web Kursus (Homepage)


Identitas Diri

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

Deskripsi Tugas

Tugas yang saya kerjakan adalah menciptakan desain kursus menggunakan bahasa pemrograman HTML dan CSS. Fokus utama saya adalah pada penataan halaman depan situs. Saya memanfaatkan HTML untuk membangun struktur dasar dan menggunakan CSS untuk memberikan sentuhan desain yang menarik. Dalam proses ini, saya memisahkan peran antara HTML yang menangani struktur dan tata letak, serta CSS yang bertanggung jawab atas aspek tampilan dan gaya. Saya juga mengedepankan responsivitas desain agar dapat beradaptasi dengan berbagai ukuran layar. Penting untuk menciptakan sistem navigasi yang intuitif dan menjaga konsistensi dalam penggunaan warna, font, dan tata letak. Saya pun memperhatikan aspek optimisasi gambar, aksesibilitas, dan penggunaan elemen HTML semantik. Untuk memastikan kualitas optimal, saya menguji desain di berbagai browser dan perangkat. Saya juga mempertimbangkan penggunaan komponen UI dan melakukan pengoptimalan kode agar hasilnya lebih baik.

Source Code

**HTML**
<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <div class="main">
        <div class="navbar">
            <div class="icon">
                <h2 class="logo">Kodingers</h2>
            </div>

            <div class="menu">
                <ul>
                    <li><a href="#">BERANDA</a></li>
                    <li><a href="#">TUTOR</a></li>
                    <li><a href="#">BELAJAR</a></li>
                    <li><a href="#">PROMO</a></li>
                    <li><a href="#">KONTAK</a></li>
                </ul>
            </div>

            <div class="search">
                <input class="srch" type="search" name="" placeholder="Mau belajar apa?">
                <a href="#"> <button class="btn">Search</button></a>
            </div>

        </div>
        <div class="content">
            <h1>Platform Pembelajaran</span> <br><span>Coding</span></h1>
            <p class="par">Tempat di mana perjalanan Anda untuk menjadi seorang pemrogram terampil dimulai!
                <br> Platform ini dirancang untuk mempersiapkan Anda dengan keterampilan dan pengetahuan <br>  yang unggul.</p>

                <button class="cn"><a href="#">Belajar, yuks!</a></button>

                <div class="form">
                    <h2>Masuk/Daftar</h2>
                    <input type="email" name="email" placeholder="Masukkin Email">
                    <input type="password" name="" placeholder="Masukkin Password">
                    <button class="btnn"><a href="#">Masuk</a></button>

                    <p class="link">Udah punya akun?<br>
                    <a href="#">daftar </a> disini</a></p>
                    <p class="liw">atau masuk dengan</p>

                    <div class="icons">
                        <a href="#"><ion-icon name="logo-facebook"></ion-icon></a>
                        <a href="#"><ion-icon name="logo-instagram"></ion-icon></a>
                        <a href="#"><ion-icon name="logo-twitter"></ion-icon></a>
                        <a href="#"><ion-icon name="logo-google"></ion-icon></a>
                        <a href="#"><ion-icon name="logo-skype"></ion-icon></a>
                    </div>

                </div>
                    </div>
                </div>
        </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) 50%,
      rgba(0, 0, 0, 0.5) 50%
    ),
    url(https://source.unsplash.com/f77Bh3inUpE);
  background-position: center;
  background-size: cover;
  height: 109vh;
}

.navbar {
  width: 1200px;
  height: 75px;
  margin: auto;
}

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

.logo {
  color: #ff7200;
  font-size: 35px;
  font-family: Arial;
  padding-left: 20px;
  float: left;
  padding-top: 10px;
  margin-top: 5px;
}

.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: #ff7200;
}

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

.srch {
  font-family: "Times New Roman";
  width: 200px;
  height: 40px;
  background: transparent;
  border: 1px solid #ff7200;
  margin-top: 13px;
  color: #fff;
  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: #ff7200;
  border: 2px solid #ff7200;
  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: #ff7200;
  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: #ff7200;
  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: #ff7200;
  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 #ff7200;
  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: #ff7200;
  border: none;
  margin-top: 30px;
  font-size: 18px;
  border-radius: 10px;
  cursor: pointer;
  color: #fff;
  transition: 0.4s ease;
}
.btnn:hover {
  background: #fff;
  color: #ff7200;
}
.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: #ff7200;
}
.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: #ff7200;
}

Hasil




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