Create an Online Art Auction using HTML, CSS and JavaScript

Last Updated : 28 Apr, 2025
Comments
Improve
Suggest changes
Like Article
Like
Report

In this article, we'll guide you through the process of creating an online art auction website using HTML, CSS, and JavaScript. Art auctions are exciting events where collectors and enthusiasts bid on prized artworks. It will provide a foundation for displaying art listings and creating an appealing user interface.

Preview of final output: Let us have a look at how the final output will look like.

mediaio_Ray8KDsv

Prerequisites:

Step-Wise Approach to create Online Art Auction:

  • Step 1: Setting Up the Project:
    • Let's start by creating a new folder for our project. Inside this folder create two files: index.html, styles.css and script.js. The HTML file will contain the structure of our auction site and CSS file will handle the styling.
  • Step 2: Creating the HTML Structure:
    • In the index.html file set up the basic structure of your online art auction website.The HTML code sets up the basic structure of your art auction website with the header, auction listings section and footer.
  • Step 3: Styling with CSS:
    • In the styles.css file you can add styles to make your art auction site visually appealing. The CSS code provides basic styling for header, auction listings section, individual art listing cards and footer. You can customize these styles to match your design preferences.
  • Step 4: Adding Art Listings:
    • To make your online art auction functional you need to add art listings to auction listings section. Each art listing can be represented as a card within auction-listings section.
  • Step 5: Javascript code:
    • This javascript code provides the message like once click the button then showing successful message
  • Step 6: Testing and Refining:
    • After adding content, it's essential to test your online art auction website in the different web browsers to ensure compatibility. Make refinements to HTML , CSS and javascript code as needed to improve the user experience and styling.

Example: Below is the basic implementaion to create an Online Art Auction using HTML & CSS

JavaScript 
function placeBid() {
  alert("Successfully Bid!");
}
const Buttons = 
  document.querySelectorAll(".art-card button");
Buttons.forEach(button => {
  button.addEventListener("click", placeBid);
});
HTML 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, 
                   initial-scale=1.0">
    <title>The Online Art Auction</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <header>
        <h1>
            Welcome to Online 
            Art Auction
        </h1>
    </header>
    <section class="art-listings">
        <div class="art-card">
            <!-- add your image url here -->
            <img src="a.jpg" alt="Artwork 1">
            <h2>Artwork - 01</h2>
            <p>Artist: Kumar </p>
            <p>
                Description: Description of 
                the artwork goes here.
            </p>
            <p>Current Bid: $500</p>
            <button>Place Bid</button>
        </div>
        <div class="art-card">
            <!-- add your image url here -->
            <img src="b.jpg" alt="Artwork 2">
            <h2>Artwork - 02</h2>
            <p>Artist: Raj 2</p>
            <p>
                Description: Description of 
                the artwork goes here.
            </p>
            <p>Current Bid: $700</p>
            <button>Place Bid</button>
        </div>
    </section>
    <script src="script.js"></script>
</body>

</html>
CSS 
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    background-color: #669966;
    margin: 0;
    padding: 0;
}

header {
    background-color: #0000ff;
    color: #fff;
    text-align: center;
    padding: 20px 0;
}

h1 {
    font-size: 36px;
    margin: 0;
}

.art-listings {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
    padding: 20px;
}

.art-card {
    background-color: #fff;
    border: 1px solid #ddd;
    padding: 20px;
    text-align: center;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease;
    max-width: 300px;
}

.art-card:hover {
    transform: translateY(-5px);
}

img {
    max-width: 100%;
    height: auto;
}

h2 {
    font-size: 24px;
    margin: 10px 0;
}

p {
    font-size: 16px;
    margin: 8px 0;
}

button {
    background-color: #333;
    color: #fff;
    border: none;
    padding: 10px 20px;
    font-size: 18px;
    cursor: pointer;
}

footer {
    text-align: center;
    background-color: #333;
    color: #fff;
    padding: 10px 0;
}

Output:

mediaio_Ray8KDsv



Next Article
Create an Online Art Auction using HTML, CSS and JavaScript

M
mguru4c05q
Improve
Article Tags :

Similar Reads