0
템플릿을 편집하고 모바일 장치에서 볼 때 탐색 메뉴 버튼이 내 로고 옆에 정렬되도록하는 데 문제가 있습니다. 또한 모바일의 헤더 이미지도 약간 포함됩니다. Desktop view부트 스트랩을 사용하여 모바일 탐색 바를 로고로 정렬하는 방법
어떤 도움
이 크게 감사합니다! 여기에 내 코드입니다 : 당신은 부트 스트랩을 사용하는
@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>
아래 내 대답이 귀하의 질문에 대한 답변이라면 올바른 대답으로 받아 들여주세요. :) –