标题导航部分栏隐藏的正文内容 - bootstrap - css

时间:2016-03-08 05:41:20

标签: css html5 twitter-bootstrap css3

我正在制作一个新网站并使用我喜欢的模板。请注意,我有两个“关于我们”部分完全相同,现在只是填充,但你可以通过看到网页的图像看到什么被切断。

不确定我需要做些什么来解决身体内容问题的这种重叠。我尝试了margin-top padding,固定定位,z-index但是我做错了。我已经完成了主网页,我没有任何身体重叠问题,因为我在导航所在的顶部标题下方使用了一个柔性滑板。

我一直在尝试从Stack Overflow中获得许多可能的修复,但我无法解决这个问题。

谢谢!

enter image description here

/*

Compass Template
    
http://www.templatemo.com/tm-454-compass


http://meyerweb.com/eric/tools/css/reset/ 
v2.0 | 20110126
License: none (public domain)

*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

body {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

/*------------------------------------------------------
	Basic Styling 
--------------------------------------------------------*/
body {
  font: 13px/23px "Open Sans", sans-serif;
  -webkit-font-smoothing: antialiased;
  word-wrap: break-word;
  color: #777777;
}

a {
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

input::-moz-focus-inner {
  border: 0;
}

a:hover, a:active, a:focus {
  text-decoration: none;
  outline: none;
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Open Sans", sans-serif;
  color: #444444;
}

.top-header .right-header ul.social-icons, .main-header .menu ul {
  padding: 0;
  margin: 0;
  list-style: none;
}

#homecontent, #portfolio, #about, #contact, #vinnies, #outreach, #crossroads {
  padding-top: 30px;
}

/*------------------------------------------------------
	Header Styles 
--------------------------------------------------------*/
.top-header {
  background: #191970;
  color: white;
  padding: 10px 0;
  z-index: 1000
  position: fixed
}

.top-header .left-header span {
  display: inline-block;
  margin: 8px 20px 0 0;
}
.top-header .left-header span i {
  margin-right: 10px;
}
.top-header .right-header ul.social-icons li {
  display: inline-block;
}
.top-header .right-header ul.social-icons li a {
  color: white;
  width: 32px;
  height: 32px;
  text-align: center;
  line-height: 30px;
  border: 2px solid white;
  -webkit-border-radius: 16px;
  border-radius: 16px;
  margin: 0 8px;
}
.top-header .right-header ul.social-icons li a:hover {
  background-color: white;
  color: #191970;
}
.main-header {
  position: fixed;
  width: 100%;
  z-index: 9999;
  padding: 10px 0;
  background: white;
  -webkit-box-shadow: 0 2px 4px rgba(1, 1, 1, 0.15) ;
  -moz-box-shadow: 0 2px 4px rgba(1, 1, 1, 0.15) ;
  box-shadow: 0 2px 4px rgba(1, 1, 1, 0.15) ;
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -ms-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}
.main-header .logo {
  margin-top: 2px;
}
.main-header .logo h1 {
  font-size: 28px;
  font-weight: 700;
  text-transform: uppercase;
}
.main-header .logo h1 a {
  color: #444444;
}
.main-header .menu {
  margin-top: 35px;
}
.main-header .menu ul li {
  display: inline-block;
  margin-left: 5px;
}
.main-header .menu ul li a {
  text-transform: uppercase;
  color: #777777;
  font-size: 15px;
  padding: 8px 15px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
}
.main-header .menu ul li a.current {
  background: #191970;
  color: white;
}
.main-header-shrink {
  padding: 10px 0;
  top: 0;
}
.responsive-menu {
  position: relative;
  top: -20px;
}
.responsive-menu .toggle-menu {
  font-size: 24px;
  color: #191970;
}
.responsive-menu .menu {
  display: none;
  position: absolute;
  top: 52px;
  width: 100%;
  background-color: #191970;
}
.responsive-menu .menu ul li {
  display: block;
  text-align: left;
  border-bottom: 1px solid #d1601c;
  margin: 0;
}
.responsive-menu .menu ul li:last-child {
  border-bottom: 0;
}
.responsive-menu .menu ul li a {
  color: white;
  padding: 15px 20px;
  display: block;
  -webkit-border-radius: 0;
  border-radius: 0;
}
.responsive-menu .menu ul li a.current {
  background-color: #444444;
}

/*------------------------------------------------------
	Basic Layout Styles 
--------------------------------------------------------*/
.title-section {
  margin-bottom: 80px;
}
.title-section h2 {
  font-size: 24px;
  font-weight: normal;
  text-transform: uppercase;
  display: block;
  margin-bottom: 20px;
}
.title-section span {
  display: block;
  width: 70px;
  height: 4px;
  background: #191970;
  margin: 0 auto;
}
.widget-title {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 30px;
}
.mainBtn {
  background-color: #191970;
  color: white;
  display: inline-block;
  text-transform: uppercase;
  padding: 10px 15px;
  font-weight: 600;
  font-size: 14px;
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}
.mainBtn:hover {
  background-color: #444444;
}

/*------------------------------------------------------
	Specialty Styles 
--------------------------------------------------------*/
#portfolio {
  padding-bottom: 80px;
  margin-top: 100px;
  background: #3d3f3f;
}
#portfolio .title-section h2 {
  color: white;
}
#portfolio .portfolio-thumb {
  overflow: hidden;
  position: relative;
  margin-bottom: 30px;
}
#portfolio .portfolio-thumb img {
  width: 100%;
  height: auto;
}
#portfolio .portfolio-thumb .overlay {
  opacity: 0;
  visibility: visible;
  background: rgba(227, 114, 46, 0.9);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}
