2025.9.3 Homework Sample Answer
HTML Code: (CS 9.2.2025.html)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Homework</title>
<style>
.mono {
font-family: monospace;
font-size: 20px;
}
.arial {
font-family: "Arial", sans-serif;
font-size: 15px;
clear: both;
}
.f1 {
background-color: rgb(50,85,164);
color: white;
border: 3px solid black;
border-radius: 20px;
width: 350px;
height: 80px;
justify-content: center;
align-items: center;
display: flex;
justify-items: center;
margin: auto;
}
.f2{
background-color: rgb(50,85,164);
color: white;
border: 3px solid rgb(4,205,4);
border-radius: 40px;
width: 350px;
height: 50px;
justify-content: center;
align-items: center;
justify-items: center;
display: flex;
margin-left:0px;
padding-left:20px;
}
.f31{
background-color: rgb(255,116,21);
color: black;
border: 3px outset rgb(203,34,1);
border-radius: 20px;
width: 350px;
height: 50px;
justify-content: center;
align-items: center;
justify-items: center;
display: flex;
padding-left:20px;
margin:auto;
}
.f32{
background-color: rgb(255,116,21);
color: black;
border: 3px outset rgb(203,34,1);
border-radius: 20px;
width: 350px;
height: 50px;
justify-content: center;
align-items: center;
justify-items: center;
display: flex;
padding-left:20px;
float:left;
}
.f4{
background-color: blue;
color: white;
border: 3px dotted rgb(204, 204, 204);
border-radius: 20px;
width: 350px;
height: 50px;
justify-content: center;
align-items: center;
justify-items: center;
display: flex;
float:right;
}
.f5{
background-color: rgb(254, 221, 3);
color: white;
border: 3px dotted black;
border-radius: 10px;
width: 350px;
height: 50px;
justify-content: center;
align-items: center;
justify-items: center;
display: flex;
margin:auto;
}
</style>
</head>
<body>
<h1>Recreate this page to the best of your ability.</h1>
<h3>Consider when and how to use classes and ids</h3>
<div class="mono f1">Welcome to the G7 CS elective</div>
<div class="arial f2"><b>In this class, we learn to code the following languages:</b></div>
<div class="arial f31"><b>HTML</b></div>
<div class="arial f4"><b>CSS</b></div>
<div class="arial f5"><b>Javascript</b></div>
<div class="arial f32"><b>Which HTML and CSS are important for the layout of our websites</b></div>
<div class="arial f5"><b>JS is the most important language we will use as it acts as </b></div>
<div class="arial f5"><b>the brain and central nervous system of our website</b></div>
</body>
</html>