white space when looking at responsive - javascript

I'm not sure if it's a bug, but I see whitespace (sometimes) when looking at the responsive side of things in the chrome browser. I said sometimes because my website manages to fix itself when I refresh. This problem only happens when working with responsive side.The image is how it looks like to me.
const fade = document.querySelectorAll('.fade');
window.addEventListener('scroll', checkBoxes);
checkBoxes();
function checkBoxes() {
const triggerBottom = window.innerHeight / 3.5 * 4;
fade.forEach(fade => {
const fadeTop = fade.getBoundingClientRect().top;
if(fadeTop < triggerBottom) {
fade.classList.add('show');
} else {
fade.classList.remove('show');
}
})
}
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
:root {
--shade-background: #FAFAFA;
}
ul {
list-style-type: none;
}
body {
background-color: #fff;
overflow-x: hidden;
width: 100%;
margin: 0;
padding: 0;
font-family: "SF Pro Text","SF Pro Icons","Helvetica Neue","Helvetica","Arial",sans-serif;
}
.intro-container {
position: relative;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.intro-container::before {
content: '';
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
background-image: url(../images/airpods.jpg);
background-size: cover;
background-position:center;
opacity: .9.5;
}
.intro-container .content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
z-index: 1;
}
.content h1 {
font-size: 5em;
font-weight: 600;
margin-bottom: 10px;
}
.content p {
margin-bottom: 20px;
font-size: .9rem;
margin-right: 5px;
}
/* MAIN CONTENT*/
.chapternav {
background: rgba(245,245,247,0.7);
padding: 0;
padding-top: 8px;
padding-bottom: 8px;
text-align: center;
height: 100px;
z-index: 9987;
width: 100%;
position: relative;
overflow: hidden;
}
.chapternav-wrapper {
position: relative;
height: 100%;
z-index: 1;
}
.chapternav-items {
margin: 0 34px;
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
-webkit-overflow-scrolling: touch;
-ms-overflow-style: none;
list-style: none;
padding-bottom: 50px;
}
.chapternav-item {
display: inline-block;
vertical-align: top;
margin: 0 -.11765em;
padding: 0 20px;
}
.chapternav-label {
font-size: 12px;
line-height: 1.33337;
font-weight: 400;
letter-spacing: -.01em;
font-family: "SF Pro Text","SF Pro Icons","Helvetica Neue","Helvetica","Arial",sans-serif;
display: block;
margin: 0;
font-size: 17px;
}
/* nav items */
.container {
margin: 0 auto; /* this will center the page */
max-width: 960px; /* use your width here */
}
.container h2 {
text-align: center;
padding: 2rem;
}
.fade {
display: flex;
align-items: center;
justify-content: space-evenly;
background-color: var(--shade-background);
margin-bottom: 2rem;
flex-wrap: wrap;
height: 450px;
transform: translateX(400%);
transition: transform 2s ease;
/* animation: fadeIn 4s; */
}
.fade h3 {
margin-bottom: 1rem;
font-size: 40px;
line-height: 1.1;
font-family: "SF Pro Display","SF Pro Icons","Helvetica Neue","Helvetica","Arial",sans-serif;
font-weight: 600;
letter-spacing: 0em;
}
.fade p {
max-width: 300px;
font-size: 17px;
line-height: 1.23536;
font-weight: 400;
letter-spacing: -.022em;
font-family: "SF Pro Text","SF Pro Icons","Helvetica Neue","Helvetica","Arial",sans-serif;
font-weight: 600;
margin: 15px 0;
}
.fade img {
width: 400px;
height: 300px;
border-radius: 5px;
}
.learn-copy {
color: #0071e3;
margin-top: 3rem;
cursor: pointer;
}
.icon-arrow {
color: #0071e3;
cursor: pointer;
}
.learn-copy:hover {
text-decoration: underline;
}
/* javascript */
.fade:nth-of-type(even) {
transform: translateX(-400%);
}
.fade.show {
transform: translateX(0);
}
#keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}
/* end of javascript */
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" integrity="sha512-HK5fgLBL+xu6dm/Ii3z4xhlSUyZgTT9tuc/hSrtw6uzJOvgRr2a9jyxxT1ely+B+xFAmJKVSTbpM/CuL7qxO8w==" crossorigin="anonymous" />
<link href="https://fonts.googleapis.com/css2?family=Maven+Pro:wght#400;600&display=swap" rel="stylesheet">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="intro-container">
<div class="content">
<h1>AirPods</h1>
<p>Don't Just Listen, Feel It</p>
<!-- <button>Explore</button> -->
<!-- <i class="fa fa-arrow-down"></i> -->
</div>
</div>
<nav class='chapternav'>
<div class="chapternav-wrapper">
<ul class="chapternav-items">
<li class="chapternav-item">
<img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMSAxM2gtMXYtMWgxdjF6bTIyLTFoLTF2MWgxdi0xem0tMjAtMWgtMXYzaDF2LTN6bTE4IDBoLTF2M2gxdi0zem0tMTQgMGgtMXYzaDF2LTN6bTEwLTFoLTF2NWgxdi01em0tMTIgMGgtMXY1aDF2LTV6bTE0LTFoLTF2N2gxdi03em0tMTAgMGgtMXY3aDF2LTd6bTItMmgtMXYxMGgxdi0xMHptNCAwaC0xdjEwaDF2LTEwem0tMi0yaC0xdjE0aDF2LTE0eiIvPjwvc3ZnPg==">
<span class='chapternav-label'>AirPods</span>
<li class="chapternav-item">
<img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMSAxM2gtMXYtMWgxdjF6bTIyLTFoLTF2MWgxdi0xem0tMjAtMWgtMXYzaDF2LTN6bTE4IDBoLTF2M2gxdi0zem0tMTQgMGgtMXYzaDF2LTN6bTEwLTFoLTF2NWgxdi01em0tMTIgMGgtMXY1aDF2LTV6bTE0LTFoLTF2N2gxdi03em0tMTAgMGgtMXY3aDF2LTd6bTItMmgtMXYxMGgxdi0xMHptNCAwaC0xdjEwaDF2LTEwem0tMi0yaC0xdjE0aDF2LTE0eiIvPjwvc3ZnPg==">
<span class='chapternav-label'>AirPods</span>
</li>
<li class="chapternav-item">
<img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMSAxM2gtMXYtMWgxdjF6bTIyLTFoLTF2MWgxdi0xem0tMjAtMWgtMXYzaDF2LTN6bTE4IDBoLTF2M2gxdi0zem0tMTQgMGgtMXYzaDF2LTN6bTEwLTFoLTF2NWgxdi01em0tMTIgMGgtMXY1aDF2LTV6bTE0LTFoLTF2N2gxdi03em0tMTAgMGgtMXY3aDF2LTd6bTItMmgtMXYxMGgxdi0xMHptNCAwaC0xdjEwaDF2LTEwem0tMi0yaC0xdjE0aDF2LTE0eiIvPjwvc3ZnPg==">
<span class='chapternav-label'>AirPods</span>
</li>
</ul>
</div>
</nav>
<div class="container">
<h2>Wireless to the Fullest</h2>
<div class="fade">
<img src="../images/earphonesbackdrop.jpg" alt="">
<div class="text">
<h3>Get 3% <br>Daily Cash back <br>
with Apple Card.</h3>
<p>Consectetur adipisicing elit.
Asperiores pariatur modi quis omnis non obcaecati inventore
ad amet voluptates commodi. etxcepturi, illum.</p>
<span class="learn-copy">Learn more</span>
</div>
</div>
<div class="fade">
<div class="text">
<h3>Say it in a way <br>only you can.</h3>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Asperiores pariatur commodi. etxcepturi, illum modi amet.</p>
<span class="learn-copy">Learn more</span>
</div>
<img src="../images/airpods2.jpg " alt="">
</div>
<div class="fade">
<img src="../images/airpods3.jpg " alt="">
<div class="text">
<h3>Magic runs <br>in the family.</h3>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Asperiores pariatur commodi. etxcepturi, illumdolar illum.</p>
<span class="learn-copy">Learn more</span>
</div>
</div>
</div>
<script src='script.js'></script>
</body>
</html>

