Erstellen Sie eine Artikelkarte

Einführung

Hallo Entwickler! Ich freue mich, Ihnen mein neuestes Projekt vorzustellen: eine Article Card-Webkomponente. Dieses Projekt ist eine großartige Ergänzung für jede Website und bietet eine optisch ansprechende Möglichkeit, Artikel, Blogbeiträge oder Nachrichtenaktualisierungen anzuzeigen. Es ist eine hervorragende Gelegenheit, Ihre Frontend-Entwicklungsfähigkeiten mithilfe von HTML, CSS und JavaScript zu verbessern und gleichzeitig eine praktische und wiederverwendbare Komponente zu erstellen.

Projektübersicht

Die Komponente Artikelkarte dient zur Präsentation von Artikeln mit Bild, Titel, Beschreibung und Autoreninformationen. Mit einem klaren und modernen Layout erhöht es die Benutzereinbindung, indem es Inhalte optisch ansprechender und zugänglicher macht. Dieses Projekt zeigt, wie man eine elegante Artikelkarte erstellt, die problemlos in verschiedene Webanwendungen integriert werden kann.

Merkmale

• Responsives Design: Die Artikelkarte ist vollständig responsiv, sodass sie sowohl auf Desktop- als auch auf Mobilgeräten gut aussieht.
• Hover-Effekte: Subtile Hover-Effekte werden angewendet, um die Interaktivität der Karte zu verbessern.
• Anpassbares Layout: Das Layout kann einfach an verschiedene Arten von Inhalten angepasst werden, wodurch es für verschiedene Anwendungsfälle vielseitig einsetzbar ist.

Verwendete Technologien

• HTML: Stellt die Struktur für die Artikelkartenkomponente bereit.
• CSS: Gestaltet die Komponente so, dass ein optisch ansprechendes und ansprechendes Design entsteht.
• JavaScript: (Optional) Kann für zusätzliche Interaktivität verwendet werden, z. B. zum Erweitern von Inhalten per Klick oder zur Integration mit anderen Komponenten.

Projektstruktur

Hier ein Überblick über die Projektstruktur:

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

• index.html: Enthält die HTML-Struktur für die Artikelkartenkomponente.
• style.css: Enthält CSS-Stile, um ein ansprechendes und ansprechendes Design zu erstellen.
• script.js: (Optional) Kann verwendet werden, um Interaktivität hinzuzufügen, z. B. das Erweitern von Inhalten beim Klicken.

Installation

Um mit dem Projekt zu beginnen, befolgen Sie diese Schritte:

1. Klonen Sie das Repository:
   

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

2. Öffnen Sie das Projektverzeichnis:
   

   cd Article-Card
   

3. Führen Sie das Projekt aus:

   • Öffnen Sie die Datei index.html in einem Webbrowser, um die Artikelkartenkomponente anzuzeigen.

Verwendung

1. Öffnen Sie die Anwendung in einem Webbrowser.
2. Bewegen Sie den Mauszeiger über die Karte, um die interaktiven Effekte zu sehen.
3. Passen Sie den Inhalt an, indem Sie die HTML- und CSS-Dateien so bearbeiten, dass sie zu Ihrem spezifischen Anwendungsfall passen.
4. Fügen Sie bei Bedarf weitere Karten hinzu, um ein Raster oder eine Artikelliste zu erstellen.

Code-Erklärung

HTML

Die Datei index.html definiert die Struktur der Artikelkartenkomponente. Hier ist ein Ausschnitt:

  
    <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

Die style.css-Datei formatiert die Artikelkartenkomponente und stellt sicher, dass sie optisch ansprechend und reaktionsfähig ist. Nachfolgend sind einige wichtige Stile aufgeführt:

* {
    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 (optional)

Die Datei script.js kann verwendet werden, um zusätzliche Interaktivität hinzuzufügen, z. B. das Erweitern oder Reduzieren von Inhalten. Hier ist ein einfaches Beispiel:

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="Erstellen Sie eine Artikelkarte">
            <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);
    }
});

Live-Demo

Sie können sich hier die Live-Demo des Article Card-Projekts ansehen.

Abschluss

Der Aufbau der Artikelkartenkomponente war eine großartige Erfahrung beim Entwerfen einer wiederverwendbaren und optisch ansprechenden Webkomponente. Dieses Projekt unterstreicht die Bedeutung von klarem Design und responsiven Layouts in der modernen Webentwicklung. Durch die Anwendung von HTML, CSS und optional JavaScript haben wir eine Komponente erstellt, die die visuelle Attraktivität und Benutzerfreundlichkeit jeder Website verbessern kann. Ich hoffe, dass dieses Projekt Sie dazu inspiriert, Ihre eigenen benutzerdefinierten Komponenten zu bauen. Viel Spaß beim Codieren!

Credits

Dieses Projekt wurde als Teil meiner kontinuierlichen Lernreise in der Webentwicklung entwickelt.

Autor

• Abhishek Gurjar
  • GitHub-Profil

Das obige ist der detaillierte Inhalt vonErstellen Sie eine Artikelkarte. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!