CodeMyUI/index.html

## index.html
<head>
  <style>

@import 'https://fonts.googleapis.com/css?family=Libre+Baskerville:400,400i';

@import url("https://fonts.googleapis.com/css?family=Poppins:500,800&display=swap");
  </style>
</head>

<!-- body -->
<body>
  <div id="main">
  <div id="first row">

  <div id="cBlob"></div>
  <div id="cClick"></div>

<content>
  <div id="title">
    <h1 class="blobber ac">Shantell Martin</h1>
    <h1 class="blobber ac">Shantell Martin</h1>
  </div>
</content>
    </div>

<main>

<section id="section02" class="parallax">
</section>

<div id="section-info" class="parallax1">
  <div class="container relcontainer" class="col-md-12">
    <h2> About </h2>
    <div class="container relcontainer">
      <div class="col-md-6">
      <p id="tribute">
      Below the surface of Shantell Martin’s signature black and white drawings is an artists’ inquiry into the role of artist and viewer, where a work of art is more than an object of admiration disconnected from its inception. With a meditative process defined by an uninhibited flow, her compositions embody her internal state and the impermanence of the world around her. Exploring themes such as intersectionality, identity and play, Martin is a cultural facilitator, forging new connections between fine art, education, design, philosophy and technology.<br><br>

In addition to prestigious solo shows at some of the most renown art institutions including the 92Y Gallery in New York City, the iconic Albright Knox gallery and the MoCADA Museum, Martin has carved a path for herself that is as much intellectual as visual artist. During her two year tenure as a MIT Media Lab Visiting Scholar, Martin collaborated with the social computing group  to use drawing as a medium to explore the interaction of social processes with physical spaces. </p>
      </div>

 <div class="col-md-6">
        <p id="tribute-info">
          <a id="tribute-link" target='_blank' href="https://shantellmartin.art/work/brown-institute-of-media-innovation/">At the Brown Institute for Media Innovation </a>, Martin created a large scale wall installation and worked with the Institute’s research group to explore how visual and computerized storytelling might influence media and technology innovation.<br><br>

A fashion and design icon in her own right, Martin has collaborated with iconic brands such as Nike, Vitra, Max Mara, Tiffany & Co., and in 2018, Puma launched a global capsule collection featuring her drawings. Martin has collaborated with legendary artists such as Pulitzer Prize winning performance artist Kendrick Lamar and acclaimed designer Kelly Wearstler. In late 2018, she was asked to collaborate with the prestigious New York City Ballet, where she created large scale drawings in the performance hall and foyer of the Lincoln Center for the company’s celebrated Art Series. She continues to teach as an adjunct professor at NYU Tisch ITP (Interactive Telecommunications Program), where she works with her students to push the boundaries of storytelling, visual art and technology. </p>
      </div>
    </div>
  </div>
</div>


<div id="section03">
   <div class="container relcontainer" class="col-md-12">
  <h2>Original Art</h2>
  <div class="container 2container">
    <div class="col-md-4">
      <p>The relationship between an artist and collector should be just that... a relationship. If you are interested in purchasing original artworks, Shantell would like to get to know YOU a little better through a series of questions that will ensure the work she creates goes to great people that will love and value it.</p>

 <p>
   "An artist is only going to make so much work within their lifetime and this is one of the many reasons why I care about where my work lives.

I want the work I create to go to great people and their families that love and value it.

In light of this, I am inviting you to begin this application process to get to know YOU a little better and to hopefully share more about my world and process of creating art with you." </p>

      <a href="https://shantellmartin.typeform.com/to/mR7k2Q" type="button" class="btn">Get Started</a>
    </div>
    <div class="col-md-8">
      <div id="img-div">
        <img id="image" class="img-responsive" src= https://github.com/madelineuribes/madeline/blob/master/casey-and-candice_201810151220_201810151220.jpg?raw=true">
        <div id="img-caption"> New Clients </div>
        </div>

    </div>

     </div>
  </div>
</div>

    </main>
</body>

## script.js

// define lettering classes
$(".ac, .ac-d").lettering();
$(".al, .ac-l").lettering("lines");
$(".aw, .aw-l").lettering("words");

