<!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.