web-development-and-user-experience---assessment-02-bastianhilton/about.html at main · Birkbeck2/web-development-and-user-experience---assessment-02-bastianhilton · 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
<!DOCTYPE html>
<html lang="en">
    <head>
        <!--<base href="https://birkbeck2.github.io/web-development-and-user-experience---assessment-02-bastianhilton">-->
        <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="Sebastian's Chef UX Portfolio Website">
        <meta name="author" content="Sebastian Hilton">
        <meta name="keywords" content="HTML, CSS, JavaScript">
        <title>Sebastian Hilton UX Portfolio Website - About</title>
        <link rel="stylesheet" href="styles.css">
    </head>

<body>
    <!-- Navigation Bar Using this nav tag because it follows good design practice by having a semantic html tag placed above the rest of the content on a website -->
    <nav class="topnav">
        <ul>
            <li class="logo"><a href="index.html">Sebastian's Portfolio</a></li>
            <div class="rightnav">
                <li><a href="index.html">Home</a></li>
                <li><a href="about.html">About</a></li>
                <li><a href="portfolio.html">Portfolio</a></li>
                <li><a href="mailto:shilto04@student.bbk.ac.uk">Contact</a></li>
            </div>
        </ul>
    </nav>

    <!-- Main Content Section Using main tag as it is a semantic html tag that properly explains that this is a main section used on the website -->
    <main class="aboutpage">
        <div class="aboutcontainer">
            <div class="leftimage">
                <video src="assets/Seoul.mp4" autoplay aria-label="Seoul"></video>
            </div>
            <div class="righttext">
                <p>Hi, my name is Sebastian and I am a chef. This is my portfolio website.</p>
            </div>
        </div>

        <div class="gallerycontainer">
            <h1 class="galleryheader">Ingredients I Use</h1>
                <div class="galleryimg"><img src="assets/bread-1281053.jpg" alt="Type of food is Bread"><figcaption>Bread</figcaption></div>
                <div class="galleryimg"><img src="assets/artichoke-3386681_1920.jpg" alt="Type of food is Artichoke"><figcaption>Artichoke</figcaption></div>
                <div class="galleryimg"><img src="assets/berries-g2680066e3_1920.jpg" alt="Type of food is Berries"><figcaption>Berries</figcaption></div>
                <div class="galleryimg"><img src="assets/cheese-1371196_1920.jpg" alt="Type of food is Cheese"><figcaption>Cheese</figcaption></div>
                <div class="galleryimg"><img src="assets/chocolate-2764581_1920.jpg" alt="Type of food is Chocolate"><figcaption>Chocolate</figcaption></div>
                <div class="galleryimg"><img src="assets/fig-3640553_1920.jpg" alt="Type of food is Fig"><figcaption>Fig</figcaption></div>
                <div class="galleryimg"><img src="assets/canape-2802_1920.jpg" alt="Type of food is Canape"><figcaption>Canape</figcaption></div>
                <div class="galleryimg"><img src="assets/tomatoes-5365186_1920.jpg" alt="Type of food is Tomatoes"><figcaption>Tomatoes</figcaption></div>
                <div class="galleryimg"><img src="assets/mushrooms-389421_1920.jpg" alt="Type of food is Mushrooms"><figcaption>Mushrooms</figcaption></div>
                <div class="galleryimg"><img src="assets/sushi-354628_1920.jpg" alt="Type of food is Sushi"><figcaption>Sushi</figcaption></div>
        </div>
    </main>
<!-- Footer at bottom of each page -->
<footer>
    <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="about.html">About</a></li>
        <li><a href="portfolio.html">Portfolio</a></li>
        <li><a href="sitemap.html">Sitemap</a></li>
        <li><a href="mailto:shilto04@student.bbk.ac.uk">Contact</a></li>
        <li> © Copyright <p id="date"></p></li>
    </ul>
</footer>

<!--Section to dynamically display the current year, it changes every year by using Javascript Date/Time-->
<script>
    const d = new Date().getFullYear();
    document.getElementById("date").innerHTML = d;
</script>
</body>
</html>