User:Vinoo/2014Design4

From 2014.igem.org

(Difference between revisions)
m
m
Line 1: Line 1:
-
{{CSS/Grid16}}
+
{{CSS/Nav/Grid12}}
<html>
<html>
<head>
<head>
Line 67: Line 67:
}
}
-
#navLinks {  
+
.navLinks {  
list-style-type: none;  
list-style-type: none;  
margin: 0px;  
margin: 0px;  
Line 73: Line 73:
height: 100%;  
height: 100%;  
font-family: verdana;  
font-family: verdana;  
-
vertical-align: middle;
 
}
}
-
#navLinks li {  
+
.navLinks li {  
display: inline-block;
display: inline-block;
 +
float: left;
height: 49px;
height: 49px;
padding: 0px;  
padding: 0px;  
margin: 0px;  
margin: 0px;  
-
vertical-align: middle;
 
border: 1px solid transparent;
border: 1px solid transparent;
}
}
-
#navLinks li:hover {  
+
.navLinks li:hover {  
background-color: #fff;
background-color: #fff;
border: 1px solid #ccc;
border: 1px solid #ccc;
Line 91: Line 90:
}
}
-
#navLinks a {  
+
.navLinks a {  
text-decoration: none;  
text-decoration: none;  
-
vertical-align: middle;
 
color:#000;
color:#000;
padding: 0px 30px;
padding: 0px 30px;
-
height: 100%;
+
vertical-align: middle;
 +
border-bottom: 1px solid #000;
display: block;
display: block;
}  
}  
-
#navLinks a:hover { color:#666;}
+
.navLinks a:hover { color:#666;}
Line 112: Line 111:
border-bottom: 1px solid #ccc;  
border-bottom: 1px solid #ccc;  
z-index: -100;
z-index: -100;
-
padding: 10px 0px;
+
padding: 20px 0px;
border: 1px solid #ccc;
border: 1px solid #ccc;
}
}
-
#navLinks > li:hover > .navDropMenu {display: block;}
+
.navDropMenu li {
 +
display: block;
 +
list-style: none;
 +
height: auto;
 +
padding: 3px 6px;
 +
margin: 0px;
 +
border: 0px;
 +
}
 +
.navDropMenu li:hover {
 +
border: 0px;
 +
}
 +
 
 +
.navLinks > li:hover > .navDropMenu {display: block;}
</style>
</style>
Line 123: Line 134:
<header id="topNav">
<header id="topNav">
<nav id="navContainer">
<nav id="navContainer">
-
<ul id="navLinks">
+
<ul class="navLinks">
<li style="padding: 0px;">
<li style="padding: 0px;">
<img src="https://static.igem.org/mediawiki/2014/d/d4/Logo2014.png" style="height: 60px; margin-top: -6px;" />
<img src="https://static.igem.org/mediawiki/2014/d/d4/Logo2014.png" style="height: 60px; margin-top: -6px;" />
<div class="navDropMenu">
<div class="navDropMenu">
-
<div class="container_16">
+
<div class="container_12">
-
<div class="grid_4" style="background-color: #ccc;">Lorem</div>
+
<div class="grid_3">
-
<div class="grid_4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas consectetur diam lectus, in ultrices velit dictum ac. Curabitur et diam lectus. Quisque vel cursus ante, tincidunt placerat sem. Donec porttitor tincidunt turpis non mollis. Suspendisse sed lectus non eros ullamcorper facilisis. Morbi tincidunt eu tortor dapibus blandit. Integer et urna vehicula, dignissim eros nec, venenatis erat. Vivamus eu libero sem. Nullam eget fringilla enim.</div>
+
<ul>
-
<div class="grid_4" style="background-color: #ccc;">Lorem</div>
+
<li>iGEM 2014</li>
-
<div class="grid_4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas consectetur diam lectus, in ultrices velit dictum ac. Curabitur et diam lectus. Quisque vel cursus ante, tincidunt placerat sem. Donec porttitor tincidunt turpis non mollis. Suspendisse sed lectus non eros ullamcorper facilisis. Morbi tincidunt eu tortor dapibus blandit. Integer et urna vehicula, dignissim eros nec, venenatis erat. Vivamus eu libero sem. Nullam eget fringilla enim.</div>
+
<li>2014 Teams</li>
 +
