Difference between revisions of "HQ:2021"

 
(13 intermediate revisions by the same user not shown)
Line 244: Line 244:
 
 
 
 
 +
 +
 +
.igem_column_wrapper table {
 +
    border: 2px solid #99948f;
 +
    border-collapse: collapse;
 +
    font-size: 120%;
 +
    width: 100%;
 +
}
 +
 +
.igem_column_wrapper th {
 +
  background-color: #ddd6d0;
 +
  border: 2px solid #99948f;
 +
  border-collapse: collapse;
 +
    font-size: 16px;
 +
    padding: 10px;
 +
font-weight: bold;
 +
    vertical-align: text-top;
 +
    text-align: left;
 +
}
 +
 +
.igem_column_wrapper td {
 +
    border: 2px solid #99948f;
 +
    border-collapse: collapse;
 +
    padding: 10px;
 +
    vertical-align: text-top;
 +
font-size: 15px;
 +
    color: black;
 +
    text-align: left;
 +
    letter-spacing: 1px;
 +
}
 +
 +
 +
/*styled select dropdowns */
 +
.styled_select{
 +
padding: 10px;
 +
    background-color: #2c3e66;
 +
    border: 2px solid #2c3e66;
 +
    font-weight: bold;
 +
    margin-top: 5px;
 +
    border-radius: 5px;
 +
    cursor: pointer;
 +
    color: #ffffff;
 +
}
 +
 +
.styled_select:hover{
 +
background-color: #abb4ca;
 +
    color: #2c3e66;
 +
}
 
 
 
/*special themes*/
 
/*special themes*/
Line 820: Line 868:
 
<div class="igem_content_wrapper">
 
<div class="igem_content_wrapper">
 
 
−
<img class="full_image" src="https://placehold.it/2000x400">
+
<img class="full_image" src="https://via.placeholder.com/2000X400/ddd6d0/99948f">
 
 
 
 
Line 827: Line 875:
 
 
  
−
+
−
<div class="column full_image">
+
−
+
−
 
+
−
<select class="select-css">
+
−
<option id="UTC_minus_12" value="-700">UTC -12</option>
+
−
<option id="UTC_minus_11" value="-600">UTC -11</option>
+
−
<option id="UTC_minus_10" value="-500">UTC -10</option>
+
−
<option id="UTC_minus_09" value="-400">UTC -09</option>
+
−
</select>
+
−
 
+
−
+
−
<style>
+
−
/* class applies to select element itself, not a wrapper element */
+
−
.select-css {
+
−
display: block;
+
−
    font-size: 14px;
+
−
    cursor: pointer;
+
−
    font-family: Arial;
+
−
    font-weight: bold;
+
−
    color: #ffffff;
+
−
    line-height: 1.3;
+
−
    padding: 10px 20px;
+
−
    min-width: 15%;
+
−
    box-sizing: border-box;
+
−
    margin: 0;
+
−
    border: 3px solid #2C3E66;
+
−
    border-radius: 10px;
+
−
    -moz-appearance: none;
+
−
    -webkit-appearance: none;
+
−
    appearance: none;
+
−
    background-color: #2C3E66;
+
−
    background-image: url(https://static.igem.org/mediawiki/2021/c/cc/Icon_arrow_down_w.svg);
+
−
    background-repeat: no-repeat, repeat;
+
−
    background-position-y: center;
+
−
    background-position-x: right;
+
−
    background-size: 25px;
+
−
}
+
−
+
−
/* Hide arrow icon in IE browsers */
+
−
.select-css::-ms-expand {
+
−
  display: none;
+
−
}
+
−
/* Hover style */
+
−
.select-css:hover {
+
−
  border: 3px solid #2C3E66;
+
−
background-color: #aab3ca;
+
−
}
+
−
/* Focus style */
+
−
.select-css:focus {
+
−
  border-color: #aaa;
+
−
  /* It'd be nice to use -webkit-focus-ring-color here but it doesn't work on box-shadow */
+
−
  box-shadow: 0 0 1px 3px rgba(59, 153, 252, .7);
+
−
  box-shadow: 0 0 0 3px -moz-mac-focusring;
+
−
  color: #222;
+
−
  outline: none;
+
−
}
+
−
 
+
−
/* Set options to normal weight */
+
−
.select-css option {
+
−
  font-weight:normal;
+
−
}
+
−
 
+
−
/* Support for rtl text, explicit support for Arabic and Hebrew */
+
−
*[dir="rtl"] .select-css, :root:lang(ar) .select-css, :root:lang(iw) .select-css {
+
−
  background-position: left .7em top 50%, 0 0;
+
−
  padding: .6em .8em .5em 1.4em;
+
−
}
+
−
 
+
−
/* Disabled styles */
+
−
.select-css:disabled, .select-css[aria-disabled=true] {
+
−
  color: graytext;
+
−
  background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22graytext%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'),
+
−
    linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%);
+
−
}
+
−
 
