Tugas Pemrograman Web-3 Landing Page

Nama   : M Naufal Badruttamam

NRP     : 5025211240

Kelas   : Pemrograman Web A
        
Tahun  : 2022 / 2023 (Genap)

Pada meet keempat, kami diberikan materi tentang dasar-dasar dari css itu sendiri, setelah pertemuan tersebut selesai, kami diberikan tugas yaitu membuat landing-page sederhana dengan menggunakan html, css

Link Repository Github    : https://github.com/Caknoooo/PWEB_Tugas_3_Landing-Page
Link Deployment              : https://cakno-pweb-tugas-3-landing-page.vercel.app/

Source code 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <!-- Css style -->
    <link rel="stylesheet" href="style.css" />

    <!-- Font Awesome -->
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css"
    />

    <title>Nature Landing Page</title>
  </head>
  <body>
    <section>
      <header>
        <a href="" class="logo"> Nature </a>
        <nav>
          <div class="navbar-toggle">
            <span class="toggle-icon"><i class="fas fa-bars"></i></span>
          </div>
          <ul class="navbar-menu">
            <li><a href="#">About</a></li>
            <li><a href="#">Menu</a></li>
            <li><a href="#">Service</a></li>
            <li><a href="#">Contact</a></li>
          </ul>
        </nav>
      </header>

      <img src="./img/bg.jpg" alt="" class="bg" />
      <img src="./img/bird.png" alt="" class="bird" />

      <div class="content-section">
        <h2>We can save the <span class="content-section-animate">World</span></h2>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis, eius
          enim eveniet cumque maxime neque sapiente ipsa praesentium, similique
          doloribus corrupti nisi reiciendis distinctio vitae error, voluptatum
          eaque autem quasi.
        </p>
        <button>
          <svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 24 24"
            width="24"
            height="24"
          >
            <path fill="none" d="M0 0h24v24H0z"></path>
            <path
              fill="currentColor"
              d="M5 13c0-5.088 2.903-9.436 7-11.182C16.097 3.564 19 7.912 19 13c0 .823-.076 1.626-.22 2.403l1.94 1.832a.5.5 0 0 1 .095.603l-2.495 4.575a.5.5 0 0 1-.793.114l-2.234-2.234a1 1 0 0 0-.707-.293H9.414a1 1 0 0 0-.707.293l-2.234 2.234a.5.5 0 0 1-.793-.114l-2.495-4.575a.5.5 0 0 1 .095-.603l1.94-1.832C5.077 14.626 5 13.823 5 13zm1.476 6.696l.817-.817A3 3 0 0 1 9.414 18h5.172a3 3 0 0 1 2.121.879l.817.817.982-1.8-1.1-1.04a2 2 0 0 1-.593-1.82c.124-.664.187-1.345.187-2.036 0-3.87-1.995-7.3-5-8.96C8.995 5.7 7 9.13 7 13c0 .691.063 1.372.187 2.037a2 2 0 0 1-.593 1.82l-1.1 1.039.982 1.8zM12 13a2 2 0 1 1 0-4 2 2 0 0 1 0 4z"
            ></path>
          </svg>
          <span>Join Us</span>
        </button>
      </div>

      <ul class="sosmed-section">
        <li class="sosmed-icon">
          <a href="https://www.instagram.com/Cakno_00"
            ><i class="fab fa-instagram"></i
          ></a>
        </li>
        <li class="sosmed-icon">
          <a href="https://github.com/Caknoooo"
            ><i class="fab fa-github"></i
          ></a>
        </li>
        <li class="sosmed-icon">
          <a href="https://web.facebook.com/cakno.comel" target="_blank"
            ><i class="fab fa-facebook"></i
          ></a>
        </li>
      </ul>

      <div class="text-section">
        <div class="text-section-blocks">
          <h3>The right way</h3>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis,
            iure magni est nulla explicabo cum? In tempora quo voluptates
            maiores?
          </p>
        </div>
        <div class="text-section-blocks">
          <h3>How to start in friendly habits</h3>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis,
            iure magni est nulla explicabo cum? In tempora quo voluptates
            maiores?
          </p>
        </div>
      </div>

      <script type="text/javascript">
        document.addEventListener("mousemove", function (e) {
          const bg = document.querySelector(".bg");
          const bird = document.querySelector(".bird");
          const content = document.querySelector(".content-section");

          bg.style.width = 100 + e.pageX / 100 + "%";
          bg.style.height = 100 + e.pageX / 100 + "%";

          bird.style.right = 100 + e.pageX / 2 + "px";
          content.style.left = 100 + e.pageX / 4 + "px";
        });

        const navbarToggle = document.querySelector(".navbar-toggle");
        const navbarMenu = document.querySelector(".navbar-menu");

        navbarToggle.addEventListener("click", () => {
          navbarMenu.classList.toggle("active");
        });
      </script>
    </section>
  </body>