<li>2014 Team Wikis</li>
 +
<li>2014 Team Parts</li>
 +
<li>2014 Tracks</li>
 +
</ul>
 +
</div>
 +
<div class="grid_3">
 +
<ul>
 +
<li>iGEM 2014</li>
 +
<li>2014 Teams</li>
 +
<li>2014 Team Wikis</li>
 +
<li>2014 Team Parts</li>
 +
<li>2014 Tracks</li>
 +
</ul>
 +
</div>
 +
<div class="grid_6" style="background-color: #ccc;">
 +
<img src="https://static.igem.org/mediawiki/2014/c/c5/Bostonskyline01.png" width="460px"/>
 +
</div>
</div>
</div>
</div>
</div>
Line 138: Line 166:
<a href="#">About</a>
<a href="#">About</a>
<div class="navDropMenu">
<div class="navDropMenu">
-
<div class="container_16">
+
<div class="container_12">
-
<div class="grid_4" style="background-color: #ccc;">Lorem</div>
+
<div class="grid_3">
-
<div class="grid_4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas consectetur diam lectus, in ultrices velit dictum ac. Curabitur et diam lectus. Quisque vel cursus ante, tincidunt placerat sem. Donec porttitor tincidunt turpis non mollis. Suspendisse sed lectus non eros ullamcorper facilisis. Morbi tincidunt eu tortor dapibus blandit. Integer et urna vehicula, dignissim eros nec, venenatis erat. Vivamus eu libero sem. Nullam eget fringilla enim.</div>
+
<ul>
-
<div class="grid_4" style="background-color: #ccc;">Lorem</div>
+
<li>What is iGEM?</li>
-
<div class="grid_4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas consectetur diam lectus, in ultrices velit dictum ac. Curabitur et diam lectus. Quisque vel cursus ante, tincidunt placerat sem. Donec porttitor tincidunt turpis non mollis. Suspendisse sed lectus non eros ullamcorper facilisis. Morbi tincidunt eu tortor dapibus blandit. Integer et urna vehicula, dignissim eros nec, venenatis erat. Vivamus eu libero sem. Nullam eget fringilla enim.</div>
+
<li>Previous iGEM Competitions</li>
 +
<li>iGEM Headquarters</li>
 +
<li>iGEM Press Kit</li>
 +
<li>Join the iGEM Mailing List</li>
 +
<li>Sponsor iGEM</li>
 +
<li>iGEM 2014 Sponsors</li>
 +
</ul>
 +
</div>
</div>
</div>
</div>
</div>
Line 149: Line 184:
<a href="#">Start to Finish</a>
<a href="#">Start to Finish</a>
<div class="navDropMenu">
<div class="navDropMenu">
-
<div class="container_16">
+
<div class="container_12">
-
<div class="grid_4" style="background-color: #ccc;">Lorem</div>
+
<div class="grid_3">
-
<div class="grid_4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas consectetur diam lectus, in ultrices velit dictum ac. Curabitur et diam lectus. Quisque vel cursus ante, tincidunt placerat sem. Donec porttitor tincidunt turpis non mollis. Suspendisse sed lectus non eros ullamcorper facilisis. Morbi tincidunt eu tortor dapibus blandit. Integer et urna vehicula, dignissim eros nec, venenatis erat. Vivamus eu libero sem. Nullam eget fringilla enim.</div>
+
<ul>
-
<div class="grid_4" style="background-color: #ccc;">Lorem</div>
+
<li>Welcome to iGEM 2014</li>
-
<div class="grid_4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas consectetur diam lectus, in ultrices velit dictum ac. Curabitur et diam lectus. Quisque vel cursus ante, tincidunt placerat sem. Donec porttitor tincidunt turpis non mollis. Suspendisse sed lectus non eros ullamcorper facilisis. Morbi tincidunt eu tortor dapibus blandit. Integer et urna vehicula, dignissim eros nec, venenatis erat. Vivamus eu libero sem. Nullam eget fringilla enim.</div>
+
<li>Start a Team</li>
 +