#portfolio .portfolio-thumb .overlay .inner {
  position: absolute;
  padding: 20px;
  width: 100%;
  bottom: 0;
  left: 0;
  text-align: center;
}
#portfolio .portfolio-thumb .overlay .inner h4 {
  font-size: 18px;
  margin-bottom: 10px;
}
#portfolio .portfolio-thumb .overlay .inner h4 a {
  color: white;
}
#portfolio .portfolio-thumb .overlay .inner span {
  font-weight: 300;
  color: white;
}
#portfolio .portfolio-thumb:hover .overlay {
  opacity: 1;
  visibility: visible;
}

/*------------------------------------------------------
	Home Content Styles 
--------------------------------------------------------*/
#homecontent .homecontent-item .homecontent-header .homecontent-description {
  padding-bottom: 20px;
  clear: both;

}
#homecontent .homecontent-item .homecontent-header i {
  color: #191970;
  font-size: 24px; 
  float: left;
  margin-right: 25px;
}
#homecontent .homecontent-item .homecontent-header h3 {
  font-size: 18px;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 10px;
}
#homecontent .homecontent-description ul.social-icons li {
  display: inline-block;
}
#homecontent .homecontent-description ul.social-icons li a {
  color: #191970;
  width: 32px;
  height: 32px;
  text-align: center;
  line-height: 30px;
  border: solid; 1px; #191970;
  -webkit-border-radius: 16px;
  border-radius: 16px;
  margin: 0 8px;
}
#homecontent .homecontent-description ul.social-icons li a:hover {
  background-color: #9fff80;
  color: #191970;
}

/*------------------------------------------------------
	About Styles 
--------------------------------------------------------*/
#about .progess-bars li .progress {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  -webkit-border-radius: 0;
  border-radius: 0;
  background: #e6e6e6;
  height: 30px;
  margin-bottom: 15px;
}
#about .progess-bars li .progress-bar {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  line-height: 30px;
  background: #191970;
  text-transform: uppercase;
}
#about .our-team {
  margin-top: 80px;
}
#about .our-team .team-member {
  overflow: hidden;
}
#about .our-team .team-member .member-img {
  width: 100%;
  position: relative;
}
#about .our-team .team-member .member-img img {
  width: 100%;
  height: auto;
}
#about .our-team .team-member .member-img .overlay {
  top: 0;
  left: 0;
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}
#about .our-team .team-member .member-img .overlay .social {
  position: absolute;
  top: 0;
  left: 0;
}
#about .our-team .team-member .member-img .overlay .social li {
  display: inline-block;
  float: left;
  margin-right: 1px;
}
#about .our-team .team-member .member-img .overlay .social li a {
  display: block;
  color: white;
  background-color: rgba(255, 255, 255, 0.2);
  width: 40px;
  height: 40px;
  text-align: center;
  line-height: 40px;
}
#about .our-team .team-member .member-img .overlay .social li a:hover {
  background-color: rgba(255, 255, 255, 0.4);
}
#about .our-team .team-member .member-img:hover .overlay {
  opacity: 1;
  visibility: visible;
}
#about .our-team .team-member .inner-content {
  background: whitesmoke;
  border: 1px solid #d6d6d6;
  border-top: 0;
  padding: 20px;
}
#about .our-team .team-member .inner-content h5 {
  font-size: 18px;
  font-weight: 600;
  color: #191970;
  margin-bottom: 10px;
}
#about .our-team .team-member .inner-content span {
  color: #9d9d9d;
  margin-bottom: 15px;
  display: block;
}

/*------------------------------------------------------
	Crossroads Styles 
--------------------------------------------------------*/



/*------------------------------------------------------
	Outreach Styles 
--------------------------------------------------------*/




/*------------------------------------------------------
	Crossroads Styles 
--------------------------------------------------------*/



/*------------------------------------------------------
	Contact Styles 
--------------------------------------------------------*/
#contact .contact-form .full-row {
  width: 100%;
  margin-bottom: 20px;
}
#contact .contact-form input, #contact .contact-form textarea {
  outline: 0;
  display: block;
  border: 1px solid #cccccc;
  width: 100%;
  max-width: 100%;
  padding: 8px 10px;
  color: #777777;
}
#contact .contact-form label {
  display: block;
  margin-bottom: 5px;
}
#contact .contact-form input.mainBtn {
  display: inline-block;
  width: auto;
  border: 0;
  padding: 10px 15px;
  color: white;
}
#contact .map-holder {
  padding: 5px;
  background-color: white;
  border: 1px solid #d6d6d6;
}
#contact .contact-info {
  margin-top: 30px;
}
#contact .contact-info span {
  margin-top: 20px;
  display: block;
  font-size: 14px;
}
#contact .contact-info span i {
  color: #191970;
  font-size: 16px;
  margin-right: 12px;
}

.flexslider {
  margin-top: 114px;
  width: 100%;
  max-width: 100%;
  min-width: 100%;
  overflow: hidden;
}

.flex-direction-nav a {
  color: #444444;
  width: 40px;
  height: 40px;
  background-color: white;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  margin: -20px 0 0 0;
  text-align: center;
  line-height: 40px;
}