// check for lettering.js whitespaces
$("span[class^='char']").each(function(){
	var str = $(this).text();

	if(str === null || str.match(/^ *$/) !== null){
    $(this).empty();
	}
});

$("content").show(0).css({
	'display': 'flex',
	'justify-content': 'center',
	'align-items': 'center'
});

// define elements for blob thingy
const CURSOR = $("#cBlob");
const CLICKER = $("#cClick");
const BLOBBER = $(".blobber");

// set blob position
$(document).mousemove(function(e) {
  CURSOR.css({
    top: e.pageY - CURSOR.height() / 2 + "px",
    left: e.pageX - CURSOR.width() / 2 + "px"
  });
});

// functions for cursor
const initCursor = () => CURSOR.css("transform", "scale(1)");
const setCursorHover = () => CURSOR.css("transform", "scale(2)");
const removeCursorHover = () => CURSOR.css("transform", "scale(1)");
const setCursorClick = e => {
  CLICKER.css({
    top: e.pageY - CLICKER.height() / 2 + "px",
    left: e.pageX - CLICKER.width() / 2 + "px"
  });
  CLICKER.addClass("clicked");
};

setTimeout(function(){
	initCursor();
}, 1000)

// non clickable elements
BLOBBER.each(function() {
  $(this).on({
    mouseover: setCursorHover,
    mouseleave: removeCursorHover
  });

  if($(this).hasClass("link")){
    $(this)
      .click(setCursorClick)
      .click(function(){
      var href = $(this).data('href');

      setTimeout(function(){
        toggleNav();

        //window.location.href = href;
        var result = confirm("the " + href + " page will appear here");

        if (result) {
          window.location.reload(false);
        }
      }, 800);
    });
  }
});

$(".nav__icon").click(function() {
  toggleNav();
});

## scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lettering.js/0.7.0/jquery.lettering.min.js"></script>

## style.scss
$white:#fff;
$black:#000000;

*{
  padding:0;
  margin:0;
  box-sizing:border-box;
  font-family: 'Poppins', sans-serif;
}

body {
  justify-content:center;
  align-items:center;
  min-height:100vh;
  position:relative;
}

h2 {
  	  font-weight:800;
	    font-size:12vmin;
      padding-left: 28px;
      padding-bottom: 10px;
	    line-height:1;
	    color:$white;
	    white-space:nowrap;
	    -webkit-text-stroke:1pt $black;
	    overflow: hidden;
}

p {
  font-family: arial, sans-serif;
  color:$black;
	overflow: hidden;
}

content {
    background:$black;
}

// CURSOR BLOB
#cBlob {
  width: 50px;
  height: 50px;
  background-image: radial-gradient(
    circle farthest-corner at 10% 20%,
    #df5b5b 0%,
    #ffd16e 100%
  );
  background:#fff;
  background-size: 1600% 1600%;
  position: absolute;
  mix-blend-mode: difference;
  pointer-events: none;
  z-index: 60;
  transform:scale(0);
  transition: transform 0.8s ease;
  animation: blobRadius 6s ease-in-out infinite,
    blobBackground 15s ease infinite;
}

@media (hover: none) {
  #cBlob{
    display:none;
  }
}

// PAGE TRANSITION BLOB
#cClick {
  width: 500px;
  height: 500px;
  background: #f1eff6;
  position: fixed;
  z-index: 60;
  pointer-events:none;
  transition: top 0.1s ease, left 0.1s ease, transform 1.8s ease,
    background 1.5s ease;
  animation: blobRadius 6s ease-in-out infinite,
    blobBackground 15s ease infinite;
  opacity: 0;
  transform: scale(0.1);

  &.clicked {
    opacity: 1;
    transform: scale(10);
    background: #28212e;
  }
}

.blobber{
  cursor:pointer;
}

.ac, .aw, .al, .ac-d, .aw-d, .al-d{
  span:blank{
    min-width:20px;
  }
}

// BLOB ANIMATIONS
@keyframes blobRadius {
  0%,100% { border-radius: 43% 77% 80% 40% / 40% 40% 80% 80% }
  20% { border-radius: 47% 73% 61% 59% / 47% 75% 45% 73% }
  40% { border-radius: 46% 74% 74% 46% / 74% 58% 62% 46% }
  60% { border-radius: 47% 73% 61% 59% / 40% 40% 80% 80% }
  80% { border-radius: 50% 70% 52% 68% / 51% 61% 59% 69% }
}
@keyframes blobBackground {
  0%,100% { background-position: 0% 50% }
  50% { background-position: 100% 50% }
}

