jwardd.github.io/about.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
  <!--
    Student Name: Jacob Ward
    File Name: about.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: About Me</title>
  </head>

  <body>
    <div id="wrapper">
    <!-- Header of Page-->
    <header class="header">
        <h1>Jacob Ward - BioSite - About Me</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>
      <div class="container">
        <div class="hero">
          <img src="images/myself.png" alt="" class="images">
        </div>

        <div class="intro">
          <h3>Welcome</h3>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis unde natus officiis repudiandae nobis ab perspiciatis quis tempora. Nostrum nisi aliquam fugit dignissimos recusandae ipsa officiis aperiam quos tenetur deleniti! Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dolorum iusto sint quibusdam odio suscipit nihil veritatis nam sequi soluta, temporibus eligendi quam dignissimos culpa architecto veniam. Voluptas quo non voluptate!</p>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil quisquam nulla ratione qui ab dolorem, modi, culpa numquam accusamus porro, beatae tenetur? Nisi aut sunt molestiae tempora ipsum, iure sed!Lorem</p>
          <ul class="icons">
          <li class="icons-li"><img src="https://cdn4.iconfinder.com/data/icons/logos-brands-in-colors/3000/figma-logo-256.png" width="68"></li>
          <li class="icons-li"><img src="https://cdn4.iconfinder.com/data/icons/logos-brands-7/512/visual_studio-256.png" width="68"></li>
          <li class="icons-li"><img src="https://cdn4.iconfinder.com/data/icons/social-media-logos-6/512/136-adobe-256.png" width="68"></li>
          </ul>
        </div>
    </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:
        <a href="mailto:jwardweb@hotmail.com"><b>jwardweb@hotmail.com</b></a>
      </p>
    </footer>
  </div>
  </body>
</html>