Some help with an online shop

HTML-CSS
1

hey guys im (trying to) code a shopping site , i have created a product gallery and i was just thinking about how to create a shopping cart that connect to the gallery, that reacts to the gallery i know the question is kinda open but im new so please bear with me,

this is the code i got for the shopping gallery i haven’t added links yet
html

     <div class="product-gallery">
       <div class="product-item">
            <img src="Velvet1.png" alt="Product 1" class="product-image">
            <h3>Product 1</h3>
            <p>$19.99</p>
        </div>
         
        <div class="product-item">
            <img src="shiney1.png" alt="Product 2" class="product-image">
            <h3>Product 2</h3>
            <p>$29.99</p>
        </div><div class="product-item">
            <img src="incog1.png" alt="Product 1" class="product-image">
            <h3>Product 1</h3>
            <p>$19.99</p>
        </div>
         
        <div class="product-item">
            <img src="slimjacket1.png" alt="Product 2" class="product-image">
            <h3>Product 2</h3>
            <p>$29.99</p>
        </div>
         
    </div>```


CSS

```.product-gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    padding: 20px;
    margin-top: 270px;
    justify-content: center; /* Center the gallery on the page */
}
.product-gallery1 {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    padding: 20px;
    margin-top: 270px;
    justify-content: center; /* Center the gallery on the page */
}
.product-item {
    flex:  300px; /* The items will take up at least 200px, but will grow if there's more space */
    max-width: 500px;
    text-align: center;
   
    padding: 1px;
    transition: transform 0.2s; /* Animation for scaling */
}

.product-item:hover {
    transform: scale(1.1); /* Scale up on hover */
}

.product-image {
    width: 100%; /* Make the image take up all the available width */
    height: auto; /* Maintain aspect ratio */
    border-radius: 5px;
}

h3 {color: white}

hope to hear back soon… thanks

2

I am not sure what you want to know?

3

i want to create a shopping car to when u add a product it calculates the price itc and show what you have in your basket to purchase

4

hi!, I think that involves javascript, not html/css. i’M not sure anyways so you can get help from the community.

1 Like
5

there’s a shopping cart project that the fCC curriculum has in javascript.
Do you know any javascript? if yes, you can try to learn more from that project here:

if you don’t know any javascript, then you can learn from scratch here: