Click here to Skip to main content
15,867,686 members
Please Sign up or sign in to vote.
1.00/5 (1 vote)
See more:
when the user is in the index page, there is a drop-down list that can be shown, when the user click on one of them, a page transition then happens, for example when the user click contact us, the transition happens, the user is then in the contact is page, at the top of the page there is a close button, but when the user on it and goes back to the index page the drop-down list doesn't work anymore.

index page code:
<!doctype html>
<html lang="en" class="no-js">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
	<link href='https://unpkg.com/boxicons@2.0.9/css/boxicons.min.css' rel='stylesheet'>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
	<link rel="stylesheet" href="index.css">
	<link rel="stylesheet" href="css/reset.css">
	<link rel="stylesheet" href="css/style.css">
	<script src="js/modernizr.js"></script>
  	
	<title>Home page test</title>
</head>
<body class="cd-index">
<main>
	<div>
		<div class="cd-index cd-main-content">
			<div class="container ct">   
				<div class="sidenav">
				  <img src="logo.png" alt="logo" class="logo">
				  <!--------------------------------------------------->
				  <div class="search">
					class="bx bx-search" href="index.html" data-type="page-transition"> Features of LED Lighting</a>
					<a href="technology/glossary.html" class="info cd-btn" data-type="page-transition">^__i class="fa fa-cogs"> Glossary</a>
				  </div>
				  <!---------------------------------------------------->
				  <a href="FAQ/FAQ.html" class="a cd-btn" data-type="page-transition">
					^__i class="fa fa-question-circle"> FAQ
				  </a>
				  <!---------------------------------------------------->
				  <a href="about.html" class="a cd-btn" data-type="page-transition">
					^__i class="fa fa-envelope-o"> Contact
				  </a>
				</div>
			  </div>
		</div>
	</div>
</main>

<div class="cd-cover-layer"></div>
<div class="cd-loading-bar"></div>
<script src="js/jquery-2.1.1.js"></script>
<script src="js/main.js"></script>
<script>
    easy_background("body",
      {
        slide: ["img/msphoto16.jpg", "img/slide2.jpg", "img/slide3.jpg", "img/slide4.jpg", "img/slide5.jpg"],
        delay: [5000, 5000, 5000, 5000, 5000]
      }
    );
  </script>
</body>
</html>


contact us code:
<!doctype html>
<html lang="en" class="no-js">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">

	<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,700' rel='stylesheet' type='text/css'>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
	<link href='https://unpkg.com/boxicons@2.0.9/css/boxicons.min.css' rel='stylesheet'>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
	<link rel="stylesheet" href="css/reset.css">
	<link rel="stylesheet" href="css/style.css">
	<link rel="stylesheet" href="index.css">
	<script src="js/modernizr.js"></script>
  	
	<title>About | CodyHouse</title>
</head>
<body class="cd-about">
	<main>
		<div class="cd-about cd-main-content">
			<div>
				<a class="cd-btn" href="index.html" data-type="page-transition">← Go back</a>

				<div class="container ct">
					<div class="main">
					  <div class="row">
						<div class="column">
						  <div id="title">Contact us</div>
						  <hr>
						  <br>
						  <div>Cape Town (Head Office & Factory)</div>
						  <br>          
						  <div><a>address:</a> 24 station road, montague gardens, cape town, 7441, south africa</div>          
						  <div><a>tel:</a> +27 21 552 3394</div>          
						  <div><a>fax:</a> +27 21 552 3794</div>          
						  <div><a>cell:</a> +27 72 296 1983</div>          
						  <div><a>email:</a> info@electroniclights.co.za</div>          
						  <div><a>technical enquiries:</a> support@electroniclights.co.za</div>          
						  <div><a>order enquiries:</a> sales@electroniclights.co.za</div>          
						</div>
						<div class="column">
							<div id="title">Enquiry</div>
							<hr>
							<br/>
							<div class="wrapper">
								<div class="inner_left column">
										<label class="form-group">
											<input type="text" class="form-control" id="name" name="name" required>
											<span for="name">Your Name</span>
											
										</label>
										<label class="form-group">
											<input type="text" class="form-control"  id="email" name="mail" required>
											<span for="email">Your Mail</span>
											
										</label>
										<label class="form-group" >
											<textarea id="message" class="form-control" name="message" required></textarea>
											<span for="message">Your Message</span>
											
										</label>
								</div>
								<div class="inner_right column1">
								  <button class="button1" onclick="sendMail()">I</button>
								  <button class="button1" onclick="sendMail()">S</button>
								  <button class="button1" onclick="sendMail()">T</button>
								</div>
							</div>
						</div>
					  </div>
					</div>
				</div>

			</div>
		</div>
	</main>
	<div class="cd-cover-layer"></div>
	<div class="cd-loading-bar"></div>