+
−
.select-css:disabled:hover, .select-css[aria-disabled=true] {
+
−
  border-color: #aaa;
+
−
}
+
−
</style>
+
−
</div>
+
−
+
−
+
−
<div class="clear extra_space"></div>
+
−
<div class="clear extra_space"></div>
+
−
<div class="clear extra_space"></div>
+
−
+
−
+
 
 
 
<div class="column full_size">
 
<div class="column full_size">
Line 924: Line 885:
 
<div class="column full_size">
 
<div class="column full_size">
 
 
−
<img src="https://placehold.it/1000x200">
+
<img src="https://via.placeholder.com/1000X200/ddd6d0/99948f">
 
 
 
<h2>H1 > Column Full size: </h1>
 
<h2>H1 > Column Full size: </h1>
Line 935: Line 896:
 
 
 
<div class="column half_size">  
 
<div class="column half_size">  
−
<img src="https://placehold.it/1000x200">  
+
<img src="https://via.placeholder.com/1000X200/ddd6d0/99948f">  
 
<h2>H2 > Column Half size </h2>
 
<h2>H2 > Column Half size </h2>
 
<p>Half size: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.  </p>
 
<p>Half size: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.  </p>
Line 941: Line 902:
 
 
 
<div class="column half_size">
 
<div class="column half_size">
−
<img src="https://placehold.it/1000x200">
+
<img src="https://via.placeholder.com/1000X200/ddd6d0/99948f">
 
<h2>H2 > Column Half size </h2>
 
<h2>H2 > Column Half size </h2>
 
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.  </p>
 
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.  </p>
Line 949: Line 910:
 
 
 
<div class="column third_size">
 
<div class="column third_size">
−
<img src="https://placehold.it/1000x200">
+
<img src="https://via.placeholder.com/1000X200/ddd6d0/99948f">
 
<H3>H3 > Column Third size </H3>
 
<H3>H3 > Column Third size </H3>
 
<p>Third size: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.  </p>
 
<p>Third size: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.  </p>
Line 955: Line 916:
 
 
 
<div class="column third_size">
 
<div class="column third_size">
−
<img src="https://placehold.it/1000x200">
+
<img src="https://via.placeholder.com/1000X200/ddd6d0/99948f">
 
<H3>H3 > Column Third size </H3>
 
<H3>H3 > Column Third size </H3>
 
<p>Third size: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.  </p>
 
<p>Third size: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.  </p>
Line 961: Line 922:
 
 
 
<div class="column third_size">
 
<div class="column third_size">
−
<img src="https://placehold.it/1000x200">
+
<img src="https://via.placeholder.com/1000X200/ddd6d0/99948f">
 
<H3>H3 > Column Third size </H3>
 
<H3>H3 > Column Third size </H3>
 
<p>Third size: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.  </p>
 
<p>Third size: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.  </p>
Line 969: Line 930:
 
 
 
<div class="column quarter_size">
 
<div class="column quarter_size">
−
<img src="https://placehold.it/1000x200">
+
<img src="https://via.placeholder.com/1000X200/ddd6d0/99948f">
 
<H4>H4 > Column Quarter size </H4>
 
<H4>H4 > Column Quarter size </H4>
 
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.  </p>
 
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.  </p>
Line 975: Line 936:
 
 
 
<div class="column quarter_size">
 
<div class="column quarter_size">
−
<img src="https://placehold.it/1000x200">
+
<img src="https://via.placeholder.com/1000X200/ddd6d0/99948f">
 
<H4>H4 > Column Quarter size </H4>
 
<H4>H4 > Column Quarter size </H4>
 
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.  </p>
 
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.  </p>
Line 981: Line 942:
 
 
 
<div class="column quarter_size">
 
<div class="column quarter_size">
−
<img src="https://placehold.it/1000x200">
+
<img src="https://via.placeholder.com/1000X200/ddd6d0/99948f">
 
