Assessment wanted for Typesetting a community school homepage
task 1
by EiNzp
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>St Huxley's Community College</title>
<link href="styles/style.css" type="text/css" rel="stylesheet">
</head>
<body>
<header>
<h1>St Huxley's Community College</h1>
</header>
<section>
<h2>Brave new world</h2>
<p>It's a brave new world out there. Our children are being put in increasing more competitive situations, both during recreation, and as they start to move into the adult world of <a href="https://en.wikipedia.org/wiki/Examination">examinations</a>, <a href="https://en.wikipedia.org/wiki/Jobs">jobs</a>, <a href="https://en.wikipedia.org/wiki/Career">careers</a>, and other life choices. Having the wrong mindset, becoming <a href="https://en.wikipedia.org/wiki/Emotion">too emotional</a>, or making the wrong choices can contribute to them experiencing difficulty in taking their rightful place in today's ideal society.</p>
<p>As concerned parents, guardians or carers, you will no doubt want to give your children the best possible start in life — and you've come to the right place.</p>
<h2>The best start in life</h2>
<p>At St. Huxley's, we pride ourselves in not only giving our students a top quality education, but also giving them the societal and emotional intelligence they need to win big in the coming utopia. We not only excel at subjects such as genetics, data mining, and chemistry, but we also include compulsory lessons in:</p>
<ul>
<li>Emotional control</li>
<li>Judgement</li>
<li>Assertion</li>
<li>Focus and resolve</li>
</ul>
<p>If you are interested, then you next steps will likely be to:</p>
<ol>
<li><a href="#">Call us</a> for more information</li>
<li><a href="#">Ask for a brochure</a>, which includes signup form</li>
<li><a href="#">Book a visit</a>!</li>
</ol>
</section>
<aside>
<h2>Top course choices</h2>
<ul>
...
CSS
/* General setup */
* {
box-sizing: border-box;
}
body {
margin: 0 auto;
min-width: 1000px;
max-width: 1400px;
}
/* Layout */
section {
float: left;
width: 50%;
}
aside {
float: left;
width: 30%;
}
nav {
float: left;
width: 20%;
}
footer {
clear: both;
}
header, section, aside, nav, footer {
padding: 20px;
}
/* header and footer */
header, footer {
border-top: 5px solid #a66;
border-bottom: 5px solid #a66;
}
/* WRITE YOUR CODE BELOW HERE */
@font-face {
font-family: 'discoregular';
src: url('../fonts/disco___-webfont.woff2') format('woff2'),
url('../fonts/disco___-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'garogierregular';
src: url('../fonts/garogier-webfont.woff2') format('woff2'),
url('../fonts/garogier-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
/* Failed to add fonts to the editor on the site because the task needs to be added using @font-face. Take my word for it that everything worked perfectly on my PC.)) */
html {
font-family: "garogierregular";
font-size: 10px;
}
h1, h2 {
font-family: "discoregular";
letter-spacing: 0.1em;
}
body {
font-size: 1.6rem;
line-height: 1.5;
letter-spacing: 0.05em;
word-spacing: 0.1em;
}
h1 {
font-size: 3.2rem;
text-align: center;
}
h2 {
font-size: 2.4rem;
}
section h2+p {
text-indent: 20px;
}
a:link {
color: #a66;
}
a:visited {
color: #5E65AB;
}
a:focus {
color: #9AB59A;
text-decoration: none;
outline: none;
}
a:hover {
color: #9AB59A;
text-decoration: none;
}
a:active {
color: #AB5EAB;
background-color: #9AB59A;
}
a[href*="http"] {
background-image: url(https://raw.githubusercontent.com/mdn/learning-area/main/css/styling-text/typesetting-a-homepage-start/external-link-52.png);
background-repeat: no-repeat;
background-position: 100% 0;
background-size: 16px 16px;
padding-right: 18px;
}
section ul, aside...