Abi Paints

In this example below you will see how to do a Abi Paints with some HTML / CSS and Javascript

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

Technologies

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

<head>
  <meta charset="UTF-8">
  <title>Abi Paints</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">

<link href="https://fonts.googleapis.com/css?family=Anton|Arvo" rel="stylesheet">

<link href="https://fonts.googleapis.com/css?family=Sacramento" rel="stylesheet">

<link href="https://fonts.googleapis.com/css?family=Diplomata" rel="stylesheet">

<script src='https://www.google.com/recaptcha/api.js'></script>
  
  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'>

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

  
</head>

<body>

  <!-- NavBar -->
<nav class="navbar navbar-light navbar-toggleable-md">
 <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarBreakPoint" aria-controls="navbarBreakPoint" aria-expanded="false" aria-label="Toggle Navigation">
		<span class="navbar-toggler-icon"></span>
	</button>
 <div class="navbar-brand">
  Abiola Idowu <small>Artist / Painter/ Sculptor</small>
 </div>
 <div class="collapse navbar-collapse justify-content-end" id="navbarBreakPoint">
  <ul class="navbar-nav">
   <li class="nav-item active" data-toggle="collapse" data-target="#navbarBreakPoint">
    <a class="nav-link" id="nav_first">
					Home
					<span class="sr-only">(current)</span>
		</a>
   </li>
   <li class="nav-item">
    <a class="nav-link" id="nav_second" data-toggle="collapse" data-target="#navbarBreakPoint">
					Gallery
		</a>
   </li>
   <li class="nav-item">
    <a class="nav-link" id="nav_third" data-toggle="collapse" data-target="#navbarBreakPoint">
					CV
				</a>
   </li>
   <li class="nav-item">
    <a class="nav-link" id="nav_fourth" data-toggle="collapse" data-target="#navbarBreakPoint">
					Process
				</a>
   </li>
   <li class="nav-item">
    <a class="nav-link" id="nav_fifth" data-toggle="collapse" data-target="#navbarBreakPoint">
					Contact
				</a>
   </li>
   <li class="nav-item">
    <a class="nav-link" id="nav_sixth" data-toggle="collapse" data-target="#navbarBreakPoint">
					Purchase <i class="fa fa-cart-arrow-down" aria-hidden="true"></i>
				</a>
   </li>
  </ul>
 </div>
</nav>
<!-- ^NavBar^ -->

<!-- Container Class -->
<div class="container-fluid" id="main_bg">

 <!-- Home Section -->
 <div id="section_home">

  <!-- HOME MOTTO -->
  <div class="row motto fade">
   <div class="col text-center">
    <h2 class="motto-txt">
					Celebrating the dignity, valor, vibrancy of life, and color that women add to our society !
				</h2>
   </div>
  </div>
  <!-- ^HOME MOTTO^ -->

  <!-- HOME CAROUSEL -->
  <div class="d-flex justify-content-center carousel-top">
   <div id="carouselControls" class="carousel slide" data-ride="carousel">
    <div class="carousel-inner" role="listbox">
     <div class="carousel-item active">
      <img class="d-block img-fluid" src="http://conorhinchee.tech/WorkingPictures/Abi_Paints/Carousel1XL.png" alt="First slide" />
     </div>
     <div class="carousel-item">
      <img class="d-block img-fluid" src="http://conorhinchee.tech/WorkingPictures/Abi_Paints/Carousel2XL.png" alt="Second slide" />
     </div>
     <div class="carousel-item">
      <img class="d-block img-fluid" src=" http://conorhinchee.tech/WorkingPictures/Abi_Paints/Carousel4XL.png" alt="Third slide" />
     </div>
    </div>
    <a class="carousel-control-prev" href="#carouselControls" role="buton" data-slide="prev">
     <span class="carousel-control-prev-icon" aria-hidden="true">	</span>
     <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next" href="#carouselControls" role="button" data-slide="next">
     <span class="carousel-control-next-icon" aria-hidden="true"></span>
     <span class="sr-only">Next</span>
    </a>
   </div>
  </div>
  <hr />
  <!-- ^HOME CAROUSEL^ -->

  <!-- HOME ABOUT HEADER -->
  <div class="row about-header fade">
   <div class="col text-center">
    <h1 class="header">About Me</h1>
   </div>
  </div>
  <!-- ^HOME ABOUT HEADER^ -->

  <!-- HOME ABOUT TXT -->
  <div class="row about-txt fade">
   <div class="col-4 text-center">
    <img class="img-fluid img-thumbnail profile-img" src="http://conorhinchee.tech/WorkingPictures/Abi_Paints/Abi.jpg" alt="Idowu Biola Profile Picture" />
   </div>

   <div class="col-8">
    <p class="about-text">
     Abiola Idowu, born in 1973, is a Sculptor and Painter, trained at the Ahmadu Bello University Zaira, and has an M.A from the University of Lagos. A full time studio Artist, Abiola has developed a technique called OPO, meaning Pillar in the Yoruba dialect
     of South Western Nigeria.
    </p>
   </div>
  </div>
  <hr />
  <!-- ^HOME ABOUT TXT^ -->

  <!-- HOME ACHIEVEMENTS HEADER -->
  <div class="row achievement-header fade">
   <div class="col text-center">
    <h1 class="header"><i class="fa fa-trophy" aria-hidden="true"></i>
			<span id="achievement_header">Achievements</span> <i class="fa fa-trophy" aria-hidden="true"></i>