<script src="js/jquery-2.1.1.js"></script>
<script src="js/main.js"></script>
<script>
    easy_background("body",
      {
        slide: ["img/msphoto16.jpg", "img/slide2.jpg", "img/slide3.jpg", "img/slide4.jpg", "img/slide5.jpg"],
        delay: [5000, 5000, 5000, 5000, 5000]
      }
    );
  </script>
</body>
</html>


the javascript code:
jQuery(document).ready(function(event){
  var isAnimating = false,
    newLocation = '';
    firstLoad = false;
  
  //trigger smooth transition from the actual page to the new one 
  $('main').on('click', '[data-type="page-transition"]', function(event){
    event.preventDefault();
    //detect which page has been selected
    var newPage = $(this).attr('href');
    //if the page is not already being animated - trigger animation
    if( !isAnimating ) changePage(newPage, true);
    firstLoad = true;
  });

  //detect the 'popstate' event - e.g. user clicking the back button
  $(window).on('popstate', function() {
  	if( firstLoad ) {
      /*
      Safari emits a popstate event on page load - check if firstLoad is true before animating
      if it's false - the page has just been loaded 
      */
      var newPageArray = location.pathname.split('/'),
        //this is the url of the page to be loaded 
        newPage = newPageArray[newPageArray.length - 1];

      if( !isAnimating  &&  newLocation != newPage ) changePage(newPage, false);
    }
    firstLoad = true;
	});

	function changePage(url, bool) {
    isAnimating = true;
    // trigger page animation
    $('body').addClass('page-is-changing');
    $('.cd-loading-bar').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(){
    	loadNewContent(url, bool);
      newLocation = url;
      $('.cd-loading-bar').off('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend');
    });
    //if browser doesn't support CSS transitions
    if( !transitionsSupported() ) {
      loadNewContent(url, bool);
      newLocation = url;
    }
	}

	function loadNewContent(url, bool) {
		url = ('' == url) ? 'index.html' : url;
  	var newSection = 'cd-'+url.replace('.html', '');
  	var section = $('<div class="cd-main-content '+newSection+'"></div>');
  		
  	section.load(url+' .cd-main-content > *', function(event){
      // load new content and replace <main> content with the new one
      $('main').html(section);
      //if browser doesn't support CSS transitions - dont wait for the end of transitions
      var delay = ( transitionsSupported() ) ? 1200 : 0;
      setTimeout(function(){
        //wait for the end of the transition on the loading bar before revealing the new content
        ( section.hasClass('cd-about') ) ? $('body').addClass('cd-about') : $('body').removeClass('cd-about');
        $('body').removeClass('page-is-changing');
        $('.cd-loading-bar').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(){
          isAnimating = false;
          $('.cd-loading-bar').off('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend');
        });

        if( !transitionsSupported() ) isAnimating = false;
      }, delay);
      
      if(url!=window.location && bool){
        //add the new page to the window.history
        //if the new page was triggered by a 'popstate' event, don't add it
        window.history.pushState({path: url},'',url);
      }
		});
  }

  function transitionsSupported() {
    return $('html').hasClass('csstransitions');
  }
  
});

  /* Loop through all dropdown buttons to toggle between hiding and showing its dropdown content - This allows the user to have multiple dropdowns without any conflict */
  var dropdown = document.getElementsByClassName("dropdown_btn");
  var i;
  for (i = 0; i < dropdown.length; i++){
      dropdown[i].addEventListener("click", function() {
      this.classList.toggle("active");
      var dropdownContent = this.nextElementSibling;
      if (dropdownContent.style.display === "block") {
          dropdownContent.style.display = "none";
      } else {
          dropdownContent.style.display = "block";
      }
    });  
  }

