HTML:



<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>OURC Home page</title>
        <meta name="author" content="Christopher Massie">
        <link href="ourc_styles.css" rel="stylesheet">
    </head>
    <body>

        <div class="header">
            Open University Running Club
        </div>
        <nav class="navbar">
            <ul class="navbar-list" id="navbar-list">
                <li class="navbar-element"><a href="ourc_home.html">Home</a></li>
                <li class="navbar-element"><a href="ourc_data.html">Runner Data</a></li>
                <li class="navbar-element"><a href="ourc_dummy.html">Extra Link 1</a></li>
                <li class="navbar-element"><a href="ourc_dummy.html">Extra Link 2</a></li>
                <li class="navbar-element"><a href="ourc_dummy.html">Extra Link 3</a></li>
            </ul>
        </nav>

        <!-- Assigns navbar-current-page-link to navbar link for current page -->
        <script>
            var navbarList = document.getElementById("navbar-list");
            var navbarElements = navbarList.childNodes;

            for(var i = 0; i < navbarElements.length; i++)
            {
                var navbarElement = navbarElements[i];

                if(navbarElement.tagName != "LI")
                { continue; }

                var linkElement = navbarElement.childNodes[0];

                if(linkElement.href == document.URL)
                {
                    //linkElement.classList.add("navbar-current-page-link")
                    // ^ ^ ^ Proper way, but not supported in internet explorer <9

                    linkElement.className += " navbar-current-page-link"
                    break;
                }
            }
        </script>

        <div class="content-body"> <!-- Content -->
            <div>About the running club</div>
            <p>
                The Club is run on a rather informal basis in that there are no fixed
                meeting times or formally arranged groups, or club fees!
            </p>
            <figure>
                <img src="images/runners.jpg"/>
                <figcaption>OURC fun run</figcaption>
            </figure>
            <p class="myclass">
                Runners usually run at lunchtimes and meet each other by informal
                arrangement at the pavilion. In general there is a group (mainly men) that
                leaves for a run at about 12.20pm and then other groups (mainly women)
                that leave between 12.30pm and 12.45pm.
            </p>
            <p>
                From time to time there are more organized training sessions to do fartlek
                or interval training.
            </p>
            <p>
                Each month a handicap race is arranged so that runners can compete with
                one another. These races are either 5 miles, 10km or 5km.
            </p>
        </div>

        <div> <!-- Sponsored links -->
            <div> <!-- Sponsored Links Header -->
                Sponsored Links
            </div>
            <div> <!-- The Actual Links -->
                <div><a href="">Parkrun</a></div>
                <div><a href="">Half Marathon</a></div>
                <div><a href="">Athletic Club</a></div>
                <div><a href="">Big Fun Run</a></div>
                <div><a href="">Events</a></div>
            </div>
        </div>
        <div class="footer"> <!-- Footer -->
            <div class="footer-element-list">
                <div class="footer-element"><a href="ourc_dummy.html">Privacy</a></div>
                <div class="footer-element"><a href="ourc_dummy.html">Contact</a></div>
                <div class="footer-element"><a href="ourc_dummy.html">FAQs</a></div>
                <div class="footer-element"><a href="ourc_dummy.html">Copyright</a></div>
                <div class="footer-element"><a href="ourc_dummy.html">Conditions of use</a></div>
            </div>
        </div>
    </body>
</html>






CSS:


* {
    font-family: "Arial", "Helvetica", sans-serif;
    font-size: 16px;
}

a
{
    text-decoration: none;
    color: #1177d1;
}

a:visited
{
    color: #9411d1;
}

body
{
    margin: 0px;
}

.header
{
    text-align: center;
    background-color: #002158;
    color: white;
    font-size: 24px;
    padding: 10px;
}

nav
{
    position: sticky;
    top: 0;
}

.navbar-list
{
    list-style-type: none;
    padding: 4px;
    margin: 0;
    overflow: hidden;
    background-color: #1177d1;
}

.navbar-element
{
    float: left;
}

.navbar-element a
{
    display: block;
    color: white;
    text-decoration: none;
    padding: 8px;
    border-radius: 8px;
}

.navbar-element a:hover
{
    background-color: black;
}

.navbar-current-page-link
{
    background-color: #d3edf4;
    color: #222222 !important;
}

.navbar-current-page-link:hover
{
    color: white !important;
}

.content-body
{
    background-color: pink;
}

.footer
{
    margin: 0;
    padding: 0;
    background-color: #002158;
}

.footer-element-list
{
    text-align: center;
    padding: 4px;
    margin: 0;
}

.footer-element
{
    display: inline-block;
}

.footer-element a
{
    color: white;
    padding-left: 8px;
    padding-right: 8px;
}