</h1>
   </div>
  </div>
  <!-- ^HOME ACHIEVEMENTS HEADER^ -->

  <!-- HOME ACHIEVEMENTS -->
  <div class="row achievements-txt d-flex justify-content-center">
   <div class="col-10 black-border" id="achievements_txt">
    <ul id="achievement_section1">
     <li class="achievement-list"><span class="year">2002</span>: He won a scholarship by the National Society Sculpture (NSS), New York He has exhibited widely both at home and abroad, showcasing new trend in Visual Arts both Sculpture and Painting. He has co-ordinated more than
      300 students in Art tutelage under the Abiolaart Foundation in Abuja.</li>
     <li class="achievement-list"><span class="year">2009</span>: Third place winner in Nigeria -Egypt competition on the occasion of the celebration of the Egyptian day 2009.</li>
     <li class="achievement-list"><span class="year">2009</span>: First place winner in Nigeria-Italy: The art of friendship a collaborative exhibition between the National Gallery of Art, Nigeria, and the Embassy of Itally in Nigeria on the occasion of the celebration of the Italian
      day 2009 </li>
     <li class="achievement-list"><span class="year">2009</span>: Abiola developed a technique called OPO, meaning (Pillar in the Yoruba dialect of South West Nigeria).</li>
     <li class="achievement-list"><span class="year">2009</span>: Exhibiting Artist at the 2nd African Regional Summit and Exhibition on Visual Arts (ARESUVA)</li>
    </ul>
    <ul id="achievement_section2">
     <li class="achievement-list"><span class="year">2010</span>: exhibiting in South Africa WORLD CUP</li>
     <li class="achievement-list"><span class="year">2010</span>: Bronze medalist LAGOS 3RD BLACK festival</li>
     <li class="achievement-list"><span class="year">2010</span>: Vision of Nigeria</li>
     <li class="achievement-list"><span class="year">2010</span>: Outstanding exhibition celebrating 50th anniversary of Italian day</li>
     <li class="achievement-list"><span class="year">2011</span>: Abiola Idowu Foundation 2011 Exhibition in New York Art</li>
     <li class="achievement-list"><span class="year">2013</span>: Exhibition in Kenyan 2012 Society of Nigeria artist Abuja CHAPTER Exhibition in HILTON AND SILVER BIRD GALLERIA Abuja</li>
     <li class="achievement-list"><span class="year">2013</span>: April: Art Residency/Exhibition in Nairobi Kenya.</li>
    </ul>
    <ul id="achievement_section3">
     <li class="achievement-list"><span class="year">2013/2014</span>: Art Exhibition in Oriental Hotel Ikoyi Lagos Nigeria</li>
     <li class="achievement-list"><span class="year">2014 May </span>:Art House Auction/Exhibition</li>
     <li class="achievement-list"><span class="year">2015 </span>: November, 70th UN Anniversary/Exhibition</li>
     <li class="achievement-list"><span class="year">2016</span>: September, Cafe shop Columbus.</li>
    </ul>
    <button class="btn btn-primary btn-block" id="less_btn">Show Less</button>
   </div>
  </div>
  <!-- ^HOME ACHIEVEMENTS^ -->

  <!-- PAGE LINKS -->
  <div class="row page-navigation fade">
   <div class="col-4 text-center">
    <h3 class="header">
				<i class="fa fa-picture-o" aria-hidden="true"></i>
				<a href="javascript:void(0)" onclick="galleryLoad()">View My Work!</a> 
			</h3>
   </div>
   <div class="col-4 text-center">
    <h3 class="header">
				<i class="fa fa-phone" aria-hidden="true"></i>
				<a href="javascript:void(0)" onclick="contactLoad()">Contact Me!</a>
			</h3>
   </div>
   <div class="col-4 text-center">
    <h3 class="header">
				<i class="fa fa-shopping-cart" aria-hidden="true"></i>
				<a href="" target="_blank">Purchase My Work!</a>
			</h3>
   </div>
  </div>
  <!-- PAGE LINKS -->
 </div>
 <!-- ^Home Section^ -->

 <!-- Gallery Section-->
 <div id="section_gallery">
  <!-- GALLERY HEADER -->
  <div class="row gallery-header-row fade">
   <div class="col text-center">
    <h1 class="gallery-header" id="gallery-header">Gallery</h1>
   </div>
  </div>
  <!-- ^GALLERY HEADER^ -->

  <!-- GALLERY NAV -->
  <div class="row main-gallery" id="main_gallery">
   <div class="col-6 text-center">
    <h3 class="header">Recent Works</h3>
    <img class="img-fluid img-thumbnail gallery-nav" id="view_recentworks" src=" http://conorhinchee.tech/WorkingPictures/Abi_Paints/Carousel3.jpg" alt="Gallery Thumbnail" />
   </div>
   <div class="col-6 text-center">
    <h3 class="header">July 2017 Exhibit</h3>
    <img class="img-fluid img-thumbnail gallery-nav" id="view_julyexhibit" src="http://conorhinchee.tech/WorkingPictures/Abi_Paints/Carousel4.jpg" alt="Gallery Thumbnail" />
   </div>
  </div>
  <!-- ^GALLERY NAV^ -->

  <!-- Gallery View Section -->
  <div id="gallery_pictures">

		<!-- Modal -->
		<div class="modal" id="image_modal" tabindex="-1" role="dialog" aria-labelledby="image_modal" aria-hidden="true">
			<div class="modal-dialog modal-lg" role="document">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
					</div>
					<div class="modal-body">
						<img src="" class="imageModalSource img-fluid" style="width: 100%" />
						<h4 class="header text-center" id="modal_txt"></h4>
					</div>
				</div>
			</div>
		</div>
		
		
   <!-- RECENT WORKS IMAGES -->
   <div class="row" id="recent_works_imgs">
    <div class="col-4 text-center">
     <img class="img-fluid img-thumbnail gallery-view" src="http://conorhinchee.tech/WorkingPictures/Abi_Paints/Carousel1.jpg" alt="Something" />
    </div>
    <div class="col-4 text-center">
     <img class="img-fluid img-thumbnail gallery-view" src="http://conorhinchee.tech/WorkingPictures/Abi_Paints/Carousel2.jpg" alt="Something" />
    </div>
    <div class="col-4 text-center">
     <img class="img-fluid img-thumbnail gallery-view" src="http://conorhinchee.tech/WorkingPictures/Abi_Paints/Carousel3.jpg" alt="Something" />
    </div>
   </div>
   <!-- ^RECENT WORKS IMAGES^ -->

   <!-- JULY EXHIBIT IMAGES -->
   <div class="row" id="july_exhibit">
    <div class="col text-center">
     <h3> Doesn't look like anything is here.. Tell the Developer to get off his ass! </h3>
    </div>
   </div>
   <!-- ^JULY EXHIBIT IMAGES^ -->


   <div class="row back-button">
    <div class="col">
     <button class="btn btn-primary btn-block" id="back_button"> Back to Main Gallery</button>
    </div>
   </div>

  </div>
  <!-- ^Gallery View Section^ -->

 </div>
 <!-- ^Gallery Section^ -->

	<!-- CV Section -->
	<div id="section_cv">
		<div class="row cv-header">
			<div class="col text-center">
				<h3 class="header"> There doesn't seem to be anything here.... Tell the Developer to get off his ass!</h3>
			</div>
		</div>
	</div>
	<!-- CV Section --> 

	<!-- Process Section -->
	<div id="section_process">
		
		<!-- PROCESS HEADER -->
		<div class="row process-header-row">
			<div class="col text-center">
				<h1 class="process-header">My Process</h1>
			</div>
		</div>
		<!-- ^PROCESS HEADER^ -->
		
		<div class="row process-txt">
			<div class="col text-center">
				<p class="">Abiola Idowu’s work focuses primarily on the female form, represented in a stylized manner reminiscent of his Nigerian home. The women are bathed in beauty by the painter’s hand, and within each painting a joyous moment is captured. He juxtaposes bright colors next to earthy tones which are then overlaid by intricate mark making. His latest mark making is less geometric than his previous works, utilizing curved lines like those of a fingerprint, a style that the artist refers to as palmistry. The use of this mark is specific and relates to the individuality of the subject matter, as well as the use of the fingerprint for identification.
