Andrews Website Design

Andrews Website Design

by Andrew Pougher

HTML

<script src="http://bxslider.com/lib/jquery.bxslider.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.css">
<article class="accordion container">
<section>
  <header><h1>Welcome</h1></header>
<div class="content">

<ul class="bxslider">
  <li><img src="http://andrewpougher.co.uk/img/homepage/app.jpg" /></li>
  <li><img src="http://andrewpougher.co.uk/img/homepage/programming.jpg" /></li>
</ul>

<div class="container-fluid">
        <h2 class="text-center">Welcome</h2>
    <div class="row">    
        <div class="col-md-6">

      <p>This site showcases a cross section of new media work and profiles that will hopefully be of interest to you and possibly be the beginning or extension of our business relationship.
          </p><p>
If you already have a website, brand / marketing strategy or are just starting out but your eyes glaze over at the thought of how to go about it, then we can help guide your business with online communications, its identity, planning, e-commerce and taking it to market. I hope you will find some inspiration in this site and make contact.
          </p>
      
      </div>
        <div class="col-md-6"><p>
First and foremost the business is about people and the relationships it creates, pulling in the same direction and aligning our ideas and motivations. This website is hopefully the first step in that relationship.
          </p><p>
We now have Offices in the USA and UK and are proud to offer you a tight and efficiently run digital design and new media service.</p></div>
    </div>
</div>
  
  
  </div>
    </section>
    
    <section>
      <header><h1>Projects</h1></header>
<div class="content container"> 
        
         <h2 class="text-center">Work</h2><div class="andrew-masonry">
      
    		<!-- folio IMAGE 1 -->
				<div class="col-md-4 box">
			    	<div class="grid mask">
						<figure>
							<img class="img-responsive" src="http://placehold.it/350x250" alt="Andrew...

CSS

@import url("http://fonts.googleapis.com/css?family=Lato:300,400,700,300italic,400italic");
  @import url("http://fonts.googleapis.com/css?family=Josefin+Sans:300,400,700");

body {
  font: 16px/26px "Lato", Helvetica Neue, Arial;
  margin: 0;
  padding:20px 0 0 0;
  background:#222222;
}

body article {width:80%;}


.accordion {
  margin: 0 auto;
    min-width:300px;
}

header{  
   font-family:'Josefin Sans',sans-serif;
  text-transform:uppercase;
  letter-spacing:2px;
  font-weight:400;
  cursor:pointer;
  background: #9a305b;
  padding: 5px;
  color: white;
  border-bottom: 1px solid #222222;
transition: background 1.0s ease-in-out;
-moz-transition: background 1.0s ease-in-out;
-webkit-transition: background 1.0s ease-in-out;}

header h1 {  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
} 

.content{ 
  display: none;
  width:100%;
  color:#333;
  background-color: #f5f5ef;
  }

p {padding:10px;margin:0}


.selected {
  font-size:130%;
  padding-top:9px;
  background: #cd4079
}

.ticker {
    overflow: hidden;
    height: 90px;
   vertical-align: baseline;
}



.ticker h1 {
  font-family:'Josefin Sans',sans-serif;
  font-weight:300;
  color:#333; 
  font-size: 3.46666666667em;
    text-transform: uppercase;
    letter-spacing: 0.20em;
    margin-bottom:30px;
  height:60px;
     padding:0 ;
   color: #fff;
  line-height: 1.17em;
    -webkit-transition: margin-top 0.5s ease-in-out;
    -moz-transition: margin-top 0.5s ease-in-out;
    -o-transition: margin-top 0.5s ease-in-out;
    transition: margin-top 0.5s ease-in-out;
}

div.dark {background:#222;   
width:100%;  
  text-align:center; 
  padding:22px 0 0 0}


/* BX SLide */

/** RESET AND LAYOUT
===================================*/

.bx-wrapper {
	position: relative;
	margin: 0 auto 60px;
	padding: 0;
	*zoom: 1;
}

.bx-wrapper img {
	max-width: 100%;
	display: block;
}

.col-md-6 p{
  padding:0 50px 30px 50px;
  font-size:0.8em;
 ...

JavaScript

// fittext
(function($){$.fn.fitText=function(kompressor,options){var compressor=kompressor||1,settings=$.extend({'minFontSize':Number.NEGATIVE_INFINITY,'maxFontSize':Number.POSITIVE_INFINITY},options);return this.each(function(){var $this=$(this);var resizer=function(){$this.css('font-size',Math.max(Math.min($this.width()/(compressor*10),parseFloat(settings.maxFontSize)),parseFloat(settings.minFontSize)));};resizer();$(window).on('resize.fittext orientationchange.fittext',resizer);});};})(jQuery);



(function($) {
    // run the accordion
  var allPanels = $('.content').hide();
  var heads = $('.accordion header');
  $(document).on('click', 'header', function() {
      $this = $(this);
       $target =  $this.parent().find('div.content');
      if(!$target.hasClass('active')){
      heads.removeClass('selected');
      $(this).addClass('selected');
      allPanels.removeClass('active').slideUp();
      $target.addClass('active').slideDown();
      $('html, body').animate({scrollTop: $($target).offset().top}, 2000);
      }
     fitmenow(); // trigger fitText
      runslides();
  });
  
  // ticker
  
  var current = 1;
    var height = jQuery('.ticker').height();
    var numberDivs = jQuery('.ticker').children().length;
    var first = jQuery('.ticker h1:nth-child(1)');
    setInterval(function() {
        var number = current*-height;
        first.css('margin-top', number + 'px');
        if (current === numberDivs) {
            first.css('margin-top', '0px');
            current = 1;
        } else 
            current++;
    }, 2500);

  






})(jQuery); // END

 // BX SLIDE
var myflag = false;
function runslides(){
    if (!myflag) {
      $('section .bxslider').bxSlider({
		auto: true,
		mode: 'fade'
	});
   } //end if
myflag = true;
}
 
function fitmenow(){
 // FIT TEXT - IN THIS ORDER
$("h1.rwdtxt").css("font-size","3.46666em").delay(100,function() {
  $("h1.rwdtxt").fitText(1.1, {
        minFontSize: '18px',
        maxFontSize: '48px'
    });
});
}