It's all thank to your transform: translateX(400%); that set's element far into right side.
Default browser behaviour will be to stretch body to fit all elements in it. That's why it looks like on your screenshot.
Try adding overflow-x: hidden to your .container class and see if that helps you.

Related

Navigation menu sidebar not closing with click on document

I made the header menu of my website become a sidebar with the screen width. Everything was working fine, the menu could be toggled by clicking the icon. But then i noticed the majority of websites had this property that the menu would close if the user clicks anywhere in the screen. I tryed everything i could but everythime i add the event listener to the code (to remove the class that makes the menu visible), the onclick event that adds the class stops working.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Portfolio.</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght#300;400;700&display=swap" rel="stylesheet">
<link rel="apple-touch-icon" sizes="180x180" href="Favicon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="Favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="Favicon/favicon-16x16.png">
<link rel="shortcut icon" href="Favicon/favicon.ico" type="image/x-icon" />
<link rel="manifest" href="Favicon/site.webmanifest">
<link rel="stylesheet" href="https://unpkg.com/boxicons#latest/css/boxicons.min.css">
<link rel="stylesheet" href="style.css">
<script src="script.js" defer></script>
</head>
<body>
<!-- Header -->
<header id="header">
<div id="container">
<nav id="nav-bar">
Portfolio.
<ul id="nav-menu">
<div id="nav"><li><a id="link" href="#about-me">Sobre mim</a></li></div>
<div id="nav"><li><a id="link" href="#experience">Experiência</a></li></div>
<div id="nav"><li><a id="link" href="#projects">Projetos</a></li></div>
<div id="nav"><li><a id="link" href="#habilities">Competências</a></li></div>
<div id="nav"><button id="resume-btn">Currículo</button></li></div>
</ul>
<div class="menu-icon">
<h3 onclick="handleMenuToggle()">&#9776</h3>
</div>
</nav>
</div>
</header>
<!-- Sections -->
<main>
<section id="hero"> <!-- Main section -->
<div id="hero-txt">
<h2>
Seja bem vindo, eu sou
</h2>
<h1>
Yan Calvo
</h1>
<p>
Estudante de Ciência da computação e desenvolvedor web
</p>
<div class="social">
<i class='bx bxl-linkedin' ></i>
<i class='bx bxl-github' ></i>
</div>
</div>
</section>
<section id="about-me"> <!-- About section -->
<div id="txt-container" class="container reveal fade-left">
<h2>Sobre mim</h2>
<p>
Sou estudante de Ciência da computação, também
focado em aprender tecnologias de forma
independente. No momento me encontro dedicado a
aprimorar as minhas habilidades através da
experiência profissional e contato com outros
profissionais dedicados.<br><br>
O que mais me entusiasma em trabalhar com programação é poder projetar e criar coisas que tenham propósito e resolvam problemas reais.
Apoiar-se na pesquisa e percepção do cliente, encontrar as formas certas e dinâmicas de resolver determinados problemas, aprender com o processo e, em seguida, iterar e melhora-lo é a chave para um ótimo design.
</p>
</div>
<div class="container reveal fade-left">
<h4 id="quote">
“<br>
Knowledge has to be improved, challenged, and increased constantly, or it vanishes.<br>
”
</h4>
<h5>― Peter Drucker</h5>
</div>
</section>
<section id="experience"> <!-- Experience section -->
<div id="txt-container" class="container reveal fade-right">
<h2>Onde trabalhei </h2>
<p>
Ainda em busca de oportunidades profissionais
</p>
</div>
</section>
<section id="projects"> <!-- Projects section -->
<div id="txt-container" class="container reveal fade-left">
<h2>Projetos</h2>
<p>Trabalhos pessoais</p>
</div>
<div id="portfolio-content" class="container reveal fade-left">
<div class="col">
<img src="Img/work3.jpg">
<div class="layer">
<h3>Web Design</h3>
<h5>Popup</h5>
</div>
</div>
<div class="col">
<img src="Img/work3.jpg">
<div class="layer">
<h3>Web Design</h3>
<h5>Popup</h5>
</div>
</div>
<div class="col">
<img src="Img/work3.jpg">
<div class="layer">
<h3>Web Design</h3>
<h5>Popup</h5>
</div>
</div>
<div class="col">
<img src="Img/work3.jpg">
<div class="layer">
<h3>Web Design</h3>
<h5>Popup</h5>
</div>
</div>
<div class="col">
<img src="Img/work3.jpg">
<div class="layer">
<h3>Web Design</h3>
<h5>Popup</h5>
</div>
</div>
<div class="col">
<img src="Img/work3.jpg">
<div class="layer">
<h3>Web Design</h3>
<h5>Popup</h5>
</div>
</div>
</div>
</section>
<section id="habilities"> <!-- Contact section -->
<div id="txt-container" class="container reveal fade-right">
<h2>Competências</h2>
<div id="habilities-container">
<div id="hability-icons-container"></div>
<img id="hability-icon" src="Img/icons8-javascript-144.png" alt="">
<img id="hability-icon" src="Img/icons8-html-5-144.png" alt="">
<img id="hability-icon" src="Img/icons8-css3-144.png" alt="">
<img id="hability-icon" src="Img/icons8-git-144.png" alt="">
<img id="hability-icon" src="Img/icons8-github-128.png" alt="">
<div id="habilities-description"></div>
</div>
</div>
</section>
</main>
<!-- Footer -->
<footer id="footer">
<div id="footer-copyright">
<h6>Projetado por Yan Calvo</h6>
</div>
<div id="social">
<h6>Email para contato: yancalvo#gmail.com</h6>
</div>
</footer>
</body>
</html>
CSS:
* {
margin: 0;
padding: 0;
font-family: 'Poppins', sans-serif;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
scroll-padding-top: 70px;
}
body {
position: relative;
background-color: #ece7e1;
}
html, body {
overflow-x: hidden;
}
/* Header */
header {
position: fixed;
top: 0;
width: 100%;
background-color: rgba(27,26,33,255);
z-index: 200;
}
#container {
width: 1800px;
margin: auto;
}
#nav-bar {
width: 95%;
margin: auto;
min-height: 70px;
display: flex;
justify-content: space-between;
align-items: center;
}
#nav-brand {
color: white;
text-decoration: none;
font-size: 30px;
}
#nav-menu {
display: flex;
justify-content: space-between;
align-items: center;
}
#nav {
margin: auto 30px;
}
.menu-icon {
display: none;
}
#link {
margin-right: 15px;
color: white;
text-decoration: none;
transition: color 0.15s;
}
#link:hover {
color: gray;
font-style: italic;
}
#resume-btn {
width: 100px;
font-weight: bold;
font-size: 15px;
color: rgba(27,26,33,255);
background-color: #ece7e1;
border-radius: 23.5px;
border-style: solid;
border-color: #ece7e1;
padding: 10px;
cursor: pointer;
transition: color 0.15s, border-color 0.15s, width 1.0s;
}
#resume-btn:hover {
width: 150px;
}
/* Sections */
main {
padding-top: 70px;
}
section {
padding: 0px 100px;
}
#hero {
position: relative;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
grid-gap: 4rem;
}
.social a {
color: white;
width: 35px;
height: 35px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
background: rgba(27,26,33,255);
font-size: 17px;
margin-right: 22px;
margin-bottom: 30px;
margin-top: 20px;
}
.social a:hover{
transform: scale(1.1);
transition: .5s;
}
#about-me {
background-color: #191919;
min-height: 500px;
padding-top: 40px;
margin-bottom: 100px;
display: grid;
grid-template-columns: repeat(2, 2fr);
grid-gap: 2rem;
white-space: normal;
}
#experience {
min-height: 300px;
padding-top: 40px;
margin-bottom: 100px;
display: flex;
justify-content: center;
text-align: center;
white-space: normal;
}
#projects {
background-color: #191919;
min-height: 800px;
padding-top: 40px;
margin-bottom: 100px;
display: flex;
flex-direction: column;
text-align: center;
align-items: center;
grid-gap: 2rem;
}
#portfolio-content {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, auto));
grid-gap: 2rem;
align-items: center;
margin-top: 5rem;
text-align: center;
cursor: pointer;
}
.layer{
background: transparent;
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
border-radius: 12px;
transition: all .40s;
}
.layer:hover{
background: linear-gradient(rgba(0,0,0,0.5) 0%, #191919);
}
.layer h3{
position: absolute;
width: 100%;
font-size: 25px;
font-weight: 500;
color: white;
bottom: 0;
left: 50%;
transform: translateX(-50%);
opacity: 0;
transition: all .40s;
margin-bottom: 7px;
}
.layer:hover h3{
bottom: 52%;
opacity: 1;
}
.layer h5{
position: absolute;
width: 100%;
font-size:17px;
font-weight: 500;
color: white;
bottom: 0;
left: 50%;
transform: translateX(-50%);
opacity: 0;
transition: all .40s;
}
.layer:hover h5{
bottom: 48%;
opacity: 1;
}
.col {
position: relative;
}
.col img {
max-width: 100%;
width: 550px;
height: auto;
object-fit: cover;
border-radius: 12px;
}
#habilities {
min-height: 500px;
width: 90%;
margin-left: auto;
margin-right: auto;
display: flex;
justify-content: center;
text-align: center;
}
li {
list-style: none;
}
h1 {
font-size: 90px;
color: rgba(27,26,33,255);
margin: 10px 0px 25px;
}
h2 {
font-size: 30px;
margin-bottom: 60px;
}
#about-me h2,
#projects h2
{
color: #ece7e1;
}
#experience h2,
#habilities h2 {
color: #191919;
}
#habilities-container {
display: flex;
flex-direction: column;
align-items: ;
}
#hability-icon {
width: 144px;
height: 144px;
transition: all 0.8s;
}
#hability-icon:hover {
height: 155px;
width: 155px;
}
h6 {
font-size: 20px;
color: white;
}
h4 {
font-size: 40px;
color: #ece7e1;
font-style: italic;
}
h5 {
color: rgba(27,26,33,255);
}
p {
color: gray;
text-align: justify;
}
#footer {
background-color: #191919;
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 100px;
}
.reveal {
position: relative;
opacity: 0;
}
.reveal.active {
opacity: 1;
}
.active.fade-left {
animation: fade-left 0.5s ease-in;
}
.active.fade-right {
animation: fade-right 0.5s ease-in;
}
#keyframes fade-left {
0% {
transform: translateX(-100px);
opacity: 0;
}
100% {
transform: translateX(0);
opacity: 1;
}
}
#keyframes fade-right {
0% {
transform: translateX(100px);
opacity: 0;
}
100% {
transform: translateX(0);
opacity: 1;
}
}
#media(max-width:1800px) {
#container {
width: 100%;
}
}
#media only screen and (max-width: 1015px) {
#nav-menu {
position: fixed;
top: 70px;
right: -100%;
display: block;
background-color: rgba(27,26,33,255);
margin: 0;
height: 100%;
-webkit-box-shadow: 1px 6px 0px 6px rgba(0,0,0,0.13);
-moz-box-shadow: 1px 6px 0px 6px rgba(0,0,0,0.13);
box-shadow: 1px 6px 0px 6px rgba(0,0,0,0.13);
width: 250px;
transition: all 0.3s ease;
}
#nav-menu.show-nav {
right: 0;
}
#nav {
text-align: center;
margin: 20px auto;
}
.menu-icon {
color: white;
display: block;
margin: auto 0;
padding: 0 20px;
font-size: 30px;
cursor: pointer;
}
#brush-img {
display: none;
}
#about-me {
display: flex;
flex-direction: column;
}
}
Javascript:
//Toggle sidebar
const navContainer = document.getElementById('nav-menu')
function handleMenuToggle() {
navContainer.classList.add('show-nav')
}
document.onclick = function(e) {
if (e.target.id !== 'nav-menu' && e.target.id !== 'show-nav') {
navContainer.classList.remove('show-nav')
}
}
//Scroll animation
function reveal() {
var reveals = document.querySelectorAll(".reveal");
for (var i = 0; i < reveals.length; i++) {
var windowHeight = window.innerHeight;
var elementTop = reveals[i].getBoundingClientRect().top;
var elementVisible = 150;
if (elementTop < windowHeight - elementVisible) {
reveals[i].classList.add("active");
} else {
reveals[i].classList.remove("active");
}
}
}
window.addEventListener("scroll", reveal);
I just cannot make it work, i'm probably missing something or making some ugly mistakes in the structure of the code.
By taking a look at : this question you could try to do it this way : create a navbar sublcass called like :
navbar.open , and assign it these css properties :
/* If you use an id use #id_name or .classname if you use a class
*/
#id_of_navbar.open {
right: 0;
}
/* OR
.classname.open {
right: 0;
}
*/
And then add to your javascript :
var yournavbar = document.getElementById("id_of_navbar")
//Close menu when document is clicked anywhere
document.onclick = function () {
yournavbar.classList.remove("open");
};
And if you want your navbar to close if you click a part of it, just add this function :
//stop propagation on the side nav element
yournavbar.onclick = function(e) {
e.stopPropagation()
}
I tried that solution and it worked for me so I really hope it helps! Let me know if you are still trying to make it work without success despite this solution.