The inspiration for these works brings light from a dark moment in Abiola’s life; the passing of his mother. Realizing the beauty of the woman who brought him into this world, and all that she had done for him throughout his life moved Abiola to create this series in homage to her. It is one way in which he can make amends for everything he yearned to do for her before her time on this planet was cut short. Her death gave Abiola not just a greater appreciation for his mother, but for all women and the grace, joy, and strength they exude to others.</p>
			</div>
		</div>
		
	</div>
	<!-- ^Process Section^ -->
	
	<div id="section_contact">
		<div class="row">
			<div class="col text-center">
				<h1 class="header">Contact Me!</h1>
				<h5 class="header"><small>Comission a custom piece, Talk to Me about art, Ask me a question</small></h5>
			</div>
		</div>
		<div class="row flex justify-content-center ">
			<div class="col-8 text-center">
				<form class="form-vertical" role="form">
					<label for="InputEmail">Email Address</label>
					<input type="email" class="form-control" id="InputEmail" placeholder = "Your Email" />
					<label for="InputName">Your Name</label>
					<input type="name" class="form-control" id="InputName" placeholder = "Name" />
					<label for="InputMessage"> Your Message</label>
					<textarea class="form-control" rows="4" id="InputMes sage" placeholder= "Your Message" > </textarea>
					<div class="g-recaptcha" data-sitekey="6LdxeSQUAAAAAJBj-R2bcQ8Elh_m9oGp2rdoWF5A"></div>
					<button class="btn btn-primary">Submit</button>
				</form>	
			</div>
		</div>
	</div>
	
 <!-- Footer Section -->
 <div class="row footer">
  <div class="col-12 text-center">
   <hr />
   <i class="fa fa-facebook-official" aria-hidden="true"></i>
   <i class="fa fa-instagram" aria-hidden="true"></i>
   <span class="footer-txt">Idowu Biola &copy; <span>2017</span></span>
   <i class="fa fa-twitter-square" aria-hidden="true"></i>
   <i class="fa fa-google-plus-square" aria-hidden="true"></i>
  </div>
 </div>
 <!-- ^Footer Section^ -->

