I am trying to make a catalog for online shop like ebay. How to make each box with different image and title. Am I supposed to use JS here and if so how to do it?
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
html {
background-color: #E7E7E7;
font-family: system-ui;
color: #000;
}
.container {
display: grid;
grid-template-columns: 20rem 1fr;
margin: 2.6rem;
}
.box {
border-radius: 3%;
background-color: #fff;
box-shadow: 10px 10px 20px#bababa;
width: 15rem;
height: 17.5rem;
}
.image {
position: relative;
top: 10px;
background-color: #fff;
background-image: url(Reference/Shoes/Air\ Jordan\ 1\ Retro\ High\ OG\ Shoes.webp);
background-repeat: no-repeat;
background-size: cover;
padding: 100px;
margin: 0 10px;
}
.title {
margin: 20px 20px 0 20px;
}
.creator {
color: #525252;
font-size: 9.5pt;
margin: 0 20px 20px 20px;
}
<div >
<div >
<div ></div>
<div >
<p>Nike Air Max Jordan 1</p>
</div>
<div >
<p>Martingrgv</p>
</div>
<div ></div>
</div>
<div >
<div ></div>
<div >
<p>Nike Air Max Jordan 1</p>
</div>
<div >
<p>Martingrgv</p>
</div>
<div ></div>
</div>
</div>
I am new to building a website so you might see beginner mistakes. If you have any suggestions to improve the code I am open.
CodePudding user response:
Do you mean this - you can ajax the object from your server:
const items = [
{ image: "nike1.jpg", title:"Nike Air Max Jordan 1",price:150, creator:"Martingrgv"},
{ image: "nike2.jpg", title:"Nike Air Max Jordan 2",price:160, creator:"Martingrgv"}
]
document.getElementById("container").innerHTML = items.map(item =>
`<div >
<div ><img src="${item.image}" /></div>
<div >
<p>${item.title}</p>
</div>
<div >
<p>${item.creator}</p>
</div>
<div >$${item.price}</div>
</div>`)
.join("");
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
html {
background-color: #E7E7E7;
font-family: system-ui;
color: #000;
}
#container {
display: grid;
grid-template-columns: 20rem 1fr;
margin: 2.6rem;
}
.box {
border-radius: 3%;
background-color: #fff;
box-shadow: 10px 10px 20px#bababa;
width: 15rem;
height: 17.5rem;
}
.image {
position: relative;
top: 10px;
background-color: #fff;
padding: 100px;
margin: 0 10px;
}
.title {
margin: 20px 20px 0 20px;
}
.creator {
color: #525252;
font-size: 9.5pt;
margin: 0 20px 20px 20px;
}
<div id="container"></div>