Sample-Site/index.html at master · ernestdicks6/Sample-Site · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
<title> Jubilee Austion</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 href="https://fonts.googleapis.com/css?family=Lora: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 -->
    <header>
        <div class="full-width">
                <div class="half-width">
                        <h1>Jubilee Austen</h1>
                    </div>

        <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>
    </div>
        <h2><span>Hi,</span> I'm a Developer that loves clean &amp; elegant code</h2>
    </header>
    <!-- Main-->
    <main>
        <!-- About-->
        <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 miy smiall growing
                            family. My journey into tech started with a degree in journalism. As I started 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 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 curiousity then opened a dor that could never be shut. When I learned how to build my
                        first website, I realized I found something that gave me the freedom & versatilit 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>
        <!-- Work-->
        <section id="work">
                    <div class="full-width">
                        <div class="third-width"><img src="images-icons/icon-html.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="images-icons/icon-css.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="images-icons/icon-pencil.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>
        <!-- Footer
                Holds Contact
            -->
        <footer id="contact">
            <div class="full-width">
                <div class="half-width">
                        <img id="contact-img" src="images-icons/contact.png" alt="Contact Icon">
                </div>
                <div class="half-width" id="contact-info">
                    <h2>Like what you see?</h2>
                    <h3 id="email-header">Let's meet for a cup of coffee.</h3>
                    <a href="mailto:hi@jubileeauston.com">
                            <img id="envelope" src="images-icons/icon-envelope.png" alt="Envelope Icon">
                    </a>
                    <a href="mailto:hi@jubileeauston.com">hi@jubileeaustion.com</a>
                    <h3 id="socialmedia-header">Or, find me on the interwebs</h3>
                    <ul>
                        <li><a href=""><img src="images-icons/icon-twitter.png" alt="Twitter Icon"></a></li>
                        <li><a href=""><img src="images-icons/icon-tumblr.png" alt="Tumblr Icon"></a></li>
                        <li><a href=""><img src="images-icons/icon-instagram.png" alt="Instagram Icon"></a></li>
                        <li><a href=""><img src="images-icons/icon-linkedin.png" alt="LinkedIn Icon"></a></li>
                        <li><a href=""><img src="images-icons/icon-github.png" alt="Github Icon"></a></li>
                    </ul>
                </div>
            </div>
        </footer>
    </main>
    </body>
</html>