Difference between revisions of "Template:Uniandes Colombia"
(Try to implement circular SVG menu. Take 1) |
|||
(23 intermediate revisions by 2 users not shown) | |||
Line 1: | Line 1: | ||
− | + | {{Template_All_Teams}} | |
− | <html | + | <html> |
<head> | <head> | ||
<meta charset="UTF-8" /> | <meta charset="UTF-8" /> | ||
− | |||
− | |||
<title>iGEM Uniandes-Colombia</title> | <title>iGEM Uniandes-Colombia</title> | ||
<meta name="description" content="iGEM Uniandes Colombia 2015: Cyan Solo and Shewy" /> | <meta name="description" content="iGEM Uniandes Colombia 2015: Cyan Solo and Shewy" /> | ||
<meta name="keywords" content="iGEM, 2015, Colombia, synthetic, biology, cyborg" /> | <meta name="keywords" content="iGEM, 2015, Colombia, synthetic, biology, cyborg" /> | ||
− | <meta name="author" content="Pablo | + | <meta name="author" content="Pablo CR from templates by Sara Soueidan for Codrops" /> |
− | <link rel="shortcut icon" href=" | + | <link rel="shortcut icon" href="https://static.igem.org/mediawiki/2015/b/b7/IGEMlogoCol.png"> |
− | <link rel="stylesheet" type="text/css" href="https://2015.igem.org/Template:Uniandes_Colombia/normalize.css" /> | + | <link rel="stylesheet" type="text/css" href="https://2015.igem.org/Template:Uniandes_Colombia/normalize.css?action=raw&ctype=text/css" /> |
+ | <link rel="stylesheet" type="text/css" href="https://2015.igem.org/Template:Uniandes_Colombia/style.css?action=raw&ctype=text/css" /> | ||
+ | |||
+ | <script src="https://2015.igem.org/Template:Uniandes_Colombia/modernizr.js?action=raw&ctype=text/javascript" type="text/javascript"></script> | ||
+ | |||
+ | <!--MathJax for Latex on the web--> | ||
+ | |||
+ | <script src='https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML'></script> | ||
− | |||
<style> | <style> | ||
/* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ | /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ | ||
− | + | @import url(http://fonts.googleapis.com/css?family=Varela+Round|Comfortaa:400,700,300); | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
body { | body { | ||
padding: 1em; | padding: 1em; | ||
background-color: #EFEFF0; | background-color: #EFEFF0; | ||
− | background-image: url( | + | background-image: url(https://static.igem.org/mediawiki/2015/5/5f/Connect.png); |
line-height: 1.5; | line-height: 1.5; | ||
font-family: Comfortaa; | font-family: Comfortaa; | ||
Line 38: | Line 36: | ||
border-radius: 50%; | border-radius: 50%; | ||
} | } | ||
+ | |||
+ | |||
+ | |||
+ | |||
</style> | </style> | ||
− | <script src="https://2015.igem.org/Template:Uniandes_Colombia/prefixtree.min.js"></script> | + | <script src="https://2015.igem.org/Template:Uniandes_Colombia/prefixtree.min.js?action=raw&ctype=text/javascript"></script> |
− | </ | + | |
+ | |||
+ | |||
+ | |||
+ | <!--PART IV: Text Buttons--> | ||
+ | <!--CSS--> | ||
+ | <style> | ||
+ | |||
+ | .button-fill { | ||
+ | text-align: center; | ||
+ | background: #ccc; | ||
+ | display: inline-block; | ||
+ | position: relative; | ||
+ | text-transform: uppercase; | ||
+ | margin: 25px; | ||
+ | } | ||
+ | .button-fill.grey { | ||
+ | background: #445561; | ||
+ | color: white; | ||
+ | } | ||
+ | .button-fill.orange { | ||
+ | background: #f26b43; | ||
+ | color: #fff; | ||
+ | } | ||
+ | .button-fill.orange .button-inside { | ||
+ | color: #f26b43; | ||
+ | } | ||
+ | .button-fill.orange .button-inside.full { | ||
+ | border: 1px solid #f26b43; | ||
+ | } | ||
+ | .button-text { | ||
+ | padding: 0 25px; | ||
+ | line-height: 56px; | ||
+ | letter-spacing: .1em; | ||
+ | } | ||
+ | .button-inside { | ||
+ | width: 0px; | ||
+ | height: 54px; | ||
+ | margin: 0; | ||
+ | float: left; | ||
+ | position: absolute; | ||
+ | top: 1px; | ||
+ | left: 50%; | ||
+ | line-height: 54px; | ||
+ | color: #445561; | ||
+ | background: #fff; | ||
+ | text-align: center; | ||
+ | overflow: hidden; | ||
+ | -webkit-transition: width 0.5s, left 0.5s, margin 0.5s; | ||
+ | -moz-transition: width 0.5s, left 0.5s, margin 0.5s; | ||
+ | -o-transition: width 0.5s, left 0.5s, margin 0.5s; | ||
+ | transition: width 0.5s, left 0.5s, margin 0.5s; | ||
+ | } | ||
+ | .button-inside.full { | ||
+ | width: 100%; | ||
+ | left: 0%; | ||
+ | top: 0; | ||
+ | margin-right: -50px; | ||
+ | border: 1px solid #445561; | ||
+ | } | ||
+ | .inside-text { | ||
+ | text-align: center; | ||
+ | position: absolute; | ||
+ | right: 50%; | ||
+ | letter-spacing: .1em; | ||
+ | text-transform: uppercase; | ||
+ | -webkit-transform: translateX(50%); | ||
+ | -moz-transform: translateX(50%); | ||
+ | -ms-transform: translateX(50%); | ||
+ | transform: translateX(50%); | ||
+ | } | ||
+ | </style> | ||
+ | |||
+ | <!--JS--> | ||
+ | <script src='http://assets.codepen.io/assets/libs/fullpage/jquery-ab8e840c3dad7ccf2deadb8c40d53bdb.js'></script> | ||
+ | |||
+ | |||
+ | |||
+ | |||
− | + | </head> | |
<div class="menu-wrapper"> | <div class="menu-wrapper"> | ||
<!-- SVG Menu Generated By CIRCULUS.SVG :: http://sarasoueidan.com/tools/circulus --> | <!-- SVG Menu Generated By CIRCULUS.SVG :: http://sarasoueidan.com/tools/circulus --> | ||
− | |||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="-100 -100 700 700" id="menu"> | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="-100 -100 700 700" id="menu"> | ||
<style> | <style> | ||
Line 75: | Line 154: | ||
</g> | </g> | ||
<g id="itemsContainer" data-svg-origin="250 250" transform="matrix(0.38734,-0.92193,0.92193,0.38734,-77.3193578290572,383.64893561257276)"> | <g id="itemsContainer" data-svg-origin="250 250" transform="matrix(0.38734,-0.92193,0.92193,0.38734,-77.3193578290572,383.64893561257276)"> | ||
− | <a class="item" id="item-1" xlink:href=" " xlink:title=" " transform="matrix(1,0,0,1,0,0)" data-svg-origin="250 250" style=""><path fill="none" stroke="#111" d="M350,250 l150,0 A250,250 0 0,0 426.7766952966369,73.22330470336314 l-106.06601717798213,106.0660171779821 A100,100 0 0,1 350,250" class="sector"></path><use xlink:href="#icon-1" width="80" height="80" x="377.4505615234375" y="145.88233947753906" transform="rotate(67.5 414.4505615234375 181.88233947753906)"></use></a> | + | <a class="item" id="item-1" xlink:href="/Team:Uniandes_Colombia" xlink:title=" " transform="matrix(1,0,0,1,0,0)" data-svg-origin="250 250" style=""><path fill="none" stroke="#111" d="M350,250 l150,0 A250,250 0 0,0 426.7766952966369,73.22330470336314 l-106.06601717798213,106.0660171779821 A100,100 0 0,1 350,250" class="sector"></path><use xlink:href="#icon-1" width="80" height="80" x="377.4505615234375" y="145.88233947753906" transform="rotate(67.5 414.4505615234375 181.88233947753906)"></use></a> |
− | <a class="item" id="item-2" xlink:href=" " xlink:title=" " transform="matrix(0.7071,-0.7071,0.7071,0.7071,-103.55339059327378,249.99999999999997)" data-svg-origin="250 250" style=""><path fill="none" stroke="#111" d="M350,250 l150,0 A250,250 0 0,0 426.7766952966369,73.22330470336314 l-106.06601717798213,106.0660171779821 A100,100 0 0,1 350,250" class="sector"></path><use xlink:href="#icon-2" width="65" height="120" x="377.4505615234375" y="121.88233947753906" transform="rotate(67.5 414.4505615234375 181.88233947753906)"></use></a> | + | <a class="item" id="item-2" xlink:href="/Team:Uniandes_Colombia/Team" xlink:title=" " transform="matrix(0.7071,-0.7071,0.7071,0.7071,-103.55339059327378,249.99999999999997)" data-svg-origin="250 250" style=""><path fill="none" stroke="#111" d="M350,250 l150,0 A250,250 0 0,0 426.7766952966369,73.22330470336314 l-106.06601717798213,106.0660171779821 A100,100 0 0,1 350,250" class="sector"></path><use xlink:href="#icon-2" width="65" height="120" x="377.4505615234375" y="121.88233947753906" transform="rotate(67.5 414.4505615234375 181.88233947753906)"></use></a> |
− | <a class="item" id="item-3" xlink:href=" " xlink:title=" " transform="matrix(0,-1,1,0,0,500)" data-svg-origin="250 250" style=""><path fill="none" stroke="#111" d="M350,250 l150,0 A250,250 0 0,0 426.7766952966369,73.22330470336314 l-106.06601717798213,106.0660171779821 A100,100 0 0,1 350,250" class="sector"></path><use xlink:href="#icon-3" width="65" height="120" x="377.4505615234375" y="121.88233947753906" transform="rotate(67.5 414.4505615234375 181.88233947753906)"></use></a> | + | <a class="item" id="item-3" xlink:href="/Team:Uniandes_Colombia/Project" xlink:title=" " transform="matrix(0,-1,1,0,0,500)" data-svg-origin="250 250" style=""><path fill="none" stroke="#111" d="M350,250 l150,0 A250,250 0 0,0 426.7766952966369,73.22330470336314 l-106.06601717798213,106.0660171779821 A100,100 0 0,1 350,250" class="sector"></path><use xlink:href="#icon-3" width="65" height="120" x="377.4505615234375" y="121.88233947753906" transform="rotate(67.5 414.4505615234375 181.88233947753906)"></use></a> |
− | <a class="item" id="item-4" xlink:href=" " xlink:title=" " transform="matrix(-0.7071,-0.7071,0.7071,-0.7071,249.99999999999997,603.5533905932738)" data-svg-origin="250 250" style=""><path fill="none" stroke="#111" d="M350,250 l150,0 A250,250 0 0,0 426.7766952966369,73.22330470336314 l-106.06601717798213,106.0660171779821 A100,100 0 0,1 350,250" class="sector"></path><use xlink:href="#icon-4" width="65" height="130" x="380.4505615234375" y="120.88233947753906" transform="rotate(67.5 414.4505615234375 181.88233947753906)"></use></a> | + | <a class="item" id="item-4" xlink:href="/Team:Uniandes_Colombia/WetLab" xlink:title=" " transform="matrix(-0.7071,-0.7071,0.7071,-0.7071,249.99999999999997,603.5533905932738)" data-svg-origin="250 250" style=""><path fill="none" stroke="#111" d="M350,250 l150,0 A250,250 0 0,0 426.7766952966369,73.22330470336314 l-106.06601717798213,106.0660171779821 A100,100 0 0,1 350,250" class="sector"></path><use xlink:href="#icon-4" width="65" height="130" x="380.4505615234375" y="120.88233947753906" transform="rotate(67.5 414.4505615234375 181.88233947753906)"></use></a> |
− | <a class="item" id="item-5" xlink:href=" " xlink:title=" " transform="matrix(-1,0,0,-1,500,500)" data-svg-origin="250 250" style=""><path fill="none" stroke="#111" d="M350,250 l150,0 A250,250 0 0,0 426.7766952966369,73.22330470336314 l-106.06601717798213,106.0660171779821 A100,100 0 0,1 350,250" class="sector"></path><use xlink:href="#icon-5" width="65" height="140" x="380.4505615234375" y="110.88233947753906" transform="rotate(67.5 414.4505615234375 181.88233947753906)"></use></a> | + | <a class="item" id="item-5" xlink:href="/Team:Uniandes_Colombia/DryLab" xlink:title=" " transform="matrix(-1,0,0,-1,500,500)" data-svg-origin="250 250" style=""><path fill="none" stroke="#111" d="M350,250 l150,0 A250,250 0 0,0 426.7766952966369,73.22330470336314 l-106.06601717798213,106.0660171779821 A100,100 0 0,1 350,250" class="sector"></path><use xlink:href="#icon-5" width="65" height="140" x="380.4505615234375" y="110.88233947753906" transform="rotate(67.5 414.4505615234375 181.88233947753906)"></use></a> |
− | <a class="item" id="item-6" xlink:href=" " xlink:title=" " transform="matrix(-0.7071,0.7071,-0.7071,-0.7071,603.5533905932738,250.00000000000006)" data-svg-origin="250 250" style=""><path fill="none" stroke="#111" d="M350,250 l150,0 A250,250 0 0,0 426.7766952966369,73.22330470336314 l-106.06601717798213,106.0660171779821 A100,100 0 0,1 350,250" class="sector"></path><use xlink:href="#icon-6" width="55" height="160" x="395.4505615234375" y="96.88233947753906" transform="rotate(67.5 414.4505615234375 181.88233947753906)"></use></a> | + | <a class="item" id="item-6" xlink:href="/Team:Uniandes_Colombia/Hardware" xlink:title=" " transform="matrix(-0.7071,0.7071,-0.7071,-0.7071,603.5533905932738,250.00000000000006)" data-svg-origin="250 250" style=""><path fill="none" stroke="#111" d="M350,250 l150,0 A250,250 0 0,0 426.7766952966369,73.22330470336314 l-106.06601717798213,106.0660171779821 A100,100 0 0,1 350,250" class="sector"></path><use xlink:href="#icon-6" width="55" height="160" x="395.4505615234375" y="96.88233947753906" transform="rotate(67.5 414.4505615234375 181.88233947753906)"></use></a> |
− | <a class="item" id="item-7" xlink:href=" " xlink:title=" " transform="matrix(0,1,-1,0,500.00000000000006,0)" data-svg-origin="250 250" style=""><path fill="none" stroke="#111" d="M350,250 l150,0 A250,250 0 0,0 426.7766952966369,73.22330470336314 l-106.06601717798213,106.0660171779821 A100,100 0 0,1 350,250" class="sector"></path><use xlink:href="#icon-7" width="35" height="200" x="404.4505615234375" y="81.88233947753906" transform="rotate(67.5 414.4505615234375 181.88233947753906)"></use></a> | + | <a class="item" id="item-7" xlink:href="/Team:Uniandes_Colombia/Practices" xlink:title=" " transform="matrix(0,1,-1,0,500.00000000000006,0)" data-svg-origin="250 250" style=""><path fill="none" stroke="#111" d="M350,250 l150,0 A250,250 0 0,0 426.7766952966369,73.22330470336314 l-106.06601717798213,106.0660171779821 A100,100 0 0,1 350,250" class="sector"></path><use xlink:href="#icon-7" width="35" height="200" x="404.4505615234375" y="81.88233947753906" transform="rotate(67.5 414.4505615234375 181.88233947753906)"></use></a> |
− | <a class="item" id="item-8" xlink:href=" " xlink:title=" " transform="matrix(0.7071,0.7071,-0.7071,0.7071,250.00000000000009,-103.55339059327378)" data-svg-origin="250 250" style=""><path fill="none" stroke="#111" d="M350,250 l150,0 A250,250 0 0,0 426.7766952966369,73.22330470336314 l-106.06601717798213,106.0660171779821 A100,100 0 0,1 350,250" class="sector"></path><use xlink:href="#icon-8" width="37" height="150" x="404.4505615234375" y="101.88233947753906" transform="rotate(67.5 414.4505615234375 181.88233947753906)"></use></a> | + | <a class="item" id="item-8" xlink:href="/Team:Uniandes_Colombia/Collaborations" xlink:title=" " transform="matrix(0.7071,0.7071,-0.7071,0.7071,250.00000000000009,-103.55339059327378)" data-svg-origin="250 250" style=""><path fill="none" stroke="#111" d="M350,250 l150,0 A250,250 0 0,0 426.7766952966369,73.22330470336314 l-106.06601717798213,106.0660171779821 A100,100 0 0,1 350,250" class="sector"></path><use xlink:href="#icon-8" width="37" height="150" x="404.4505615234375" y="101.88233947753906" transform="rotate(67.5 414.4505615234375 181.88233947753906)"></use></a> |
</g> | </g> | ||
<g id="trigger" class="trigger menu-trigger"> | <g id="trigger" class="trigger menu-trigger"> | ||
Line 89: | Line 168: | ||
</g> | </g> | ||
</svg> | </svg> | ||
− | <script src="https://2015.igem.org/Template:Uniandes_Colombia/TweenMax.min.js"></script> | + | <script src="https://2015.igem.org/Template:Uniandes_Colombia/TweenMax.min.js?action=raw&ctype=text/javascript"></script> |
− | <script src="https://2015.igem.org/Template:Uniandes_Colombia/animMenu.js" ></script> | + | <script src="https://2015.igem.org/Template:Uniandes_Colombia/animMenu.js?action=raw&ctype=text/javascript" ></script> |
</div> | </div> | ||
− | |||
</html> | </html> |
Latest revision as of 02:58, 19 September 2015