You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
23 lines
2.0 KiB
PHTML
23 lines
2.0 KiB
PHTML
<style type="text/css" >.zodiac-box{ background: #f2f2f2; border-radius: 6px; padding: 40px 40px 5px; margin-top: 80px; margin-bottom: 50px;}.flex-col-2x,.flex-col-1x{margin-right: 20px; display: flex; flex-flow: column; position: relative; margin-bottom: 30px;}.flex-col-2x{width: calc((100% - 20px * 3) / 1.6); }.flex-col-1x{width: calc((100% - 20px * 3) / 2.5); margin-right: 0;}.zodiac-box .form-control { border: solid 2px #df6536;}.btn-zodiacsearch { border-radius: 6px; padding-top:0.98rem; padding-bottom:0.98rem; text-align: center;}.zodiac-search { border-top: solid 1px #ccc; padding-top: 30px; }@media (max-width: 768px) { .flex-col-2x,.flex-col-1x { width: 100%; margin-bottom:20px; margin-right: 0; }.flex-col-1x {margin-bottom: 30px;}}</style>
|
|
<div class="zodiac-box" id="zodiac-box">
|
|
<div class="flex-row">
|
|
<div class="flex-col-2x"><input class="form-control calendar3 hasDatepicker" id="birth_Date" name="birth_Date" placeholder="Date of Birth" readonly="readonly" type="text" value="" /></div>
|
|
|
|
<div class="flex-col-1x"><a aria-label="Find Your Zodiac Sign" class="btn btn-orange btn-zodiacsearch" href="javascript:;" id="search_submit" name="search_submit">Find Your Zodiac Sign</a></div>
|
|
</div>
|
|
|
|
<div class="zodiac-search" style="display: none;" id="zodiac-search">
|
|
<p class="font24">Your Chinese zodiac sign is the <strong class="orange" id="sign1">Ox</strong>.</p>
|
|
|
|
<p>People born in the Year of the <sapn id="sign2">Ox</sapn> are <strong id="character">honest, patient, and reliable</strong>.</p>
|
|
|
|
<ul class="common">
|
|
<li><strong>Five Elements:</strong> <span id="WuXing">Earth</span></li>
|
|
<li><strong>Lucky Numbers:</strong> <span id="Luky-Numbers">1, 4, 9</span></li>
|
|
<li><strong>Lucky Colors:</strong> <span id="Luky-Colors">green, white</span></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<link href="https://data.chinatravel.com/css/newcss3/flatpickr.css" rel="stylesheet" type="text/css" />
|
|
<script src="https://data.chinatravel.com/js/mobile-first/zepto.min.js"></script>
|
|
<script src="https://data.chinatravel.com/js/mobile-first/zodiac/zodiac-calc.js"></script> |