/*Slide-show */
function easy_background(selector, sld_args) {

  function empty_img(x) {
    if (x) {
      return "<img src='" + x + "'>";
    } else {
      return "";
    }
  }

  //use object same as arrays in php {nameofindex:variable} inside object you can use arrays [value1,val2] (variable in object can be as array
  //var sld_args={i:["img/555.jpg","img/44.jpg","img/33.jpg","img/22.jpg","img/11.jpg","img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg","img/5.jpg"],d:[3000,3000,3000,3000,3000] };

  //if delay is empty or forgotten then use this default value
  var def_del = 5000;

  var p = document.createElement("div");
  p.innerHTML = " ";
  p.classList.add("easy_slider");

  document.body.insertBefore(p, document.body.firstChild);
  //switch all values in object -- objectname.index in you case sld_args is object and i is index of array which keep images (i). We use this function for fill div with img tags
  //and for insert delays into empty or forgotten places in object
  sld_args.slide.forEach(function(v, i) {
    if (v) {
      document.querySelector(".easy_slider").innerHTML += empty_img(v);
      if (typeof sld_args.delay[i] == 'undefined' || typeof sld_args.delay[i] == '' || sld_args.delay[i] == 0) {
        sld_args.delay[i] = def_del;
      }
    }

  });

  //add various style on selector
  document.querySelector(".easy_slider").style.display = "none";


  //add various style on selector
  document.querySelector(selector).style.backgroundSize = "cover";
  document.querySelector(selector).style.backgroundRepeat = "no-repeat";
  document.querySelector(selector).style.backgroundPosition = "center center";
  document.querySelector(selector).style.backgroundAttachment = "fixed";


  setTimeout(function() {
    //add various style on selector
    if (typeof sld_args.transition_timing === 'undefined') {
      sld_args.transition_timing = "ease-in";
    }
    if (typeof sld_args.transition_duration === 'undefined') {
      sld_args.transition_duration = 500;
    }
    var transition = "all " + sld_args.transition_duration + 'ms ' + sld_args.transition_timing;
    document.querySelector(selector).style.WebkitTransition = transition;
    document.querySelector(selector).style.MozTransition = transition;
    document.querySelector(selector).style.MsTransition = transition;
    document.querySelector(selector).style.OTransition = transition;
    document.querySelector(selector).style.transition = transition;
  }, 100);


  //this n is number of row  in object - if first row one function if more than 1 then other
  var n = 1;
  //li collection previous delays from previous slides
  var li = 0;

  function slider() {
    //switching all images one by one
    sld_args.slide.forEach(function(vvv, iii) {
      //here go all slides except first
      if (n > 1) {
        //set delay from collected number from previous slides
        var delay = li;
        setTimeout(function() {

          document.querySelector(selector).style.backgroundImage = "url('" + vvv + "')";

        }, delay); // >1
        //collecting delays from curent
        li = li + sld_args.delay[iii];

      } else { //this function for only  first slide

        //next row
        n++;
        //collect delay first time
        li = sld_args.delay[iii];

        document.querySelector(selector).style.backgroundImage = "url('" + vvv + "')";

      }

    });

  };

  slider();

  setInterval(function() { // REPEAT

    slider();
    //here used length of array of delays in object instead you tot_time variable
  }, sld_args.delay.length);

}

the CSS style codes:
/* -------------------------------- 

Primary style

-------------------------------- */

html {
  font-size: 62.5%;
}

