Template:Http://2014.igem.org/Team:Colombia

From 2013.igem.org

(Difference between revisions)
Line 54: Line 54:
 +
</style>
-
<ul class="flatflipbuttons">
+
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
-
<li><a href="http://www.dynamicdrive.com" title="Search"><span class="icon-search"></span></a> <b>Search</b></li>
+
-
<li><a href="http://www.dynamicdrive.com"><span class="icon-gears"></span></a> <b>Gears</b></li>
+
-
<li><a href="http://www.dynamicdrive.com"><span class="icon-rss"></span></a> <b>RSS</b></li>
+
-
<li><a href="http://www.dynamicdrive.com"><span class="icon-twitter"></span></a> <b>Twitter</b></li>
+
-
<li><a href="http://www.dynamicdrive.com"><span class="icon-rocket"></span></a> <b>Rocket</b></li>
+
-
</ul>
+
-
<br /><br />
+
<style>
-
<ul class="flatflipbuttons second">
+
ul.flatflipbuttons{
-
<li><a href="http://www.dynamicdrive.com"><span><img src="http://www.dynamicdrive.com/cssexamples/media/rss-heart.png" /></span></a></li>
+
margin:0;
-
<li><a href="http://www.dynamicdrive.com"><span><img src="http://www.dynamicdrive.com/cssexamples/media/twitter-heart.png" /></span></a></li>
+
padding:0;
-
<li><a href="http://www.dynamicdrive.com"><span><img src="http://www.dynamicdrive.com/cssexamples/media/facebook-heart.png" /></span></a></li>
+
list-style:none;
-
<li><a href="http://www.dynamicdrive.com"><span><img src="http://www.dynamicdrive.com/cssexamples/media/google-heart.png" /></span></a></li>
+
-webkit-perspective: 10000px; /* larger the value, the less pronounced the 3D effect */
-
<li><a href="http://www.dynamicdrive.com"><span><img src="http://www.dynamicdrive.com/cssexamples/media/stumble-heart.png" /></span></a></li>
+
-moz-perspective: 10000px;
-
</ul>
+
perspective: 10000px;
 +
}
 +
ul.flatflipbuttons li{
 +
margin:0;
 +
display: block;
 +
width: 100px; /* dimensions of buttons. */
 +
height: 100px;
 +
margin-bottom: 0; /* spacing between buttons */
 +
background: white;
 +
text-transform: uppercase;
 +
text-align: center;
 +
}
 +
ul.flatflipbuttons li a{
 +
display:table;
 +
font: bold 36px Arial; /* font size, pertains to icon fonts specifically */
 +
width: 100%;
 +
height: 100%;
 +
color: black;
 +
background: #3B9DD5;
 +
text-decoration: none;
 +
outline: none;
 +
-webkit-transition:all 300ms ease-out; /* CSS3 transition. */
 +
-moz-transition:all 300ms ease-out;
 +
transition:all 300ms ease-out;
 +
}
 +
ul.flatflipbuttons li:nth-of-type(1) a{
 +
color: white;
 +
background: #3B9DD5;
 +
}
 +
 +
ul.flatflipbuttons li:nth-of-type(2) a{
 +
background: #A1CD3A;
 +
}
 +
 +
ul.flatflipbuttons li:nth-of-type(3) a{
 +
background: #80C5EC;
 +
}
 +
 +
ul.flatflipbuttons li:nth-of-type(4) a{
 +
color: white;
 +
background: #635746;
 +
}
 +
 +
ul.flatflipbuttons li:nth-of-type(5) a{
 +
background: #F2C96D;
 +
}
 +
 +
ul.flatflipbuttons li a span{
 +
-moz-box-sizing: border-box;
 +
-webkit-box-sizing: border-box;
 +
box-sizing: border-box;
 +
display: table-cell;
 +
vertical-align: middle;
 +
width: 100%;
 +
height: 100%;
 +
-webkit-transition: all 300ms ease-out; /* CSS3 transition. */
 +
-moz-transition: all 300ms ease-out;
 +
transition: all 300ms ease-out;
 +
}
 +
 +
ul.flatflipbuttons li b{ /* CSS for text alongside button */
 +
display: block;
 +
position: relative;
 +
top: -100%; /* starting vertical position of text */
 +
left: 100%; /* horizontal position of text */
 +
text-align: left;
 +
text-indent: 10px;
 +
width: 100%;
 +
opacity: 0;
 +
-webkit-transition: all 300ms ease-out 0.2s; /* CSS3 transition. 0.2s delay */
 +
-moz-transition: all 300ms ease-out 0.2s;
 +
transition: all 300ms ease-out 0.5s;
 +
}
 +
 +
 +
