<!DOCTYPE html>
<html lang="en-us">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <link href="style.css" type="text/css" rel="stylesheet">
    <title>St Huxley's Community College</title>
  </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>
      <li><a href="#">Genetic engineering</a></li>
      <li><a href="#">Genetic mutation</a></li>
      <li><a href="#">Organic Chemistry</a></li>
      <li><a href="#">Pharmaceuticals</a></li>
      <li><a href="#">Biochemistry with behaviour</a></li>
      <li><a href="#">Pure biochemistry</a></li>
      <li><a href="#">Data mining</a></li>
      <li><a href="#">Computer security</a></li>
      <li><a href="#">Bioinformatics</a></li>
      <li><a href="#">Cybernetics</a></li>
    </ul>

    <p><a href="#">See more</a></p>

  </aside>

  <nav>

    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Finding us</a></li>
      <li><a href="#">Courses</a></li>
      <li><a href="#">Staff</a></li>
      <li><a href="#">Media</a></li>
      <li><a href="#">Prospectus</a></li>
    </ul>

  </nav>

  <footer>

    <p>&copy; 2016 St Huxley's Community College</p>

  </footer>

  </body>
</html>
/* 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 */

/*! Generated by Font Squirrel (https://www.fontsquirrel.com) on August 12, 2022 */

/*! Generated by Font Squirrel (https://www.fontsquirrel.com) on August 12, 2022 */

@font-face {
  font-family: 'oleo_scriptbold';
  src: url('fonts/oleoscript-bold-webfont.woff2') format('woff2'),
       url('fonts/oleoscript-bold-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'linguistics_proregular';
  src: url('fonts/linguisticspro-regular-webfont.woff2') format('woff2'),
       url('fonts/linguisticspro-regular-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

/* || General stylings */

html {
  font-family: 'linguistics_proregular', "Times New Roman", Times, serif;
  font-size: 10px;
}

/* || Typography stylings */

h1,
h2 {
  font-family: 'oleo_scriptbold', cursive;
}

h1 {
  font-size: 3.6rem;
  letter-spacing: 2px;
  text-align: center;
}

h2 {
  font-size: 2.4rem;
  letter-spacing: 1px;
}

p {
  font-size: 1.6rem;
  letter-spacing: .5px;
  line-height: 1.6;
  word-spacing: .5px;
}

section h2 + p {
  text-indent: 20px;
}

/* || List stylings */

ul, 
ol {
  font-size: 1.6rem;
  letter-spacing: .5px;
  line-height: 1.6;
  word-spacing: .5px;
}

ul {
  list-style-type: square;
}

/* || Link stylings */

a {
  outline: none;
}

a:link {
  color: #a66;
}

a:visited {
  color: rebeccapurple;
}

a:focus,
a:hover {
  text-decoration: none;
  color: #087E8B;
}

a:active {
  color: #F58A07;
  background-color: unset;
}

a[href^="http"] {
  background: url("https://raw.githubusercontent.com/mdn/learning-area/main/css/styling-text/typesetting-a-homepage-start/external-link-52.png") 
              no-repeat 100%;
  background-size: 1.6rem 1.6rem;
  padding-right: 1.9rem;
}

/* || Navigation stylings */

nav ul {
  list-style-type: none;
}

nav li {
  margin: 1rem 0;
}

nav a {
  display: block;
  text-align: center;
  text-decoration: none;
  padding: 1.6rem 3.2rem;
  border: 1px solid #a66;
  font-size: 1.8rem;
}

nav a:link,
nav a:visited {
  color: #a66;
}

nav a:focus,
nav a:hover {
  background-color: #a66;
  color: #fff;
}

nav a:focus {
  outline: 2px solid #a66;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.