Multiple popup windows - information is the same in all of them

I have a problem with my modals. I'm creating my first portfolio website using js and the popup window is not working as I expect.
Everything works fine, only when I open the portfolio item and click "project details" each popup window has the same information about the item. Project name, category etc. do not change. What could be the problem? I will be grateful for your help.
and JavaScript, HTML and CSS:
const filterContainer = document.querySelector(".portfolio-filter"),
portfolioItemsContainer = document.querySelector(".portfolio-items"),
portfolioItems = document.querySelectorAll(".portfolio-item"),
popup = document.querySelector(".portfolio-popup"),
prevBtn = popup.querySelector(".pp-prev"),
nextBtn = popup.querySelector(".pp-next"),
closeBtn = popup.querySelector(".pp-close"),
projectDetailsContainer = popup.querySelector(".pp-details"),
projectDetailsBtn = popup.querySelector(".pp-project-details-btn");
let itemIndex, slideIndex, screenshots;
/* filter portfolio items*/
filterContainer.addEventListener("click", (event) => {
if (event.target.classList.contains("filter-item") &&
!event.target.classList.contains("active")) {
filterContainer.querySelector(".active").classList.remove("outer-shadow",
"active");
event.target.classList.add("active", "outer-shadow");
const target = event.target.getAttribute("data-target");
portfolioItems.forEach((item) => {
if (target == item.getAttribute("data-category") || target === 'all') {
item.classList.remove("hide");
item.classList.add("show");
} else {
item.classList.remove("show");
item.classList.add("hide");
}
})
}
})
portfolioItemsContainer.addEventListener("click", (event) => {
if (event.target.closest(".portfolio-item-inner")) {
const portfolioItem = event.target.closest(".portfolio-item-inner").
parentElement;
itemIndex = Array.from(portfolioItem.parentElement.children).indexOf(
portfolioItem);
screenshots = portfolioItems[itemIndex].querySelector(".portfolio-item-img img").getAttribute("data-screenshots");
screenshots = screenshots.split(",");
if (screenshots.length === 1) {
prevBtn.style.display = "none";
nextBtn.style.display = "none";
} else {
prevBtn.style.display = "block";
nextBtn.style.display = "block";
}
slideIndex = 0;
popupToggle();
popupSlideshow();
popupDetails();
}
})
closeBtn.addEventListener("click", () => {
popupToggle();
if (projectDetailsContainer.classList.contains("active")) {
popupDetails();
}
})
function popupToggle() {
popup.classList.toggle("open");
bodyScrollingToggle();
}
function popupSlideshow() {
const imgSrc = screenshots[slideIndex];
const popupImg = popup.querySelector(".pp-img");
popupImg.src = imgSrc;
popup.querySelector(".pp-counter").innerHTML = (slideIndex + 1) + " of " +
screenshots.length;
}
nextBtn.addEventListener("click", () => {
if (slideIndex === screenshots.length - 1) {
slideIndex = 0;
} else {
slideIndex++;
}
popupSlideshow();
})
prevBtn.addEventListener("click", () => {
if (slideIndex === 0) {
slideIndex = screenshots.length - 1
} else {
slideIndex--;
}
popupSlideshow();
})
function popupDetails() {
if (!portfolioItems[itemIndex].querySelector(".portfolio-item-details")) {
projectDetailsBtn.style.display = "none";
return;
}
projectDetailsBtn.style.display = "block";
const details = portfolioItems[itemIndex].querySelector(".portfolio-item-details").innerHTML;
popup.querySelector(".pp-project-details").innerHTML = details;
const title = portfolioItems[itemIndex].querySelector(".portfolio-item-title").innerHTML;
popup.querySelector(".pp-title h2").innerHTML = title;
const category = portfolioItems[itemIndex].getAttribute("data-category");
console.log(category);
popup.querySelector(".pp-project-category").innerHTML = category.split("-").join("-");
}
projectDetailsBtn.addEventListener("click", () => {
popupDetails();
})
function popupDetails() {
if (projectDetailsContainer.classList.contains("active")) {
projectDetailsBtn.querySelector("i").classList.remove("fa-minus");
projectDetailsBtn.querySelector("i").classList.add("fa-plus");
projectDetailsContainer.classList.remove("active");
projectDetailsContainer.style.maxHeight = 0 + "px"
} else {
projectDetailsBtn.querySelector("i").classList.remove("fa-plus");
projectDetailsBtn.querySelector("i").classList.add("fa-minus");
projectDetailsContainer.classList.add("active");
projectDetailsContainer.style.maxHeight = projectDetailsContainer.
scrollHeight + "px";
popup.scrollTo(0, projectDetailsContainer.offsetTop);
}
}
#import url('https://fonts.googleapis.com/css2?family=Clicker+Script&family=Montserrat&family=Oooh+Baby&family=Poppins:wght#200;300;400;500;600&display=swap');
:root {
--bg-black-900: #f2f2fc;
--bg-black-100: #fdf9ff;
--bg-black-50: #e8dfec;
--text-black-900: #302e4d;
--text-black-700: #504e70;
--outer-shadow: 3px 3px 3px #d0d0d0, -3px -3px 3px #f8f8f8;
--outer-shadow-0: 0 0 0 #d0d0d0, 0 0 0 #f8f8f8;
--inner-shadow: inset 3px 3px 3px #d0d0d0, inset -3px -3px 3px #f8f8f8;
--bg-opacity: rgba(255, 255, 255, 0.5);
}
.padd-10 {
padding-bottom: 30px;
}
body {
line-height: 1.5;
font-size: 16px;
font-family: 'Poppins' sans-serif;
}
body.stop-scrolling {
overflow-y: hidden;
}
* {
margin: 0;
padding: 0;
outline: none;
text-decoration: none;
box-sizing: border-box;
font-family: 'Montserrat', sans-serif;
}
::before,
::after {
box-sizing: border-box;
}
ul {
list-style: none;
}
.section {
background: var(--bg-black-900);
min-height: 100vh;
display: block;
padding: 0 30px;
opacity: 1;
}
.hidden {
display: none !important;
}
.padd-15 {
padding-left: 15px;
padding-right: 15px;
}
.container {
max-width: 1100px;
width: 100%;
margin: auto;
}
.containerr {
max-width: 1100px;
width: 100%;
margin: auto;
}
.section .containerr {
padding-top: 100px;
padding-bottom: 70px;
}
.section .container {
padding-top: 60px;
padding-bottom: 70px;
}
.section-title {
flex: 0 0 100%;
max-width: 100%;
margin-bottom: 60px;
}
.section-title h2 {
font-size: 40px;
color: var(--text-black-900);
font-weight: 700;
position: relative;
}
.section-title h2::before {
content: '';
height: 4px;
width: 50px;
background-color: var(--skin-color);
position: absolute;
top: 100%;
left: 0;
}
.section-title h2::after {
content: '';
height: 4px;
width: 25px;
background-color: var(--skin-color);
position: absolute;
top: 100%;
left: 0;
margin-top: 8px;
}
.row {
display: flex;
flex-wrap: wrap;
margin-left: -15px;
margin-right: -15px;
position: relative;
}
/* portfolio */
.portfolio .portfolio-filter {
padding: 0 15px;
flex: 0 0 100%;
max-width: 100%;
text-align: center;
margin-bottom: 20px;
}
.portfolio .section-title {
margin-bottom: 40px;
}
.portfolio .filter-item {
display: inline-block;
margin: 0 5px 10px;
padding: 5px 10px;
border-radius: 30px;
cursor: pointer;
font-weight: 500;
color: var(--text-black-700);
text-transform: capitalize;
font-size: 16px;
transition: all 0.3s ease;
}
.portfolio .filter-item:hover:not(.active) {
opacity: 0.6;
}
.portfolio .filter-item.active {
color: var(--skin-color);
}
.portfolio .portfolio-item {
flex: 0 0 33.33%;
max-width: 33.33%;
padding: 15px;
display: flex;
flex-wrap: wrap;
}
.portfolio .portfolio-item-inner {
padding: 15px;
border-radius: 5px;
cursor: pointer;
width: 100%;
}
.portfolio .portfolio-item-details {
display: none;
}
.portfolio img {
border-radius: 5px;
width: 100%;
transition: all 0.3s ease;
}
.portfolioo-item-img {
position: relative;
}
.portfolio .portfolio-item.hide {
display: none;
}
.portfolio .portfolio-item.show {
display: block;
animation: fadeInTop 0.5s ease;
}
.portfolio .view-project {
text-transform: capitalize;
font-size: 16px;
font-weight: 500;
color: var(--skin-color);
display: flex;
z-index: -1;
opacity: 0;
}
.portfolio-item-title {
margin-top: -18px;
}
.portfolio .portfolio-item-inner:hover img {
transform: translateY(-23px);
}
.portfolio .portfolio-item-inner:hover .view-project {
transform: translateY(-23px);
transition: all 0.3s ease;
opacity: 1;
}
.portfolio .portfolio-item-inner p {
font-size: 16px;
color: var(--text-black-700);
text-transform: capitalize;
}
.btn1 {
border-radius: 30px;
font-size: 16px;
font-weight: 500;
color: var(--text-black-900);
cursor: pointer;
padding: 0 15px;
top: 15px;
height: 40px;
line-height: 40px;
text-align: center;
}
.btn1:hover {
color: var(--skin-color);
cursor: pointer;
}
.nacisk {}
/*portfolio popup*/
.portfolio-popup {
background-color: var(--bg-black-900);
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 1000;
overflow-y: scroll;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
}
.portfolio-popup.open {
visibility: visible;
opacity: 1;
}
.portfolio-popup .pp-details {
max-width: 1350px;
width: calc(85% + 30px);
margin: auto;
max-height: 0;
overflow: hidden;
opacity: 0;
transition: all 0.5s ease;
}
.portfolio-popup .pp-details.active {
opacity: 1;
}
.portfolio-popup .pp-title {
padding: 0 15px;
}
.portfolio-popup .pp-title h2 {
font-size: 28px;
color: var(--text-black-900);
text-transform: capitalize;
font-weight: 600;
margin: 0 0 5px;
}
.portfolio-popup .pp-title p {
font-size: 14px;
font-weight: 600;
color: var(--text-black-700);
margin: 0 0 15px;
border-bottom: 1px solid rgb(230, 228, 228);
padding-bottom: 10px;
}
.portfolio-popup .pp-title p span {
font-weight: 400;
text-transform: capitalize;
}
.portfolio-popup .pp-details-inner {
padding: 30px 0;
}
.portfolio-popup .pp-project-details h3 {
font-size: 20px;
font-weight: 600;
color: var(--text-black-700);
margin: 0 0 15px;
text-transform: capitalize;
}
.portfolio-popup .description p {
font-size: 16px;
color: var(--text-black-700);
line-height: 26px;
margin: 0;
}
.portfolio-popup .description {
flex: 0 0 65%;
max-width: 65%;
padding: 0 15px;
}
.portfolio-popup .info {
flex: 0 0 35%;
max-width: 35%;
padding: 0 50px;
}
.portfolio-popup .info ul li {
display: block;
margin-bottom: 10px;
font-weight: 600;
font-size: 16px;
}
.portfolio-popup .info ul li span {
font-weight: 400;
}
.portfolio-popup .info ul li a {
color: var(--skin-color);
}
.portfolio-popup .info ul li:last-child {
margin-bottom: 0;
}
.portfolio-popup .separator {
height: 1px;
width: 100%;
display: block;
background-color: rgb(230, 228, 228);
}
.portfolio-popup .pp-img {
max-width: 100%;
width: auto;
height: auto;
padding: 10px;
border-radius: 5px;
}
.portfolio-popup .pp-main {
min-height: 100vh;
max-width: 1350px;
width: 85%;
margin: auto;
display: flex;
align-items: center;
justify-content: center;
}
.portfolio-popup .pp-main-inner {
padding: 70px 0 50px;
position: relative;
}
.portfolio-popup .pp-project-details-btn {
position: absolute;
left: 0;
border-radius: 30px;
font-size: 16px;
font-weight: 500;
color: var(--text-black-900);
cursor: pointer;
padding: 0 15px;
top: 15px;
height: 40px;
line-height: 40px;
}
.portfolio-popup .pp-project-details-btn:hover {
color: var(--skin-color);
}
.portfolio-popup .pp-project-details-btn i {
margin-left: 5px;
}
.portfolio-popup .pp-close {
position: absolute;
right: 0;
border-radius: 50%;
text-align: center;
line-height: 40px;
font-size: 35px;
height: 40px;
width: 40px;
top: 15px;
color: var(--text-black-900);
cursor: pointer;
}
.portfolio-popup .pp-close:hover {
color: var(--skin-color);
}
.portfolio-popup .pp-counter {
position: absolute;
right: 0;
height: 40px;
line-height: 40px;
bottom: 5px;
font-size: 16px;
color: var(--text-black-700);
}
.portfolio-popup .pp-prev,
.portfolio-popup .pp-next {
position: fixed;
top: 50%;
height: 40px;
width: 40px;
cursor: pointer;
text-align: center;
font-size: 20px;
z-index: 1010;
color: var(--text-black-900);
opacity: 0.6;
}
.portfolio-popup .pp-prev:hover,
.portfolio-popup .pp-next:hover {
opacity: 1;
}
.portfolio-popup .pp-prev i,
.portfolio-popup .pp-next i {
line-height: 40px;
}
.portfolio-popup .pp-prev i {
transform: rotate(180deg);
}
.portfolio-popup .pp-prev {
left: 15px;
}
.portfolio-popup .pp-next {
right: 15px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bartek Lisowski</title>
<!--css file-->
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="color-1.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css">
</head>
<body>
<!-- Main Container Start -->
<div class="main-container">
<!-- Portfolio Section Start-->
<section class="portfolio section" id="portfolio">
<div class="container">
<div class="row">
<div class="section-title padd-15">
<h2>Portfolio</h2>
</div>
</div>
<div class="row">
<div class="portfolio-heading padd-15 padd-10">
<h2>My Last Projects : </h2>
</div>
<div class="portfolio-filter padd-15 ">
<span class="filter-item outer-shadow active" data-target="all">All</span>
<span class="filter-item" data-target="web-application">web-application</span>
<span class="filter-item" data-target="photoshop">photoshop</span>
<span class="filter-item" data-target="mobile-app">mobile app</span>
<span class="filter-item" data-target="e-commerce">e commerce</span>
</div>
</div>
<!--- Portfolio item starts-->
<div class="row portfolio-items">
<!--portfolio item start-->
<div class="portfolio-item" data-category="photoshop">
<div class="portfolio-item-inner outer-shadow">
<div class="portfolio-item-img">
<img src="https://picsum.photos/200" alt="portfolio" data-screenshots="https://picsum.photos/200">
<!-- project button-->
<span class="view-project">view project</span>
</div>
<p class="portfolio-item-title">Web designs</p>
<!-- portfolio item details start-->
<div class="portfolio-item-details">
<div class="row">
<div class="description">
<h3>Project Brief:</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel consequatur rem libero similique quam ipsa facere porro voluptatum, hic in nulla natus nemo itaque? Cupiditate iusto cum sequi adipisci doloribus?
</p>
</div>
<div class="info">
<h3>Project info</h3>
<ul>
<li>Date - <span>2020</span></li>
<li>Client - <span>xyz</span></li>
<li>Tools - <span>html, css, js</span></li>
<li>Web - <span>www.domain.com</span></li>
</ul>
</div>
</div>
</div>
<!-- portfolio item details end-->
</div>
</div>
<!--portfolio item end-->
<!--portfolio item start-->
<div class="portfolio-item" data-category="mobile-app">
<div class="portfolio-item-inner outer-shadow">
<div class="portfolio-item-img">
<img src="https://picsum.photos/200" alt="portfolio" data-screenshots="https://picsum.photos/200">
<!-- project button-->
<span class="view-project">view project</span>
</div>
<p class="portfolio-item-title">Photosho Projects</p>
<!-- portfolio item details start-->
<div class="portfolio-item-details">
<div class="row">
<div class="description">
<h3>Project Brief:</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel consequatur rem libero similique quam ipsa facere porro voluptatum, hic in nulla natus nemo itaque? Cupiditate iusto cum sequi adipisci doloribus?
</p>
</div>
<div class="info">
<h3>Project info</h3>
<ul>
<li>Date - <span>2020</span></li>
<li>Client - <span>xyz</span></li>
<li>Tools - <span>html, css, js</span></li>
<li>Web - <span>www.domain.com</span></li>
</ul>
</div>
</div>
</div>
<!-- portfolio item details end-->
</div>
</div>
<!--portfolio item end-->
<!-- portfolio item button start-->
<!-- portfolio item button end-->
</div>
</section>
<!--portfolio popup start-->
<div class="pp portfolio-popup">
<div class="pp-details">
<div class="pp-details-inner">
<div class="pp-title">
<h2>personal portfolio</h2>
<p>Category - <span class="pp-project-category">Web Application</span></p>
</div>
<div class="pp-project-details">
<div class="row padd-15">
<div class="description">
<h3>Project Brief:</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel consequatur rem libero similique quam ipsa facere porro voluptatum, hic in nulla natus nemo itaque? Cupiditate iusto cum sequi adipisci doloribus?
</p>
</div>
<div class="info">
<h3>Project info</h3>
<ul>
<li>Date - <span>2020</span></li>
<li>Client - <span>xyz</span></li>
<li>Tools - <span>html, css, js</span></li>
<li>Web - <span>www.domain.com</span></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="separator">
</div>
<div class="pp-main">
<div class="pp-main-inner">
<div class="pp-project-details-btn outer-shadow in-shadow">Project Detils <i class="fas fa-plus"></i></div>
<div class="pp-close outer-shadow in-shadow">×</div>
<img src="https://picsum.photos/200" alt="img" class="pp-img outer-shadow">
<div class="pp-counter">1 of 6</div>
</div>
<div class="pp-loader">
<div></div>
</div>
<!-- pp navigation-->
<div class="pp-prev"><i class="fas fa-play"></i></div>
<div class="pp-next"><i class="fas fa-play"></i></div>
</div>
</div>
<!--portfolio popup end-->
<!-- Portfolio Section End-->
</div>
<!-- Main Content End-->
</div>
<!-- Main Container End -->
<!-- JS Files-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/typed.js/2.0.12/typed.min.js" referrerpolicy="no-referrer"></script>
<script src="script.js"></script>
</body>
</html>

It does not detect the top property in my code when the window is 1300px

Error does not recognize the top:
Hello, my problem is that when the window is less than 1300px, the upper part does not apply: 100% only applies this condition if I update the page, on the contrary, if it is the other way around, ¿the same thing happens. How can i fix this.?
I leave the code so that you can test the error I am a newbie I hope you can help me. Cheers
var open = document.getElementById("open");
var photo = document.getElementById("photo");
function mediaQueries(btn) {
//Width: 1300px
if (btn.matches) {
//top 100% does not apply, left 100% still applies
open.addEventListener("mouseenter", () => {
photo.style = "top: 100%";
});
open.addEventListener("mouseleave", () => {
photo.style = "top: 0";
});
} else {
open.addEventListener("mouseenter", () => {
photo.style = "left: 100%";
});
open.addEventListener("mouseleave", () => {
photo.style = "left: 0";
});
}
}
var btn = window.matchMedia("(max-width: 1300px)");
mediaQueries(btn);
btn.addListener(mediaQueries);
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.box-container {
font-family: Arial, Helvetica, sans-serif;
width: 100%;
height: 350px;
max-width: 450px;
position: relative;
margin: 50px auto;
display: flex;
flex-direction: row;
align-items: center;
background: url("https://i.ibb.co/pdnQfFn/black-and-white-1281562-640-min.jpg");
box-shadow: 2px 2px 6px;
}
.box-container .box-content {
width: 100%;
height: auto;
padding: 20px;
color: #fff;
}
.box-container .box-content h2 {
letter-spacing: 1px;
}
.box-container .box-content p {
margin: 10px 0 20px 0;
line-height: 19.2px;
/*120%*/
}
.box-container .box-content button {
padding: 10px 20px;
border: none;
background: #5d08be;
color: #fff;
font-weight: bold;
transition: 0.4s;
cursor: pointer;
}
.box-container .box-content button:hover {
background: #10960b;
transition: 0.4s;
}
.box-container img {
width: 100%;
height: 100%;
position: absolute;
transition: 0.4s;
top: 0;
left: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Card effect</title>
</head>
<body>
<div class="box-container" id="open">
<div class="box-content">
<div class="txt">
<h2>Articulos de Moda</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Impedit, ullam assumenda.
Quibusdam, dolores? Atanimi
rerum nobis velit necessitatibus qui.</p>
<button>LEER MÁS</button>
</div>
</div>
<img src="https://i.ibb.co/zhm9qNd/girl-min.jpg" id="photo">
</div>
</body>
</html>
I have solved your problem by adjusting the code in the box-container. Your image was at the top, however the div containing the image wasn't. I changed box-container to have a top of 0, and removed the max-width because you had already said the width should be 100%. You can adjust the code (like adding margin and padding) to your needs.
var open = document.getElementById("open");
var photo = document.getElementById("photo");
function mediaQueries(btn) {
//Width: 1300px
if (btn.matches) {
//top 100% does not apply, left 100% still applies
open.addEventListener("mouseenter", () => {
photo.style = "top: 100%";
});
open.addEventListener("mouseleave", () => {
photo.style = "top: 0";
});
} else {
open.addEventListener("mouseenter", () => {
photo.style = "left: 100%";
});
open.addEventListener("mouseleave", () => {
photo.style = "left: 0";
});
}
}
var btn = window.matchMedia("(max-width: 1300px)");
mediaQueries(btn);
btn.addListener(mediaQueries);
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.box-container {
font-family: Arial, Helvetica, sans-serif;
width: 100%;
height: 350px;
position: relative;
top:0;
display: flex;
flex-direction: row;
align-items: center;
background: url("https://i.ibb.co/pdnQfFn/black-and-white-1281562-640-min.jpg");
box-shadow: 2px 2px 6px;
}
.box-container .box-content {
width: 100%;
height: auto;
padding: 20px;
color: #fff;
}
.box-container .box-content h2 {
letter-spacing: 1px;
}
.box-container .box-content p {
margin: 10px 0 20px 0;
line-height: 19.2px;
/*120%*/
}
.box-container .box-content button {
padding: 10px 20px;
border: none;
background: #5d08be;
color: #fff;
font-weight: bold;
transition: 0.4s;
cursor: pointer;
}
.box-container .box-content button:hover {
background: #10960b;
transition: 0.4s;
}
.box-container img {
width: 100%;
height: 100%;
position: absolute;
transition: 0.4s;
top: 0;
left: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Card effect</title>
</head>
<body>
<div class="box-container" id="open">
<div class="box-content">
<div class="txt">
<h2>Articulos de Moda</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Impedit, ullam assumenda.
Quibusdam, dolores? Atanimi
rerum nobis velit necessitatibus qui.</p>
<button>LEER MÁS</button>
</div>
</div>
<img src="https://i.ibb.co/zhm9qNd/girl-min.jpg" id="photo">
</div>
</body>
</html>

Animation out of sync, how to achieve smooth animation?

Image and backgroung color out of sync. And i need smooth animation so the image & bgcolor fade's together.
It works smooth only on first iteration. Check codepen, please. I spent 5 hours and did not understand what was happening. It works smooth only on first iteration. Check codepen, please. I spent 5 hours and did not understand what was happening.
https://codepen.io/l-ba-iwanowa/pen/poJZQVN
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link href="https://fonts.googleapis.com/css?family=Caveat&display=swap" rel="stylesheet">
<style>
body,
.col-1,
.col-3-4,
.col-1 p {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: sans-serif;
}
#rcorners1 {
border-radius: 15px 50px;
background-color: yellow;
padding: 20px;
width: 200px;
height: 150px;
animation-name: bbb;
animation-duration: 5s;
animation-fill-mode: forwards;
}
#rcorners1:hover {
width:600px;
transform: translate(300px);
transition:1s;
}
#keyframes bbb {
0% {background-color: blue;}
100% {background-color: red}
}
.asd {
width: 1000px;
height: 600px;
/*overflow: hidden;*/
position:relative;
margin: 0 auto;
}
.asd img{
width: 100%;
width: 1000px;
height: 600px;
}
.asd img {
position:absolute;
top: 0;
}
.asd img.top {
/*position:relative;*/
opacity: 0;
transition: 2s;
}
/*
.asd img.top:hover {
opacity: 100;
}*/
.trans {
opacity: 100 !important;
}
#container {
max-width: 1000px;
margin:0 auto;
}
.col-1 {
width:25%;
display:inline-block;
vertical-align: top;
}
.col-3-4 {
width:75%;
display:inline-block;
vertical-align: top;
}
.relative {
position:relative;
}
.black-col {
position: relative;
top: -150px;
background: #474747;
height: 300px;
color:white;
padding: 1rem;
}
.zastup {
position: relative;
top:-50px;
background-color: white;
word-wrap: break-word;
}
img {
max-width: 100%;
}
.slider-bg {
background-color: rgb(0,0,0);
transition: background-color 2s;
}
#container2 {
width: 900px;
margin: 0 auto;
}
.slider-nav {
float:right !important;
}
ul {
/* Center the content */
align-items: center;
display: flex;
justify-content: center;
/* Reset styles */
list-style-type: none;
margin: 0;
padding: 0;
}
li {
/* Rounded border */
border-radius: 9999px;
height: 14px;
width: 14px;
/* Active dot */
/*background-color: rgba(0, 0, 0, .3);*/
/* Inactive dot */
background-color: rgba(255, 255, 255, .3);
/*border: 1px solid rgba(0, 0, 0, .3);*/
/* OPTIONAL: Spacing between dots */
margin: 0 12px;
transition: transform 0.5s, background-color 0.5s;
}
.nav-active {
background-color: rgba(255, 255, 255, .9);
transform: scale(1.5);
}
.clear {
clear:both;
zoom: 1;
}
.col-1-3 {
position: relative;
width: 33%;
word-wrap: break-word;
white-space: nowrap;
display: inline-block;
vertical-align: top;
padding: 1rem;
box-sizing: border-box;
}
button.abc {
border: 0;
background-color: #e86d10;
padding: 1rem 2rem;
border-radius: 25px;
font-size: inherit;
color: #fff;
}
.price {
font-size:1.5rem;
position: relative;
top:-20px;
}
.description {
position: relative;
top:-40px;
word-break: break-all;
white-space: pre-wrap;
font-size: 1.2rem;
}
.p1rem {
padding: 1rem;
}
.orange {
color: #e86d10;
}
.apply-font {
font-family: 'Caveat', cursive;
}
.bg-black {
background-color: rgb(0,0,0);
}
.bg-blue {
background-color: rgb(34, 73, 200);
}
</style>
</head>
<body>
<div id="container">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur illum ab corrupti impedit culpa provident nemo numquam? Magnam, rerum, magni. Autem quisquam deserunt a est iste iure odit laudantium, dolores.</p>
</div>
<div class="slider-bg ">
<div class="asd">
<!-- <img src="https://i.ytimg.com/vi/tAp9BKosZXs/maxresdefault.jpg" alt=""> -->
<img src="https://i.imgur.com/xCGxXuy.jpg" alt="">
<img class="top" src="https://i.imgur.com/D1tDvcG.jpg" alt="">
<img class="top" src="https://cdn.vox-cdn.com/thumbor/gBv91a9YqyhIxGsxc26x5TORV_8=/0x0:1296x730/1200x800/filters:focal(669x161:875x367)/cdn.vox-cdn.com/uploads/chorus_image/image/66274455/horsegirl.0.jpg" alt="">
<img class="top" src="https://1.bp.blogspot.com/-73o9cfxSC7Q/XQMxoVjfdMI/AAAAAAAAUkM/RSi0lSlsQoAfhMHLR-3U8Sfk_PpvZuziQCLcBGAs/s1600/copertina.jpg" alt="">
</div></div>
<div id="container2" style="position: relative;top:-60px; ">
<ul class="slider-nav">
<li data-id='0' class="nav-active"></li>
<li data-id='1'></li>
<li data-id='2'></li>
<li data-id='3'></li>
<li data-id='4'></li>
</ul></div><div class="clear"></div>
<div id="container2">
<div class="col-1 black-col">asd</div><!--
--><div class="col-3-4 zastup">
<!-- <script src='https://cdnjs.cloudflare.com/ajax/libs/animejs/3.1.0/anime.min.js'></script> -->
<script type="text/javascript">
console.log(111);
// document.querySelector('#btn-click').addEventListener('click', ()=>{
// document.querySelector('.top').classList.toggle("trans");
// console.log(document.querySelector('.top').classList);
// });
let p = document.querySelectorAll('.slider-bg img');
let pp = Array.from(p);
console.log(pp);
function changeBgColor (){
if (i == 0 ) {
document.querySelector('.slider-bg').style.backgroundColor = 'rgb(0,0,0)';
}
if (i == 1 ) {
document.querySelector('.slider-bg').style.backgroundColor = 'rgb(34, 73, 200)';
}
if (i == 2 ) {document.querySelector('.slider-bg').style.backgroundColor = 'red';}
if (i == 3 ) {document.querySelector('.slider-bg').style.backgroundColor = 'green';}
}
let i = 1;
function asd(arguments) {
setTimeout(()=>{
// b = arrayImages[i];
// document.querySelector('#slider-hero img').src = b;
let z = document.querySelectorAll('li');
let zz = Array.from(z);
zz.forEach((item)=>{item.classList.remove('nav-active')});
// console.log(el);
zz[i].classList.add('nav-active');
b = pp[i];
pp.forEach((val)=>{
val.classList.remove('trans');
});
b.classList.add('top');
b.classList.add('trans');
changeBgColor();
i++;
if (i ==4) {
i =0;
}
console.log(b);
asd();
},4000);
}
asd();
document.querySelector('.slider-nav').addEventListener('click',(el)=>{
if (el.target.tagName === 'LI') {
let z = document.querySelectorAll('li');
let zz = Array.from(z);
console.log(el.target.dataset.id);
b = pp[el.target.dataset.id];
pp.forEach((val)=>{
val.classList.remove('trans');
});
b.classList.add('top');
b.classList.add('trans');
zz.forEach((item)=>{item.classList.remove('nav-active');});
el.target.classList.add('nav-active');
i = el.target.dataset.id;
changeBgColor();
}
});
</script>
</body>
</html>
Seems working fine to Chrome Browser. You can validate the css for all the browser using: https://www.browseemall.com/Compatibility/ValidateCSS
There might be chances of browser compatibility issues.
Seems broken in IE10 and lower.
ul{align-items:center;display:flex;justify-content:center;list-style-type:none;margin:0;padding:0;}

