project-one/about.html at main · chris-townsend/project-one · 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
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Through the Lens Photography showcase by Chris Townsend">
    <meta name="keywords" content="through the lens, photography, landscape photography, Chris Townsends photography">
    <link rel="stylesheet" href="assets/css/style.css">
    <title>Through the Lens</title>
</head>

<body>
    <header>
        <!--Through the Lens title-->
        <a href="index.html" aria-label="A clickable title that takes you back to the homepage">
            <h1 id="title">Through the Lens</h1>
        </a>
        <!--nav section of header-->
        <nav>
            <ul id="menu">
                <li>
                    <a href="contact.html" aria-label="Link to contact us page">Contact</a>
                </li>
                <li>
                    <a href="about.html" aria-label="Link to about us page">About</a>
                </li>
                <li>
                    <a href="gallery.html" aria-label="Link to gallery page">Gallery</a>
                </li>
                <li>
                    <a href="index.html" aria-label="Link to homepage">Home</a>
                </li>
            </ul>
        </nav>
    </header>
    <!--about us section-->
    <div class="about-section">
        <div class="inner-about">
            <h2 id="about-us">About Us</h2>
            <p class="about-me">Hi, My name is Chris Townsend and I am a keen landscape photographer. I have always been
                interested in photography from an early age, ever since recieving a Nikon point and shoot camera.
                I reguarly like to travel and my most recent trip was to Thailand - some of the best places of scenery I
                have ever visted! I have recently started a coding course where I hope to expand my knowedge and change
                careers. This website was designed to showcase my first project, demonstrating
                that I can use HTML and CSS to build a responsive website.</p>
            <!--skill set section-->
            <div id="skill-set">
                <a href="https://en.wikipedia.org/wiki/HTML" target="_blank" rel="noopener"
                    aria-label="HTML Wikipedia page opens in a new tab" title="Go to HTML Wikipedia page">HTML<i
                        class="fa-brands fa-html5"></i></a>
                <a href="https://en.wikipedia.org/wiki/CSS" target="_blank" rel="noopener"
                    aria-label="CSS Wikipedia page opens in a new tab" title="Go to CSS Wikipedia page">CSS<i
                        class="fa-brands fa-css3-alt"></i></a>
                <a href="https://en.wikipedia.org/wiki/GitHub" target="_blank" rel="noopener"
                    aria-label="GitHub Wikipedia page opens in a new tab" title="Go to GitHub Wikipedia page">GitHub<i
                        class="fa-brands fa-github"></i></a>
            </div>
        </div>
    </div>
    <!--meet the team section-->
    <section>
        <div class="meet-the-team">
            <h2 id="meet-team">Meet our Team</h2>
        </div>
        <div class="team">
            <!--employee one-->
            <div class="employee">
                <div class="employee-img">
                    <img src="assets/images/man-portrait-about-page.webp"
                        alt="portrait image of a man wearing a smart suit">
                </div>
                <h3>Chris Townsend</h3>
                <p class="employee-description">CEO Through the Lens</p>
                <p>After many years of careful consideration,
                    Chris decided to create his own landscape photography website to showcase his work from around the
                    world.
                    His collection spans over 1 million prints; with new photos being added daily to our gallery page.
                </p>
            </div>
            <div class="team">
                <!--employee two-->
                <div class="employee">
                    <div class="employee-img">
                        <img src="assets/images/woman-portrait-about-page.webp"
                            alt="portrait image of a woman wearing glasses">
                    </div>
                    <h3>Sarah Davies</h3>
                    <p class="employee-description">Assistant HR</p>
                    <p>Sarah has been apart of the team for five years now, assisting with any HR related queries,
                        she always has a smile on her face and ready to answer any questions you may have.
                    </p>
                </div>
            </div>
            <div class="team">
                <!--employee three-->
                <div class="employee">
                    <div class="employee-img">
                        <img src="assets/images/man-two-portrait-about-page.webp"
                            alt="portrait image of a man wearing a green shirt">
                    </div>
                    <h3>Tom Parker</h3>
                    <p class="employee-description">Logistics</p>
                    <p>After working as a logistics manager previously, Tom decided to come and work for Through the
                        Lens.
                        He has recently completed his HGV licence, always delivering in a professional and timely
                        mannor.</p>
                </div>
            </div>
        </div>
    </section>
    <!--footer-->
    <footer>
        <!--social links-->
        <div class="social-icons">
            <ul>
                <li>
                    <a href="https://facebook.com" target="_blank" rel="noopener"
                        aria-label="Vist our Facebook page (opens in a new tab)"
                        class="fa-brands fa-facebook-square"></a>
                </li>
                <li>
                    <a href="https://instagram.com" target="_blank" rel="noopener"
                        aria-label="Vist our Instagram page (opens in a new tab)"
                        class="fa-brands fa-instagram-square"></a>
                </li>
                <li>
                    <a href="https://twitter.com" target="_blank" rel="noopener"
                        aria-label="Vist our Twitter page (opens in a new tab)" class="fa-brands fa-twitter-square"></a>
                </li>
                <li>
                    <a href="https://github.com/chris-townsend" target="_blank" rel="noopener"
                        aria-label="Vist my Github page (opens in a new tab)" class="fa-brands fa-github-square"></a>
                </li>
            </ul>
        </div>
        <!--copyright info-->
        <div class="footer-bottom">
            &copy; Through the Lens | Designed by Chris Townsend
        </div>
    </footer>
    <!--font awesome script-->
    <script src="https://kit.fontawesome.com/9932e8fab5.js" crossorigin="anonymous"></script>
</body>
</html>