Difference between revisions of "Template:Uniandes Colombia"

(Try to implement circular SVG menu. Take 1)
 
(16 intermediate revisions by 2 users not shown)
Line 1: Line 1:
−
 
+
{{Template_All_Teams}}
−
<html lang="en">
+
<html>
 
<head>
 
<head>
 
<meta charset="UTF-8" />
 
<meta charset="UTF-8" />
−
<!--meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 
−
<meta name="viewport" content="width=device-width, initial-scale=1.0"-->
 
 
<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 Cardenas from templates by Sara Soueidan for Codrops" />
+
<meta name="author" content="Pablo CR from templates by Sara Soueidan for Codrops" />
−
<link rel="shortcut icon" href="img/iGEMlogo.png">
+
<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/CSS?action=raw&ctype=text/javascript" />
+
         <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>
 
<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>
Line 20: Line 24:
 
               padding: 1em;
 
               padding: 1em;
 
               background-color: #EFEFF0;
 
               background-color: #EFEFF0;
−
               background-image: url(img/connect.png);
+
               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 32: 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>
−
</head>
+
 +
 
 +
 
 +
 
 +
<!--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>
 +
 
 +
 
 +
 
 +
 
  
−
<body>
+
</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 -->
−
            <h1>Click the button!</h1>
 
 
             <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 69: 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 83: 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>
  
  
−
</body>
 
 
</html>
 
</html>

Latest revision as of 02:58, 19 September 2015

iGEM Uniandes-Colombia

Team Project Wet Lab Dry Lab Hardware Human Practices Collaborations -