Hi everyone. Welcome to another tutorial by Coding Artist. In this tutorial, we take a look at how to build a Cowboy. To create this project we simply need HTML and CSS. Get ready to learn something fun and exciting today. Do not forget to check out this playlist that includes numerous projects based on HTML and CSS to improve your skills.
Video Tutorial:
If you prefer to learn by watching a video tutorial over reading this lengthy blog post you can watch the video tutorial below. Perhaps do not forget to subscribe to my YouTube channel where I post tips, tricks, and tutorials related to web development regularly.
Project Folder Structure:
Let’s build the project folder structure before we begin writing the code. We create a project folder called ‘Cowboy CSS Art’. Inside this folder, we have two files. These files are index.html and style.css.
HTML:
We begin with the HTML Code. First, create a file called – ‘index.html’. Copy the code below and paste it into your HTML file.
We start by creating the container div. The container div contains the divs for each part of the cowboy. Each of these div is represented by a class of the part they are referring to.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Cowboy CSS Art</title>
<!--Stylesheet-->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<div class="ear center"></div>
<div class="cowboy center">
<div class="hat"></div>
<div class="belt"></div>
<div class="hair center">
<div class="eye"></div>
<div class="blush"></div>
<div class="moustache"></div>
</div>
<div class="jacket center">
<div class="jacket-bottom"></div>
</div>
</div>
</div>
</body>
</html>
CSS:
Next, we add styling using CSS. For this, copy the code provided below and paste it into your stylesheet.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
background-color: #79311f;
}
.center {
margin: auto;
left: 0;
right: 0;
}
.container {
width: 21.87em;
height: 25em;
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
}
.cowboy {
background-color: #f4b596;
height: 7.5em;
width: 9.37em;
border-radius: 0 0 1em 1em;
position: absolute;
top: 9.37em;
}
.ear {
height: 1.87em;
width: 11.87em;
background-color: #f4b596;
border-radius: 1em;
position: absolute;
top: 12.18em;
}
.ear:before {
position: absolute;
content: "";
height: 1.25em;
width: 10.93em;
background-color: #ec7177;
border-radius: 1em;
position: absolute;
margin: auto;
left: 0;
right: 0;
top: 0.34em;
}
.hair {
height: 0;
width: 0;
border-top: 0.95em solid #000000;
border-left: 0.95em solid transparent;
border-right: 0.95em solid transparent;
position: absolute;
}
.hair:before,
.hair:after {
content: "";
position: absolute;
height: 1.56em;
width: 1.56em;
background-color: #000000;
top: -0.96em;
}
.hair:before {
left: -4.68em;
border-radius: 0 0 1.56em 0;
}
.hair:after {
left: 3.12em;
border-radius: 0 0 0 1.56em;
}
.eye {
position: absolute;
background-color: #000000;
height: 1.25em;
width: 1.25em;
border-radius: 50%;
top: 0.31em;
left: -1.87em;
box-shadow: 2.5em 0 #000000;
}
.blush {
position: absolute;
background-color: #ec7177;
height: 1.25em;
width: 1.25em;
border-radius: 50%;
top: 2.18em;
left: -3.12em;
box-shadow: 5em 0 #ec7177;
}
.moustache,
.moustache:before {
position: absolute;
height: 1.87em;
width: 1.87em;
background-color: #000000;
}
.moustache {
border-radius: 1.87em 0;
top: 2.5em;
left: -1.87em;
}
.moustache:before {
content: "";
border-radius: 0 1.87em;
left: 1.75em;
}
.hat {
position: absolute;
height: 1.56em;
width: 15em;
background-color: #b35230;
top: -1.56em;
left: -2.81em;
}
.hat:before {
position: absolute;
content: "";
height: 3.12em;
width: 1.56em;
background-color: #b35230;
bottom: 0;
border-radius: 0.93em 0.93em 0 0;
box-shadow: 13.43em 0 #b35230;
}
.hat:after {
position: absolute;
content: "";
width: 4.37em;
height: 6.87em;
background-color: #b35230;
left: 3.12em;
bottom: 0;
border-radius: 2.5em 2.5em 0 0;
box-shadow: 4.31em 0 #b35230;
}
.belt {
position: absolute;
height: 1.87em;
width: 8.75em;
background-color: #000000;
top: -3.43em;
left: 0.31em;
}
.belt:before {
position: absolute;
content: "";
height: 0.87em;
width: 1.5em;
border: 0.5em solid #eaa419;
left: 3.12em;
}
.jacket {
position: absolute;
height: 5.62em;
width: 6.25em;
background: linear-gradient(
to right,
#000000 33%,
#ffffff 33%,
#ffffff 66%,
#000000 66%
);
top: 8.75em;
}
.jacket:before {
height: 0;
width: 0;
position: absolute;
content: "";
border-top: 1.87em solid #df2535;
border-left: 1.87em solid transparent;
border-right: 1.87em solid transparent;
left: 1.25em;
}
.jacket:after {
position: absolute;
content: "";
height: 1.25em;
width: 3.75em;
background-color: #f4b596;
top: -1.25em;
margin: auto;
left: 0;
right: 0;
}
.jacket-bottom {
width: 80%;
height: 1.25em;
background-color: #ffffff;
position: absolute;
left: 10%;
bottom: -1.25em;
}
.jacket-bottom:before {
position: absolute;
content: "";
height: 0.93em;
width: 0.93em;
background-color: #eaa419;
border-radius: 50%;
left: 4.06em;
top: -3.75em;
box-shadow: -5.31em -15.62em #79311f;
}
@media screen and (min-width: 800px) {
.container {
font-size: 1.4em;
}
}
Our CSS starts with providing the required styling related to height, width, and alignment to the container div. Coming to all the parts of Cowboy, the important part here is to manage the alignment, size, and background for each div.
We begin by creating the ears first since they are the only ones that require different alignment than other parts. Apart from the important parts mentioned above we need to provide a `border-radius` to the ears for the curve effect. Then we use the `before` pseudo-element for making the dark part of the ear. After this, we create the hat, a belt, the face which contains hair, eyes, blush, and a mustache, and finally the jacket.
That’s all for this tutorial. If you have any queries you can post them below. If you have any suggestions or feedback do let me know. You can download the source code easily by clicking the ‘Download Code’ button below.
