0
テンプレートを編集中です。モバイルデバイスで表示されたときにナビゲーションメニューボタンをロゴの横に並べるのに問題があります。また、モバイル上のヘッダー画像もわずかにカバーしています。ブートストラップを使用してモバイルナビバーをロゴと整列させる方法
すべてのヘルプは大歓迎です！ここに私のコードです：あなたはブートストラップを使用している
@import url(http://fonts.googleapis.com/css?family=Dosis:400,200,300,500,600,700,800);
@import url(http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:400,300,200,700);
/*************************
*******Typography******
**************************/
body {
font-family: 'Dosis', sans-serif;
font-size: 17px;
color: #fff
}
.btn {
border-radius: 0;
font-family: 'Yanone Kaffeesatz','sans-serif';
font-size: 20px;
padding: 9px 23px;
}
a {
-webkit-transition: 300ms;
-moz-transition: 300ms;
-o-transition: 300ms;
transition: 300ms;
}
a:focus,
a:hover {
text-decoration: none;
outline: none
}
h1, h2, h3, h4, h5, h6 {
font-family: 'Yanone Kaffeesatz', 'sans-serif';
font-weight: 300;
text-transform: uppercase;
}
h2 {
font-size: 36px
}
.navbar-toggle {
margin-top: 12px
}
.navbar-toggle .icon-bar {
background-color: #fff;
}
.navbar-toggle,
.navbar-toggle:focus {
border:1px solid #fff;
outline: none;
}
/*************************
*******Header CSS******
**************************/
.header-top {
display: block;
overflow: hidden;
padding: 25px;
}
.main-nav {
position: absolute;
width: 100%;
z-index: 999;
}
.main-nav
.container {
width: 100%
}
.social-icons a {
font-size: 18px;
color: #fff;
padding-left:20px;
}
.social-icons .fa-facebook:hover {
color: #3B5997
}
.social-icons .fa-twitter:hover {
color:#29C5F6
}
.social-icons .fa-google-plus:hover {
color:#D13D2F
}
.social-icons .fa-youtube:hover{
color: #ec5538
}
.navbar-brand {
background-color: #ff0080;
height: 90px;
margin-bottom: 20px;
position: relative;
width: 435px;
}
.navbar-brand img {
position: absolute;
top: -35px;
}
.navbar-right {
background-color: #ff0080;
padding:0 95px 0 0;
opacity: .9
}
.navbar-right li a {
padding: 35px 21px;
font-size: 22px;
color: #fff;
text-transform: uppercase;
font-family: 'Yanone Kaffeesatz', 'sans-serif';
font-weight: 300;
}
.navbar-right li a:hover,
.navbar-right li a:focus,
.navbar-right .active a {
background-color: #fff;
color: #16728f
}
.fixed-menu {
background-color: #ff0080;
position: fixed;
top: 0;
}
.fixed-menu .navbar-right {
padding: 0;
}
.fixed-menu .navbar-right li a {
font-size: 18px;
padding: 20px 25px;
text-shadow:inherit;
}
.fixed-menu .navbar-brand {
height: 60px;
margin-top: 0;
padding: 0;
margin-bottom: 0;
width: 435px;
}
.fixed-menu .navbar-brand img {
height:60px;
top: 0;
}
.fixed-menu .header-top {
display: none;
}
/*************************
*******Home CSS******
**************************/
#home {
position: relative;
overflow: hidden;
}
#main-slider img {
width: 100%
}
#main-slider
.carousel-caption {
background: none repeat scroll 0 0 #000000;
bottom: 14%;
float: left;
left: 0;
opacity: 0.8;
padding:10px 60px 35px;
right: inherit;
text-transform: uppercase;
color: #fff;
text-align: left;
}
#main-slider
.carousel-caption h2 {
font-size: 38px;
}
#main-slider
.carousel-caption h4 {
font-size: 24px;
}
#main-slider
.carousel-caption a {
font-size: 22px;
color: #2da1c5
}
#main-slider
.carousel-caption a:hover {
color: #2588a6
}
#main-slider
.carousel-caption a:hover i {
margin-left: 35px
}
#main-slider
.carousel-caption a i {
margin-left: 15px;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
#main-slider
.carousel-indicators li {
background-color:#ff0080;
border: 1px solid #ff0080;
}
#main-slider
.carousel-indicators li.active {
background-color:#fff;
border: 1px solid #fff;
}
/*************************
*******Explore CSS******
**************************/
#explore {
background-color: #C34C39;
background-image: url("../images/event-bg.jpg");
background-position: center bottom;
background-size: contain;
background-repeat:no-repeat;
position: relative;
overflow: hidden;
padding: 130px 0 100px;
}
.watch {
position: absolute;
left: 0;
top: 7%;
}
#explore h2 {
font-size: 42px;
text-transform: uppercase;
text-align: center;
}
#countdown {
display: block;
overflow: hidden;
text-align: center;
padding: 0
}
#countdown li {
list-style: none;
display:inline-block;
margin-right: 40px;
text-align: center;
text-transform: uppercase;
font-size: 18px;
position: relative;
}
#countdown li:last-child {
margin-right: 0
}
#countdown li span {
display: block;
font-size: 40px;
font-weight: 700;
height: 82px;
line-height: 79px;
width: 75px;
border-radius: 10px;
border-right: 1px solid #c34c39;
border-bottom: 1px solid #c34c39;
}
#countdown li .days {
background-color: #45b29d;
border-top: 1px solid #c34c39;
border-left: 1px solid #c34c39;
}
#countdown li .hours {
background-color: #efc94c;
border-top: 1px solid #c34c39;
border-left: 1px solid #c34c39;
}
#countdown li .minutes {
background-color: #e27a3f;
border-top: 1px solid #c34c39;
border-left: 1px solid #c34c39;
}
#countdown li .seconds {
background-color: #df5a49;
border-top: 1px solid #c34c39;
border-left: 1px solid #c34c39;
}
#countdown li:before {
background-color: #c34c39;
content: "";
height: 11px;
left: 0;
position: absolute;
top: 36px;
width: 1px;
}
#countdown li:after {
background-color: #c34c39;
content: "";
height: 11px;
right:0;
position: absolute;
top: 36px;
width: 1px;
}
.cart {
background-color: #b34534;
position: absolute;
right:-200px;
top: 37%;
width:252px;
-webkit-transition: all 0.7s ease-in-out;
-moz-transition: all 0.7s ease-in-out;
-ms-transition: all 0.7s ease-in-out;
-o-transition: all 0.7s ease-in-out;
transition: all 0.7s ease-in-out;
}
.cart:hover {
right:0;
}
.cart a {
color: #FFFFFF;
display: block;
font-size: 24px;
text-transform: uppercase;
}
.cart a i {
font-size: 30px;
padding: 20px 12px;
background-color: #A64030;
margin-right: 3px;
}
/*************************
*******Event CSS******
**************************/
#event {
background-color: #33888F;
background-image: url("../images/performar-bg.jpg");
background-position: 50% 0;
background-size: contain;
position: relative;
background-repeat: no-repeat;
}
.guitar {
position: absolute;
right:0;
top: 0
}
#event h2 {
color: #FFFFFF;
font-size: 36px;
font-weight: 300;
margin-bottom: 40px;
margin-top: 70px;
text-transform: uppercase;
}
.single-event {
margin-bottom: 70px;
}
.single-event h4 {
color: #FFFFFF;
font-size: 24px;
font-weight: 300;
line-height: 26px;
margin-top: 25px;
text-transform: uppercase;
}
.single-event h5 {
font-size: 18px;
font-weight: 100;
display: block;
}
#event-carousel {
position: relative;
}
.even-control-left,
.even-control-right {
position: absolute;
font-size: 24px;
color: #fff;
top: 0;
}
.even-control-left {
right: 3%
}
.even-control-right {
right: 0;
}
/*************************
*******About CSS**********
**************************/
#about {
background-color: #75B46E;
position: relative;
width: 100%;
display: flex;
}
.guitar2 {
top: 0;
width: 50%;
}
.guitar2 img {
padding-top: 3%;
}
.about-content {
width: 50%;
background-image: url("../images/about-bg.jpg");
background-position: left bottom;
background-repeat: no-repeat;
background-size: cover;
padding: 70px 70px 110px;
}
#about h2 {
margin-bottom: 23px;
}
.about-content p {
font-size: 17px;
font-family: 'Dosis',sans-serif;
}
#about .btn-primary {
background-color: #137c61;
color: #fff;
text-transform: capitalize;
border: none;
margin-top: 28px;
}
#about .btn-primary:hover {
background-color: #126d55
}
/*************************
******Twitter CSS****
**************************/
#twitter {
background-color: #ecedef;
background-image: url("../images/twitter-bg.jpg");
background-position: center bottom;
background-size: cover;
background-repeat:no-repeat;
position: relative;
padding: 95px 0 90px;
overflow: hidden;
}
.twit {
position: absolute;
left: 0;
top:-42%;
}
#twitter-feed .item {
text-align: center;
}
#twitter-feed .item img {
display: inline-block;
width: 78px;
height: 78px;
border-radius: 50%;
background-color: #c5c8ce;
padding: 5px;
margin-bottom: 30px;
}
#twitter-feed .item a,
#twitter-feed .item p {
font-size: 24px;
font-weight: 300;
font-family: 'Yanone Kaffeesatz','sans-serif';
}
#twitter-feed .item p {
color: #3D3D3D;
}
#twitter-feed .item a {
color:#00c3ff;
}
.twitter-control-left,
.twitter-control-right {
position: absolute;
color: #00c3ff;
top: 59%;
font-size: 24px
}
.twitter-control-left {
left: 0;
}
.twitter-control-right {
right:0;
}
/*************************
******Sponsor CSS****
**************************/
#sponsor {
background-color: #1881a2;
background-image: url("../images/sponsor-bg.jpg");
background-position:50% 0;
background-size: cover;
background-repeat:no-repeat;
position: relative;
}
.light {
position: absolute;
right: 0;
bottom: 0;
}
#sponsor .col-sm-10 {
z-index: 10;
}
#sponsor h2 {
margin-top: 90px;
margin-bottom: 40px;
}
#sponsor .item ul {
font-size: 0;
padding: 0;
}
#sponsor .item ul li {
display: inline-block;
list-style: none;
width: 33.33%;
margin-bottom: 75px;
}
#sponsor .item ul li:last-child {
margin-right: 0
}
.sponsor-control-left,
.sponsor-control-right {
color: #FFFFFF;
font-size: 24px;
position: absolute;
top: 20%;
}
.sponsor-control-left {
right: 12%
}
.sponsor-control-right {
right: 10%
}
/*************************
******Map CSS****
**************************/
#map {
position: relative;
}
#gmap {
height:450px;
}
/*************************
******Contact CSS****
**************************/
.contact-section {
background-color: #f7ab24;
background-image: url("../images/contact-bg.jpg");
background-position:60% 0;
background-size:contain;
background-repeat:no-repeat;
position: relative;
}
.ear-piece {
position: absolute;
left: 0;
top: 0;
}
#contact .container {
padding-top:47px;
}
#contact h3 {
text-transform:inherit;
color: #373737;
}
#contact-section h3 {
margin-bottom: 25px
}
#contact address {
font-size: 18px;
color: #373737;
}
.contact-text {
margin-bottom: 35px;
display: block;
}
#contact-section .form-control {
border-color: #ae750d;
box-shadow:none;
outline: 0 none;
border-radius: 0;
color: #797979;
font-size: 18px;
}
#contact-section .form-control:focus {
border-color: #ae750d;
}
#contact-section input {
height: 44px;
}
#contact-section textarea {
height: 90px;
resize:none;
}
#contact-section .btn-primary {
background-color: #373737;
color: #f7ab24;
border: none;
font-size: 24px;
padding: 6px 42px;
margin-bottom: 110px;
margin-top: 10px
}
#contact-section .btn-primary:hover {
background-color: #212020;
color: #fff
}
/*************************
******Footer CSS****
**************************/
#footer {
background-color: #212121;
background-image: url("../images/footer-bg.jpg");
background-position: center bottom;
background-repeat: no-repeat;
background-size: cover;
color: #FFFFFF;
font-size: 20px;
padding: 35px 0;
}
#footer a {
color:#f7ab24
}
#footer a:hover {
color:#ff0080
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<title>Melodie Rooker Music</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/font-awesome.min.css" rel="stylesheet">
\t <link href="css/main.css" rel="stylesheet">
\t <link href="css/animate.css" rel="stylesheet">
\t <link href="css/responsive.css" rel="stylesheet">
<script src="https://use.fontawesome.com/6740b2e08a.js"></script>
<!--[if lt IE 9]>
\t <script src="js/html5shiv.js"></script>
\t <script src="js/respond.min.js"></script>
<![endif]-->
<link rel="shortcut icon" href="images/ico/favicon.ico">
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="images/ico/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="images/ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="images/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="images/ico/apple-touch-icon-57-precomposed.png">
</head><!--/head-->
<body>
\t <header id="header" role="banner">
\t \t <div class="main-nav">
\t \t \t <div class="container">
\t \t \t \t <div class="header-top">
\t \t \t \t \t <div class="pull-right social-icons">
\t \t \t \t \t \t <a href="https://www.facebook.com/melodierookermusic/" target="_blank"><i class="fa fa-facebook"></i></a>
\t \t \t \t \t \t <a href="https://www.youtube.com/channel/UCP9WMJHYJqXmTCjlRxBHSfg" target="_blank"><i class="fa fa-youtube"></i></a>
\t \t \t \t \t \t <a href="https://itunes.apple.com/mz/album/road-life-single/id1160137083" target="_blank"><i class="fa fa-apple"></i></a>
\t \t \t \t \t \t <a href="https://open.spotify.com/artist/3FEm9jdkZSvce8HxXhfbMz" target="_blank"><i class="fa fa-spotify"></i></a>
\t \t \t \t \t </div>
\t \t \t \t </div>
\t \t <div class="row">
\t \t <div class="navbar-header">
\t \t <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
\t \t <span class="sr-only">Toggle navigation</span>
\t \t <span class="icon-bar"></span>
\t \t <span class="icon-bar"></span>
\t \t <span class="icon-bar"></span>
\t \t </button>
\t \t <a class="navbar-brand" href="index.html">
\t \t \t <img class="img-responsive" src="images/logo.png" alt="logo">
\t \t </a>
\t \t </div>
\t \t <div class="collapse navbar-collapse">
\t \t <ul class="nav navbar-nav navbar-right">
\t \t <li class="scroll active"><a href="#home">Home</a></li>
\t \t <li class="scroll"><a href="#explore">Explore</a></li>
\t \t <li class="scroll"><a href="#about">Biography</a></li>
\t \t <li class="no-scroll"><a href="#twitter">Sample</a></li>
\t \t <li class="scroll"><a href="#contact">Contact</a></li>
\t \t </ul>
\t \t </div>
\t \t </div>
\t </div>
</div>
</header>
<!--/#header-->
<section id="home">
\t \t <div id="main-slider" class="carousel slide" data-ride="carousel">
\t \t \t <!-- <ol class="carousel-indicators">
\t \t \t \t <li data-target="#main-slider" data-slide-to="0" class="active"></li>
\t \t \t \t <li data-target="#main-slider" data-slide-to="1"></li>
\t \t \t \t <li data-target="#main-slider" data-slide-to="2"></li>
\t \t \t </ol> -->
\t \t \t <div class="carousel-inner">
\t \t \t \t <div class="item active">
\t \t \t \t \t <img class="img-responsive" src="images/slider/bg1.jpg" alt="slider">
\t \t \t \t \t <!-- <div class="carousel-caption">
\t \t \t \t \t \t <h2>register for our next event </h2>
\t \t \t \t \t \t <h4>full event package only @$199</h4>
\t \t \t \t \t \t <a href="#contact">GRAB YOUR TICKETS <i class="fa fa-angle-right"></i></a>
\t \t \t \t \t </div> -->
\t \t \t \t </div>
\t \t \t \t <!--<div class="item">
\t \t \t \t \t <img class="img-responsive" src="images/slider/bg2.jpg" alt="slider">
\t \t \t \t \t <div class="carousel-caption">
\t \t \t \t \t \t <h2>register for our next event </h2>
\t \t \t \t \t \t <h4>full event package only @$199</h4>
\t \t \t \t \t \t <a href="#contact">GRAB YOUR TICKETS <i class="fa fa-angle-right"></i></a>
\t \t \t \t \t </div>
\t \t \t \t </div>
\t \t \t \t <div class="item">
\t \t \t \t \t <img class="img-responsive" src="images/slider/bg3.jpg" alt="slider">
\t \t \t \t \t <div class="carousel-caption">
\t \t \t \t \t \t <h2>register for our next event </h2>
\t \t \t \t \t \t <h4>full event package only @$199</h4>
\t \t \t \t \t \t <a href="#contact" >GRAB YOUR TICKETS <i class="fa fa-angle-right"></i></a>
\t \t \t \t \t </div>
\t \t \t \t </div>
\t \t \t </div>
\t \t </div> -->
</section>
\t <!--/#home-->
\t <section id="explore">
\t \t <div class="container">
\t \t \t <div class="row">
\t \t \t \t <div class="watch">
\t \t \t \t \t <img class="img-responsive" src="images/watch.png" alt="">
\t \t \t \t </div>
\t \t \t \t <div class="col-md-4 col-md-offset-2 col-sm-5">
\t \t \t \t \t <h2>Upcoming Show<br>McLeod's Publick House</h2>
\t \t \t \t </div>
\t \t \t \t <div class="col-sm-7 col-md-6">
\t \t \t \t \t <ul id="countdown">
\t \t \t \t \t \t <li>
\t \t \t \t \t \t \t <span class="days time-font">00</span>
\t \t \t \t \t \t \t <p>days </p>
\t \t \t \t \t \t </li>
\t \t \t \t \t \t <li>
\t \t \t \t \t \t \t <span class="hours time-font">00</span>
\t \t \t \t \t \t \t <p class="">hours </p>
\t \t \t \t \t \t </li>
\t \t \t \t \t \t <li>
\t \t \t \t \t \t \t <span class="minutes time-font">00</span>
\t \t \t \t \t \t \t <p class="">minutes</p>
\t \t \t \t \t \t </li>
\t \t \t \t \t \t <li>
\t \t \t \t \t \t \t <span class="seconds time-font">00</span>
\t \t \t \t \t \t \t <p class="">seconds</p>
\t \t \t \t \t \t </li>
\t \t \t \t \t </ul>
\t \t \t \t </div>
\t \t \t </div>
\t \t \t <div class="cart">
\t \t \t \t <a href="https://www.google.com/maps/place/McLeod's+Publick+House/@31.2407451,-85.4776813,15z/data=!4m5!3m4!1s0x0:0x92b39accad44e9ce!8m2!3d31.2407451!4d-85.4776813?sa=X&ved=0ahUKEwjHvsXu8PzSAhWCxVQKHa5VBMUQ_BIIbDAK" target="_blank"><i class="fa fa-map-o"></i> <span>Get Directions</span></a>
\t \t \t </div>
\t \t </div>
\t </section><!--/#explore-->
\t <section id="event">
\t \t <div class="container">
\t \t \t <div class="row">
\t \t \t \t <div class="col-sm-12 col-md-9">
\t \t \t \t \t <div id="event-carousel" class="carousel slide" data-interval="false">
\t \t \t \t \t \t <h2 class="heading">Explore</h2>
\t \t \t \t \t \t <a class="even-control-left" href="#event-carousel" data-slide="prev"><i class="fa fa-angle-left"></i></a>
\t \t \t \t \t \t <a class="even-control-right" href="#event-carousel" data-slide="next"><i class="fa fa-angle-right"></i></a>
\t \t \t \t \t \t <div class="carousel-inner">
\t \t \t \t \t \t \t <div class="item active">
\t \t \t \t \t \t \t \t <div class="row">
<div class="col-sm-4">
\t \t \t \t \t \t \t \t \t \t <div class="single-event">
\t \t \t \t \t \t \t \t \t \t \t <img class="img-responsive" src="images/melodie-ricky.jpg" alt="Melodie and Ricky Rooker">
\t \t \t \t \t \t \t \t \t \t \t <h4>Melodie and Ricky Rooker</h4>
\t \t \t \t \t \t \t \t \t \t \t <h5>vocals, lead guitar</h5>
\t \t \t \t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t \t \t <div class="col-sm-4">
\t \t \t \t \t \t \t \t \t \t <div class="single-event">
\t \t \t \t \t \t \t \t \t \t \t <img class="img-responsive" src="images/loudboyz.jpg" alt="Melodie Rooker and the Loud Boyz">
\t \t \t \t \t \t \t \t \t \t \t <h4>Melodie Rooker</h4>
\t \t \t \t \t \t \t \t \t \t \t <h5>and the Loud Boyz</h5>
\t \t \t \t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t \t \t <div class="col-sm-4">
\t \t \t \t \t \t \t \t \t \t <div class="single-event">
\t \t \t \t \t \t \t \t \t \t \t <img class="img-responsive" src="images/mcleods-family.jpg" alt="We had such a blast playing at McLeod's Publick House in Dothan, AL last night! We got invited to be part of the family, which means our poster got autographed and put up on the wall!">
\t \t \t \t \t \t \t \t \t \t \t <h4>McLeod's Publick House</h4>
\t \t \t \t \t \t \t \t \t \t \t <h5>We became a part of the "family"</h5>
\t \t \t \t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t <div class="item">
\t \t \t \t \t \t \t \t <div class="row">
\t \t \t \t \t \t \t \t \t <div class="col-sm-4">
\t \t \t \t \t \t \t \t \t \t <div class="single-event">
\t \t \t \t \t \t \t \t \t \t \t <img class="img-responsive" src="images/studio.jpg" alt="Melodie at FAME Studios in Muscle Shoals, Alabama">
\t \t \t \t \t \t \t \t \t \t \t <h4>FAME Studios</h4>
\t \t \t \t \t \t \t \t \t \t \t <h5>Muscle Shoals, AL</h5>
\t \t \t \t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t \t \t </div>
<div class="col-sm-4">
<div class="single-event">
<img class="img-responsive" src="images/ricky.jpg" alt="Ricky Rooker at FAME Studios in Muscle Shoals, Alabama">
<h4>FAME Studios</h4>
<h5>Muscle Shoals, AL</h5>
</div>
</div>
\t \t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t </div>
\t \t \t \t \t \t </div>
\t \t \t \t \t </div>
\t \t \t \t </div>
\t \t \t \t <div class="guitar">
\t \t \t \t \t <img class="img-responsive" src="images/guitar.png" alt="guitar">
\t \t \t \t </div>
\t \t \t </div>
\t \t </div>
\t </section><!--/#event-->
\t <section id="about">
\t \t <div class="guitar2">
\t \t \t <img class="img-responsive" src="images/guitar2.jpg" alt="guitar">
\t \t </div>
\t \t <div class="about-content">
\t \t \t \t \t <h2>Biography</h2>
\t \t \t \t \t <p><stron>Melodie Rooker is a singer/songwriter based out of Nashville, TN. She has been singing since the day she was old enough to hold a microphone, and has fronted bands in Missouri, Mississippi, and Tennessee. Her current band, the Loud Boyz, consists of a rhythm/lead guitar (Ricky Rooker), bass (Colton Everhart), and drums (Justin Parker). Melodie Rooker & the Loud Boyz play Country, Blues, & Rock 'n Roll (all the good stuff)! Their shows are extremely high energy and interactive. All in all, this 4-piece band packs a powerful punch!<br><br>Melodie & the Loud Boyz are signed with Old Dog's Records based out of Nashville, TN. They have been interviewed on KTXR FM 101.3 (The Outlaw), and Browne Hill Radio (Africa).<br><br>Melodie Rooker & the Loud Boyz can play up to a 5 hour show, and can tweak their set list to play what the particular crowd wants to hear. They are open to traveling anywhere, and are available now for booking.</strong></p>
\t \t </div>
\t </section><!--/#about-->
\t <section id="twitter">
<div class="container">
<div class="row">
<div class="col-md-12">
\t \t <iframe width="100%" height="166" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/293251580&color=ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false"></iframe>
</div>
</div>
</div>
\t </section><!--/#twitter-feed-->
\t <section id="contact">
\t \t <!-- <div id="map">
\t \t \t <div id="gmap-wrap">
\t \t \t \t <div id="gmap">
\t \t \t \t </div>
\t \t </div>
\t \t </div><!--/#map-->
\t \t <div class="contact-section">
\t \t \t <div class="ear-piece">
\t \t \t \t <img class="img-responsive" src="images/ear-piece.png" alt="">
\t \t \t </div>
\t \t \t <div class="container">
\t \t \t \t <div class="row">
\t \t \t \t \t <div class="col-sm-3 col-sm-offset-4">
\t \t \t \t \t \t <div class="contact-text">
\t \t \t \t \t \t \t <h3>Contact</h3>
\t \t \t \t \t \t \t <address>
\t \t \t \t \t \t \t \t E-mail: [email protected]<br>
\t \t \t \t \t \t \t \t Phone: (417) 771-9817<br>
\t \t \t \t \t \t \t </address>
\t \t \t \t \t \t </div>
\t \t \t \t \t \t <div class="contact-address">
\t \t \t \t \t \t \t <h3>Find me in</h3>
\t \t \t \t \t \t \t <address>
Nashville, TN
\t \t \t \t \t \t \t </address>
\t \t \t \t \t \t </div>
\t \t \t \t \t </div>
\t \t \t \t \t <div class="col-sm-5">
\t \t \t \t \t \t <div id="contact-section">
\t \t \t \t \t \t \t <h3>Send a message</h3>
\t \t \t \t \t \t <div class="status alert alert-success" style="display: none"></div>
\t \t \t \t \t \t <form id="main-contact-form" class="contact-form" name="contact-form" method="post" action="sendemail.php">
\t \t \t \t \t <div class="form-group">
\t \t \t \t \t <input type="text" name="name" class="form-control" required="required" placeholder="Name">
\t \t \t \t \t </div>
\t \t \t \t \t <div class="form-group">
\t \t \t \t \t <input type="email" name="email" class="form-control" required="required" placeholder="Email">
\t \t \t \t \t </div>
\t \t \t \t \t <div class="form-group">
\t \t \t \t \t <textarea name="message" id="message" required="required" class="form-control" rows="4" placeholder="Enter your message"></textarea>
\t \t \t \t \t </div>
\t \t \t \t \t <div class="form-group">
\t \t \t \t \t <button type="submit" class="btn btn-primary pull-right">Send</button>
\t \t \t \t \t </div>
\t \t \t \t \t </form>
\t \t \t \t \t </div>
\t \t \t \t \t </div>
\t \t \t \t </div>
\t \t \t </div>
\t \t </div>
\t </section>
<!--/#contact-->
<footer id="footer">
<div class="container">
<div class="text-center">
<p> Copyright ©2017 Melodie Rooker All Rights Reserved</p>
</div>
</div>
</footer>
<!--/#footer-->
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
\t <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
\t <script type="text/javascript" src="js/gmaps.js"></script>
\t <script type="text/javascript" src="js/smoothscroll.js"></script>
<script type="text/javascript" src="js/jquery.parallax.js"></script>
<script type="text/javascript" src="js/coundown-timer.js"></script>
<script type="text/javascript" src="js/jquery.scrollTo.js"></script>
<script type="text/javascript" src="js/jquery.nav.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</body>
</html>
私の答えがあなたの質問に答えた場合は、正しい答えとしてそれを受け入れてください！ :) –