</div>
<!-- ^Container Class^ -->
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.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/tether/1.4.0/js/tether.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js'></script>

  

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




</body>

</html>

/*Downloaded from https://www.codeseek.co/captnstarburst/abi-paints-LLmeJM */
body {
  background: #bfafb2;
}

label {
  font-family: "Arvo", serif;
}

input {
  width: 100%;
}

.navbar {
  background: #00468c;
  color: #fff;
}

/* Navbar Brand & Hover */
.navbar-light .navbar-brand {
  color: #d6d6d6;
  font-family: "Anton", sans-serif;
  font-size: 2.5em;
  text-shadow: 4px 2px 2px black;
}
.navbar-light .navbar-brand small {
  color: #fff;
  font-size: 0.5em;
  padding-left: 5%;
}

.navbar-light .navbar-brand:hover {
  color: #d6d6d6;
}

/* Navbar Link & Hover */
.nav-link {
  font-family: "Arvo", serif;
  font-size: 1.1em;
  color: #d6d6d6 !important;
}

.nav-link:hover {
  color: black !important;
  text-decoration: underline !important;
  cursor: default;
}

.active {
  text-decoration: underline;
}

.active:hover {
  text-decoration: none;
}

/* ^Navbar Link & Hover^ */
/* Font & Headers */
button {
  cursor: pointer;
}

