Concept Site for Yvonne's hair salon.

In this example below you will see how to do a Concept Site for Yvonne's hair salon. with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by kryo2k, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright kryo2k ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Concept Site for Yvonne's hair salon.</title>
  <base href="/">
<meta charset="utf-8">
<meta name="description" content="Yvonne's Homepage. Professional cosmetologist in Florida.">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">

  <link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  
<div class="container-page" ng-app="yvonneApp">
  <div class="container">
    <div class="row">
      <div class="col-sm-12 hero-menu">
        <ul class="nav nav-pills pull-right">
          <li ui-sref-active="active"><a ui-sref="default"><span class="glyphicon glyphicon-home"></span> Welcome</a></li>
          <li ui-sref-active="active"><a ui-sref="photoGallery"><span class="glyphicon glyphicon-picture"></span> Photo Gallery</a></li>
          <li ui-sref-active="active"><a ui-sref="pricing"><span class="glyphicon glyphicon-usd"></span> Pricing & Services</a></li>
          <li ui-sref-active="active"><a ui-sref="contact"><span class="glyphicon glyphicon-phone-alt"></span> Contact</a></li>
        </ul>
        <div class="clearfix"></div>
      </div>
    </div>
  </div>
  <div class="hero-unit" ng-class="{shrunken: shrunkenHero}">
    <div class="container">
      <div class="row">
        <div class="col-sm-12">
          <h3 class="hero-logo"></h3>
        </div>
      </div>
    </div>
  </div>
  <div class="page-body" ui-view=""></div>
  <div class="page-footer">
    <div class="container">
      <div class="row">
        <div class="col col-xs-6 col-sm-3 col-lg-3">
          <ul class="nav">
            <li><a href="href">Column 1a</a><a href="href">Column 1b</a><a href="href">Column 1c</a><a href="href">Column 1d</a><a href="href">Column 1e</a></li>
          </ul>
        </div>
        <div class="col col-xs-6 col-sm-3 col-lg-3">
          <ul class="nav">
            <li><a href="href">Column 2a</a><a href="href">Column 2b</a><a href="href">Column 2c</a><a href="href">Column 2d</a><a href="href">Column 2e</a></li>
          </ul>
        </div>
        <div class="col col-xs-6 col-sm-3 col-lg-3">
          <ul class="nav">
            <li><a href="href">Column 3a</a><a href="href">Column 3b</a><a href="href">Column 3c</a><a href="href">Column 3d</a><a href="href">Column 3e</a></li>
          </ul>
        </div>
        <div class="col col-xs-6 col-sm-3 col-lg-3">
          <ul class="nav">
            <li></li>
            <li><a href="href">Column 4a</a><a href="href">Column 4b</a><a href="href">Column 4c</a><a href="href">Column 4d</a><a href="href">Column 4e</a></li>
          </ul>
        </div>
      </div>
      <div class="row">
        <div class="col-sm-12">
          <p class="text-center text-muted small">Copyright &copy; {{currentTime|date:'yyyy'}}. All Rights Reserved.</p>
        </div>
      </div>
    </div>
  </div>
  <script type="text/ng-template" id="/default.tpl">
    <div class="container">
      <div class="row">
        <div class="col-sm-12">
          <h2 class="page-header">Welcome <small>to the site of Yvonne.</small>
          </h2>
        </div>
      </div>
      <div class="row">
        <div class="col-sm-12 col-md-6 col-lg-6">
          <p class="lead">Hello, my name is Yvonne.</p>
          <p>I have been doing cosmetology for over thirty years and it is still something that I love. Some people are just born to be in the business. I have high hopes that if you are on this site you are looking for a new stylist to help you get the look you have always wanted.</p>
          <p>I am a very skilled, professional, and creative person. With these qualities I can help you create the ideal image that you want for yourself.  I have spent a significant amount of time with many people training them to grow and gain credentials in this field. I hope to get a chance to work with you soon and help you change your style to exactly what you want to see.</p>
        </div>
        <div class="col-sm-12 col-md-6 col-lg-6">
          <p>At this time, my chair works out of the Wyndham of Palm Aire Resort. It is a full service salon, that also has a spa & gym just a door away. All of this which you will have access to. The address to come to is:</p>
          <blockquote>2601 Palm Aire Drive North, Pompano Beach FL. 33069</blockquote>
          <p>Tel# to salon location to make an appointment with me: <a href="tel://9549779113">(954) 977-9113</a>
          </p>
        </div>
      </div>
    </div>
  </script>
  <script type="text/ng-template" id="/photoGallery.tpl">
    <div class="container">
      <div class="row">
        <div class="col-sm-12">
          <h2 class="page-header">Photo Gallery <small>of Yvonne.</small>
          </h2>
          <div class="photo-gallery" ng-repeat="gallery in galleries">
            <h3 ng-bind="gallery.title" ng-if="!!gallery.title"></h3>
            <p class="text-muted" ng-bind="gallery.description" ng-if="!!gallery.description"></p>
            <div class="thumbnails">
              <div class="photo-thumb" ng-repeat="image in gallery.images" style="background-image: url({{image.src}});" ng-click="shadowBox(image, gallery)"></div>
              <div class="clearfix"></div>
            </div>
          </div>
        </div>
      </div>
      <div class="shadow-box" ng-show="showingShadowBox">
        <div class="sb-blur-image-bg" style="background-image: url({{sbImage.src}});"></div><a class="sb-close-button btn btn-lg btn-default" ng-click="closeShadowBox()"><span class="glyphicon glyphicon-remove"></span></a>
        <div class="sb-image" style="background-image: url({{sbImage.src}});"></div>
        <div class="sb-title" ng-bind="sbImage.title"></div>
        <div class="sb-description" ng-bind="sbImage.description"></div>
        <button class="btn btn-default sb-link-next" ng-click="shadowBoxStep(1)"><span class="glyphicon glyphicon-chevron-right"></span></button>
        <button class="btn btn-default sb-link-prev" ng-click="shadowBoxStep(-1)"><span class="glyphicon glyphicon-chevron-left"></span></button>
      </div>
    </div>
  </script>
  <script type="text/ng-template" id="/pricing.tpl">
    <div class="container">
      <div class="row">
        <div class="col-sm-12">
          <h2 class="page-header">Pricing <small>of Yvonne's services.</small>
          </h2>
        </div>
      </div>
      <div class="row">
        <div class="col-sm-12">
          <div class="pricetable">
            <dl ng-repeat="service in services">
              <dt><span class="service-name">{{service.name}}</span>
                <p class="service-description text-muted" ng-if="service.description" ng-bind="service.description"></p>
              </dt>
              <dd>{{service.cost|currency}}</dd>
            </dl>
            <dl class="referal-row"><span class="protip">Pro-tip:</span>
              <p>Mention the referral code <code>Yvonne Hair Design</code> and get a 10% discount when you visit me.
              </p>
            </dl>
          </div>
        </div>
      </div>
    </div>
  </script>
  <script type="text/ng-template" id="/contact.tpl">
    <div class="container">
      <div class="row">
        <div class="col-sm-12">
          <h2 class="page-header">Contact <small>Yvonne.</small>
          </h2>
          <div class="contact-card"><span class="address line-1">2601 Palm Aire Drive North</span><span class="address line-2">Pompano Beach, Florida 33069</span><span class="phone">Reservations: <a class="text-muted" href="tel://9549779113">(954) 977-9113</a></span></div>
        </div>
      </div>
      <div class="row">
        <div class="col-sm-12">
          <form class="form contact-form" name="contactForm">
            <div class="row">
              <dl class="col-sm-6">
                <dt class="required">Name</dt>
                <dd>
                  <input class="form-control" type="TEXT" name="firstName" ng-model="contact.firstName" placeholder="Your first name" required="required"/><span class="text-muted">First name</span>
                </dd>
              </dl>
              <dl class="col-sm-6">
                <dt class="required">&nbsp;</dt>
                <dd>
                  <input class="form-control" type="TEXT" name="lastName" ng-model="contact.lastName" placeholder="Your last name" required="required"/><span class="text-muted">Last name</span>
                </dd>
              </dl>
            </div>
            <div class="row">
              <dl class="col-sm-12">
                <dt class="required">E-mail</dt>
                <dd>
                  <input class="form-control" type="EMAIL" name="email" ng-model="contact.email" placeholder="Your e-mail address" required="required"/>
                </dd>
              </dl>
            </div>
            <div class="row">
              <dl class="col-sm-12">
                <dt class="required">Comment</dt>
                <dd>
                  <textarea class="form-control" name="message" ng-model="contact.message" placeholder="Your message.." required="required" rows="10"></textarea>
                </dd>
              </dl>
            </div>
            <div class="row">
              <div class="col-sm-12 text-right">
                <button class="btn btn-default" type="SUBMIT">Send Message</button>
                <button class="btn btn-danger" type="BUTTON" ng-click="resetForm()">Reset</button>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </script>
