realistic-front-end-project/index.html at master · parisandmilo/realistic-front-end-project · 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
<!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">
  <title>Realistic Front-End Task Example 2 - Microblog</title>
  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.3/css/bootstrap.css'>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <!-- Below is the Bootstrap code to create a navigation bar, but you'll
       need to tailor it to your site. -->
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="#">Navbar</a>

    <!-- What do you think this button does? Try reducing the width of
         your browser and see what happens, then delete the button code
         and see what's changed when you try again. -->
    <button class="navbar-toggler" type="button" data-toggle="collapse"
      data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup"
      aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
      <div class="navbar-nav">
        <!-- You need to create a second link to go to your 'About'
             page - what do you need to put in the href attribute to
             link it correctly? The idea is the same as we used to link
             to css and javascript files in earlier sessions. -->
        <a class="nav-item nav-link" href="#">Home</a>
      </div>
    </div>
  </nav>
  <!-- End of Boostrap navbar code -->

  <!-- Uses bootstrap tables: https://getbootstrap.com/docs/3.3/css/#tables -->
  <div id="microblog">
    <h1>My Timeline</h1>

    <div class='container'>
      <div class='post row' id='post-0'>
        <h2 class="title">
          Hello, Friend
          <small>By User 1</small>
        </h2>
        <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.
        </p>
      </div>
      <!--   Use JS to add more divs here   -->
    </div>
  </div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js'></script>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.3/js/bootstrap.js'></script>
  <script  src="js/main.js"></script>

</body>
</html>