diff options
| -rw-r--r-- | css/main.css | 68 | ||||
| -rwxr-xr-x | index.html | 4 | ||||
| -rwxr-xr-x | page.html | 283 |
3 files changed, 353 insertions, 2 deletions
diff --git a/css/main.css b/css/main.css index fa76b82..dfce5e2 100644 --- a/css/main.css +++ b/css/main.css @@ -30,6 +30,12 @@ body { font-family: 'EB Garamond', serif; font-weight: 15px; } +#main-nav a { + -webkit-transition: color .5s ease-out 0s; + -moz-transition: color .5s ease-out 0s; + -o-transition: color .5s ease-out 0s; + transition: color .5s ease-out 0s; +} #main-nav .navbar-default .navbar-nav > .active > a { background: #ffffff; font-weight: bold; @@ -77,6 +83,12 @@ body { color: #4d4d4d; border: 1px solid #4d4d4d; } +#speakers .thumbnail:hover { + -webkit-box-shadow: 0 0 7px #cccccc; + -moz-box-shadow: 0 0 7px #cccccc; + -o-box-shadow: 0 0 7px #cccccc; + box-shadow: 0 0 7px #cccccc; +} #footer-wrapper { width: 960px; margin: 0 auto 25px; @@ -118,3 +130,59 @@ body { #social img { width: 25px; } +#page-header { + height: 100px; + background: url("../images/jumbo_bg.jpg"); + background-attachment: fixed; + color: #ffffff; +} +#page-header #stage { + position: relative; + top: 25px; + padding: 10px; +} +#page-header #brand { + display: inline; + position: relative; + top: 3px; + left: 2px; +} +#page-header #current { + text-shadow: 0 0 2px #ffffff; +} +#page-content { + margin-top: 35px; +} +#page-content .col-md-9 { + min-height: 400px; +} +.nav-group li a { + position: relative; + display: block; + padding: 10px 15px; + margin-bottom: -1px; + background-color: #fff; + border: 1px solid #ddd; + color: #777777; +} +.nav-group li:first-child a { + border-top-left-radius: 4px; + border-top-right-radius: 4px; +} +.nav-group li:last-child a { + border-bottom-left-radius: 4px; + border-bottom-right-radius: 4px; +} +.nav-group li.active a { + background: #f5f5f5; +} +@media (min-width: 979px) { + #sidebar .nav-group.affix { + width:210px !important; + top: 10px; + } +} +#page-content h2 { + /* fix first h2*/ + margin-top: 0; +} @@ -26,8 +26,8 @@ <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> - <li><a href="#">Home</a></li> - <li class="active"><a href="#">Call for papers</a></li> + <li class="active"><a href="#">Home</a></li> + <li><a href="#">Call for papers</a></li> <li><a href="#">Schedule</a></li> <li><a href="#">Invited Speakers</a></li> <li><a href="#">Sponsors</a></li> diff --git a/page.html b/page.html new file mode 100755 index 0000000..64d547c --- /dev/null +++ b/page.html @@ -0,0 +1,283 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8"> + <title>Scipy Conf</title> + <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> + <link rel="stylesheet" href="css/main.css"> +</head> +<body> + <div id="page-wrapper"> + <div id="header-wrapper"> + <div id="main-nav"> + <nav class="navbar navbar-default" role="navigation"> + <div class="container-fluid"> + <!-- Brand and toggle get grouped for better mobile display --> + <div class="navbar-header"> + <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> + <span class="sr-only">Toggle navigation</span> + <span class="icon-bar"></span> + <span class="icon-bar"></span> + <span class="icon-bar"></span> + </button> + <!-- <a class="navbar-brand" href="#">Brand</a> --> + </div> + + <!-- Collect the nav links, forms, and other content for toggling --> + <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> + <ul class="nav navbar-nav"> + <li><a href="#">Home</a></li> + <li><a href="#">Call for papers</a></li> + <li class="active"><a href="#">Schedule</a></li> + <li><a href="#">Invited Speakers</a></li> + <li><a href="#">Sponsors</a></li> + <li><a href="#">Venue</a></li> + <li><a href="#">Contact Us</a></li> + </ul> + <ul class="nav navbar-nav navbar-right"> + <li><a href="#">Register</a></li> + </ul> + </div><!-- /.navbar-collapse --> + </div><!-- /.container-fluid --> + </nav> + </div> <!-- /#main-nav --> + <div id="page-header"> + <div id="stage"> + <img id="scipy-logo" src="images/scipy_india_logo.png" width="30"> + <h3 id="brand">Scipy India 2014 — <span id="current">Schedule</span></h3> + </div> + </div> <!-- /#page-header --> + </div> <!-- /#header-wrapper --> + + <div id="content-wrapper"> + <div id="page-content"> + <div class="container-fluid"> + <div class="row"> + <div class="col-md-3" id="sidebar"> + <ul class="nav nav-group garmond"> + <li class="active"><a href="#one">Morbi leo risus</a></li> + <li><a href="#two">Cras justo odio</a></li> + <li><a href="#three">Porta ac consectetur ac</a></li> + <li><a href="#four">Vestibulum at eros</a></li> + <li><a href="#five">Dapibus ac facilisis in</a></li> + </ul> + </div> + <div class="col-md-9 text-justify"> + <div id="one"> + <h2 class="garmond"><u>Lorem ipsum dolor si</u></h2> + <p> + Lorem ipsum dolor sit amet, consectetuer adipiscing + elit. Aenean commodo ligula eget dolor. Aenean massa + <strong>strong</strong>. Cum sociis natoque penatibus + et magnis dis parturient montes, nascetur ridiculus + mus. Donec quam felis, ultricies nec, pellentesque + eu, pretium quis, sem. Nulla consequat massa quis + enim. Donec pede justo, fringilla vel, aliquet nec, + vulputate eget, arcu. In enim justo, rhoncus ut, + imperdiet a, venenatis vitae, justo. Nullam dictum + felis eu pede <a class="external ext" href="#">link</a> + mollis pretium. Integer tincidunt. Cras dapibus. + Vivamus elementum semper nisi. Aenean vulputate + eleifend tellus. Aenean leo ligula, porttitor eu, + consequat vitae, eleifend ac, enim. Aliquam lorem ante, + dapibus in, viverra quis, feugiat a, tellus. Phasellus + viverra nulla ut metus varius laoreet. Quisque rutrum. + Aenean imperdiet. Etiam ultricies nisi vel augue. + Curabitur ullamcorper ultricies nisi. + </p> + </div> + + <hr> + <div id="two"> + <p> + Lorem ipsum dolor sit amet, consectetuer adipiscing + elit. Aenean commodo ligula eget dolor. Aenean massa. + Cum sociis natoque penatibus et magnis dis parturient + montes, nascetur ridiculus mus. Donec quam felis, + ultricies nec, pellentesque eu, pretium quis, sem. + </p> + <ul> + <li>Lorem ipsum dolor sit amet consectetuer.</li> + <li>Aenean commodo ligula eget dolor.</li> + <li>Aenean massa cum sociis natoque penatibus.</li> + </ul> + </div> + + <hr> + <div id="three"> + <div class="media"> + <a class="pull-left" href="#"> + <img class="media-object" src="holder.js/120x90" alt="..."> + </a> + <div class="media-body"> + <h4 class="media-heading">Consequat vitae</h4> + Cras sit amet nibh libero, in gravida + nulla. Nulla vel metus scelerisque ante + sollicitudin commodo. Cras purus odio, + vestibulum in vulputate at, tempus viverra + turpis. Fusce condimentum nunc ac nisi + vulputate fringilla. Donec lacinia congue + felis in faucibus. + </div> + </div> <!-- /.media --> + <div class="media"> + <a class="pull-left" href="#"> + <img class="media-object" src="holder.js/120x90" alt="..."> + </a> + <div class="media-body"> + <h4 class="media-heading">Consequat vitae</h4> + Cras sit amet nibh libero, in gravida + nulla. Nulla vel metus scelerisque ante + sollicitudin commodo. Cras purus odio, + vestibulum in vulputate at, tempus viverra + turpis. Fusce condimentum nunc ac nisi + vulputate fringilla. Donec lacinia congue + felis in faucibus. + </div> + </div> <!-- /.media --> + </div> + + <hr> + <div id="four"> + <div class="panel panel-default"> + <div class="panel-heading"> + Phasellus viverra nulla + </div> + <div class="panel-body"> + <div class="media"> + <a class="pull-left" href="#"> + <img class="media-object" src="holder.js/120x90" alt="..."> + </a> + <div class="media-body"> + <h4 class="media-heading">Consequat vitae</h4> + Cras sit amet nibh libero, in gravida + nulla. Nulla vel metus scelerisque ante + sollicitudin commodo. Cras purus odio, + vestibulum in vulputate at, tempus viverra + turpis. Fusce condimentum nunc ac nisi + vulputate fringilla. Donec lacinia congue + felis in faucibus. + </div> + </div> <!-- /.media --> + <div class="media"> + <a class="pull-left" href="#"> + <img class="media-object" src="holder.js/120x90" alt="..."> + </a> + <div class="media-body"> + <h4 class="media-heading">Consequat vitae</h4> + Cras sit amet nibh libero, in gravida + nulla. Nulla vel metus scelerisque ante + sollicitudin commodo. Cras purus odio, + vestibulum in vulputate at, tempus viverra + turpis. Fusce condimentum nunc ac nisi + vulputate fringilla. Donec lacinia congue + felis in faucibus. + </div> + </div> <!-- /.media --> + <div class="media"> + <a class="pull-left" href="#"> + <img class="media-object" src="holder.js/120x90" alt="..."> + </a> + <div class="media-body"> + <h4 class="media-heading">Consequat vitae</h4> + Cras sit amet nibh libero, in gravida + nulla. Nulla vel metus scelerisque ante + sollicitudin commodo. Cras purus odio, + vestibulum in vulputate at, tempus viverra + turpis. Fusce condimentum nunc ac nisi + vulputate fringilla. Donec lacinia congue + felis in faucibus. + </div> + </div> <!-- /.media --> + </div> + </div> + </div> + + <hr> + <div id="five"> + <p> + Lorem ipsum dolor sit amet, consectetuer adipiscing + elit. Aenean commodo ligula eget dolor. Aenean massa. + Cum sociis natoque penatibus et magnis dis parturient + montes, nascetur ridiculus mus. Donec quam felis, + ultricies nec, pellentesque eu, pretium quis, sem. + </p> + + <p> + Lorem ipsum dolor sit amet, consectetuer adipiscing + elit. Aenean commodo ligula eget dolor. Aenean massa. + Cum sociis natoque penatibus et magnis dis parturient + montes, nascetur ridiculus mus. Donec quam felis, + ultricies nec, pellentesque eu, pretium quis, sem. + </p> + + <table class="data table table-bordered"> + <tr> + <th>Entry Header 1</th> + <th>Entry Header 2</th> + <th>Entry Header 3</th> + <th>Entry Header 4</th> + </tr> + <tr> + <td>Entry First Line 1</td> + <td>Entry First Line 2</td> + <td>Entry First Line 3</td> + <td>Entry First Line 4</td> + </tr> + <tr> + <td>Entry Line 1</td> + <td>Entry Line 2</td> + <td>Entry Line 3</td> + <td>Entry Line 4</td> + </tr> + <tr> + <td>Entry Last Line 1</td> + <td>Entry Last Line 2</td> + <td>Entry Last Line 3</td> + <td>Entry Last Line 4</td> + </tr> + </table> + </div> + </div> <!-- /.col --> + </div> <!-- /.row --> + </div><!-- /.container-fluid --> + </div> <!-- /#page-content --> + </div> <!-- /#content-wrapper --> + + </div> <!-- /#page-wrapper --> + <div id="footer-wrapper"> + <div id="footer"> + <div class="pull-left"> + © 2014 Scipy India. + </div> + <div class="pull-right"> + <i>Developed by</i> <a href="http://fossee.in" target="_blank">FOSSEE</a> + </div> + <div class="clearfix"></div> + </div> <!-- /#footer --> + </div> <!-- /#footer-wrapper --> + + <div id="social"> + <ul> + <li><a href=""><img src="images/facebook.png" alt="fb"></a></li> + <li><a href=""><img src="images/twitter.png" alt="tw"></a></li> + <li><a href=""><img src="images/googleplus.png" alt="gp"></a></li> + </ul> + </div> <!-- /#social --> +<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> +<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> +<script src="js/holder.js"></script> +<script type="text/javascript" charset="utf-8"> + $('#sidebar .nav-group').affix({ + offset: { + top: 200 + } + }); + + $("body").scrollspy({ + target: '#sidebar', + offset: 30 + }); +</script> +</body> +</html> |