Difference between revisions of "Team:Carnegie Mellon/CSS"

Line 3: Line 3:
 
<html>
 
<html>
 
<head>
 
<head>
 +
<script>
 +
 +
$(document).ready(function(){
 +
    //  When user clicks on tab, this code will be executed
 +
    $("#mtabs li").click(function() {
 +
        //  First remove class "active" from currently active tab
 +
        $("#mtabs li").removeClass('active');
 +
 +
        //  Now add class "active" to the selected/clicked tab
 +
      $(this).addClass("active");
 +
 +
        //  Hide all tab content
 +
        $(".mtab_content").hide();
 +
 +
        //  Here we get the href value of the selected tab
 +
        var selected_tab = $(this).find("a").attr("href");
 +
 +
        //  Show the selected tab content
 +
        $(selected_tab).fadeIn();
 +
 +
        //  At the end, we add return false so that the click on the link is not executed
 +
        return false;
 +
    });
 +
  $("#simulate").click(function(){
 +
    $('a[rel="tab2"]').trigger("click");
 +
  });
 +
});
 +
 +
 +
</script>
 +
 
<style src = "" type = "text/css">
 
<style src = "" type = "text/css">
 
     /* links to the style sheets for bootstrap */
 
     /* links to the style sheets for bootstrap */
Line 26: Line 57:
 
}
 
}
  
−
/* start styling */
 
  
−
.jumbotron {
+
#mtabs_wrapper {
−
  background-image:url('https://33.media.tumblr.com/7ce67dfb237577c03e9b9de40046e21e/tumblr_mozdt8BMGy1riyob5o1_500.gif');
+
    width: 422px;
−
  height: 600px;
+
−
  background-repeat: no-repeat;
+
−
  background-size: cover;
+
−
  margin-top: 15px;
+
 
}
 
}
−
 
+
#mtabs_container {
−
.jumbotron .container {
+
    border-bottom: 1px solid #ccc;
−
  position: relative;
+
−
  top:150px;
+
 
}
 
}
−
 
+
#mtabs {
−
.jumbotron h1 {
+
    list-style: none;
−
  color: #fff;
+
    padding: 5px 0 4px 0;
−
  font-size: 100px;
+
    margin: 0 0 0 0px;
−
  font-family: Georgia, serif;
+
    /* font: 0.75em arial; */
−
  font-weight: bold;
+
−
  text-align: center;
+
 
}
 
}
−
 
+
#mtabs li {
−
.jumbotron p {
+
    display: inline;
−
  font-size: 50px;
+
−
  color: #fff;
+
−
  text-align: center;
+
−
  font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
+
 
}
 
}
−
 
+
#mtabs li a {
−
.jumbotron a {
+
    border: 1px solid #ccc;
−
  background-color: #c5c51b;
+
    padding: 4px 6px;
−
  font-size: 25px;
+
    text-decoration: none;
−
  color: #fff;
+
    color:#000;
−
  padding: 10px 15px 10px 15px;
+
    font-family: Artifika, serif;
 +
    background-color: #eeeeee;
 +
    font-size:14px;
 +
    /*border-bottom: 1px solid #ccc;
 +
    outline: none;*/
 +
    border-radius: 5px 5px 5px 5px;
 +
    -moz-border-radius: 5px 5px 5px 5px;
 +
    -webkit-border-top-left-radius: 5px;
 +
    -webkit-border-top-right-radius: 5px;
 
}
 
}
−
 
+
#mtabs li a:hover {
−
.container {
+
    background-color: #dddddd;
−
  text-align: center;
+
    padding: 4px 6px;
 
}
 
}
−
 
+
#mtabs li.active a {
−
 
+
     border-bottom: 1px solid #ccc;
−
.row {
+
    background-color: #fff;
−
     margin-left: 15px;
+
    padding: 4px 6px 5px 6px;
−
     margin-right: 15px;
+
     /*border-bottom: none;*/
 
}
 
}
−
 
+
#mtabs li.active a:hover {
−
.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
+
     background-color: #eeeeee;
−
     position: relative;
+
     padding: 4px 6px 5px 6px;
