index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>My Code Compendium</title>
    <link href="https://fonts.googleapis.com/css?family=Raleway:400,700&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Merriweather:400,700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css"
        integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/main.css">
</head>

<body>
    <header>
        <div class="top-header">
            <div class="full-width">

                <h1>Ethel's Code Compendium</h1>


                <nav>
                    <ul>
                        <li><a href="#resources">Resources</a></li>
                        <li><a href="#contact">Contact</a></li>
                    </ul>
                </nav>

            </div>
        </div>

    </header>

    <main>
        <section id="resources">
            <div class="full-width">
                <h2>Some of my favorites</h2>

                <div class="resource">
                    <h3>HTML</h3>
                    <ul>
                        <li><a href="https://developer.mozilla.org/en-US/docs/Web/HTML" target="_blank"
                                rel="noopener">Mozilla HTML Reference</a></li>
                        <li><a href="https://htmlreference.io/" target="_blank" rel="noopener">Htmlreference.io</a></li>
                        <li><a href="https://www.w3schools.com/html/default.asp" target="_blank" rel="noopener">W3
                                Schools HTML</a></li>
                    </ul>
                </div>


                <div class="resource">
                    <h3>CSS</h3>
                    <ul>
                        <li><a href="https://css-tricks.com/" target="_blank" rel="noopener">CSS Tricks</a></li>
                        <li><a href="https://tympanus.net/codrops/css_reference/" target="_blank" rel="noopener">Codrops
                                CSS Reference</a></li>
                        <li><a href="https://www.w3schools.com/css/default.asp" target="_blank" rel="noopener">W3
                                Schools CSS</a></li>
                    </ul>
                </div>

                <div class="resource">
                    <h3>GIT</h3>
                    <ul>
                        <li><a href="https://www.atlassian.com/git/tutorials/what-is-git" target="_blank"
                                rel="noopener">What is Git by Atlassian</a></li>
                        <li><a href="https://guides.github.com/introduction/git-handbook/" target="_blank"
                                rel="noopener">Git Handbook</a></li>
                        <li><a href="https://git-scm.com/docs" target="_blank" rel="noopener">Official Docs</a></li>
                    </ul>
                </div>
            </div>
        </section>
    </main>

    <footer id="contact">
        <h4>Let's code and coffee</h4>
        <ul class="social-icons">
            <li>
                <a href="https://www.facebook.com/" target="_blank" rel="noopener"><i class="fab fa-facebook-f"></i></a>
            </li>
            <li>
                <a href="https://twitter.com/" target="_blank" rel="noopener"><i class="fab fa-twitter"></i></a>
            </li>
            <li>
                <a href="https://www.instagram.com/" target="_blank" rel="noopener"><i class="fab fa-instagram"></i></a>
            </li>
        </ul>
        <!--footer content-wrapper ends-->
        <div class="copyright">
            <p>Copyright 2019</p>
            <p class="credit">Photos by Artem Sapegin and Michael Dam on Unsplash</p>
        </div>
    </footer>
</body>

</html>