<H4>H4 > Column Quarter size </H4>
 
<H4>H4 > Column Quarter size </H4>
 
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.  </p>
 
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.  </p>
Line 987: Line 948:
 
 
 
<div class="column quarter_size">
 
<div class="column quarter_size">
−
<img src="https://placehold.it/1000x200">
+
<img src="https://via.placeholder.com/1000X200/ddd6d0/99948f">
 
<H4>H4 > Column Quarter size </H4>
 
<H4>H4 > Column Quarter size </H4>
 
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.  </p>
 
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.  </p>
Line 996: Line 957:
 
 
 
<div class="column three_quarter_size">
 
<div class="column three_quarter_size">
−
<img src="https://placehold.it/1000x200">
+
<img src="https://via.placeholder.com/1000X200/ddd6d0/99948f">
 
<H5>H5 > Column Three Quarter size </H5>
 
<H5>H5 > Column Three Quarter size </H5>
 
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.  </p>
 
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.  </p>
Line 1,003: Line 964:
 
 
 
<div class="column quarter_size">
 
<div class="column quarter_size">
−
<img src="https://placehold.it/1000x635">
+
<img src="https://via.placeholder.com/1000X635/ddd6d0/99948f">
 
<H5>H5 > Column Quarter size </H4>
 
<H5>H5 > Column Quarter size </H4>
 
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.  </p>
 
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.  </p>
Line 1,011: Line 972:
 
 
 
<div class="column third_size">
 
<div class="column third_size">
−
<img src="https://placehold.it/1000x410">
+
<img src="https://via.placeholder.com/1000X410/ddd6d0/99948f">
 
<H6>H6 > Column Third size </H6>
 
<H6>H6 > Column Third size </H6>
 
<p>Third size: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.  </p>
 
<p>Third size: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.  </p>
Line 1,017: Line 978:
 
 
 
<div class="column two_third_size">
 
<div class="column two_third_size">
−
<img src="https://placehold.it/1000x200">
+
<img src="https://via.placeholder.com/1000X200/ddd6d0/99948f">
 
<H6>H6 > Column Two Third size </H6>
 
<H6>H6 > Column Two Third size </H6>
 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.  </p>
 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.  </p>
Line 1,439: Line 1,400:
 
 
 
<div class="slide ">
 
<div class="slide ">
−
<img src="https://placehold.it/1000x201">
+
<img src="https://via.placeholder.com/1000X201/ddd6d0/99948f">
 
</div>
 
</div>
 
<div class="slide">
 
<div class="slide">
−
<img src="https://placehold.it/1000x202">
+
<img src="https://via.placeholder.com/1000X202/ddd6d0/99948f">
 
</div>
 
</div>
 
<div class="slide">
 
<div class="slide">
−
<img src="https://placehold.it/1000x203">
+
<img src="https://via.placeholder.com/1000X203/ddd6d0/99948f">
 
</div>
 
</div>
 
</div>
 
</div>
Line 1,466: Line 1,427:
 
 
 
<div class="slide">
 
<div class="slide">
−
<img src="https://placehold.it/1000x201">
+
<img src="https://via.placeholder.com/1000X201/ddd6d0/99948f">
 
</div>
 
</div>
 
<div class="slide">
 
<div class="slide">
−
<img src="https://placehold.it/1000x202">
+
<img src="https://via.placeholder.com/1000X202/ddd6d0/99948f">
 
</div>
 
</div>
 
<div class="slide">
 
<div class="slide">
−
<img src="https://placehold.it/1000x203">
+
<img src="https://via.placeholder.com/1000X203/ddd6d0/99948f">
 
</div>
 
</div>
 
<div class="slide">
 
<div class="slide">
−
<img src="https://placehold.it/1000x204">
+
<img src="https://via.placeholder.com/1000X204/ddd6d0/99948f">
 
</div>
 
</div>
 
</div>
 
</div>
Line 1,491: Line 1,452:
 
<div class="content">
 
<div class="content">
 
<div class="slide">
 
<div class="slide">
−
<img src="https://placehold.it/1000x201">
+
<img src="https://via.placeholder.com/1000X201/ddd6d0/99948f">
 
</div>
 
</div>
 
<div class="slide">
 
<div class="slide">
−
<img src="https://placehold.it/1000x202">
+
<img src="https://via.placeholder.com/1000X202/ddd6d0/99948f">
 
</div>
 
</div>
 
<div class="slide">
 