−
    min-height: 1px;
+
     /*border-bottom: none;*/
−
     padding-left: 10px;
+
−
     padding-right: 10px;
+
−
    margin: 10px;
+
 
}
 
}
−
 
+
−
 
+
#mtabs li a.icon_accept {
−
.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
+
    background-image: url(accept.png);
−
     float: left;
+
    background-position: 5px;
 +
    background-repeat: no-repeat;
 +
     padding-left: 24px;
 
}
 
}
−
 
+
#mtabs li a.icon_accept:hover {
−
.col-md-4 {
+
     padding-left: 24px;
−
     width: 30%;
+
−
    background: url("https://s-media-cache-ak0.pinimg.com/originals/d4/5d/52/d45d52604ab4b262e0add13a226c8f75.jpg");
+
 
}
 
}
−
 
+
−
 
+
#mtabs_content_container {
−
 
+
     border: 1px solid #ccc;
−
 
+
    border-top: 1px solid #ccc;
−
 
+
    padding: 10px;
−
.learn-more {
+
    width: 600px;
−
     background-color: #fff;
+
 
}
 
}
−
 
+
.mtab_content {
−
.learn-more h3 {
+
    display: none;
−
  font-family: 'Shift', sans-serif;
+
−
  font-size: 25px;
+
−
  font-weight: bold;
+
−
  color: #c5c51b;
+
 
}
 
}
  
−
.learn-more p {
+
/* TAB CSS END */
−
  color: #787878; /* gray */
+
−
  font-weight: bold;
+
−
}
+
−
 
+
−
.learn-more a {
+
−
  color: #00b0ff;
+
−
}
+
  
 
</style>
 
</style>
Line 119: Line 130:
  
 
<body>
 
<body>
−
    <div class="jumbotron">
+
  <div class="mtabs_wrapper">
−
      <div class="container">
+
    <!-- Original tabs START -->
−
         <h1>Under Construction.</h1>
+
   
−
        <p>Carnegie Mellon iGEM</p>
+
    <div id="mtabs">
−
        <a href="#">Learn More</a>
+
         <ul>
−
      </div>
+
            <li><a href="#tab1" rel="tab1">Tab 1</a></li>
−
    </div>  
+
            <li><a href="#tab2" rel="tab2">Tab 2</a></li>
−
 
+
            <li><a href="#tab3" rel="tab3">Tab 3</a></li>
−
 
+
            <li class="active"><a href="#tab4" rel="tab4">Tab 4</a></li>
−
    <div class="learn-more">
+
        </ul>
−
  <div class="container">
+
    </div>
−
<div class = "row">
+
   
−
      <div class = "col-md-4">
+
    <div id="mtabs_content_container">
−
<h3>Team</h3>
+
        <div id="tab1" class="mtab_content">
−
<p>Biologists, engineers, enthusiastic people.</p>
+
          <p><a id="simulate" href="#mtabs_wrapper#mtabs_content_container#tab2">Take me to Tab 2</a></p>
−
<p><a href="#">See the team.</a></p>
+
        </div>
−
      </div>
+
        <div id="tab2" class="mtab_content">
−
  <div class = "col-md-4">
+
            <p>Tab content 2</p>
−
<h3>Project</h3>
+
        </div>
−
<p>We made a light.</p>
+
        <div id="tab3" class="mtab_content">
−
<p><a href="#">Learn about the project.</a></p>
+
            <p>Tab content 3</p>
−
  </div>
+
        </div>
−
  <div class = "col-md-4">
+
    <div id="tab4" class="mtab_content" style="display: block;">
−
<h3>Outreach</h3>
+
      <p>Tab content 4</p>
−
<p>Much public relations. Such wow.</p>
+
        </div>
−
<p><a href="#">Experience synthetic biology</a></p>
+
   
−
  </div>
+
    </div>
−
    </div>
+
    <!-- Original tabs END -->
−
  </div>
+
</div>
−
</div>
+
  
 
</body>
 
</body>
 
</html>
 
</html>

Revision as of 15:15, 24 June 2015

Take me to Tab 2

Tab content 2

Tab content 3

Tab content 4