.header {
  font-family: "Anton", sans-serif;
}

.motto-txt {
  font-family: "Sacramento", cursive;
  color: black;
  font-weight: bold;
  text-shadow: 5px 1px 1px white;
  padding-top: 10%;
  font-size: 3em;
}

.about-header {
  padding-top: 3%;
}

.about-text {
  font-family: "Arvo", serif;
  text-indent: 50px;
  padding-top: 4%;
  font-size: 2em;
}

.achievement-header {
  padding-top: 3%;
  cursor: pointer;
}

.achievements-txt {
  padding-top: 1%;
  font-family: "Arvo", serif;
}

.page-navigation {
  padding-top: 8%;
}
.page-navigation a {
  color: black;
}
.page-navigation a:hover {
  color: #00468c;
}

.achievement-list {
  margin: 1em;
  margin-left: 3em;
  list-style: none;
}

.achievement-list:before {
  content: "\f091";
  font-family: "FontAwesome";
  float: left;
  margin-left: -1.5em;
  color: #0074d9;
}

.year {
  text-decoration: underline;
  font-weight: bold;
}

.gallery-header-row {
  padding-top: 10%;
  padding-bottom: 3%;
}

.gallery-header {
  font-family: "Diplomata", cursive;
  font-size: 4em;
}

.cv-header {
  padding-top: 10%;
}

.process-header-row {
  padding-top: 5%;
}

.process-header {
  font-family: "Diplomata", cursive;
  font-size: 4em;
  padding-bottom: 5%;
}

/* ^Font & Headers^ */
/* Carousel */
.carousel-top {
  padding-top: 5%;
}

.carousel-inner > .carousel-item > img,
.carousel-inner > .carousel-item > a > img {
  display: block;
  height: 400px;
  min-width: 100%;
  width: 100%;
  max-width: 100%;
  line-height: 1;
}

/* ^Carousel^ */
.black-border {
  border-left: 5px solid black;
}

.back-button {
  padding-top: 3%;
}

.g-recaptcha {
  display: auto 0;
}

.dark-background {
  background-color: #1b1b1b;
}

.white-font {
  color: #fff;
}

.regular-background {
  background: #bfafb2;
}

.footer {
  padding-top: 5%;
}
.footer i {
  font-size: 1.5em;
}
.footer .footer-txt {
  font-family: "Sacramento", cursive;
}

.gallery-nav {
  width: 70%;
  cursor: pointer;
}