</html>


<!--- CSS --->
@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");

/* Initial design */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}

body {
  background: #000;
}

section {
  position: relative;
  width: 100%;
  min-height: 100vh;
  padding: 100px 150px;
  display: flex;
  align-items: center;
  overflow: hidden;
  justify-content: flex-start;
}

section header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  justify-content: space-between;
  display: flex;
  padding: 40px 100px;
  align-items: center;
  z-index: 10;
}

section header .logo {
  font-size: 1.5em;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  letter-spacing: 1px;
}

section header .toggle {
  position: relative;
  width: 40px;
  height: 40px;
  background: url(./img/menu.png);
  background-size: 30px;
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
}

/* Navbar section */
nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #fff;
  padding: 5px;
  z-index: 100000;
}

.navbar-toggle {
  display: none;
  cursor: pointer;
}

.toggle-icon {
  font-size: 2rem;
}

.navbar-menu {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

.navbar-menu li {
  margin-left: 20px;
}

.navbar-menu li a {
  text-decoration: none;
  color: white;
  font-size: 15px;
  margin: 20px;
}

.navbar-menu li a:hover {
  color: gray;
}

@media (max-width: 768px) {
  .navbar-toggle {
    display: block;
  }
  .navbar-menu {
    display: none;
    flex-direction: column;
    align-items: center;
    width: 100%;
    position: absolute;
    top: 50px;
    left: 0;
    padding: 20px;
  }
  .navbar-menu li {
    margin: 10px 0;
  }
}

/* Button */
button {
  display: flex;
  align-items: center;
  font-family: inherit;
  font-weight: 500;
  font-size: 17px;
  padding: 0.8em 1.3em 0.8em 0.9em;
  color: white;
  background: #ad5389;
  background: linear-gradient(to right, #05d71a, #40fc85, #06eb1d);
  border: none;
  letter-spacing: 0.05em;
  border-radius: 16px;
}

button svg {
  margin-right: 3px;
  transform: rotate(30deg);
  transition: transform 0.5s cubic-bezier(0.76, 0, 0.24, 1);
}

button span {
  transition: transform 0.5s cubic-bezier(0.76, 0, 0.24, 1);
}

button:hover svg {
  transform: translateX(5px) rotate(90deg);
}

button:hover span {
  transform: translateX(7px);
  cursor: pointer;
}

.bg {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background-position: center;
}

.bird {
  position: absolute;
  bottom: 0;
  right: 100px;
  max-height: 800px;
  z-index: 1000;
}

/* Content-section */
.content-section {
  position: relative;
  max-width: 600px;
  left: 100px;
  z-index: 10;
}

.content-section h2 {
  filter: invert(1);
  font-size: 4em;
  font-weight: 500;
  line-height: 2em;
}

.content-section h2 span {
  font-size: 3.5em;
  font-weight: 800;
  letter-spacing: 5px;
}

.content-section p {
  filter: invert(1);
  margin-top: -10px;
  margin-bottom: 15px;
}

.content-section-animate{
  animation: move 2s linear infinite;
}

@keyframes move {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

/* Sosmed section */
.sosmed-section {
  position: absolute;
  top: 30%;
  right: 0;
  width: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 40px;
  flex-direction: column;
}

.sosmed-section li {
  list-style: none;
}

.sosmed-section li a {
  display: inline-block;
  transform: scale(0.5);
}

.sosmed-section li a i:hover {
  color: gray;
}

.sosmed-section li a i {
  font-size: 5em;
  color: white;
}

.text-section {
  position: absolute;
  bottom: 0;
  display: flex;
}

.text-section .text-section-blocks {
  position: relative;
  padding: 20px;
  margin-right: 40px;
  max-width: 500px;
  background: rgb(0, 255, 0, 0.2);
}

.text-section .text-section-blocks:hover {
  position: relative;
  padding: 20px;
  margin-right: 40px;
  max-width: 500px;
  background: #1dbb32;
  z-index: 100000;
  transform: translateY(-10px);
}

.text-section .text-section-blocks h3 {
  font-size: 1.5em;
  filter: invert(1);
  font-weight: 500;
  letter-spacing: 1px;
}

.text-section .text-section-blocks h3:hover {
  font-size: 1.5em;
  color: #fff;
  font-weight: 500;
  letter-spacing: 1px;
}

.text-section .text-section-blocks p {
  font-size: 1em;
  filter: invert(1);
}

Komentar

Posting Komentar

Postingan populer dari blog ini

Final Project Pemrograman Berbasis Kerangka Kerja

Gambar
Nama     : M Naufal Badruttamam NRP        : 5025211240 Kelas      : PBKK B Tahun     : 2023 / 2024 (Ganjil) Link Github: https://github.com/zetsux/codeigniter4-bicycle-shop Final Project Pemrograman Berbasis Kerangka Kerja Pada final project PBKK kali ini saya telah mendapatkan paper yang akan saya gunakan nantinya. Berikut adalah paper nya https://jim.teknokrat.ac.id/index.php/sisteminformasi/article/view/236.  yang memiliki judul "SISTEM INFORMASI PENJUALAN SEPEDA BERBASIS WEB MENGGUNAKAN FRAMEWORK CODEIGNITER" yang dibuat oleh mahasiswa Universital Teknokrat Indonesia.  Buatlah deskripsi studi kasus aplikasi ditinjau dari MVC nya(individu)  Buatlah rancangan umum arsitektur atau fitur yang ada dalam aplikasi  (individu) Rancang desain databasenya  (individu) Buat desain front end  (individu) Tentukan Control yang akan mengandle logika back end.  (individu) Implementasikan rancangan yang su...
Baca selengkapnya

Tugas 10 Pemrograman Berbasis Kerangka Kerja

Gambar
Nama     : M Naufal Badruttamam NRP        : 5025211240 Kelas      : PBKK B Tahun     : 2023 / 2024 (Ganjil) Link Github: https://github.com/Caknoooo/PBKK_Tugas_10_Google_Apps Link Deployment: https://pbkk-tugas-10-google-apps.vercel.app/  Link Spreadsheet: https://docs.google.com/spreadsheets/d/1qRkh_OKH_c_7lQayZxYvXlGCtuswnTJyomwjr7eaSlk/edit?usp=sharing (Seluruh Laporan dan Demo sudah saya cantumkan di Github) Pemrograman Berbasis Kerangka Kerja  Google adalah sebuah perusahaan multinasional Amerika Serikat yang berkekhususan pada jasa dan produk Internet. Produk-produk tersebut meliputi teknologi pencarian, komputasi web, perangkat lunak, dan periklanan daring. Produk-produk Google sudah terkenal sejak dahulu dalam membantu mempermudah pekerjaan manusia, diantaranya yaitu Google Maps, Google Chrome, Google Earth, Google Desktop, dan yang paling familiar bagi kita semua yaitu Google Document. Google Docum...
Baca selengkapnya

Evaluasi Akhir Semester Pemrogaman Web A

Gambar
Nama      :  M Naufal Badruttamam Kelas     : Pemrograman Web A NRP      : 5025211240 Repository: https://github.com/Caknoooo/FP_PWEB_E-Learning Deployment: http://fppwebelearning.infinityfreeapp.com/   Evaluasi Akhir Semester (Pemrograman Web)     1.  Frontend -         Frontend merupakan bagian dari aplikasi web yang berinteraktsi langsung dengan pengguna atau pengunjung -         Frontend berjalan di sisi klien, yaitu di perangkat pengguna seperti browser google, microsot edge, mozila dan lain lain. -         Fungsi utama frontend adalah untuk menampilkan tampilan atau antarmuka pengguna yang interakif dan menarik -         Teknologi yang umuim digunakan dalam pengembangan frontend termasuk HTML untuk struktur, CSS untuk stylingnya dan javascript yang digunakan un...
Baca selengkapnya