WildCodeSchool_PhotoBlog/about.html at master · aliashkevich/WildCodeSchool_PhotoBlog · 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
<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">

    <!-- Bootstrap icons -->
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/>

    <!-- Logo -->
    <link rel="shortcut icon" href="img/logo.png"/>

    <!-- My CSS and JS, TODO: delete if it's not used -->
    <link rel="stylesheet" type="text/css" href="styles/main.css">
    <script type="text/javascript" src="scripts/main.js"></script>
    <title>Photo Blog</title>
  </head>
  <body>

    <header>
      <nav class="navbar navbar-expand-md fixed-top navbar-dark">
        <a class="navbar-brand" href="index.html">
          <img src="img/logo_white.png" id="logo" alt="logo">
          <span id="title">Wildo Coda</span>
        </a>
        <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navBar" aria-controls="navBar" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse justify-content-end" id="navBar">
          <ul class="navbar-nav float-right text-right pr-3">
            <li class="nav-item">
              <a class="nav-link" href="index.html">Home</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="blog.html">Blog</a>
            </li>
            <li class="nav-item active">
              <a class="nav-link" href="about.html">About</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="contact.html">Contact</a>
            </li>
          </ul>
        </div>
      </nav>
    </header>

    <main class="bg-light">
      <div id="container-about" class="align-middle">
        <div class="row justify-content-center">
          <div class="col-lg-6 col-md-6 col-xs-12 pb-4 bio text-center">
            <img id="photo" src="img/about/avatar.png" alt="Wildo Coda">
          </div>
          <div class="col-lg-6 col-md-6 col-xs-12 pb-4 bio text-center">
            <h4>Bio</h4>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing 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.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua.</p>
          </div>
        </div>
      </div>
      <div>
        <h3 class="text-center">Publications:</h3>
        <ul class="list-group list-group-flush text-center">
          <li class="publication-link text-truncate list-group-item">
            <strong>Forbse: </strong>
            <a href="#">Learn to use the Exposure Triangle</a>
          </li>
          <li class="publication-link text-truncate list-group-item">
            <strong>Apple: </strong>
            <a href="#">How to take Better Photos with your iPhone</a>
          </li>
          <li class="publication-link text-truncate list-group-item">
            <strong>Photographer's Life: </strong>
            <a href="#">Use a Polarizing Filter</a>
          </li>
          <li class="publication-link text-truncate list-group-item">
            <strong>Science: </strong>
            <a href="#">Experiment with Shutter Speed</a>
          </li>
          <li class="publication-link text-truncate list-group-item">
            <strong>TIME: </strong>
            <a href="#">Creating a Lasting Image</a>
          </li>
        </ul>
      </div>
    </main>

    <footer class="bg-dark">
      <div id="foter-icons" class="text-center">
        <a href="#"><i class="fa fa-facebook"></i></a>
        <a href="#"><i class="fa fa-linkedin"></i></a>
        <a href="#"><i class="fa fa-twitter"></i></a>
        <a href="#"><i class="fa fa-google-plus"></i></a>
      </div>
      <p id="copyright" class="text-center text-white small m-0 pb-2">© 2019 - Wildo Coda. All Rights Reserved</p>
    </footer>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <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>