Difference between revisions of "Team:BostonU HW/CSS"

Line 1: Line 1:
 
<html>
 
<html>
 +
<head>
 +
<style type="text/css">
  
−
<style>
+
#contentSub, #contentcontainer, #footer-box, #sitesub, #catlinks, #search-controls, #p-logo, .h3, .printfooter, .firstHeading, .visualClear {display: none;} /*-- hides default wiki settings --*/
  
 +
.topWikiNavBackground {
 +
    height:18px;
 +
    margin-top: -32px;
 +
    background-color:transparent;
 +
}
  
−
/********************************* DEFAULT WIKI SETTINGS  ********************************/
 
  
−
#sideMenu, #top_title {display:none;}
+
#globalWrapper, #content { /*-- changes default wiki settings --*/
−
#content { padding:0px; width:100%; margin-top:7px; margin-left:0px;}
+
width: 100%;  
−
body {background-color:white; }
+
height: 100%;
−
#bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
+
border: 0px;
−
 
+
background-color: transparent;
−
 
+
margin: 0px;
−
 
+
padding: 0px;
−
/*!
+
−
* Start Bootstrap - Stylish Portfolio (http://startbootstrap.com/)
+
−
* Copyright 2013-2016 Start Bootstrap
+
−
* Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap/blob/gh-pages/LICENSE)
+
−
*/
+
−
 
+
−
/* Global Styles */
+
−
 
+
−
html,
+
−
body {
+
−
    top: 30px;
+
−
    width: 100%;
+
−
    height: 100%;
+
 
}
 
}
  
−
body {
+
html, body, .wrapper { /*-- changes default wiki settings --*/
−
    font-family: "Source Sans Pro","Helvetica Neue",Helvetica,Arial,sans-serif;
+
width: 100%;
 +
height: 100%;
 +
background-color: transparent;
 +
}
 +
#top-section { /*-- styling for default menu bar (edit, page, history, etc.) --*/
 +
border: 0 none;
 +
height: 14px;
 +
z-index: 100;
 +
top: 0;
 +
position: fixed;
 +
width: 975px;
 +
left: 50%;
 +
margin-left: -487px;
 +
        background-color: transparent;  
 
}
 
}
  
−
.text-vertical-center {
+
#top-section-bar { /*-- styling full width bar which hides behind default menu bar (edit, page, history, etc.) --*/
−
    display: table-cell;
+
        background-color:transparent;
−
    text-align: center;
+
        height: 14px;
−
    vertical-align: middle;
+
display: block;
 +
z-index: 10;
 +
position: fixed;
 +
width:100%;
 +
top: 0;
 
}
 
}
  
−
.text-vertical-center h1 {
+
#menubar a:link, #menubar a:visited  { /*-- styling for default menu bar links (edit, page, history, etc.) --*/
−
    margin: 0;
+
        color:#FFF;
−
    padding: 0;
+
text-decoration: none;  
−
    font-size: 4.5em;
+
background-color: transparent;
−
    font-weight: 700;
+
 
}
 
}
  
−
/* Custom Button Styles */
+
#menubar a:active, #menubar a:hover
−
 
+
{
−
.btn-dark {
+
        color:#FFF;
−
    border-radius: 0;
+
text-decoration: underline;
−
    color: #fff;
+
        background-color:transparent;
−
    background-color: rgba(0,0,0,0.4);
+
 
}
 
}
 +
* {
 +
margin: 0;
 +
padding: 0;
  
−
.btn-dark:hover,
+
-webkit-font-smoothing: antialiased;
−
.btn-dark:focus,
+
-webkit-box-sizing: border-box;
−
.btn-dark:active {
+
-moz-box-sizing: border-box;
−
    color: #fff;
+
box-sizing: border-box;
−
    background-color: rgba(0,0,0,0.7);
+
 
}
 
}
  