ul.flatflipbuttons li a img{ /* CSS for image if defined inside button */
 +
border-width: 0;
 +
vertical-align: middle;
 +
}
 +
 +
 +
ul.flatflipbuttons li:hover a{
 +
-webkit-transform: rotateY(180deg); /* flip horizontally 180deg*/
 +
-moz-transform: rotateY(180deg);
 +
transform: rotateY(180deg);
 +
background: #c1e4ec; /* bgcolor of button onMouseover*/
 +
-webkit-transition-delay: 0.2s;
 +
-moz-transition-delay: 0.2s;
 +
transition-delay: 0.2s;
 +
}
 +
 +
ul.flatflipbuttons li:hover a span{
 +
color: black; /* color of icon font onMouseover */
 +
-webkit-transform: rotateY(180deg);
 +
-moz-transform: rotateY(180deg); /* flip horizontally 180deg*/
 +
transform: rotateY(180deg);
 +
-webkit-transition-delay: 0.2s;
 +
-moz-transition-delay: 0.2s;
 +
transition-delay: 0.2s;
 +
}
 +
 +
 +
ul.flatflipbuttons li:hover b{
 +
opacity: 1;
 +
top: -65%; /* vertical position of text onmouseover */
 +
}
 +
 +
/* CSS for 2nd menu below specifically */
 +
 +
ul.second li a{
 +
background: #eee !important;
 +
}
 +
 +
ul.second li a:hover{
 +
background: #ddd !important;
 +
}
</style>
</style>
 +
 +
 +
<!--  here ends the section that changes the default wiki template to a white full width background -->'
<!--  here ends the section that changes the default wiki template to a white full width background -->'
Line 332: Line 445:
<!-- end of 3 column content -->
<!-- end of 3 column content -->
 +
 +
 +
<ul class="flatflipbuttons">
 +
<li><a href="http://www.dynamicdrive.com" title="Search"><span class="icon-search"></span></a> <b>Search</b></li>
 +
<li><a href="http://www.dynamicdrive.com"><span class="icon-gears"></span></a> <b>Gears</b></li>
 +
<li><a href="http://www.dynamicdrive.com"><span class="icon-rss"></span></a> <b>RSS</b></li>
 +
<li><a href="http://www.dynamicdrive.com"><span class="icon-twitter"></span></a> <b>Twitter</b></li>
 +
<li><a href="http://www.dynamicdrive.com"><span class="icon-rocket"></span></a> <b>Rocket</b></li>
 +
</ul>
 +
 +
<br /><br />
 +
 +
<ul class="flatflipbuttons second">
 +
<li><a href="http://www.dynamicdrive.com"><span><img src="http://www.dynamicdrive.com/cssexamples/media/rss-heart.png" /></span></a></li>
 +
<li><a href="http://www.dynamicdrive.com"><span><img src="http://www.dynamicdrive.com/cssexamples/media/twitter-heart.png" /></span></a></li>
 +
<li><a href="http://www.dynamicdrive.com"><span><img src="http://www.dynamicdrive.com/cssexamples/media/facebook-heart.png" /></span></a></li>
 +
<li><a href="http://www.dynamicdrive.com"><span><img src="http://www.dynamicdrive.com/cssexamples/media/google-heart.png" /></span></a></li>
 +
<li><a href="http://www.dynamicdrive.com"><span><img src="http://www.dynamicdrive.com/cssexamples/media/stumble-heart.png" /></span></a></li>
 +
</ul>

Revision as of 23:13, 20 August 2014

'


Home Team Official Team Profile Project Parts Modeling Notebook Safety Attributions

Welcome !

This is a basic template you may use to customize your wiki, you can take it apart and modify it as much as you want. The links and tabs provided here are basic suggestions, feel free to adapt it for your team and your project.

If you are looking for general wiki guidelines, restrictions, design tips and more, visit the
Wiki How-To Page

Results

Lorem ipsum ad his scripta blandit partiendo, eum fastidii accumsan euripidis in, eum liber hendrerit an. Qui ut wisi vocibus suscipiantur, quo dicit ridens inciderint id.

Human Practice

Lorem ipsum ad his scripta blandit partiendo, eum fastidii accumsan euripidis in, eum liber hendrerit an. Qui ut wisi vocibus suscipiantur, quo dicit ridens inciderint id.

Follow us on Twitter/Facebook!

Lorem ipsum ad his scripta blandit partiendo, eum fastidii accumsan euripidis in, eum liber hendrerit an. Qui ut wisi vocibus suscipiantur, quo dicit ridens inciderint id.

  • Search
  • Gears
  • RSS
  • Twitter
  • Rocket



Retrieved from "http://2013.igem.org/Template:Http://2014.igem.org/Team:Colombia"