Rainbow Divs
example html cssThis example uses HTML and CSS to create a border of colored divs.
<!DOCTYPE html>
<html>
<head>
<title>Rainbow Divs</title>
<style>
div {
padding: 25px;
font-size: 72px;
text-align: center;
border: thin solid black;
color: white;
}
.red {
background-color: red;
}
.orange {
background-color: orange;
}
.yellow {
background-color: yellow;
}
.green {
background-color: #00ff00;
}
.blue {
background-color: blue;
}
.violet {
background-color: purple;
}
</style>
</head>
<body>
<div class="red">
<div class="orange">
<div class="yellow">
<div class="green">
<div class="blue">
<div class="violet">Happy Coding!</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
See the Pen by Happy Coding (@KevinWorkman) on CodePen.
Tweak Ideas
- Create a gradient from different shades of the same color.
- Add content to each layer of div.
Comments and Questions
Happy Coding is a community of folks just like you learning about coding.
Do you have a comment or question? Post it here!