Widget
Models
(Created page with "<div class="cards"> <img src="<!--{$imgSrc|default:'/images/default.svg'}-->" alt="Placeholder"> <div class="contentss"> <div class="title"><!--{$title|default:'Default Title'}--></div> <div class="description"><!--{$description|default:'Default description here.'}--></div> <a href="<!--{$downloadLink|default:'#'}-->" class="download-link"> <span>Download .zip</span> </a> </div> </div>") Tag: 2017 source edit |
No edit summary Tag: 2017 source edit |
||
Line 1: | Line 1: | ||
<style> | |||
.cards { | |||
display: flex; | |||
flex-direction: column; | |||
align-items: center; | |||
background-color: #f4f4f4; | |||
border: 1px solid #ddd; | |||
border-radius: 8px; | |||
padding: 20px; | |||
margin: 20px; | |||
box-shadow: 0 2px 4px rgba(0,0,0,0.1); | |||
transition: all 0.3s ease; | |||
} | |||
.cards:hover { | |||
transform: translateY(-5px); | |||
box-shadow: 0 4px 8px rgba(0,0,0,0.2); | |||
} | |||
.cards img { | |||
max-width: 100%; | |||
height: auto; | |||
border-radius: 8px; | |||
} | |||
.contentss { | |||
text-align: center; | |||
} | |||
.title, .description, .download-link { | |||
margin: 10px 0; | |||
} | |||
.download-link { | |||
display: inline-block; | |||
background-color: #007BFF; | |||
color: white; | |||
padding: 10px 15px; | |||
border-radius: 5px; | |||
text-decoration: none; | |||
} | |||
.download-link:hover { | |||
background-color: #0056b3; | |||
} | |||
@media (max-width: 600px) { | |||
.cards { | |||
flex-direction: column; | |||
} | |||
.title, .description { | |||
font-size: 16px; | |||
} | |||
.download-link { | |||
font-size: 12px; | |||
padding: 8px 12px; | |||
} | |||
} | |||
</style> | |||
<div class="cards"> | <div class="cards"> | ||
<img src="<!--{$imgSrc|default:'/images/default.svg'}-->" alt="Placeholder"> | <img src="<!--{$imgSrc|default:'/images/default.svg'}-->" alt="Placeholder"> |
Revision as of 19:22, 1 February 2024
<style>
.cards { display: flex; flex-direction: column; align-items: center; background-color: #f4f4f4; border: 1px solid #ddd; border-radius: 8px; padding: 20px; margin: 20px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); transition: all 0.3s ease; } .cards:hover { transform: translateY(-5px); box-shadow: 0 4px 8px rgba(0,0,0,0.2); } .cards img { max-width: 100%; height: auto; border-radius: 8px; } .contentss { text-align: center; } .title, .description, .download-link { margin: 10px 0; } .download-link { display: inline-block; background-color: #007BFF; color: white; padding: 10px 15px; border-radius: 5px; text-decoration: none; } .download-link:hover { background-color: #0056b3; } @media (max-width: 600px) { .cards { flex-direction: column; } .title, .description { font-size: 16px; } .download-link { font-size: 12px; padding: 8px 12px; } } </style>
<img src="" alt="Placeholder">
<a href="" class="download-link">
Download .zip
</a>
This page was edited more than 9 months ago on 04/02/2024. What links here