Skip to main content

Membuat Profile Card Sederhana WITH HTML CSS!


 Hallo! Pada Kesempatan Kali Ini saya Mengupload Materi Sudah lama Saya Tidak Upload Materi Tentang

Bahasa Pemrograman Berupa HTML & CSS. Kali Pembahasan/Materi Yang Saya Berikan Berjudul : Cara Membuat desain

Card Profile With/Dengan HTML CSS. Ini Sederhana Banget Dan Fleksibel:v


LANGKA PERTAMA YANG KALIAN HARUS MEMBUAT CARD PROFILE 

BUKA TEXT EDITOR YANG KALIAN GUNAKAN UNTUK MENJALANKAN SEBUAH KODE KODE BAHASA 

PEMROGRAMAN!


KALIAN JUGA BISA MEMBUAT CARD PROFILE COMPANY ATAU PERUSAHAN KERJA KALIAN, DLL}


BIKIN FILE YANG BERNAMA .html Atau Ekstensi File Nya...

 kode:

 KODE  HYPERTEXT MARKUP LANGUANGE ATAU LEBIH DI KENAL PEMANGGILAN *HTML*

 BAHASA MARKAH/MARKUP STANDAR UNTUK MEMBUAT  HALAMAN/KONTEN WEBSITE MAU PUN PROJECT DAN INFORMASI LAINNYA

 DAN MENAMPILKAN KONTEN WEBSITE YANG KALIAN BUAT KE SOFTWARE BROWSER - CHROME

 ///


HTML:

 <!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">

   <meta content="author" http-equiv="card-profile">

   <!-- css saya link -->

   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

   <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />

   <title>CARD PROFILE</title>

 </head>

<body onload="cardprofilehtmlcss()">

   <!-- main -->

   <div class="main"  data-aos="fade-down"

     data-aos-easing="linear"

     data-aos-duration="1500">

      <div class="container-main">

         <div class="col-10">

            <div class="image">

               <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT-7WT78SoXJB531eLjmeRQN3YInMguvj--iQ&usqp=CAU" alt="user" class="rounded-circle">

            </div>

            <div class="text-main">

               <h2>Web Developer</h2>

               <br>

               <p style="text-align: center; margin-top: -30px; font-size: 15px; font-weight: bold; margin-left: 80px;">@defanvicky.com</p>

            </div>

            <div class="image-flex">

               <div class="label-image">

                  <label for="image"><img src="https://png.pngtree.com/element_our/md/20180515/md_5afaf0c42f0c8.jpg" alt="fb" width="40"></label>

                  <label for="image"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQroQXj8pPlU9HA94R1EdJwMLdkCMFlA3EONg&usqp=CAU" alt="fb" width="40"></label>

                     <label for="image"><img src="https://asset-a.grid.id/crop/0x0:0x0/x/photo/2019/03/22/3720499105.jpg" alt="fb" width="40" class="rounded-circle"></label>

               </div>

            </div>

            <div class="main-h3">

               <h3  style="font-size: 15px; margin-top: 30px; text-align: center; word-spacing: 2px; width: 140%;">Situs Web Komputer Dan Internet</h3>

            </div>

            <div class="button">

               <div class="button-submit">

                  <button type="submit" name="kirim" class="btn btn-primary">Message</button>

               </div>

            </div>

         </div>

      </div>

   </div>

   <!-- footer copyright -->

   <div class="footer">

      <div class="footer-copy">

         <h5>

            <em>Copyright by - TEAM HCT❤</em>

         </h5>

      </div>

   </div>



   <!-- javascript -->

   <script src="https://unpkg.com/aos@next/dist/aos.js"></script>

  <script>

    AOS.init();

  </script>


   

</body>

</html>


SELANJUTNYA KITA MEMBERIKAN SEBUAH KODE CSS UNTUK MENGDESAIN

KONTEN YANG  KITA BUAT ATAU WEBSITE

YAITU CSS ATAU CASCADING STYLE SHEET

CSS ADALAH SEBUAH BAHASA STYLE SHEET UNTUK MENGATUR TAG/ELEMENT HTML AGAR WEBSITE KALIAN

MENJADI RESPONSIVE. DAN MENGDESAIN HALAMAN WEBSITE KALIAN..


LANGKA AWAL YANG KITA HARUS BERIKAN CSS DI HTML YAITU TAG <link>

<link rel="stylesheet" type="text/css" href="Nama.css">


KARENA SAYA TIDAK MENGGUNAKAN LINK UNTUK MENGHUBUNGKAN FOLDER/FILE CSS KE HTML

DAN SAYA MENGGUNAKAN TAG di dalam element <head></head> <style></style


KODE CSS:

