0
First of all: I started programming not a week ago, I’m very interested in learning, so while I wait for the answer I’ll be endeavoring to turn me around, but a little help wouldn’t be too bad :)
As the idea of the site was to look like a little animation, I used slides javascript to make images of the site alternate between 3-2 frames
Well, in that part he already has a basic little menuzinho, HOWEVER it just looks cute like that in my browser with 100% zoom, if I zoom out everything distances and is on top of each other, all disfigured, as in image 2.
The phone is not so bad, it seems simpler until...
addEventListener("load", () => { // "load" is safe but "DOMContentLoaded" starts earlier
var index = 0;
const slides = document.querySelectorAll(".slides");
const classHide = "slides-hidden",
count = slides.length;
nextSlide();
function nextSlide() {
slides[(index++) % count].classList.add(classHide);
slides[index % count].classList.remove(classHide);
setTimeout(nextSlide, 500);
}
});
addEventListener("load", () => { // "load" is safe but "DOMContentLoaded" starts earlier
var index = 0;
const slides = document.querySelectorAll(".slidez");
const classHide = "slides-hiddez",
count = slides.length;
nextSlide();
function nextSlide() {
slides[(index++) % count].classList.add(classHide);
slides[index % count].classList.remove(classHide);
setTimeout(nextSlide, 250);
}
});
addEventListener("load", () => { // "load" is safe but "DOMContentLoaded" starts earlier
var index = 0;
const slides = document.querySelectorAll(".slidex");
const classHide = "slides-hiddex",
count = slides.length;
nextSlide();
function nextSlide() {
slides[(index++) % count].classList.add(classHide);
slides[index % count].classList.remove(classHide);
setTimeout(nextSlide, 350);
}
});
addEventListener("load", () => { // "load" is safe but "DOMContentLoaded" starts earlier
var index = 0;
const slides = document.querySelectorAll(".slidey");
const classHide = "slides-hiddey",
count = slides.length;
nextSlide();
function nextSlide() {
slides[(index++) % count].classList.add(classHide);
slides[index % count].classList.remove(classHide);
setTimeout(nextSlide, 450);
}
});.slides {
width: 70%;
}
.slides-hidden {
display: none;
}
.slidez {
width: 25%;
}
.slides-hiddez {
display: none;
}
.slidex {
width: 25%;
}
.slides-hiddex {
display: none;
}
.slidey {
width: 25%;
}
.slides-hiddey {
display: none;
}
.spotify {
position: absolute;
top: 400px;
left: 830px;
}
.youtube {
position: absolute;
top: 400px;
left: 620px;
}
.instagram {
position: absolute;
top: 400px;
left: 405px;
}
.strainberry-logo {
position: absolute;
top: 190px;
left: 300px;
}
@font-face {
font-family: ubuntu;
src: url('ubuntu.otf');
}
body {
background-color: black;
color: white;
font-family: ubuntu;
}<html>
<body>
<div class="strainberry-logo">
<img class="slides slides-hidden" src="https://i.ibb.co/Ny1H4vM/stb1.png" draggable="false">
<img class="slides slides-hidden" src="https://i.ibb.co/rpVXy8L/stb2.png" draggable="false">
<img class="slides slides-hidden" src="https://i.ibb.co/YdR80My/stb3.png" draggable="false">
</div>
<div class="instagram">
<a href="https://www.instagram.com/strainberryrec" target="_blank">
<img class="slidez slides-hiddez" src="http://www.strainberry.com/instagram01.png" draggable="false">
<img class="slidez slides-hiddez" src="http://www.strainberry.com/instagram02.png" draggable="false">
</a>
</div>
<div class="youtube">
<a href="https://www.youtube.com/channel/UCrweqpJMG6a6I-DYO4rUBZw" target="_blank">
<img class="slidex slides-hiddex" src="http://www.strainberry.com/youtube01.png" draggable="false">
<img class="slidex slides-hiddex" src="http://www.strainberry.com/youtube02.png" draggable="false">
</a>
</div>
<div class="spotify">
<a href="https://open.spotify.com/artist/0WLWFwflNKbZT0fR4442oB?si=Qm2sEQUaQGyn0zgsA7sZww&dl_branch=1" target="_blank">
<img class="slidey slides-hiddey" src="http://www.strainberry.com/spotify01.png" draggable="false">
<img class="slidey slides-hiddey" src="http://www.strainberry.com/spotify02.png" draggable="false">
</a>
</div>
</body>
</html>
EDIT: I’ve managed to do a kind of responsiveness, including mobile site with media queries. It’s still incomplete but I already have a guide. The problem is that the zoom complication still continues.