EXERCISE 2
<>index2.html>...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Stickman Guid</title>
<style>
body {
font-family: 'Courier New', Courier, monospace;
background-color: rgb(46, 24, 0);
color: whitesmoke;
}
.container {
width: 90%;
max-width: 1000px;
margin-left:50px;
padding: 20px;
}
header h1 {
text-align: left;
color: yellow;
font-size: 60px;
}
p {
font-size: 25px;
color: yellow;
margin-bottom: 60px;
}
h2 {
margin-top: 20px;
font-size: 40px;
color: yellow;
}
.gallery {
display: grid;
grid-template-columns: repeat(3,1fr);
gap: 30px;
}
.item {
text-align: center;
width: 550px;
}
.item img {
width: 100%;
height: auto;
}
.item:last-child {
grid-column: 2 / 3;
}
.caption {
margin-top: 10px;
margin-bottom: 20px;
font-size: 30px;
color: yellow;
}
</style>
</head>
<body>
<div class="container">
<header>
<h1>HOW TO DRAW A STICK PERSON</h1>
<p>Study shows that 90% of people cannot draw a proper stickman. You will be in the 10% that can!</p>
</header>
<h2>Body Composition</h2>
<div class="gallery">
<div class="item">
<img src="step1stick.png" alt="step1stick">
<div class="caption">Draw a box.</div>
</div>
<div class="item">
<img src="step2stick.png" alt="step2stick">
<div class="caption">Draw a circle above the box.</div>
</div>
<div class="item">
<img src="step3stick.png" alt="step3stick">
<div class="caption">Connect the circle and box with a line.</div>
</div>
<div class="item">
<img src="step4stick.png" alt="step4stick">
<div class="caption">Draw two lines down the top two corners of the box.</div>
</div>
<div class="item">
<img src="step5stick.png" alt="step5stick">
<div class="caption">Draw two lines down the bottom two corners of the box.</div>
</div>
<div class="item">
<img src="step6stick.png" alt="step6stick">
<div class="caption">Draw two ovals or tear drops at the end of the top two lines.</div>
</div>
<div class="item">
<img src="step7stick.png" alt="step7stick">
<div class="caption">Draw two ovals at the end of the bottowm two lines.</div>
</div>
<div class="item">
<img src="step8stick.png" alt="step8stick">
<div class="caption">Draw two small filled in circles inside the larger circle.</div>
</div>
<div class="item">
<img src="baymax.png" alt="baymax">
<div class="caption">If you draw a line inbetween the eyes it looks like Baymax from Big Hero 6</div>
</div>
<div class="item">
<img src="step9stick.png" alt="step9stick">
<div class="caption">Lastly draw a thin line below the two circles.</div>
</div>
</div>
</div>
</body>
</html>
