Difference between revisions of "Template:Example2"

Line 288: Line 288:
  
  
−
 
−
 
−
/********************************* RESPONSIVE STYLING ********************************/
 
−
 
−
/* IF THE SCREEN IS LESS THAN 1200PX */
 
−
 
−
@media only screen and (max-width: 1200px) {
 
−
 
−
#content {width:100%; }
 
−
.igem_2017_menu_wrapper {width:15%; right:0;}
 
−
.highlight {padding:10px 0px;}
 
−
 
−
}
 
−
 
−
 
−
 
−
 
−
/* IF THE SCREEN IS LESS THAN 800PX */
 
−
 
−
@media only screen and (max-width: 800px) {
 
−
 
−
.igem_2017_menu_wrapper { width:100%; height: 15%; position:relative; left:0%;}
 
−
.igem_2017_content_wrapper {width:100%; margin-left:0px;}
 
−
.column.half_size  {width:100%; }
 
−
.column.full_size img, .column.half_size img { padding: 10px 0px; width: 100%;}
 
−
.highlight {padding:15px 5px;}
 
−
}
 
−
 
−
</style>
 
−
 
−
 
−
 
−
 
−
<!--- THIS IS WHERE THE HTML BEGINS --->
 
−
 
−
 
−
<!-- This tells the browser that your page is responsive -->
 
−
 
−
<head>
 
−
<meta name="viewport" content="width=device-width, initial-scale=1">
 
−
 
−
 
−
</head>
 
−
 
−
 
−
 
−
 
−
<style>
 
 
.menu_button{ width: 100%; border-bottom: 1px solid #d3d3d3; padding: 10px 0px 10px 25px; font-weight: bold; font-size: 12px; color: #5e5f5f; float:left; cursor: pointer;}
 
.menu_button{ width: 100%; border-bottom: 1px solid #d3d3d3; padding: 10px 0px 10px 25px; font-weight: bold; font-size: 12px; color: #5e5f5f; float:left; cursor: pointer;}
  
Line 368: Line 320:
 
}
 
}
  
−
</style>
+
/********************************* RESPONSIVE STYLING ********************************/
−
 
+
−
 
+
−
<div class="igem_2017_menu_wrapper" >
+
−
 
+
−
<a href="">
+
−
<img src="http://placehold.it/350x150">
+
−
</a>
+
−
 
+
−
 
+
−
<div class="menu_button" id="display_menu_control">
+
−
MENU 
+
−
</div>
+
−
 
+
−
<div id="menu_content">
+
−
<div class="menu_button">
+
−
TEAM
+
−
</div>
+
−
 
+
−
<div class="submenu_wrapper">
+
−
<a href="">
+
−
<div class="submenu_button">
+
−
Team
+
−
</div>
+
−
</a>
+
−
 
+
−
<a href="">
+
−
<div class="submenu_button">
+
−
Collaborations
+
−
</div>
+
−
</a>
+
−
 
+
−
</div>
+
−
 
+
−
 
+
−
 
+
−
<div class="menu_button">
+
−
PROJECT
+
−
</div>
+
−
 
+
−
<div class="submenu_wrapper">
+
−
<a href="">
+
−
<div class="submenu_button">
+
−
Description
+
−
</div>
+
−
</a>
+
−
 
+
−
<a href="">
+
−
<div class="submenu_button">
+
−
Design
+
−
</div>
+
−
</a>
+
−
 
+
−
<a href="">
+
−
<div class="submenu_button">
+
−
Experiments
+
−
</div>
+
−
</a>
+
−
 
+
−
 
+
−
<a href="">
+
−
<div class="submenu_button">
+
−
Notebook
+
−
</div>
+
−
</a>
+
−
 
+
−
<a href="">
+
−
<div class="submenu_button">
+
−
InterLab
+
−
</div>
+
−
</a>
+
−
 
+
−
<a href="">
+
−
<div class="submenu_button">
+
−
Characterization
+
−
</div>
+
−
</a>
+
−
 
+
−
<a href="">
+
−
<div class="submenu_button">
+
−
Model
+
−
</div>
+
−
</a>
+
−
 
+
−
<a href="">
+
−
<div class="submenu_button">
+
−
Results
+
−
</div>
+
−
</a>
+
−
 
+
−
 
+
−
<a href="">
+
−
<div class="submenu_button">
+
−
Demonstrate
+
−
</div>
+
−
</a>
+
−
 
+
−
<a href="">
+
−
<div class="submenu_button">
+
−
Improve
+
−
</div>
+
−
</a>
+
−
 