<style type="text/css" media="screen">

         body

       {

          padding: 0;

          margin: 0;

          background-color: skyblue;

          font-family: sans-serif;

          align-items: center;

          min-height: 780px;

       }


       .main{

          display: flex;

          border: 2px outset;

          background: white;

          width: 340px;

          height: 500px;

          margin: auto;

          border-color: blue;

          margin-top: 40px;

          border-radius: 40px;

       }


       .image img

       {

             margin-left: 50px;

          width: 40%;

          margin: 25px;

          position: relative;

          bottom: 0;

          left: 56px;

       }


       .image{

          padding: 10px;

          width: 137%;

          background: blue;

          border-radius: 40px;

          border-bottom-left-radius: 0;

          border-bottom-right-radius: 0;

       }


       .text-main h2

       {

          text-align: center;

          font-size: 27px;

          margin-top: 30px;

          margin-left: 10px;

          width: 130%;

       }


       .image-flex img{

          margin: auto;

          position: relative;

          bottom: -10px;

          left: 70px;

          padding: 0;

          margin-right: 30px;

          border-style: none;

       }


       .image-flex img:hover

       {

          border: 2px solid;

          box-shadow: 1px 1px 1px 1px white;

          border-color: white;

          width: 30px;

          

       }


       .button button{

          border-radius: 50px;

          width: 100%;

          margin-top: 32px;

          margin-left: 50px;

          transition: 0.6s;

          font-style: italic;

          animation: defan 6s;

          -webkit-animation: defan 6s;

          -moz-animation: defan 6s;

       }


       @keyframes defan

       {

          20%{background: yellow; color: black; width: 40%;}

       }


       .button button:hover

       {

          background: yellow;

          color: black;

          border-color: yellow;

          box-shadow: 10px 10px 10px black;

          text-shadow: 1px 1px black;

          text-decoration: underline;

          text-transform: uppercase;

          letter-spacing: 2px;

          font-style: normal;

       }


       .footer 

      {

         text-align:center;

         color: white;

         border: 2px solid;

         background: black;

         text-transform: uppercase;

         width: 340px;

         border-color: black;

         margin: auto;

         margin-top: 30px;

         border-radius: 40px;

      }



      .footer h5 em

      {

         font-size: 14px;


      }

   </style>


   KASIH DI DALAM TAG HEAD. - ELEMENT HEAD INI SEKUMPULAN DATA ATAU META DATA YANG MENGISI INFORMASI

   TENTANG DOKUMEN KALIAN

   NOTE: MOHON MAAF JIKA ADA KATA - KATA YANG TYPO:)

   PARTNER: https://thesevenzerogans.blogspot.com/ (ZeroGans)

   #PEMULA

   #ITMANADO IN SULAWESI UTARA







Comments

Post a Comment

Popular posts from this blog

WEB APLICATION MOBILE: MENYELESAIKAN CHALLENGE WAM

   OKE HALLO BRE  DI SINI SAYA AKAN BAGIKAN CARA MENYELESAIKAN CHALLENGE YANG SAYA DAPATI DI WEB: evilzone.org WEB INI ADALAH WEB FORUM UNTUK  BELAJAR PERETASAN/HACKING BAGI YANG INGIN MEMPELAJARI DUNIA PERHACKINGAN. INI SANGAT MEMBANTU UNTUK KALIAN  YANG MAU BELAJAR PERETASAN/HACKING!   -  OKE SAYA AKAN MEMERIKIKAN [CARA MENYELESAIKAN CHALLENGE "WEB APLICATION MOBILE"]  SAYA AKAN MEMILIH SATU CHALL SAJA  LANGKAH PERTAMA: BUKA SITUS WEB:evilzone.org JIKA SUDAH PENCET LOGIN APABILA BELOM MEMPUNYAI AKUN; REGISTER TERLEBIH DAHULU. JIKA SUDAH MENGREGISTER TINGGAL KALIAN <LOGIN>  LANGKA KE DUA: PENCET MENU "CHALLENGE" DAN SCROLL KE BAWAH DAN CHALL APA YANG KALIAN MAU SELESAIKAN, KLO SAYA PILIH  "WEB APLICATION MOBILE" JIKA SUDAH DI TEKAN WAM/WEB APLIACTION MOBILE  PILIH SALAH SATU CHALL SAJA.  OKE LANGSUNG SAJA SAYA MENYELESAIKAN CHALL YANG TITLE NYA:"TRUSTED PARAMETER"  TEKAN TRUSTED PARAMETER JIKA SUDAH DI SIT...
Post a Comment
Read more

cara Meretas Password WiFi

 Hai Tuan.. Di sini sy akan Kasih Materi Lagi Tapi Di sini sy memberikan materi *CARA MERETAS PASSWORD WIFI DI SEKITAR KALIAN* Nah Kalian Bingung kan mau ngapain Jika Tidak ada Uang Buat Beli Kouta Internet Jika ada orang/tetangga Yg lagi masang WiFi di sekitar Kalian, Tetapi WiFi nya Menggunakan Password, tapi kalian Tidak Tahu nama Password WiFi nya:( Oke Jangan khawatir di sini sy ada tutorial nya sedikit Di sini kalian Buka Laptop, Jika sudah di Buka, Kalian ketik Command Prompt atau CMD Klo sudah Di Buka Kalian Ketik Perintah Untuk meretas Pass WiFi orang di sekitaran kalian: Kalian Ketik: $ netsh wlan show profiles Nah Jika sudah di situ kan ada Muncul nama Wifi orang Kan? Di situ kalian Pilih WiFi mana yg kalian mau Retas Pass nya.. kalian Ketik lagi: $ netsh wlan show profiles nama.wifi key=clear Jika Sudah maka pass nya muncul  Di Key Content Cukup Mudahkan? Gunakan WiFi orang Lain Tanpa Izin, Thanks
1 comment
Read more

Tutorial Insecure direct object reference (idor)

  HALLO PARAH HAKSORR:V di sini gue akan membagikan tutorial idor Atau (Insecure direct object reference ) Nah, apa itu idor? Idor adalah sebuah bug yg mana attacker bisa mengubah input di aplikasi website dan bisa mengakses data yang bukan milik sih attacker:V Oke di sini sy punya target ya: Web: http://www.digiwom.net/ Nah cara mencari bug idor bagaimana? Kalian tinggal kasih aja net/admin/ Nah forbidden? Oke kalian tambahin  Exploit nya: dashboard.php Jadi net/admin/dashboard.php http://www.digiwom.net/admin/dashboard.php Klo udah maka akan ke halaman dashboard di situ kalian bisa apa aja ya :V Oke sekian dari sy Jika ada salah di blogger ini, sy minta maaf.. Thanks
Post a Comment
Read more