Difference between revisions of "HQ:2021"

 
(34 intermediate revisions by the same user not shown)
Line 196: Line 196:
 
 
 
.igem_content_wrapper.light {
 
.igem_content_wrapper.light {
−
background-color: #919EBF;
+
background-color: #aab3ca;
 
}
 
}
 
 
Line 213: Line 213:
 
color: black;
 
color: black;
 
text-align: left;
 
text-align: left;
 +
letter-spacing: 1px;
 
}
 
}
 
 
Line 243: 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 283: Line 332:
 
clear:both;
 
clear:both;
 
}
 
}
−
+
.clear.extra_space {
 +
clear:both;
 +
height: 15px;
 +
}
 
 
 
.full_image{ width:100%;}
 
.full_image{ width:100%;}
Line 303: Line 355:
 
line-height: 35px;
 
line-height: 35px;
 
border-radius: 8px;
 
border-radius: 8px;
 +
letter-spacing: 1px;
 
}
 
}
  
Line 310: Line 363:
 
 
 
.button.light a  {
 
.button.light a  {
−
background-color: #919EBF!important;
+
background-color: #aab3ca!important;
 
color:#2C3E66 !important;
 
color:#2C3E66 !important;
 
}
 
}
Line 316: Line 369:
 
.button.light a:hover {
 
.button.light a:hover {
 
background-color: #2C3E66!important;
 
background-color: #2C3E66!important;
−
color: #919EBF !important;
+
color: #aab3ca !important;
 
}
 
}
 
 
Line 424: Line 477:
 
 
 
.highlight.border.light {
 
.highlight.border.light {
−
     border: 4px solid #919EBF;
+
     border: 4px solid #aab3ca;
 
background-color: inherit;
 
background-color: inherit;
 
}
 
}
Line 498: Line 551:
 
 
 
.highlight.light{
 
.highlight.light{
−
     border: 4px solid #919EBF;
+
     border: 4px solid #aab3ca;
−
background-color:#919EBF;
+
background-color:#aab3ca;
 
}
 
}
 
 
Line 618: Line 671:
 
 
 
 
−
/**carrousels *****************************************************************************/
+
/**gallerys *****************************************************************************/
−
.carrousel > .content,
+
.gallery > .content,
−
.carrousel > .controls{
+
.gallery > .controls{
 
float: left;
 
float: left;
 
width: 100%;
 
width: 100%;
Line 627: Line 680:
 
}
 
}
  