−
.btn-light {
+
::selection {
−
    border-radius: 0;
+
background: #F79042;
−
    color: #333;
+
color: #fff;
−
    background-color: rgb(255,255,255);
+
 
}
 
}
  
−
.btn-light:hover,
+
.slide-out-div {
−
.btn-light:focus,
+
          padding: 20px;
−
.btn-light:active {
+
          background-image:url(../img_bu14/popopenbkgd_bu14.png);
−
    color: #333;
+
  background-repeat:repeat;
−
    background-color: rgba(255,255,255,0.8);
+
  z-index:30;
 +
  text-align:left;
 +
      }
 +
 
 +
a:link {
 +
color: #F79042;
 +
        font-weight=500;
 +
text-decoration: none;
 +
}
 +
a:visited {
 +
text-decoration: none;
 +
        font-weight=500;
 +
color: #F79042;
 +
}
 +
a:hover {
 +
text-decoration: underline;
 +
}
 +
a:active {
 +
text-decoration: none;
 
}
 
}
  
−
/* Custom Horizontal Rule */
+
.title{
−
 
+
position:absolute;
−
hr.small {
+
top:38px;
−
    max-width: 100px;
+
left:83px;
 +
z-index:2;
 
}
 
}
  
−
/* Side Menu */
+
body {
−
 
+
color: #353535;
−
#sidebar-wrapper {
+
font: 14px/23px proxima-nova-alt, "Proxima Nova Alt", sans-serif;
−
    z-index: 1000;
+
text-align:center;
−
    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 {
+
h0{
−
    position: absolute;
+
color:#FFF;
−
    top: 0;
+
font-size:40px;
−
    width: 250px;
+
font-weight:700;
−
    margin: 0;
+
        text-decoration:none;
−
    padding: 0;
+
−
    list-style: none;
+
 
}
 
}
  
−
.sidebar-nav li {
+
header1{
−
    text-indent: 20px;
+
font-size:28px;
−
    line-height: 40px;
+
font-weight:700;
 +
text-transform:uppercase;
 +
        text-decoration:none;
 
}
 
}
  
−
.sidebar-nav li a {
+
header2{
−
    display: block;
+
font-size:18px;
−
    text-decoration: none;
+
color:#FFF;
−
    color: #999;
+
font-weight:700;
 +
text-transform:uppercase;
 +
text-align:left;
 +
        text-decoration:none;
 
}
 
}
  
−
.sidebar-nav li a:hover {
+
 
−
    text-decoration: none;
+
header2black{
−
    color: #fff;
+
font-size:18px;
−
    background: rgba(255,255,255,0.2);
+
color:#000000;
 +
font-weight:700;
 +
text-transform:uppercase;
 +
text-align:left;
 +
        text-decoration:none;
 
}
 
}
  
−
.sidebar-nav li a:active,
+
header3{
−
.sidebar-nav li a:focus {
+
font-size:20px;
−
    text-decoration: none;
+
color:#353535;
 +
font-weight:550;
 +
        text-decoration:none;
 
}
 
}
  
−
.sidebar-nav > .sidebar-brand {
+
h3{
−
    height: 55px;
+
font-size:20px;
−
    font-size: 18px;
+
color:#353535;
−
    line-height: 55px;
+
font-weight:550;
 +
        text-decoration:none;
 
}
 
}
  
−
.sidebar-nav > .sidebar-brand a {
+
maincontent{
−
    color: #999;
+
font-weight:100;
 +
font-size:14px;
 +
text-align:justify;
 
}
 
}
  
−
.sidebar-nav > .sidebar-brand a:hover {
+
capt{
−
    color: #fff;
+
font-size:12px;
−
    background: none;
+
        color:#5E5F5F;
 +
font-weight:300;
 +
text-align:justify;
 +
        line-height:110%
 
}
 
}
  
−
#menu-toggle {
+
sidenav{
−
    z-index: 1;
+
color:#FFF;
−
    position: fixed;
+
font-weight:700;
−
    top: 15px;
+
−
    right: 0;
+
 
}
 
}
  
