매일 css day 3

2021-05-21

2 캡처 3

* {
    margin: 0;
    padding: 0;
    font-family: "Poppins", sans-serif;
    box-sizing: border-box;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #fada3e;
    min-height: 100vh;
}

.container {
    position: relative;
    width: 1000px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.container .card {
    position: relative;
    display: flex;
    flex-direction: column;
    background-color: white;
}

.container .card:nth-child(even) {
    flex-direction: column-reverse;
}

.container .card .imgBox {
    position: relative;
    width: 250px;
    height: 250px;
    background: black;
}

.container .card .imgBox img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.container .card .content {
    width: 250px;
    height: 250px;
}

.container .card .content div {
    padding: 20px;
    text-align: center;
    font-size: 0.9em;
}

@media (max-width: 1000px) {
    .container {
        grid-template-columns: repeat(auto-fit, minmax(100%, 1fr));
        margin: 50px;
    }
    .container .card {
        flex-direction: row;
        margin: 10px 0;
    }
    .container .card:nth-child(even) {
        flex-direction: row-reverse;
    }

    .container .card .imgBox,
    .container .card .content {
        width: 50%;
    }
}

@media (max-width: 600px) {
    .container .card {
        flex-direction: column;
        margin: 10px 0;
    }
    .container .card:nth-child(even) {
        flex-direction: column-reverse;
    }

    .container .card .imgBox,
    .container .card .content {
        width: 100%;
    }
    .container .card .content {
        height: 200px;
    }
}

<body>
    <div class="container">
        <div class="card">
            <div class="imgBox">
                <img
                    src="https://cdn.shopify.com/s/files/1/1626/5391/products/December20200915_large.jpg?v=1609433833"
                />
            </div>
            <div class="content">
                <div>
                    <h2>Jordan 1</h2>
                    <p>
                        Lorem ipsum dolor sit amet consectetur adipisicing
                        elit. At quaerat sequi ut minima, repudiandae ex
                        delectus iusto, totam voluptatibus dolorum et facere
                        quidem, harum quod ipsa exercitationem.
                    </p>
                </div>
            </div>
        </div>

        <div class="card">
            <div class="imgBox">
                <img
                    src="https://www.jacklemkus.com/media/catalog/product/cache/1/image/480x/9df78eab33525d08d6e5fb8d27136e95/8/3/834274-001_3.jpg"
                />
            </div>
            <div class="content">
                <div>
                    <h2>Jordan 2</h2>
                    <p>
                        Lorem ipsum dolor sit amet consectetur adipisicing
                        elit. At quaerat sequi ut minima, repudiandae ex
                        delectus iusto, totam voluptatibus dolorum et facere
                        quidem, harum quod ipsa exercitationem.
                    </p>
                </div>
            </div>
        </div>

        <div class="card">
            <div class="imgBox">
                <img
                    src="data:image/jpeg;base64,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j3Ce4vyEkU191fkINtPHbOl79L7UHtpSH+pR+1NxyL0HykFF6D5CDbTP8bUf3lH7X94/xvQ/eUft/wB5ufdr7o+Qnk0UP1V+QgaaO3GH/eUPtj85B7dYf97h/tj85uRwye4n2RPJwdL93T+yv5QcNNbt3hwCe9oaDkwO3QX1lsv0i4d0d0dfDfwlWRmsL2VWte83v9jpfu6f2V/KehhqY+on2RBuGjf44pkAipe9tkcn5BZZ0u2b1GqDu8UQHshSm/jXKpzWKjKcxYWPTznRxSUbKPkJ7yjpBuHMzxvG1HTu8HjClmzZgq3JtltcnT2um8nA4fipDAYUDM7vepUJsGYsFt5XA9J0yJF9X6NPwnC8WSDUo0dL71H57+yovM7g8I62vTw6/wAIYn5mZOJU28rfnb0nqTEIREQEREBERAREQEREBERASJMiAiIgIiICIiAiIgTERAREQEREBERAREQEREBERAREQEREBERASJMiAiIgIiICIiAiIgTERAREQEREBERAREQEREBERAREQEREBERASJMiAiIgIiICIiAiIgTERAREQEREBERAREQEREBERAREQEREBERASIiAiIgIiICIiAiIgTERASJMQEiTEBERAREQERED/9k="
                />
            </div>
            <div class="content">
                <div>
                    <h2>Jordan 3</h2>
                    <p>
                        Lorem ipsum dolor sit amet consectetur adipisicing
                        elit. At quaerat sequi ut minima, repudiandae ex
                        delectus iusto, totam voluptatibus dolorum et facere
                        quidem, harum quod ipsa exercitationem.
                    </p>
                </div>
            </div>
        </div>

        <div class="card">
            <div class="imgBox">
                <img
                    src="https://cdn.shopify.com/s/files/1/0259/7021/2909/products/CT8527-400-PHSLH000-2000_240x@2x.jpg?v=1620291355"
                />
            </div>
            <div class="content">
                <div>
                    <h2>Jordan 4</h2>
                    <p>
                        Lorem ipsum dolor sit amet consectetur adipisicing
                        elit. At quaerat sequi ut minima, repudiandae ex
                        delectus iusto, totam voluptatibus dolorum et facere
                        quidem, harum quod ipsa exercitationem.
                    </p>
                </div>
            </div>
        </div>
    </div>
</body>

test test