index.html

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

    <head>
        <meta charset="utf-8">
        <title>Jubilee Austen | Portfolio</title>
        <link rel="stylesheet" href="css/normalize.css">
        <link rel="stylesheet" href="css/main.css">
        <link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700' rel='stylesheet' type='text/css'>
        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link href="https://fonts.googleapis.com/css2?family=Lora:wght@400;700&display=swap" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css?family=Lora:400,700" rel="stylesheet" type="text/css">
    </head>

    <body>
        <header>
            <div class="full-width">
    <!----Name---->        
                <div class="half-width">
                    <h1>Jubilee Austen</h1>
                </div>
    <!----Navigation Bar---->
                <div class="half-width">
                    <nav>
                        <ul>
                            <li><a href="#about">About</a></li>
                            <li><a href="#work">Work</a></li>
                            <li><a href="#contact">Contact</a></li>
                        </ul>
                    </nav>
                </div>
    <!----Salutation---->        
                <h2><span>Hi,</span> I'm a developer that loves clean &amp; elegant code.</h2>
            </div>
        </header>

        <main>
    <!----About Me---->
            <section id="about">
                <div class="full-width">
                    <h2>A little bit about me.</h2>
                    <div class="half-width">
                        <p>I’ve made my home base in Providence, Rhode Island, with my small growing family. My journey into tech started with a degree in journalism. As I started sharing my writing online, I was fascinated with how easily I could get my voice out there. I was hooked and wanted to learn how to build my own site to fit my own specific needs.</p>
                    </div>
                    <div class="half-width">
                        <p>That curiosity then opened a door that could never be shut. When I learned how to build my first website, I realized I found something that gave me the freedom & versatility I was looking for in my work. Now I’ve made a full switch to front-end development, where I can use my organization skills and eye for detail to write clean, elegant code.</p>
                    </div>
                </div>
            </section>
            
    <!----Skills/Work---->
            <section id="work">
                <div class="full-width">
                    <div class="third-width">
                        <img src="img/html-icon.png" alt="HTML icon" />
                        <h3>Hand-Coded HTML</h3>
                        <p>My focus is writing clean, well-formatted, semantic HTML5 by hand to make sure that the content is easy to read, easy to collaborate, trouble-shoot and accessible.</p>
                    </div>
                    <div class="third-width">
                        <img src="img/css-icon.png" alt="CSS icon"/>
                        <h3>Well-Organized CSS</h3>
                        <p>I pride myself on writing CSS that is easy to read and build on. I focus on keeping my CSS lean and fast to load, and I make it a habit to stay up to date on current best practices.</p>
                    </div>
                    <div class="third-width">
                        <img src="img/pencil-icon.png" alt="pencil icon"/>
                        <h3>Ease Converting Designs into Code</h3>
                        <p>You can trust me to take a designer’s PSD and quickly & accurately convert it into a webpage that is pixel-perfect match.</p>
                    </div>
                </div>
            </section>

    <!----Contact---->
            <footer id="contact">
                <div class="full-width">
                    <div class="half-width">
                        <img src="img/contact-image.png" alt="A person sitting at a desk typing on a silver Macbook" id="contact-img"/>
                    </div>
                    <div class="half-width">
                        <h2>Like what you see?</h2>
                        <h3 id="email-header">Let's meet for a cup of coffee.</h3>
                        <a href="mailto:hi@jubileeausten.com">
                            <img src="img/envelope.png" alt="Envelope icon" id="envelope"/>hi [@] jubileeausten.com
                        </a>
                        <h3 id="socialmedia-header">Or, find me on the interwebs.</h3>
                        <ul>
                            <li><a href="https://www.twitter.com/" target="_blank"><img src="img/twitter.png" alt="Twitter Icon"/></a></li>
                            <li><a href="https://www.tumblr.com/" target="_blank"><img src="img/tumblr.png" alt="Tumblr Icon"/></a></li>
                            <li><a href="https://www.instagram.com/" target="_blank"><img src="img/instagram.png" alt="Instagram Icon"/></a></li>
                            <li><a href="https://www.linkedin.com/" target="_blank"><img src="img/linkedin.png"  alt="LinkedIn Icon"/></a></li>
                            <li><a href="https://www.github.com/" target="_blank"><img src="img/github.png" alt="Github Icon"/></a></li>
                        </ul>
                    </div>
                </div>
            </footer>
            
        </main>

    </body>

</html>