content{
  height:100vh;
  width:100%;
  overflow:hidden;
  display:none;

  #title{
  	position: absolute;
  	z-index: 70;

  	h1{
	    font-weight:800;
	    font-size:12vmin;
	    margin:0;
	    line-height:1;
	    color:$white;
	    white-space:nowrap;
	    animation:cutoff-top 1s forwards;
	    -webkit-text-stroke:1pt $black;
	    overflow: hidden;

	    $cutoff:60%;
	    clip-path:polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);

	    &:last-child{
	    	position:absolute;
	    	top:0;
	    	left:0;
	      -webkit-text-stroke:1pt $black;
	      color:transparent;
	      clip-path:polygon(0% 100%, 100% 100%, 100% 100%, 0% 100%);
	      animation:cutoff-bottom 1s forwards;
	    }

	    @keyframes cutoff-top{
	    	to{
	    		clip-path:polygon(0% 0%, 100% 0%, 100% $cutoff, 0% $cutoff);
	    	}
	    }
	    @keyframes cutoff-bottom{
	    	to{
	    		clip-path:polygon(0% $cutoff, 100% $cutoff, 100% 100%, 0% 100%);
	    	}
	    }
	  }
  }
}

// ANIMATIONS
.a{
  &c, &l, &w {
    // loop for offsetting nodes
    span {
      animation: rollIn 0.3s forwards;
      opacity: 0;
      transform: translateY(-8px) rotate(-5deg);
      display: inline-block;

      @for $i from 1 through 50 {
        &:nth-child(#{$i}) {
          animation-delay: #{$i * 0.05}s;
        }
      }

      &:empty{
      	width:15px;
      }
    }
  }
  &c-d, &l-d, &w-d{
    // loops for offsetting nth-childs, not only nodes
    @for $i from 1 through 50{
      &:nth-child(#{$i}){
        transition:transform 0.5s ease #{$i * 0.15}s;

        span{
          animation: rollIn 0.3s forwards;
          opacity: 0;
          transform: translateY(-8px) rotate(-5deg);
          display: inline-block;

          @for $f from 1 through 50 {
            &:nth-child(#{$f}) {
              animation-delay: #{($f * 0.05) + ($i * 0.15)}s;
            }
          }

          &:empty{
      			width:15px;
      		}
        }
      }
    }
  }
  &l, &l-d{
    span{
      animation: rollIn 0.7s forwards;
    }
  }
  &w, &w-d{
    span{
      animation: rollIn 0.5s forwards;
    }
  }
}

@keyframes rollIn {
  to{
    transform: translateY(0) rotate(0);
    opacity: 1;
  }
}


.parallax {
  /* The image used */
  background-image: url("https://github.com/madelineuribes/madeline/blob/master/Martin-Shantell.jpg?raw=true");

  /* Set a specific height */
  height: 100vh;

  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

#section-info {
  padding-top: 5em;
}

#tribute-link {
  font-weight: 900;
  color: black;
  text-decoration: none;
}

#tribute-link:visited,
#tribute-link:active, {
  font-weight: 900;
  color: black;
  text-decoration: none;
}

#tribute-link:hover {
  text-decoration: underline;
}

#section03 {
  padding-top: 30px;
}

.img-responsive {
  margin: 0 auto;
}

#image {
  max-width: 100%;
  height: auto;
  position: center;
}

#img-caption {
  font-family: arial, sans-serif;
  color:$black;
}

.btn {
  font-family: arial;
  font-size: 15px;
  margin-top: 15px;
  width: 160px;
  border-radius: 0px;
  background-color: black;
  color: white;
    -webkit-transition-duration: 0.4s; /* Safari */
  transition-duration: 0.4s;
}

.btn:hover {
  background-color: white;
  border: 2px solid black;
  color: black;
}

## styles
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

## tribute-page.markdown

      
    Raw
  

              tribute-page.markdown
            
          
    Tribute Page

A tribute to Shantell Martin.
A Pen by Madeline Uribes on CodePen.
License.
	<head>
	<style>

	@import 'https://fonts.googleapis.com/css?family=Libre+Baskerville:400,400i';

	@import url("https://fonts.googleapis.com/css?family=Poppins:500,800&display=swap");
	</style>
	</head>

	<!-- body -->
	<body>
	<div id="main">
	<div id="first row">

	<div id="cBlob"></div>
	<div id="cClick"></div>

	<content>
	<div id="title">
	<h1 class="blobber ac">Shantell Martin</h1>
	<h1 class="blobber ac">Shantell Martin</h1>
	</div>
	</content>
	</div>

	<main>

	<section id="section02" class="parallax">
	</section>

	<div id="section-info" class="parallax1">
	<div class="container relcontainer" class="col-md-12">
	<h2> About </h2>
	<div class="container relcontainer">
	<div class="col-md-6">
	<p id="tribute">
	Below the surface of Shantell Martin’s signature black and white drawings is an artists’ inquiry into the role of artist and viewer, where a work of art is more than an object of admiration disconnected from its inception. With a meditative process defined by an uninhibited flow, her compositions embody her internal state and the impermanence of the world around her. Exploring themes such as intersectionality, identity and play, Martin is a cultural facilitator, forging new connections between fine art, education, design, philosophy and technology.<br><br>

	In addition to prestigious solo shows at some of the most renown art institutions including the 92Y Gallery in New York City, the iconic Albright Knox gallery and the MoCADA Museum, Martin has carved a path for herself that is as much intellectual as visual artist. During her two year tenure as a MIT Media Lab Visiting Scholar, Martin collaborated with the social computing group to use drawing as a medium to explore the interaction of social processes with physical spaces. </p>
	</div>

	<div class="col-md-6">
	<p id="tribute-info">
	<a id="tribute-link" target='_blank' href="https://shantellmartin.art/work/brown-institute-of-media-innovation/">At the Brown Institute for Media Innovation </a>, Martin created a large scale wall installation and worked with the Institute’s research group to explore how visual and computerized storytelling might influence media and technology innovation.<br><br>

	A fashion and design icon in her own right, Martin has collaborated with iconic brands such as Nike, Vitra, Max Mara, Tiffany & Co., and in 2018, Puma launched a global capsule collection featuring her drawings. Martin has collaborated with legendary artists such as Pulitzer Prize winning performance artist Kendrick Lamar and acclaimed designer Kelly Wearstler. In late 2018, she was asked to collaborate with the prestigious New York City Ballet, where she created large scale drawings in the performance hall and foyer of the Lincoln Center for the company’s celebrated Art Series. She continues to teach as an adjunct professor at NYU Tisch ITP (Interactive Telecommunications Program), where she works with her students to push the boundaries of storytelling, visual art and technology. </p>
	</div>
	</div>
	</div>
	</div>


	<div id="section03">
	<div class="container relcontainer" class="col-md-12">
	<h2>Original Art</h2>
	<div class="container 2container">
	<div class="col-md-4">
	<p>The relationship between an artist and collector should be just that... a relationship. If you are interested in purchasing original artworks, Shantell would like to get to know YOU a little better through a series of questions that will ensure the work she creates goes to great people that will love and value it.</p>

	<p>
	"An artist is only going to make so much work within their lifetime and this is one of the many reasons why I care about where my work lives.

	I want the work I create to go to great people and their families that love and value it.

	In light of this, I am inviting you to begin this application process to get to know YOU a little better and to hopefully share more about my world and process of creating art with you." </p>

	<a href="https://shantellmartin.typeform.com/to/mR7k2Q" type="button" class="btn">Get Started</a>
	</div>
	<div class="col-md-8">
	<div id="img-div">
	<img id="image" class="img-responsive" src= https://github.com/madelineuribes/madeline/blob/master/casey-and-candice_201810151220_201810151220.jpg?raw=true">
	<div id="img-caption"> New Clients </div>
	</div>

	</div>

	</div>
	</div>
	</div>

	</main>
	</body>

	// define lettering classes
	$(".ac, .ac-d").lettering();
	$(".al, .ac-l").lettering("lines");
	$(".aw, .aw-l").lettering("words");

	// check for lettering.js whitespaces
	$("span[class^='char']").each(function(){
	var str = $(this).text();

	if(str === null \|\| str.match(/^ *$/) !== null){
	$(this).empty();
	}
	});

	$("content").show(0).css({
	'display': 'flex',
	'justify-content': 'center',
	'align-items': 'center'
	});

	// define elements for blob thingy
	const CURSOR = $("#cBlob");
	const CLICKER = $("#cClick");
	const BLOBBER = $(".blobber");

	// set blob position
	$(document).mousemove(function(e) {
	CURSOR.css({
	top: e.pageY - CURSOR.height() / 2 + "px",
	left: e.pageX - CURSOR.width() / 2 + "px"
	});
	});

	// functions for cursor
	const initCursor = () => CURSOR.css("transform", "scale(1)");
	const setCursorHover = () => CURSOR.css("transform", "scale(2)");
	const removeCursorHover = () => CURSOR.css("transform", "scale(1)");
	const setCursorClick = e => {
	CLICKER.css({
	top: e.pageY - CLICKER.height() / 2 + "px",
	left: e.pageX - CLICKER.width() / 2 + "px"
	});
	CLICKER.addClass("clicked");
	};

	setTimeout(function(){
	initCursor();
	}, 1000)

	// non clickable elements
	BLOBBER.each(function() {
	$(this).on({
	mouseover: setCursorHover,
	mouseleave: removeCursorHover
	});

	if($(this).hasClass("link")){
	$(this)
	.click(setCursorClick)
	.click(function(){
	var href = $(this).data('href');

	setTimeout(function(){
	toggleNav();

	//window.location.href = href;
	var result = confirm("the " + href + " page will appear here");

	if (result) {
	window.location.reload(false);
	}
	}, 800);
	});
	}
	});

	$(".nav__icon").click(function() {
	toggleNav();
	});
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/lettering.js/0.7.0/jquery.lettering.min.js"></script>
	$white:#fff;
	$black:#000000;

	*{
	padding:0;
	margin:0;
	box-sizing:border-box;
	font-family: 'Poppins', sans-serif;
	}

	body {
	justify-content:center;
	align-items:center;
	min-height:100vh;
	position:relative;
	}

	h2 {
	font-weight:800;
	font-size:12vmin;
	padding-left: 28px;
	padding-bottom: 10px;
	line-height:1;
	color:$white;
	white-space:nowrap;
	-webkit-text-stroke:1pt $black;
	overflow: hidden;
	}

	p {
	font-family: arial, sans-serif;
	color:$black;
	overflow: hidden;
	}

	content {
	background:$black;
	}

	// CURSOR BLOB
	#cBlob {
	width: 50px;
	height: 50px;
	background-image: radial-gradient(
	circle farthest-corner at 10% 20%,
	#df5b5b 0%,
	#ffd16e 100%
	);
	background:#fff;
	background-size: 1600% 1600%;
	position: absolute;
	mix-blend-mode: difference;
	pointer-events: none;
	z-index: 60;
	transform:scale(0);
	transition: transform 0.8s ease;
	animation: blobRadius 6s ease-in-out infinite,
	blobBackground 15s ease infinite;
	}

	@media (hover: none) {
	#cBlob{
	display:none;
	}
	}

	// PAGE TRANSITION BLOB
	#cClick {
	width: 500px;
	height: 500px;
	background: #f1eff6;
	position: fixed;
	z-index: 60;
	pointer-events:none;
	transition: top 0.1s ease, left 0.1s ease, transform 1.8s ease,
	background 1.5s ease;
	animation: blobRadius 6s ease-in-out infinite,
	blobBackground 15s ease infinite;
	opacity: 0;
	transform: scale(0.1);

	&.clicked {
	opacity: 1;
	transform: scale(10);
	background: #28212e;
	}
	}

	.blobber{
	cursor:pointer;
	}

	.ac, .aw, .al, .ac-d, .aw-d, .al-d{
	span:blank{
	min-width:20px;
	}
	}

	// BLOB ANIMATIONS
	@keyframes blobRadius {
	0%,100% { border-radius: 43% 77% 80% 40% / 40% 40% 80% 80% }
	20% { border-radius: 47% 73% 61% 59% / 47% 75% 45% 73% }
	40% { border-radius: 46% 74% 74% 46% / 74% 58% 62% 46% }
	60% { border-radius: 47% 73% 61% 59% / 40% 40% 80% 80% }
	80% { border-radius: 50% 70% 52% 68% / 51% 61% 59% 69% }
	}
	@keyframes blobBackground {
	0%,100% { background-position: 0% 50% }
	50% { background-position: 100% 50% }
	}

	content{
	height:100vh;
	width:100%;
	overflow:hidden;
	display:none;

	#title{
	position: absolute;
	z-index: 70;

	h1{
	font-weight:800;
	font-size:12vmin;
	margin:0;
	line-height:1;
	color:$white;
	white-space:nowrap;
	animation:cutoff-top 1s forwards;
	-webkit-text-stroke:1pt $black;
	overflow: hidden;

	$cutoff:60%;
	clip-path:polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);

	&:last-child{
	position:absolute;
	top:0;
	left:0;
	-webkit-text-stroke:1pt $black;
	color:transparent;
	clip-path:polygon(0% 100%, 100% 100%, 100% 100%, 0% 100%);
	animation:cutoff-bottom 1s forwards;
	}

	@keyframes cutoff-top{
	to{
	clip-path:polygon(0% 0%, 100% 0%, 100% $cutoff, 0% $cutoff);
	}
	}
	@keyframes cutoff-bottom{
	to{
	clip-path:polygon(0% $cutoff, 100% $cutoff, 100% 100%, 0% 100%);
	}
	}
	}
	}
	}

	// ANIMATIONS
	.a{
	&c, &l, &w {
	// loop for offsetting nodes
	span {
	animation: rollIn 0.3s forwards;
	opacity: 0;
	transform: translateY(-8px) rotate(-5deg);
	display: inline-block;

	@for $i from 1 through 50 {
	&:nth-child(#{$i}) {
	animation-delay: #{$i * 0.05}s;
	}
	}

	&:empty{
	width:15px;
	}
	}
	}
	&c-d, &l-d, &w-d{
	// loops for offsetting nth-childs, not only nodes
	@for $i from 1 through 50{
	&:nth-child(#{$i}){
	transition:transform 0.5s ease #{$i * 0.15}s;

	span{
	animation: rollIn 0.3s forwards;
	opacity: 0;
	transform: translateY(-8px) rotate(-5deg);
	display: inline-block;

	@for $f from 1 through 50 {
	&:nth-child(#{$f}) {
	animation-delay: #{($f * 0.05) + ($i * 0.15)}s;
	}
	}

	&:empty{
	width:15px;
	}
	}
	}
	}
	}
	&l, &l-d{
	span{
	animation: rollIn 0.7s forwards;
	}
	}
	&w, &w-d{
	span{
	animation: rollIn 0.5s forwards;
	}
	}
	}

	@keyframes rollIn {
	to{
	transform: translateY(0) rotate(0);
	opacity: 1;
	}
	}


	.parallax {
	/* The image used */
	background-image: url("https://github.com/madelineuribes/madeline/blob/master/Martin-Shantell.jpg?raw=true");

	/* Set a specific height */
	height: 100vh;

	/* Create the parallax scrolling effect */
	background-attachment: fixed;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	}

	#section-info {
	padding-top: 5em;
	}

	#tribute-link {
	font-weight: 900;
	color: black;
	text-decoration: none;
	}

	#tribute-link:visited,
	#tribute-link:active, {
	font-weight: 900;
	color: black;
	text-decoration: none;
	}

	#tribute-link:hover {
	text-decoration: underline;
	}

	#section03 {
	padding-top: 30px;
	}

	.img-responsive {
	margin: 0 auto;
	}

	#image {
	max-width: 100%;
	height: auto;
	position: center;
	}

	#img-caption {
	font-family: arial, sans-serif;
	color:$black;
	}

	.btn {
	font-family: arial;
	font-size: 15px;
	margin-top: 15px;
	width: 160px;
	border-radius: 0px;
	background-color: black;
	color: white;
	-webkit-transition-duration: 0.4s; /* Safari */
	transition-duration: 0.4s;
	}

	.btn:hover {
	background-color: white;
	border: 2px solid black;
	color: black;
	}