<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link href="style.css" type="text/css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Karla" rel="stylesheet">
    <title> Color palette </title>
</head>

<body>

    <!-- First color palette -->

    <div class="container">

        <div class="color-palette">
            <img src="https://res.cloudinary.com/do8ajd6lv/image/upload/v1547545264/house.jpg" alt="An old house with blush, nude and chocolate colors">
            <div class="colors-container">
                <div class="macaron box">
                    <p>#F7DFD4</p>
                    <p>Macaron</p>
                </div>

                <div class="blush box">
                    <p>#EABCAC</p>
                    <p>Blush</p>
                </div>

                <div class="nude box">
                    <p>#E2B091</p>
                    <p>Nude</p>
                </div>

                <div class="chocolat box">
                    <p>#874E4C</p>
                    <p>Chocolat</p>
                </div>

                <div class="cafenoir box">
                    <p>#32485C</p>
                    <p>Café Noir</p>
                </div>
            </div>
        </div>

    <!-- Second color palette -->

    <div class="color-palette">
            <img src="https://res.cloudinary.com/do8ajd6lv/image/upload/v1547545266/beach.jpg" alt="A colourful picture of a beach">
            <div class="colors-container">
                <div class="glass box">
                    <p>#EDFAFD</p>
                    <p>Glass</p>
                </div>

                <div class="chill box">
                    <p>#AED9DA</p>
                    <p>Chill</p>
                </div>

                <div class="coral box">
                    <p>#3DDAD8</p>
                    <p>Californian coral</p>
                </div>

                <div class="bondi box">
                    <p>#2A93D5</p>
                    <p>Bondi Blue</p>
                </div>

                <div class="marina box">
                    <p>#135589</p>
                    <p>Marina</p>
                </div>
            </div>
        </div>

    <!-- Third color palette -->

    <div class="color-palette">
            <img src="https://res.cloudinary.com/do8ajd6lv/image/upload/v1547545265/sunset.jpg" alt="An old house with blush, nude and chocolate colors">
            <div class="colors-container">
                <div class="tropical box">
                    <p>#F5AB99</p>
                    <p>Tropical Pink</p>
                </div>

                <div class="sunset box">
                    <p>#FEB47B</p>
                    <p>Liquid Sunset</p>
                </div>

                <div class="heatwave box">
                    <p>#FF7E5F</p>
                    <p>Heatwave</p>
                </div>

                <div class="paradise box">
                    <p>#765285</p>
                    <p>Paradise</p>
                </div>

                <div class="nightfall box">
                    <p>#351C4D</p>
                    <p>Nightfall</p>
                </div>
            </div>
        </div>
        
        <!-- Fourth color palette -->

    <div class="color-palette">
            <img src="https://res.cloudinary.com/do8ajd6lv/image/upload/v1547545264/desert.jpg" alt="A desert with mountains in the back.">
            <div class="colors-container">
                <div class="ivory box">
                    <p>#F4E8C1</p>
                    <p>Ivory</p>
                </div>

                <div class="azul box">
                    <p>#A0C1B8</p>
                    <p>Azul Verde</p>
                </div>

                <div class="bolivia box">
                    <p>#709FB0</p>
                    <p>Bolivia</p>
                </div>

                <div class="jacaranda box">
                    <p>#726A95</p>
                    <p>Jacaranda</p>
                </div>

                <div class="malbec box">
                    <p>#351F39</p>
                    <p>Malbec</p>
                </div>
            </div>
        </div>
        
         <!-- Fifth color palette -->

    <div class="color-palette">
            <img src="https://res.cloudinary.com/do8ajd6lv/image/upload/v1547545264/flower.jpg" alt="A flower.">
            <div class="colors-container">
                <div class="cream box">
                    <p>#E9DCCD</p>
                    <p>Cream</p>
                </div>

                <div class="petal box">
                    <p>#E3BAB3</p>
                    <p>Petal</p>
                </div>

                <div class="burgundy box">
                    <p>#613A43</p>
                    <p>Burgundy</p>
                </div>

                <div class="fresh box">
                    <p>#849974</p>
                    <p>Fresh</p>
                </div>

                <div class="charcoal box">
                    <p>#36384C</p>
                    <p>Charcoal</p>
                </div>
            </div>
        </div>
        
        <!-- Sixth color palette -->

    <div class="color-palette">
            <img src="https://res.cloudinary.com/do8ajd6lv/image/upload/v1547545264/florence.jpg" alt="An Italian city with pinkish and greenish colours.">
            <div class="colors-container">
                <div class="rosa box">
                    <p>#F2AD9F</p>
                    <p>Rosa</p>
                </div>

                <div class="ruby box">
                    <p>#F26968</p>
                    <p>Ruby Grapefruit</p>
                </div>

                <div class="limestone box">
                    <p>#DFE2D2</p>
                    <p>Limestone</p>
                </div>

                <div class="venice box">
                    <p>#6CBF84</p>
                    <p>Venice</p>
                </div>

                <div class="moss box">
                    <p>#323339</p>
                    <p>Moss River</p>
                </div>
            </div>
        </div>

        <!-- Seventh color palette -->

    <div class="color-palette">
            <img src="https://res.cloudinary.com/do8ajd6lv/image/upload/v1547545264/blossom.jpg" alt="A yellowish color flower.">
            <div class="colors-container">
                <div class="chiffon box">
                    <p>#F8F3E6</p>
                    <p>Chiffon</p>
                </div>

                <div class="vanilla box">
                    <p>#E7CC8F</p>
                    <p>Vanilla</p>
                </div>

                <div class="buttercup box">
                    <p>#EFAA52</p>
                    <p>Buttercup</p>
                </div>

                <div class="rust box">
                    <p>#AB3E16</p>
                    <p>Rust</p>
                </div>

                <div class="mahogany box">
                    <p>#48120E</p>
                    <p>Mahogany</p>
                </div>
            </div>
        </div>
        
           <!-- Eighth color palette -->

    <div class="color-palette">
            <img src="https://res.cloudinary.com/do8ajd6lv/image/upload/v1547545264/material.jpg" alt="A yellowish color flower.">
            <div class="colors-container">
                <div class="cashmere box">
                    <p>#CBC5C1</p>
                    <p>Cashmere</p>
                </div>

                <div class="french box">
                    <p>#A2AAB0</p>
                    <p>French Blue</p>
                </div>

                <div class="white box">
                    <p>#EBECED</p>
                    <p>White Wash</p>
                </div>

                <div class="denim box">
                    <p>#4C586F</p>
                    <p>Denim</p>
                </div>

                <div class="gunmetal box">
                    <p>#3E3E3B</p>
                    <p>Gunmetal</p>
                </div>
            </div>
        </div>
        
    </div>