.flex-caption {
  position: absolute;
  top: 39%;
  width: 100%;
  text-align: center;
  z-index: 999;
  color: white;
}
.flex-caption h2 {
  font-size: 50px;
  text-transform: uppercase;
  font-weight: 700;
  color: white;
  margin-bottom: 45px;
}
.flex-caption p {
  font-size: 18px;
  font-family: 'Droid Serif', serif;
  line-height: 28px;
}
.flex-caption span {
  background: url(../images/slider-dec.png) no-repeat;
  width: 60px;
  height: 9px;
  display: block;
  margin: 30px auto;
}


/*------------------------------------------------------
	Footer Styles 
--------------------------------------------------------*/
.site-footer {
  margin-top: 50px;
  background-color: #191970;
  color: white;
  padding: 25px 0;
}
.site-footer p {
  margin-top: 10px;
}
.site-footer a {
  color: white;
  text-align: center;
  display: block;
}
.site-footer .go-top {
  float: right;
  text-transform: uppercase;
}
.site-footer .go-top i {
  display: block;
}

/********************************
IPAD LANDSCAPE (1024x768)
********************************/
/********************************
IPAD PORTRAIT (768x1024)
********************************/



@media only screen and (max-width: 960px) {
  .flexslider {
    margin-top: 100px;
  }

  .main-header {
    padding: 15px 0;
  }
  .main-header .logo {
    margin-top: 20px;
  }

  .service-item, .team-member {
    margin-bottom: 50px;
  }

  .our-skills {
    margin-top: 60px;
  }

  .flex-caption {
    top: 20%;
  }
  .flex-caption h2 {
    font-size: 24px;
    margin-bottom: 20px;
  }
  .flex-caption p {
    font-size: 14px;
    width: 70%;
    margin: 0 auto;
  }

  .left-header, .right-header {
    text-align: center;
  }
}
/********************************
IPHONE 4-4S-5 LANDSCAPE (568x320)
********************************/
@media only screen and (max-width: 760px) {
  .flex-caption {
    display: none !important;
  }

  .contact-form {
    margin-bottom: 60px;
  }

  .main-header {
    height: 60px;
  }
  .main-header .logo {
    margin: 0;
  }

  .flexslider {
    margin-top: 60px;
  }

  .responsive-menu .menu {
    top: 32px;
  }
}


