-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathdemo3a.html
132 lines (108 loc) · 5.71 KB
/
demo3a.html
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
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
<!DOCTYPE html>
<html>
<!-- Head section holds info for the browser. -->
<head>
<!-- Our page's title and custom styling file. -->
<title>Sample Page</title>
<link rel="stylesheet" href="demo3a.css" type="text/css">
<!-- Info for the browser to decode our HTML code. -->
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap files -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<!-- Body holds the content of the page. -->
<body>
<!-- Navbar -->
<!-- This builds a blank navbar with some styling, such as a light color. -->
<nav class="navbar navbar-expand-md navbar-light bg-light justify-content-center">
<!-- This is the "brand" that goes all the way to the left. -->
<a class="navbar-brand d-flex w-50 mr-auto" href="#home">Your page's name!</a>
<!-- This button replaces the links list when in mobile. -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#nav">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Navbar links -->
<div class="collapse navbar-collapse" id="nav">
<!-- Create an unordered list to hold our links and format it automatically. -->
<ul class="nav navbar-nav mr-auto justify-content-end">
<!-- All the links in the navbar will be listed below as list items using the <li> tag. -->
<li class="nav-item">
<!-- To make them into links, we use the <a href="link"> tag. -->
<!-- The class="nav-link" part just makes them display nicely. -->
<a class="nav-link" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#photography">Photography</a>
</li>
</ul>
</div>
</nav>
<!-- Page container -->
<div class="container-fluid">
<!-- Main column where content goes -->
<div class="col">
<!-- About section -->
<div class="row" id="about">
<div class="col-3">
<img src="media/selfie.jpg" class="img-fluid">
</div>
<div class="col-9">
<h2>About Me</h2>
<span class="align-middle">
<p>
My name's Claire and I like people, places, and things. I'm all about the nouns, baby.
</p>
</span>
</div>
</div>
<!-- Photography section -->
<div class="row" id="photography">
<div class="column-fluid">
<h2>Photography</h2>
<p>
Here are some photos I've taken. As you can see, I really
like the color yellow.
</p>
<!-- Photo gallery -->
<!-- Top row -->
<div class="row">
<!-- Top left photo -->
<div class="col-6">
<!-- Designate that it's a thumbnail so it has a nice border. -->
<div class="thumbnail">
<img src="media/photo1.jpg" class="img-fluid">
</div>
</div>
<!-- Top right photo -->
<div class="col-6">
<div class="thumbnail">
<img src="media/photo2.jpg" class="img-fluid">
</div>
</div>
</div>
<!-- Bottom row -->
<div class="row">
<!-- Bottom left photo -->
<div class="col-6">
<div class="thumbnail">
<img src="media/photo3.jpg" class="img-fluid">
</div>
</div>
<!-- Bottom right photo -->
<div class="col-6">
<div class="thumbnail">
<img src="media/photo4.jpg" class="img-fluid">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>