Difference between revisions of "Team:BostonU HW/CSS"
| Line 10: | Line 10: | ||
#bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; } | #bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; } | ||
| + | /*! | ||
| + | * Start Bootstrap - Stylish Portfolio Bootstrap Theme (http://startbootstrap.com) | ||
| + | * Code licensed under the Apache License v2.0. | ||
| + | * For details, see http://www.apache.org/licenses/LICENSE-2.0. | ||
| + | */ | ||
| − | + | /* Global Styles */ | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | html, | |
| − | + | body { | |
| − | + | width: 100%; | |
| − | + | height: 100%; | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
} | } | ||
| − | + | body { | |
| − | + | font-family: "Source Sans Pro","Helvetica Neue",Helvetica,Arial,sans-serif; | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
} | } | ||
| − | + | .text-vertical-center { | |
| − | + | display: table-cell; | |
| − | + | text-align: center; | |
| − | + | vertical-align: middle; | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
} | } | ||
| − | + | .text-vertical-center h1 { | |
| − | + | margin: 0; | |
| − | + | padding: 0; | |
| − | + | font-size: 4.5em; | |
| + | font-weight: 700; | ||
} | } | ||
| − | + | /* Custom Button Styles */ | |
| − | { | + | |
| − | + | .btn-dark { | |
| − | + | border-radius: 0; | |
| − | + | color: #fff; | |
| + | background-color: rgba(0,0,0,0.4); | ||
} | } | ||
| − | |||
| − | |||
| − | |||
| − | + | .btn-dark:hover, | |
| − | + | .btn-dark:focus, | |
| − | + | .btn-dark:active { | |
| − | + | color: #fff; | |
| + | background-color: rgba(0,0,0,0.7); | ||
} | } | ||
| − | + | .btn-light { | |
| − | + | border-radius: 0; | |
| − | + | color: #333; | |
| + | background-color: rgb(255,255,255); | ||
} | } | ||
| − | . | + | .btn-light:hover, |
| − | + | .btn-light:focus, | |
| − | + | .btn-light:active { | |
| − | + | color: #333; | |
| − | + | background-color: rgba(255,255,255,0.8); | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
} | } | ||
| − | . | + | /* Custom Horizontal Rule */ |
| − | + | ||
| − | + | hr.small { | |
| − | + | max-width: 100px; | |
| − | + | ||
} | } | ||
| − | + | /* Side Menu */ | |
| − | + | ||
| − | + | #sidebar-wrapper { | |
| − | + | z-index: 1000; | |
| + | position: fixed; | ||
| + | right: 0; | ||
| + | width: 250px; | ||
| + | height: 100%; | ||
| + | margin-right: -250px; | ||
| + | overflow-y: auto; | ||
| + | background: #222; | ||
| + | -webkit-transition: all 0.4s ease 0s; | ||
| + | -moz-transition: all 0.4s ease 0s; | ||
| + | -ms-transition: all 0.4s ease 0s; | ||
| + | -o-transition: all 0.4s ease 0s; | ||
| + | transition: all 0.4s ease 0s; | ||
} | } | ||
| − | + | .sidebar-nav { | |
| − | + | position: absolute; | |
| − | + | top: 0; | |
| − | + | width: 250px; | |
| − | + | margin: 0; | |
| + | padding: 0; | ||
| + | list-style: none; | ||
} | } | ||
| − | + | .sidebar-nav li { | |
| − | + | text-indent: 20px; | |
| − | + | line-height: 40px; | |
| − | + | ||
| − | + | ||
} | } | ||
| − | + | .sidebar-nav li a { | |
| − | + | display: block; | |
| − | + | text-decoration: none; | |
| − | + | color: #999; | |
| − | + | ||
| − | + | ||
| − | + | ||
} | } | ||
| − | + | .sidebar-nav li a:hover { | |
| − | + | text-decoration: none; | |
| − | + | color: #fff; | |
| − | + | background: rgba(255,255,255,0.2); | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
} | } | ||
| − | + | .sidebar-nav li a:active, | |
| − | + | .sidebar-nav li a:focus { | |
| − | + | text-decoration: none; | |
| − | + | ||
| − | + | ||
} | } | ||
| − | + | .sidebar-nav > .sidebar-brand { | |
| − | + | height: 55px; | |
| − | + | font-size: 18px; | |
| − | + | line-height: 55px; | |
| − | + | ||
} | } | ||
| − | + | .sidebar-nav > .sidebar-brand a { | |
| − | + | color: #999; | |
| − | + | ||
| − | + | ||
} | } | ||
| − | + | .sidebar-nav > .sidebar-brand a:hover { | |
| − | + | color: #fff; | |
| − | + | background: none; | |
| − | + | ||
| − | + | ||
| − | + | ||
} | } | ||
| − | + | #menu-toggle { | |
| − | + | z-index: 1; | |
| − | + | position: fixed; | |
| + | top: 0; | ||
| + | right: 0; | ||
} | } | ||
| − | # | + | #sidebar-wrapper.active { |
| − | + | right: 250px; | |
| − | + | width: 250px; | |
| − | + | -webkit-transition: all 0.4s ease 0s; | |
| − | + | -moz-transition: all 0.4s ease 0s; | |
| − | + | -ms-transition: all 0.4s ease 0s; | |
| + | -o-transition: all 0.4s ease 0s; | ||
| + | transition: all 0.4s ease 0s; | ||
} | } | ||
| − | . | + | .toggle { |
| − | + | margin: 5px 5px 0 0; | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
} | } | ||
| + | /* Header */ | ||
| − | + | .header { | |
| − | { | + | display: table; |
| − | + | position: relative; | |
| − | + | width: 100%; | |
| − | + | height: 100%; | |
| − | + | background: url(../img/bg.jpg) no-repeat center center scroll; | |
| − | + | -webkit-background-size: cover; | |
| − | + | -moz-background-size: cover; | |
| − | + | background-size: cover; | |
| − | + | -o-background-size: cover; | |
} | } | ||
| − | + | /* About */ | |
| − | + | ||
| − | + | .about { | |
| − | + | padding: 50px 0; | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
} | } | ||
| − | + | /* Services */ | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| + | .services { | ||
| + | padding: 50px 0; | ||
} | } | ||
| − | |||
| − | + | .service-item { | |
| − | + | margin-bottom: 30px; | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
} | } | ||
| − | + | /* Callout */ | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | .callout { | |
| − | + | display: table; | |
| − | + | width: 100%; | |
| + | height: 400px; | ||
| + | color: #fff; | ||
| + | background: url(../img/callout.jpg) no-repeat center center scroll; | ||
| + | -webkit-background-size: cover; | ||
| + | -moz-background-size: cover; | ||
| + | background-size: cover; | ||
| + | -o-background-size: cover; | ||
} | } | ||
| + | /* Portfolio */ | ||
| − | + | .portfolio { | |
| − | + | padding: 50px 0; | |
| − | + | ||
| − | + | ||
} | } | ||
| − | + | .portfolio-item { | |
| − | + | margin-bottom: 30px; | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
} | } | ||
| − | + | ||
| − | + | .img-portfolio { | |
| − | + | margin: 0 auto; | |
| − | + | ||
} | } | ||
| − | + | .img-portfolio:hover { | |
| − | + | opacity: 0.8; | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
} | } | ||
| + | /* Call to Action */ | ||
| − | + | .call-to-action { | |
| − | + | padding: 50px 0; | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
} | } | ||
| − | + | .call-to-action .btn { | |
| − | + | margin: 10px; | |
| − | + | ||
} | } | ||
| − | /* | + | /* Map */ |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | . | + | .map { |
| − | + | height: 500px; | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
} | } | ||
| − | + | @media(max-width:768px) { | |
| − | + | .map { | |
| − | + | height: 75%; | |
| − | + | } | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
} | } | ||
| − | + | /* Footer */ | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | footer { | |
| − | + | padding: 100px 0; | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
} | } | ||
| − | + | </style> | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | + | <head> | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | <!-- Latest compiled and minified CSS --> | |
| − | + | <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| + | <!-- Optional theme --> | ||
| + | <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous"> | ||
| − | + | <!-- Latest compiled and minified JavaScript --> | |
| − | + | <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script> | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | </head> | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | + | <body> | |
| − | + | <!-- Navigation --> | |
| − | + | <a id="menu-toggle" href="#" class="btn btn-dark btn-lg toggle"><i class="fa fa-bars"></i></a> | |
| − | + | <nav id="sidebar-wrapper"> | |
| − | + | <ul class="sidebar-nav"> | |
| − | + | <a id="menu-close" href="#" class="btn btn-light btn-lg pull-right toggle"><i class="fa fa-times"></i></a> | |
| + | <li class="sidebar-brand"> | ||
| + | <a href="#top" onclick = $("#menu-close").click(); >Start Bootstrap</a> | ||
| + | </li> | ||
| + | <li> | ||
| + | <a href="#top" onclick = $("#menu-close").click(); >Home</a> | ||
| + | </li> | ||
| + | <li> | ||
| + | <a href="#about" onclick = $("#menu-close").click(); >About</a> | ||
| + | </li> | ||
| + | <li> | ||
| + | <a href="#services" onclick = $("#menu-close").click(); >Services</a> | ||
| + | </li> | ||
| + | <li> | ||
| + | <a href="#portfolio" onclick = $("#menu-close").click(); >Portfolio</a> | ||
| + | </li> | ||
| + | <li> | ||
| + | <a href="#contact" onclick = $("#menu-close").click(); >Contact</a> | ||
| + | </li> | ||
| + | </ul> | ||
| + | </nav> | ||
| + | <!-- Header --> | ||
| + | <header id="top" class="header"> | ||
| + | <div class="text-vertical-center"> | ||
| + | <h1>Start Bootstrap</h1> | ||
| + | <h3>Free Bootstrap Themes & Templates</h3> | ||
| + | <br> | ||
| + | <a href="#about" class="btn btn-dark btn-lg">Find Out More</a> | ||
| + | </div> | ||
| + | </header> | ||
| − | </ | + | <!-- About --> |
| + | <section id="about" class="about"> | ||
| + | <div class="container"> | ||
| + | <div class="row"> | ||
| + | <div class="col-lg-12 text-center"> | ||
| + | <h2>Stylish Portfolio is the perfect theme for your next project!</h2> | ||
| + | <p class="lead">This theme features some wonderful photography courtesy of <a target="_blank" href="http://join.deathtothestockphoto.com/">Death to the Stock Photo</a>.</p> | ||
| + | </div> | ||
| + | </div> | ||
| + | <!-- /.row --> | ||
| + | </div> | ||
| + | <!-- /.container --> | ||
| + | </section> | ||
| + | <!-- Services --> | ||
| + | <!-- The circle icons use Font Awesome's stacked icon classes. For more information, visit http://fontawesome.io/examples/ --> | ||
| + | <section id="services" class="services bg-primary"> | ||
| + | <div class="container"> | ||
| + | <div class="row text-center"> | ||
| + | <div class="col-lg-10 col-lg-offset-1"> | ||
| + | <h2>Our Services</h2> | ||
| + | <hr class="small"> | ||
| + | <div class="row"> | ||
| + | <div class="col-md-3 col-sm-6"> | ||
| + | <div class="service-item"> | ||
| + | <span class="fa-stack fa-4x"> | ||
| + | <i class="fa fa-circle fa-stack-2x"></i> | ||
| + | <i class="fa fa-cloud fa-stack-1x text-primary"></i> | ||
| + | </span> | ||
| + | <h4> | ||
| + | <strong>Service Name</strong> | ||
| + | </h4> | ||
| + | <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> | ||
| + | <a href="#" class="btn btn-light">Learn More</a> | ||
| + | </div> | ||
| + | </div> | ||
| + | <div class="col-md-3 col-sm-6"> | ||
| + | <div class="service-item"> | ||
| + | <span class="fa-stack fa-4x"> | ||
| + | <i class="fa fa-circle fa-stack-2x"></i> | ||
| + | <i class="fa fa-compass fa-stack-1x text-primary"></i> | ||
| + | </span> | ||
| + | <h4> | ||
| + | <strong>Service Name</strong> | ||
| + | </h4> | ||
| + | <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> | ||
| + | <a href="#" class="btn btn-light">Learn More</a> | ||
| + | </div> | ||
| + | </div> | ||
| + | <div class="col-md-3 col-sm-6"> | ||
| + | <div class="service-item"> | ||
| + | <span class="fa-stack fa-4x"> | ||
| + | <i class="fa fa-circle fa-stack-2x"></i> | ||
| + | <i class="fa fa-flask fa-stack-1x text-primary"></i> | ||
| + | </span> | ||
| + | <h4> | ||
| + | <strong>Service Name</strong> | ||
| + | </h4> | ||
| + | <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> | ||
| + | <a href="#" class="btn btn-light">Learn More</a> | ||
| + | </div> | ||
| + | </div> | ||
| + | <div class="col-md-3 col-sm-6"> | ||
| + | <div class="service-item"> | ||
| + | <span class="fa-stack fa-4x"> | ||
| + | <i class="fa fa-circle fa-stack-2x"></i> | ||
| + | <i class="fa fa-shield fa-stack-1x text-primary"></i> | ||
| + | </span> | ||
| + | <h4> | ||
| + | <strong>Service Name</strong> | ||
| + | </h4> | ||
| + | <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> | ||
| + | <a href="#" class="btn btn-light">Learn More</a> | ||
| + | </div> | ||
| + | </div> | ||
| + | </div> | ||
| + | <!-- /.row (nested) --> | ||
| + | </div> | ||
| + | <!-- /.col-lg-10 --> | ||
| + | </div> | ||
| + | <!-- /.row --> | ||
| + | </div> | ||
| + | <!-- /.container --> | ||
| + | </section> | ||
| − | < | + | <!-- Callout --> |
| − | + | <aside class="callout"> | |
| − | + | <div class="text-vertical-center"> | |
| − | + | <h1>Vertically Centered Text</h1> | |
| − | + | </div> | |
| − | + | </aside> | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | </ | + | |
| − | </ | + | |
| − | + | ||
| − | < | + | |
| − | <!-- | + | <!-- Portfolio --> |
| − | <div class=" | + | <section id="portfolio" class="portfolio"> |
| + | <div class="container"> | ||
| + | <div class="row"> | ||
| + | <div class="col-lg-10 col-lg-offset-1 text-center"> | ||
| + | <h2>Our Work</h2> | ||
| + | <hr class="small"> | ||
| + | <div class="row"> | ||
| + | <div class="col-md-6"> | ||
| + | <div class="portfolio-item"> | ||
| + | <a href="#"> | ||
| + | <img class="img-portfolio img-responsive" src="img/portfolio-1.jpg"> | ||
| + | </a> | ||
| + | </div> | ||
| + | </div> | ||
| + | <div class="col-md-6"> | ||
| + | <div class="portfolio-item"> | ||
| + | <a href="#"> | ||
| + | <img class="img-portfolio img-responsive" src="img/portfolio-2.jpg"> | ||
| + | </a> | ||
| + | </div> | ||
| + | </div> | ||
| + | <div class="col-md-6"> | ||
| + | <div class="portfolio-item"> | ||
| + | <a href="#"> | ||
| + | <img class="img-portfolio img-responsive" src="img/portfolio-3.jpg"> | ||
| + | </a> | ||
| + | </div> | ||
| + | </div> | ||
| + | <div class="col-md-6"> | ||
| + | <div class="portfolio-item"> | ||
| + | <a href="#"> | ||
| + | <img class="img-portfolio img-responsive" src="img/portfolio-4.jpg"> | ||
| + | </a> | ||
| + | </div> | ||
| + | </div> | ||
| + | </div> | ||
| + | <!-- /.row (nested) --> | ||
| + | <a href="#" class="btn btn-dark">View More Items</a> | ||
| + | </div> | ||
| + | <!-- /.col-lg-10 --> | ||
| + | </div> | ||
| + | <!-- /.row --> | ||
| + | </div> | ||
| + | <!-- /.container --> | ||
| + | </section> | ||
| − | <!-- | + | <!-- Call to Action --> |
| − | <div class=" | + | <aside class="call-to-action bg-primary"> |
| + | <div class="container"> | ||
| + | <div class="row"> | ||
| + | <div class="col-lg-12 text-center"> | ||
| + | <h3>The buttons below are impossible to resist.</h3> | ||
| + | <a href="#" class="btn btn-lg btn-light">Click Me!</a> | ||
| + | <a href="#" class="btn btn-lg btn-dark">Look at Me!</a> | ||
| + | </div> | ||
| + | </div> | ||
| + | </div> | ||
| + | </aside> | ||
| − | <!-- | + | <!-- Map --> |
| − | + | <section id="contact" class="map"> | |
| − | </ | + | <iframe width="100%" height="100%" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=Twitter,+Inc.,+Market+Street,+San+Francisco,+CA&aq=0&oq=twitter&sll=28.659344,-81.187888&sspn=0.128789,0.264187&ie=UTF8&hq=Twitter,+Inc.,+Market+Street,+San+Francisco,+CA&t=m&z=15&iwloc=A&output=embed"></iframe> |
| + | <br /> | ||
| + | <small> | ||
| + | <a href="https://maps.google.com/maps?f=q&source=embed&hl=en&geocode=&q=Twitter,+Inc.,+Market+Street,+San+Francisco,+CA&aq=0&oq=twitter&sll=28.659344,-81.187888&sspn=0.128789,0.264187&ie=UTF8&hq=Twitter,+Inc.,+Market+Street,+San+Francisco,+CA&t=m&z=15&iwloc=A"></a> | ||
| + | </small> | ||
| + | </iframe> | ||
| + | </section> | ||
| − | <!-- | + | <!-- Footer --> |
| − | < | + | <footer> |
| − | + | <div class="container"> | |
| − | + | <div class="row"> | |
| − | + | <div class="col-lg-10 col-lg-offset-1 text-center"> | |
| − | <ul> | + | <h4><strong>Start Bootstrap</strong> |
| − | + | </h4> | |
| − | <li>< | + | <p>3481 Melrose Place<br>Beverly Hills, CA 90210</p> |
| − | + | <ul class="list-unstyled"> | |
| − | + | <li><i class="fa fa-phone fa-fw"></i> (123) 456-7890</li> | |
| − | + | <li><i class="fa fa-envelope-o fa-fw"></i> <a href="mailto:name@example.com">name@example.com</a> | |
| − | + | </li> | |
| − | + | </ul> | |
| − | + | <br> | |
| − | < | + | <ul class="list-inline"> |
| − | < | + | <li> |
| + | <a href="#"><i class="fa fa-facebook fa-fw fa-3x"></i></a> | ||
| + | </li> | ||
| + | <li> | ||
| + | <a href="#"><i class="fa fa-twitter fa-fw fa-3x"></i></a> | ||
| + | </li> | ||
| + | <li> | ||
| + | <a href="#"><i class="fa fa-dribbble fa-fw fa-3x"></i></a> | ||
| + | </li> | ||
| + | </ul> | ||
| + | <hr class="small"> | ||
| + | <p class="text-muted">Copyright © Your Website 2014</p> | ||
| + | </div> | ||
| + | </div> | ||
| + | </div> | ||
| + | </footer> | ||
| − | + | <!-- jQuery --> | |
| − | < | + | <script src="js/jquery.js"></script> |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | <!-- Bootstrap Core JavaScript --> | |
| − | + | <script src="js/bootstrap.min.js"></script> | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | < | + | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | </ | + | |
| − | <!-- | + | <!-- Custom Theme JavaScript --> |
| − | < | + | <script> |
| + | // Closes the sidebar menu | ||
| + | $("#menu-close").click(function(e) { | ||
| + | e.preventDefault(); | ||
| + | $("#sidebar-wrapper").toggleClass("active"); | ||
| + | }); | ||
| − | + | // Opens the sidebar menu | |
| − | + | $("#menu-toggle").click(function(e) { | |
| − | + | e.preventDefault(); | |
| − | + | $("#sidebar-wrapper").toggleClass("active"); | |
| − | + | }); | |
| + | // Scrolls to the selected menu item on the page | ||
| + | $(function() { | ||
| + | $('a[href*=#]:not([href=#])').click(function() { | ||
| + | if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') || location.hostname == this.hostname) { | ||
| + | var target = $(this.hash); | ||
| + | target = target.length ? target : $('[name=' + this.hash.slice(1) + ']'); | ||
| + | if (target.length) { | ||
| + | $('html,body').animate({ | ||
| + | scrollTop: target.offset().top | ||
| + | }, 1000); | ||
| + | return false; | ||
| + | } | ||
| + | } | ||
| + | }); | ||
| + | }); | ||
| + | </script> | ||
| + | </body> | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
</html> | </html> | ||
Revision as of 20:35, 21 June 2016
Stylish Portfolio is the perfect theme for your next project!
This theme features some wonderful photography courtesy of Death to the Stock Photo.