−
#sidebar-wrapper.active {
+
#logo {
−
    right: 250px;
+
position: absolute;
−
    width: 250px;
+
left: 80px;
−
    -webkit-transition: all 0.4s ease 0s;
+
top: 40px;
−
    -moz-transition: all 0.4s ease 0s;
+
z-index: 2;
−
    -ms-transition: all 0.4s ease 0s;
+
margin-left: -17px;
−
    -o-transition: all 0.4s ease 0s;
+
−
    transition: all 0.4s ease 0s;
+
 
}
 
}
  
−
.toggle {
+
.header{
−
    margin: 5px 5px 0 0;
+
background-color:#353535;
 +
position:fixed;
 +
height:125px;
 +
top:0px;
 +
width:100%;
 +
z-index:30;
 +
}
 +
.igemlogo
 +
{
 +
position:fixed;
 +
right:5px;
 +
z-index:30;
 
}
 
}
  
−
/* Header */
 
  
−
.header {
+
#tracking_nav
−
    display: table;
+
{
−
    position: relative;
+
margin: 0px 0px 0px 950px;
−
    width: 100%;
+
position: fixed;
−
    height: 100%;
+
color:#bababa;
−
    background: url(../img/bg.jpg) no-repeat center center scroll;
+
border: 1px solid #3d3f3c;
−
    -webkit-background-size: cover;
+
background:#3d3f3c;
−
    -moz-background-size: cover;
+
font-size: 16pt;
−
    background-size: cover;
+
padding: 5px;
−
    -o-background-size: cover;
+
line-height: 120%;
 
}
 
}
  
−
/* About */
+
#tracking_nav a { color:#ffffff; text-transform: lowercase;font-size: 16pt;}
 +
#tracking_nav a:hover {background:#bababa;}
  
−
.about {
+
ul#nav {
−
    padding: 50px 0;
+
width:90%;
 +
top:100px;
 +
left:60px;
 +
position:fixed;
 +
z-index:30;
 
}
 
}
  
−
/* Services */
+
#nav li {
 +
color: #FFF;
 +
background-color:none;
 +
margin: 0 15px 0 0;
 +
float: left;
 +
position: relative;
 +
list-style: none;
  
−
.services {
 
−
    padding: 50px 0;
 
 
}
 
}
 +
#nav li:last-child { margin:0; }
  
−
.service-item {
+
/* main level link */
−
    margin-bottom: 30px;
+
#nav a {
 +
font-family:bree-web, Bree, sans-serif;
 +
font-size:10pt;
 +
font-weight:600;
 +
line-height:210%;
 +
color: inherit;
 +
text-decoration: none;
 +
display: block;
 +
padding: 0 0 0 5px;
 +
margin: 0;
 
}
 
}
  
−
/* Callout */
+
ul#nav > li > a {
 +
line-height:10px;
 +
border-left:solid 3px #bbb;
 +
padding:0 0 0 15px;
 +
}
  
−
.callout {
+
#nav a:hover {
−
    display: table;
+
/*background-color: #870203;
−
    width: 100%;
+
color: #ffffff;*/
−
    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 {
+
/* main level link hover */
−
    padding: 50px 0;
+
#nav .current a, #nav li:hover > a {
 +
color: #F79042;
 +
border-color:#F79042;
 
}
 
}
  
−
.portfolio-item {
+
/* sub levels link hover */
−
    margin-bottom: 30px;
+
#nav ul li:hover a , #nav li:hover li a{
 +
border: none;
 +
background-image:url(https://static.igem.org/mediawiki/2014/3/3a/Orangemenubkgd_bu14.png);
 +
background-repeat:repeat;
 +
color:#FFF;
 
}
 
}
−
 