</body>
</html>
.container {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    background-color: #FFFF;
    width: 100%;
    height: 600px; 
}

.color-palette {
    display: flex;
    flex-direction: row;
    flex-grow: 1;
    padding: 10px;
    width: auto;
    height: 50%;
}

img {
    height: 100%; 
    width: auto;
}


.colors-container {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.box {
    width: 100%;
    height: 100%;
    margin: 0px 0px 0px 5px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    
}

p {
    text-align: center;
    letter-spacing: 3px;
    font-family: 'Karla', sans-serif;
    color: #fff;
    text-transform: uppercase;
    font-size: 0.8em;
    margin: 0;
    padding: 5px;
    
}

.macaron {
    background: #F7DFD4;
}

.blush {
    background: #EABCAC;
}

.nude {
    background: #E2B091;

}

.chocolat {
    background: #874E4C;

}

.cafenoir {
    background: #32485C;

}

.glass {
    background: #EDFAFD;
}

.chill {
    background: #AED9DA;
}

.coral {
    background: #3DDAD8;

}

.bondi {
    background: #2A93D5;

}

.marina {
    background: #135589;

}

.tropical {
    background: #F5AB99;
}

.sunset {
    background: #FEB47B;
}

.heatwave {
    background: #FF7E5F;

}

.paradise {
    background: #765285;

}

.nightfall {
    background: #351C4D;

}

.ivory {
    background: #F4E8C1;
}

.azul {
    background: #A0C1B8;
}

.bolivia {
    background: #709FB0;

}

.jacaranda {
    background: #726A95;

}

.malbec {
    background: #351F39;

}

.cream {
    background: #E9DCCD;
}

.petal {
    background: #E3BAB3;
}

.burgundy {
    background: #613A43;

}

.fresh {
    background: #849974;

}

.charcoal {
    background: #36384C;

}

.rosa {
    background: #F2AD9F;
}

.ruby {
    background: #F26968;
}

.limestone {
    background: #DFE2D2;

}

.venice {
    background: #6CBF84;

}

.moss {
    background: #323339;

}

.chiffon {
    background: #F8F3E6;
}

.vanilla {
    background: #E8CC8F;
}

.buttercup {
    background: #EFAA52;

}

.rust {
    background: #AB3E16;

}

.mahogany {
    background: #48120E;

}

.cashmere {
    background: #CBC5C1;
}

.french {
    background: #A2AAB0;
}

.white {
    background: #EBECED;

}

.denim {
    background: #4C586F;

}

.gunmetal {
    background: #3E3E3B;

}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.