.feature-container {
display: flex;
justify-content: space-between;
padding: 20px;
flex-wrap: wrap; /* Ensure items can wrap to the next line */
}
.feature-item {
text-align: center;
width: 18%;
margin-bottom: 20px; /* Add some space between rows when wrapping */
}
.feature-item h2 {
font-size: 1em;
margin: 0;
color: #000;
text-align:left;
font-weight:600;
}
.feature-item h3 {
margin: 10px 0;
font-size: 1.5em;
color: #000;
text-align:left;
font-weight:600;
}
.feature-item p {
text-align:left;
font-size: 0.9em;
color: #222;
font-weight: 600;
}
.feature-underline {
height: 2px;
width: 100%;
background: linear-gradient(45deg,
rgba(200, 255, 200, 1) 0%,
rgba(173, 255, 47, 0.8) 25%,
rgba(144, 238, 144, 0.8) 50%,
rgba(34, 139, 34, 0.8) 75%,
rgba(0, 255, 127, 1) 100%);
margin: 10px auto;
}
@media (max-width: 900px) {
.feature-item {
width: 100%; /* Make each feature item take full width */
}
}
01
Tracking
Lorem Ipsum dolor sit amet consectetur adipisci elot set do eliusmod tempor.
02
Analytics
Lorem Ipsum dolor sit amet consectetur adipisci elot set do eliusmod tempor.
03
Warehousing
Lorem Ipsum dolor sit amet consectetur adipisci elot set do eliusmod tempor.
04
Managing
Lorem Ipsum dolor sit amet consectetur adipisci elot set do eliusmod tempor.
05
Training
Lorem Ipsum dolor sit amet consectetur adipisci elot set do eliusmod tempor.
Call to Action
.cta-section {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: #f2f2f2;
padding: 40px;
text-align: center;
margin: 0px 50px 0px 50px;
}
.cta-text {
font-size: 1.2em;
font-style: italic;
color: #333;
margin-bottom: 20px;
}
.cta-button {
padding: 10px 20px;
border: 2px solid #000;
background-color: #f2f2f2;
color: #000;
text-decoration: none;
font-size: 1em;
cursor: pointer;
transition: background-color 0.3s, color 0.3s;
}
.cta-button:hover {
background-color: #000;
color: #f2f2f2;
}
Discover cloud solutions that help you to take your industry by storm.
Get in Touch
Cards Layout
.cards-container {
display: flex;
justify-content: space-around;
align-items: flex-start;
gap: 20px;
flex-wrap: wrap;
margin:40px 12% 0px 12%;
}
.card {
background-color: #fff;
border: 1px solid #ddd;
border-radius: 0px;
padding: 20px;
width: 30%;
box-sizing: border-box;
text-align: center;
}
.card h2 {
font-size: 1.5em;
margin-bottom: 20px;
color: #333;
}
.card p {
font-size: 1em;
color: #666;
line-height: 1.5;
margin-bottom: 20px;
}
.card a {
display: inline-block;
padding: 10px 20px;
border-radius: 4px;
color: #222;
text-decoration: none;
font-weight: bold;
transition: background-color 0.3s, color 0.3s;
position: relative;
z-index: 1;
}
.linkholder {
max-width:165px;
margin:auto;
}
.square {
background-color: #e0f7da;
width: 40px;
height: 40px;
position: relative;
top: -39px;
left: 11px;
z-index: -0;
}
.square:hover {
background-color: #c8e6c9;
}
@media (max-width: 900px) {
.card {
width: 100%; /* Make cards full width on smaller screens */
margin-bottom: 20px;
}
}
Web Platforms
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
Web Platforms
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
Web Platforms
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
Cards Layout
.images-container {
display: flex;
justify-content: center;
flex-wrap: wrap;
margin:40px 0px 0px 0px;
width: 110%;
}
.image {
padding: 20px;
box-sizing: border-box;
text-align: center;
}
.image img {
height:90px;
width:164px;
}
.image a {
display: inline-block;
padding: 10px 20px;
transition: background-color 0.3s, color 0.3s;
}
@media (max-width: 900px) {
.image {
width: 100%; /* Make cards full width on smaller screens */
margin-bottom: 20px;
}
}
D° 