-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
52 lines (50 loc) · 2.62 KB
/
index.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
<!doctype html> <!-- A doctype of "html" means you're using HTML 5 -->
<!--Hey there! This is the HTML (HyperText Markup Language) that provides the content
and structure for our photo gallery.-->
<html lang="en"> <!-- Setting the language is optional but recommended -->
<head> <!-- The head is where we provide information about our document -->
<meta charset="utf-8"> <!-- Encoding -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Disable user resizing of webpage -->
<meta name="description" content="A simple, responsive photo gallery">
<title>My Photo Gallery</title> <!-- What shows up in search results and on browser tab -->
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,400"> <!-- Load a font from Google Fonts -->
<link rel="stylesheet" href="css/main.css"> <!-- Load our stylesheet -->
</head>
<body> <!-- This is where all the content goes! -->
<div class="col-12"> <!-- Classes let us define CSS styles and apply them to different HTML elements -->
<h1 class="title">My Photo Gallery</h1> <!-- Notice how elements can be nested inside other ones? -->
</div>
<div class="content">
<div class="col-4">
<!-- Images need an "alt" attribute to explain what the image is.
The "src" is the location that the image can be found at. -->
<img class="img-responsive" src="img/biker.jpeg" alt="image">
</div>
<div class="col-4">
<img class="img-responsive" src="img/city.jpeg" alt="image">
</div>
<div class="col-4">
<img class="img-responsive" src="img/giraffe.jpeg" alt="image">
</div>
<div class="col-4">
<img class="img-responsive" src="img/horse.jpeg" alt="image">
</div>
<div class="col-4">
<img class="img-responsive" src="img/music.jpeg" alt="image">
</div>
<div class="col-4">
<img class="img-responsive" src="img/people.jpeg" alt="image">
</div>
<div class="col-4">
<img class="img-responsive" src="img/sydney.jpeg" alt="image">
</div>
<div class="col-4">
<img class="img-responsive" src="img/tree.jpeg" alt="image">
</div>
<div class="col-4">
<img class="img-responsive" src="img/wire.jpeg" alt="image">
</div>
</div>
</body>
</html>