/* Responsive */
@media screen and (min-width: 2560px) {
  /* Navbar */
  .navbar-light .navbar-brand {
    font-size: 5em;
  }

  .nav-link {
    font-size: 2.5em;
  }

  /* ^Navbar^ */
  /* Carousel */
  .carousel-inner > .carousel-item > img,
  .carousel-inner > .carousel-item > a > img {
    height: 1000px;
  }

  /* ^Carousel^ */
  .motto-txt {
    font-size: 5.5em;
  }

  .header {
    font-size: 5em;
  }

  .gallery-header {
    font-size: 7em;
  }

  .process-header {
    font-size: 7em;
  }

  .about-text {
    font-size: 4em;
    text-indent: 200px;
  }

  .achievements-txt {
    font-size: 3em;
  }

  .process-txt {
    font-size: 4em;
  }

  .footer .footer-txt {
    font-size: 3em;
  }
  .footer i {
    font-size: 3em;
  }
}
@media screen and (max-width: 768px) {
  .about-text {
    font-size: 1.5em;
  }
}
@media screen and (max-width: 425px) {
  .navbar-light .navbar-brand {
    font-size: 1.8em;
  }

  .gallery-header .process-header {
    font-size: 3em;
  }

  .motto-txt {
    font-size: 2em;
  }

  .about-text {
    font-size: 1em;
  }

  .profile-img {
    margin-top: 50%;
  }
}
@media screen and (max-width: 375px) {
  .navbar-light .navbar-brand {
    font-size: 1.5em;
  }

  .carousel-inner > .carousel-item > img,
  .carousel-inner > .carousel-item > a > img {
    height: 200px;
  }

  .about-text {
    text-indent: 25px;
  }
}
@media screen and (max-width: 320px) {
  .navbar-light .navbar-brand {
    font-size: 1.3em;
  }

  .achievement-header .header {
    font-size: 2em;
  }

  .gallery-header .process-header {
    font-size: 2.5em;
  }
}
/* ^Responsive^ */


/*Downloaded from https://www.codeseek.co/captnstarburst/abi-paints-LLmeJM */
let index = "Home";
let galleryView = false;

$(document).ready(function() {
	homeLoad();
});

$(window).on("load", function() {
	$(window)
		.scroll(function() {
			var windowBottom = $(this).scrollTop() + $(this).innerHeight();
			$(".fade").each(function() {
				/* Check the location of each desired element */
				var objectBottom = $(this).offset().top + $(this).outerHeight();

				/* If the element is completely within bounds of the window, fade it in */
				if (objectBottom < windowBottom) {
					//object comes into view (scrolling down)
					if ($(this).css("opacity") == 0) {
						$(this).fadeTo(500, 1);
					}
				} else {
					//object goes out of view (scrolling up)
					if ($(this).css("opacity") == 1) {
						$(this).fadeTo(500, 0);
					}
				}
			});
		})
		.scroll(); //invoke scroll-handler on page-load
});

function homeLoad() {
	$("#section_home").show();
	$("#section_gallery").hide();
	$("#section_cv").hide();
	$("#section_process").hide();
	$("#section_contact").hide();
	
	$("#nav_first").text("Home");
	$("#nav_second").text("Gallery");
	$("#nav_third").text("CV");
	$("#nav_fourth").text("Process");
	$("#nav_fifth").text("Contact");

	$("#achievements_txt").hide();
	$("#achievement_section1").hide();
	$("#achievement_section2").hide();
	$("#achievement_section3").hide();
	$("#achievement_header").text("Click for Achievements");
}

function galleryLoad() {
	
	index ="Gallery";
	
	$("#section_home").hide();
	$("#section_cv").hide();
	$("#section_process").hide();
	$("#section_contact").hide();
	$("#gallery_pictures").hide();
	$("#recent_works_imgs").hide();
	$("#july_exhibit").hide();
	$("#section_gallery").fadeIn();

	$("#nav_first").text("Gallery");
	$("#nav_second").text("Home");
	$("#nav_third").text("CV");
	$("#nav_fourth").text("Process");
	$("#nav_fifth").text("Contact");
}

function cvLoad(){
	$("#section_home").hide();
	$("#section_gallery").hide();
	$("#section_process").hide();
	$("#section_cv").show();
	$("#section_contact").hide();
	
	
	$("#nav_first").text("CV");
	$("#nav_second").text("Home");
	$("#nav_third").text("Gallery");
	$("#nav_fourth").text("Process");
	$("#nav_fifth").text("Contact");
	
}

