<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Five Equal Columns with Color Palette Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}
body {
font-family: Arial, Helvetica;
margin: 25px;
padding: 25px;
}
/* Create five equal columns that floats next to each other */
.column {
float: left;
width: 20%;
padding: 10px;
height: 300px; /* Should be removed. Only for demonstration */
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
h1 {
color: #2E3940;
font-weight: bold;
}
h2 {
color: #468C32;
font-weight: bold;
}
h3 {
color: white;
font-weight: bold;
}
/* using white text on dark backgrounds provides high contrast */
p {
color: white;
}
/* centers the image */
img.center {
margin-left: auto;
margin-right: auto;
}
/* image border */
.thick-border {
border-color: #2E3940;
border-width: 20px;
border-style: solid;
border-radius: 20px;
}
</style>
</head>
<body>
<h1>Five Equal Columns</h1>
<h2>Color Palette From a Photograph</h2>
<div class="row"><img class="thick-border" src="https://www.sharynmorrow.com/wp-content/uploads/2019/11/dolemites.jpg" alt="church in scenic setting"></div>
<div class="row">
<!-- change the hex value here for your first column -->
<div class="column" style="background-color: #2E3940;">
<h3>Col 1</h3>
<!-- some lorem ipsum text -->
<p>bibendum</p>
</div>
<!-- change the hex value here for your second column -->
<div class="column" style="background-color: #295922;">
<h3>Col 2</h3>
<!-- some lorem ipsum or placeholder text -->
<p>placeholder text</p>
</div>
<!-- change the hex value here for your third column -->
<div class="column" style="background-color: #468C32;">
<h3>Col 3</h3>
<!-- some lorem ipsum or placeholder text -->
<p>placeholder text</p>
</div>
<!-- change the hex value here for your fourth column -->
<div class="column" style="background-color: #397329;">
<!-- some lorem ipsum or placeholder text -->
<h3>Col 4</h3>
<p>placeholder text</p>
</div>
<!-- change the hex value here for your fifth column -->
<div class="column" style="background-color: #2D401A;">
<!-- some lorem ipsum or placeholder text -->
<h3>Col 5</h3>
<p>placeholder text</p>
</div>
</div>
</body>
</html>
Live View