/********************************
IPHONE 4-4S-5 PORTRAIT (320x568)
********************************/
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> 
<![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> 
<![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
    <title>Society of St. Vincent de Paul Plymouth WI - Home</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="templatemo">
    <!-- 
    Compass Template
    http://www.templatemo.com/tm-454-compass
    -->
    <meta charset="UTF-8">

    <link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,400,300,600,700,800' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
	

    <!-- CSS Bootstrap & Custom -->
    <link href="bootstrap/css/bootstrap.css" rel="stylesheet" media="screen">
    <link rel="stylesheet" href="css/font-awesome.min.css">
    <link rel="stylesheet" href="css/templatemo-misc.css">
    <link rel="stylesheet" href="css/animate.css">
    <link rel="stylesheet" href="css/templatemo-main.css">
        
    <!-- Favicons -->
    <link rel="shortcut icon" href="images/ico/favicon.ico">
    
    <!-- JavaScripts -->
    <script src="js/jquery-1.10.2.min.js"></script>
    <script src="js/modernizr.js"></script>
    <!--[if lt IE 8]>
	<div style=' clear: both; text-align:center; position: relative;'>
            <a href="http://www.microsoft.com/windows/internet-explorer/default.aspx?ocid=ie6_countdown_bannercode"><img src="http://storage.ie6countdown.com/assets/100/images/banners/warning_bar_0000_us.jpg" border="0" alt="" /></a>
        </div>
    <![endif]-->
</head>
<body>
    
    <div id="header">
        <div class="site-header">
            <div class="top-header">
                <div class="container">
                    <div class="row">
                        <div class="col-md-6 col-sm-6">
                            <div class="left-header">
                                <span><i class="fa fa-phone"></i>920-892-4913</span>
                                <span><i class="fa fa-envelope"></i><a href="mailto:info@svdpplymouth.org">info@svdpplymouth.org</a></span>
								<span><i class="fa fa-clock-o"></i>M-F 9AM-7PM SAT 9AM-5PM</span>
                            </div> <!-- /.left-header -->
                        </div> <!-- /.col-md-6 -->
                        <div class="col-md-6 col-sm-6">
                            <div class="right-header text-right">
                                <ul class="social-icons">
                                    <li><a href="https://www.facebook.com/?q=#/svdpplymouth" class="fa fa-facebook"></a></li>
                                    <li><a href="https://www.instagram.com/svdpply/" class="fa fa-instagram"></a></li>
									<li><a href="https://www.pinterest.com/svdpplymouth/" class="fa fa-pinterest"></a></li>
                                    <li><a href="https://twitter.com/svdp_ply" class="fa fa-twitter"></a></li>
                                    <li><a href="https://www.youtube.com/my_videos?o=U" class="fa fa-youtube"></a></li>
                                </ul>
                            </div> <!-- /.left-header -->
                        </div> <!-- /.col-md-6 -->
                    </div> <!-- /.row -->
                </div> <!-- /.container -->
            </div> <!-- /.top-header -->
            <div class="main-header">
                <div class="container">
                    <div class="row">
                        <div class="col-md-4 col-sm-4 col-xs-6">
                            <div class="logo">
                                <h1><img src="images/SVDPlogotitle.png"></h1>
                            </div> <!-- /.logo -->
                        </div> <!-- /.col-md-4 -->
                        <div class="col-md-8 col-sm-8 col-xs-6">
                            <div class="menu text-right hidden-sm hidden-xs">
                                <ul>
                                    <li><a href="index.html">Home</a></li>
                                    <li><a href="about.html">About</a></li>
									<li><a href="store.html">Vinnies</a></li>
									<li><a href="outreach.html">Outreach</a></li>
                                    <li><a href="crossroads.html">CrossRoads</a></li>
									<li><a href="contact.html">Contact</a></li>
                                </ul>
                            </div> <!-- /.menu -->
						</div> <!-- /.col-md-4 -->
                        </div> <!-- /.col-md-8 -->
                    </div> <!-- /.row -->
                    <div class="responsive-menu text-right visible-xs visible-sm">
                        <a href="#" class="toggle-menu fa fa-bars"></a>
                        <div class="menu">
                            <ul>
                                <li><a href="index.html">Home</a></li>
                                <li><a href="about.html">About</a></li>
								<li><a href="store.html">Vinnies</a></li>
                                <li><a href="outreach.html">Outreach</a></li>
                                <li><a href="crossroads.html">CrossRoads</a></li>
                                <li><a href="contact.html">Contact</a></li>
                            </ul>
                        </div> <!-- /.menu -->
                    </div> <!-- /.responsive-menu -->
				</div> <!-- /.container -->
            </div> <!-- /.header -->
        </div> <!-- /.site-header -->
    </div> <!-- /#home -->
	
	
    <div id="about" class="section-cotent">
        <div class="container">
			<div class="row">
				<div class="col-md-8">
					<h4 class="widget-title">The Society of St. Vincent de Paul</h4>
					<p>Inspired by Gospel values, the Society of St. Vincent de Paul, a Catholic lay organization, leads women and men to join together to grow spiritually by offering person-to-person service to those who are needy and suffering in the tradition of its founder, Blessed Frédéric Ozanam, and patron, St. Vincent de Paul. <br><br>As a reflection of the whole family of God, members, who are known as Vincentians, are drawn from every ethnic and cultural background, age group, and economic level. Vincentians are united in an international society of charity by their spirit of poverty, humility and sharing, which is nourished by prayer and reflection, mutually supportive gatherings and adherence to a basic Rule.<br><br>Organized locally, Vincentians witness God's love by embracing all works of charity and justice. The Society collaborates with other people of good will in relieving need and addressing its causes, making no distinction in those served because, in them, Vincentians see the face of Christ.</p>
				</div> <!-- /.col-md-3 -->
                <div class="col-md-4 vincent-video">
					<iframe width="420" height="315"
					src="http://www.youtube.com/embed/zrwez_neJT4" frameborder="0" allowfullscreen>">
					</iframe>
				</div> <!-- /.col-md-3 -->
			</div> <!-- /.row -->	
		</div> <!-- /.container top -->
	</div> <!-- /$about -->
	
	
	
    <div id="about" class="section-cotent">
        <div class="container">
            <div class="row">
                <div class="col-md-8">
                    <h4 class="widget-title">The Society of St. Vincent de Paul</h4>
                    <p>Inspired by Gospel values, the Society of St. Vincent de Paul, a Catholic lay organization, leads women and men to join together to grow spiritually by offering person-to-person service to those who are needy and suffering in the tradition of its founder, Blessed Frédéric Ozanam, and patron, St. Vincent de Paul. <br><br>As a reflection of the whole family of God, members, who are known as Vincentians, are drawn from every ethnic and cultural background, age group, and economic level. Vincentians are united in an international society of charity by their spirit of poverty, humility and sharing, which is nourished by prayer and reflection, mutually supportive gatherings and adherence to a basic Rule.<br><br>Organized locally, Vincentians witness God's love by embracing all works of charity and justice. The Society collaborates with other people of good will in relieving need and addressing its causes, making no distinction in those served because, in them, Vincentians see the face of Christ.</p>
                </div> <!-- /.col-md-3 -->
                <div class="col-md-4 vincent-video">
					<iframe width="420" height="315"
					src="http://www.youtube.com/embed/zrwez_neJT4" frameborder="0" allowfullscreen>">
					</iframe>
                </div> <!-- /.col-md-3 -->
            </div> <!-- /.row -->	
		</div> <!-- /.container -->
	</div> <!-- /$about -->
  
 	
	
    <div class="site-footer">
        <div class="container">
            <div class="row">
                <div class="col-md-8 col-sm-8 col-xs-12">
                    <p>Copyright &copy; 2016 Society of St. Vincent de Paul Plymouth WI</p>
                </div> <!-- /.col-md-6 -->
                <div class="col-md-4 col-sm-4 col-xs-12">
                    <div class="go-top">
                        <a href="#" id="go-top">
                            <i class="fa fa-angle-up"></i>
                            Back to Top
                        </a>
                    </div>
                </div> <!-- /.col-md-6 -->
            </div> <!-- /.row -->
        </div> <!-- /.container -->
    </div> <!-- /.site-footer -->

    <script src="bootstrap/js/bootstrap.min.js"></script>
    <script src="js/plugins.js"></script>
    <script src="js/jquery.lightbox.js"></script>
    <script src="js/custom.js"></script>
    <script type="text/javascript">

        function initialize() {
          var mapOptions = {
			  scrollwheel: false,
            zoom: 15,
            center: new google.maps.LatLng(13.758468,100.567481)
          };

          var map = new google.maps.Map(document.getElementById('map-canvas'),
              mapOptions);
        }

        function loadScript() {
          var script = document.createElement('script');
          script.type = 'text/javascript';
          script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&' +
              'callback=initialize';
          document.body.appendChild(script);
        }

        window.onload = loadScript;
    </script>

</body>
</html>

1 个答案:

答案 0 :(得分:0)

给出以下css:

#header {
    position: fixed;
    top: 0;
    width: 100%;
}

.section-cotent{
  margin-top: 170px;
  }

完整代码HERE:

/*

Compass Template
    
http://www.templatemo.com/tm-454-compass


http://meyerweb.com/eric/tools/css/reset/ 
v2.0 | 20110126
License: none (public domain)

*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

body {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

/*------------------------------------------------------
	Basic Styling 
--------------------------------------------------------*/
body {
  font: 13px/23px "Open Sans", sans-serif;
  -webkit-font-smoothing: antialiased;
  word-wrap: break-word;
  color: #777777;
}

a {
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

input::-moz-focus-inner {
  border: 0;
}

a:hover, a:active, a:focus {
  text-decoration: none;
  outline: none;
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Open Sans", sans-serif;
  color: #444444;
}

.top-header .right-header ul.social-icons, .main-header .menu ul {
  padding: 0;
  margin: 0;
  list-style: none;
}

#homecontent, #portfolio, #about, #contact, #vinnies, #outreach, #crossroads {
  padding-top: 30px;
}

/*------------------------------------------------------
	Header Styles 
--------------------------------------------------------*/
.top-header {
  background: #191970;
  color: white;
  padding: 10px 0;
  z-index: 1000
  position: fixed
}

.top-header .left-header span {
  display: inline-block;
  margin: 8px 20px 0 0;
}
.top-header .left-header span i {
  margin-right: 10px;
}
.top-header .right-header ul.social-icons li {
  display: inline-block;
}
.top-header .right-header ul.social-icons li a {
  color: white;
  width: 32px;
  height: 32px;
  text-align: center;
  line-height: 30px;
  border: 2px solid white;
  -webkit-border-radius: 16px;
  border-radius: 16px;
  margin: 0 8px;
}
.top-header .right-header ul.social-icons li a:hover {
  background-color: white;
  color: #191970;
}
.main-header {
  position: fixed;
  width: 100%;
  z-index: 9999;
  padding: 10px 0;
  background: white;
  -webkit-box-shadow: 0 2px 4px rgba(1, 1, 1, 0.15) ;
  -moz-box-shadow: 0 2px 4px rgba(1, 1, 1, 0.15) ;
  box-shadow: 0 2px 4px rgba(1, 1, 1, 0.15) ;
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -ms-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}
.main-header .logo {
  margin-top: 2px;
}
.main-header .logo h1 {
  font-size: 28px;
  font-weight: 700;
  text-transform: uppercase;
}
.main-header .logo h1 a {
  color: #444444;
}
.main-header .menu {
  margin-top: 35px;
}
.main-header .menu ul li {
  display: inline-block;
  margin-left: 5px;
}
.main-header .menu ul li a {
  text-transform: uppercase;
  color: #777777;
  font-size: 15px;
  padding: 8px 15px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
}
.main-header .menu ul li a.current {
  background: #191970;
  color: white;
}
.main-header-shrink {
  padding: 10px 0;
  top: 0;
}
.responsive-menu {
  position: relative;
  top: -20px;
}
.responsive-menu .toggle-menu {
  font-size: 24px;
  color: #191970;
}
.responsive-menu .menu {
  display: none;
  position: absolute;
  top: 52px;
  width: 100%;
  background-color: #191970;
}
.responsive-menu .menu ul li {
  display: block;
  text-align: left;
  border-bottom: 1px solid #d1601c;
  margin: 0;
}
.responsive-menu .menu ul li:last-child {
  border-bottom: 0;
}
.responsive-menu .menu ul li a {
  color: white;
  padding: 15px 20px;
  display: block;
  -webkit-border-radius: 0;
  border-radius: 0;
}
.responsive-menu .menu ul li a.current {
  background-color: #444444;
}

/*------------------------------------------------------
	Basic Layout Styles 
--------------------------------------------------------*/
.title-section {
  margin-bottom: 80px;
}
.title-section h2 {
  font-size: 24px;
  font-weight: normal;
  text-transform: uppercase;
  display: block;
  margin-bottom: 20px;
}
.title-section span {
  display: block;
  width: 70px;
  height: 4px;
  background: #191970;
  margin: 0 auto;
}
.widget-title {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 30px;
}
.mainBtn {
  background-color: #191970;
  color: white;
  display: inline-block;
  text-transform: uppercase;
  padding: 10px 15px;
  font-weight: 600;
  font-size: 14px;
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}
.mainBtn:hover {
  background-color: #444444;
}

/*------------------------------------------------------
	Specialty Styles 
--------------------------------------------------------*/
#portfolio {
  padding-bottom: 80px;
  margin-top: 100px;
  background: #3d3f3f;
}
#portfolio .title-section h2 {
  color: white;
}
#portfolio .portfolio-thumb {
  overflow: hidden;
  position: relative;
  margin-bottom: 30px;
}
#portfolio .portfolio-thumb img {
  width: 100%;
  height: auto;
}
#portfolio .portfolio-thumb .overlay {
  opacity: 0;
  visibility: visible;
  background: rgba(227, 114, 46, 0.9);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}