</div>
  <script src='http://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.12.1/ui-bootstrap.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.13/angular-ui-router.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/kryo2k/concept-site-for-yvonneandaposs-hair-salon-xbJxQw */
@import url(https://fonts.googleapis.com/css?family=Roboto);
@import url(https://fonts.googleapis.com/css?family=Oswald);
html, body {
  height: 100%;
}

a {
  color: rgba(255, 94, 220, 0.75);
}
a:hover {
  color: #ff5edc;
}

body {
  margin: 35px 0 15px;
  background-color: #0f060d;
  font-family: Roboto;
  background-image: radial-gradient(120vw 100vh, #2E1B2A transparent), linear-gradient(to bottom, #000, #000 350px, transparent), url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/59627/bg-tile.png);
  background-attachment: fixed;
}

blockquote {
  border-color: #FF5EDC;
}

textarea.form-control {
  resize: none;
}

.text-muted {
  color: #6f4165;
}

.protip {
  font-family: Oswald;
  color: #FF5EDC;
  display: block;
}

.contact-card {
  background-color: #eee;
  color: #111;
  margin-bottom: 15px;
  padding: 25px;
  display: inline-block;
}
.contact-card .address {
  display: block;
}

.page-header {
  border-color: #4F2E48;
  font-family: Oswald;
}
.page-header small {
  color: #FF5EDC;
  text-transform: uppercase;
}

.hero-menu {
  padding: 0 0 15px;
}
.hero-menu .nav.nav-pills li a {
  color: #ccc;
  border-radius: 0;
  -webkit-transition-property: color background-color;
  -moz-transition-property: color background-color;
  transition-property: color background-color;
  -webkit-transition-duration: 500ms;
  -moz-transition-duration: 500ms;
  transition-duration: 500ms;
}
.hero-menu .nav.nav-pills li a .glyphicon {
  color: #444;
  -webkit-transition-property: color;
  -moz-transition-property: color;
  transition-property: color;
  -webkit-transition-duration: 500ms;
  -moz-transition-duration: 500ms;
  transition-duration: 500ms;
}
.hero-menu .nav.nav-pills li a:hover {
  color: #eee;
  background-color: #211B20;
  -webkit-transition-duration: 0;
  -moz-transition-duration: 0;
  transition-duration: 0;
}
.hero-menu .nav.nav-pills li a:hover .glyphicon {
  color: #FF5EDC;
  -webkit-transition-duration: 0;
  -moz-transition-duration: 0;
  transition-duration: 0;
}
.hero-menu .nav.nav-pills li.active a {
  color: #eee;
  background-color: #211B20;
}
.hero-menu .nav.nav-pills li.active a .glyphicon {
  color: #FF5EDC;
}

.hero-unit {
  background-color: transparent;
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/59627/sample-hair-image.jpg);
  background-size: cover;
  background-position: 50% 50%;
  height: 0;
  overflow: hidden;
  border-width: 1px 0;
  display: flex;
  align-items: center;
  box-shadow: 0 0 60px 5px black;
  -webkit-transition-property: height;
  -moz-transition-property: height;
  transition-property: height;
  -webkit-transition-duration: 300ms;
  -moz-transition-duration: 300ms;
  transition-duration: 300ms;
  -webkit-animation: hero-expand 350ms ease-in-out;
  -moz-animation: hero-expand 350ms ease-in-out;
  animation: hero-expand 350ms ease-in-out;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-delay: 600ms;
  -moz-animation-delay: 600ms;
  animation-delay: 600ms;
}
@-webkit-keyframes to-front {
  100% {
    opacity: 1;
    left: 0;
  }
}
@-moz-keyframes to-front {
  100% {
    opacity: 1;
    left: 0;
  }
}
@keyframes to-front {
  100% {
    opacity: 1;
    left: 0;
  }
}
@-webkit-keyframes hero-expand {
  0% {
    height: 0;
    opacity: 0;
  }
  100% {
    height: 275px;
    opacity: 1;
  }
}
@-moz-keyframes hero-expand {
  0% {
    height: 0;
    opacity: 0;
  }
  100% {
    height: 275px;
    opacity: 1;
  }
}
@keyframes hero-expand {
  0% {
    height: 0;
    opacity: 0;
  }
  100% {
    height: 275px;
    opacity: 1;
  }
}
.hero-unit .hero-logo {
  display: inline-block;
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/59627/yvonne-logo-2.svg);
  background-size: 200px auto;
  background-repeat: no-repeat;
  width: 230px;
  height: 155px;
  opacity: 0;
  position: relative;
  left: -50%;
  -webkit-animation: to-front 2500ms;
  -moz-animation: to-front 2500ms;
  animation: to-front 2500ms;
  -webkit-animation-delay: 300ms;
  -moz-animation-delay: 300ms;
  animation-delay: 300ms;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

.page-footer,
.page-body {
  color: #A894A4;
}
.page-footer hr,
.page-body hr {
  border-color: #4F2E48;
}
.page-footer code,
.page-body code {
  background-color: #0f060d;
  color: #FF5EDC;
}

.page-footer {
  margin-top: 25px;
}
.page-footer .text-muted {
  color: #6f4165;
}
.page-footer .row {
  padding: 15px 0;
}
.page-footer .row:first-child {
  border: 1px solid #4F2E48;
  border-width: 1px 0;
}
.page-footer .nav li a {
  font-family: Oswald;
  font-size: 12px;
  padding: 5px 8px;
  color: #4F2E48;
  -webkit-transition-timing-function: ease-out;
  -moz-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
  -webkit-transition-property: background-color color;
  -moz-transition-property: background-color color;
  transition-property: background-color color;
  -webkit-transition-duration: 400ms;
  -moz-transition-duration: 400ms;
  transition-duration: 400ms;
}
.page-footer .nav li a:hover {
  color: #fff;
  background-color: #4F2E48;
  -webkit-transition-duration: 0;
  -moz-transition-duration: 0;
  transition-duration: 0;
}

.photo-gallery .thumbnails {
  display: flex;
  align-items: flex-end;
  justify-content: space-around;
  flex-flow: flex-wrap;
  flex-wrap: wrap;
}
.photo-gallery .photo-thumb {
  height: 150px;
  min-width: 100px;
  max-width: 130px;
  display: inline-block;
  float: left;
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  margin: 0 auto 10px;
  cursor: pointer;
}

.shadow-box {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 5vh 10vw;
  overflow: hidden;
  background-color: rgba(51, 51, 51, 0.85);
  z-index: 900;
}
.shadow-box .sb-blur-image-bg,
.shadow-box .sb-title,
.shadow-box .sb-image,
.shadow-box .sb-description,
.shadow-box .sb-close-button,
.shadow-box .sb-link-next,
.shadow-box .sb-link-prev {
  position: absolute;
}
.shadow-box .sb-blur-image-bg {
  background-position: 50% 50%;
  background-size: cover;
  top: -200px;
  left: -200px;
  right: -200px;
  bottom: -200px;
  -webkit-filter: blur(25px);
  filter: blur(25px);
  opacity: 0.7;
}
.shadow-box .sb-description,
.shadow-box .sb-title {
  left: 0;
  right: 0;
  padding: 25px;
  background-color: rgba(17, 17, 17, 0.85);
}
.shadow-box .sb-link-next,
.shadow-box .sb-link-prev {
  outline: none;
  width: 100px;
  height: 100px;
  line-height: 100px;
  background-color: rgba(34, 34, 34, 0.1);
  border-color: #111;
  font-size: 30px;
  color: #000;
  opacity: 0.5;
  -webkit-transition-property: opacity;
  -moz-transition-property: opacity;
  transition-property: opacity;
  -webkit-transition-duration: 200ms;
  -moz-transition-duration: 200ms;
  transition-duration: 200ms;
}
.shadow-box .sb-link-next:active, .shadow-box .sb-link-next:hover,
.shadow-box .sb-link-prev:active,
.shadow-box .sb-link-prev:hover {
  outline: none;
  background-color: rgba(34, 34, 34, 0.8);
  opacity: 1;
}
.shadow-box .sb-link-prev {
  left: 5vw;
  top: 50%;
  margin-top: -50px;
}
.shadow-box .sb-link-next {
  right: 5vw;
  top: 50%;
  margin-top: -50px;
}
.shadow-box .sb-description {
  bottom: 0;
}
.shadow-box .sb-title {
  top: 0;
  font-size: 20px;
}
.shadow-box .sb-image {
  left: 0;
  right: 0;
  bottom: 10vh;
  top: 10vh;
  background-size: contain;
  background-position: 50% 50%;
  background-repeat: no-repeat;
}
.shadow-box .sb-close-button {
  top: 5vh;
  right: 5vh;
  z-index: 99;
}

.pricetable .referal-row {
  display: block;
  border: 1px dashed #4F2E48;
  padding: 10px;
}
.pricetable .referal-row p {
  display: block;
  margin: 0;
}
.pricetable .service-description,
.pricetable .service-name {
  line-height: 1em;
  font-family: Roboto;
}
.pricetable .service-name {
  font-size: 18px;
  font-family: Oswald;
}
.pricetable dl {
  display: flex;
  margin: 0 auto 10px;
  align-items: flex-start;
}
.pricetable dl dt,
.pricetable dl dd {
  padding: 8px;
}
.pricetable dl dt {
  flex: 2;
  background-color: #0f060d;
}
.pricetable dl dt p {
  margin: 0;
}
.pricetable dl dt .text-muted {
  color: rgba(238, 238, 238, 0.5);
}
.pricetable dl dd {
  font-family: Roboto;
  border-radius: 5px;
  background-color: #2E1B2A;
  flex: 1;
  margin-left: 25px;
  vertical-align: middle;
  text-align: center;
  border: 1px solid #4F2E48;
  color: #FF5EDC;
}


/*Downloaded from https://www.codeseek.co/kryo2k/concept-site-for-yvonneandaposs-hair-salon-xbJxQw */
angular
.module('yvonneApp', [
  'ui.bootstrap',
  'ui.router'
])
.config(function ($stateProvider, $urlRouterProvider, $locationProvider) {

  $urlRouterProvider
    .otherwise('/');

  $stateProvider
    .state('default', {
    	url: '/',
    	templateUrl: '/default.tpl',
    	controller: 'MainCtrl'
  	})
    .state('photoGallery', {
    	url: '/photo-gallery',
    	templateUrl: '/photoGallery.tpl',
    	controller: 'PhotoGalleryCtrl'
  	})
    .state('pricing', {
    	url: '/pricing',
    	templateUrl: '/pricing.tpl',
    	controller: 'PricingCtrl'
  	})
    .state('contact', {
    	url: '/contact',
    	templateUrl: '/contact.tpl',
    	controller: 'ContactCtrl',
    	data: {
        shrinkHero: true
      }
  	});
  
  $locationProvider.html5Mode(true);
})
.run(function($rootScope) {
  $rootScope.currentTime = new Date;
  $rootScope.$on('$stateChangeSuccess', function(evt, state) {
		$rootScope.shrunkenHero = !!state.data && !!state.data.shrinkHero; 
  });
})
.controller('MainCtrl', function ($scope) {})
.controller('PhotoGalleryCtrl', function ($scope) {
  $scope.galleries = [
    { title: 'Gallery 1', description: 'Bacon ipsum dolor amet tenderloin chuck porchetta rump, meatloaf ball tip pig pancetta turkey pork chop. Ground round pork loin bacon hamburger pork t-bone. Short ribs hamburger venison alcatra ham prosciutto cow t-bone filet mignon tenderloin. Drumstick filet mignon pig porchetta prosciutto short ribs cupim bresaola pork kevin tri-tip ham hock kielbasa.',
     images: [
      {
        title: 'Image Title 1',
        description: 'Image Description 1',
        src: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/59627/yws_8476297.jpg'
      },
      {
        title: 'Image Title 2',
        description: 'Image Description 2',
        src: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/59627/yws_7989751.jpg'
      },
      {
        title: 'Image Title 3',
        description: 'Image Description 3',
        src: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/59627/yws_6220072.jpg'
      },
      {
        title: 'Image Title 4',
        description: 'Image Description 4',
        src: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/59627/yws_8385841.jpg'
      },
      {
        title: 'Image Title 5',
        description: 'Image Description 5',
        src: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/59627/yws_851946.jpg'
      },
      {
        title: 'Image Title 6',
        description: 'Image Description 6',
        src: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/59627/yws_6107515.jpg'
      },
      {
        title: 'Image Title 7',
        description: 'Image Description 7',
        src: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/59627/yws_2851208.jpg'
      },
      {
        title: 'Image Title 8',
        description: 'Image Description 8',
        src: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/59627/yws_5180167.jpg'
      },
      {
        title: 'Image Title 9',
        description: 'Image Description 9',
        src: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/59627/yws_6145417.jpg'
      },
      {
        title: 'Image Title 10',
        description: 'Image Description 10',
        src: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/59627/yws_8951641.jpg'
      },
      {
        title: 'Image Title 11',
        description: 'Image Description 11',
        src: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/59627/yws_359730.jpg'
      }
    ] }
  ];
  $scope.shadowBox = function(image, gallery) {
    $scope.showingShadowBox = true;
    $scope.sbImage = image;
    $scope.sbGallery = gallery;
  };
  $scope.closeShadowBox = function () {
    $scope.showingShadowBox = false;
    delete $scope.sbImage;
    delete $scope.sbGallery;
  };
  $scope.shadowBoxStep = function (dir) {
    var
    gallery = ($scope.sbGallery||{}),
    galleryImgs = (gallery.images||[]),
    curIndex = galleryImgs.indexOf($scope.sbImage);

    if(galleryImgs.length < 2) return; // no stepping needed.

    if(curIndex > -1) {
      var newIndex = curIndex + dir;
      if(newIndex < 0) { // go to end
        newIndex = galleryImgs.length - 1;
      }
      else if(newIndex > (galleryImgs.length - 1)) { // go to beginning
        newIndex = 0;
      }

      $scope.shadowBox(galleryImgs[newIndex], gallery);
    }
  };
})
.controller('PricingCtrl', function ($scope) {
  $scope.services = [{
    name: 'Service 1',
    description: 'Bacon ipsum dolor amet tenderloin chuck porchetta rump, meatloaf ball tip pig pancetta turkey pork chop. Ground round pork loin bacon hamburger pork t-bone.',
    cost: 75
  },{
    name: 'Service 2',
    description: 'Short ribs hamburger venison alcatra ham prosciutto cow t-bone filet mignon tenderloin. Drumstick filet mignon pig porchetta prosciutto short ribs cupim bresaola.',
    cost: 115
  },{
    name: 'Service 3',
    description: ' Turducken pork belly ground round, tail ball tip pork loin sausage prosciutto ribeye t-bone pig beef.',
    cost: 125
  },{
    name: 'Service 4',
    description: 'Alcatra pork leberkas ball tip corned beef tenderloin, jowl fatback picanha landjaeger biltong prosciutto flank shankle.',
    cost: 135
  },{
    name: 'Service 5',
    description: 'Ball tip spare ribs doner shoulder tri-tip capicola swine ground round biltong ribeye chuck pork brisket porchetta.',
    cost: 200
  }];
})
.controller('ContactCtrl', function ($scope) {})

Comments