<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="index.css">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap" rel="stylesheet">
</head>
<body>
    <div id="main">
        <div class="about">
            <div class="text-info hide">
                Hi! Here are some of the projects I made in Module 4 of <em>Front End Career Path</em> on <a href="https://scrimba.com/learn/frontend" target="_blank">Scrimba</a>, just click on one of the slider elements and you can try it out <strong>now</strong>! If you want to know more about this module just check my <a href="#" target="_blank">blog post</a>!
            </div>
            <button class="info">?</button>
        </div>
        <div class="sliders">
            <div class="slider-element hide filler">
                <img src="https://en.wikipedia.org/wiki/Filler">
                <button class="info">?</button> 
                <div class="text-info hide">Just a filler</div>
            </div>
            <div class="slider-element hide">
                <img src="https://i.ibb.co/6mwJ4DQ/modulepng-3.png" alt="module showing contact details">
                <button class="info">?</button> 
                <div class="text-info hide">
                    Click the button to show Contact Details!
                </div>
            </div>
            <div class="slider-element aside">
                <img src="https://i.ibb.co/rH2s0TP/perfection.png" alt="slider photo big city">
                <button class="info hide">?</button> 
                <div class="text-info hide">
                    A simple slider, use buttons to move between pictures.
                </div>
            </div>
            <div class="slider-element">
                <img src="https://i.ibb.co/MZcCrhn/Untitled.png" alt="slider photo big city">
                <button class="info">?</button> 
                <div class="text-info hide">
                    A simple snake game, use <strong>arrows</strong> or <strong>WSAD</strong> to move, use restart button to try again!
                </div>
            </div>
            <div class="slider-element aside">
                <img src="https://i.ibb.co/fG9wMsm/dot.png" alt="slider photo big city">
                <button class="info hide">?</button> 
                <div class="text-info hide">
                    A dice game, who gains 20 points first wins! 
                </div>
            </div>
            <div class="slider-element hide">
                <img src="https://i.ibb.co/S5ktX5s/ohboy.png" alt="slider photo big city">
                <button class="info">?</button> 
                <div class="text-info hide">
                    Write a part or full name and if it's on the list it will show up!
                </div>
            </div>
            <div class="slider-element hide filler">
                <img src="https://en.wikipedia.org/wiki/Filler">
                <button class="info">?</button> 
                <div class="text-info hide">Just a filler</div>
            </div>
        </div>
    </div>
    <div class="web-app hide">
        Filler
        <button class="delete">X</button> 
    </div>
    <div class="web-app hide">
        <iframe src="https://dominikgorczyca.github.io/carousel/modal/" width="100%" height="100%" title="Site"></iframe>
        <button class="delete">X</button> 
    </div>
    <div class="web-app hide">
        <iframe src="https://dominikgorczyca.github.io/carousel/slider/" width="100%" height="100%" title="Site"></iframe>
        <button class="delete">X</button> 
    </div>
    <div class="web-app hide">
        <iframe src="https://dominikgorczyca.github.io/carousel/snake/" width="100%" height="100%" title="Site"></iframe>
        <button class="delete">X</button> 
    </div>
    <div class="web-app hide">
        <iframe scrolling="no" src="https://dominikgorczyca.github.io/carousel/dice/" title="Site"></iframe>
        <button class="delete">X</button> 
    </div>
    <div class="web-app hide">
        <iframe src="https://dominikgorczyca.github.io/carousel/search%20bar/" width="100%" height="100%" title="Site"></iframe>
        <button class="delete">X</button> 
    </div>
    <div class="web-app hide">
        <button class="delete">X</button> 
    </div>

    <script src="index.js"></script>
