-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathdemo3.html
138 lines (113 loc) · 5.98 KB
/
demo3.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
133
134
135
136
137
138
<!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="demo1.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>
Talk about yourself here. I'm sure you're a very interesting person!
</p>
<p>Note that pressing enter
won't
put a line break. You either have to use a <br> line break to do that, or
start a new paragraph using new p tags.
</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>