I am trying to create Reactjs cards, but I'm having trouble with the border-color styling. My goal is to make cards that look like this- Cards similar to this design
As someone who is new to frontend and react, I could really use some assistance.
Check out the overall page cards image here ->
My page's card section and cards
Here are my codes-
The parent Component card container section->
<div className='Cardsection'>
<button className="left-btn" onClick={leftbtn}><h1><</h1></button>
<button className="right-btn" onClick={rightbtn}><h1>></h1></button>
<div className="cards-container">
<Mycard name="Project" Projectimg={Project}/>
<Mycard name="Project" Projectimg={Project}/>
<Mycard name="Project" Projectimg={Project}/>
<Mycard name="Project" Projectimg={Project}/>
<Mycard cardno='5'/>
<Mycard cardno='6'/>
<Mycard cardno='7'/>
<Mycard cardno='8'/>
<Mycard cardno='9'/>
<Mycard cardno='10'/>
</div>
</div>
cards cotainer css->
.Cardsection{
position: relative;
display: flex;
align-items: center;
justify-content: center;
height: 50vh;
margin-top: 40rem;
overflow: hidden;
}
.cards-container{
display: flex;
align-items: center;
overflow-x: hidden;
overflow-y: hidden;
scroll-behavior: smooth;
margin-left: 60px;
margin-right: 60px;
}
.left-btn, .right-btn{
width: 60px;
position: absolute;
border: none;
background-color: rgba(255, 255, 255, 0);
}
.left-btn{
right: 0;
}
.right-btn{
left: 0;
}
.left-btn>h1, .right-btn>h1{
font-size: 50px;
font-weight: bold;
background-color: rgba(0, 0, 0, 0.436);
border-radius: 50px;
color: white;
width: 50px;
height: 100px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
child component code->
<div className='cards-shown'>
<img src={props.Projectimg} alt="#" />
<p>{props.name}</p>
</div>
cards styling->
.cards-shown{
min-width: 250px;
height: 300px;
margin-right: 70px;
background-color: black;
border-color:red;
border-width: 10px;
gap: 20px;
}
.cards-shown>:nth-child(1){
justify-content: center;
align-items: center;
transform: scale(1);
width: 70%;
}
.cards-shown>:nth-child(2){
color: white;
font-family: 'Lucida Sans';
font-size: 20px;
top: 0%;
padding: 0%;
}
I have attempted to style the border color without success. I hope to achieve transparent background for the cards with only the border color visible, creating a true card-like appearance where I can easily add content or images using props.