API tools faq
paste
Advertisement
feather--weather

testing

feather--weather
Oct 27th, 2018
140
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 11.35 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2.  a calendar code for use on birthdays, holidays, et cetera.
  3.  does NOT include years (better for anniversaries/things that fall on the same day every year, rather than roving dates such as thanksgiving)
  4.  i s2g i still cannot write this word correctly
  5.  this is a long af code namely because it covers 366 days. tab names are listed as MMM_DD for my fucking sanity
  6.  
  7.  might make a CSS one that will be... well... pretty but i'm doing this so anyone can use.
  8. -->
  9.  
  10. <div class="container-fluid">
  11.   <!-- calendar title if you so choose. -->
  12.   <div class="row">
  13.     <h1 class="card-header mb-2" align="center" style="font-variant:small-caps">Calendar Name</h1>
  14.   </div>
  15.   <!-- the actual calendar
  16.    DO NOT TOUCH PLEASE
  17.  -->
  18.   <div class="row" align="center">
  19.     <div class="col-md-7 mb-5">
  20.       <ul class="nav nav-pills justify-content-center row text-center">
  21.         <li class="nav-item"><a class="nav-link p-2 active" data-toggle="tab" href="#mon_00"target="_top" style="font-variant:small-caps">Instructions</a></li>
  22.         <p></p>
  23.       <div id="carouselMonths" class="carousel slide" data-interval="false">
  24.         <!--      the "carousel-indicators" allow you to skip to certain months. it is OPTIONAL       -->
  25.         <ol class="carousel-indicators">
  26.           <li data-slide-to="0" data-target="#carouselMonths" class="active" title="January" class="pl-1 tooltipster"></li>
  27.           <li data-slide-to="1" data-target="#carouselMonths" title="February" class="pl-1 tooltipster"></li>
  28.           <li data-slide-to="2" data-target="#carouselMonths" title="March" class="pl-1 tooltipster"></li>
  29.           <li data-slide-to="3" data-target="#carouselMonths" title="April" class="pl-1 tooltipster"></li>
  30.           <li data-slide-to="4" data-target="#carouselMonths" title="May" class="pl-1 tooltipster"></li>
  31.           <li data-slide-to="5" data-target="#carouselMonths" title="June" class="pl-1 tooltipster"></li>
  32.           <li data-slide-to="6" data-target="#carouselMonths" title="July" class="pl-1 tooltipster"></li>
  33.           <li data-slide-to="7" data-target="#carouselMonths" title="August" class="pl-1 tooltipster"></li>
  34.           <li data-slide-to="8" data-target="#carouselMonths" title="September" class="pl-1 tooltipster"></li>
  35.           <li data-slide-to="9" data-target="#carouselMonths" title="October" class="pl-1 tooltipster"></li>
  36.           <li data-slide-to="10" data-target="#carouselMonths" title="November" class="pl-1 tooltipster"></li>
  37.           <li data-slide-to="11" data-target="#carouselMonths" title="December" class="pl-1 tooltipster"></li>
  38.         </ol>
  39.         <!-- each month -->
  40.         <div class="carousel-inner">
  41.           <!-- begin month -->
  42.           <div class="carousel-item active">
  43.             <!-- MONTH NAME -->
  44.             <div class="ui-accordion card card-outline-primary bg-faded w-100" style="width: 45em;margin:0 auto;">
  45.               <h2 class="card-inverse card-primary card-header bg-primary">January</h2>
  46.               <div class="ui-accordion-content card-block " style="height:400px;">
  47.                 <!-- DAYS -->
  48.                 <table class="table table-sm table-boredered table-striped">
  49.                   <tr><td><li class="nav-item"><a class="nav-link p-2" data-toggle="tab" href="#jan_01"target="_top">1</a></li></td><td><li class="nav-item"><a class="nav-link p-2" data-toggle="tab" href="#jan_02"target="_top">2</a></li></td><td><li class="nav-item"><a class="nav-link p-2" data-toggle="tab" href="#jan_03"target="_top">3</a></li></td><td><li class="nav-item"><a class="nav-link p-2" data-toggle="tab" href="#jan_04"target="_top">4</a></li></td><td><li class="nav-item"><a class="nav-link p-2" data-toggle="tab" href="#jan_05"target="_top">5</a></li></td><td><li class="nav-item"><a class="nav-link p-2" data-toggle="tab" href="#jan_06"target="_top">6</a></li></td><td><li class="nav-item"><a class="nav-link p-2" data-toggle="tab" href="#jan_07" target="_top">7</a></li></td></tr> <!-- week one -->
  50.                   <tr><td><li class="nav-item"><a class="nav-link p-2" data-toggle="tab" href="#jan_08"target="_top">8</a></li></td><td><li class="nav-item"><a class="nav-link p-2" data-toggle="tab" href="#jan_09"target="_top">9</a></li></td><td><li class="nav-item"><a class="nav-link p-2" data-toggle="tab" href="#jan_10"target="_top">10</a></li></td><td><li class="nav-item"><a class="nav-link p-2" data-toggle="tab" href="#jan_11"target="_top">11</a></li></td><td><li class="nav-item"><a class="nav-link p-2" data-toggle="tab" href="#jan_12"target="_top">12</a></li></td><td><li class="nav-item"><a class="nav-link p-2" data-toggle="tab" href="#jan_13"target="_top">13</a></li></td><td><li class="nav-item"><a class="nav-link p-2" data-toggle="tab" href="#jan_14"target="_top">14</a></li></td></tr> <!-- week two -->
  51.                   <tr><td><li class="nav-item"><a class="nav-link p-2" data-toggle="tab" href="#jan_15"target="_top">15</a></li></td><td><li class="nav-item"><a class="nav-link p-2" data-toggle="tab" href="#jan_16"target="_top">16</a></li></td><td><li class="nav-item"><a class="nav-link p-2" data-toggle="tab" href="#jan_17"target="_top">17</a></li></td><td><li class="nav-item"><a class="nav-link p-2" data-toggle="tab" href="#jan_18"target="_top">18</a></li></td><td><li class="nav-item"><a class="nav-link p-2" data-toggle="tab" href="#jan_19"target="_top">19</a></li></td><td><li class="nav-item"><a class="nav-link p-2" data-toggle="tab" href="#jan_20"target="_top">20</a></li></td><td><li class="nav-item"><a class="nav-link p-2" data-toggle="tab" href="#jan_21" target="_top">21</a></li></td></tr> <!-- week three -->
  52.                   <tr><td><li class="nav-item"><a class="nav-link p-2" data-toggle="tab" href="#jan_22"target="_top">22</a></li></td><td><li class="nav-item"><a class="nav-link p-2" data-toggle="tab" href="#jan_23"target="_top">23</a></li></td><td><li class="nav-item"><a class="nav-link p-2" data-toggle="tab" href="#jan_24"target="_top">24</a></li></td><td><li class="nav-item"><a class="nav-link p-2" data-toggle="tab" href="#jan_25"target="_top">25</a></li></td><td><li class="nav-item"><a class="nav-link p-2" data-toggle="tab" href="#jan_26"target="_top">26</a></li></td><td><li class="nav-item"><a class="nav-link p-2" data-toggle="tab" href="#jan_27"target="_top">27</a></li></td><td><li class="nav-item"><a class="nav-link p-2" data-toggle="tab" href="#jan_28"target="_top">28</a></li></td></tr> <!-- week four -->
  53.                   <tr><td><li class="nav-item"><a class="nav-link p-2" data-toggle="tab" href="#jan_29"target="_top">29</a></li></td><td><li class="nav-item"><a class="nav-link p-2" data-toggle="tab" href="#jan_30"target="_top">30</a></li></td><td><li class="nav-item"><a class="nav-link p-2" data-toggle="tab" href="#jan_31"target="_top">31</a></li></td><td></td><td></td><td></td><td></td></tr> <!-- week five -->
  54.                 </table>
  55.               </div>
  56.             </div>
  57.           </div>
  58.           <!-- end month -->
  59.       </div> <!-- end inside of carousel -->
  60.       <a class="carousel-control-prev" href="#carouselMain" data-slide="prev"><span class="carousel-control-prev-icon"></span> <span class="sr-only">Previous</span></a> <a class="carousel-control-next" href="#carouselMain" data-slide="next"><span class="carousel-control-next-icon"></span> <span class="sr-only">Next</span></a>
  61.     </div>
  62.     </ul>
  63.     <!-- end carousel -->
  64.   </div>
  65.     <!-- the tabs. each tab contains a card with a date and space for you to place the events on that date -->
  66.     <div class="col-md-4 mb-5 align-self-center">
  67.       <div class="tab-content">
  68.         <div class="tab-pane fade show active" id="mon_00">
  69.           <div class="ui-accordion card card-outline-primary bg-faded w-75" style="width: 45em;margin:0 auto;">
  70.             <h2 class="card-inverse card-primary card-header bg-primary" style="font-variant:small-caps;">Hey!</h2>
  71.             <div class="ui-accordion-content card-block" style="height:100px;">hello, please choose a date on the calendar</div>
  72.         </div>
  73.       </div>
  74.       <div class="tab-pane fade" id="jan_01">
  75.         <div class="ui-accordion card card-outline-primary bg-faded w-75" style="width: 45em;margin:0 auto;">
  76.           <h2 class="card-inverse card-primary card-header bg-primary" style="font-variant:small-caps;">January 01!</h2>
  77.           <div class="ui-accordion-content card-block" style="height:100px;">New Year's Day<br>testing<br>testing</div>
  78.         </div>
  79.       </div>
  80.       <div class="tab-pane fade" id="jan_02">
  81.         <div class="ui-accordion card card-outline-primary bg-faded w-75" style="width: 45em;margin:0 auto;">
  82.           <h2 class="card-inverse card-primary card-header bg-primary" style="font-variant:small-caps;">January 02!</h2>
  83.           <div class="ui-accordion-content card-block" style="height:100px;">the second day of the year</div>
  84.         </div>
  85.       </div>
  86.       <div class="tab-pane fade" id="jan_03">
  87.         <div class="ui-accordion card card-outline-primary bg-faded w-75" style="width: 45em;margin:0 auto;">
  88.           <h2 class="card-inverse card-primary card-header bg-primary" style="font-variant:small-caps;">January 03!</h2>
  89.           <div class="ui-accordion-content card-block" style="height:100px;">New Year's Day<br>testing<br>testing</div>
  90.         </div>
  91.       </div>
  92.       <div class="tab-pane fade" id="jan_04">
  93.         <div class="ui-accordion card card-outline-primary bg-faded w-75" style="width: 45em;margin:0 auto;">
  94.           <h2 class="card-inverse card-primary card-header bg-primary" style="font-variant:small-caps;">January 04!</h2>
  95.           <div class="ui-accordion-content card-block" style="height:100px;">the second day of the year</div>
  96.         </div>
  97.       </div>
  98.       <div class="tab-pane fade" id="jan_06">
  99.         <div class="ui-accordion card card-outline-primary bg-faded w-75" style="width: 45em;margin:0 auto;">
  100.           <h2 class="card-inverse card-primary card-header bg-primary" style="font-variant:small-caps;">January 05!</h2>
  101.           <div class="ui-accordion-content card-block" style="height:100px;">New Year's Day<br>testing<br>testing</div>
  102.         </div>
  103.       </div>
  104.       <div class="tab-pane fade" id="jan_06">
  105.         <div class="ui-accordion card card-outline-primary bg-faded w-75" style="width: 45em;margin:0 auto;">
  106.           <h2 class="card-inverse card-primary card-header bg-primary" style="font-variant:small-caps;">January 06!</h2>
  107.           <div class="ui-accordion-content card-block" style="height:100px;">the second day of the year</div>
  108.         </div>
  109.       </div>
  110.       <div class="tab-pane fade" id="jan_07">
  111.         <div class="ui-accordion card card-outline-primary bg-faded w-75" style="width: 45em;margin:0 auto;">
  112.           <h2 class="card-inverse card-primary card-header bg-primary" style="font-variant:small-caps;">January 07!</h2>
  113.           <div class="ui-accordion-content card-block" style="height:100px;">New Year's Day<br>testing<br>testing</div>
  114.         </div>
  115.       </div>
  116.       <div class="tab-pane fade" id="jan_08">
  117.         <div class="ui-accordion card card-outline-primary bg-faded w-75" style="width: 45em;margin:0 auto;">
  118.           <h2 class="card-inverse card-primary card-header bg-primary" style="font-variant:small-caps;">January 08!</h2>
  119.           <div class="ui-accordion-content card-block" style="height:100px;">the second day of the year</div>
  120.         </div>
  121.       </div>
  122.  
  123.     </div> <!-- end tabs -->
  124.   </div> <!-- end tabs col -->
  125.  
  126.   </div> <!-- end row -->
  127. </div>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!