<li>Calendar of Events</li>
 +
<li>Requirements</li>
 +
<li>iGEM 2014 Registration</li>
 +
</ul>
 +
 
 +
</div>
 +
<div class="grid_3">
 +
<ul>
 +
<li>Judging</li>
 +
<li>Feedback</li>
 +
<li>Judging Comments</li>
 +
</ul>
 +
</div>
 +
<div class="grid_3">
 +
<ul>
 +
<li>Teacher's Workshops</li>
 +
<li>Team Meetups</li>
 +
<li>Community</li>
 +
<li>Safety</li>
 +
<li>Security</li>
 +
</ul>
 +
</div>
 +
<div class="grid_3">
 +
<ul>
 +
<li>iGEM Photo Gallery</li>
 +
<li>iGEM Publicity</li>
 +
<li>Publications</li>
 +
</ul>
 +
</div>
</div>
</div>
</div>
</div>
Line 160: Line 224:
<a href="#">Resources</a>
<a href="#">Resources</a>
<div class="navDropMenu">
<div class="navDropMenu">
-
<div class="container_16">
+
<div class="container_12">
-
<div class="grid_4" style="background-color: #ccc;">Lorem</div>
+
-
<div class="grid_4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas consectetur diam lectus, in ultrices velit dictum ac. Curabitur et diam lectus. Quisque vel cursus ante, tincidunt placerat sem. Donec porttitor tincidunt turpis non mollis. Suspendisse sed lectus non eros ullamcorper facilisis. Morbi tincidunt eu tortor dapibus blandit. Integer et urna vehicula, dignissim eros nec, venenatis erat. Vivamus eu libero sem. Nullam eget fringilla enim.</div>
+
<div class="grid_4" style="background-color: #ccc;">Lorem</div>
<div class="grid_4" style="background-color: #ccc;">Lorem</div>
-
<div class="grid_4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas consectetur diam lectus, in ultrices velit dictum ac. Curabitur et diam lectus. Quisque vel cursus ante, tincidunt placerat sem. Donec porttitor tincidunt turpis non mollis. Suspendisse sed lectus non eros ullamcorper facilisis. Morbi tincidunt eu tortor dapibus blandit. Integer et urna vehicula, dignissim eros nec, venenatis erat. Vivamus eu libero sem. Nullam eget fringilla enim.</div>
 
</div>
</div>
</div>
</div>

Revision as of 20:35, 29 January 2014

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas consectetur diam lectus, in ultrices velit dictum ac. Curabitur et diam lectus. Quisque vel cursus ante, tincidunt placerat sem. Donec porttitor tincidunt turpis non mollis. Suspendisse sed lectus non eros ullamcorper facilisis. Morbi tincidunt eu tortor dapibus blandit. Integer et urna vehicula, dignissim eros nec, venenatis erat. Vivamus eu libero sem. Nullam eget fringilla enim.

Mauris urna orci, ultrices ut pulvinar sed, tincidunt quis neque. Donec semper tortor mattis massa adipiscing, et consequat ipsum eleifend. Curabitur vehicula gravida leo ut varius. Nullam elementum, odio in elementum porta, magna leo aliquet neque, eget blandit augue eros vel massa. Integer felis tellus, cursus ac arcu a, ullamcorper laoreet felis. Donec nec pretium felis. Phasellus nec arcu mattis, congue leo id, posuere nibh. Pellentesque velit sapien, lobortis at erat vitae, molestie sagittis leo. Aliquam pulvinar erat sed lacus tristique, id blandit nulla mattis. Pellentesque a libero mi. Curabitur mi justo, tempus nec pretium et, laoreet et tellus. Donec tincidunt vitae velit eget commodo. Nunc quis massa varius, lacinia est dictum, volutpat neque. Ut pharetra commodo metus non molestie. Etiam laoreet ut sapien nec gravida.