<div class="slide">
−
<img src="https://placehold.it/1000x203">
+
<img src="https://via.placeholder.com/1000X203/ddd6d0/99948f">
 
</div>
 
</div>
 
 
Line 1,517: Line 1,478:
 
<div class="content">
 
<div class="content">
 
<div class="slide">
 
<div class="slide">
−
<img src="https://placehold.it/1000x201">
+
<img src="https://via.placeholder.com/1000X201/ddd6d0/99948f">
 
</div>
 
</div>
 
<div class="slide">
 
<div class="slide">
−
<img src="https://placehold.it/1000x202">
+
<img src="https://via.placeholder.com/1000X202/ddd6d0/99948f">
 
</div>
 
</div>
 
<div class="slide">
 
<div class="slide">
−
<img src="https://placehold.it/1000x203">
+
<img src="https://via.placeholder.com/1000X203/ddd6d0/99948f">
 
</div>
 
</div>
 
</div>
 
</div>
Line 1,535: Line 1,496:
 
<div class="content">
 
<div class="content">
 
<div class="slide">
 
<div class="slide">
−
<img src="https://placehold.it/1000x201">
+
<img src="https://via.placeholder.com/1000X201/ddd6d0/99948f">
 
</div>
 
</div>
 
<div class="slide">
 
<div class="slide">
−
<img src="https://placehold.it/1000x202">
+
<img src="https://via.placeholder.com/1000X202/ddd6d0/99948f">
 
</div>
 
</div>
 
<div class="slide">
 
<div class="slide">
−
<img src="https://placehold.it/1000x203">
+
<img src="https://via.placeholder.com/1000X203/ddd6d0/99948f">
 
</div>
 
</div>
 
</div>
 
</div>
Line 1,561: Line 1,522:
 
<div class="slide">
 
<div class="slide">
 
<div class="column third_size">
 
<div class="column third_size">
−
<img src="https://placehold.it/1000x201">
+
<img src="https://via.placeholder.com/1000X201/ddd6d0/99948f">
 
<p> example slide 1.1</p>
 
<p> example slide 1.1</p>
 
</div>
 
</div>
 
 
 
<div class="column third_size">
 
<div class="column third_size">
−
<img src="https://placehold.it/1000x201">
+
<img src="https://via.placeholder.com/1000X202/ddd6d0/99948f">
 
<p> example slide 1.2</p>
 
<p> example slide 1.2</p>
 
</div>
 
</div>
 
 
 
<div class="column third_size">
 
<div class="column third_size">
−
<img src="https://placehold.it/1000x201">
+
<img src="https://via.placeholder.com/1000X203/ddd6d0/99948f">
 
<p> example slide 1.3</p>
 
<p> example slide 1.3</p>
 
</div>
 
</div>
Line 1,578: Line 1,539:
 
<div class="slide">
 
<div class="slide">
 
<div class="column third_size">
 
<div class="column third_size">
−
<img src="https://placehold.it/1000x201">
+
<img src="https://via.placeholder.com/1000X201/ddd6d0/99948f">
 
<p> example slide 2.1</p>
 
<p> example slide 2.1</p>
 
</div>
 
</div>
 
 
 
<div class="column third_size">
 
<div class="column third_size">
−
<img src="https://placehold.it/1000x201">
+
<img src="https://via.placeholder.com/1000X202/ddd6d0/99948f">
 
<p> example slide 2.2</p>
 
<p> example slide 2.2</p>
 
</div>
 
</div>
 
 
 
<div class="column third_size">
 
<div class="column third_size">
−
<img src="https://placehold.it/1000x201">
+
<img src="https://via.placeholder.com/1000X203/ddd6d0/99948f">
 
<p> example slide 2.3</p>
 
<p> example slide 2.3</p>
 
</div>
 
</div>
Line 1,602: Line 1,563:
 
<div class="clear extra_space"></div>
 
<div class="clear extra_space"></div>
 
<div class="clear extra_space"></div>
 
<div class="clear extra_space"></div>
 +
<div class="clear extra_space"></div>
 +
 +
 +
<div class="column full_size">
 +
 +
 +
<h1> TABLES AND TIMEZONE CONVERTER</h1>
 +
 +
<select class="styled_select" id="timezone_converter">
 +
 +
</select>
 +
 +
<div class="clear extra_space"></div>
 +
 +
 +
 +
 +
<table>
 +
 +
<tr>
 +
<th>Date </th>
 +
