Glossary
No edit summary
No edit summary
Tag: 2017 source edit
(24 intermediate revisions by the same user not shown)
Line 1: Line 1:
<div style="display: flex; width: 1200px; height: auto; padding-left: 5em; margin-bottom:20px;">
<style>
     <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;">
  .glossary-item {
        <!--{$heading|default:'Default Heading'}-->
    flex: 0 0 30%;
    </div>
    padding: 10px;
    <div style="width: 20px; flex-grow: 0; flex-shrink: 0;">  
    padding-bottom: 40px;
        <!-- Hidden spacer -->
    background-color: #F3F6F9;
    </div>
    min-height: 200px;
    <div style="flex-grow: 1; display: flex; align-items: center; padding-left: 5em; color: black; font-size: 20px; font-family: Outfit, sans-serif; font-weight: 500; word-wrap: break-word; background: #E3E8EE;">
     max-width: 30%;
        <!--{$description|default:'Default Description'}-->
    position: relative;
    </div>
}
</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