#portfolio .portfolio-thumb .overlay .inner {
  position: absolute;
  padding: 20px;
  width: 100%;
  bottom: 0;
  left: 0;
  text-align: center;
}
#portfolio .portfolio-thumb .overlay .inner h4 {
  font-size: 18px;
  margin-bottom: 10px;
}
#portfolio .portfolio-thumb .overlay .inner h4 a {
  color: white;
}
#portfolio .portfolio-thumb .overlay .inner span {
  font-weight: 300;
  color: white;
}
#portfolio .portfolio-thumb:hover .overlay {
  opacity: 1;
  visibility: visible;
}

/*------------------------------------------------------
	Home Content Styles 
--------------------------------------------------------*/
#homecontent .homecontent-item .homecontent-header .homecontent-description {
  padding-bottom: 20px;
  clear: both;

}
#homecontent .homecontent-item .homecontent-header i {
  color: #191970;
  font-size: 24px; 
  float: left;
  margin-right: 25px;
}
#homecontent .homecontent-item .homecontent-header h3 {
  font-size: 18px;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 10px;
}
#homecontent .homecontent-description ul.social-icons li {
  display: inline-block;
}
#homecontent .homecontent-description ul.social-icons li a {
  color: #191970;
  width: 32px;
  height: 32px;
  text-align: center;
  line-height: 30px;
  border: solid; 1px; #191970;
  -webkit-border-radius: 16px;
  border-radius: 16px;
  margin: 0 8px;
}
#homecontent .homecontent-description ul.social-icons li a:hover {
  background-color: #9fff80;
  color: #191970;
}