−
.carrousel > .controls{
+
.gallery > .controls{
 
margin-top:10px;
 
margin-top:10px;
 
}
 
}
 
 
−
.carrousel > .content > .slide img {
+
.gallery > .content > .slide img {
 
margin-bottom: 0px;
 
margin-bottom: 0px;
 
}
 
}
 
 
−
.carrousel > .content  > .slide{
+
.gallery > .content  > .slide{
 
display:none;
 
display:none;
 
}
 
}
 
 
−
.carrousel > .content  > .slide.current {
+
.gallery > .content  > .slide.current {
 
display:block;
 
display:block;
 
}
 
}
 
 
−
.carrousel > .controls > .button{
+
.gallery > .controls > .button{
−
float:left;
+
    float: left;
−
height: 30px;
+
    height: 26px;
−
width: 40px;
+
    width: 36px;
−
background-color:#919EBF;;
+
    border: 2px solid #2C3E66;
−
border-radius: 5px;
+
    background-color: #aab3ca;
−
color:#2C3E66;
+
    border-radius: 5px;
−
font-weight: bold;
+
    color: #2C3E66;
−
margin: 0px 10px 0px 0px;
+
    font-weight: bold;
−
padding: 10px 0px 0px 0px;
+
    margin: 0px 10px 0px 0px;
−
cursor:pointer;
+
    padding: 8px 0px 0px 0px;
 +
    cursor: pointer;
 
}
 
}
 
 
−
.carrousel > .controls > .button.current,  
+
.gallery > .controls > .button.current,  
−
.carrousel > .controls > .button:hover{
+
.gallery > .controls > .button:hover{
 
background-color:#2C3E66;
 
background-color:#2C3E66;
 
color:#ffffff;
 
color:#ffffff;
Line 680: Line 734:
 
     background-position: center;
 
     background-position: center;
 
     background-repeat: no-repeat;
 
     background-repeat: no-repeat;
−
     background-image: url(https://static.igem.org/mediawiki/2020/5/5d/Icon_menu_plus.svg);
+
     background-image: url(https://static.igem.org/mediawiki/2021/a/a8/Icon_arrow_left.svg);
 
}
 
}
 
 
 
.content > .navigation.next{
 
.content > .navigation.next{
 
right: 0;   
 
right: 0;   
−
background-image: url(https://static.igem.org/mediawiki/2020/5/5d/Icon_menu_plus.svg);
+
background-image: url(https://static.igem.org/mediawiki/2021/e/e6/Icon_arrow_right.svg);
 
}
 
}
 
 
Line 718: Line 772:
 
.three_quarter_size, .quarter_size {width:98%;}
 
.three_quarter_size, .quarter_size {width:98%;}
 
 
 +
.column.full_size > .highlight,
 +
.column.half_size > .highlight,
 +
.column.third_size > .highlight,
 +
.column.two_third_size > .highlight,
 +
.column.three_quarter_size > .highlight,
 +
.column.quarter_size > .highlight{ padding:2%;}
 
}
 
}
  
Line 808: 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 815: Line 875:
 
 
  
−
+
−
<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 830: 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 841: 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 847: 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 855: 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 861: 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 867: 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 875: 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 881: 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 887: 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 893: 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 902: 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 909: 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 917: 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 923: 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,339: Line 1,394:
 
<div class="column full_size">
 
<div class="column full_size">
 
 
−
<h1> CARROUSELS AND GALLERIES </h1>
+
<h1> CARROUSELS</h1>
−
<div class="carrousel" id="one">
+
<div class="gallery carousel" id="one">
 
 
−
<div class="content">
+
<div class="content">
−
+
−
<div class="navigation prev"> </div>
+
−
<div class="navigation next"> </div>
+
 
 
−
<div class="slide current">
+
<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>
 
 
−
<div class="controls">
+
<div class="controls"></div>
−
<div class="button current">1</div>
+
−
<div class="button">2</div>
+
−
<div class="button">3</div>
+
−
</div>
+
 
 
 
 
Line 1,374: Line 1,422:
 
<div class="column half_size">
 
<div class="column half_size">
 
 
−
<div class="carrousel" id="two">
+
<div class="gallery carousel" id="two">
 
 
 
<div class="content">
 
<div class="content">
−
+
−
<div class="navigation prev"></div>
+
<div class="slide">
−
<div class="navigation next"></div>
+
<img src="https://via.placeholder.com/1000X201/ddd6d0/99948f">
−
+
−
+
−
<div class="slide current">
+
−
<img src="https://placehold.it/1000x201">
+
 
</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>
 
 
−
<div class="controls">
+
<div class="controls"></div>
−
<div class="button current">1</div>
+
−
<div class="button">2</div>
+
−
<div class="button">3</div>
+
−
<div class="button">4</div>
+
−
</div>
+
−
+
−
+
  
 
</div>
 
</div>
Line 1,411: Line 1,448:
 
<div class="column half_size">
 
<div class="column half_size">
 
 
−
<div class="carrousel" id="three">
+
<div class="gallery carousel" id="three">
 
 
 
<div class="content">
 
<div class="content">
−
+
<div class="slide">
−
<div class="navigation prev"></div>
+
<img src="https://via.placeholder.com/1000X201/ddd6d0/99948f">
−
<div class="navigation next"></div>
+
−
+
−
<div class="slide current">
+
−
<img src="https://placehold.it/1000x201">
+
 
</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">
 +
<img src="https://via.placeholder.com/1000X203/ddd6d0/99948f">
 +
</div>
 +
 
</div>
 
</div>
 
 
−
<div class="controls">
+
−
<div class="button current">1</div>
+
</div>
−
<div class="button">2</div>
+
 +
</div>
 +
 +
 +
 +
<div class="clear extra_space"></div>
 +
 +
<div class="column full_size">
 +
<h1> GALLERY </h1>
 +
 +
<div class="gallery" id="four">
 +
<div class="content">
 +
<div class="slide">
 +
<img src="https://via.placeholder.com/1000X201/ddd6d0/99948f">
 +
</div>
 +
<div class="slide">
 +
<img src="https://via.placeholder.com/1000X202/ddd6d0/99948f">
 +
</div>
 +
<div class="slide">
 +
<img src="https://via.placeholder.com/1000X203/ddd6d0/99948f">
 +
</div>
 +
</div>
 +
 +
<div class="controls"></div>
 
</div>
 
</div>
 
 
 +
<div class="clear extra_space"></div>
 
 
−
 
+
<div class="gallery" id="five">
 +
<div class="content">
 +
<div class="slide">
 +
<img src="https://via.placeholder.com/1000X201/ddd6d0/99948f">
 +
</div>
 +
<div class="slide">
 +
<img src="https://via.placeholder.com/1000X202/ddd6d0/99948f">
 +
</div>
 +
<div class="slide">
 +
<img src="https://via.placeholder.com/1000X203/ddd6d0/99948f">
 +
</div>
 +
</div>
 +
</div>
 
</div>
 
</div>
 +
 +
 +
<div class="clear extra_space"></div>
 +
 +
 +
 +
 +
 +
 +
<div class="gallery" id="six">
 +
<div class="content">
 +
 +
 +
<div class="slide">
 +
<div class="column third_size">
 +
<img src="https://via.placeholder.com/1000X201/ddd6d0/99948f">
 +
<p> example slide 1.1</p>
 +
</div>
 +
 +
<div class="column third_size">
 +
<img src="https://via.placeholder.com/1000X202/ddd6d0/99948f">
 +
<p> example slide 1.2</p>
 +
</div>
 +
 +
<div class="column third_size">
 +
<img src="https://via.placeholder.com/1000X203/ddd6d0/99948f">
 +
<p> example slide 1.3</p>
 +
</div>
 +
</div>
 +
 +
<div class="slide">
 +
<div class="column third_size">
 +
<img src="https://via.placeholder.com/1000X201/ddd6d0/99948f">
 +
<p> example slide 2.1</p>
 +
</div>
 +
 +
<div class="column third_size">
 +
<img src="https://via.placeholder.com/1000X202/ddd6d0/99948f">
 +
<p> example slide 2.2</p>
 +
</div>
 +
 +
<div class="column third_size">
 +
<img src="https://via.placeholder.com/1000X203/ddd6d0/99948f">
 +
<p> example slide 2.3</p>
 +
</div>
 +
</div>
 +
</div>
 +
 +
<div class="controls"></div>
 +
</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>
 
 
 
 
 +
<div class="clear extra_space"></div>
 +
<div class="clear extra_space"></div>
 +
<div class="clear extra_space"></div>
 
 
 +
 
 
 
 
Line 1,469: 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,665: Line 1,851:
 
</div>
 
</div>
 
</div>
 
</div>
−
 
−
 
−
 
−
 
−
 
 
 
 
<div class="igem_content_wrapper dark">
 
<div class="igem_content_wrapper dark">
Line 1,690: 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 1,927: Line 2,108:
 
 
 
 
−
//if there is a carrousel/carrousels on the page
+
//if there is a gallery/carousels on the page
 
 
−
if(  $('.carrousel').length > 0){
+
if(  $('.gallery').length > 0){
 
 
−
//first, get total number of carrousels on the page
+
//first, get total number of gallerys on the page
−
var total_carrousels = $('.carrousel').length;
+
var total_gallerys = $('.gallery').length;
 
//create an array to store them
 
//create an array to store them
−
var carrousel_ids = [];
+
var gallery_ids = [];
  
−
//next get their unique ids
+
−
for( x=0; x< total_carrousels; x++ ){
+
//setup
−
carrousel_ids[x] = $('.carrousel:eq('+x+')').attr('id');
+
var navigation = "<div class='navigation prev'></div> <div class='navigation next'></div>";
−
console.log(carrousel_ids[x]);
+
let slide_counter=0;
 +
 +
//next get their unique ids and setup navigation controls
 +
for( x=0; x< total_gallerys; x++ ){
 +
 +
//setup: add navigation buttons
 +
$('.gallery:eq('+x+') > .content').prepend(navigation);
 +
 +
 
 +
//setup: count number of slides to add controls buttons
 +
slide_counter = $('.gallery:eq('+x+') > .content > .slide').length;
 +
 +
for( y=0; y< slide_counter; y++){
 +
$('.gallery:eq('+x+') > .controls').append("<div class='button'>"+(y+1)+"</div>");
 +
}
 +
 +
//add current to first slide and first button
 +
$('.gallery:eq('+x+') > .content > .slide:eq(0)').addClass('current');
 +
$('.gallery:eq('+x+') > .controls > .button:eq(0)').addClass('current');
 +
 +
 +
//only add the carousels for autorotation
 +
gallery_ids[x] =  $('.gallery.carousel:eq('+x+')').attr('id');
 
}
 
}
−
//run carrousel function
+
−
carrousel_slides(carrousel_ids);
+
//activate gallery controls and rotation function
 +
gallery_slides(gallery_ids);
 
}
 
}
 
 
 
////////////////////////////////////////////////////////////
 
////////////////////////////////////////////////////////////
−
//CARROUSEL
+
//GALLERIES + CAROUSELS
−
function carrousel_slides(carrousel_ids){
+
function gallery_slides(gallery_ids){
 
 
−
var clicked_carrousel='';
+
var clicked_gallery='';
  
 
//if a navigation button is clicked
 
//if a navigation button is clicked
−
$('.carrousel > .content> .navigation').click(function(){
+
$('.gallery > .content> .navigation').click(function(){
 
 
−
//get which carrousel was clicked
+
//get which gallery was clicked
−
clicked_carrousel = $(this).parent().parent().attr('id');
+
clicked_gallery = $(this).parent().parent().attr('id');
 
 
 
//make clicked element have a temp class
 
//make clicked element have a temp class
 
$(this).addClass('temp');
 
$(this).addClass('temp');
 
 
−
clicking_carrousels(clicked_carrousel,carrousel_ids, 'navigation');
+
clicking_gallerys(clicked_gallery,gallery_ids, 'navigation');
 
 
 
});
 
});
 
 
 
//if a button is clicked
 
//if a button is clicked
−
$('.carrousel > .controls> .button').click(function(){
+
$('.gallery > .controls> .button').click(function(){
 
 
−
//get which carrousel was clicked
+
//get which gallery was clicked
−
clicked_carrousel = $(this).parent().parent().attr('id');
+
clicked_gallery = $(this).parent().parent().attr('id');
 
 
 
//make clicked element have a temp class
 
//make clicked element have a temp class
 
$(this).addClass('temp');
 
$(this).addClass('temp');
 
 
−
clicking_carrousels(clicked_carrousel,carrousel_ids, 'button');
+
clicking_gallerys(clicked_gallery,gallery_ids, 'button');
 
 
 
});
 
});
Line 1,984: Line 2,188:
 
var button=''
 
var button=''
 
 
−
//for each carrousel in the page
+
//for each gallery in the page
 
//change images every 3.5 seconds
 
//change images every 3.5 seconds
 
 
 
window.setInterval(function(){
 
window.setInterval(function(){
 
 
−
for( y=0; y < carrousel_ids.length; y++ ){
+
for( y=0; y < gallery_ids.length; y++ ){
 
 
 
//specific ids > classes
 
//specific ids > classes
−
slide = '#'+carrousel_ids[y]+'> .content > .slide';
+
slide = '#'+gallery_ids[y]+'> .content > .slide';
−
button = '#'+carrousel_ids[y]+'> .controls> .button';
+
button = '#'+gallery_ids[y]+'> .controls> .button';
 
 
 
//check if there is another sibling next
 
//check if there is another sibling next
Line 2,002: Line 2,206:
 
}
 
}
 
 
−
//if not, setup for next round to start at the beginning of the carrousel
+
//if not, setup for next round to start at the beginning of the gallery
 
else{
 
else{
 
$(slide).first().addClass('temp');
 
$(slide).first().addClass('temp');
Line 2,023: Line 2,227:
 
}
 
}
 
 
−
+
function clicking_gallerys(clicked_id, gallery_ids, type_of_click){
−
function clicking_carrousels(clicked_id, carrousel_ids, type_of_click){
+
 
 
 
//store the current number  
 
//store the current number  
Line 2,043: Line 2,246:
 
if(type_of_click == 'navigation'){
 
if(type_of_click == 'navigation'){
 
 
−
$('#'+clicked_id+'> .controls > .button').html(function (u) {
+
$('#'+clicked_id+'> .content > .slide').html(function (u) {
 
         if($(this).hasClass('current') ){
 
         if($(this).hasClass('current') ){
 
c_number= u;
 
c_number= u;
Line 2,055: Line 2,258:
 
 
 
//if it surpases the number of siblings, return to 0
 
//if it surpases the number of siblings, return to 0
−
if(c_number >= ($('#'+clicked_id+'> .controls > .button').length) ){
+
if(c_number >= ($('#'+clicked_id+'> .content > .slide').length) ){
 
c_number =0;
 
c_number =0;
 
}
 
}
Line 2,085: Line 2,288:
 
 
 
//remove that id from rotation
 
//remove that id from rotation
−
var index = carrousel_ids.indexOf(clicked_id);
+
var index = gallery_ids.indexOf(clicked_id);
 
 
 
if (index > -1) {
 
if (index > -1) {
−
carrousel_ids.splice(index, 1);
+
gallery_ids.splice(index, 1);
 
}
 
}
 
 
−
return carrousel_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.

>