+
−
<a href="">
+
−
<div class="submenu_button">
+
−
Attribution
+
−
</div>
+
−
</a>
+
−
 
+
−
 
+
−
 
+
−
</div>
+
−
 
+
−
 
+
−
<div class="menu_button">
+
−
PARTS
+
−
</div>
+
−
 
+
−
<div class="submenu_wrapper">
+
−
<a href="">
+
−
<div class="submenu_button">
+
−
Parts
+
−
</div>
+
−
</a>
+
−
 
+
−
<a href="">
+
−
<div class="submenu_button">
+
−
Basic Parts
+
−
</div>
+
−
</a>
+
−
 
+
−
<a href="">
+
−
<div class="submenu_button">
+
−
Composite Parts
+
−
</div>
+
−
</a>
+
−
 
+
−
<a href="">
+
−
<div class="submenu_button">
+
−
Part Collection
+
−
</div>
+
−
</a>
+
−
 
+
−
 
+
−
</div>
+
−
 
+
−
 
+
−
<a href="">
+
−
<div class="menu_button">
+
−
SAFETY
+
−
</div>
+
−
</a>
+
−
 
+
−
<div class="menu_button" >
+
−
HUMAN PRACTICES
+
−
</div>
+
−
 
+
−
<div class="submenu_wrapper">
+
−
 
+
−
<a href="">
+
−
<div class="submenu_button">
+
−
Silver HP
+
−
</div>
+
−
</a>
+
−
 
+
−
<a href="">
+
−
<div class="submenu_button">
+
−
Integrated Design
+
−
</div>
+
−
</a>
+
−
 
+
−
 
+
−
<a href="">
+
−
<div class="submenu_button">
+
−
Public Engagement
+
−
</div>
+
−
</a>
+
−
 
+
−
</div>
+
−
 
+
−
 
+
−
<div class="menu_button">
+
−
AWARDS
+
−
</div>
+
−
<div class="submenu_wrapper">
+
−
 
+
−
<a href="">
+
−
<div class="submenu_button">
+
−
Applied Design
+
−
</div>
+
−
</a>
+
−
 
+
−
<a href="">
+
−
<div class="submenu_button">
+
−
Entrepreneurship
+
−
</div>
+
−
</a>
+
−
 
+
−
<a href="">
+
−
<div class="submenu_button">
+
−
Hardware
+
−
</div>
+
−
</a>
+
−
 
+
−
<a href="">
+
−
<div class="submenu_button">
+
−
Software
+
−
</div>
+
−
</a>
+
−
 
+
−
<a href="">
+
−
<div class="submenu_button">
+
−
Measurement
+
−
</div>
+
−
</a>
+
−
 
+
−
 
+
−
<a href="">
+
−
<div class="submenu_button">
+
−
Model
+
−
</div>
+
−
</a>
+
−
 
+
−
<a href="">
+
−
<div class="submenu_button">
+
−
Plant
+
−
</div>
+
−
</a>
+
−
 
+
−
</div>
+
−
</div>
+
−
</div>
+
−
 
+
−
 
+
−
<div class="igem_2017_content_wrapper">
+
−
 
+
−
 
+
−
<div class="column full_size" >
+
−
 
+
−
 
+
−
<img src="http://placehold.it/850x150">
+
−
<h1> Full size </h1>
+
−
 
+
−
<p>
+
−
Lorem ipsum dolor sit amet, veri ipsum disputando cu usu, an eum pertinax posidonium, ius malorum intellegam et. Eam perfecto periculis prodesset ne, possim nostrum referrentur ne his, alii aperiam referrentur eu ius. Ad quo sint quidam graeco. Te vis alii legimus. Est cu numquam maiestatis delicatissimi. Dicat nonumy melius sea et.
+
−
</p>
+
−
 
+
−
</div>
+
−
 
+
−
 
+
−
 
+
−
<div class="column half_size" >
+
−
<h2> Half size </h2>
+
−
<p>
+
−
Lorem ipsum dolor sit amet, veri ipsum disputando cu usu, an eum pertinax posidonium, ius malorum intellegam et. Eam perfecto periculis prodesset ne, possim nostrum referrentur ne his, alii aperiam referrentur eu ius. Ad quo sint quidam graeco. Te vis alii legimus. Est cu numquam maiestatis delicatissimi. Dicat nonumy melius sea et.
+
−
Sed persius efficiantur ea, id solet gubergren eloquentiam qui. Ut nisl sonet quo. Persius fabulas te eum, in hinc diceret appellantur per, cu natum putant vulputate mel. Qui falli consectetuer an, probo assueverit necessitatibus eam ei. His in dico possim, ferri fastidii at mea. Ad vix scripta invidunt consequuntur, ne mea fastidii percipitur efficiantur, pertinax nominati no mea.
+
−
 
