Créer une fiche d'article

Introduction

Bonjour les développeurs ! Je suis ravi de vous présenter mon dernier projet : un composant Web Article Card. Ce projet est un excellent ajout à n'importe quel site Web, offrant un moyen visuellement attrayant d'afficher des articles, des articles de blog ou des mises à jour d'actualités. C'est une excellente opportunité d'affiner vos compétences en développement frontend en utilisant HTML, CSS et JavaScript tout en créant un composant pratique et réutilisable.

Aperçu du projet

Le composant Article Card est conçu pour présenter des articles avec une image, un titre, une description et des informations sur l'auteur. Avec une mise en page épurée et moderne, il améliore l’engagement des utilisateurs en rendant le contenu plus attrayant et accessible. Ce projet montre comment créer une fiche d'article élégante qui peut être facilement intégrée à diverses applications Web.

Caractéristiques

• Conception réactive : la carte d'article est entièrement réactive, garantissant ainsi qu'elle s'affichera parfaitement sur les ordinateurs de bureau et les appareils mobiles.
• Effets de survol : des effets de survol subtils sont appliqués pour améliorer l'interactivité de la carte.
• Mise en page personnalisable : la mise en page peut être facilement personnalisée pour s'adapter à différents types de contenu, ce qui la rend polyvalente pour divers cas d'utilisation.

Technologies utilisées

• HTML : Fournit la structure du composant Article Card.
• CSS : stylise le composant pour créer un design visuellement attrayant et réactif.
• JavaScript : (Facultatif) Peut être utilisé pour une interactivité supplémentaire, comme l'expansion du contenu en un clic ou l'intégration avec d'autres composants.

Structure du projet

Voici un aperçu de la structure du projet :

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

• index.html : Contient la structure HTML du composant Article Card.
• style.css : inclut des styles CSS pour créer un design attrayant et réactif.
• script.js : (Facultatif) Peut être utilisé pour ajouter de l'interactivité, comme développer du contenu en un clic.

Installation

Pour démarrer le projet, suivez ces étapes :

1. Cloner le dépôt :
   

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

2. Ouvrez le répertoire du projet :
   

   cd Article-Card
   

3. Exécuter le projet :

   • Ouvrez le fichier index.html dans un navigateur Web pour afficher le composant Article Card.

Usage

1. Ouvrez l'application dans un navigateur Web.
2. Survolez la carte pour voir les effets interactifs.
3. Personnalisez le contenu en modifiant les fichiers HTML et CSS en fonction de votre cas d'utilisation spécifique.
4. Ajoutez plus de cartes si nécessaire pour créer une grille ou une liste d'articles.

Explication du code

HTML

Le fichier index.html définit la structure du composant Article Card. En voici un extrait :

  
    <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

Le fichier style.css stylise le composant Article Card, garantissant qu'il est visuellement attrayant et réactif. Voici quelques styles clés :

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

Le fichier script.js peut être utilisé pour ajouter une interactivité supplémentaire, comme développer ou réduire du contenu. Voici un exemple simple :

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="Créer une fiche darticle">
            <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);
    }
});

Démo en direct

Vous pouvez consulter la démo en direct du projet Article Card ici.

Conclusion

La création du composant Article Card a été une expérience formidable dans la conception d'un composant Web réutilisable et visuellement attrayant. Ce projet met en évidence l'importance d'un design épuré et de mises en page réactives dans le développement Web moderne. En appliquant HTML, CSS et éventuellement JavaScript, nous avons créé un composant capable d'améliorer l'attrait visuel et la convivialité de n'importe quel site Web. J'espère que ce projet vous inspirera pour créer vos propres composants personnalisés. Bon codage !

Crédits

Ce projet a été développé dans le cadre de mon parcours d'apprentissage continu en développement Web.

Auteur

• Abhishek Gurjar
  • Profil GitHub

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!