Bootstrap-Practice/index.html at master · timrcoder/Bootstrap-Practice · 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>

        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>


    <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>Bootstrap Practice</title>
</head>
<body>

    <body>


            <!-- <a href="#" class="btn btn-info" role="button">Link Button</a> -->


            <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">


                    <a class="navbar-brand"  href="#">Timothy R. Grey</a>
                    <a href="mailto:trgrey@gmail.com?Subject=Hello%20again"  class="btn btn-primary btn-sm" target="_top">Send Mail</a>
                    <a href="info.html" class="btn btn-primary btn-sm" tabindex="-1" role="button" aria-disabled="true">Contact Information</a>


                    <div class="collapse navbar-collapse" id="navbarsExampleDefault">

                    </div>
            </nav>

                  <main role="main">

                    <!-- Main jumbotron for a primary marketing message or call to action -->
                    <div class="jumbotron">
                      <div class="container">
                        <img src="me.jpg" style="width:20%" class="rounded" alt="Cinque Terre">

                        <p>This is my profile page regarding my work history, work goals and personal interests.</p>
                        <p><a class="btn btn-primary btn-sm" href="http://cache.lovethispic.com/uploaded_images/blogs/Top-Momisms-We-Swear-We-ll-Never-Say...-But-Always-Do.-This-Is-Hilarious.-Happy-Mother-s-Day-7814-2.jpg" role="button">About me... &raquo;</a></p>
                      </div>
                    </div>

                    <div class="container">
                      <!-- Example row of columns -->
                      <div class="row">
                        <div class="col-md-4">
                          <h2>Work History</h2>
                          <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
                          <p><a class="btn btn-secondary" href="https://s3.amazonaws.com/lowres.cartoonstock.com/recruitment-work_history-self_confident-confident-experiences-interview-cwln2639_low.jpg" role="button">View details &raquo;</a></p>
                        </div>
                        <div class="col-md-4">
                          <h2>Work Goals</h2>
                          <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
                          <p><a class="btn btn-secondary" href="http://www.dailyhaha.com/_pics/career_goals_th.jpg" role="button">View details &raquo;</a></p>
                        </div>
                        <div class="col-md-4">
                          <h2>Personal Information</h2>
                          <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
                          <p><a class="btn btn-secondary" href="https://s3.amazonaws.com/lowres.cartoonstock.com/law-order-beggar-begging-begs-desperation-personal_info-llan364_low.jpg" role="button">View details &raquo;</a></p>
                        </div>
                      </div>

                      <hr>

                    </div> <!-- /container -->

                  </main>

                  <footer class="container">
                    <p>&copy; Allstate Commercial Roofing and <strong>Coding</strong>s  1995- 2019</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.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
      </body>


<script src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
</script>

<script src= "main.js"></script>
</body>
</html>