Bina Kad Artikel

pengenalan

Helo, pembangun! Saya sangat teruja untuk memperkenalkan projek terbaharu saya: komponen web Kad Artikel. Projek ini merupakan tambahan yang bagus untuk mana-mana tapak web, menyediakan cara yang menarik secara visual untuk memaparkan artikel, catatan blog atau kemas kini berita. Ini adalah peluang terbaik untuk mempertajam kemahiran pembangunan bahagian hadapan anda menggunakan HTML, CSS dan JavaScript sambil mencipta komponen yang praktikal dan boleh digunakan semula.

Gambaran Keseluruhan Projek

Komponen Kad Artikel direka untuk mempamerkan artikel dengan imej, tajuk, penerangan dan maklumat pengarang. Dengan reka letak yang bersih dan moden, ia meningkatkan penglibatan pengguna dengan menjadikan kandungan lebih menarik dan boleh diakses secara visual. Projek ini menunjukkan cara mencipta kad artikel yang elegan yang boleh disepadukan dengan mudah ke dalam pelbagai aplikasi web.

Ciri-ciri

• Reka Bentuk Responsif: Kad Artikel responsif sepenuhnya, memastikan ia kelihatan hebat pada kedua-dua peranti desktop dan mudah alih.
• Kesan Tuding: Kesan tuding halus digunakan untuk meningkatkan interaktiviti kad.
• Reka Letak Boleh Disesuaikan: Reka letak boleh disesuaikan dengan mudah agar sesuai dengan jenis kandungan yang berbeza, menjadikannya serba boleh untuk pelbagai kes penggunaan.

Teknologi yang Digunakan

• HTML: Menyediakan struktur untuk komponen Kad Artikel.
• CSS: Menggayakan komponen untuk mencipta reka bentuk yang menarik secara visual dan responsif.
• JavaScript: (Pilihan) Boleh digunakan untuk interaktiviti tambahan, seperti mengembangkan kandungan pada klik atau menyepadukan dengan komponen lain.

Struktur Projek

Berikut ialah gambaran keseluruhan struktur projek:

Article-Card/
├── index.html
├── style.css
└── script.js (optional)

• index.html: Mengandungi struktur HTML untuk komponen Kad Artikel.
• style.css: Termasuk gaya CSS untuk mencipta reka bentuk yang menarik dan responsif.
• script.js: (Pilihan) Boleh digunakan untuk menambah interaktiviti, seperti mengembangkan kandungan pada klik.

Pemasangan

Untuk memulakan projek, ikut langkah berikut:

1. Klon repositori:
   

   git clone https://github.com/abhishekgurjar-in/Article-Card.git
   

2. Buka direktori projek:
   

   cd Article-Card
   

3. Jalankan projek:

   • Buka fail index.html dalam pelayar web untuk melihat komponen Kad Artikel.

Penggunaan

1. Buka aplikasi dalam penyemak imbas web.
2. Tuding pada kad untuk melihat kesan interaktif.
3. Sesuaikan kandungan dengan mengedit fail HTML dan CSS agar sesuai dengan kes penggunaan khusus anda.
4. Tambah lebih banyak kad jika perlu untuk membuat grid atau senarai artikel.

Penerangan Kod

HTML

Fail index.html mentakrifkan struktur komponen Kad Artikel. Berikut adalah coretan:

  
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Article Card</title>
    <link href="https://fonts.googleapis.com/css?family=Manrope:200,300,regular,500,600,700,800" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
    <script src="./script.js" defer></script>
  
  
    <div class="header">
      <h1>Article Card</h1>
    </div>
    <div class="container">
      <div class="box">
        <div class="left-box"></div>
        <div class="right-box">
          <h3>
            Shift the overall look and feel by adding these wonderful touches to
            furniture in your home
          </h3>
          <p>
            Ever been in a room and felt like something was missing? Perhaps it
            felt slightly bare and uninviting. I’ve got some simple tips to help
            you make any room feel complete.
          </p>
          <div class="name-card">
            <div class="name">
              <img class="profile" src="./images/avatar-michelle.jpg" alt="Profile picture of Michelle Appleton">
              <h4>
                Michelle Appleton <br>
                <span>28 Jun 2020</span>
              </h4>
            </div>
            <div class="share">
              <img src="./images/icon-share.svg" alt="Share icon">
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="footer">
      <p>Made with ❤️ by Abhishek Gurjar</p>
    </div>
  

