Difference between revisions of "Widget:Homepage"
From LINKS Community Center
(11 intermediate revisions by the same user not shown) | |||
Line 153: | Line 153: | ||
display: block; | display: block; | ||
text-decoration: none !important; | text-decoration: none !important; | ||
+ | color: transparent; | ||
+ | background-color: transparent; | ||
+ | perspective: 1000px; | ||
+ | height: 7em; | ||
} | } | ||
.snippet .snippet-inner { | .snippet .snippet-inner { | ||
+ | position: relative; | ||
+ | width: 100%; | ||
height: 100%; | height: 100%; | ||
+ | transition: transform 500ms; | ||
+ | transform-style: preserve-3d; | ||
+ | } | ||
+ | .snippet:hover .snippet-inner { | ||
+ | transform: rotateY(180deg); | ||
+ | } | ||
+ | .snippet-header, .snippet-body { | ||
+ | position: absolute; | ||
+ | width: 100%; | ||
+ | height: 100%; | ||
+ | padding: 1em; | ||
+ | border: 2px solid; | ||
+ | border-radius: 5px; | ||
display: flex; | display: flex; | ||
− | |||
align-items: center; | align-items: center; | ||
− | + | justify-content: center; | |
− | + | text-align: center; | |
+ | -webkit-backface-visibility: hidden; /* Safari */ | ||
+ | backface-visibility: hidden; | ||
} | } | ||
.snippet-header { | .snippet-header { | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
color: #fff; | color: #fff; | ||
} | } | ||
.snippet-body { | .snippet-body { | ||
− | + | transform: rotateY(180deg); | |
− | |||
− | |||
− | |||
} | } | ||
− | .snippet.TL { color: var(--links-blue); } | + | .snippet.TL .snippet-body { color: var(--links-blue); } |
− | .snippet.GL { color: var(--links-orange); } | + | .snippet.GL .snippet-body { color: var(--links-orange); } |
− | .snippet.UCL { color: var(--links-cyan); } | + | .snippet.UCL .snippet-body { color: var(--links-cyan); } |
− | .snippet.ICH { color: var(--handbook-color); } | + | .snippet.ICH .snippet-body { color: var(--handbook-color); } |
− | .snippet.FS { color: var(--safe-color); } | + | .snippet.FS .snippet-body { color: var(--safe-color); } |
− | .snippet.RW { color: var(--links-grey); } | + | .snippet.RW .snippet-body { color: var(--links-grey); } |
.snippet.TL .snippet-header { | .snippet.TL .snippet-header { | ||
Line 219: | Line 230: | ||
border-color: var(--safe-color); | border-color: var(--safe-color); | ||
} | } | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
</style> | </style> | ||
Line 239: | Line 242: | ||
<div id="hp-wrapper"> | <div id="hp-wrapper"> | ||
<div id="hp-heading"> | <div id="hp-heading"> | ||
− | <h1> | + | <h1 translate="no"> |
<span>LINKS</span> | <span>LINKS</span> | ||
<span>Community</span> | <span>Community</span> | ||
Line 404: | Line 407: | ||
</div> | </div> | ||
</div> | </div> | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
<div id="hp-recent" class="container-fluid"> | <div id="hp-recent" class="container-fluid"> | ||
Line 445: | Line 433: | ||
"product": "TL", | "product": "TL", | ||
}, | }, | ||
− | + | { | |
− | + | "title": "Do you want to be prepared when disaster strikes?", | |
− | + | "body": "Learn from many use cases about social media and crowdsourcing.", | |
− | + | "action": "/index.php/List_of_Use_Cases", | |
− | + | "product": "UCL", | |
− | + | }, | |
{ | { | ||
"title": "How to protect children during disaster?", | "title": "How to protect children during disaster?", | ||
Line 477: | Line 465: | ||
{ | { | ||
"title": "Do you struggle with managing volunteers in disasters?", | "title": "Do you struggle with managing volunteers in disasters?", | ||
− | "body": " | + | "body": "Take part in the course on mobilizing volunteers.", |
− | "action": "/index.php/ | + | "action": "/index.php/Including_Citizens_Handbook#mobilizing_volunteers", |
− | "product": " | + | "product": "ICH", |
}, | }, | ||
]; | ]; |
Latest revision as of 14:36, 10 January 2024
Second version of the LINKS Community Center homepage.
Do not modify!