/*------------------------------------------------------
	About Styles 
--------------------------------------------------------*/
#about .progess-bars li .progress {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  -webkit-border-radius: 0;
  border-radius: 0;
  background: #e6e6e6;
  height: 30px;
  margin-bottom: 15px;
}
#about .progess-bars li .progress-bar {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  line-height: 30px;
  background: #191970;
  text-transform: uppercase;
}
#about .our-team {
  margin-top: 80px;
}
#about .our-team .team-member {
  overflow: hidden;
}
#about .our-team .team-member .member-img {
  width: 100%;
  position: relative;
}
#about .our-team .team-member .member-img img {
  width: 100%;
  height: auto;
}
#about .our-team .team-member .member-img .overlay {
  top: 0;
  left: 0;
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}
#about .our-team .team-member .member-img .overlay .social {
  position: absolute;
  top: 0;
  left: 0;
}
#about .our-team .team-member .member-img .overlay .social li {
  display: inline-block;
  float: left;
  margin-right: 1px;
}
#about .our-team .team-member .member-img .overlay .social li a {
  display: block;
  color: white;
  background-color: rgba(255, 255, 255, 0.2);
  width: 40px;
  height: 40px;
  text-align: center;
  line-height: 40px;
}
#about .our-team .team-member .member-img .overlay .social li a:hover {
  background-color: rgba(255, 255, 255, 0.4);
}
#about .our-team .team-member .member-img:hover .overlay {
  opacity: 1;
  visibility: visible;
}
#about .our-team .team-member .inner-content {
  background: whitesmoke;
  border: 1px solid #d6d6d6;
  border-top: 0;
  padding: 20px;
}
#about .our-team .team-member .inner-content h5 {
  font-size: 18px;
  font-weight: 600;
  color: #191970;
  margin-bottom: 10px;
}
#about .our-team .team-member .inner-content span {
  color: #9d9d9d;
  margin-bottom: 15px;
  display: block;
}

/*------------------------------------------------------
	Crossroads Styles 
--------------------------------------------------------*/



/*------------------------------------------------------
	Outreach Styles 
--------------------------------------------------------*/




/*------------------------------------------------------
	Crossroads Styles 
--------------------------------------------------------*/



/*------------------------------------------------------
	Contact Styles 
--------------------------------------------------------*/
#contact .contact-form .full-row {
  width: 100%;
  margin-bottom: 20px;
}
#contact .contact-form input, #contact .contact-form textarea {
  outline: 0;
  display: block;
  border: 1px solid #cccccc;
  width: 100%;
  max-width: 100%;
  padding: 8px 10px;
  color: #777777;
}
#contact .contact-form label {
  display: block;
  margin-bottom: 5px;
}
#contact .contact-form input.mainBtn {
  display: inline-block;
  width: auto;
  border: 0;
  padding: 10px 15px;
  color: white;
}
#contact .map-holder {
  padding: 5px;
  background-color: white;
  border: 1px solid #d6d6d6;
}
#contact .contact-info {
  margin-top: 30px;
}
#contact .contact-info span {
  margin-top: 20px;
  display: block;
  font-size: 14px;
}
#contact .contact-info span i {
  color: #191970;
  font-size: 16px;
  margin-right: 12px;
}

.flexslider {
  margin-top: 114px;
  width: 100%;
  max-width: 100%;
  min-width: 100%;
  overflow: hidden;
}

.flex-direction-nav a {
  color: #444444;
  width: 40px;
  height: 40px;
  background-color: white;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  margin: -20px 0 0 0;
  text-align: center;
  line-height: 40px;
}

.flex-caption {
  position: absolute;
  top: 39%;
  width: 100%;
  text-align: center;
  z-index: 999;
  color: white;
}
.flex-caption h2 {
  font-size: 50px;
  text-transform: uppercase;
  font-weight: 700;
  color: white;
  margin-bottom: 45px;
}
.flex-caption p {
  font-size: 18px;
  font-family: 'Droid Serif', serif;
  line-height: 28px;
}
.flex-caption span {
  background: url(../images/slider-dec.png) no-repeat;
  width: 60px;
  height: 9px;
  display: block;
  margin: 30px auto;
}