</body>
</html>
/* 
war: time to make iframe work!!!
*/
body {
    box-sizing: border-box;
    margin: 0;
    font-family: 'Lato', sans-serif;
    background-color: #202020;
    height: 100%;
}
a {
    font-weight: 700;
    color: #FFE06C;
    text-decoration: none;
    outline: none;
}
a:hover, a:focus  {
    color: #202020;
}
a:focus {
    text-decoration: underline;
}
img {
    cursor: pointer;
    position: absolute;
    width: 100%;
    height: 100%;
}
iframe {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    border: none;
    overflow: hidden;
}
.web-app {
    box-sizing: border-box;
    position: absolute;
    z-index: 10;
    width: 100%;
    min-height: 400px;
    height: 100%;
    top: 0;
}
.about {
    width: 100%;
    box-sizing: border-box;
    position: absolute;
    background-color: #707070;
    top: 0;
}
.text-info {
    box-sizing: border-box;
    position: relative;
    width: 100%;
    height: 100%;
    padding: 1vh 15%;
    top: 0;
    text-align: center;
    opacity: 0.85;
    background-color: #707070;
    color: #FFFFFF;
    font-size: max(12px, 1.1vw);
    line-height: max(20px, 1.5vw);
}
.info, .delete{
    cursor: pointer;
    font-size: max(16px, 1.2vw);
    font-weight: bold;
    position: absolute;
    right: 0.75vh;
    top: 0.75vh;
    padding: max(2px, 0.1vw) max(6px, 0.4vw);
    background-color: #FFFFFF;
    color: #3F3F3F;
    outline: none;
    border: none;
    border-radius: 35px ;
    z-index: 5;
}
.info:hover {
    color: #707070;
}
.close {
    background-color: #FFE06C;
    color: #3F3F3F;
}
.delete {
    z-index: 1000;
    background-color: red;
    color: white;
}
.sliders {
    box-sizing: border-box;
    height: 100%;
    display: flex;
    justify-content: space-evenly;
    max-width: 1300px;
    margin: 30vh auto 0;
    
}
.slider-element {
    position: relative;
    width: 30em;
    height: 20em;
    margin: 0 1%;
    border: 2px solid #FFE06C;
}
.aside {
    width: 21em;
    height: 14em;
    box-sizing: border-box;
    margin: 0;
    margin-top: 3vw;
    opacity: 0.75;
}
.hide {
    visibility: hidden;
    opacity: 0;
    position: absolute;
}
.filler {
    visibility: hidden;
}
@media (max-width: 1200px) {
    .sliders {
        max-width: 900px;
    }
    .slider-element{
        width: 21em;
        height: 14em;
    }
    .aside {
        width: 15em;
        height: 10em;
    } 

}
@media (max-width: 800px) {
    .sliders {
        max-width: 600px;
    }
    .slider-element{
        width: 12em;
        height: 8em;
    }
    .aside {
        width: 9em;
        height: 6em;
    }

}
let info = Array.from(document.getElementsByClassName("info"));
let infoText = document.getElementsByClassName("text-info")
let sliderPhotos = document.querySelectorAll(".slider-element img")
let sliderElements = Array.from(document.getElementsByClassName("slider-element"))
let games = document.getElementsByClassName("web-app");
let closeGame = Array.from(document.getElementsByClassName("delete"));


for(let [i, value] of info.entries()) {
    value.addEventListener("click", (e) => {
        value.textContent = value.classList.contains("close") ? "?" : "X";
        infoText[i].classList.toggle("hide");
        value.classList.toggle("close");
    })
}

for(let [i, value] of sliderPhotos.entries()) {
    value.addEventListener("click", (e) => {
        if(sliderElements[i].classList.contains("aside")) {
            for(let [index, v] of sliderElements.entries()) {
                index = index + 1;
                v.classList.remove("aside")
                v.classList.add("hide");
                infoText[index].classList.add("hide");
                info[index].classList.add("hide")
                info[index].classList.remove("close")
                info[index].textContent = "?"
            }
            sliderElements[i].classList.remove("hide");
            info[i + 1].classList.remove("hide")
            console.log(i)
            sliderElements[i-1].classList.add("aside");
            sliderElements[i-1].classList.remove("hide");
            sliderElements[i+1].classList.add("aside");
            sliderElements[i+1].classList.remove("hide");


        } else {
            games[i].classList.remove("hide");
        }
    })
}

for(let [i, value] of closeGame.entries()) {
    value.addEventListener("click" , () => {
        games[i].classList.add("hide");
    })

}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.