Difference between revisions of "Team:Northwestern/Lab"

Line 10: Line 10:
 
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lora">
 
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lora">
 
<link rel="stylesheet" href="https://cdhttps://2017.igem.org/njs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
 
<link rel="stylesheet" href="https://cdhttps://2017.igem.org/njs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
−
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
 
 
<script src="//use.edgefonts.net/josefin-sans:n1,i1,n3,i3,n4,i4,n6,i6,n7,i7.js"></script>
 
<script src="//use.edgefonts.net/josefin-sans:n1,i1,n3,i3,n4,i4,n6,i6,n7,i7.js"></script>
 
<script src="//use.edgefonts.net/aladin.js"></script>
 
<script src="//use.edgefonts.net/aladin.js"></script>
  
 +
<style>
 +
input:focus { outline: none; }
  
 +
body,html{
 +
width: 100%;
 +
height: 100%;
 +
background: url('http://subtlepatterns.com/patterns/crossword.png');
 +
background-repeat: repeat;
 +
}
 +
 +
a {
 +
color: white;
 +
outline: none !important;
 +
}
 +
 +
a:-webkit-any-link{
 +
text-decoration: none !important;
 +
}
 +
 +
ul{
 +
list-style-type: none;
 +
-webkit-padding-start: 0 !important;
 +
}
 +
 +
.trackAccordion{
 +
margin: 50px auto;
 +
background-color: #2d2d2d;
 +
height: 790px;
 +
width: 296px;
 +
border-radius: 5px;
 +
color: white;
 +
font-family: 'Helvetica';
 +
font-weight: bold;
 +
padding-top: 30px;
 +
font-size: 1em;
 +
text-align: center;
 +
overflow: hidden;
 +
}
 +
 +
ul.trackAccordion > li{
 +
color: white;
 +
padding-bottom: 20px;
 +
padding-top: 20px;
 +
border-bottom: thick solid #464646;
 +
}
 +
 +
ul.tracks > li{
 +
padding: 20px;
 +
background-color: #444444;
 +
margin-bottom: 2px;
 +
margin-left: -10px;
 +
text-align: left;
 +
font-weight: normal;
 +
font-size: 14px;
 +
 +
}
 +
 +
ul#cert_Track > li{
 +
border-left:thick solid #01cfe7;
 +
border-left-width:20px;
 +
}
 +
 +
ul#kids_Track > li{
 +
border-left:thick solid #aa2e54;
 +
border-left-width:20px;
 +
}
 +
 +
ul#more_Track > li{
 +
border-left:thick solid #618daa;
 +
border-left-width:20px;
 +
}
 +
 +
 +
.proTrack{
 +
padding-top: 0 !important;
 +
}
 +
 +
.accoTrack{
 +
margin-bottom: 30px;
 +
}
 +
.blueBorder{
 +
background: #00d0e7;
 +
position: relative;
 +
left: -58px;
 +
padding: 20px 13px 19px 7px;
 +
}
 +
 +
.nestedElemAccor{
 +
margin-top: -20px;
 +
}
 +
.nestedElems{
 +
border-bottom: none;
 +
}
 +
 +
.begNestElem{
 +
background-color: #0bddf0;
 +
padding: 13px 105px 13px 105px
 +
}
 +
 +
.intNestElem{
 +
background-color: #08a2b0;
 +
padding: 13px 105px 13px 105px
 +
}
 +
 +
.advNestElem{
 +
background-color: #067983;
 +
padding: 13px 105px 13px 105px
 +
}
 +
.trackAccordion {
 +
  margin: 50px auto;
 +
  background-color: #2d2d2d;
 +
  height: 790px;    //Check by commenting the height.
 +
  width: 296px;
 +
  border-radius: 5px;
 +
  color: white;
 +
  font-family: 'Helvetica';
 +
  font-weight: bold;
 +
  padding-top: 30px;
 +
  font-size: 1em;
 +
  text-align: center;
 +
  overflow: hidden;
 +
}
 +
 +
</style>
 +
 +
    <body>
 +
<ul class = "trackAccordion">
 +
<li class = "proTrack">
 +
<a href="#">PROFESSIONALhttp://jsfiddle.net/jakecigar/uou44bbe/3/# TRACK</a>
 +
</li>
 +
 +
<li>
 +
<a href="#"><span class = "accoTrack"> CERTIFICATION TRACK </span> </a>
 +
<ul class = "tracks" id = "cert_Track">
 +
<li>DJ Certificate Program</li>
 +
<li>Music Production Certificate Program</li>
 +
</ul>
 +
</li>
 +
 +
<li> <!-- element which hold Individual class in accordian -->
 +
 +
<a href="#">INDIVIDUAL CLASSES</a>
 +
<ul class = "course_beginner trackAccordion nestedElemAccor">
 +
 +
<li class = "nestedElems">
 +
<a href="#" class="begNestElem">BEGINNER</a>
 +
<ul class="tracks">
 +
<li>Intro to DJing (DJ 101)</li>
 +
<li>Intensive Beginners (DJ INT)</li>
 +
<li>Intensive Beginners (DJ INT)</li>
 +
</ul>
 +
</li>
 +
 +
<li class = "nestedElems">
 +
<a href="#" class="intNestElem">INTERMEDIATE</a>
 +
<ul class="tracks">
 +
<li>Mixing (M 202)</li>
 +
<li>Scratching (S 202)</li>
 +
<li>Music Production II (MP 202)</li>
 +
</ul>
 +
</li>
 +
 +
<li class = "nestedElems">
 +
<a href="#" class="advNestElem">ADVANCED</a>
 +
<ul class="tracks">
 +
<li>Mixing III (M 303)</li>
 +
<li>Mixing IV (M 404)</li>
 +
<li>Mixing V (M 505)</li>
 +
<li>Scratching III (S 303) </li>
 +
<li>Battle DJing (S 404)</li>
 +
<li>Music Production III (MP 303)</li>
 +
<li>Music Production IV (MP 404)</li>
 +
<li>Master Class - Team Routines</li>
 +
</ul>
 +
</li>
 +
 +
</ul>
 +
</li> <!-- END element which hold Individual class in accordian -->
 +
 +
<li>
 +
<a href="#">FOR KIDS</a>
 +
<ul class = "tracks" id = "kids_Track">
 +
<li>Summer Camps</li>
 +
<li>Afterschool Classes</li>
 +
</ul>
 +
</li>
 +
 +
<li>
 +
<a href="#">FREE OPEN HOUSES</a>
 +
</li>
 +
 +
<li>
 +
<a href="#">MORE OPTIONS</a>
 +
<ul class = "tracks" id = "more_Track">
 +
<li>Private Lessons</li>
 +
<li>Group Events</li>
 +
<li>Workshops</li>
 +
</ul>
 +
</li>
 +
</ul>
 +
 +
 +
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
 +
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/jquery-ui.min.js"></script>
 +
       
 +
</body>
 +
 +
<script>
 +
$( document ).ready(function() {
 +
  $("ul.trackAccordion").accordion({
 +
  collapsible: true,
 +
  active: false,
 +
  heightStyle: "content"
 +
  });
 +
});
 +
 +
</script>
  
 
</html>
 
</html>
 
{{Northwestern_Page_Foot}}
 
{{Northwestern_Page_Foot}}

Revision as of 18:07, 25 August 2017

Northwestern Template Northwestern Template

Overview Silver Gold Integrated Engagement
Overview Basic
Experiments Results Notebook Saftey Interlab
Description Design
About Us Attributions Collaboration
Home

Northwestern Template