Aliquam dolor purus, pharetra ac tellus id, eleifend venenatis augue. Quisque lobortis augue lacus, eget consectetur diam dapibus quis. Donec ac felis eget erat scelerisque ornare ut eu metus. Mauris blandit et tellus sit amet ultricies. Nam turpis nunc, fringilla congue urna scelerisque, luctus fermentum metus. Fusce quis rhoncus quam. In eleifend commodo volutpat. Ut a porta nibh, ut gravida diam. Quisque at dolor eget massa dignissim molestie at ac leo.

Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec malesuada, urna eu cursus vehicula, lectus nisl posuere elit, eget mattis nulla erat id urna. Maecenas ultricies diam id leo mollis, at mattis eros laoreet. Maecenas commodo eleifend luctus. Curabitur diam mauris, mollis ut volutpat et, scelerisque convallis lorem. Quisque arcu est, malesuada pellentesque ligula a, luctus egestas neque. In eu auctor leo, ut lobortis ante.

Nam quis lectus auctor urna vulputate viverra eget eget lectus. Donec porta ac ipsum vitae aliquam. Nulla tempor non nisl in dictum. Nam convallis sapien vitae sem pharetra convallis. Sed sit amet justo in tortor tempus vehicula. Quisque lobortis luctus vestibulum. In quis neque et dui placerat elementum. In sodales velit vel lacus dapibus tincidunt. Maecenas placerat nec diam in malesuada. Quisque sollicitudin mattis ultricies. Nullam pretium commodo elit ac bibendum.

Nam tincidunt placerat est. Donec at luctus lorem. Vivamus sed euismod justo. Nunc imperdiet interdum justo eget placerat. Aliquam erat volutpat. Vivamus dapibus, erat id aliquam condimentum, arcu tortor malesuada neque, at auctor risus nunc vitae sem. Pellentesque iaculis, nunc eget congue mattis, augue nibh fringilla enim, sit amet porta tellus purus sit amet turpis. Integer sagittis pellentesque nibh feugiat suscipit. In hac habitasse platea dictumst. Suspendisse lorem leo, vehicula ut odio at, elementum elementum libero. Quisque tempus pulvinar posuere. Donec auctor, erat sed cursus hendrerit, enim dolor sagittis tellus, ut scelerisque erat ipsum id metus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean lacinia sodales magna, quis ullamcorper lacus pellentesque in.

Curabitur at velit sem. Phasellus dictum augue non neque rhoncus, nec dictum eros aliquet. Quisque diam nunc, dignissim nec libero a, dictum lobortis tellus. Ut aliquet dolor auctor dui interdum, non feugiat lectus auctor. Sed et ornare nulla, ac bibendum turpis. Proin suscipit vitae mauris sed dictum. Nulla id erat consequat, adipiscing ligula nec, blandit massa. Quisque placerat scelerisque nibh et gravida. Morbi dignissim odio vitae mattis rhoncus. Aliquam eleifend molestie nunc, sed feugiat magna facilisis tempor. Proin augue elit, fermentum a convallis non, egestas quis sapien. Vestibulum pulvinar purus sed metus luctus varius.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas consectetur diam lectus, in ultrices velit dictum ac. Curabitur et diam lectus. Quisque vel cursus ante, tincidunt placerat sem. Donec porttitor tincidunt turpis non mollis. Suspendisse sed lectus non eros ullamcorper facilisis. Morbi tincidunt eu tortor dapibus blandit. Integer et urna vehicula, dignissim eros nec, venenatis erat. Vivamus eu libero sem. Nullam eget fringilla enim.