+
#nav ul a:hover {
−
.img-portfolio {
+
color: #353535 !important;
−
    margin: 0 auto;
+
/*background: #fff url() repeat-x 0 -100px !important;
−
}
+
text-shadow: 0 1px 1px rgba(0,0,0, .1);*/
−
 
+
−
.img-portfolio:hover {
+
−
    opacity: 0.8;
+
 
}
 
}
  
−
/* Call to Action */
 
  
−
.call-to-action {
+
/* dropdown */
−
    padding: 50px 0;
+
#nav li:hover > ul {
 +
display: block;
 +
opacity:1;
 +
margin:0;
 +
background-color: none;
 +
z-index:0;
 
}
 
}
  
−
.call-to-action .btn {
 
−
    margin: 10px;
 
−
}
 
  
−
/* Map */
+
/* level 2 list */
 +
#nav ul {
 +
display: none;
 +
opacity:0;
 +
margin: 20px 0 0 0;
 +
padding: 7px 0 0 0;
 +
width: 205px;
 +
position: absolute;
 +
left: 0;
 +
z-index:-1;
  
−
.map {
 
−
    height: 500px;
 
 
}
 
}
−
 
+
#nav ul li {
−
@media(max-width:768px) {
+
float: none;
−
    .map {
+
margin: 0;
−
        height: 75%;
+
padding: 0;
−
    }
+
 
}
 
}
  
−
/* Footer */
+
#nav ul a {
−
 
+
font-weight: normal;
−
footer {
+
/*text-shadow: 0 1px 0 #fff;*/
−
    padding: 100px 0;
+
 
}
 
}
  
−
 
+
/* clearfix */
−
 
+
#nav:after {
−
.sharp {
+
content: ".";
−
  border-radius:0;
+
display: block;
 +
clear: both;
 +
visibility: hidden;
 +
line-height: 0;
 +
height: 0;
 +
}
 +
#nav {
 +
display: inline-block;
 +
}
 +
html[xmlns] #nav {
 +
display: block;
 +
}
 +
 +
* html #nav {
 +
height: 1%;
 
}
 
}
  
  
  
−
</style>
 
  
−
<!--- THIS IS WHERE THE HTML BEGINS --->
 
  
 +
