Flex Layout

HTML

  
<!DOCTYPE html>
<html lang="de">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
</head>

<body>

    <div class="flexImg">

        <div class="spalte1 open">
            <h3 class="openH3">Heading 1</h3>
            <div class="flexHeart">
                <div class="heart">
                    <i class="fa-solid fa-heart"></i>
                </div>
            </div>
        </div>

        <div class="spalte2">
            <h3>Heading 2</h3>
            <div class="flexHeart">
                <div class="heart">
                    <i class="fa-solid fa-heart"></i>
                </div>
            </div>
        </div>

        <div class="spalte3">
            <h3>Heading 3</h3>
            <div class="flexHeart">
                <div class="heart">
                    <i class="fa-solid fa-heart"></i>
                </div>
            </div>
        </div>

        <div class="spalte4">
            <h3>Heading 4</h3>
            <div class="flexHeart">
                <div class="heart">
                    <i class="fa-solid fa-heart"></i>
                </div>
            </div>
        </div>

        <div class="spalte5">
            <h3>Heading 5</h3>
            <div class="flexHeart">
                <div class="heart">
                    <i class="fa-solid fa-heart"></i>
                </div>
            </div>
        </div>
    </div>
 
    <script src="main.js"></script>
</body>

</html>

CSS

  
body {
    background-color: lightblue;
    font-family: sans-serif;
    margin: 0;
}

.flexImg {
    display: flex;
    height: 500px;
    margin: 10px;
}

.spalte1 {
    background-image: url(fest.jpg);
}

.spalte2 {
    background-image: url(fest2.jpg);
}

.spalte3 {
    background-image: url(fest3.jpg);
}

.spalte4 {
    background-image: url(fest4.jpg);
}

.spalte5 {
    background-image: url(fest.jpg);
}

[class^="spalte"] {
    width: 12.5%;
    margin: 0 5px;
    border-radius: 20px;
    transition: 1s;
    display: flex;
    flex-direction: column;
}

.open {
    width: 50%;
}

h3 {
    height: 420px;
    color: white;
    letter-spacing: 3px;
    transition: 1s;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0em;
}

.openH3 {
    font-size: 4em;
}

.flexHeart {
    height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.heart {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: white;
    display: flex;
    justify-content: center;
    align-items: center;
}

.heart i {
    font-size: 1.5em;
}

.colorHeart {
    color: red;
}

@media(max-width:1000px) {
    .flexImg {
        flex-direction: column;
        height: auto;
    }

    [class^="spalte"] {
        width: 100%;
        height: 100px;
        margin: 5px 0;
        flex-direction: row;
        align-items: center;
    }

    .open {
        width: 100%;
        height: 350px;
    }

    h3 {
        width: 85%;
        height: 100%;
    }

    .flexHeart {
        width: 15%;
        height: 100%;
    }
}

JS

  
let allSpalten = document.querySelectorAll("[class^='spalte']");
let allH3 = document.querySelectorAll("h3");
let allHeart = document.querySelectorAll(".heart");

allSpalten.forEach(addOpen);
allHeart.forEach(addColor);


function addColor(elem) {
    elem.addEventListener("click", e => {
        e.stopPropagation();
        elem.children[0].classList.toggle("colorHeart");
    });
}

function addOpen(elem) {
    elem.addEventListener("click", () => {
        allSpalten.forEach(removeOpen);
        allH3.forEach(removeH3);
        elem.classList.add("open");
        elem.children[0].classList.add("openH3");

    });
}

function removeOpen(elem) {
    elem.classList.remove("open");
}
function removeH3(elem) {
    elem.classList.remove("openH3");
}

academy.of.webdesign

academy.of.webdesign

Flex Layout

HTML

CSS

JS