Hi Team
How do i create cards, meaning 3 cards within a form. Below i try to use normal CSS stylesheet and cant seem to achieve it well and need help
// App.css
/**
* All the stylesheet for the application
*@author:Gcobani Mkontwana
@date:14/06/2022
*/
* {
box-sizing: border-box;
}
/* Style the body */
body {
font-family: Arial, Roboto, sans-serif;
margin: 0;
}
/* Header/logo Title */
.header {
padding: 80px;
text-align: center;
background: #269faf;
color: white;
}
/* Increase the font size of the heading */
.header h1 {
font-size: 40px;
}
/* Style the top navigation bar */
.navbar {
overflow: hidden;
background-color: #FF6600;
}
/* Style the navigation bar links */
.navbar a {
float: left;
display: block;
color: white;
text-align: center;
padding: 14px 15px;
text-decoration: none;
}
/* Right-aligned link */
.navbar a.right {
float: right;
}
/* Change color on hover */
.navbar a:hover {
background-color: #FF6600;
color: orangered;
}
/* Column container */
.row {
display: -ms-flexbox; /* IE10 */
display: flex;
-ms-flex-wrap: wrap; /* IE10 */
flex-wrap: wrap;
}
/* Create two unequal columns that sits next to each other */
/* Sidebar/left column */
.side {
-ms-flex: 30%; /* IE10 */
flex: 30%;
background-color: #f1f1f1;
padding: 20px;
}
/* Main column */
.main {
-ms-flex: 70%; /* IE10 */
flex: 70%;
background-color: white;
padding: 20px;
}
/* Footer */
.footer {
padding: 20px;
text-align: center;
background: #ddd;
}
/**
Content
*/
.on-time-delivery-g {
color: #FF6600;
font-family: Roboto;
font-size: 14px;
line-height: 16px;
text-align: left;
}
/*
Free shipping
*/
.free-shipping-up {
color: #FF6600;
font-family: Roboto;
font-size: 14px;
line-height: 16px;
text-align: left;
}
/**logo*/
.logo {
width: 46px;
height: 40px;
}
/**
Button stylesheet here.
*/