Difference between revisions of "Team:ICT-Mumbai/Experiments"

(Prototype team page)
 
Line 1: Line 1:
−
{{ICT-Mumbai}}
+
{{Template:ICT-Mumbai/basic}}
−
<html>
+
  
−
<div class="column full_size">
+
<style>
 +
@import url('https://fonts.googleapis.com/css?family=Hind:300,400');
  
−
<h1>Experiments</h1>
+
*, *:before, *:after {
−
<p>Describe the research, experiments, and protocols you used in your iGEM project. These should be detailed enough for another team to repeat your experiments.</p>
+
  -webkit-box-sizing: inherit;
 +
  box-sizing: inherit;
 +
}
  
−
<p>
+
.container {
−
Please remember to put all characterization and measurement data for your parts on the corresponding Registry part pages.  
+
  margin: 0 auto;
−
</p>
+
  padding: 4rem;
 +
  width: 48rem;
 +
}
  
−
</div>
+
.accordion a {
 +
  position: relative;
 +
  display: -webkit-box;
 +
  display: -webkit-flex;
 +
  display: -ms-flexbox;
 +
  display: flex;
 +
  -webkit-box-orient: vertical;
 +
  -webkit-box-direction: normal;
 +
  -webkit-flex-direction: column;
 +
  -ms-flex-direction: column;
 +
  flex-direction: column;
 +
  width: 100%;
 +
  padding: 1rem 3rem 1rem 1rem;
 +
  color: #7288a2;
 +
  font-size: 1.15rem;
 +
  font-weight: 400;
 +
  border-bottom: 1px solid #e5e5e5;
 +
}
  
 +
.accordion a:hover,
 +
.accordion a:hover::after {
 +
  cursor: pointer;
 +
  color: #03b5d2;
 +
}
  
 +
.accordion a:hover::after {
 +
  border: 1px solid #03b5d2;
 +
}
  
−
<div class="column two_thirds_size">
+
.accordion a.active {
−
<h3>What should this page contain?</h3>
+
  color: #03b5d2;
−
<ul>
+
  border-bottom: 1px solid #03b5d2;
−
<li> Protocols </li>
+
}
−
<li> Experiments </li>
+
−
<li> Documentation of the development of your project </li>
+
−
</ul>
+
  
−
</div>
+
.accordion a::after {
 +
  font-family: 'Ionicons';
 +
  content: '\f218';
 +
  position: absolute;
 +
  float: right;
 +
  right: 1rem;
 +
  font-size: 1rem;
 +
  color: #7288a2;
 +
  padding: 5px;
 +
  width: 30px;
 +
  height: 30px;
 +
  -webkit-border-radius: 50%;
 +
  -moz-border-radius: 50%;
 +
  border-radius: 50%;
 +
  border: 1px solid #7288a2;
 +
  text-align: center;
 +
}
  
−
<div class="column third_size">
+
.accordion a.active::after {
−
<div class="highlight decoration_A_full">
+
  font-family: 'Ionicons';
−
<h3>Inspiration</h3>
+
  content: '\f209';
−
<ul>
+
  color: #03b5d2;
−
<li><a href="https://2014.igem.org/Team:Colombia/Protocols">2014 Colombia </a></li>
+
  border: 1px solid #03b5d2;
−
<li><a href="https://2014.igem.org/Team:Imperial/Protocols">2014 Imperial </a></li>
+
}
−
<li><a href="https://2014.igem.org/Team:Caltech/Project/Experiments">2014 Caltech </a></li>
+
−
</ul>
+
−
</div>
+
−
</div>
+
  
 +
.accordion .content {
 +
  opacity: 0;
 +
  padding: 0 1rem;
 +
  max-height: 0;
 +
  border-bottom: 1px solid #e5e5e5;
 +
  overflow: hidden;
 +
  clear: both;
 +
  -webkit-transition: all 0.2s ease 0.15s;
 +
  -o-transition: all 0.2s ease 0.15s;
 +
  transition: all 0.2s ease 0.15s;
 +
}
  
−
<div class="clear"></div>
+
.accordion .content p {
 +
  font-size: 1rem;
 +
  font-weight: 300;
 +
}
  
 +
.accordion .content.active {
 +
  opacity: 1;
 +
  padding: 1rem;
 +
  max-height: 100%;
 +
  -webkit-transition: all 0.35s ease 0.15s;
 +
  -o-transition: all 0.35s ease 0.15s;
 +
  transition: all 0.35s ease 0.15s;
 +
}
 +
</style>
  
 +
<html>
 +
<div class="wrapper">
 +