body {
  font-size: 1.6rem;
  font-family: "Open Sans", sans-serif;
  color: white;
  background-color: #ffffff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

@media only screen and (min-width: 600px) {
  h1 {
    font-size: 4.4rem;
    font-weight: 300;
  }
}

/* -------------------------------- 

Patterns - reusable parts of our design

-------------------------------- */
.cd-btn {
  display: inline-block;
  padding: 1.4em 1.6em;
  margin-bottom: 2em;
  border-radius: 50px;
  color: #ffffff;
  font-weight: bold;
  font-size: 1.3rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}
.no-touch .cd-btn:hover {
  background-color: #323c50;
}
.cd-about .cd-btn {
  background-color: none;
}

/* -------------------------------- 

Main Components 

-------------------------------- */
body::after, body::before {
  content: '';
  height: 50vh;
  width: 100%;
  position: fixed;
  left: 0;
  background-color: #ffffff;
  z-index: 1;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-transition: -webkit-transform 0.4s 0.4s;
  -moz-transition: -moz-transform 0.4s 0.4s;
  transition: transform 0.4s 0.4s;
}
body::before {
  top: 0;
  -webkit-transform: translateY(-100%);
  -moz-transform: translateY(-100%);
  -ms-transform: translateY(-100%);
  -o-transform: translateY(-100%);
  transform: translateY(-100%);
}
body::after {
  bottom: 0;
  -webkit-transform: translateY(100%);
  -moz-transform: translateY(100%);
  -ms-transform: translateY(100%);
  -o-transform: translateY(100%);
  transform: translateY(100%);
}
body.page-is-changing::after, body.page-is-changing::before {
  -webkit-transform: translateY(0);
  -moz-transform: translateY(0);
  -ms-transform: translateY(0);
  -o-transform: translateY(0);
  transform: translateY(0);
  -webkit-transition: -webkit-transform 0.4s 0s;
  -moz-transition: -moz-transform 0.4s 0s;
  transition: transform 0.4s 0s;
}

main {
  height: 100vh;
  padding: 10px;
  text-align: center;
}
main .cd-main-content {
  position: relative;
  height: calc(100vh - 20px);
}
main .cd-main-content > div {
  height: 100%;
  overflow: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
main .cd-main-content::after, main .cd-main-content::before {
  content: '';
  position: absolute;
  left: 0;
  height: 50px;
  width: 100%;
}

main .cd-main-content::before {
  top: 0;
}
main .cd-main-content::after {
  bottom: 0;
}


main .cd-main-content.cd-index::after {
  background-color: rgba(64, 137, 166, 0);
  background-image: none;
  background-image: none;
}
main .cd-main-content.cd-index::before {
  background-color: rgba(64, 137, 166, 0);
  background-image: none;
  background-image: none;
}
main .cd-main-content.cd-about {
  background-color: rgb(40, 48, 64, 0.9);
}
main .cd-main-content.cd-about > div {
  padding-top: 50px;
}
main .cd-main-content.cd-about::after {
  background-color: rgba(40, 48, 64, 0);
  background-image: none;
  background-image: none;
}
main .cd-main-content.cd-about::before {
  background-color: rgba(40, 48, 64, 0);
  background-image: none;
  background-image: none;
}
main p {
  width: 90%;
  max-width: 768px;
  margin: 3em auto;
  font-size: 1.4rem;
  line-height: 1.6;
  color: #535966;
  text-align: left;
}
@media only screen and (min-width: 600px) {
  main {
    padding: 20px;
  }
  main .cd-main-content {
    height: calc(100vh - 40px);
  }
  main.cd-index > div {
    padding-top: 200px;
  }
  main.cd-index > div {
    padding-top: 50px;
  }
  main p {
    font-size: 1.8rem;
    line-height: 2;
  }
}
/**************************************/
.cd-cover-layer {
  position: fixed;
  left: 50%;
  top: 50%;
  bottom: auto;
  right: auto;
  -webkit-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  -o-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  height: calc(100% - 20px);
  width: calc(100% - 20px);
  opacity: 0;
  visibility: hidden;
  background-color: none;
  -webkit-transition: opacity 0.4s 0.4s, visibility 0s 0.8s;
  -moz-transition: opacity 0.4s 0.4s, visibility 0s 0.8s;
  transition: opacity 0.4s 0.4s, visibility 0s 0.8s;
}
.cd-about .cd-cover-layer {
  background-color: #283040;
}
.page-is-changing .cd-cover-layer {
  opacity: 1;
  visibility: visible;
  -webkit-transition: opacity 0.3s 0s, visibility 0s 0s;
  -moz-transition: opacity 0.3s 0s, visibility 0s 0s;
  transition: opacity 0.3s 0s, visibility 0s 0s;
}
@media only screen and (min-width: 600px) {
  .cd-cover-layer {
    height: calc(100% - 40px);
    width: calc(100% - 40px);
  }
}

.cd-loading-bar {
  position: fixed;
  z-index: 2;
  left: 50%;
  top: 50%;
  height: 2px;
  width: 90%;
  background-color: grey;
  visibility: hidden;
  -webkit-transition: visibility 0s 0.4s, -webkit-transform 0.4s 0s ease-in;
  -moz-transition: visibility 0s 0.4s, -moz-transform 0.4s 0s ease-in;
  transition: visibility 0s 0.4s, transform 0.4s 0s ease-in;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  -o-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
}
.cd-about .cd-loading-bar {
  background-color: none;
}
.cd-about .cd-loading-bar::before {
  background-color: none;
}
.cd-loading-bar::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  background-color: #283040;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-transform: scaleX(0);
  -moz-transform: scaleX(0);
  -ms-transform: scaleX(0);
  -o-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -ms-transform-origin: left center;
  -o-transform-origin: left center;
  transform-origin: left center;
}
.page-is-changing .cd-loading-bar {
  visibility: visible;
  -webkit-transform: translateX(-50%) translateY(-50%) scaleX(0.3);
  -moz-transform: translateX(-50%) translateY(-50%) scaleX(0.3);
  -ms-transform: translateX(-50%) translateY(-50%) scaleX(0.3);
  -o-transform: translateX(-50%) translateY(-50%) scaleX(0.3);
  transform: translateX(-50%) translateY(-50%) scaleX(0.3);
  -webkit-transition: visibility 0s 0.3s, -webkit-transform 0.4s 0.4s;
  -moz-transition: visibility 0s 0.3s, -moz-transform 0.4s 0.4s;
  transition: visibility 0s 0.3s, transform 0.4s 0.4s;
}
.page-is-changing .cd-loading-bar::before {
  -webkit-transform: scaleX(1);
  -moz-transform: scaleX(1);
  -ms-transform: scaleX(1);
  -o-transform: scaleX(1);
  transform: scaleX(1);
  -webkit-transition: -webkit-transform 0.8s 0.8s ease-in;
  -moz-transition: -moz-transform 0.8s 0.8s ease-in;
  transition: transform 0.8s 0.8s ease-in;
}
@media only screen and (min-width: 600px) {
  .cd-loading-bar {
    width: calc(100% - 40px);
  }
}

the index CSS code:
.logo{
    margin-top: 20px;
    height: 100px;
    margin-left: 10px;
    width: auto;
}

.ct {
  height: 100%;
  display: flex;
  justify-content: space-around;
}
.select{
  height: 35px;
  border-radius: 10px;
}
/************************************************/


/************************************************/
/*Sidenavigation*/

.sidenav {
    height: 100%;
    width: auto;
    position:fixed;        
    z-index: 0;
    top: 0;
    height: 100%;
    left: 0;
    overflow-x: hidden;
    padding-top: 10px;
    color: white;
    background-color: rgb(128,128,128,0.5);
}

.sidenav .a {
    padding: 6px 8px 6px 35px;
    text-decoration: none;
    font-size: 20px;
    color: white;
    display: block;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
    outline: none;
}
.sidenav .info {
  padding: 6px 8px 6px 35px;
  text-decoration: none;
  font-size: 20px;
  color: white;
  display: block;
  border: none;
  background: none;
  width: 100%;
  cursor: pointer;
  outline: none;
  text-align: left;
}
.dropdown_btn {
  padding: 6px 8px 6px 35px;
  font-size: 20px;
  color: white;
  display: block;
  background: none;
  text-decoration: none;
  width: 100%;
  border: none;
  text-align: left;
  cursor: pointer;
  outline: none;
}

.sidenav a:hover, .dropdown-btn:hover {
    color: #f1f1f1;
}

.active {
  background-color: rgba(54,153,209);
  color: white;
}
    

.dropdown_container {
  display: none;
  background-color: none;
  padding-left: 15px;
  width: auto;
  left: 0;
  top: 0;
}
.dropdown_container1 {
  display: none;
  background-color: none;
  padding-left: 10px;
}    

.fa-caret-down {
  float: right;
  padding-right: 0px;
}

@media screen and (max-height: 600px ) and ( max-width:600px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}
.bottom-info{
  text-align: center;
  color: white;
  bottom: 0px;
  top: 0px;

}
.search {
  min-height: 2.7rem;
  background-color: var(--main-color-light);
  margin: 2rem 1.5rem 1.7rem;
  display: grid;
  grid-template-columns: 2.7rem 1fr;
  align-items: center;
  text-align: center;
  border-radius: 50px;
  cursor: pointer;
}

.search input {
  height: 100%;
  border: none;
  background: none;
  outline: none;
  color: #fff;
  caret-color: #fff;
  font-family: inherit;
}

.search input::placeholder {
  color: var(--text-color);
}
.hide {
  transition: opacity 0.3s 0.2s;
}
/************************************************/

.main p{
  font-size: 15px;
}

.main #title{
  font-size: 20px;
  text-transform: uppercase;
  font-weight: bold;
}
.main a{
  font-weight: bold;
  text-transform: capitalize;
}
.main .column1{
  margin: 0;
  left:10px;
}

