jwardd.github.io/gallery.html at main · jwardd/jwardd.github.io · 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
  <!--
    Student Name: Jacob Ward
    File Name: gallery.html
    Date: July 25, 2024
  -->

  <!DOCTYPE html>
  <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/styles.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=Emblema+One&family=Lora:ital,wght@0,400..700;1,400..700&display=swap" rel="stylesheet">
        <title>Jacob Ward - BioSite: Portfolio</title>
      </head>

      <body>
        <div id="wrapper">
        <!-- Header of Page-->
        <header class="header">
            <h1>Jacob Ward - BioSite - Portfolio</h1>
          </div>
        </header>

        <!-- Nav bar for page-->
        <nav>
          <ul>
            <li><a href="index.html">Home</a></li>
            <li><a href="about.html">About Me</a></li>
            <li><a href="gallery.html">Design Portfolio</a></li>
          </ul>
        </nav>

      <!-- This is a comment for the main element. Main usually holds the 'main' content of the page-->
      <main class="grid">
        <aside>
          <h1>Portfolio</h1>
        </aside>

        <figure> <!-- Figure Element 1 -->
          <img src="/images/1.png" alt="image 1">
          <figcaption>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consectetur tempora ex odio cupiditate quod mollitia pariatur facere fuga rerum, voluptatum inventore, eaque quaerat temporibus laboriosam earum ullam modi, magnam quas!</figcaption>
        </figure>

        <figure> <!-- Figure Element 2 -->
          <img src="/images/2.png" alt="image 2">
          <figcaption>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aspernatur cumque velit accusamus sunt facere aperiam labore rerum at dignissimos iste, tenetur error delectus architecto, quas animi, illo reiciendis odio tempora!</figcaption>
        </figure>

        <figure> <!-- Figure Element 3 -->
          <img src="/images/3.png" alt="image 3">
          <figcaption>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quidem a saepe nostrum distinctio blanditiis itaque assumenda atque natus, autem dolor sed quas earum maxime repellendus consectetur laboriosam nulla aperiam ut!</figcaption>
        </figure>

        <figure> <!-- Figure Element 4 -->
          <img src="/images/4.png" alt="image 4">
          <figcaption>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ducimus reprehenderit id quae. Accusantium, dicta unde, rem dignissimos magnam doloremque eligendi qui, omnis neque delectus possimus alias sit atque rerum reprehenderit.</figcaption>
        </figure>

        <figure> <!-- Figure Element 5 -->
          <img src="/images/5.png" alt="image 5">
          <figcaption>Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa deleniti nobis reiciendis facere labore. Velit ut a unde inventore, architecto id nisi veniam saepe voluptatibus modi suscipit voluptatem esse totam.</figcaption>
        </figure>

        <figure> <!-- Figure Element 6 -->
          <img src="/images/6.png" alt="image 6">
          <figcaption>Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta deleniti pariatur, quae, delectus dignissimos, quis eum molestiae dolor in id totam nihil distinctio exercitationem doloribus tempora alias quo. Alias, nisi.</figcaption>
        </figure>

      </main>

      <!-- This is a comment for the footer element. Content in the footer is displayed at the bottom of the page-->
      <footer>
        <p>&copy; Copyright 2024. All Rights Reserved.</p>
        <p>My Contact Information:</p>
        <a href="mailto:jwardweb@hotmail.com"><b>jwardweb@hotmail.com</b></a>
      </footer>
    </div>
    </body>
  </html>