Widget
TrainingSteps
No edit summary |
No edit summary Tag: 2017 source edit |
||
| (26 intermediate revisions by one other user not shown) | |||
| Line 1: | Line 1: | ||
<div style="flex: 1 | <style> | ||
@media screen and (max-width: 600px) { | |||
.mobile-heading { | |||
font-size: 16px !important; | |||
} | |||
.mobile-description { | |||
font-size: 12px !important; | |||
} | |||
.responsive-img { | |||
width: 100% !important; | |||
height: auto !important; | |||
} | |||
.mobile-container { | |||
flex: 1 1 20% !important; | |||
} | |||
} | |||
.mobile-container { | |||
animation: all 300ms ease-in-out; | |||
} | |||
.mobile-container:hover { | |||
transform: translateY(-5px); | |||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); | |||
} | |||
</style> | |||
<div class="mobile-container" style="flex: 0 1 20%; background: #112B3C; padding: 10px; margin: 5px; border-radius: 6px; box-sizing: border-box;"> | |||
<a href="<!--{$linkUrl|default:'#'}-->" style="text-decoration: none; color: inherit;"> | |||
<!-- Top section with image and heading --> | <!-- Top section with image and heading --> | ||
<div style="display: flex; align-items: center; justify-content: space-between;"> | <div style="display: flex; align-items: center; justify-content: space-between;"> | ||
<!-- Image on the left --> | <!-- Image on the left --> | ||
<img src="<!--{$imageUrl|default:''}-->" alt="Image" style="width: 50px; height: 50px; object-fit: cover;"> | <img class="responsive-img" src="<!--{$imageUrl|default:'/images/1000steps.svg'}-->" alt="Image" style="width: 50px; height: 50px; object-fit: cover;"> | ||
<!-- Heading on the right --> | <!-- Heading on the right --> | ||
<div style="flex-grow: 1; padding-left: 10px;"> | <div style="flex-grow: 1; padding-left: 10px;"> | ||
<div style="color: # | <div class="mobile-heading" style="color: #FFFFFF; font-size: 20px; font-weight: 700;"> | ||
<!--{$heading|default:'Default Heading'}--> | <!--{$heading|default:'Default Heading'}--> | ||
</div> | </div> | ||
| Line 14: | Line 42: | ||
<!-- Description below --> | <!-- Description below --> | ||
<div style="color: # | <div class="mobile-description" style="color: #FFFFFF; font-size: 14px; margin-top: 5px;"> | ||
<!--{$description|default:'Default Description'}--> | <!--{$description|default:'Default Description'}--> | ||
</div> | </div> | ||
</a> | |||
</div> | </div> | ||
Latest revision as of 14:05, 1 April 2024
<style> @media screen and (max-width: 600px) {
.mobile-heading {
font-size: 16px !important;
}
.mobile-description {
font-size: 12px !important;
}
.responsive-img {
width: 100% !important;
height: auto !important;
}
.mobile-container {
flex: 1 1 20% !important;
}
}
.mobile-container {
animation: all 300ms ease-in-out;
}
.mobile-container:hover {
transform: translateY(-5px); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
} </style>
<a href="" style="text-decoration: none; color: inherit;">
<img class="responsive-img" src="" alt="Image" style="width: 50px; height: 50px; object-fit: cover;">
</a>
This page was edited more than 9 months ago on 04/01/2024. What links here