mirror of
https://github.com/hanzoai/jube-fork.git
synced 2026-11-02 14:29:36 +00:00
111 lines
4.1 KiB
HTML
Executable File
111 lines
4.1 KiB
HTML
Executable File
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Orientation</title>
|
|
<meta charset="utf-8">
|
|
<link href="../content/shared/styles/examples-offline.css" rel="stylesheet">
|
|
<link href="../../styles/kendo.common.min.css" rel="stylesheet">
|
|
<link href="../../styles/kendo.rtl.min.css" rel="stylesheet">
|
|
<link href="../../styles/kendo.default.min.css" rel="stylesheet">
|
|
<link href="../../styles/kendo.default.mobile.min.css" rel="stylesheet">
|
|
<script src="../../js/jquery.min.js"></script>
|
|
<script src="../../js/jszip.min.js"></script>
|
|
<script src="../../js/kendo.all.min.js"></script>
|
|
<script src="../content/shared/js/console.js"></script>
|
|
<script>
|
|
|
|
</script>
|
|
|
|
|
|
</head>
|
|
<body>
|
|
|
|
<a class="offline-button" href="../index.html">Back</a>
|
|
|
|
<div id="example">
|
|
<div class="cards-container">
|
|
<div class="k-card k-card-horizontal">
|
|
<img class="k-card-image" src="../content/web/cards/shells.jpg">
|
|
<div class="k-vbox k-column">
|
|
<div class="k-card-body">
|
|
<h5 class="k-card-title">The Ultimate Beach Guide</h5>
|
|
<h6 class="k-card-subtitle">Life is indeed better at the beach</h6>
|
|
<p>The ultimate guide for all of you beach lovers. Planning your 2020 vacation or just longing to tuck your toes in the sand, feel the sea breeze and gather as much vitamin D as possible? Just continue reading to find out our favorite beach spots for 2020.</p>
|
|
</div>
|
|
<div class="k-card-actions k-card-actions-vertical k-card-actions-stretched">
|
|
<span class="k-card-action">
|
|
<span class="k-button k-flat k-primary">Read more</span>
|
|
</span>
|
|
<span class="k-card-action">
|
|
<span class="k-button k-flat k-primary">Save for later</span>
|
|
</span>
|
|
</div>
|
|
<div class="k-card-footer">
|
|
<span class="footer-item"><span class="k-icon k-i-heart-outline"></span>58</span>
|
|
<span class="footer-item"><span class="k-icon k-i-comment"></span>7</span>
|
|
<span class="footer-item"><span class="k-icon k-i-clock"></span>15 m</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="k-card k-card-vertical">
|
|
<img class="k-card-image" src="../content/web/cards/tulips.jpg" />
|
|
<div class="k-card-body">
|
|
<h5 class="k-card-title">Tulip Time</h5>
|
|
<p>The tulip season is just around the corner. If you still haven't decided on your spring destination, we have a suggestion- Holland, a.k.a the "flower shop of the world"!</p>
|
|
</div>
|
|
<div class="k-card-actions k-card-actions-stretched">
|
|
<span class="k-card-action">
|
|
<span class="k-button k-flat k-primary">Read more</span>
|
|
</span>
|
|
<span class="k-card-action">
|
|
<span class="k-button k-flat k-primary">Save for later</span>
|
|
</span>
|
|
</div>
|
|
<div class="k-card-footer">
|
|
<span class="footer-item"><span class="k-icon k-i-heart-outline"></span>32</span>
|
|
<span class="footer-item"><span class="k-icon k-i-comment"></span>2</span>
|
|
<span class="footer-item"><span class="k-icon k-i-clock"></span>10 m</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
.cards-container {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
}
|
|
|
|
.k-card {
|
|
width: 285px;
|
|
margin: 5%;
|
|
}
|
|
|
|
.k-card-footer {
|
|
display: flex;
|
|
}
|
|
|
|
.footer-item {
|
|
opacity: 0.7;
|
|
font-size: 11px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
margin-right: 7px;
|
|
}
|
|
|
|
.footer-item .k-icon {
|
|
margin-right: 2px;
|
|
}
|
|
|
|
.footer-item:last-child {
|
|
margin: 0 0 0 auto;
|
|
}
|
|
</style>
|
|
</div>
|
|
|
|
|
|
</body>
|
|
</html>
|