Bootstrap-Portfolio/index.html at master · dhuan008/Bootstrap-Portfolio · 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
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
    integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
  <link rel="stylesheet" type="text/css" href="assets/css/style.css">
  <title>index</title>
</head>

<body>
  <!-- Navbar Component -->
  <nav class="navbar navbar-expand-md navbar-light bg-white mb-5 py-0 border-bottom-2 border-header">
    <!-- Brand -->
    <a class="navbar-brand heading-font text-white bg-teal px-5 py-header ml-5 font-weight-bold" href="index.html">David
      Huang</a>

    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
      aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse text-right" id="navbarSupportedContent">
      <ul class="navbar-nav ml-auto pr-4">
        <li class="nav-item active px-3">
          <a class="nav-link" href="index.html">About<span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item px-3 border-left">
          <a class="nav-link" href="portfolio.html">Portfolio</a>
        </li>
        <li class="nav-item px-3 border-left">
          <a class="nav-link" href="contact.html">Contact</a>
        </li>
      </ul>
    </div>
  </nav>

  <!-- Container -->
  <div class="container-fluid">
    <!-- Body Section -->
    <div class="row bg-white mx-5 border border-content">
      <div class="col">
        <!-- About Me Header Section-->
        <div class="row mx-3">
          <div class="col heading-font text-teal">
            <h2 class="font-weight-bold border-bottom-2 border-header py-4 ">About Me</h2>
          </div>
        </div>
        <!-- Paragraph Section-->
        <div class="row my-4 mx-3">
          <div class="col-12">
            <div>
              <img src="assets/images/studentAvatar.png" class="img-fluid float-left mr-2 mb-2" alt="David Huang">
            </div>
            <div>
              <p>Hello, My name is David, and I'm aspiring to become a developer. In my free time, I
                like to watch liveoverflow videos and work on exercises. I'm currently considering whether I have time
                to learn Kotlin right now.</p>
              <br>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
                dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
                ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
                fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
                deserunt mollit anim id est laborum.</p>
            </div>

          </div>

        </div>

      </div>
    </div>

  </div>


  <!-- Footer -->
  <div class="container-fluid">

    <div class="row bg-footer border-top border-content text-center text-footer py-header mt-footer">
      <div class="col border-top-8 border-footer">
        <footer class="font-weight-light">Copyright &copy; 2019 David Huang</footer>
      </div>
    </div>

  </div>


  <!-- Bootstrap's JavaScript Files -->
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
    integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
    crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"
    integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut"
    crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"
    integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k"
    crossorigin="anonymous"></script>
</body>

</html>