(43 intermediate revisions by the same user not shown) | |||
Line 226: | Line 226: | ||
.highlight { | .highlight { | ||
− | width: 90% | + | width: 90%; |
− | + | ||
padding: 15px 5px; | padding: 15px 5px; | ||
+ | margin: auto; | ||
+ | } | ||
+ | |||
+ | .gray { | ||
background-color: #f2f2f2; | background-color: #f2f2f2; | ||
} | } | ||
− | . | + | .blue { |
− | + | background-color: #c0d5f7; | |
− | + | } | |
− | margin: | + | |
− | + | ||
− | + | /* image slider styling */ | |
+ | ul.image_slider { | ||
+ | list-style: none; | ||
+ | margin: 0px -19px; | ||
} | } | ||
Line 247: | Line 253: | ||
padding:5px 15px; | padding:5px 15px; | ||
border-bottom:0px; | border-bottom:0px; | ||
− | color:#72c9b6; | + | color: #72c9b6; |
} | } | ||
Line 394: | Line 400: | ||
− | <img src="http://placehold.it/200x100/d3d3d3/f2f2f2"> | + | <a href=""> <img src="http://placehold.it/200x100/d3d3d3/f2f2f2"></a> |
<div class="collapsable_menu_control"> MENU 三 </div> | <div class="collapsable_menu_control"> MENU 三 </div> | ||
Line 403: | Line 409: | ||
<ul id="accordion" class="accordion"> | <ul id="accordion" class="accordion"> | ||
− | |||
+ | <li class="menu_item"> <div class="icon plus"></div> COMMUNITY | ||
+ | <ul class="submenu"> | ||
+ | <li> <a href=" https://2016.igem.org/Team:Example/Team"> Team List </a> </li> | ||
+ | </ul> | ||
+ | </li> | ||
− | <li class="menu_item"> <div class="icon plus"></div> | + | <li class="menu_item"> <div class="icon plus"></div> COMPETITION |
<ul class="submenu"> | <ul class="submenu"> | ||
− | <li> <a href=" https://2016.igem.org/Team:Example/Team"> Team | + | <li> <a href=" https://2016.igem.org/Team:Example/Team"> Team List </a> </li> |
</ul> | </ul> | ||
</li> | </li> | ||
+ | |||
+ | |||
+ | <li class="menu_item"> <a href="https://2016.igem.org/Team:Example"> CALENDAR </a> </li> | ||
+ | |||
+ | |||
+ | <li class="menu_item"> <a href="https://2016.igem.org/Team:Example"> GIANT JAMBOREE</a> </li> | ||
+ | |||
+ | <li class="menu_item"> <a href="https://2016.igem.org/Team:Example"> SAFETY </a> </li> | ||
+ | |||
+ | <li class="menu_item"> <a href="https://2016.igem.org/Team:Example"> JUDGING </a> </li> | ||
+ | |||
+ | |||
+ | <li class="menu_item"> <div class="icon plus"></div> RESOURCES | ||
+ | <ul class="submenu"> | ||
+ | <li> <a href=" https://2016.igem.org/Team:Example/Team"> Team List </a> </li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | |||
+ | <li class="menu_item"> <div class="icon plus"></div> ABOUT | ||
+ | <ul class="submenu"> | ||
+ | <li> <a href=" https://2016.igem.org/Team:Example/Team"> Team List </a> </li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | |||
+ | |||
+ | |||
+ | <li class="menu_item"> <a href="https://2016.igem.org/Team:Example"> SITEMAP </a> </li> | ||
+ | |||
</ul> | </ul> | ||
Line 423: | Line 461: | ||
<div class="column full_size" > | <div class="column full_size" > | ||
− | |||
− | |||
+ | <ul class="image_slider"> | ||
+ | <li><img src="http://placehold.it/1200x400/d3d3d3/f2f2f2"></li> | ||
+ | </ul> | ||
+ | </div> | ||
− | |||
− | |||
+ | <div class="column third_size "> | ||
+ | <div class="highlight gray"> | ||
+ | |||
+ | |||
+ | <img src="http://placehold.it/800x200/d3d3d3/f2f2f2"> | ||
<h2>TESTING </h2> | <h2>TESTING </h2> | ||
<p>Lorem ipsum dolor sit amet, augue graeci ea per, ex nam dicat noster eligendi. Ne duo nonumy ponderum patrioque. Omnesque deseruisse usu at, an everti delenit lobortis eam. Nec solum sapientem salutandi ea, elitr indoctum dissentiunt pri no. | <p>Lorem ipsum dolor sit amet, augue graeci ea per, ex nam dicat noster eligendi. Ne duo nonumy ponderum patrioque. Omnesque deseruisse usu at, an everti delenit lobortis eam. Nec solum sapientem salutandi ea, elitr indoctum dissentiunt pri no. | ||
</p> | </p> | ||
− | + | </div> | |
− | </div> | + | </div> |
− | + | ||
<div class="column third_size" > | <div class="column third_size" > | ||
− | <img src="http://placehold.it/ | + | |
+ | <img src="http://placehold.it/800x200/d3d3d3/f2f2f2"> | ||
<h2>TESTING </h2> | <h2>TESTING </h2> | ||
− | <p>Lorem ipsum | + | <p>Lorem ipsum dolo</p> |
− | </p> | + | |
</div> | </div> | ||
Line 459: | Line 502: | ||
<div class="column third_size" > | <div class="column third_size" > | ||
+ | <div class="highlight gray"> | ||
− | <img src="http://placehold.it/ | + | <img src="http://placehold.it/800x200/d3d3d3/f2f2f2"> |
Line 467: | Line 511: | ||
</p> | </p> | ||
+ | </div> | ||
</div> | </div> | ||
+ | <div class="clear"></div> | ||
− | + | <div class="column half_size "> | |
− | <div class="column half_size" > | + | |
− | + | ||
<img src="http://placehold.it/800x500/d3d3d3/f2f2f2"> | <img src="http://placehold.it/800x500/d3d3d3/f2f2f2"> | ||
Line 483: | Line 528: | ||
</div> | </div> | ||
− | |||
Line 517: | Line 561: | ||
$("#HQ_page").attr('id',''); | $("#HQ_page").attr('id',''); | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | //name setup | ||
if ( wgPageName.substring( 0, 8) == "Template") { // if the page is a template it displays the full name in a single line | if ( wgPageName.substring( 0, 8) == "Template") { // if the page is a template it displays the full name in a single line | ||
Line 536: | Line 587: | ||
+ | //menu functionality | ||
$('#accordion').find('.menu_item').click(function(){ | $('#accordion').find('.menu_item').click(function(){ | ||
Line 566: | Line 618: | ||
$(".menu_item").show(); | $(".menu_item").show(); | ||
}); | }); | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | //image slider | ||
+ | |||
+ | $(function () { | ||
+ | |||
+ | var change_img_time = 3000; | ||
+ | var transition_speed = 450; | ||
+ | |||
+ | var simple_slideshow = $(".image_slider"), | ||
+ | listItems = simple_slideshow.children('li'), | ||
+ | listLen = listItems.length, | ||
+ | i = 0, | ||
+ | |||
+ | change_images = function () { | ||
+ | |||
+ | listItems.eq(i).fadeOut(transition_speed, function () { | ||
+ | |||
+ | i += 1; | ||
+ | if (i === listLen) { | ||
+ | i = 0; | ||
+ | } | ||
+ | |||
+ | listItems.eq(i).fadeIn(transition_speed); | ||
+ | }); | ||
+ | }; | ||
+ | |||
+ | listItems.not(':first').hide(); | ||
+ | setInterval( change_images, change_img_time); | ||
+ | |||
+ | }); | ||
+ | |||
+ | |||
+ | |||
+ | // load info from another page | ||
+ | |||
+ | // to use this function send the "source page" and then send the div's id to where you want to send it | ||
+ | load_these_items ( "https://2016.igem.org/Archive #load_these_newsItems", "load_newsItems_here"); | ||
}); | }); | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
Latest revision as of 20:12, 9 November 2016
TESTING
Lorem ipsum dolor sit amet, augue graeci ea per, ex nam dicat noster eligendi. Ne duo nonumy ponderum patrioque. Omnesque deseruisse usu at, an everti delenit lobortis eam. Nec solum sapientem salutandi ea, elitr indoctum dissentiunt pri no.
TESTING
Lorem ipsum dolo
TESTING
Lorem ipsum dolor sit amet, augue graeci ea per, ex nam dicat noster eligendi. Ne duo nonumy ponderum patrioque. Omnesque deseruisse usu at, an everti delenit lobortis eam. Nec solum sapientem salutandi ea, elitr indoctum dissentiunt pri no.
Lorem ipsum dolor sit amet, augue graeci ea per, ex nam dicat noster eligendi. Ne duo nonumy ponderum patrioque. Omnesque deseruisse usu at, an everti delenit lobortis eam. Nec solum sapientem salutandi ea, elitr indoctum dissentiunt pri no.
Lorem ipsum dolor sit amet, augue graeci ea per, ex nam dicat noster eligendi. Ne duo nonumy ponderum patrioque. Omnesque deseruisse usu at, an everti delenit lobortis eam. Nec solum sapientem salutandi ea, elitr indoctum dissentiunt pri no.