.main .column {
  flex: 50%;
  padding: 10px;
  height: 100%;
}
@font-face {
  font-family: "Montserrat-Regular";
  src: url("../fonts/Montserrat/Montserrat-Regular.ttf"); }
@font-face {
  font-family: "Montserrat-Bold";
  src: url("../fonts/Montserrat/Montserrat-Bold.ttf"); }
@font-face {
  font-family: "Montserrat-SemiBold";
  src: url("../fonts/Montserrat/Montserrat-SemiBold.ttf"); }
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

.main input, .main textarea,.main select,.main  button {
  font-family: "Montserrat-Regular";
  color: black;
  font-size: 15px; }

  .main p, .main h1, .main h2, .main h3, .main h4, .main h5, .main h6, .main ul {
  margin: 0; }

  .main img {
  max-width: 100%; }

  .main ul {
  padding-left: 0;
  margin-bottom: 0; }

  .main a:hover {
  text-decoration: none; }

  .main :focus {
  outline: none; }

  .main .wrapper {
  min-height: 500px;
  display: flex;
  width: 100%;
  align-items: center;
  background-size: cover; 
  background-color: white;
}

  .main .inner_left {
  width: 100%;
  margin: auto; 
  padding: 75px 97px 85px;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
  -ms-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
  -o-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2); }

  .main .inner_right {
    width: 25%;
    margin: auto; 
  }

  .main textarea {
  resize: none; }

  .main h3 {
  text-transform: uppercase;
  font-size: 45px;
  font-family: "Montserrat-Bold";
  text-align: center;
  margin-bottom: 12px; }

  .main p {
  text-align: center;
  padding: 0 10px;
  margin-bottom: 55px;
  line-height: 1.8; }

  .main .form-group {
  position: relative;
  display: block;
  margin-bottom: 48px; }
  .main .form-group span {
    font-size: 15px;
    color: black;
    position: absolute;
    top: 11px;
    transition: all .2s ease;
    transform-origin: 0 0;
    cursor: text; }
    .main .form-group span.border {
    height: 2px;
    display: block;
    position: absolute;
    width: 100%;
    left: 0;
    top: 41px;
    transform: scaleX(0);
    transition: all .15s ease;
    background: black; }

    .main .form-control {
      border: none;
      border-bottom: 2px solid black;
      display: block;
      width: 100%;
      height: 43px;
      font-size: 15px;
      background: none;
      font-family: "Montserrat-SemiBold"; }
  .main .form-control:focus, .form-control:valid {
      border-bottom: 2px solid #fff; }
  .main .form-control:focus + span, .form-control:valid + span {
    transform: translateY(-22px) scale(0.8); }
  .main .form-control:focus + span + .border, .form-control:valid + span + .border {
    transform: scaleX(1); }

 .main textarea.form-control {
    padding-top: 10px;
    padding-bottom: 10px; }

  .main .button {
  border-radius: 10px;
  width: 162px;
  height: 51px;
  border: 2px solid black;
  margin: auto;
  margin-top: 60px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: none;
  color: black;
  text-transform: uppercase;
  font-family: "Montserrat-SemiBold";
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  position: relative;
  -webkit-transition-property: color;
  transition-property: color;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s; }
  .main .button i {
    margin-left: 10px;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-transition-duration: 0.1s;
    transition-duration: 0.1s;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out; }
    .main .button:before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 10px;
    background: rgb(0, 0, 128);
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transform-origin: 0 50%;
    transform-origin: 0 50%;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out; }
    .main .button:hover {
    border-color: transparent; }
    .main .button:hover:before {
      -webkit-transform: scaleX(1);
      transform: scaleX(1); }
      .main .button:hover i {
      -webkit-transform: translateX(4px);
      transform: translateX(4px); }

  .main .button1 {
  border-radius: 10px;
  width: 15px;
  height: 75px;
  border: 2px solid black;
  margin: auto;
  margin-top: 60px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: none;
  color: black;
  text-transform: uppercase;
  font-family: "Montserrat-SemiBold";
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  position: relative;
  -webkit-transition-property: color;
  transition-property: color;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s; }

