Widget
Glossary
(Created page with "<div style="display: flex; width: 1200px; height: auto; padding-left: 5em;"> <div style="width: 172px; min-height: 40px; display: flex; align-items: center; justify-content: center; text-align: center; color: black; font-size: 20px; font-family: Outfit, sans-serif; font-weight: 500; word-wrap: break-word; background: #E3E8EE;"> <!--{$heading|default:'Default Heading'}--> </div> <div style="width: 20px; flex-grow: 0; flex-shrink: 0;"> <!-- Hid...") |
No edit summary Tag: 2017 source edit |
||
(25 intermediate revisions by the same user not shown) | |||
Line 1: | Line 1: | ||
< | <style> | ||
.glossary-item { | |||
flex: 0 0 30%; | |||
padding: 10px; | |||
padding-bottom: 40px; | |||
background-color: #F3F6F9; | |||
min-height: 200px; | |||
max-width: 30%; | |||
position: relative; | |||
} | |||
</div> | |||
.glossary-title { | |||
font-size: 18px; | |||
color: #333; | |||
margin-bottom: 5px; | |||
} | |||
.glossary-content { | |||
font-size: 14px; | |||
color: #666; | |||
margin-bottom: 30px; | |||
overflow: hidden; | |||
} | |||
.read-more { | |||
position: absolute; | |||
bottom: 10px; | |||
right: 10px; | |||
font-size: 14px; | |||
color: #0066cc; | |||
text-decoration: none; | |||
} | |||
.read-more:hover { | |||
text-decoration: underline; | |||
} | |||
@media (max-width: 768px) { | |||
.glossary-item { | |||
flex: 0 0 100%; | |||
padding-bottom: 40px; | |||
max-width: 100%; | |||
} | |||
} | |||
</style> | |||
<div class="glossary-item"> | |||
<div class="glossary-title"><!--{$heading|default:'Default Heading'}--></div> | |||
<div class="glossary-content"> <!--{$description|default:'Default Description'}--></div> | |||
<a href="<!--{$link|default:'https://wiki.mdriven.net'}-->" class="read-more">Read more ></a> | |||
</div> |
Revision as of 12:26, 3 May 2024
<style>
.glossary-item { flex: 0 0 30%; padding: 10px; padding-bottom: 40px; background-color: #F3F6F9; min-height: 200px; max-width: 30%; position: relative;
}
.glossary-title {
font-size: 18px; color: #333; margin-bottom: 5px;
}
.glossary-content {
font-size: 14px; color: #666; margin-bottom: 30px; overflow: hidden;
}
.read-more {
position: absolute; bottom: 10px; right: 10px; font-size: 14px; color: #0066cc; text-decoration: none;
}
.read-more:hover {
text-decoration: underline;
}
@media (max-width: 768px) {
.glossary-item { flex: 0 0 100%; padding-bottom: 40px; max-width: 100%; }
} </style>
<a href="" class="read-more">Read more ></a>
This page was edited 4 days ago on 05/16/2024. What links here
Retrieved from "https://wiki.mdriven.net/index.php?title=Widget:Glossary&oldid=18302"