.headerdivider{
 +
        background-image:url(https://static.igem.org/mediawiki/2014/1/15/Headerdivider_bu14.png);
 +
position:absolute;
 +
top:120px;
 +
height:15px;
 +
width:100%;
 +
z-index:10;
 +
}
  
 +
.plasmid{
 +
        background-color:transparent;
 +
position: relative;
 +
background-repeat:no-repeat;
 +
margin-left:auto;
 +
margin-right:auto;
 +
width:400px;
 +
height:500px;
 +
        top: calc(50% - 300px);
 +
z-index:10;
 +
}
  
−
<head>
+
.banner {
−
+
        background-image:url(https://static.igem.org/mediawiki/2014/0/03/Boston1_bu14.jpg);
−
<!-- Latest compiled and minified CSS -->
+
        background-size:cover;
−
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
+
position: absolute;
 +
top:100px;
 +
width: 100%;
 +
height:100%;
 +
overflow: auto;
 +
font-size: 18px;
 +
text-align: center;
 +
color: rgba(255,255,255,.6);
 +
text-shadow: 0 0 1px rgba(0,0,0,.05), 0 1px 2px rgba(0,0,0,.3);
  
 +
box-shadow: 0 1px 2px rgba(0,0,0,.25);
 
 
−
<!-- 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">
+
}
 +
 +
.wrap {
 +
margin: 0 auto;
 +
width: 960px;
 +
}
  
−
<!-- Icon Library -->
+
.anchor{
−
<script src="https://use.fontawesome.com/c5cd1d9cf8.js"></script>
+
position:absolute;
−
<link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700,300italic,400italic,700italic" rel="stylesheet" type="text/css">
+
top:calc(100% - 125px);
 +
}
  
−
<!-- Latest compiled and minified JavaScript -->
+
.topanchor{
−
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
+
position:absolute;
 +
top:calc(0% - 125px);
 +
}
  
 +
.lower{
 +
background-image:url(https://static.igem.org/mediawiki/2014/d/d7/Gradient_bu14.png);
 +
background-color:#FFF;
 +
text-align:center;
 +
background-repeat:repeat-x;
 +
width:100%;
 +
position:absolute;
 +
top:100%;
 +
z-index:10;
 +
}
 +
.content{
 +
text-align:left;
 +
width:100%;
 +
position:relative;
 +
z-index:10;
  
 +
}
 +
.text{
 +
width:75%;
 +
margin-left:auto;
 +
margin-right:auto;
 +
}
 +
.content1{
 +
background-image:url(../img_bu14/whitebkgd_bu14.png);
 +
background-repeat:repeat;
  
−
</head>
 
  
 +
.sponsors{
 +
background-color:#FFF;
 +
position:relative;
 +
text-align:center;
 +
bottom:0px;
 +
z-index:10;
 +
}
  
 +
@media only screen and (min-device-width: 320px) and (max-device-width: 480px), (max-width: 900px) {
 +
.wrap {
 +
width: 90%;
 +
}
 +
#logo {
 +
left: 50px;
 +
top: 30px;
 +
}
  
 +
.banner header1, .banner header2 {
 +
font-size: 24px;
 +
line-height: 30px;
 +
}
 +
.banner ul li {
 +
height: 240px;
 +
}
 +
.banner .inner {
 +
padding-top: 100px;
 +
padding-bottom: 50px;
 +
}
 +
.banner p {
 +
font-size: 15px;
 +
width: 80%;
 +
margin: 0 auto;
 +
}
 +
pre {
 +
overflow: auto;
 +
}
 +
.features li {
 +
width: 100%;
 +
margin-left: 10px;
 +
margin-bottom: 30px;
 +
}
 +
.how li {
 +
width: 90%;
 +
}
 +
.how pre {
 +
position: static;
 +
width: 100%;
 +
}
 +
}
  
−
<body>
+
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
−
 
+
.features li:before {
−
    <!-- Navigation -->
+
background: url('img/icons@2x.png');
−
    <a id="menu-toggle" href="#" class="btn btn-dark btn-lg toggle sharp"><span aria-hidden="true"><i class="fa fa-bars"></i></span></a>
+
background-size: 100%;
−
    <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>Boston University iGem 2016</h1>
+
−
            <h3>Hardware Track</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 -->
+
−
    <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 -->
+
−
    <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&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=Twitter,+Inc.,+Market+Street,+San+Francisco,+CA&amp;aq=0&amp;oq=twitter&amp;sll=28.659344,-81.187888&amp;sspn=0.128789,0.264187&amp;ie=UTF8&amp;hq=Twitter,+Inc.,+Market+Street,+San+Francisco,+CA&amp;t=m&amp;z=15&amp;iwloc=A&amp;output=embed"></iframe>
+
−
        <br />
+
−
        <small>
+
−
            <a href="https://maps.google.com/maps?f=q&amp;source=embed&amp;hl=en&amp;geocode=&amp;q=Twitter,+Inc.,+Market+Street,+San+Francisco,+CA&amp;aq=0&amp;oq=twitter&amp;sll=28.659344,-81.187888&amp;sspn=0.128789,0.264187&amp;ie=UTF8&amp;hq=Twitter,+Inc.,+Market+Street,+San+Francisco,+CA&amp;t=m&amp;z=15&amp;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">
+
−
                    <h4><strong>Start Bootstrap</strong>
+
−
                    </h4>
+
−
                    <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 &copy; Your Website 2014</p>
+
−
                </div>
+
−
            </div>
+
−
        </div>
+
−
    </footer>
+
−
 
+
−
    <!-- 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>
+
−
 
+
−
 
+
  
  
 +
</style>
 
</html>
 
</html>

Revision as of 19:32, 21 June 2016