michael-d
9/11/2017 - 1:22 AM

banner 6

banner 6

<div class="topBar">
<div class="bannerContainer">
<p class="tagline">Your Businesses Tagline Looks Rad</p>

 <div class="socialLinks">
    <a href="#" class="facebook"></a>
    <a href="#" class="instagram"></a>
    <a href="#" class="twitter"></a>
    <a href="#" class="googlePlus"></a>
    <a href="#" class="pinterest"></a>
    <a href="#" class="linkedIn"></a>
    <a href="#" class="youTube"></a>
 </div>
</div>
</div>

<div class="bannerContainer">
<div id="logo">
     <img src="websiteLogo.png" />
</div>

 <div class="contact">
    <p class="phone">03 0000 0000</p>
    <p class="mobile">0400 000 000</p>
    <a class="email" href="mailto:">email@email.com.au</a>
    <p class="address">123 Street Name, Australia 3000</p>
 </div>
 
</div>
#banner .container{
   padding:0px;
   max-width:none !important;
   width:100% !important;
}


#logo{
    width:80%;
    max-width:200px;
    max-height:80px;
padding:30px 0px;
}

#logo > img {
    width:100%;
    height:auto;
}

.contact {
    font-size:1em;
    color:inherit;
}

.contact p, .contact a{
    display:block;
    color:inherit;
    text-decoration:none; 
    line-height:1.2em;
    text-align:right;
}

.bannerContainer{
width:100%;
max-width:1100px;
margin:auto;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
   
   -webkit-flex-direction: row;
   -ms-flex-direction: row;
           flex-direction: row;
           
   -webkit-align-items: center;
   -ms-flex-align: center;
           align-items: center;
           
   -webkit-justify-content: space-between;
   -ms-flex-pack: justify;
           justify-content: space-between; 
}


.topBar{
background:rgba(0,0,0,.5);
color:#fff;
}



.topBar .bannerContainer p, .topBar .bannerContainer a{
display:inline-block;
font-size:.9em;
}

/* ---------------------------------- */
/* ---------- SOCIAL LINKS ---------- */
/* ---------------------------------- */
.socialLinks {
  position: relative;
display:block;
margin-left:0px;
}

.socialLinks span {
  font-size: .9em;
  font-weight: 700;
  margin-right: 20px;
}

.socialLinks a {
  color:#fff;
  position: relative;
  text-decoration: none;
  vertical-align: top;
  margin: 0px;
}

.socialLinks a:after {
  font-family: FontAwesome;
  width: 23px;
  height: 23px;
  /*---- DISPLAY FLEX -----*/
  display: -ms-flexbox;
  display: flex;
  display: -webkit-flex;
  /*---- END DISPLAY FLEX -----*/
  /*--- JUSTIFY CONTENT ---*/
  justify-content: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  /*--- END JUSTIFY CONTENT ---*/
  /*------ FLEX ALIGN -----*/
  align-items: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  /*------ END FLEX ALIGN -----*/
padding:1px 0px 0px;
}