<th>#</th>
 +
</tr>
 +
<tr>
 +
<td class="date_timezone">06,09,1000,30</td>
 +
<td>1</td>
 +
</tr>
 +
 +
<tr>
 +
<td class="date_timezone">06,09,0300,60</td>
 +
<td>2</td>
 +
</tr>
 +
 +
<tr>
 +
<td class="date_timezone">06,09,1300,60</td>
 +
<td>3</td>
 +
</tr>
 +
<tr>
 +
<td class="date_timezone">06,16,1000,30</td>
 +
<td>4</td>
 +
</tr>
 +
 +
<tr>
 +
<td class="date_timezone">06,23,0300,60</td>
 +
<td>5</td>
 +
</tr>
 +
 +
<tr>
 +
<td class="date_timezone">06,23,1300,60</td>
 +
<td>6</td>
 +
</tr>
 +
 +
</table>
 +
 +
</div>
 +
 +
 +
<div class="clear extra_space"></div>
 +
<div class="clear extra_space"></div>
 +
<div class="clear extra_space"></div>
 +
 +
 +
 +
 +
 
</div>
 
</div>
 
</div>
 
</div>
Line 1,629: Line 1,655:
 
<div class="column full_size">
 
<div class="column full_size">
 
 
−
<img src="https://placehold.it/1000x200">
+
<img src="https://via.placeholder.com/1000X200/ddd6d0/99948f">
 
 
 
<h2>H1 > Column Full size: </h1>
 
<h2>H1 > Column Full size: </h1>
Line 1,845: Line 1,871:
 
<div class="column full_size">
 
<div class="column full_size">
 
 
−
<img src="https://placehold.it/1000x200">
+
<img src="https://via.placeholder.com/1000X200/ddd6d0/99948f">
 
 
 
<h2>H1 > Column Full size: </h1>
 
<h2>H1 > Column Full size: </h1>
Line 2,092: Line 2,118:
  
 
 
 +
//setup
 
var navigation = "<div class='navigation prev'></div> <div class='navigation next'></div>";
 
var navigation = "<div class='navigation prev'></div> <div class='navigation next'></div>";
 
let slide_counter=0;
 
let slide_counter=0;
Line 2,098: Line 2,125:
 
for( x=0; x< total_gallerys; x++ ){
 
for( x=0; x< total_gallerys; x++ ){
 
 
−
//add navigation buttons  
+
//setup: add navigation buttons  
 
$('.gallery:eq('+x+') > .content').prepend(navigation);
 
$('.gallery:eq('+x+') > .content').prepend(navigation);
 
 
  
−
//count number of slides to add controls buttons  
+
//setup: count number of slides to add controls buttons  
 
slide_counter = $('.gallery:eq('+x+') > .content > .slide').length;
 
slide_counter = $('.gallery:eq('+x+') > .content > .slide').length;
 
 
Line 2,117: Line 2,144:
 
gallery_ids[x] =  $('.gallery.carousel:eq('+x+')').attr('id');
 
gallery_ids[x] =  $('.gallery.carousel:eq('+x+')').attr('id');
 
}
 
}
−
+
−
+
−
+
−
+
 
//activate gallery controls and rotation function
 
//activate gallery controls and rotation function
 
gallery_slides(gallery_ids);
 
gallery_slides(gallery_ids);
Line 2,202: Line 2,226:
 
 
 
}
 
}
−
 
 
 
 
function clicking_gallerys(clicked_id, gallery_ids, type_of_click){
 
function clicking_gallerys(clicked_id, gallery_ids, type_of_click){
Line 2,273: Line 2,296:
 
return gallery_ids;
 
return gallery_ids;
 
}
 
}
 +
 +
 +
 +
 +
//if there is a time zone converter
 +
