Inner Soul Collective view live demo

A very rare piece in my portfolio, a side project that I designed and built myself from start to finish. 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 Scss to guide me through the process.

HTML Code

						
<!DOCTYPE html>
<html class="no-js" lang="en">
	<head>
		<!-- ============== Basic Page Needs ============== -->
		<meta name="robots" content="noindex, nofollow"/>
		<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&amp;posted_by=artist_4491155&amp;pwc%5Bdesign%5D=customized&amp;pwc%5Bbackground_color%5D=%23333333&amp;pwc%5Bincluded_songs%5D=1&amp;pwc%5Bphoto%5D=0&amp;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">&copy;2015 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>
						
					

SCSS Code

						
/* ==========================================================================
   Stylesheet For Custom Elements On All Pages
   ========================================================================== */
@import "foundation/settings";


/* 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;


/* Fonts Used
   ========================================================================== */
@font-face {
    font-family: 'ChunkfiveRegular';
    src: url('fonts/chunkfive/chunkfive.eot');
    src: url('fonts/chunkfive/chunkfive.eot?#iefix') format('embedded-opentype'),
         url('fonts/chunkfive/chunkfive.woff2') format('woff2'),
         url('fonts/chunkfive/chunkfive.woff') format('woff'),
         url('fonts/chunkfive/chunkfive.ttf') format('truetype'),
         url('fonts/chunkfive/chunkfive.svg#ChunkfiveRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}


/* 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;
  }
}


/* Facebook Feed
   ========================================================================== */
.fb-update {
  margin-bottom: 1em;
  padding: $column-gutter / 2;

  p:last-child {
    margin-bottom: 0;
  }

  .picture {
    margin-top: 13px;
  }
}


/* Sliders
   ========================================================================== */
.image-slider .flexslider {
  border: 2px solid #4D443D;
}

.flex-direction-nav {
  display: none;
}


/* Reusable Elements
   ========================================================================== */
.content-box {
  background: $jet;
  border: 3px solid #715415;
  box-shadow: 10px 10px 0 -3px rgba(0,0,0,0.8);
  margin-bottom: 30px;
  padding: 15px;
  position: relative;
  &.equalized {
    @media #{$large-up} {
      min-height: 410px;
    }
  }

  &:after {
    content: "\2605";
    font-size: 20px;
    line-height: 20px;
    position: absolute;
    right: 5px;
    top: 3px;
    -webkit-animation-name: spin;
    -webkit-animation-duration: 4000ms;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -moz-animation-name: spin;
    -moz-animation-duration: 4000ms;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
    -ms-animation-name: spin;
    -ms-animation-duration: 4000ms;
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: linear;
    animation-name: spin;
    animation-duration: 4000ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
  }
}

.social-list {
  list-style: none outside none;
  margin: 0;  
  
  li {
    display: inline;
    +li {
      margin-left: 4px;
    }

    a {
      background-color: #fff;
      background-position: center center;
      background-repeat: no-repeat;
      background-size: 70%;
      border-radius: 50%;
      display: inline-block;
      height: 30px;
      width: 30px;

      &:hover {
        background-color: $primary-color;
      }

      &.facebook { background-image: url('images/icon-facebook.png'); }
      &.twitter { background-image: url('images/icon-twitter.png'); }
      &.youtube { background-image: url('images/icon-youtube.png'); }
      &.email { background-image: url('images/icon-email.png'); }
      &.blog { background-image: url('images/icon-blog.png'); }
      &.reverbnation { background-image: url('images/icon-reverbnation.png'); }
      &.soundcloud { background-image: url('images/icon-soundcloud.png'); }
    }
  }
}

.check-list {
  list-style: none outside none;
  margin-left: 0;

  li {
    background: url('images/icon-check.png') no-repeat left 9px;
    border-top: 1px dashed rgba(158, 151, 135, 0.3);
    padding: 5px 0 5px 20px;
    font-size: 14px;

  }
}

.iframe {
  height: 365px;
  width: 100%;

  &.short {
    height: 285px;
  }
  &.tall {
    height: 450px;
  }
}

.iframe-wrap {
  border-bottom: 1px dashed rgba(158, 151, 135, 0.3);
  padding: 20px 0;
  @media #{$medium-up} {
    padding: 30px;
  }
}

/*  >> Messages and Alerts */
.alert {
  background-color: #fcf8e3;
  border: 5px solid rgba(0,0,0,0.2);
  color: #fff;
  margin-bottom: 20px;
  padding: 8px 35px 8px 14px;
}

.alert h4 {
  color: #fff;
  margin-bottom: 0.3em;
}

.alert p, 
.alert ul {
  padding-bottom: 3px;
}

.alert p:last-child {
  margin-bottom: 0;
}

.alert-error {
  background-color: $alert-color;
}

.alert-success {
  background-color: $success-color;
}

/*  >> Testimonials */
.testimonial {
  background: $jet;
  border: 1px solid #715415;
  font-size: 0.875em;
  padding: 8px;
  
  &+.testimonial {
    margin-top: 0.85em;
  }
  
  .testimonial-text p {
    margin-bottom: 0;
  }
  
  .profile {
    color: $secondary-color;
  }
  
  .location {
    font: italic 12px/1.2em $font-family-serif;
    color: #fff;
    text-align: right;
  }
}
 

/* Plugin Overrides
   ========================================================================== */
.Zebra_DatePicker.dp_visible {
  background: #433b35;
  border-color: $secondary-color;
}

.Zebra_DatePicker .dp_daypicker th {
  background: $primary-color;
}

 
/* 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); }
}
						
					

Recent Feedback see all

Krisztina is really friendly, professional and goes beyond what is necessary to ensure the job is done perfectly. I would recommend her to anyone and hope to work with her again in future.

Daniel Keel

Amazing work completed before the dealine. The email looked stunning and was EXACTLY the type of design I imaged in my head. Communication was second to none and will absolutely use again.

Phil Wannell

I cannot speak highly enough of Krisztina. If you’re ever going to use anyone for CSS, HTML or Jquery (or all three) then this is the person. Perfect work, perfect communication a complete pleasure to deal with!

Neale