![](https://static.igem.org/mediawiki/2014hs/7/78/900400.png)
![](https://static.igem.org/mediawiki/2014hs/b/b6/900x400-2.jpg)
![](https://static.igem.org/mediawiki/2014hs/0/0e/HumanPractices.png)
![](https://static.igem.org/mediawiki/2014hs/3/3c/Teamselfie.png)
![](https://static.igem.org/mediawiki/2014hs/6/6f/Resultauc.png)
Edipunluer (Talk | contribs) |
(Undo revision 28239 by Alihancelikcan (talk)) |
||
(56 intermediate revisions not shown) | |||
Line 2: | Line 2: | ||
<html> | <html> | ||
<head> | <head> | ||
+ | <meta name="viewport" content="width=device-width"> | ||
<meta charset="UTF-8" /> | <meta charset="UTF-8" /> | ||
<meta name="description" content="Animated Text and Icon Menu with jQuery" /> | <meta name="description" content="Animated Text and Icon Menu with jQuery" /> | ||
Line 11: | Line 12: | ||
<link href='http://fonts.googleapis.com/css?family=Wire+One&v1' rel='stylesheet' type='text/css' /> | <link href='http://fonts.googleapis.com/css?family=Wire+One&v1' rel='stylesheet' type='text/css' /> | ||
- | <script | + | <script" type="text/javascript"> |
+ | </script> | ||
+ | <style type="text/css"> | ||
+ | |||
+ | .divider { | ||
+ | height: 1px; | ||
+ | background: #000; | ||
+ | background: -webkit-linear-gradient(left, rgb(255,255,255) 0%, rgb(50,50,50) 50%, rgb(255,255,255) 100%); | ||
+ | } | ||
+ | .divider.light { | ||
+ | background: #fff; | ||
+ | background: -webkit-linear-gradient(left, rgb(90,90,90) 0%, rgb(255,255,255) 50%, rgb(90,90,90) 100%); | ||
+ | } | ||
+ | |||
+ | .divider.light:before { | ||
+ | position:relative; | ||
+ | float:left; | ||
+ | background: linear-gradient(to right, rgba(100, 100, 100, 0), rgba(100, 100, 100, 1) 50%); | ||
+ | margin-top:2px; | ||
+ | width:50%; | ||
+ | height:1px; | ||
+ | content:""; | ||
+ | } | ||
+ | |||
+ | .divider.light:after { | ||
+ | position:relative; | ||
+ | float:right; | ||
+ | background: linear-gradient(to left, rgba(100, 100, 100, 0), rgba(100, 100, 100, 1) 50%); | ||
+ | margin-top:2px; | ||
+ | width:50%; | ||
+ | height:1px; | ||
+ | content:""; | ||
+ | } | ||
+ | |||
+ | .divider:before { | ||
+ | position:relative; | ||
+ | float:left; | ||
+ | background: linear-gradient(to right, rgba(200, 200, 200, 0), rgba(200, 200, 200, 1) 50%); | ||
+ | margin-top:2px; | ||
+ | width:50%; | ||
+ | height:1px; | ||
+ | content:""; | ||
+ | } | ||
+ | |||
+ | .divider:after { | ||
+ | position:relative; | ||
+ | float:right; | ||
+ | background: linear-gradient(to left, rgba(100, 200, 200, 0), rgba(200, 200, 200, 1) 50%); | ||
+ | margin-top:2px; | ||
+ | width:50%; | ||
+ | height:1px; | ||
+ | content:""; | ||
+ | } | ||
+ | |||
+ | </style> | ||
<style type="text/css"> | <style type="text/css"> | ||
#animatedmenu | #animatedmenu | ||
Line 22: | Line 77: | ||
</style> | </style> | ||
<style type="text/css"> | <style type="text/css"> | ||
- | + | ||
- | + | label, a { | |
- | + | cursor: pointer; | |
- | + | text-decoration: none; | |
- | + | ||
} | } | ||
- | + | ||
- | + | article | |
+ | { | ||
+ | width:87.8%; | ||
} | } | ||
- | + | ||
- | + | label, #active, img { | |
- | + | -moz-user-select: none; | |
- | + | -webkit-user-select: none; | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
} | } | ||
- | + | #slider { | |
- | + | margin: 0 auto; | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
} | } | ||
- | + | /* NEW EXPERIMENT */ | |
- | + | /* Slider Setup */ | |
+ | input { | ||
+ | display: none; | ||
} | } | ||
- | . | + | |
- | + | #slide1:checked ~ #slides .inner { | |
+ | margin-left: 0; | ||
} | } | ||
- | + | ||
- | . | + | #slide2:checked ~ #slides .inner { |
- | + | margin-left: -100%; | |
- | + | ||
} | } | ||
- | . | + | #slide3:checked ~ #slides .inner { |
- | + | margin-left: -200%; | |
- | + | ||
} | } | ||
- | . | + | #slide4:checked ~ #slides .inner { |
- | + | margin-left: -300%; | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
} | } | ||
- | . | + | |
- | + | #slide5:checked ~ #slides .inner { | |
+ | margin-left: -400%; | ||
} | } | ||
- | + | ||
- | + | #overflow { | |
- | + | width: 100%; | |
- | + | overflow: hidden; | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
} | } | ||
- | + | ||
- | + | article img { | |
+ | width: 100%; | ||
} | } | ||
- | . | + | |
- | + | #slides .inner { | |
+ | width: 500%; | ||
} | } | ||
- | + | #slides article { | |
- | + | width: 20%; | |
- | + | float: left; | |
- | + | ||
- | + | ||
- | + | ||
} | } | ||
- | . | + | |
+ | /* Slider Styling */ | ||
+ | /* Control Setup */ | ||
+ | #controls { | ||
+ | margin: -25% 0 0 0; | ||
+ | width: 100%; | ||
+ | height: 50px; | ||
+ | } | ||
+ | |||
+ | #controls label { | ||
+ | width: 50px; | ||
+ | height: 50px; | ||
+ | opacity: 0.3; | ||
+ | } | ||
+ | #controls label:hover { | ||
+ | opacity: 0.8; | ||
+ | } | ||
+ | |||
+ | #slide1:checked ~ #controls label:nth-child(2), | ||
+ | #slide2:checked ~ #controls label:nth-child(3), | ||
+ | #slide3:checked ~ #controls label:nth-child(4), | ||
+ | #slide4:checked ~ #controls label:nth-child(5), | ||
+ | #slide5:checked ~ #controls label:nth-child(1) { | ||
+ | background: url("http://csscience.com/responsiveslidercss3/next.png") no-repeat; | ||
+ | float: right; | ||
+ | margin: 0 -70px 0 0; | ||
+ | display: block; | ||
+ | } | ||
+ | |||
+ | #slide1:checked ~ #controls label:nth-child(5), | ||
+ | #slide2:checked ~ #controls label:nth-child(1), | ||
+ | #slide3:checked ~ #controls label:nth-child(2), | ||
+ | #slide4:checked ~ #controls label:nth-child(3), | ||
+ | #slide5:checked ~ #controls label:nth-child(4) { | ||
+ | background: url("http://csscience.com/responsiveslidercss3/prev.png") no-repeat; | ||
+ | float: left; | ||
+ | margin: 0 0 0 -70px; | ||
+ | display: block; | ||
+ | } | ||
+ | |||
+ | /* Info Box */ | ||
+ | .info { | ||
+ | line-height: 20px; | ||
+ | margin: 0 0 -150%; | ||
position: absolute; | position: absolute; | ||
- | + | padding: 30px 30px; | |
- | + | opacity: 0; | |
- | + | text-align: left; | |
} | } | ||
- | . | + | |
- | + | .info h3 { | |
+ | margin: 0 0 5px; | ||
+ | font-size: 22px; | ||
+ | font-style: normal; | ||
} | } | ||
- | . | + | |
- | + | /* Animation */ | |
+ | #slides .inner { | ||
+ | -webkit-transform: translateZ(0); | ||
+ | -webkit-transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1); | ||
+ | -moz-transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1); | ||
+ | -ms-transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1); | ||
+ | -o-transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1); | ||
+ | transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1); | ||
+ | /* easeInOutQuart */ | ||
+ | -webkit-transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1); | ||
+ | -moz-transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1); | ||
+ | -ms-transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1); | ||
+ | -o-transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1); | ||
+ | transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1); | ||
+ | /* easeInOutQuart */ | ||
} | } | ||
+ | |||
+ | #slider { | ||
+ | -webkit-transform: translateZ(0); | ||
+ | -webkit-transition: all 0.5s ease-out; | ||
+ | -moz-transition: all 0.5s ease-out; | ||
+ | -o-transition: all 0.5s ease-out; | ||
+ | transition: all 0.5s ease-out; | ||
+ | } | ||
+ | |||
+ | #controls label { | ||
+ | -webkit-transform: translateZ(0); | ||
+ | -webkit-transition: opacity 0.2s ease-out; | ||
+ | -moz-transition: opacity 0.2s ease-out; | ||
+ | -o-transition: opacity 0.2s ease-out; | ||
+ | transition: opacity 0.2s ease-out; | ||
+ | } | ||
+ | |||
+ | #slide1:checked ~ #slides article:nth-child(1) .info, | ||
+ | #slide2:checked ~ #slides article:nth-child(2) .info, | ||
+ | #slide3:checked ~ #slides article:nth-child(3) .info, | ||
+ | #slide4:checked ~ #slides article:nth-child(4) .info, | ||
+ | #slide5:checked ~ #slides article:nth-child(5) .info { | ||
+ | opacity: 1; | ||
+ | -webkit-transition: all 1s ease-out 0.6s; | ||
+ | -moz-transition: all 1s ease-out 0.6s; | ||
+ | -o-transition: all 1s ease-out 0.6s; | ||
+ | transition: all 1s ease-out 0.6s; | ||
+ | } | ||
+ | |||
+ | .info, #controls, #slides, #active, #active label, .info h3 { | ||
+ | -webkit-transform: translateZ(0); | ||
+ | -webkit-transition: all 0.5s ease-out; | ||
+ | -moz-transition: all 0.5s ease-out; | ||
+ | -o-transition: all 0.5s ease-out; | ||
+ | transition: all 0.5s ease-out; | ||
+ | } | ||
+ | |||
+ | /* Responsive Styling */ | ||
+ | @media only screen and (max-width: 850px) and (min-width: 450px) { | ||
+ | #slider #controls { | ||
+ | margin: -25% 0 0 15%; | ||
+ | width: 70%; | ||
+ | height: 50px; | ||
+ | } | ||
+ | |||
+ | #slider #controls label { | ||
+ | -moz-transform: scale(0.8); | ||
+ | -webkit-transform: scale(0.8); | ||
+ | -o-transform: scale(0.8); | ||
+ | -ms-transform: scale(0.8); | ||
+ | transform: scale(0.8); | ||
+ | } | ||
+ | } | ||
+ | @media only screen and (max-width: 450px) { | ||
+ | #slider #controls { | ||
+ | margin: -28% 0 0 24%; | ||
+ | width: 50%; | ||
+ | height: 50px; | ||
+ | } | ||
+ | |||
+ | #slider #slides { | ||
+ | padding: 1% 0; | ||
+ | -webkit-border-radius: 0px; | ||
+ | -moz-border-radius: 0px; | ||
+ | border-radius: 0px; | ||
+ | } | ||
+ | |||
+ | #slider #controls label { | ||
+ | -moz-transform: scale(0.6); | ||
+ | -webkit-transform: scale(0.6); | ||
+ | -o-transform: scale(0.6); | ||
+ | -ms-transform: scale(0.6); | ||
+ | transform: scale(0.6); | ||
+ | } | ||
+ | } | ||
+ | |||
</style> | </style> | ||
Line 128: | Line 296: | ||
</head> | </head> | ||
<body> | <body> | ||
- | < | + | <article id="slider"> |
+ | |||
+ | <!-- Slider Setup --> | ||
+ | |||
+ | <input checked type="radio" name="slider" id="slide1"/> | ||
+ | <input type="radio" name="slider" id="slide2" /> | ||
+ | <input type="radio" name="slider" id="slide3" /> | ||
+ | <input type="radio" name="slider" id="slide4" /> | ||
+ | <input type="radio" name="slider" id="slide5" /> | ||
+ | |||
+ | <!-- The Slider --> | ||
+ | |||
+ | <div id="slides"> | ||
+ | |||
+ | <div id="overflow"> | ||
+ | |||
+ | <div class="inner"> | ||
+ | |||
+ | <article> | ||
+ | <img src="https://static.igem.org/mediawiki/2014hs/7/78/900400.png"> | ||
+ | </article> | ||
+ | |||
+ | <article> | ||
+ | <img src="https://static.igem.org/mediawiki/2014hs/b/b6/900x400-2.jpg"> | ||
+ | </article> | ||
+ | |||
+ | <article> | ||
+ | <img src="https://static.igem.org/mediawiki/2014hs/0/0e/HumanPractices.png"> | ||
+ | </article> | ||
+ | |||
+ | <article> | ||
+ | <img src="https://static.igem.org/mediawiki/2014hs/3/3c/Teamselfie.png"> | ||
+ | </article> | ||
+ | |||
+ | <article> | ||
+ | <img src="https://static.igem.org/mediawiki/2014hs/6/6f/Resultauc.png"> | ||
+ | </article> | ||
+ | |||
+ | </div> <!-- .inner --> | ||
+ | |||
+ | </div> <!-- #overflow --> | ||
+ | |||
+ | </div> <!-- #slides --> | ||
+ | |||
+ | <!-- Controls and Active Slide Display --> | ||
+ | |||
+ | <div id="controls"> | ||
+ | |||
+ | <label for="slide1"></label> | ||
+ | <label for="slide2"></label> | ||
+ | <label for="slide3"></label> | ||
+ | <label for="slide4"></label> | ||
+ | <label for="slide5"></label> | ||
+ | |||
+ | </div> <!-- #controls --> | ||
+ | |||
+ | <div id="active"> | ||
+ | |||
+ | <label for="slide1"></label> | ||
+ | <label for="slide2"></label> | ||
+ | <label for="slide3"></label> | ||
+ | <label for="slide4"></label> | ||
+ | <label for="slide5"></label> | ||
+ | |||
+ | </div> <!-- #active --> | ||
+ | |||
+ | </article> <!-- #slider --> | ||
+ | <br/> | ||
+ | <br/> | ||
+ | <br/> | ||
+ | <br/> | ||
+ | <br/> | ||
+ | <br/> | ||
+ | <br/> | ||
+ | <br/> | ||
+ | <br/> | ||
+ | <br/> | ||
+ | <div class="light-background"> | ||
+ | <div class="width80"> | ||
+ | <div class="divider" /> | ||
+ | </div> | ||
+ | </div> | ||
+ | |||
+ | |||
<div id="animatedmenu"> | <div id="animatedmenu"> | ||
<div class="container"> | <div class="container"> | ||
<ul id="sti-menu" class="sti-menu"> | <ul id="sti-menu" class="sti-menu"> | ||
<li data-hovercolor="#37c5e9"> | <li data-hovercolor="#37c5e9"> | ||
- | <a href=" | + | <a href="https://2014hs.igem.org/Team:AUC_TURKEY/Project/Introduction"> |
- | <h2 data-type="mText" class="sti-item"> | + | <h2 data-type="mText" class="sti-item">Introduction</h2> |
<h3 data-type="sText" class="sti-item">Story of a color wizard</h3> | <h3 data-type="sText" class="sti-item">Story of a color wizard</h3> | ||
<span data-type="icon" class="sti-icon sti-icon-care sti-item"></span> | <span data-type="icon" class="sti-icon sti-icon-care sti-item"></span> | ||
Line 140: | Line 391: | ||
</li> | </li> | ||
<li data-hovercolor="#ff395e"> | <li data-hovercolor="#ff395e"> | ||
- | <a href=" | + | <a href="https://2014hs.igem.org/Team:AUC_TURKEY/Notebook//Timeline"> |
<h2 data-type="mText" class="sti-item">Notebook</h2> | <h2 data-type="mText" class="sti-item">Notebook</h2> | ||
<h3 data-type="sText" class="sti-item">The day by day process</h3> | <h3 data-type="sText" class="sti-item">The day by day process</h3> | ||
Line 147: | Line 398: | ||
</li> | </li> | ||
<li data-hovercolor="#57e676"> | <li data-hovercolor="#57e676"> | ||
- | <a href=" | + | <a href="https://2014hs.igem.org/Team:AUC_TURKEY/Team/Participants"> |
- | <h2 data-type="mText" class="sti-item"> | + | <h2 data-type="mText" class="sti-item">Participants</h2> |
<h3 data-type="sText" class="sti-item">Hardworking guys</h3> | <h3 data-type="sText" class="sti-item">Hardworking guys</h3> | ||
<span data-type="icon" class="sti-icon sti-icon-info sti-item"></span> | <span data-type="icon" class="sti-icon sti-icon-info sti-item"></span> | ||
Line 154: | Line 405: | ||
</li> | </li> | ||
<li data-hovercolor="#d869b2"> | <li data-hovercolor="#d869b2"> | ||
- | <a href=" | + | <a href="https://2014hs.igem.org/Team:AUC_TURKEY/Results/Functional_Essay"> |
- | <h2 data-type="mText" class="sti-item"> | + | <h2 data-type="mText" class="sti-item">Assay</h2> |
- | <h3 data-type="sText" class="sti-item"> | + | <h3 data-type="sText" class="sti-item">Are those proteins working?</h3> |
<span data-type="icon" class="sti-icon sti-icon-family sti-item"></span> | <span data-type="icon" class="sti-icon sti-icon-family sti-item"></span> | ||
</a> | </a> | ||
</li> | </li> | ||
<li data-hovercolor="#ffdd3f"> | <li data-hovercolor="#ffdd3f"> | ||
- | <a href=" | + | <a href="https://2014hs.igem.org/Team:AUC_TURKEY/Human_Practices/Future_Plan"> |
- | <h2 data-type="mText" class="sti-item"> | + | <h2 data-type="mText" class="sti-item">Future Plans</h2> |
- | <h3 data-type="sText" class="sti-item"> | + | <h3 data-type="sText" class="sti-item">What we are looking forward to</h3> |
<span data-type="icon" class="sti-icon sti-icon-technology sti-item"></span> | <span data-type="icon" class="sti-icon sti-icon-technology sti-item"></span> | ||
</a> | </a> | ||
Line 191: | Line 442: | ||
</body> | </body> | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
</html> | </html> |