if($("#timezone_converter").length){
 +
 +
//global variables
 +
var hold_all_dates = [];
 +
var date_counter = 0;
 +
 +
 +
//grab original dates
 +
var grab_date;
 +
var date_array;
 +
 +
//change dates to Boston timezone and collect all dates into a global variable
 +
$('.date_timezone').each(function(i, obj) {
 +
 +
//get the date
 +
grab_date = $(this).html();
 +
 +
//change date to a number array
 +
date_array = grab_date.split(',').map(Number);
 +
 +
//create an id for that specific date, we will use this later to append
 +
$(this).attr('id', 'dt_'+date_counter);
 +
 +
//add to global variables
 +
hold_all_dates[date_counter]=date_array;
 +
date_counter++;
 +
 +
//clean the div and have it ready for the change
 +
$(this).empty();
 +
 +
//now append that date in Boston time:
 +
$(this).append(change_time_zone(date_array[0],date_array[1],date_array[2],date_array[3],0));
 +
 +
});
 +
 +
 +
//setup timezone select
 +
var select_is_ready = false;
 +
 +
// DAYLIGHT SAVINGS TIME
 +
select_is_ready = time_zone_dropdown('winter');
 +
 +
//once timezone is ready, allow user to change time zones
 +
if(select_is_ready){
 +
//if the user wants to change the timezone
 +
$("#timezone_converter").on("change", function(e) {
 +
 +
//get the timezone requested
 +
var timezone_selected = $(this).val();
 +
var time_difference = parseInt(timezone_selected);
 +
 +
 +
//empty all timezones getting ready for appending
 +
$('.date_timezone').empty();
 +
 +
//get each date_timezone by number id
 +
for(x=0; x< date_counter; x++){
 +
 +
$('#dt_'+x).append(change_time_zone(hold_all_dates[x][0],
 +
hold_all_dates[x][1],
 +
hold_all_dates[x][2],
 +
hold_all_dates[x][3],
 +
time_difference));
 +
 +
}
 +
 +
});
 +
 +
}
 +
else{
 +
console.log('error with appending timezone select');
 +
}
 +
 +
}
 +
 +
 +
////////////////////////////////////////////////////////////
 +
//TIME ZONE CONVERTER
 
 
 
 
 +
//time zone functions
 +
//main function for switching time
 +
function change_time_zone(month, day, time, duration, change){
 +
 +
//holds days per month
 +
const days_in_month = [31, 28, 31, 30,
 +
  31, 30, 31, 31,
 +
  30, 30, 30, 31];
 +
 +
//maximum amount of days in the month we are in
 +
var months_days_limit = days_in_month[month];
 +
 +
//time event starts
 +
var time_start = time + change;
 +
 +
//convert duration minutes in military format
 +
if(duration%60 == 0){
 +
duration = (duration/60)*100;
 +
}
 +
else if( duration > 60){
 +
duration = (((duration / 60)|0)*100) + (duration % 60);
 +
}
 +
 +
//add converted minutes
 +
var time_end = time_start + duration;
 +
 +
//check if time_end needs to be adjusted
 +
var time_end_minutes = time_end % 100;
 +
 +
if(time_end_minutes == 60){
 +
time_end = (time_end -60)+100;
 +
}
 +
else if(time_end_minutes > 60){
 +
//from those minutes, get how many hours
 +
var sixty = ((time_end_minutes / 60)|0)*100;
 +
 +
//add hours plus minutes in military format
 +
time_end_minutes = sixty + ((time_end % 100) - 60);
 +
 +
//get the final time end by adding the correct minute convertion
 +
time_end = (time_start - (time_start % 100)) + time_end_minutes;
 +
}
 +
 +
//check if adjusted time change crosses the international date line
 +
if(time_start >= 2400){
 +
 +
time_start = time_start - 2400;
 +
time_end = time_end - 2400;
 +
 +
day = day + 1;
 +
}
 +
 +
if(time_start < 0){
 +
 +
time_start = 2400 - time_start;
 +
time_end = 2400 - time_end;
 +
 +
day = day - 1;
 +
}
 +
 +
//check if the new day switches months
 +
if(day > months_days_limit ){
 +
month = month + 1;
 +
day = day - months_days_limit;
 +
}
 +
if(day <= 0 ){
 +
month = month - 1;
 +
day = days_in_a_month[month];
 +
}
 +
 +
//style date and time
 +
var date_changed = month_day_for_display(month, day)+", "
 +
+hour_for_display(time_start)+" - "
 +
+hour_for_display(time_end);
 +
 +
//return date changed and styled
 +
return date_changed;
 +
}
 +
 +
//switch hours from 24 to 12 format
 +
