function modalopen(){
document.getElementById("overlay").style.display='block';
document.getElementById("modal").style.display='block';
}
function modalclose(){
document.getElementById("overlay").style.display='none';
document.getElementById("modal").style.display='none';
}
.closex{
border: none;
background-color: transparent;
font-weight: bold;
}
.open{
border: none;
background-color: dodgerblue;
border-radius: 14px;
width: 150px;
height: 40px;
font-size: 20px;
}
body{
background-color: whitesmoke;
}
.modal{
display: none;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
transition: 200ms ease-in-out;
border-radius: 10px;
z-index: 10;
background-color: white;
width: 500px;
max-width: 80%;
font-family: Arial;
border: 1px solid white;
box-shadow: 0 60px 120px rgba(0, 0, 0, 0.14), 0 40px 160px rgba(0, 0, 0, 0.24);
-webkit-animation: animatezoom 0.6s;
animation: animatezoom 0.6s;
}
#-webkit-keyframes animatezoom {
from {-webkit-transform: translate(-50%,-50%) scale(0)}
to {-webkit-transform: translate(-50%,-50%) scale(1)}
}
#keyframes animatezoom {
from {transform: translate(-50%,-50%) scale(0)}
to {transform: translate(-50%,-50%) scale(1)}
}
.mhead{
border-bottom: 1px solid rgba(0,0,0,0.5);
padding: 15px 15px 15px;
font-size: 22px;
}
.mbody{
padding: 15px 15px 15px 15px;
font-size: 19px
}
.close{
margin-left: 330px;
}
#overlay{
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0,0,0,0.5);
pointer-events: none;
}
<body>
<div id="overlay"></div>
<div class="modal" id="modal">
<div class="mhead">Welcome!!!<span class="close"><button class="closex" onclick="modalclose()">×</button></span></div>
<div class="mbody">
welcome to this site we are very happy that you are using this site.nisi ita quem quibusdam pariatur varias familiaritatem singulis fugiat
praesentibus qui quid id firmissimum officia se eram praesentibus coniunctione
ne quibusdam quem nulla despicationes praesentibus familiaritatem eiusmod eu o
relinqueret malis irure deserunt ingeniis aliqua ex aliquip arbitrantur irure
exquisitaque ad multos singulis cernantur ab aliquip consectetur fore
voluptatibus coniunctione tractavissent quo id nostrud reprehenderit
cohaerescant si sunt fore velit illum iis eram proident si expetendis varias
exercitation officia anim eram firmissimum domesticarum sint et nisi duis
coniunctione laboris pariatur aut lorem ubi qui e arbitrantur quid quibusdam
ipsum cohaerescant duis eiusmod reprehenderit varias nam dolor ut dolor mentitum
graviterque
</div>
</div>
<div align="center">
<button onclick="modalopen()" class="open">Open Modal</button>
</div>
</body>
From the above code if you click on the button it makes a modal appear by setting it's display to block, now what i want is that when you click outside the modal the modal will disappear, can anyone help with a code for that. i have tried
var modal = document.getElementById('modal');
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
but that doesn't work
i have checked other question on stack overflow about this but none of them work
You already have all the pieces, you just need to put it all together. Remove the pointer-events: none; from the overlay CSS so we can click on it. Then add the onclick="modalclose()" to your overlay. Thats it.
function modalopen(){
document.getElementById("overlay").style.display='block';
document.getElementById("modal").style.display='block';
}
function modalclose(){
document.getElementById("overlay").style.display='none';
document.getElementById("modal").style.display='none';
}
.closex{
border: none;
background-color: transparent;
font-weight: bold;
}
.open{
border: none;
background-color: dodgerblue;
border-radius: 14px;
width: 150px;
height: 40px;
font-size: 20px;
}
body{
background-color: whitesmoke;
}
.modal{
display: none;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
transition: 200ms ease-in-out;
border-radius: 10px;
z-index: 10;
background-color: white;
width: 500px;
max-width: 80%;
font-family: Arial;
border: 1px solid white;
box-shadow: 0 60px 120px rgba(0, 0, 0, 0.14), 0 40px 160px rgba(0, 0, 0, 0.24);
-webkit-animation: animatezoom 0.6s;
animation: animatezoom 0.6s;
}
#-webkit-keyframes animatezoom {
from {-webkit-transform: translate(-50%,-50%) scale(0)}
to {-webkit-transform: translate(-50%,-50%) scale(1)}
}
#keyframes animatezoom {
from {transform: translate(-50%,-50%) scale(0)}
to {transform: translate(-50%,-50%) scale(1)}
}
.mhead{
border-bottom: 1px solid rgba(0,0,0,0.5);
padding: 15px 15px 15px;
font-size: 22px;
}
.mbody{
padding: 15px 15px 15px 15px;
font-size: 19px
}
.close{
margin-left: 330px;
}
#overlay{
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0,0,0,0.5);
}
<body>
<div id="overlay" onclick="modalclose()"></div>
<div class="modal" id="modal">
<div class="mhead">Welcome!!!<span class="close"><button class="closex" onclick="modalclose()">×</button></span></div>
<div class="mbody">
welcome to this site we are very happy that you are using this site.nisi ita quem quibusdam pariatur varias familiaritatem singulis fugiat
praesentibus qui quid id firmissimum officia se eram praesentibus coniunctione
ne quibusdam quem nulla despicationes praesentibus familiaritatem eiusmod eu o
relinqueret malis irure deserunt ingeniis aliqua ex aliquip arbitrantur irure
exquisitaque ad multos singulis cernantur ab aliquip consectetur fore
voluptatibus coniunctione tractavissent quo id nostrud reprehenderit
cohaerescant si sunt fore velit illum iis eram proident si expetendis varias
exercitation officia anim eram firmissimum domesticarum sint et nisi duis
coniunctione laboris pariatur aut lorem ubi qui e arbitrantur quid quibusdam
ipsum cohaerescant duis eiusmod reprehenderit varias nam dolor ut dolor mentitum
graviterque
</div>
</div>
<div align="center">
<button onclick="modalopen()" class="open">Open Modal</button>
</div>
</body>
You can find where is the click happem, like this
window.addEventListener("click", function(e) {
if (document.getElementById("modalWindow").contains(e.target)) {
alert("clicked inside");
} else {
alert("clicked outside");
}
});
Modals are pretty simple in nature. Most basic example would be consisting of modal itself, close button inside (or sometimes outside modal) and backdrop.
basic modal setup
Now what you want to do is close modal whenever backdrop or close button is clicked. Now there is a design decision to be made, you can include modal inside a backdrop, or keep them on the same level in DOM. From your example I can see that you went with second option. In this case all you need to do is add onClick event to backdrop.
<div id="overlay" onclick="modalclose()"></div>
In case you would have modal inside backdrop you would additionally need to stop event propagation, because any click inside modal would trigger it's parents (including backdrop) onClick events.
var modalElement = document.getElementById('modal');
modalElement.addEventListener('click', function(event){
event.stopPropagation();
});
Related
I am learning JavaScript and have tried to make a modal window open when a button is pressed. I'm using an event listener, but I keep getting an error saying that this block of code is undefined: btnOpenModal.addEventListner('click', openModal);
Any help is most appreciated. Thank you in advance.
const modal = document.querySelector('.modal');
const overlay = document.querySelector('.overlay');
const btnCloseModal = document.querySelector('.close-modal');
const btnOpenModal = document.querySelector('.show-modal');
const openModal = function () {
// console.log('Button clicked');
modal.classList.remove('hidden');
overlay.classList.remove('hidden');
};
const closeModal = function () {
modal.classList.add('hidden');
overlay.classList.add('hidden');
};
btnOpenModal.addEventListner('click', openModal);
btnCloseModal.addEventListner('click', closeModal)
*{
margin: 0;
padding: 0; box-sizing: inherit;
}
html {
font-size: 62.5%;
box-sizing: border-box;
}
body {
font-family: sans-serif;
color: #333;
line-height: 1.5;
height: 100vh;
position: relative;
display: flex;
align-items: flex-start;
justify-content: center;
background: linear-gradient(to top left, #28b487, #7dd56f);
}
.show-modal {
font-size: 2rem;
font-weight: 600;
padding: 1.75rem 3.5rem;
margin: 5rem 2rem;
border: none;
background-color: #fff;
color: #444;
border-radius: 10rem;
cursor: pointer;
}
.close-modal {
position: absolute;
top: 1.2rem;
right: 2rem;
font-size: 5rem;
color: #333;
cursor: pointer;
border: none;
background: none;
}
h1 {
font-size: 2.5rem;
margin-bottom: 2rem;
}
p{
font-size: 1.8rem;
}
/* -------------------------- */
/* CLASSES TO MAKE MODAL WORK */
.hidden {
display: none;
}
.modal {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 70%;
background-color: white;
padding: 6rem;
border-radius: 5px;
box-shadow: 0 3rem 5rem rgba(0, 0, 0, 0.3);
z-index: 10;
}
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.6);
backdrop-filter: blur(3px);
z-index: 5;
}
<button class="show-modal">Show modal</button>
<div class="modal hidden">
<button class="close-modal">×</button> <h1>I'm a modal window </h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod
ea
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.
</p> </div>
<div class="overlay hidden"></div>
enter link description here
This HTML with simple CSS and JS works perfectly in Safari, but in Chrome (both Mac and Win) it does not work at all, does not even scroll... not sure the is JS, or the CSS or both.
I tried to change the script or the CSS but nothing works.
Please help 🙏
https://codepen.io/sinetempore/pen/oNwNKZr
Here is my HTML and my CSS:
document.querySelector('.parallax').addEventListener('scroll', function() {
if ($(this).scrollTop() > 100) {
$('.p1, .p2').addClass('hide');
} else {
$('.p1, .p2').removeClass('hide');
}
});
document.querySelector('.parallax').addEventListener('scroll', function() {
if ($(this).scrollTop() > 1200) {
$('.p3').addClass('hide');
$('.p2').removeClass('hide');
} else {
$('.p3').removeClass('hide');
}
});
document.querySelector('.parallax').addEventListener('scroll', function() {
if ($(this).scrollTop() > 1800) {
$('.p3-text, .p3sottocntr, .p-main.p4-text').addClass('hidefoot');
} else {
$('.p3-text, .p3sottocntr, .p-main.p4-text').removeClass('hidefoot');
}
});
/// Scroll back to top
$("a[href='.parallax']").click(function() {
$("html, body").animate({
scrollTop: 0
}, "slow");
return false;
});
#charset "utf-8";
* {
margin: 0;
}
body {
height: 100vh;
overflow-x: hidden;
overflow-y: hidden;
font-family: MuseoSans_700;
}
a {
color: black;
text-decoration: none;
}
/* ---------- LOGO ----------*/
.logo-p1 {
overflow: hidden;
border: 0px solid red;
width: 120px;
height: 45px;
background-color: white;
position: absolute;
top: calc(50% - 22.5px);
left: calc(50% - 60px);
margin: 0;
}
.logo-p2 {
left: 0;
overflow: hidden;
border: 0px solid red;
width: 100px;
height: 100px;
background-color: white;
position: absolute;
top: 40px;
left: 40px;
margin: 0;
}
.logo-p3 {
transform: rotate(180deg);
left: 0;
overflow: hidden;
border: 0px solid red;
width: 100px;
height: 100px;
background-color: white;
position: absolute;
top: 40px;
left: 40px;
margin: 0;
}
/* ---------- PARALLAX ----------*/
.parallax {
perspective: 1px;
height: 100vh;
overflow-x: hidden;
overflow-y: auto;
position: static;
background: rgba(255, 0, 0, 0);
z-index: 2;
}
.speed-1 {
transform: translateZ(-6px) scale(7);
}
/* ---------- SECTIONS ----------*/
.p1 {
height: 100%;
width: 100%;
position: absolute;
display: block;
z-index: 3;
background: white;
opacity: 1;
transition: all 0.9s ease;
}
.p1.hide {
opacity: 0;
transition: all 0.9s ease;
visibility: hidden;
}
.p2 {
height: auto;
width: 100%;
position: fixed;
display: block;
z-index: 2;
top: 0vh;
background: white;
visibility: hidden;
transition: all 0.4s ease;
opacity: 0;
}
.p2.hide {
opacity: 1;
transition: all 0.9s ease;
visibility: visible;
}
.p3 {
height: auto;
width: 100%;
position: fixed;
display: block;
z-index: 2;
top: 0vh;
background: white;
visibility: hidden;
transition: all 0.4s ease;
opacity: 0;
}
.p3.hide {
opacity: 1;
transition: all 0.9s ease;
visibility: visible;
}
.p-main.p4-text.hidefoot {
width: 100%;
height: 250px;
background-color: black;
/* position: relative; */
left: 0px;
margin: auto;
bottom: 250px;
}
.p-main.p4-text {
width: 100%;
height: 0px;
background-color: black;
position: fixed;
left: 0px;
margin: auto;
bottom: 0px;
clip-path: polygon(0 40%, 100% 0, 100% 100%, 0% 100%);
-webkit-clip-path: polygon(0 40%, 100% 0, 100% 100%, 0% 100%);
transition: all 0.9s;
transform: translateY(250px);
transform-origin: bottom;
}
.p4 {
height: auto;
width: 100%;
position: relative;
display: block;
z-index: -1;
}
.p4.hidefoot {
opacity: 1;
transition: all 0.9s ease;
visibility: visible;
}
/* ---------- TESTO SECTIONS ----------*/
.p-main {
width: 355px;
height: 230px;
background-color: transparent;
position: fixed;
bottom: 40px;
left: 40px;
margin: 0;
display: flex;
justify-content: left;
align-items: flex-end;
border: 0px solid red;
filter: invert(0);
font-family: MuseoSans-100;
font-size: 13px;
font-smoothing: antialiased;
}
.p3-text {
opacity: 1;
transition: all 0.9s ease;
visibility: visible;
}
.p3-text.hidefoot {
opacity: 0;
transition: all 0.9s ease;
visibility: hidden;
}
.p-desc {
line-height: 16px;
}
.p-desc b {
font-family: MuseoSans_700;
font-weight: normal;
}
.p-col {
margin-top: 20px;
column-count: 2;
line-height: 16px;
font-family: MuseoSans_700;
}
/* ---------- MENU SOTTO ----------*/
.sottocentro {
width: 250px;
height: 140px;
background-color: transparent;
position: fixed;
bottom: 40px;
right: calc(0% - 0px);
margin: 0;
display: -webkit-box;
justify-content: center;
align-items: flex-end;
filter: invert(0);
font-family: MuseoSans-100;
font-size: 13px;
font-smoothing: antialiased;
border: 0px solid red;
right: 40px;
}
.p3sottocntr {
opacity: 1;
transition: all 0.9s ease;
visibility: visible;
}
.p3sottocntr.hidefoot {
opacity: 0;
transition: all 0.9s ease;
visibility: hidden;
}
.sottocentro ul {
list-style: none;
text-align: right;
width: auto;
border: 0px solid red;
line-height: 16px;
text-decoration: none;
clear: both;
margin: 0;
padding: 0px;
right: 40px;
position: absolute;
right: 0px;
position: absolute;
bottom: 0px;
}
.sottocentro ul li {
border: none;
text-align: right;
width: auto;
}
.sottocentro ul li.begins {
border: none;
text-align: right;
width: auto;
padding: 30px 0 0 0;
}
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" media="all" href="css/style.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<div class="parallax">
<section class="p1 speed-1">
<div class="logo-p1">
<img src="https://www.google.com/logos/doodles/2021/doodle-champion-island-games-august-24-6753651837108999-s.png"></img>
</div>
</section>
</div>
<section class="p2">
<div class="logo-p2">
<img src="https://www.google.com/logos/doodles/2021/doodle-champion-island-games-august-24-6753651837108999-s.png"></img>
</div>
<div class="p-main p2-text">
<div>
<p class="p-desc p2-desc"> <b>Lorem ipsum </b>dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum..
</p>
</div>
</div>
</section>
<section class="p3">
<div class="logo-p3">
<img src="https://www.google.com/logos/doodles/2021/doodle-champion-island-games-august-24-6753651837108999-s.png"></img>
</div>
<div class="p-main p3-text">
<div>
<p class="p-desc p3-desc"> <b>Sed ut perspiciatis </b>unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem
quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam
eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit
qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
</p>
</div>
</div>
</section>
<section class="p4">
<div class="p-main p4-text">
</div>
</section>
</body>
</html>
Im doing a web project to learn js,html and css. This web page has a front page (which i couldnt post here because it only allows 1 html file) and one section called "private events" which has its own html file but it shares the same css file with the entire web page. When i resize the page, the top menu should stay hidden and a hamburguer button should appear with the menu displayed properly for smaller windows. It does work on the fron page, but on this sheet doesnt work.
It says:
"Uncaught TypeError: Cannot read property 'addEventListener' of null
at main.js:35"
I'm using the same classes and IDs, it doesnt seem to be a spelling error, i dont know what it could be.
To make it clear, when i open the page in a smaller window, the menu dissapears (as it should), the hamburguer button appears (as it should), but when i click on it, it doesnt transform to the X shape that i want, and the menu doesnt appear either.
let sliderImages=document.querySelectorAll(".slide");
let flechaIzq= document.querySelector("#flecha-izq");
let flechaDer= document.querySelector("#flecha-der");
let current=0;
//resetea todas las imagenes
function reset(){
for(let i=0; i < sliderImages.length;i++){
sliderImages[i].style.display='none';
}
}
//inicia el slider
function startSlide(){
reset();
sliderImages[current].style.display="block";
if(current < sliderImages.length - 1)
{
current++;
}else{
current = 0;
}
setTimeout("startSlide()",5000);
}
//mostrar anterior
function slideLeft(){
reset();
sliderImages[current -1].style.display="block";
current--;
}
//flecha izq al clickear
flechaIzq.addEventListener('click', function(){
if (current === 0){
current=sliderImages.length;
}
slideLeft();
})
//mostrar siguiente
function slideRight(){
reset();
sliderImages[current+1].style.display="block";
current++;
}
//flecha der al clickear
flechaDer.addEventListener('click', function(){
if (current === sliderImages.length -1){
current=- 1;
}
slideRight();
});
startSlide();
/* this is the code for the hamburguer button */
var header = document.querySelector(".btn-header-container");
var btn_header= document.querySelectorAll(".btn_header");
function myFunction(x) {
header.classList.toggle("btn-header-toggle");
for (let i = 0; i < btn_header.length; i++) {
btn_header[i].classList.toggle("btn_toggle");
}
x.classList.toggle("change");
}
// Get the modal
var modal = document.getElementById("myModal");
// Get the button that opens the modal
var botones = document.getElementsByClassName("btn_barra")
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks on the button, open the modal
for (let k = 0; k < botones.length; k++) {
botones[k].addEventListener('click', function() {
switch (k) {
case 0:
document.getElementById("titulo_0").innerHTML = "Desayuno & Merienda";
document.getElementById("titulo_1").innerHTML = "Licuados";
document.getElementById("titulo_2").innerHTML = "Facturas";
document.getElementById("titulo_3").innerHTML = "Tostados";
document.getElementById("titulo_4").innerHTML = "Pancakes";
modal.style.display = "block";
break;
case 1:
document.getElementById("titulo_0").innerHTML = "Almuerzo & Cena";
document.getElementById("titulo_1").innerHTML = "Entradas";
document.getElementById("titulo_2").innerHTML = "Carnes";
document.getElementById("titulo_3").innerHTML = "Pastas";
document.getElementById("titulo_4").innerHTML = "Menú Vegano";
modal.style.display = "block";
break;
case 2:
document.getElementById("titulo_0").innerHTML = "Postres";
document.getElementById("titulo_1").innerHTML = "Helados";
document.getElementById("titulo_2").innerHTML = "Tortas";
document.getElementById("titulo_3").innerHTML = "Copas Heladas";
document.getElementById("titulo_4").innerHTML = "Especiales";
modal.style.display = "block";
break;
}
})
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
.top_bar{
overflow: hidden; /* para que los botones no salgan del container al usar float*/
}
body{
background-image: linear-gradient(#FEFFFE, floralwhite);
}
a {
text-decoration: none;
}
.logo{
height:10%;
width:10%;
display: block;
margin-left: auto;
margin-right: auto;
padding:10px;
margin-top:10px;
}
.btn_header{
color:#931621;
background: transparent;
float:right;
padding:10px;
margin-right:5px;
bottom:80px;
font-family: 'Ubuntu', sans-serif;
font-size:13px;
text-transform: uppercase;
border:none;
opacity:80%;
position:relative; /* para mover a los botones */
border-right: 2px ridge #FF1B1C;
}
.btn_header:hover{
color: black;
font-size:15px;
transition-duration: 0.5s;
cursor:pointer;
}
/* PRESENTACION (SLIDER)*/
#slider, .wrap, .slide-contenido{
margin:0;
padding:0;
width:100%;
height:60vh;
overflow-x:hidden; /* saca las barras horizontales*/
}
.wrap{
position: relative;
}
.slide{
background-size: cover;
background-position:center;
background-repeat:no-repeat;
}
.slide1{background-image:url(/imagenes/slider/img5.jpg)}
.slide2{background-image:url(/imagenes/slider/img2.jpg)}
.slide3{background-image:url(/imagenes/slider/img3.jpg)}
.slide4{background-image:url(/imagenes/slider/img4.jpg)}
.slide5{background-image:url(/imagenes/slider/img1.jpg)}
.slide-contenido{
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
text-align:center;
}
.reservas{
font-size:20px;
padding:15px;
font-family: 'Montserrat', sans-serif;
text-transform: uppercase;
background-color: #FFECCC;
border:none;
opacity:80%;
}
.reservas:hover{
cursor:pointer;
border: 2px solid #A4303F;
transition-duration: 0.5s;
}
.flecha{
cursor:pointer;
position:absolute;
top:60%;
margin-top:-50px;
width:0;
height:0;
border-style:solid;
opacity:70%;
}
#flecha-izq{
border-width: 30px 40px 30px 0;
left:0;
margin-left:30px;
border-color: transparent #FFF8F0 transparent transparent;
}
#flecha-izq:hover{
border-color: transparent #616163 transparent transparent;
transition-duration: 0.3s;
}
#flecha-der{
border-width: 30px 0px 30px 40px;
right:0;
margin-right:30px;
border-color: transparent transparent transparent #FFF8F0;
}
#flecha-der:hover{
border-color: transparent transparent transparent #616163;
transition-duration: 0.3s;
}
.descripcion h1{
font-family: 'Montserrat', sans-serif;
text-transform: uppercase;
font-weight: 700;
letter-spacing: 0em;
line-height: 1em;
font-size: 32px;
padding:10px;
}
.descripcion {
color: #363732;
text-align: center;
margin:80px 180px 5px 180px;
font-size:17px;
}
.barra{
text-align: center;
}
.btn_barra{
letter-spacing: 0.3em;
font-family: 'Playfair Display', serif;
font-weight: 700;
padding:20px 40px;
text-transform: uppercase;
border:2px solid black;
position:relative;
margin:30px;
cursor:pointer;
background-color:#EEF8FF;
}
.btn_barra:hover{
background-color: #08090A;
color:white;
transition-duration: 0.5s;
}
.informacion{
display:flex;
justify-content:space-evenly;
}
.flex-item{
text-align:center;
font-family: 'Montserrat', sans-serif;
}
.flex-item p{
line-height: 0.5em;
color:#363732;
}
.flex-item h4{
color: #C14953;
font-weight: 1000;
border-bottom:1px solid black;
}
.grid-container{
display:grid;
grid-template-columns: repeat(auto-fit,minmax(240px,550px));/*3fr 3fr*/
grid-template-rows: repeat(3,600px);
grid-column-gap: 3em;
grid-row-gap: 3em;
justify-content:center; /* para que quede todo centrado*/
margin-top:50px;
}
.item-a{
background-image: url(imagenes/grid/burguer.jpg);
background-size:cover;
background-position: center; /* Center the image */
background-repeat: no-repeat; /* Do not repeat the image */
/*grid-column:1/1;
grid-row: 1/1;*/
text-align: center;
}
.item-a:hover{
cursor:pointer;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
opacity:70%;
transition-duration: 0.3s;
}
.item-b{
background-image: url(imagenes/grid/cerveza.jpg);
background-size:cover;
background-position: center; /* Center the image */
background-repeat: no-repeat; /* Do not repeat the image */
/*grid-column:1/1;
grid-row: 2/2;*/
text-align: center;
}
.item-b:hover{
cursor:pointer;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
opacity:70%;
}
.item-c{
background-image: url(imagenes/grid/pancake.jpg);
background-size:cover;
background-position: center; /* Center the image */
background-repeat: no-repeat; /* Do not repeat the image */
/*grid-column:1/1;
grid-row: 3/3;*/
text-align: center;
}
.item-c:hover{
cursor:pointer;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
opacity:70%;
}
.titulo-img{
font-size: 10vh;
margin-top:250px;
color:#FEFFEA;
font-family: 'Monoton', cursive;
}
.item-a-text{
background-color:#FCFC62;
/*grid-column: 2/2;
grid-row:1/1;*/
text-align:center;
}
.item-b-text{
background-color:#F06543;
/*grid-column: 2/2;
grid-row:2/2;*/
text-align:center;
}
.item-c-text{
background-color:#8FF7A7;
/*grid-column: 2/2;
grid-row:3/3;*/
text-align:center;
}
.titulo-grid{
margin-top:100px;
font-size:60px;
font-family: 'Amatic SC', cursive;
}
.parrafo-grid{
margin-left:30px;
margin-right:30px;
font-family: 'Kalam', cursive;
font-size:20px;
}
.btn-grid{
margin-top:20px;
padding:30px;
font-family: 'Montserrat', sans-serif;
font-size:15px;
color:white;
background-color: #F21B3F;
border:none;
cursor:pointer;
}
.btn-grid:hover{
font-size:18px;
transition-duration: 0.3s;
}
.grid-feed{
display:grid;
grid-template-columns: 2fr 1fr;
grid-template-rows: 500px;
margin:50px 50px 50px 50px;
grid-gap:4em;
overflow:hidden;
}
#mapa{
grid-column: 1/1;
grid-row:1/1;
}
#instagram-feed{
width:50%;
height:50%;
grid-column:2/2;
grid-row:1/1;
}
.footer{
margin-top:150px;
text-align:center;
color: #596157;
font-family: 'Montserrat', sans-serif;
}
.footer span{
color:#E3655B;
font-weight:700;
}
.footer div p:nth-child(3){
font-weight: bold;
}
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content/Box */
.modal-content {
position: relative;
background-color: #22223B;
color:white;
opacity: 90%;
margin: auto;
padding: 0;
border: 1px solid #888;
width: 80%;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
animation-name: animatetop;
animation-duration: 0.4s
}
/* Modal Header */
.modal-header {
padding: 5px 16px;
color: white;
border-bottom: 2px solid lightblue;
letter-spacing: 0.3em;
font-family: 'Playfair Display', serif;
font-weight: 400;
text-transform: uppercase;
background-color:black;
opacity:70%;
}
/* Modal Body */
.modal-body {
padding:20px;
column-count: 2;
column-gap: 40px;
column-rule: 1px solid lightblue;
}
.modal-body div{
padding:20px 50px;
}
.modal-body h4{
font-family: 'Montserrat', sans-serif;
letter-spacing:0.3em;
text-transform:uppercase;
font-weight: lighter;
}
/* The Close Button */
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: lightblue;
text-decoration: none;
cursor: pointer;
}
/* Add Animation */
#keyframes animatetop {
from {top: -300px; opacity: 0}
to {top: 0; opacity: 1}
}
/*CSS DE PAGINA DE EVENTOS PRIVADOS*/
#body_eventos{
background-image: url(imagenes/fondo_evento.jpg);
background-repeat: repeat;
background-size:cover;
}
.grid-eventos{
display:grid;
grid-template-columns: repeat(auto-fit,minmax(240px,550px));
grid-template-rows: repeat(3,600px);
grid-column-gap: 3em;
grid-row-gap: 3em;
justify-content:center; /* para que quede todo centrado*/
margin-top:50px;
}
#foto-ev-1{
background-image: url(imagenes/eventos/img1.jpg);
border-radius:400px;
}
#foto-ev-2{
background-image: url(imagenes/eventos/img2.jpg);
border-radius:400px;
}
#foto-ev-3{
background-image: url(imagenes/eventos/img3.jpg);
border-radius:400px;
}
.foto-ev{
background-size:cover;
background-position: center; /* Center the image */
background-repeat: no-repeat; /* Do not repeat the image */
text-align: center;
}
.info-ev{
text-align:center;
margin-top:80px;
font-size:2.7vh;
font-family: 'Montserrat', sans-serif;
}
.info-ev h2{
font-family: 'Playfair Display', serif;
letter-spacing:0.2em;
}
/* de acuerdo a la pantalla*/
#media only screen and (max-width: 1200px) {
.logo{
height:20%;
width:20%;
}
.btn-container {
display: inline-block;
cursor: pointer;
position:absolute;
margin-top:60px;
}
.bar1, .bar2, .bar3 {
width: 35px;
height: 5px;
background-color: #333;
margin: 6px 0;
transition: 0.4s;
}
/* Rotate first bar */
.change .bar1 {
-webkit-transform: rotate(-45deg) translate(-9px, 6px) ;
transform: rotate(-45deg) translate(-9px, 6px) ;
}
/* Fade out the second bar */
.change .bar2 {
opacity: 0;
}
/* Rotate last bar */
.change .bar3 {
-webkit-transform: rotate(45deg) translate(-8px, -8px) ;
transform: rotate(45deg) translate(-8px, -8px) ;
}
.btn-header-container{
display:none;
margin-top:100px;
}
.btn_header{
display:none;
padding:10px;
background-color:floralwhite;
color:#931621;
font-family: 'Ubuntu', sans-serif;
font-size:13px;
text-transform: uppercase;
border:none;
opacity:80%;
}
.btn-header-toggle{
display:grid;
margin-top:100px;
}
.btn_toggle{
display:block;
padding:10px;
background-color:floralwhite;
color:#931621;
font-family: 'Ubuntu', sans-serif;
font-size:13px;
text-transform: uppercase;
border:none;
opacity:80%;
text-align:center;
border-bottom:1px ridge #931621;
}
.descripcion h1{
font-family: 'Montserrat', sans-serif;
text-transform: uppercase;
font-weight: 700;
letter-spacing: 0em;
line-height: 1em;
font-size: 32px;
padding:5px;
}
.descripcion {
color: #363732;
text-align: center;
margin:80px 5px 5px 5px;
font-size:17px;
}
.informacion{
display:flex;
justify-content:space-evenly;
flex-direction: column;
}
.grid-container{
grid-template-rows: repeat(6,700px);
}
.titulo-img{
font-size: 6vh;
}
.grid-feed{
display:grid;
grid-template-columns: 2fr;
grid-template-rows: 500px 500px;
margin:50px 50px 50px 50px;
grid-gap:4em;
overflow:hidden;
}
#mapa{
grid-column: 1/1;
grid-row:1/1;
}
#instagram-feed{
width:50%;
height:50%;
grid-column:1/1;
grid-row:2/2;
}
}
#media only screen and (max-width: 800px) {
.titulo-img{
font-size: 8vh;
}
.grid-eventos{
grid-template-rows: repeat(6,600px);
}
}
#media only screen and (max-width: 375px) {
.titulo-img{
font-size: 7vh;
}
.grid-container{
grid-template-rows: repeat(6,800px);
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href="https://fonts.googleapis.com/css?family=Amatic+SC|Kalam|Monoton|Montserrat|Playfair+Display|Ubuntu&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<script defer src="main.js"></script>
<title>Eventos Privados</title>
</head>
<body id="body-eventos">
<header class="top_bar">
<div class="btn-container" onclick="myFunction(this)">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
<img src="imagenes/logo.png" class="logo">
<div class="btn-header-container">
<button id="delivery" class="btn_header">Delivery</button>
<button id="btn_trabajo" class="btn_header">Trabajá con nosotros</button>
<button id="btn_contacto" class="btn_header">Contacto</button>
Home
</div>
</header>
<div class="grid-eventos">
<div id="foto-ev-1" class="foto-ev"> </div>
<div class="info-ev">
<h2>Tu comodidad nos importa</h2>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Fugiat omnis hic magnam excepturi ducimus ut deserunt at itaque amet ullam cum saepe aperiam, consequatur quidem porro eaque ex. Accusantium consectetur ipsum, hic beatae nisi itaque, aperiam est ratione exercitationem veniam delectus quae earum amet dignissimos repellendus tempore sequi alias omnis magnam quibusdam error odio sint. Sint nesciunt expedita delectus vitae porro voluptatem non, inventore enim, quaerat nihil sequi? Perspiciatis maxime quasi ex iure repudiandae amet nemo tempora est corporis iusto, optio suscipit natus fugiat voluptas velit hic sint voluptatem delectus necessitatibus error neque quibusdam facilis deserunt. Magnam, alias perspiciatis. Minus. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Fuga minima maiores, necessitatibus ducimus porro praesentium vero impedit illo nisi repudiandae numquam omnis quasi adipisci excepturi et nulla consequatur, recusandae molestias.</p>
</div>
<div id="foto-ev-2" class="foto-ev"> </div>
<div class="info-ev">
<h2>Tragos libres</h2>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Reprehenderit pariatur voluptatibus in, perferendis corrupti earum iure sed ipsum adipisci eum praesentium, unde quo mollitia laborum officiis ea. Optio, ipsam accusantium distinctio magni iure soluta quaerat sequi quidem ullam nesciunt? Sunt eos illum nam dolores maiores. Vitae soluta laudantium fugit accusantium voluptatum. Et voluptatibus ducimus facere rem tenetur exercitationem voluptatem consequuntur quaerat. Unde placeat dolore corporis error, omnis eum quidem nihil voluptatum odit velit quo quisquam quam modi aperiam fugit non tempore inventore esse dolor officia? Eaque, vel deleniti magnam soluta at cum reiciendis nihil itaque laudantium fugiat laboriosam ex molestias? Lorem ipsum dolor, sit amet consectetur adipisicing elit. Illo nobis aperiam non in minima inventore. Ratione deleniti quis rem itaque officiis quod neque tempore, impedit, ex delectus reprehenderit, numquam reiciendis.</p>
</div>
<div id="foto-ev-3" class="foto-ev"> </div>
<div class="info-ev">
<h2>Servicio de catering</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem soluta corrupti sapiente vitae distinctio deserunt odit animi nemo laborum quaerat, explicabo velit suscipit modi consequatur. Vitae, voluptate. Hic, iusto. Necessitatibus nemo unde molestiae error eos facilis quae ex. Dolor, repudiandae eos earum odit nesciunt quisquam, ea officiis consequuntur impedit exercitationem adipisci ad expedita illo iste nostrum laborum eius fuga, quis neque deleniti doloremque natus assumenda cum? Explicabo voluptate nihil dolorum reiciendis ratione totam temporibus atque, est harum quibusdam nostrum eaque saepe nobis dicta quidem similique repellendus aut cumque culpa dolorem! Error id quidem earum. Mollitia incidunt nam quasi maxime optio. Lorem ipsum dolor sit amet consectetur adipisicing elit. A similique explicabo iste, reprehenderit modi odit minima debitis rem? Dolores dolorem adipisci explicabo error deserunt labore pariatur impedit quas enim corrupti!</p>
</div>
</div>
<footer class="footer">
<div>
<p> Sprout Burger Co. <span> Av. Alem 400, BAHIA BLANCA, BS. AS, 8000, ARGENTINA (154) 385-3689 INFO#Sproutburger.com</span></p><br>
<p> © 2019 SPROUT BURGER</p>
</div>
</footer>
</body>
</html>
I am attempting to recreate the effect found on this page http://demos.themetrust.com/hero/, where there is a slight parallax effect as the content comes up and over the banner.
I am unsure how to go about doing this, and most of the parallax tutorials I've found are either wildly different styles of parallax or css driven ones that don't really add much to the site. Would someone be able to point me in the direction of a suitable tutorial or project that I can learn from. I've been searching under "parallax banner," but, perhaps I've got the name of the effect wrong?
Here is an example of pure CSS parallax scrolling. Key are lines like
transform: translateZ(.25px) scale(.75) translateX(-94%) translateY(-100%) rotate(2deg);
Maybe take a look at this Q&A too Pure CSS parallax without fixed background height?
Here is my example:
#import url(http://fonts.googleapis.com/css?family=Nunito);
html {
height: 100%;
overflow: hidden;
}
body {
margin: 0;
padding: 0;
perspective: 1px;
transform-style: preserve-3d;
height: 100%;
overflow-y: scroll;
overflow-x: hidden;
font-family: Nunito;
}
h1 {
font-size: 250%
}
p {
font-size: 140%;
line-height: 150%;
color: #333;
}
.slide {
position: relative;
padding: 25vh 10%;
min-height: 100vh;
width: 100vw;
box-sizing: border-box;
box-shadow: 0 -1px 10px rgba(0, 0, 0, .7);
transform-style: inherit;
}
img {
position: absolute;
top: 50%;
left: 35%;
width: 320px;
height: 240px;
transform: translateZ(.25px) scale(.75) translateX(-94%) translateY(-100%) rotate(2deg);
padding: 10px;
border-radius: 5px;
background: rgba(240, 230, 220, .7);
box-shadow: 0 0 8px rgba(0, 0, 0, .7);
}
img:last-of-type {
transform: translateZ(.4px) scale(.6) translateX(-104%) translateY(-40%) rotate(-5deg);
}
.slide:before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.title {
padding: 5%;
border-radius: 2px;
background: rgba(240, 230, 220, .7);
box-shadow: 0 0 8px rgba(0, 0, 0, .7);
}
.slide:nth-child(2n) .title {
margin-left: 0;
margin-right: auto;
}
.slide:nth-child(2n+1) .title {
margin-left: auto;
margin-right: 0;
}
.slide,
.slide:before {
background: 50% 50% / cover;
}
.header {
text-align: center;
font-size: 175%;
color: #fff;
text-shadow: 0 2px 2px #000;
}
#title {
background-image: url("http://lorempixel.com/640/480/abstract/6/");
background-attachment: fixed;
}
#slide1:before {
background-image: url("http://lorempixel.com/640/480/abstract/4/");
transform: translateZ(-1px) scale(2);
z-index: -1;
}
#slide2 {
background-image: url("http://lorempixel.com/640/480/abstract/3/");
background-attachment: fixed;
}
#slide3:before {
background-image: url("http://lorempixel.com/640/480/abstract/5/");
transform: translateZ(-1px) scale(2);
z-index: -1;
}
#slide4 {
background: #222;
}
<div id="title" class="slide header">
<h1>Your page title</h1>
</div>
<div id="slide1" class="slide">
<div class="title">
<h1>Part one</h1>
<p>Lorem ipsum dolor sit amet, in velit iudico mandamus sit, persius dolorum in per, postulant mnesarchum cu nam. Malis movet ornatus id vim, feugait detracto est ea, eam eruditi conceptam in. Ne sit explicari interesset. Labores perpetua cum at. Id
viris docendi denique vim.</p>
</div>
</div>
<div id="slide2" class="slide">
<div class="title">
<h1>Another part</h1>
<p>Lorem ipsum dolor sit amet, in velit iudico mandamus sit, persius dolorum in per, postulant mnesarchum cu nam. Malis movet ornatus id vim, feugait detracto est ea, eam eruditi conceptam in. Ne sit explicari interesset. Labores perpetua cum at. Id
viris docendi denique vim.</p>
</div>
</div>
<div id="slide3" class="slide">
<div class="title">
<h1>Addendum</h1>
<p>Lorem ipsum dolor sit amet, in velit iudico mandamus sit, persius dolorum in per, postulant mnesarchum cu nam. Malis movet ornatus id vim, feugait detracto est ea, eam eruditi conceptam in. Ne sit explicari interesset. Labores perpetua cum at. Id
viris docendi denique vim.</p>
</div>
</div>
<div id="slide4" class="slide header">
<h1>The End</h1>
</div>
The trick as I understand it, is to set the background photo in css with "fixed" at the end of the url. Background-size helps to fit the photo into the container and the reset is pretty much unnecessary.
#example{
margin-top:10em;
background:url('https://static.pexels.com/photos/3247/nature-forest-industry-rails.jpg') fixed;
background-size: cover;
height:300px;
}
body{
height:2000px;
}
<div id="example"></div>
I have an accordion menu with tabs. When you click on the tabs, information is displayed below one of them, by sliding up and down smoothly.
The problem is that there is a stutter in the animation, during slideUp and slideDown. I also tried animate and adjusting some of the css, but I can't figure it out.
If it helps, here's the fiddle.
HTML:
<div class="project-container">
These don't slide well:
<ul class="project-nav">
<li class="project-tab" id="project-tab-1"><a id="project-tab-link" href="#" class="active">Tab 1</a>
<section class="is-open">
<p id="current-project-title">TITLE</p>
<p>TEXT HERE</p>
</section>
</li>
<li class="project-tab" id="project-tab-2"><a id="project-tab-link" href="#">Tab 2</a>
<section>
INFO HERE<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</section>
</li>
</ul>
</div>
<br>
But this slides VERY well:
<br>
<button class="toggle-info">toggle slider<i class="glyphicon glyphicon-chevron-down"></i></button>
<section class="info-container">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </section>
Javascript:
$(document).ready(function() {
var Tabs = {
el: {
nav: $(".project-nav"),
tabs: $(".project-nav > .project-tab > a"),
panels: $(".project-nav > .project-tab > section"),
},
init: function() {
Tabs.bindUIActions();
},
bindUIActions: function() {
Tabs.el.nav
.on(
'click',
'.project-tab > a:not(.active)',
function(event) {
Tabs.deactivateAll();
Tabs.activateTab(event);
event.preventDefault();
}
);
},
deactivateAll: function() {
Tabs.el.tabs.removeClass("active");
Tabs.el.panels.removeClass("is-open").slideUp('slow');
},
activateTab: function(event) {
$(event.target)
.addClass("active")
.next()
.addClass("is-open").slideDown('slow');
}
};
Tabs.init();
////// Slide Doesn't Work For Tabs
$('.project-tab section.is-open').slideDown('slow');
////// Slide Works For Toggle Button
$('.toggle-info').click(function() {
$('.info-container').slideToggle('slow');
$("i", this).toggleClass("glyphicon glyphicon-chevron-right glyphicon glyphicon-chevron-down");
});
});
This your problem
.project-nav section, .project-nav section.is-open, .project-nav .project-tab a:hover, .project-nav .project-tab a.active, #current-project-link,
#current-project-link:hover, .project-nav section.is-open, .project-nav section {
-webkit-transition: all .5s;
-moz-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
You add transition css to slide element, it make slide effect not working correctly, you must remove it
you can try this jsfiddle
I was able to achieve the desired effect using CSS, instead of jquery. I used max-height transitions to make the tabs slide both up and down smoothly.
Here's the updated fiddle.
And here's the new CSS:
///// RESPONSIVE ACCORDION TO TABS
.project-container {
display: block;
}
.project-nav {
list-style: none;
position: relative;
}
.project-nav a:active{
opacity:1;
}
.project-nav .project-tab {
display: inline;
}
.project-nav > .project-tab > a {
display: inline-block;
padding: 10px 15px;
background-color: #00A88C;
border: solid 1px #00A88C;
border-radius: 0px 10px;
text-decoration: none;
color: #fff;
width:40%;
font-size: 30pt;
clear: both;
text-align: center;
}
#project-tab-1 {
margin-right: 2%;
margin-left: 7%;
}
#project-tab-2 {
margin-left: 2%;
}
#project-tab-link:hover {
background-color: #13ebc7;
border-color: #13ebc7;
}
#project-tab-link.active {
color: #00A88C!important;
background-color: rgba(19, 235, 199, 0)!important;
}
#project-tab-link.active:hover {
border-color: #00A88C;
}
.project-nav section {
position: absolute;
top: -9999px;
left: -9999px;
float: left;
color:#5c5c5c;
overflow: hidden;
border: solid 1px #00A88C;
width:100%;
margin-top:10px;
padding-bottom: 15px;
opacity: 0;
}
.project-nav section.is-open {
position: static;
opacity: 100;
}
.project-tab section p {
font-family:'century gothic';
padding: 0px 30px;
}
.project-tab section p:empty {
display: none;
}
#current-project-title{
font-size: 16pt;
}
#current-project-link {
float: right;
padding: 5px;
background: #00A88C;
color:#fff;
margin-right: 30px;
width: auto;
}
#current-project-link:hover {
background: #13ebc7;
}
.project-nav section, .project-nav section.is-open, .project-nav .project-tab a:hover, .project-nav .project-tab a.active, #current-project-link,
#current-project-link:hover, .project-nav section.is-open, .project-nav section {
-webkit-transition: all .5s;
-moz-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
#media only screen and (max-width: 730px) {
#front-page-textbox{
background: #0f2347;
color: #fff;
}
.project-container {
margin-bottom: 10px;
}
.project-nav .project-tab a {
display: block;
width:100%;
border-radius: 0px;
}
#project-tab-1, #project-tab-2 {
margin-left: 0;
margin-right: 0;
}
.project-nav .project-tab a.active {
border: solid 1px #13ebc7;
}
.project-nav section {
margin:0;
position: relative;
top: auto;
left: auto;
float: none;
max-height:0;
padding-bottom: 0px;
opacity: 100;
}
.project-nav section.is-open {
border-radius: 0px;
border-top: none;
max-height: 1200px;
}
.project-tab > a:after {
font-family: 'Glyphicons Halflings';
content: "\e080";
float: right;
font-size: 20pt;
margin-top: 10px;
}
.project-tab > a.active:after{
font-family: 'Glyphicons Halflings';
content: "\e114";
float:right;
font-size: 20pt;
margin-top: 10px;
}
/// TOGGLE BUTTON
.toggle-info {
display: block;
width: 100%;
color: #f5f5f5;
padding: 10px 15px;
background-color: #00A88C;
font-size: 30pt;
}
.toggle-info i{
font-size: 10pt;
margin-top: 10px;
float: right;
display: block;
}
.toggle-info:hover {
background-color: #13ebc7;
}
.toggle-info, .toggle-info:hover {
-webkit-transition: all .5s;
-moz-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
.info-container{
padding: 10px 15px;
border: solid 1px #00A88C;
}