<div class="container">
 +
 +
  <h2>Frequently Asked Questions</h2>
 +
 +
  <div class="accordion">
 +
    <div class="accordion-item">
 +
      <a>Why is the moon sometimes out during the day?</a>
 +
      <div class="content">
 +
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Elementum sagittis vitae et leo duis ut. Ut tortor pretium viverra suspendisse potenti.</p>
 +
      </div>
 +
    </div>
 +
    <div class="accordion-item">
 +
      <a>Why is the sky blue?</a>
 +
      <div class="content">
 +
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Elementum sagittis vitae et leo duis ut. Ut tortor pretium viverra suspendisse potenti.</p>
 +
      </div>
 +
    </div>
 +
    <div class="accordion-item">
 +
      <a>Will we ever discover aliens?</a>
 +
      <div class="content">
 +
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Elementum sagittis vitae et leo duis ut. Ut tortor pretium viverra suspendisse potenti.</p>
 +
      </div>
 +
    </div>
 +
    <div class="accordion-item">
 +
      <a>How much does the Earth weigh?</a>
 +
      <div class="content">
 +
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Elementum sagittis vitae et leo duis ut. Ut tortor pretium viverra suspendisse potenti.</p>
 +
      </div>
 +
    </div>
 +
    <div class="accordion-item">
 +
      <a>How do airplanes stay up?</a>
 +
      <div class="content">
 +
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Elementum sagittis vitae et leo duis ut. Ut tortor pretium viverra suspendisse potenti.</p>
 +
      </div>
 +
    </div>
 +
  </div>
 +
 
 +
</div>
 +
</div>
 +
<script>
 +
const items = document.querySelectorAll(".accordion a");
  
 +
function toggleAccordion(){
 +
  this.classList.toggle('active');
 +
  this.nextElementSibling.classList.toggle('active');
 +
}
  
 +
items.forEach(item => item.addEventListener('click', toggleAccordion));
 +
</script>
 
</html>
 
</html>

Revision as of 13:12, 2 October 2018

Simply




Contact us: igemteamictmumbai@gmail.com  | Follow us:

<style> @import url('https://fonts.googleapis.com/css?family=Hind:300,400');

  • , *:before, *:after {
 -webkit-box-sizing: inherit;
 box-sizing: inherit;

}

.container { 

 margin: 0 auto;
 padding: 4rem;
 width: 48rem;

}

.accordion a { 

 position: relative;
 display: -webkit-box;
 display: -webkit-flex;
 display: -ms-flexbox;
 display: flex;
 -webkit-box-orient: vertical;
 -webkit-box-direction: normal;
 -webkit-flex-direction: column;
 -ms-flex-direction: column;
 flex-direction: column;
 width: 100%;
 padding: 1rem 3rem 1rem 1rem;
 color: #7288a2;
 font-size: 1.15rem;
 font-weight: 400;
 border-bottom: 1px solid #e5e5e5;

}

.accordion a:hover, .accordion a:hover::after { 

 cursor: pointer;
 color: #03b5d2;

}

.accordion a:hover::after { 

 border: 1px solid #03b5d2;

}

.accordion a.active { 

 color: #03b5d2;
 border-bottom: 1px solid #03b5d2;

}

.accordion a::after { 

 font-family: 'Ionicons';
 content: '\f218';
 position: absolute;
 float: right;
 right: 1rem;
 font-size: 1rem;
 color: #7288a2;
 padding: 5px;
 width: 30px;
 height: 30px;
 -webkit-border-radius: 50%;
 -moz-border-radius: 50%;
 border-radius: 50%;
 border: 1px solid #7288a2;
 text-align: center;

}

.accordion a.active::after { 

 font-family: 'Ionicons';
 content: '\f209';
 color: #03b5d2;
 border: 1px solid #03b5d2;

}

.accordion .content { 

 opacity: 0;
 padding: 0 1rem;
 max-height: 0;
 border-bottom: 1px solid #e5e5e5;
 overflow: hidden;
 clear: both;
 -webkit-transition: all 0.2s ease 0.15s;
 -o-transition: all 0.2s ease 0.15s;
 transition: all 0.2s ease 0.15s;

}

.accordion .content p { 

 font-size: 1rem;
 font-weight: 300;

}

.accordion .content.active { 

 opacity: 1;
 padding: 1rem;
 max-height: 100%;
 -webkit-transition: all 0.35s ease 0.15s;
 -o-transition: all 0.35s ease 0.15s;
 transition: all 0.35s ease 0.15s;

} </style>

Frequently Asked Questions

Why is the moon sometimes out during the day?

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Elementum sagittis vitae et leo duis ut. Ut tortor pretium viverra suspendisse potenti.

Why is the sky blue?

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Elementum sagittis vitae et leo duis ut. Ut tortor pretium viverra suspendisse potenti.

Will we ever discover aliens?

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Elementum sagittis vitae et leo duis ut. Ut tortor pretium viverra suspendisse potenti.

How much does the Earth weigh?

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Elementum sagittis vitae et leo duis ut. Ut tortor pretium viverra suspendisse potenti.

How do airplanes stay up?

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Elementum sagittis vitae et leo duis ut. Ut tortor pretium viverra suspendisse potenti.