Build a Article Card

Introduction

Hello, developers! I’m thrilled to introduce my latest project: an Article Card web component. This project is a great addition to any website, providing a visually appealing way to display articles, blog posts, or news updates. It’s an excellent opportunity to sharpen your frontend development skills using HTML, CSS, and JavaScript while creating a practical and reusable component.

Project Overview

The Article Card component is designed to showcase articles with an image, title, description, and author information. With a clean and modern layout, it enhances user engagement by making content more visually appealing and accessible. This project demonstrates how to create an elegant article card that can be easily integrated into various web applications.

Features

Responsive Design: The Article Card is fully responsive, ensuring it looks great on both desktop and mobile devices.
Hover Effects: Subtle hover effects are applied to enhance the interactivity of the card.
Customizable Layout: The layout can be easily customized to fit different types of content, making it versatile for various use cases.

Technologies Used

HTML: Provides the structure for the Article Card component.
CSS: Styles the component to create a visually appealing and responsive design.
JavaScript: (Optional) Can be used for additional interactivity, such as expanding content on click or integrating with other components.

Project Structure

Here’s an overview of the project structure:

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

index.html: Contains the HTML structure for the Article Card component.
style.css: Includes CSS styles to create an engaging and responsive design.
script.js: (Optional) Can be used to add interactivity, such as expanding content on click.

Installation

To get started with the project, follow these steps:

Clone the repository:

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

Open the project directory:
```
cd Article-Card
```
Run the project:
- Open the index.html file in a web browser to view the Article Card component.

Usage

Open the application in a web browser.
Hover over the card to see the interactive effects.
Customize the content by editing the HTML and CSS files to fit your specific use case.
Add more cards if needed to create a grid or list of articles.

Code Explanation

HTML

The index.html file defines the structure of the Article Card component. Here’s a snippet:

<!DOCTYPE html>
<html lang="en">
  <head>
    <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>
  </head>
  <body>
    <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>
  </body>
</html>

CSS

The style.css file styles the Article Card component, ensuring it’s visually appealing and responsive. Below are some key styles:

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

The script.js file can be used to add additional interactivity, such as expanding or collapsing content. Here’s a simple example:

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="Facebook" />
            <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

You can check out the live demo of the Article Card project here.

Conclusion

Building the Article Card component was a great experience in designing a reusable and visually appealing web component. This project highlights the importance of clean design and responsive layouts in modern web development. By applying HTML, CSS, and optionally JavaScript, we’ve created a component that can enhance the visual appeal and usability of any website. I hope this project inspires you to build your own custom components. Happy coding!

Credits

This project was developed as part of my continuous learning journey in web development.

Author

Abhishek Gurjar
- GitHub Profile

Blog

Abhishek Gurjar