Mauris urna orci, ultrices ut pulvinar sed, tincidunt quis neque. Donec semper tortor mattis massa adipiscing, et consequat ipsum eleifend. Curabitur vehicula gravida leo ut varius. Nullam elementum, odio in elementum porta, magna leo aliquet neque, eget blandit augue eros vel massa. Integer felis tellus, cursus ac arcu a, ullamcorper laoreet felis. Donec nec pretium felis. Phasellus nec arcu mattis, congue leo id, posuere nibh. Pellentesque velit sapien, lobortis at erat vitae, molestie sagittis leo. Aliquam pulvinar erat sed lacus tristique, id blandit nulla mattis. Pellentesque a libero mi. Curabitur mi justo, tempus nec pretium et, laoreet et tellus. Donec tincidunt vitae velit eget commodo. Nunc quis massa varius, lacinia est dictum, volutpat neque. Ut pharetra commodo metus non molestie. Etiam laoreet ut sapien nec gravida.

Aliquam dolor purus, pharetra ac tellus id, eleifend venenatis augue. Quisque lobortis augue lacus, eget consectetur diam dapibus quis. Donec ac felis eget erat scelerisque ornare ut eu metus. Mauris blandit et tellus sit amet ultricies. Nam turpis nunc, fringilla congue urna scelerisque, luctus fermentum metus. Fusce quis rhoncus quam. In eleifend commodo volutpat. Ut a porta nibh, ut gravida diam. Quisque at dolor eget massa dignissim molestie at ac leo.

Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec malesuada, urna eu cursus vehicula, lectus nisl posuere elit, eget mattis nulla erat id urna. Maecenas ultricies diam id leo mollis, at mattis eros laoreet. Maecenas commodo eleifend luctus. Curabitur diam mauris, mollis ut volutpat et, scelerisque convallis lorem. Quisque arcu est, malesuada pellentesque ligula a, luctus egestas neque. In eu auctor leo, ut lobortis ante.

Nam quis lectus auctor urna vulputate viverra eget eget lectus. Donec porta ac ipsum vitae aliquam. Nulla tempor non nisl in dictum. Nam convallis sapien vitae sem pharetra convallis. Sed sit amet justo in tortor tempus vehicula. Quisque lobortis luctus vestibulum. In quis neque et dui placerat elementum. In sodales velit vel lacus dapibus tincidunt. Maecenas placerat nec diam in malesuada. Quisque sollicitudin mattis ultricies. Nullam pretium commodo elit ac bibendum.

Nam tincidunt placerat est. Donec at luctus lorem. Vivamus sed euismod justo. Nunc imperdiet interdum justo eget placerat. Aliquam erat volutpat. Vivamus dapibus, erat id aliquam condimentum, arcu tortor malesuada neque, at auctor risus nunc vitae sem. Pellentesque iaculis, nunc eget congue mattis, augue nibh fringilla enim, sit amet porta tellus purus sit amet turpis. Integer sagittis pellentesque nibh feugiat suscipit. In hac habitasse platea dictumst. Suspendisse lorem leo, vehicula ut odio at, elementum elementum libero. Quisque tempus pulvinar posuere. Donec auctor, erat sed cursus hendrerit, enim dolor sagittis tellus, ut scelerisque erat ipsum id metus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean lacinia sodales magna, quis ullamcorper lacus pellentesque in.

Curabitur at velit sem. Phasellus dictum augue non neque rhoncus, nec dictum eros aliquet. Quisque diam nunc, dignissim nec libero a, dictum lobortis tellus. Ut aliquet dolor auctor dui interdum, non feugiat lectus auctor. Sed et ornare nulla, ac bibendum turpis. Proin suscipit vitae mauris sed dictum. Nulla id erat consequat, adipiscing ligula nec, blandit massa. Quisque placerat scelerisque nibh et gravida. Morbi dignissim odio vitae mattis rhoncus. Aliquam eleifend molestie nunc, sed feugiat magna facilisis tempor. Proin augue elit, fermentum a convallis non, egestas quis sapien. Vestibulum pulvinar purus sed metus luctus varius.

<nocomments />