function switch_hours(hour){
 +
 +
let converted_hour = 12;
 +
 +
switch(hour){
 +
case 13:
 +
converted_hour = 1;
 +
break;
 +
case 14:
 +
converted_hour = 2;
 +
break;
 +
case 15:
 +
converted_hour = 3;
 +
break;
 +
case 16:
 +
converted_hour = 4;
 +
break;
 +
case 17:
 +
converted_hour = 5;
 +
break;
 +
case 18:
 +
converted_hour = 6;
 +
break;
 +
case 19:
 +
converted_hour = 7;
 +
break;
 +
case 20:
 +
converted_hour = 8;
 +
break;
 +
case 21:
 +
converted_hour = 9;
 +
break;
 +
case 22:
 +
converted_hour = 10;
 +
break;
 +
case 23:
 +
converted_hour = 11;
 +
break;
 +
}
 +
 +
return converted_hour;
 +
}
 +
 +
//make months + days look nice
 +
function month_day_for_display(month, day){
 +
 +
const months_array =['January','February','March','April','May','June',
 +
  'July','August','September','October','November','December' ];
 +
 +
//return month
 +
return (months_array[month-1]+" "+day);
 +
 +
}
 +
 +
//make hours and minutes look nice
 +
function hour_for_display(hour_x){
 +
 +
//store hours, minutes and midday for time start and time end
 +
var hour_obj ={hours:0, minutes:0, midday:"AM"};
 +
 +
//get hours
 +
hour_obj.hours = (hour_x / 100)|0;
 +
 +
//check if PM, (by default its AM)
 +
if(hour_x > 1159){
 +
 +
hour_obj.midday = "PM";
 +
hour_obj.hours = switch_hours((hour_x / 100)|0);
 +
}
 +
 +
//get minutes
 +
hour_obj.minutes = hour_x%100;
 +
 +
 +
//if minutes are 0, change to 00 for displaying
 +
if(hour_obj.minutes < 10){
 +
hour_obj.minutes = "0" + hour_obj.minutes;
 +
}
 +
 +
return (hour_obj.hours+":"+hour_obj.minutes+"  "+hour_obj.midday);
 +
}
 +
 +
 +
//append the values for the time zone select dropdown
 +
function time_zone_dropdown(season){
 +
 +
//list of all the ids for the UTC time zones we display
 +
const utcs_ids = ["UTC_minus_12","UTC_minus_11","UTC_minus_10","UTC_minus_09","UTC_minus_08",
 +
    "UTC_minus_07","UTC_minus_06","UTC_minus_05' selected='selected","UTC_minus_04" ,"UTC_minus_03",
 +
    "UTC_minus_02","UTC_minus_01","UTC_0","UTC_plus_01","UTC_plus_02","UTC_plus_03",
 +
    "UTC_plus_04","UTC_plus_05","UTC_plus_06","UTC_plus_07","UTC_plus_08","UTC_plus_09",
 +
    "UTC_plus_10","UTC_plus_11","UTC_plus_12","UTC_plus_13","UTC_plus_14"];
 +
 +
//list of all the UTC names of time zones
 +
var utcs_names =["UTC -12", "UTC -11", "UTC -10","UTC -09", "UTC -08",
 +
  "UTC -07","UTC -06","UTC -05","UTC -04 (EDT)","UTC -03",
 +
  "UTC -02","UTC -01", "UTC 0","UTC +01 (CET)","UTC +02 ","UTC +03",
 +
  "UTC +04","UTC +05","UTC +06","UTC +07 ","UTC +08 (CST) ","UTC +09",
 +
  "UTC +10","UTC +11","UTC +12","UTC +13","UTC +14"];
 +
 +
//by default its daylight savings time -
 +
//this will determine the difference between Boston and other UTCs
 +
let utc_value = -800;
 +
 +
if (season == 'winter'){
 +
utc_value = -700;
 +
 +
utcs_names[7] = 'UTC -05 (EST)';
 +
utcs_names[8] = 'UTC -04';
 +
}
 +
 +
//this will hold the options to append to the dropdown select
 +
var timezone_values_str ='';
 +
 +
for(x=0; x<utcs_ids.length; x++){
 +
 +
timezone_values_str = timezone_values_str+
 +
    "<option id='"+ utcs_ids[x] +
 +
  "' value='"+ utc_value +"'>"+
 +
    utcs_names[x] + "</option>";
 +
 +
utc_value = utc_value + 100;
 +
}
 +
 +
 +
//append the options
 +
$("#timezone_converter").append(timezone_values_str);
 +
 +
//its ready!
 +
return true;
 +
}
 +
 
 
 
});
 
});
 
</SCRIPT>
 
</SCRIPT>

Latest revision as of 12:25, 12 February 2021

