Team:Shenzhen/test2

From 2012.igem.org

(Difference between revisions)
(Created page with "<!DOCTYPE html> <html lang="en"> <head> <title>Creative CSS3 Animation Menus</title> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" conte...")
 
(8 intermediate revisions not shown)
Line 1: Line 1:
-
<!DOCTYPE html>
 
<html lang="en">
<html lang="en">
     <head>
     <head>
Line 10: Line 9:
         <meta name="author" content="Codrops" />
         <meta name="author" content="Codrops" />
         <link rel="shortcut icon" href="../favicon.ico">  
         <link rel="shortcut icon" href="../favicon.ico">  
-
         <link rel="stylesheet" type="text/css" href="css/demo.css" />
+
         <link rel="stylesheet" type="text/css" href="http://reinkk.my3gb.com/igem/demo/create/css/demo.css" />
-
         <link rel="stylesheet" type="text/css" href="css/style1.css" />
+
         <link rel="stylesheet" type="text/css" href="http://reinkk.my3gb.com/igem/demo/create/css/style1.css" />
-
        <link href='http://fonts.googleapis.com/css?family=Terminal+Dosis' rel='stylesheet' type='text/css' />
+
     
     </head>
     </head>
     <body>
     <body>
         <div class="container">
         <div class="container">
-
            <div class="header">
+
 
-
                <a href="http://tympanus.net/Tutorials/BlurMenu/"><strong>&laquo; Previous Demo: </strong>Blur Menu</a>
+
-
                <span class="right">
+
-
                    <a href="http://www.justbenicestudio.com/studio/websymbols/" target="_blank">Font/Icons by Just Be Nice</a>
+
-
                    <a href="http://tympanus.net/codrops/2011/10/24/creative-css3-animation-menus/"><strong>Back to the Codrops Article</strong></a>
+
-
                </span>
+
-
                <div class="clr"></div>
+
-
            </div>
+
-
            <h1>Creative CSS3 Animation Menus <span>Experimenting with CSS3 Transitions &amp; Animations</span></h1>
+
             <div class="content">
             <div class="content">
-
                <div class="more">
+
 
-
                    <ul>
+
-
                        <li class="selected"><a href="index.html">Example 1</a></li>
+
-
                        <li><a href="index2.html">Example 2</a></li>
+
-
                        <li><a href="index3.html">Example 3</a></li>
+
-
                        <li><a href="index4.html">Example 4</a></li>
+
-
                        <li><a href="index5.html">Example 5</a></li>
+
-
                        <li><a href="index6.html">Example 6</a></li>
+
-
                        <li><a href="index7.html">Example 7</a></li>
+
-
                        <li><a href="index8.html">Example 8</a></li>
+
-
                        <li><a href="index9.html">Example 9</a></li>
+
-
                        <li><a href="index10.html">Example 10</a></li>
+
-
                    </ul>
+
-
                </div>
+
                 <ul class="ca-menu">
                 <ul class="ca-menu">
                     <li>
                     <li>
                         <a href="#">
                         <a href="#">
-
                             <span class="ca-icon">A</span>
+
                             <span class="ca-icon">U</span>
                             <div class="ca-content">
                             <div class="ca-content">
-
                                 <h2 class="ca-main">Exceptional Service</h2>
+
                                 <h2 class="ca-main">Team</h2>
-
                                 <h3 class="ca-sub">Personalized to your needs</h3>
+
                                 <h3 class="ca-sub">Stories of Team Shenzhen</h3>
                             </div>
                             </div>
                         </a>
                         </a>
Line 52: Line 30:
                     <li>
                     <li>
                         <a href="#">
                         <a href="#">
-
                             <span class="ca-icon">I</span>
+
                             <span class="ca-icon">C</span>
                             <div class="ca-content">
                             <div class="ca-content">
-
                                 <h2 class="ca-main">Creative Storytelling</h2>
+
                                 <h2 class="ca-main">Project</h2>
-
                                 <h3 class="ca-sub">Advanced use of technology</h3>
+
                                 <h3 class="ca-sub">Yeast Artificial Organelle</h3>
                             </div>
                             </div>
                         </a>
                         </a>
Line 61: Line 39:
                     <li>
                     <li>
                         <a href="#">
                         <a href="#">
-
                             <span class="ca-icon">C</span>
+
                             <span class="ca-icon">R</span>
 +
                            <div class="ca-content">
 +
                                <h2 class="ca-main">BioBricks</h2>
 +
                                <h3 class="ca-sub">Biological Parts & Devices</h3>
 +
                            </div>
 +
                        </a>
 +
                    </li>
 +
                    <li>
 +
                        <a href="#">
 +
                            <span class="ca-icon">K</span>
 +
                            <div class="ca-content">
 +
                                <h2 class="ca-main">Experiment</h2>
 +
                                <h3 class="ca-sub">Experimental Results</h3>
 +
                            </div>
 +
                        </a>
 +
                    </li>
 +
                    <li>
 +
                        <a href="#">
 +
                            <span class="ca-icon">H</span>
 +
                            <div class="ca-content">
 +
                                <h2 class="ca-main">Modeling</h2>
 +
                                <h3 class="ca-sub"> Mathematical Simulation</h3>
 +
                            </div>
 +
                        </a>
 +
                    </li>
 +
                    <li>
 +
                        <a href="#">
 +
                            <span class="ca-icon">p</span>
                             <div class="ca-content">
                             <div class="ca-content">
-
                                 <h2 class="ca-main">Infographical Education</h2>
+
                                 <h2 class="ca-main">Notebook</h2>
-
                                 <h3 class="ca-sub">Understanding visually</h3>
+
                                 <h3 class="ca-sub">Wet Lab Journal</h3>
                             </div>
                             </div>
                         </a>
                         </a>
Line 70: Line 75:
                     <li>
                     <li>
                         <a href="#">
                         <a href="#">
-
                             <span class="ca-icon">S</span>
+
                             <span class="ca-icon">e</span>
                             <div class="ca-content">
                             <div class="ca-content">
-
                                 <h2 class="ca-main">Sophisticated Team</h2>
+
                                 <h2 class="ca-main">Human Practice</h2>
-
                                 <h3 class="ca-sub">Professionals in action</h3>
+
                                 <h3 class="ca-sub">Biosafe & Lectures</h3>
                             </div>
                             </div>
                         </a>
                         </a>
Line 79: Line 84:
                     <li>
                     <li>
                         <a href="#">
                         <a href="#">
-
                             <span class="ca-icon">d</span>
+
                             <span class="ca-icon">B</span>
                             <div class="ca-content">
                             <div class="ca-content">
-
                                 <h2 class="ca-main">Unconditional Support</h2>
+
                                 <h2 class="ca-main">Acknowledgment</h2>
-
                                 <h3 class="ca-sub">24/7 for you needs</h3>
+
                                 <h3 class="ca-sub">People Gave Hands</h3>
                             </div>
                             </div>
                         </a>
                         </a>

Latest revision as of 16:28, 17 July 2012

Creative CSS3 Animation Menus

Retrieved from "http://2012.igem.org/Team:Shenzhen/test2"