@media (max-width: 600px) {
  .main h3 {
    font-size: 38px; }

    .main p {
    font-size: 14px;
    padding: 0; }

    .main .inner {
    padding: 27px 20px 37px;
    border: none;
    box-shadow: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    -ms-box-shadow: none;
    -o-box-shadow: none; }

  .main .wrapper {
    background: white;
       } 
}

.main #spacing-between-main{
  text-align: center;
  color: white;
  margin-top: 10%;
  margin-bottom: 14.5%;
}
.main .hr{
  color:black;
  height: 10px;
  
}
.main .head{
  font-weight: bold;
  font-size: 30px;

}
.main .content{
  font-size: 15px;
}
video{
  margin-top: 10%;
  margin-bottom: 2.9%;
  margin-left: 15%;
  margin-right: 15%;
  width: 100%;
  max-width:770px;
  height:100%;
  max-height:550px;
}
ul,span{
  font-size: 15px;
}
#sub-title{
  font-size: 20px;
  font-weight: bold;
  color: white;
}
.sub-header{
  font-size: 20px;
  font-weight: bold;
  color: white;
  text-align: center;
  text-transform: uppercase;
}
#number{
  text-align: center;
  font-size: 15px;
  color: white;
}
.header{
  font-weight: bold;
  text-align: center;
  align-items: center;
  text-transform:uppercase;
}
ol{
  font-size: 15px;
}
.center{
  text-align: center;
}
.glow-on-hover {
  width: 150px;
  height: 50px;
  border: none;
  outline: none;
  color: black;
  background: white;
  cursor: pointer;
  position: relative;
  z-index: 0;
  border-radius: 10px;
}

