Template:Team:DukeMenu/CSS

From 2014.igem.org

(Difference between revisions)
Line 36: Line 36:
   box-shadow: 0px 0px 20px rgba(7, 54, 164, 0);
   box-shadow: 0px 0px 20px rgba(7, 54, 164, 0);
}
}
-
 
-
.banner--clone{position:fixed;top:0;left:0;background:#c95a5d;-webkit-transform:translateY(-100%);-ms-transform:translateY(-100%);transform:translateY(-100%);-webkit-transition:all 300ms ease-in-out;-moz-transition:all 300ms ease-in-out;transition:all 300ms ease-in-out}.banner--stick{-webkit-transform:translateY(0%);-ms-transform:translateY(0%);transform:translateY(0%)}
 
-
 
-
*{-webkit-box-sizing:border-box;-mox-box-sizing:border-box;box-sizing:border-box}html{line-height:1.6;font-family:'Open Sans', 'Helvetica', sans-serif}a{text-decoration:none;color:#c95a5d;-webkit-transition:all 300ms ease-in-out;-moz-transition:all 300ms ease-in-out;transition:all 300ms ease-in-out}a:hover{color:#7C2B2D}.lead{font-size:18px;margin-bottom:60px}.btn{border:2px solid #fff;border-radius:6px;font-weight:bold;text-transform:uppercase;padding:10px;text-shadow:none !important}.btn:hover{background:#fff;color:#7C2B2D}.banner{background:#c95a5d;border-bottom:1px solid rgba(255,255,255,0.1);height:70px;width:100%;color:#fff}.banner a{color:#fff}.banner a:hover{color:#7C2B2D}.logo{float:left;margin:0;font-size:20px;line-height:70px}.nav{height:40px;padding:0;margin:15px 0 0;float:right}.nav__item{height:40px;line-height:40px;padding:0;margin-left:10px;display:inline-block}.nav__item--btn{display:inline-block;padding:0 10pxi;font-size:14px;line-height:38px;padding:0 20px;width:auto}.hero{background:#c95a5d;color:#fff;text-align:center;margin-bottom:60px;overflow:hidden;padding:60px;text-shadow:0 1px 1px rgba(0,0,0,0.3)}.hero__title{font-size:72px;margin:0 0 10px}.hero__snippet{font-size:32px;font-style:italic;margin:0 0 40px}.hero__btn{border-color:#fff;color:#fff;padding:10px 0;width:160px;display:inline-block}.btn-list{list-style:none;margin:0;padding:0}.btn-list__item{display:inline-block;margin:auto 5px}.container{width:90%;max-width:800px;margin:auto}footer{margin-top:60px;color:#888;border-top:1px solid #eee;font-size:14px}footer .top{float:right}
 
</style>
</style>
Line 64: Line 60:
</div>
</div>
-
<header class="banner">
 
-
        <nav class="container">
 
-
            <h1 class="logo">Headhesive.js</h1>
 
-
            <ul class="nav">
 
-
                <li class="nav__item"><a href="https://twitter.com/markgdyr">@markgdyr</a></li>
 
-
            </ul>
 
-
        </nav>
 
-
    </header>
 
-
 
-
 
-
    <script type="text/javascript" src="/labs/headhesive/js/headhesive.min.js"></script>
 
-
    <script>
 
-
 
-
        // Set options
 
-
        var options = {
 
-
            offset: '#showHere',
 
-
            classes: {
 
-
                clone:  'banner--clone',
 
-
                stick:  'banner--stick',
 
-
                unstick: 'banner--unstick'
 
-
            }
 
-
        };
 
-
 
-
        // Initialise with options
 
-
        var banner = new Headhesive('.banner', options);
 
-
        // Headhesive destroy
 
-
        // banner.destroy();
 
-
    </script>
 
</body>
</body>
</html>
</html>

Revision as of 21:12, 25 July 2014

Retrieved from "http://2014.igem.org/Template:Team:DukeMenu/CSS"