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.
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;
$('main').on('click', '[data-type="page-transition"]', function(event){
event.preventDefault();
var newPage = $(this).attr('href');
if( !isAnimating ) changePage(newPage, true);
firstLoad = true;
});
$(window).on('popstate', function() {
if( firstLoad ) {
var newPageArray = location.pathname.split('/'),
newPage = newPageArray[newPageArray.length - 1];
if( !isAnimating && newLocation != newPage ) changePage(newPage, false);
}
firstLoad = true;
});
function changePage(url, bool) {
isAnimating = true;
$('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( !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){
$('main').html(section);
var delay = ( transitionsSupported() ) ? 1200 : 0;
setTimeout(function(){
( 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){
window.history.pushState({path: url},'',url);
}
});
}
function transitionsSupported() {
return $('html').hasClass('csstransitions');
}
});
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";
}
});
}
function easy_background(selector, sld_args) {
function empty_img(x) {
if (x) {
return "<img src='" + x + "'>";
} else {
return "";
}
}
var def_del = 5000;
var p = document.createElement("div");
p.innerHTML = " ";
p.classList.add("easy_slider");
document.body.insertBefore(p, document.body.firstChild);
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;
}
}
});
document.querySelector(".easy_slider").style.display = "none";
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() {
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);
var n = 1;
var li = 0;
function slider() {
sld_args.slide.forEach(function(vvv, iii) {
if (n > 1) {
var delay = li;
setTimeout(function() {
document.querySelector(selector).style.backgroundImage = "url('" + vvv + "')";
}, delay);
li = li + sld_args.delay[iii];
} else {
n++;
li = sld_args.delay[iii];
document.querySelector(selector).style.backgroundImage = "url('" + vvv + "')";
}
});
};
slider();
setInterval(function() {
slider();
}, sld_args.delay.length);
}
the CSS style codes:
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;
}
}
.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;
}
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;
}
.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 {
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.