.glow-on-hover:before {
  content: '';
  background: linear-gradient(45deg,#00FFFF,#0096FF,#0047AB,#00008B,#191970,#00FFFF,#0096FF,#0047AB,#00008B,#191970 );
  position: absolute;
  top: -2px;
  left:-2px;
  background-size: 400%;
  z-index: -1;
  filter: blur(5px);
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  animation: glowing 20s linear infinite;
  opacity: 0;
  transition: opacity .3s ease-in-out;
  border-radius: 10px;
}

.glow-on-hover:active {
  color: white
}

.glow-on-hover:active:after {
  background: transparent;
}

.glow-on-hover:hover:before {
  opacity: 1;
}

.glow-on-hover:after {
  z-index: -1;
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background: white;
  left: 0;
  top: 0;
  border-radius: 10px;
}

@keyframes glowing {
  0% { background-position: 0 0; }
  50% { background-position: 400% 0; }
  100% { background-position: 0 0; }
}
.current-list{
  color: white;
}
#image{
  height: 100px;
  width:100px;
  margin-top:15px;
  background-color: white;
  border: 2px solid rgb(25, 25, 112);
}
#display-image{
  flex: 25%;
  padding: 10px;
  height: 80%;
}
#text-info{
  font-size: 15px;
  text-align: center;
  flex: 15%;
  padding-left: 10px;
  text-transform: uppercase;
}
#info-name{
  font-size: 15px;
  font-weight: bold;
  text-transform: uppercase;

}
.background-color{
  background-color: rgb(128,128,128,0.9);
  height: auto;
}
.button {
  border-radius: 10px;
  height: 45px;
  width: 100px;
}
.button a{
  color: black;
}
/********************************/
/*Footer*/

.footer {
  position:absolute;
  width: 100%;
  background: rgba(236,235,232);
  min-height: 100px;
  padding: 20px 50px;
  display:flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  clear: left;
}
@media (max-width:600px) {
  .footer .item:not(.social) {
    text-align:center;
    padding-bottom:20px;
  }
}
@media (max-width:600px) {
  .footer .item.social {
    text-align:center;
    margin-top:20px;
  }
}
@media (max-width:600px) {
  .footer .item.text {
    margin-bottom:0;
  }
}
.social-icon,
.menu {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0px 0;
  flex-wrap: wrap;
}

.social-icon__item,
.menu__item {
  list-style: none;
}

.social-icon__link {
  font-size: 2rem;
  color: black;
  margin: 0 10px;
  display: inline-block;
  transition: 0.5s;
}
.social-icon__link:hover {
  transform: translateY(-10px);
}

.menu__link {
  font-size: 1.2rem;
  color: black;
  margin: 0 10px;
  display: inline-block;
  transition: 0.5s;
  text-decoration: none;
  opacity: 0.75;
  font-weight: 300;
}

.menu__link:hover {
  opacity: 1;
}

.footer p {
  color: black;
  margin: 15px 0 10px 0;
  font-size: 1rem;
  font-weight: 300;
}
/********************************/


What I have tried:

I tried putting the drop-down code in the transition code, but the same happens even if it isn't in there.
Posted

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900