+
−
Impetus honestatis sea ut. No tempor tacimates explicari eam. Dicam iuvaret in ius, cu solet oratio vis, dicant latine constituam his eu. Cetero labores conclusionemque id quo, probo justo nonumy pri cu. Et tollit tempor assueverit pri.
+
−
 
+
−
An has quando altera mollis. An quis insolens vim, iisque corrumpit concludaturque et eam. Vim posse delectus ut. Quaerendum theophrastus no has, ad sit ipsum forensibus. Cu quas aperiri mea, duo no diceret apeirian.
+
−
 
+
−
</p>
+
−
 
+
−
<a href="">
+
−
<div class=" button">
+
−
CLICK HERE
+
−
</div>
+
−
</a>
+
−
 
+
−
 
+
−
</div>
+
−
 
+
−
 
+
−
<div class="clear"></div>
+
−
 
+
−
 
+
−
 
+
−
<div class="column half_size" >
+
−
<div class="highlight">
+
−
<p>
+
−
Lorem ipsum dolor sit amet, veri ipsum disputando cu usu, an eum pertinax posidonium, ius malorum intellegam et. Eam perfecto periculis prodesset ne, possim nostrum referrentur ne his, alii aperiam referrentur eu ius. Ad quo sint quidam graeco. Te vis alii legimus. Est cu numquam maiestatis delicatissimi. Dicat nonumy melius sea et.
+
−
</p>
+
−
</div>
+
−
</div>
+
−
 
+
−
<div class="clear"></div>
+
−
 
+
−
 
+
−
<div class="column half_size" >
+
−
<div class="highlight gray">
+
−
<p>
+
−
Lorem ipsum dolor sit amet, veri ipsum disputando cu usu, an eum pertinax posidonium, ius malorum intellegam et. Eam perfecto periculis prodesset ne, possim nostrum referrentur ne his, alii aperiam referrentur eu ius. Ad quo sint quidam graeco. Te vis alii legimus. Est cu numquam maiestatis delicatissimi. Dicat nonumy melius sea et.
+
−
</p>
+
−
</div>
+
−
</div>
+
−
 
+
−
 
+
−
<div class="clear"></div>
+
−
 
+
−
 
+
−
 
+
−
<div class="column half_size" >
+
−
<div class="highlight gray blue_top">
+
−
<p>
+
−
Lorem ipsum dolor sit amet, veri ipsum disputando cu usu, an eum pertinax posidonium, ius malorum intellegam et. Eam perfecto periculis prodesset ne, possim nostrum referrentur ne his, alii aperiam referrentur eu ius. Ad quo sint quidam graeco. Te vis alii legimus. Est cu numquam maiestatis delicatissimi. Dicat nonumy melius sea et.
+
−
</p>
+
−
</div>
+
−
</div>
+
−
 
+
−
<div class="clear"></div>
+
−
 
+
−
<div class="column half_size" >
+
−
<div class="highlight gray blue_border">
+
−
<p>
+
−
Lorem ipsum dolor sit amet, veri ipsum disputando cu usu, an eum pertinax posidonium, ius malorum intellegam et. Eam perfecto periculis prodesset ne, possim nostrum referrentur ne his, alii aperiam referrentur eu ius. Ad quo sint quidam graeco. Te vis alii legimus. Est cu numquam maiestatis delicatissimi. Dicat nonumy melius sea et.
+
−
</p>
+
−
</div>
+
−
</div>
+
−
 
+
−
 
+
−
<div class="clear"></div>
+
  
 +
/* IF THE SCREEN IS LESS THAN 1200PX */
  
 +
@media only screen and (max-width: 1200px) {
  
 +
#content {width:100%; }
 +
.igem_2017_menu_wrapper {width:15%; right:0;}
 +
.highlight {padding:10px 0px;}
  
 +
}
  
  
  
  
 +
/* IF THE SCREEN IS LESS THAN 800PX */
  
 +
@media only screen and (max-width: 800px) {
  
 +
.igem_2017_menu_wrapper { width:100%; height: 15%; position:relative; left:0%;}
 +
.igem_2017_content_wrapper {width:100%; margin-left:0px;}
 +
.column.half_size  {width:100%; }
 +
.column.full_size img, .column.half_size img { padding: 10px 0px; width: 100%;}
 +
.highlight {padding:15px 5px;}
 +
}
  
 +
</style>
  
−
</div>
 
  
  
 
</html>
 
</html>

Revision as of 14:20, 22 February 2017