/*------------------------------------------------------
	Footer Styles 
--------------------------------------------------------*/
.site-footer {
  margin-top: 50px;
  background-color: #191970;
  color: white;
  padding: 25px 0;
}
.site-footer p {
  margin-top: 10px;
}
.site-footer a {
  color: white;
  text-align: center;
  display: block;
}
.site-footer .go-top {
  float: right;
  text-transform: uppercase;
}
.site-footer .go-top i {
  display: block;
}

/********************************
IPAD LANDSCAPE (1024x768)
********************************/
/********************************
IPAD PORTRAIT (768x1024)
********************************/



@media only screen and (max-width: 960px) {
  .flexslider {
    margin-top: 100px;
  }

  .main-header {
    padding: 15px 0;
  }
  .main-header .logo {
    margin-top: 20px;
  }

  .service-item, .team-member {
    margin-bottom: 50px;
  }

  .our-skills {
    margin-top: 60px;
  }

  .flex-caption {
    top: 20%;
  }
  .flex-caption h2 {
    font-size: 24px;
    margin-bottom: 20px;
  }
  .flex-caption p {
    font-size: 14px;
    width: 70%;
    margin: 0 auto;
  }

  .left-header, .right-header {
    text-align: center;
  }
}
/********************************
IPHONE 4-4S-5 LANDSCAPE (568x320)
********************************/
@media only screen and (max-width: 760px) {
  .flex-caption {
    display: none !important;
  }

  .contact-form {
    margin-bottom: 60px;
  }

  .main-header {
    height: 60px;
  }
  .main-header .logo {
    margin: 0;
  }

  .flexslider {
    margin-top: 60px;
  }

  .responsive-menu .menu {
    top: 32px;
  }
}

#header {
    position: fixed;
    top: 0;
    width: 100%;
}

.section-cotent{
  margin-top: 170px;
  }

