PWEB - Tugas 2 Membuat Landing Page

  

Pemrograman Web

Tugas 2 - Membuat Landing Page

Nama       : Wina Tungmiharja
NRP           : 5025201242

Kelas        : Pemrograman Web B

1. Deskripsi Tugas 

Membuat Landing Page dengan menggunakan HTML dan CSS. Projek ini saya pilih dari pilihan projek yang bisa dilakukan dari https://www.geeksforgeeks.org/top-10-projects-for-beginners-to-practice-html-and-css-skills/

2. Hasil Tugas

link website : Landing Page

Source Code : Github

- Tampilan Landing Page

- Animasi SVG

animasi SVG yang digunakan pada Landing Page ini juga dianimasikan menggunakan CSS yang di-embed pada SVG file. Untuk melihat CSS tersebut dapat diakses dari direktori img/phone_img.svg

<style>

#Layer_1 {

      --duration-hp : 1.5;

    }

    #hp,

    #item1,

    #item2,

    #item3,

    #item4,

    #item5,

    #item6

    {

      transition : all 2s ease;

    }

    #hp {

      animation : goUp calc(var(--duration-hp) * 1s);

    }

    #popup-front > g, #popup-back > g {

        opacity : 0;

       animation : goDown 8s;

       animation-delay: calc(var(--inc) * 200ms);

       animation-timing-function: ease;

       animation-iteration-count: infinite;

    }

    @keyframes goUp {

      0% {

        transform: translateY(30%);

      }

      100% {

        transform: translateY(0%);

      }

    }

    @keyframes goDown {

      0% {

          opacity: 0;

          transform: translateY(0%);

        }

        20% {

          opacity: 0;

          transform: translateY(-10%);

        }

        30%,

        85% {

          opacity: 1;

          transform: translateY(0);

        }

        100% {

          opacity: 0;

          transform: translateY(-10%);

        }

    }

   .animated-line {

     stroke-dashoffset: 0;

     animation : draw 40s linear infinite;

   }

   @keyframes draw {

     to {

       stroke-dashoffset: 100%;

     }

   }

</style>