function processLoad(){
	$("#section_home").hide();
	$("#section_gallery").hide();
	$("#section_cv").hide();
	$("#section_contact").hide();
	$("#section_process").show();
	
	$("#nav_first").text("Process");
	$("#nav_second").text("Home");
	$("#nav_third").text("Gallery");
	$("#nav_fourth").text("CV");
	$("#nav_fifth").text("Contact");
}

function contactLoad(){

	index ="Contact";
	
	$("#section_home").hide();
	$("#section_gallery").hide();
	$("#section_cv").hide();
	$("#section_process").hide();
	$("#section_contact").show();
	
	$("#nav_first").text("Contact");
	$("#nav_second").text("Home");
	$("#nav_third").text("Gallery");
	$("#nav_fourth").text("CV");
	$("#nav_fifth").text("Process");
}

function removeClasses(){
	$("body").removeClass("dark-background");
	$("#gallery-header").removeClass("white-font");
	$(".footer").removeClass("white-font");
	$("#gallery_pictures").hide();
	$("#recent_works_imgs").hide();
	$("#july_exhibit").hide();
	$("#main_gallery").show();
}

function addClasses(){
	$("body").addClass("dark-background");
	$("#gallery-header").addClass("white-font");
	$(".footer").addClass("white-font");
}

$("#achievement_header").on("click", function() {
	$("#achievement_header").text("Achievements");
	$("#achievements_txt").show();
	$("#achievement_section1").fadeIn(3000);
	$("#achievement_section2").fadeIn(6000);
	$("#achievement_section3").fadeIn(9000);
});

$("#less_btn").on("click", function() {
	$("#achievements_txt").hide();
	$("#achievement_header").text("Click for Achievements");
});

$("#view_recentworks").on("click", function() {
	
	galleryView = true;
	addClasses();
	$("#main_gallery").hide();
	$("#gallery_pictures").show();
	$("#recent_works_imgs").show();
});

$("#view_julyexhibit").on("click", function() {
	
	galleryView = true;
	$("body").addClass("dark-background");
	$("#gallery-header").addClass("white-font");
	$(".footer").addClass("white-font");
	$("#main_gallery").hide();
	$("#gallery_pictures").show();
	$("#july_exhibit").show();
});

$("#back_button").on("click", function() {
	
	galleryView = false;
	removeClasses();
	
});

$("#nav_second").on("click", function() {
	
	if(galleryView){
		removeClasses();
		galleryView="false";
	}
	
	switch (index) {
		case "Home":
			//Button is for Gallery
			galleryLoad();
			index = "Gallery";
			break;

		case "Gallery":
		case "CV":
		case "Process":	
		case "Contact":	
			//Button is for Home
			homeLoad();
			index = "Home";
			break;
		
			
	}
});

$("#nav_third").on("click", function(){
	
	if(galleryView){
		removeClasses();
		galleryView = false;
	}
	
	switch (index){
		case "Home":
		case "Gallery":	
			//Button is for CV
			cvLoad();
			index = "CV";
			break;
	
		case "CV":
		case "Process":
		case "Contact":
			//Button is for Gallery
			galleryLoad();
			index = "Gallery";
			break;
	}
});

$("#nav_fourth").on("click", function(){
	
	if(galleryView){
		removeClasses();
		galleryView = false;
	}
	
	switch(index){
		case "Home":
		case "Gallery":
		case "CV":	
								processLoad();
								index ="Process"
								break;
			
		case "Process":
		case "Contact":	
								cvLoad();
								index ="CV";
								break;
	}
});

$("#nav_fifth").on("click", function(){
	if(galleryView){
		removeClasses();
		galleryView = false;
	}
	
	switch(index){
	
			case "Home":
			case "Gallery":
			case "CV":
			case "Process":
			
					contactLoad();
					index ="Contact";
					break;
			
		case "Contact":
					processLoad();
					index ="Process";
					break;
	}
});

$(".gallery-view").on("click",function(){
	$('.imageModalSource').attr('src', $(this).attr('src'));
	$('#modal_txt').text($(this).attr('alt'))
	$("#image_modal").modal('show');
});

Comments