EXERCISE 3
<>index3.html>...
​
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Proper Stickman Techniques</title>
<link rel="stylesheet" href="style.css">
<style>
.navbar {
background-color: yellow;
text-align: center;
font-family: Georgia;
border: 15px solid rgba(237, 146, 0, 0.669);
border-radius: 10px;
}
.navdiv {
display: flex;
justify-content: center;
}
.navdiv ul {
display: flex;
gap: 50px;
}
.navdiv li {
display: flex;
list-style: none;
}
.navdiv a {
display: flex;
padding: 10px;
display: block;
}
body {
font-family: Georgia, 'Times New Roman', Times, serif;
background-color: rgb(46, 24, 0);
color: whitesmoke;
}
header h1 {
text-align: left;
color: yellow;
font-size: 60px;
}
.container {
width: 90%;
max-width: 1000px;
margin-left: 30px;
padding: 20px;
}
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;
margin-bottom: 80px;
transition: 0.3s;
}
.item img {
width: 100%;
height: auto;
transition: 0.3s;
}
.item a {
color: yellow;
}
.caption {
margin-top: 10px;
margin-bottom: 20px;
font-size: 30px;
color: yellow;
}
.item:hover {
background-color: rgba(255, 255, 0, 0.2);
transform: scale(1.05);
}
.item:hover img {
filter: brightness(80%);
}
</style>
</head>
<body>
<nav class="navbar">
<div class="navdiv">
<ul>
<li><a href="index4.html">Home</a></li>
<li><a href="index5.html">Body Composition</a></li>
<li><a href="index6.html">Expressions</a></li>
<li><a href="index7.html">Poses</a></li>
</ul>
</div>
</nav>
<div class="container">
<header>
<h1>Proper Stickman Techniques</h1>
<p>Most people only draw terrible stickmans, but you won't!</p>
</header>
<div class="gallery">
<div class="item">
<a href="index5.html">
<img src="step9stick.png" alt="step9stick">
<div class="caption">Body Composition</div>
</a>
</div>
<div class="item">
<a href="index6.html">
<img src="board.JPG" alt="board">
<div class="caption">Expressions</div>
</a>
</div>
<div class="item">
<a href="index7.html">
<img src="thetitianic.jpeg" alt="thetitanic">
<div class="caption">Poses</div>
</a>
</div>
</div>
</div>
</body>
</html>
​
<>body.html>...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Proper Stickman Techniques</title>
<style>
.navbar {
background-color: yellow;
text-align: center;
font-family: Georgia;
border: 15px solid rgba(237, 146, 0, 0.669);
border-radius: 10px;
}
.navdiv {
display: flex;
justify-content: center;
}
.navdiv ul {
display: flex;
gap: 50px;
}
.navdiv li {
display: flex;
list-style: none;
}
.navdiv a {
display: flex;
padding: 10px;
display: block;
}
body {
font-family: Georgia, 'Times New Roman', Times, serif;
background-color: rgb(46, 24, 0);
color: whitesmoke;
}
.container {
width: 90%;
max-width: 1000px;
margin-left:30px;
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>
<nav class="navbar">
<div class="navdiv">
<ul>
<li><a href="index4.html">Home</a></li>
<li><a href="index5.html">Body Composition</a></li>
<li><a href="index6.html">Expressions</a></li>
<li><a href="index7.html">Poses</a></li>
</ul>
</div>
</nav>
<div class="container">
<h2>Body Composition</h2>
<p>The base for your character!</p>
<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 bottom 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>
​
<>expression.html>...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Proper Stickman Techniques</title>
<style>
.navbar {
background-color: yellow;
text-align: center;
font-family: Georgia;
border: 15px solid rgba(237, 146, 0, 0.669);
border-radius: 10px;
}
.navdiv {
display: flex;
justify-content: center;
}
.navdiv ul {
display: flex;
gap: 50px;
}
.navdiv li {
display: flex;
list-style: none;
}
.navdiv a {
display: flex;
padding: 10px;
display: block;
}
body {
font-family: Georgia, 'Times New Roman', Times, serif;
background-color: rgb(46, 24, 0);
color: whitesmoke;
}
.container {
width: 90%;
max-width: 1000px;
margin-left:30px;
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;
}
.caption {
margin-top: 10px;
margin-bottom: 20px;
font-size: 30px;
color: yellow;
}
</style>
</head>
<body>
<nav class="navbar">
<div class="navdiv">
<ul>
<li><a href="index4.html">Home</a></li>
<li><a href="index5.html">Body Copmosition</a></li>
<li><a href="index6.html">Expressions</a></li>
<li><a href="index7.html">Poses</a></li>
</ul>
</div>
</nav>
<div class="container">
<h2>Expressions</h2>
<p>Give your character some emotions!</p>
<div class="gallery">
<div class="item">
<img src="normal.JPG" alt="normal">
<div class="caption">Normal</div>
</div>
<div class="item">
<img src="board.JPG" alt="board">
<div class="caption">Bored</div>
</div>
<div class="item">
<img src="cry.JPG" alt="cry">
<div class="caption">Crying</div>
</div>
<div class="item">
<img src="questioning.JPG" alt="questioning">
<div class="caption">Suspecting</div>
</div>
<div class="item">
<img src="angry.JPG" alt="angry">
<div class="caption">Angry</div>
</div>
<div class="item">
<img src="shocked.JPG" alt="shocked">
<div class="caption">Shocked</div>
</div>
<div class="item">
<img src="sad.JPG" alt="sad">
<div class="caption">Sad</div>
</div>
<div class="item">
<img src="inspired.JPG" alt="inspired">
<div class="caption">Inspired</div>
</div>
</div>
</div>
</body>
</html>
​
<>poses.html>...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Proper Stickman Techniques</title>
<style>
.navbar {
background-color: yellow;
text-align: center;
font-family: Georgia;
border: 15px solid rgba(237, 146, 0, 0.669);
border-radius: 10px;
}
.navdiv {
display: flex;
justify-content: center;
}
.navdiv ul {
display: flex;
gap: 50px;
}
.navdiv li {
display: flex;
list-style: none;
}
.navdiv a {
display: flex;
padding: 10px;
display: block;
}
body {
font-family: Georgia, 'Times New Roman', Times, serif;
background-color: rgb(46, 24, 0);
color: whitesmoke;
}
.container {
width: 90%;
max-width: 1000px;
margin-left:30px;
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>
<nav class="navbar">
<div class="navdiv">
<ul>
<li><a href="index4.html">Home</a></li>
<li><a href="index5.html">Body Copmosition</a></li>
<li><a href="index6.html">Expressions</a></li>
<li><a href="index7.html">Poses</a></li>
</ul>
</div>
</nav>
<div class="container">
<h2>Poses</h2>
<p>Try out these fun poses!</p>
<div class="gallery">
<div class="item">
<img src="talking.jpeg" alt="talking">
<div class="caption">Talking</div>
</div>
<div class="item">
<img src="thefrog.jpeg" alt="thefrog">
<div class="caption">The Frog</div>
</div>
<div class="item">
<img src="thescream.jpeg" alt="thescream">
<div class="caption">The Scream</div>
</div>
<div class="item">
<img src="thespiderman.jpeg" alt="thespiderman">
<div class="caption">The Spiderman</div>
</div>
<div class="item">
<img src="thetitianic.jpeg" alt="thetitianic">
<div class="caption">The Titanic</div>
</div>
<div class="item">
<img src="theballet.jpeg" alt="theballet">
<div class="caption">The Ballet</div>
</div>
<div class="item">
<img src="thebodybuilder.jpeg" alt="thebodybuilder">
<div class="caption">The Bodybuilder</div>
</div>
</div>
</div>
</body>
</html>
​