CSS

Fail style.css menggayakan komponen Kad Artikel, memastikan ia menarik dan responsif secara visual. Di bawah ialah beberapa gaya utama:

* {
    box-sizing: border-box;
}

body {
    background-color: #ecf2f8;
    margin: 0;
    padding: 0;
    font-family: 'Manrope', sans-serif;
    font-size: 16px;
}

.header {
    margin: 20px;
    text-align: center;
}

.container {
    max-width: 1440px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.box {
    overflow: hidden;
    background-color: white;
    border-radius: 20px;
    margin: 0;
    width: 700px;
    height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 100px;
}

.left-box {
    width: 40%;
    height: 300px; /* Ensure height is defined */
    background: url("./images/drawers.jpg") no-repeat center center;
    background-size: cover; /* Ensures the image covers the entire area */
}

.right-box {
    background-color: white;
    width: 60%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    margin-left: 25px;
}

.right-box h3 {
    font-size: 18px;
    margin-right: 55px;
}

.right-box p {
    font-size: 13px;
    margin-right: 55px;
}

.name-card {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.share {
    background-color: #ecf2f8;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 120px;
}

.share img {
    width: 20px;
}

.name {
    gap: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.name h4 {
    font-size: 14px;
}

.name span {
    font-size: 11px;
    color: gray;
}

.profile {
    width: 50px;
    border-radius: 50%;
}

.share-popup {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: rgb(214, 214, 214);
    background-color: #48556a;
    padding-inline: 15px;
    border-radius: 7px;
    font-weight: 100;
    font-size: 15px;
    width: 220px;
    position: fixed;
    margin-top: 250px;
    margin-left: 550px;
}

.footer {
    margin-top: 150px;
    text-align: center;
}

@media (max-width: 750px) {
    .box {
        flex-direction: column;
        width: 400px;
        height: 600px;
    }

    .left-box {
        width: 100%;
    }

    .share-popup {
        margin-top: 550px;
        margin-left: 350px;
    }
}

JavaScript (Pilihan)

Fail script.js boleh digunakan untuk menambah interaktiviti tambahan, seperti mengembangkan atau meruntuhkan kandungan. Berikut ialah contoh mudah:

const shareBtn = document.getElementsByClassName("share")[0];
const container = document.getElementsByClassName("container")[0];

shareBtn.addEventListener("click", () => {
    let sharePopup = document.querySelector(".share-popup");

    if (sharePopup) {
        container.removeChild(sharePopup);
    } else {
        sharePopup = document.createElement("div");
        sharePopup.innerHTML = `
            <p>S H A R E</p>
            <img class="fb" src="./images/icon-facebook.svg" alt="Bina Kad Artikel">
            <img class="tw" src="./images/icon-twitter.svg" alt="Twitter">
            <img class="pt" src="./images/icon-pinterest.svg" alt="Pinterest">
        `;
        sharePopup.classList.add("share-popup");
        container.appendChild(sharePopup);
    }
});

Demo Langsung

Anda boleh melihat demo langsung projek Kad Artikel di sini.

Kesimpulan

Membina komponen Kad Artikel merupakan pengalaman hebat dalam mereka bentuk komponen web yang boleh digunakan semula dan menarik secara visual. Projek ini menyerlahkan kepentingan reka bentuk yang bersih dan susun atur responsif dalam pembangunan web moden. Dengan menggunakan HTML, CSS dan JavaScript secara pilihan, kami telah mencipta komponen yang boleh meningkatkan daya tarikan visual dan kebolehgunaan mana-mana tapak web. Saya harap projek ini memberi inspirasi kepada anda untuk membina komponen tersuai anda sendiri. Selamat mengekod!

Kredit

Projek ini dibangunkan sebagai sebahagian daripada perjalanan pembelajaran berterusan saya dalam pembangunan web.

Pengarang

• Abhishek Gurjar
  • Profil GitHub

Atas ialah kandungan terperinci Bina Kad Artikel. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!