Responsive Slider positioning

I'm building a responsive website but i'm struggling with the dots of the slideshow as you see in the picture below which is when I toggle to the device toolbar they change their place i have tried everything that comes in my mind from the relative units to the absolute ones but nothing worked please I need help with that, i searched around in google and so on but i didn't find anything helpful.
when I toggle to the device toolbar:
as you notice the position of the dots changes i don't want this behaviour.
this is my code:
HTML:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>EatManger</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="query.css">
</head>
<body style="background-color:purple">
<div class="container">
<div class="logo-box">
<img src="images/logo.png" class="logo" alt="logo">
</div>
<i class="fas fa-bars hamburger-btn"></i>
<ul class="main-nav">
<li class="main-nav-item"><a class="main-nav-link" href="#">services</a></li>
<li class="main-nav-item"><a class="main-nav-link" href="#">reservation</a></li>
<li class="main-nav-item"><a class="main-nav-link" href="#">menu</a></li>
<li class="main-nav-item"><a class="main-nav-link" href="#">our chefs</a></li>
<li class="main-nav-item"><a class="main-nav-link" href="#">events</a></li>
</ul>
</div>
<div class="slideshow-container">
<div class="mySlides fade-zz">
<img src="images/food3.png" class="imgSlide">
</div>
<div class="mySlides fade-zz">
<img src="images/pizza.png" class="imgSlide" >
</div>
<div class="mySlides fade-zz">
<img src="images/hamburger2.png" class="imgSlide">
</div>
<div class="dotz">
<span class="dot" onclick="currentSlide(1-1)"></span>
<span class="dot" onclick="currentSlide(2-1)"></span>
<span class="dot" onclick="currentSlide(3-1)"></span>
</div>
</div>
<div class="contact-box">
<div class="adress">
<i class="fas fa-map-marker-alt conbox"></i>
<h3 class="contact-title">Address</h3>
<p class="contact-description">4579 Penn Street,Manchester<br>united kingdom</p>
</div>
<div class="phone">
<i class="fas fa-phone-volume conbox"></i>
<h3 class="contact-title">Phone</h3>
<p class="contact-description">636-399-9776 <br> 573-225-7350</p>
</div>
<div class="opening-time">
<i class="far fa-clock conbox"></i>
<h3 class="contact-title">Opening time</h3>
<p class="contact-description">all the days of the week <br>from 6 am to midnight</p>
</div>
</div>
<section class="about-us">
<i class="fas fa-utensils abicon"></i>
<h1 class="title">About us</h1>
<p class="title-description">Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un
imprimeur
anonyme assembla </p>
</section>
<script src="script.js" charset="utf-8"></script>
</body>
</html>
CSS
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.container {
position: relative;
height: 4rem;
background-color: red;
transition: height .1s;
}
.container-add{
height: 20rem;
}
.hamburger-btn {
position: absolute;
margin-top: 5px;
right: 4px;
font-size: 40px;
color: white;
}
.logo-box {
display: inline-block;
}
.logo {
width: 100px;
}
.main-nav {
display: flex;
flex-direction: column;
justify-content: space-between;
height: 15.62rem;
align-items: center;
visibility: hidden;
}
.main-nav-hide{
visibility:visible;
}
.main-nav-item {
list-style: none;
color: white;
font-family: Roboto;
text-transform: uppercase;
font-weight: 700;
/* display: none; */
}
.main-nav-link {
text-decoration: none;
color: inherit;
padding-left: 20px;
}
.slideshow-container{
margin: auto;
max-width: 980px;
width: 100vw;
}
.imgSlide{
width: 100%;
}
.imgSlide-show{
display: block;
}
.dotz{
text-align: center;
position: absolute;
top: 35%;
left: 50vw
}
.dot{
width: 10px;
height: 10px;
border-radius: 50%;
display: inline-block;
background-color: #ddd
}
.active{
background-color: #ff9900;
}
.active:hover,.dot:hover{
cursor: pointer;
}
.fade-zz{
animation-name: fade;
animation-duration: 1.4s;
transition:.4s
}
#keyframes fade {
from{
opacity: .4;
}
to{
opacity: 1
}
}
.contact-box{
background-color: red;
position: relative;
top: -1.39rem;
height: 380px;
}
.conbox{
color: white;
display: block;
text-align: center;
font-size: 2rem;
/* margin-top: .8rem; */
}
.adress{
color: white;
text-align: center;
font-family: roboto;
margin-bottom: 3rem;
position: relative;
top: .5rem;
}
.phone{
color: white;
text-align: center;
font-family: roboto;
margin-bottom: .8rem;
}
.opening-time{
color: white;
text-align: center;
font-family: roboto;
margin-top: 2rem;
}
.about-us{
color: white;
}
.title{
text-align: center;
font-family: roboto;
}
.abicon{
text-align: center;
display: block;
padding-right: 7rem;
margin-top: 1rem;
font-size: 2rem;
position: relative;
top: 2%;
}
.title-description{
display: block;
margin: auto;
}
JavaScript
//HAMBURGER BUTTON
var hamBtn=document.querySelector(".hamburger-btn");
hamBtn.addEventListener("click",function(){
document.querySelector(".main-nav").classList.toggle("main-nav-hide");
document.querySelector(".container").classList.toggle("container-add");
});
//SLIDESHOW
slideIndex=0;
function currentSlide(n){
slideIndex=n;
showSlide(slideIndex);
}
function showSlide(n){
var i;
var slides=document.getElementsByClassName("mySlides");
console.log(slides);
var dots=document.getElementsByClassName("dot");
for (i = 0; i < slides.length; i++) {
slides[i].style.display="none";
}
slideIndex++;
if (slideIndex>slides.length) {
slideIndex=1;
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
}
setTimeout(showSlide,50)
setInterval(showSlide,6000)
sorry about the question title i couldn't come up with a better one describing my situation any suggestion for a better title would be accepted to help other people who are struggling from the same problem find the solution and thank youu in advance.
just add to ".dotz" the following
.dotz{
position: absolute;
bottom: 1rem;
left: 0;
right: 0;
}
To center any block has position:absolute you just need to left, right to 0 and margin to auto and for sure the parent div has to have position:relative

Categories