Inner Soul Collective
Inner Soul Collective is an outstanding wedding and corporate function band with a fantastic sound that is second-to-none! The band play a mixture of both contemporary and classic dance floor fillers that will make any event a memorable experience.
Near and dear to my heart, this website was a side project that I designed and built as a courtesy for one of my favourite clients who plays in the band.
I was given complete freedom to do whatever I liked, and I certainly did very much of it! Since they're my favourite, I yet again called on Foundation and SASS to guide me through the process.
Design outline
HTML Code
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<!-- ============== Basic Page Needs ============== -->
<meta charset="utf-8"/>
<title>Welcome | Inner Soul Collective</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<!-- ================= Stylesheets ================ -->
<link rel="stylesheet" href="css/foundation.css"/>
<link rel="stylesheet" href="css/plugins.css"/>
<link rel="stylesheet" href="css/styles.css"/>
<!-- ================= Scripts ================ -->
<script src="js/modernizr.js"></script>
</head>
<body>
<!-- ========== Page Header ========== -->
<header class="page-header">
<div class="row">
<!-- Logo -->
<div class="medium-8 columns small-only-text-center">
<h1 class="logo">
<a href="#">Inner Soul Collective</a>
<small>Party band to the stars, floor filling soul funk and disco classics all night long</small>
</h1>
</div>
<!-- Contact & Follow -->
<div class="medium-4 columns small-text-center medium-text-right">
<p class="phone">
07539 733 173<br/>
020 8123 9550
</p>
<ul class="social-list">
<li><a href="#" title="facebook" class="facebook" target="_blank"></a></li>
<li><a href="#" title="twitter" class="twitter" target="_blank"></a></li>
<li><a href="#" title="youtube" class="youtube" target="_blank"></a></li>
<li><a href="#" title="reverbnation" class="reverbnation" target="_blank"></a></li>
<li><a href="#" title="soundcloud" class="soundcloud" target="_blank"></a></li>
</ul>
</div>
</div>
</header>
<!-- ========== Page Intro ========== -->
<div class="page-intro">
<div class="page-nav">
<div class="row">
<div class="small-12 columns">
<nav class="top-bar" data-topbar role="navigation">
<ul class="title-area">
<li class="name"></li>
<li class="toggle-topbar menu-icon">
<a href="#"><span>Menu</span></a>
</li>
</ul>
<div class="top-bar-section">
<!-- Left Nav Section -->
<ul>
<li class="active"><a href="#">Home</a></li>
<li class="has-dropdown">
<a href="#">Media</a>
<ul class="dropdown">
<li><a href="#">Videos</a></li>
<li><a href="#">Images</a></li>
<li><a href="#">Press</a></li>
</ul>
</li>
<li><a href="#">Testimonials</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">News</a></li>
<li><a href="#" class="text-color-secondary">Contact</a></li>
</ul>
</div>
</nav>
</div>
</div>
</div>
</div>
<!-- ========== Page Body ========== -->
<div class="page-body">
<div class="row">
<div class="medium-6 columns">
<!-- Band Introduction -->
<div class="content-box">
<h2>Professional function band for all occasions</h2>
<hr/>
<p><img src="images/band.jpg" alt=""></p>
<hr/>
<p>Inner Soul Collective is an outstanding wedding and corporate function band with a fantastic sound that is
second-to-none! The band play a mixture of both contemporary and classic dance floor fillers that will
make your event a memorable experience... The quality and repertoire will always be outstanding... and
what if that special song you want performed at your event isn't in the band's repertoire? (This could be
for instance a ballad for the first dance at a wedding, or just another dance floor classic) This is not a
problem and given notice the band will learn and perform additional songs of your choice.</p>
<p>Inner Soul has an excellent pedigree, with members who have previously performed and worked in West End
Shows, TV, Radio and numerous arena and festival tours around the world. We can provide a complete - one
stop - live band in a number of lineup combinations from a 2 to 11-piece with a variety of brass section,
keys, acoustic and vocalist combinations to suit any budget or event. The band has a large pool of regular
performers trained in a number of top London and Brighton music schools - you can hear the quality of
musicianship in the band, both on the <a href="#" target="_blank">Live</a> and Demo recordings...</p>
<p>In consideration of your event, The band also has a number of PA and Lighting solutions for any occasion or
venue, including a DJ service and wireless microphones connected to our PA for you to make speeches and
announcements.</p>
<hr class="mb-50"/>
<p class="mb-0 text-center">
<a href="#" class="button small">Get in touch</a></p>
</div>
</div>
<div class="medium-6 columns">
<!-- Testimonials -->
<div class="content-box equalized">
<h2 class="text-color-secondary">Testimonials</h2>
<p>We've had the pleasure to perform on many memorable occasions, and we have many lovely people who are happy to
share a thought about our funky tunes.</p>
<div class="testimonial-slider">
<div class="flexslider">
<ul class="slides">
<li>
<blockquote>
<cite>Derek Monaghan – Hypo-Clean</cite>
<p>Hi Simon, Please pass on my thanks to the band for such a fabulous performance on
Friday. Everyone really enjoyed listening to you and you certainly got everyone up and
dancing! So many of our guests told us how great they thought you were... Thanks again!
<span class="person">Derek Monaghan</span></p>
</blockquote>
</li>
<li>
<blockquote>
<cite>Tracy and Dave Smith</cite>
<p>Amazing wedding band! Absolutely fantastic songs from start to finish -‐ everyone was
up on the dance floor, from OAPs to my three year old nephew. Our guests are still
raving now about how terrific they were, and I would definitely recommend them to
anybody. Thanks, <span class="person">Tracy and Dave Smith</span></p>
</blockquote>
</li>
<li>
<blockquote>
<cite>Adam Silver</cite>
<p>Inner Soul really did deliver the goods on the day. Some top class entertainment, full
range of funky tunes for young and old alike plus the traditional standards for the
authentic vibe. A great mix and even a funky bass solo in Horah! Where did that come
from?! <span class="person">Adam Silver</span></p>
</blockquote>
</li>
<li>
<blockquote>
<cite>Jen Lieberman</cite>
<p>Loved it loved it loved it. These guys are awesome. What a night! Danced all night too -
so much so I ached all over in the morning. My advice to anyone wanting a top quality
band for the evening - get these guys! You only do it once! (hopefully) so don't cut
corners with amateurs. :) <span class="person">Jen Lieberman</span></p>
</blockquote>
</li>
<li>
<blockquote>
<cite>Elisabeth Lipschitz</cite>
<p>Simon asked for a testimonial, so here it is - this band is GOOD - full of fun and
energy, dancing all night long too. I’m trying to persuade my niece to get hitched so
we can have you back and do it all again soon !… good luck guys…
<span class="person">Elisabeth Lipschitz</span></p>
</blockquote>
</li>
</ul>
</div>
</div>
</div>
<!-- Reverbnation Widget -->
<div class="content-box">
<h2 class="text-color-primary">Listen in</h2>
<iframe class="iframe short" src="http://www.reverbnation.com/widget_code/html_widget/artist_4491155?widget_id=50&posted_by=artist_4491155&pwc%5Bdesign%5D=customized&pwc%5Bbackground_color%5D=%23333333&pwc%5Bincluded_songs%5D=1&pwc%5Bphoto%5D=0&pwc%5Bsize%5D=fit"></iframe>
</div>
<!-- Gallery -->
<div class="content-box equalized">
<h2>Gallery</h2>
<div class="image-slider">
<div class="flexslider">
<ul class="slides">
<li><img src="images/live_620x400.jpg" alt=""/></li>
<li><img src="images/venue1_620x400.jpg" alt=""/></li>
<li><img src="images/courparate_620x400.jpg" alt=""/></li>
<li><img src="images/hotel_620x400.jpg" alt=""/></li>
<li><img src="images/venue2_620x400.jpg" alt=""></li>
<li><img src="images/venue3_620x400.jpg" alt=""></li>
<li><img src="images/stage_620x400.jpg" alt=""></li>
<li><img src="images/party_620x400.jpg" alt=""></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="small-12 columns">
<div class="content-box">
<h2 class="mb-0 text-color-primary">Watch Us Play</h2>
<p>Professional function band for all occasions</p>
<div class="row">
<div class="medium-6 large-8 columns">
<iframe class="iframe tall" src="//www.youtube.com/embed/RBmQ4VZ4wBo" allowfullscreen></iframe>
<hr class="show-for-small"/>
</div>
<div class="medium-6 large-4 columns">
<h4 class="text-color-tertiary">At-a-glance</h4>
<ul class="check-list mb-0">
<li>5 to 11 piece band</li>
<li>PA systems up to 600 guests</li>
<li>National and International venues</li>
<li>Weddings, Functions, Corporate and private</li>
<li>Special occasions catered for</li>
<li>Fully self contained</li>
<li>Lighting rig for small to huge venues</li>
<li>Sound engineer</li>
<li>Classic Disco, Funk, Soul</li>
<li>Hits and Floor Fillers from 70s to Modern day</li>
</ul>
<a href="#">get in touch</a>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- ========== Page Footer ========== -->
<footer class="page-footer">
<div class="inner">
<div class="row">
<!-- Contact Details -->
<div class="medium-4 large-3 columns small-only-text-center">
<h5 class="mb-0">Inner Soul Collective</h5>
<p class="copyright">© All Rights Reserved</p>
<p class="phone">
07539 733 173<br/>
020 8123 9550
</p>
<ul class="social-list">
<li><a href="#" title="facebook" class="facebook" target="_blank"></a></li>
<li><a href="#" title="twitter" class="twitter" target="_blank"></a></li>
<li><a href="#" title="youtube" class="youtube" target="_blank"></a></li>
<li><a href="#" title="reverbnation" class="reverbnation" target="_blank"></a></li>
<li><a href="#" title="soundcloud" class="soundcloud" target="_blank"></a></li>
</ul>
</div>
<!-- Testimonial -->
<div class="medium-4 large-6 columns">
<h5>Testimonials</h5>
<div class="testimonials">
<div class="testimonial">
<div class="testimonial-text">
<p class="profile">Charlotte Baitup</p>
<p class="content">"The band are so enthusiastic about what they do and their love and appreciation
for the music is reflective in their performance, it resonates across the dance floor like a
gust of wind that lifted everyone from their seats"</p>
<p class="location">Seaford, East Sussex</p>
</div>
</div>
</div>
</div>
<!-- Sitemap -->
<div class="medium-4 large-3 columns">
<h5>Sitemap</h5>
<ul class="inline-list">
<li><a href="#">Home</a></li>
<li><a href="#">Images</a></li>
<li><a href="#">Videos</a></li>
<li><a href="#">Press</a></li>
<li><a href="#">Testimonials</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">News</a></li>
</ul>
<a href="#" class="button small expand">
Get in touch</a>
</div>
</div>
</div>
</footer>
<!-- ==================== Scripts =================== -->
<script src="js/jquery.js"></script>
<script src="js/foundation.min.js"></script>
<script src="js/jquery.flexslider.min.js"></script>
<script src="js/scripts.js"></script>
<script>
$(function() {
setUpImageSlider();
setUpTestimonialSlider();
});
</script>
</body>
</html>
Partial SCSS Code
/* Mixins & Variables
======================================================= */
/* >> Mixins */
@mixin background-cover {
background-repeat: no-repeat;
background-position: center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
@mixin transition($value) {
-webkit-transition: $value;
-moz-transition: $value;
transition: $value;
}
/* >> Variables */
$font-family-impact: "ChunkfiveRegular",$font-family-sans-serif;
$tertiary-color: #ccc7bb;
/* General Rules
======================================================= */
body { @include background-cover();
background-color: $jet;
background: url('images/tile-dark.png') repeat center center #5A5046;
background-color: #2D2A25;
background-color: #4D443D;
}
.button {
letter-spacing: 1px;
text-transform: uppercase;
}
h6 {
font-family: "OpensansSemibold",$font-family-sans-serif;
line-height: 1.5em;
}
a {
outline: none;
}
textarea {
min-height: 150px;
}
blockquote {
background: #201E1F;
border: 1px solid #715415;
font-size: 15px;
.location {
color: #ccc7bb;
display: block;
font-family: $font-family-sans-serif;
font-style: italic;
text-align: right;
}
cite {
font-family: "OpensansLight",$font-family-sans-serif;
margin-bottom: 0.2em;
&:before {
content: '';
}
}
.person {
color: #ccc7bb;
font-family: "OpensansSemibold",$font-family-sans-serif;
font-size: 13px;
text-transform: uppercase;
}
}
label em {
color: $primary-color;
}
label.error {
color: #e2483d;
font-family: "OpensansSemibold",$font-family-sans-serif;
font-size: 12px;
text-transform: uppercase;
margin: 0.3em 0 1em;
}
/* Page Header
======================================================= */
.page-header {
background: url('images/glam.jpg') repeat center center #000;
border-bottom: 5px solid rgba(0,0,0,0.2);
padding: 10px 0;
}
.logo {
line-height: 1.1em;
margin-top: 17px;
@media #{$large-up} {
margin-top: 30px;
}
a {
font-size: 38px;
@media #{$large-up} {
font-size: 50px;
}
}
small {
color: #fff;
display: block;
font-family: $body-font-family;
font-size: 14px;
line-height: 1.2em;
}
}
.phone {
background: url('images/icon-phone.png') no-repeat left center;
color: $primary-color;
display: inline-block;
font: 20px/1.1em $font-family-impact;
margin: 15px 0 10px;
padding-left: 50px;
text-align: justify;
white-space: nowrap;
span {
font-size: 28px;
}
}
/* Page Intro
======================================================= */
.page-intro {
background:
url('images/crowd.png') repeat-x center bottom,
url('images/tile.png') repeat center top;
background-color: $primary-color;
border-bottom: 30px solid rgba(0,0,0,0.5);
box-shadow: 0 0 10px 0 #000;
height: 300px;
position: relative;
&:after {
background: url('images/logo.png') no-repeat center center;
content: '';
height: 215px;
width: 200px;
position: absolute;
left: 50%;
bottom: -50px;
margin-left: -100px;
}
}
/* Page Navigation
======================================================= */
.page-nav {
background: rgba(255,255,255,0.9);
position: relative;
z-index: 99999;
}
/* First level & down */
.top-bar-section ul li {
border-top: 1px solid rgba(158,151,135,0.5);
position: relative;
@media #{$topbar-media-query} {
border-top: 0;
}
&:not(.title):before {
content: "\2605";
font-size: 20px;
line-height: 0.5em;
position: absolute;
left: 5px;
top: 16px;
@media #{$topbar-media-query} {
left: -8px;
}
}
}
.top-bar-section ul li a,
.top-bar-section .dropdown li a {
padding: 12px 0 12px 30px;
}
.top-bar-section >ul >li >a {
@media #{$large-up} {
font-size: 1em;
}
}
.top-bar-section >ul >li:not(.has-form):first-child {
@media #{$topbar-media-query} {
&:before {
display: none;
}
>a:not(.button) {
padding-left: 0;
}
}
}
/* Second level & down */
.top-bar-section .dropdown {
min-width: 260px;
li:before {
@media #{$topbar-media-query} {
display: none;
}
}
li:not(.has-form):not(.active) > a:not(.button) {
@media #{$topbar-media-query} {
font-weight: normal;
text-transform: none;
}
}
}
/* Page Body
======================================================= */
.page-body {
padding: 30px 0 60px;
}
.page-content {
min-height: 500px;
padding: 60px 0;
}
/* Page Footer
======================================================= */
.page-footer {
background: url('images/tile.png') repeat center top $primary-color;
border-top: 10px solid rgba(0,0,0,0.5);
box-shadow: 0 0 10px 0 #000;
font-size: 14px;
.inner {
background: url('images/tile-dark.png') repeat center top $jet ;
}
.copyright {
letter-spacing: 0.6px;
margin-bottom: 0;
}
.inner >.row >.columns {
margin: 30px 0;
}
}
/* Individual Styles
======================================================= */
.mb-0 { margin-bottom: 0!important; }
.mb-50 { margin-bottom: 50px!important; }
.text-color-primary { color: $primary-color!important; }
.text-color-secondary { color: $secondary-color!important; }
.text-color-tertiary { color: $tertiary-color!important; }
.text-weight-light { font-family: OpensansLight,$font-family-sans-serif; }
a.text-color-secondary:hover, a.text-color-secondary:focus { color: $primary-color!important; }
/* Animations
======================================================= */
@keyframes spin {
0% { transform:rotate(0deg); }
100% { transform:rotate(360deg); }
}
@-moz-keyframes spin {
0% { -moz-transform: rotate(0deg); }
100% { -moz-transform: rotate(360deg); }
}
@-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
@-ms-keyframes spin {
0% { -ms-transform: rotate(0deg); }
100% { -ms-transform: rotate(360deg); }
}
@-o-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}