GIANT JAMBOREE
COMPETITION
Competition 1
Competition 1
Competition 2
Sub Competition 2.1
Sub Competition 2.2
Competition 3
Sub Competition 3.1
Sub Competition 3.2

COLUMNS : LAYOUT CLASSES

H1 > Column Full size:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

H2 > Column Half size

Half size: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

H2 > Column Half size

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

H3 > Column Third size

Third size: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

H3 > Column Third size

Third size: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

H3 > Column Third size

Third size: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

H4 > Column Quarter size

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

H4 > Column Quarter size

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

H4 > Column Quarter size

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

H4 > Column Quarter size

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

H5 > Column Three Quarter size

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

H5 > Column Quarter size

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

H6 > Column Third size

Third size: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

H6 > Column Two Third size

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

BUTTON / DEFAULT
BUTTON LIGHT
BUTTON DARK
BUTTON ORANGE
BUTTON PURPLE
BUTTON WINE
BUTTON CORAL
BUTTON TEAL
BUTTON LIGHT GREEN
BUTTON DARK GREEN
BUTTON YELLOW

DECORATION: HIGHLIGHTS

Third size: highlight border light : Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Third size: highlight border medium: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Third size: highlight border dark: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Third size: highlight background gray: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Third size: highlight background gray: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Third size: highlight border red: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Quarter size: highlight border lightgreen: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Quarter size: highlight border darkgreen: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Quarter size: highlight border teal: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Quarter size: highlight border yellow: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Quarter size: highlight border coral: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Quarter size: highlight border purple: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Quarter size: highlight border orange: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Quarter size: highlight border wine: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Third size: highlight dark: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Third size: highlight medium: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Third size: highlight medium: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

SAME HEIGHT BOXES: ROW

Row: Half size: highlight border: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Row: Quarter size: highlight border: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Row: Quarter size: highlight border: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Row: Third size: highlight border: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Row: Two third size: highlight border: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Row: Three quarter size: highlight border: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Row: Quarter size: highlight border: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Row: Half size: highlight border: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Row: Half size: highlight border: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Row: Third size: highlight border: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Row: Third size: highlight border: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Row: Third size: highlight border: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

HIGHLIGHT POSTS

Title of the post with icon

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Title of the post with icon
Keyword
Team name / Host
Time of event
Location of event
Contact for event

Full size: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Half size: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Half size: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Third size: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Third size: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Third size: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Quarter size: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Quarter size: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Quarter size: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Quarter size: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Quarter size: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Three Quarter size: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Third size: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Third size: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

CARROUSELS

GALLERY

TABLES AND TIMEZONE CONVERTER

Date #
06,09,1000,30 1
06,09,0300,60 2
06,09,1300,60 3
06,16,1000,30 4
06,23,0300,60 5
06,23,1300,60 6

LIGHT THEME

H1 > Column Full size:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

DECORATION: HIGHLIGHTS

Third size: highlight border light : Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Third size: highlight border medium: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Third size: highlight border dark: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Third size: highlight background gray: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Third size: highlight background gray: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Third size: highlight border red: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Quarter size: highlight border lightgreen: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Quarter size: highlight border darkgreen: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Quarter size: highlight border teal: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Quarter size: highlight border yellow: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Quarter size: highlight border coral: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Quarter size: highlight border purple: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Quarter size: highlight border orange: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Quarter size: highlight border wine: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Third size: highlight dark: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Third size: highlight medium: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Third size: highlight medium: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

HIGHLIGHT POSTS

Title of the post with icon

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Title of the post with icon
Keyword
Team name / Host
Time of event
Location of event
Contact for event

Full size: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Half size: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Half size: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

>

DARK THEME

H1 > Column Full size:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

DECORATION: HIGHLIGHTS

Third size: highlight border light : Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Third size: highlight border medium: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Third size: highlight border dark: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Third size: highlight background gray: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Third size: highlight background gray: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Third size: highlight border red: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Quarter size: highlight border lightgreen: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Quarter size: highlight border darkgreen: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Quarter size: highlight border teal: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Quarter size: highlight border yellow: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Quarter size: highlight border coral: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Quarter size: highlight border purple: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Quarter size: highlight border orange: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Quarter size: highlight border wine: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Third size: highlight dark: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Third size: highlight medium: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Third size: highlight medium: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

HIGHLIGHT POSTS

Title of the post with icon

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Title of the post with icon
Keyword
Team name / Host
Time of event
Location of event
Contact for event

Full size: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Half size: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Half size: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

>