/********************************
IPHONE 4-4S-5 PORTRAIT (320x568)
********************************/
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> 
<![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> 
<![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
    <title>Society of St. Vincent de Paul Plymouth WI - Home</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="templatemo">
    <!-- 
    Compass Template
    http://www.templatemo.com/tm-454-compass
    -->
    <meta charset="UTF-8">

    <link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,400,300,600,700,800' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
	

    <!-- CSS Bootstrap & Custom -->
    <link href="bootstrap/css/bootstrap.css" rel="stylesheet" media="screen">
    <link rel="stylesheet" href="css/font-awesome.min.css">
    <link rel="stylesheet" href="css/templatemo-misc.css">
    <link rel="stylesheet" href="css/animate.css">
    <link rel="stylesheet" href="css/templatemo-main.css">
        
    <!-- Favicons -->
    <link rel="shortcut icon" href="images/ico/favicon.ico">
    
    <!-- JavaScripts -->
    <script src="js/jquery-1.10.2.min.js"></script>
    <script src="js/modernizr.js"></script>
    <!--[if lt IE 8]>
	<div style=' clear: both; text-align:center; position: relative;'>
            <a href="http://www.microsoft.com/windows/internet-explorer/default.aspx?ocid=ie6_countdown_bannercode"><img src="http://storage.ie6countdown.com/assets/100/images/banners/warning_bar_0000_us.jpg" border="0" alt="" /></a>
        </div>
    <![endif]-->
</head>
<body>
    
    <div id="header">
        <div class="site-header">
            <div class="top-header">
                <div class="container">
                    <div class="row">
                        <div class="col-md-6 col-sm-6">
                            <div class="left-header">
                                <span><i class="fa fa-phone"></i>920-892-4913</span>
                                <span><i class="fa fa-envelope"></i><a href="mailto:info@svdpplymouth.org">info@svdpplymouth.org</a></span>
								<span><i class="fa fa-clock-o"></i>M-F 9AM-7PM SAT 9AM-5PM</span>
                            </div> <!-- /.left-header -->
                        </div> <!-- /.col-md-6 -->
                        <div class="col-md-6 col-sm-6">
                            <div class="right-header text-right">
                                <ul class="social-icons">
                                    <li><a href="https://www.facebook.com/?q=#/svdpplymouth" class="fa fa-facebook"></a></li>
                                    <li><a href="https://www.instagram.com/svdpply/" class="fa fa-instagram"></a></li>
									<li><a href="https://www.pinterest.com/svdpplymouth/" class="fa fa-pinterest"></a></li>
                                    <li><a href="https://twitter.com/svdp_ply" class="fa fa-twitter"></a></li>
                                    <li><a href="https://www.youtube.com/my_videos?o=U" class="fa fa-youtube"></a></li>
                                </ul>
                            </div> <!-- /.left-header -->
                        </div> <!-- /.col-md-6 -->
                    </div> <!-- /.row -->
                </div> <!-- /.container -->
            </div> <!-- /.top-header -->
            <div class="main-header">
                <div class="container">
                    <div class="row">
                        <div class="col-md-4 col-sm-4 col-xs-6">
                            <div class="logo">
                                <h1><img src="images/SVDPlogotitle.png"></h1>
                            </div> <!-- /.logo -->
                        </div> <!-- /.col-md-4 -->
                        <div class="col-md-8 col-sm-8 col-xs-6">
                            <div class="menu text-right hidden-sm hidden-xs">
                                <ul>
                                    <li><a href="index.html">Home</a></li>
                                    <li><a href="about.html">About</a></li>
									<li><a href="store.html">Vinnies</a></li>
									<li><a href="outreach.html">Outreach</a></li>
                                    <li><a href="crossroads.html">CrossRoads</a></li>
									<li><a href="contact.html">Contact</a></li>
                                </ul>
                            </div> <!-- /.menu -->
						</div> <!-- /.col-md-4 -->
                        </div> <!-- /.col-md-8 -->
                    </div> <!-- /.row -->
                    <div class="responsive-menu text-right visible-xs visible-sm">
                        <a href="#" class="toggle-menu fa fa-bars"></a>
                        <div class="menu">
                            <ul>
                                <li><a href="index.html">Home</a></li>
                                <li><a href="about.html">About</a></li>
								<li><a href="store.html">Vinnies</a></li>
                                <li><a href="outreach.html">Outreach</a></li>
                                <li><a href="crossroads.html">CrossRoads</a></li>
                                <li><a href="contact.html">Contact</a></li>
                            </ul>
                        </div> <!-- /.menu -->
                    </div> <!-- /.responsive-menu -->
				</div> <!-- /.container -->
            </div> <!-- /.header -->
        </div> <!-- /.site-header -->
    </div> <!-- /#home -->
	
	
    <div id="about" class="section-cotent">
        <div class="container">
			<div class="row">
				<div class="col-md-8">
					<h4 class="widget-title">The Society of St. Vincent de Paul</h4>
					<p>Inspired by Gospel values, the Society of St. Vincent de Paul, a Catholic lay organization, leads women and men to join together to grow spiritually by offering person-to-person service to those who are needy and suffering in the tradition of its founder, Blessed Frédéric Ozanam, and patron, St. Vincent de Paul. <br><br>As a reflection of the whole family of God, members, who are known as Vincentians, are drawn from every ethnic and cultural background, age group, and economic level. Vincentians are united in an international society of charity by their spirit of poverty, humility and sharing, which is nourished by prayer and reflection, mutually supportive gatherings and adherence to a basic Rule.<br><br>Organized locally, Vincentians witness God's love by embracing all works of charity and justice. The Society collaborates with other people of good will in relieving need and addressing its causes, making no distinction in those served because, in them, Vincentians see the face of Christ.</p>
				</div> <!-- /.col-md-3 -->
                <div class="col-md-4 vincent-video">
					<iframe width="420" height="315"
					src="http://www.youtube.com/embed/zrwez_neJT4" frameborder="0" allowfullscreen>">
					</iframe>
				</div> <!-- /.col-md-3 -->
			</div> <!-- /.row -->	
		</div> <!-- /.container top -->
	</div> <!-- /$about -->
	
	
	
    <div id="about" class="section-cotent">
        <div class="container">
            <div class="row">
                <div class="col-md-8">
                    <h4 class="widget-title">The Society of St. Vincent de Paul</h4>
                    <p>Inspired by Gospel values, the Society of St. Vincent de Paul, a Catholic lay organization, leads women and men to join together to grow spiritually by offering person-to-person service to those who are needy and suffering in the tradition of its founder, Blessed Frédéric Ozanam, and patron, St. Vincent de Paul. <br><br>As a reflection of the whole family of God, members, who are known as Vincentians, are drawn from every ethnic and cultural background, age group, and economic level. Vincentians are united in an international society of charity by their spirit of poverty, humility and sharing, which is nourished by prayer and reflection, mutually supportive gatherings and adherence to a basic Rule.<br><br>Organized locally, Vincentians witness God's love by embracing all works of charity and justice. The Society collaborates with other people of good will in relieving need and addressing its causes, making no distinction in those served because, in them, Vincentians see the face of Christ.</p>
                </div> <!-- /.col-md-3 -->
                <div class="col-md-4 vincent-video">
					<iframe width="420" height="315"
					src="http://www.youtube.com/embed/zrwez_neJT4" frameborder="0" allowfullscreen>">
					</iframe>
                </div> <!-- /.col-md-3 -->
            </div> <!-- /.row -->	
		</div> <!-- /.container -->
	</div> <!-- /$about -->
  
 	
	
    <div class="site-footer">
        <div class="container">
            <div class="row">
                <div class="col-md-8 col-sm-8 col-xs-12">
                    <p>Copyright &copy; 2016 Society of St. Vincent de Paul Plymouth WI</p>
                </div> <!-- /.col-md-6 -->
                <div class="col-md-4 col-sm-4 col-xs-12">
                    <div class="go-top">
                        <a href="#" id="go-top">
                            <i class="fa fa-angle-up"></i>
                            Back to Top
                        </a>
                    </div>
                </div> <!-- /.col-md-6 -->
            </div> <!-- /.row -->
        </div> <!-- /.container -->
    </div> <!-- /.site-footer -->

    <script src="bootstrap/js/bootstrap.min.js"></script>
    <script src="js/plugins.js"></script>
    <script src="js/jquery.lightbox.js"></script>
    <script src="js/custom.js"></script>
    <script type="text/javascript">

        function initialize() {
          var mapOptions = {
			  scrollwheel: false,
            zoom: 15,
            center: new google.maps.LatLng(13.758468,100.567481)
          };

          var map = new google.maps.Map(document.getElementById('map-canvas'),
              mapOptions);
        }

        function loadScript() {
          var script = document.createElement('script');
          script.type = 'text/javascript';
          script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&' +
              'callback=initialize';
          document.body.appendChild(script);
        }

        window.onload = loadScript;
    </script>

</body>
</html>