Portfolio/gallery.html at master · ts452/Portfolio · 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
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
}
body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;

}

.topnav {
  overflow: hidden;
  background-color: black;
}

.topnav a {
  float: left;
  color:white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover {
  background-color: black;
  color: white;
}

.topnav a.active {
  background-color:black;
  color: white;
}
</style>
</head>
<body>


<div class="topnav">
  <a class="active" href="index.html">Index</a>
  <a href="About_Me.html">About Me</a>
  <a href="Interests.html">Interests</a>
  <a href="gallery.html">Gallery</a>
  <a href="Contact_Me.html">Contact Me</a>
  <a href="Questions.html">Questions</a>
</div>

<div style="padding-left:16px">
<p id="demo" style="color:red;"></p>

<script>
document.getElementById("demo").innerHTML = Date();
</script>
<h2></b></u><h1 style ="color: Orange;">Gallery</h1></b></u></h2>
<style>
div.gallery {
    margin: 5px;
    border: 1px solid #ccc;
    float: left;
    width: 180px;
}

div.gallery:hover {
    border: 1px solid #777;
}

div.gallery img {
    width: 100%;
    height: auto;
}

div.desc {
    padding: 15px;
    text-align: center;
}
</style>
</head>
<body>

<div class="gallery">
  <a target="_blank" href="pictures/sweet_sixteen.jpg">
    <img src="pictures/sweet_sixteen.jpg" alt="Sweet Sixteen" width="600" height="400">
  </a>
  <div class="desc">This is from sweet sixteen, and this is one of my favorite picture.</div>
</div>

<div class="gallery">
  <a target="_blank" href="pictures/college.jpg">
    <img src="pictures/college.jpg" alt="College" width="800" height="400">
  </a>
  <div class="desc">My close friends and I at school during college decsion day.</div>
</div>

<div class="gallery">
  <a target="_blank" href="pictures/graduation.jpg">
    <img src="pictures/graduation.jpg" alt="graduation" width="800" height="400">
  </a>
  <div class="desc"> My best friends and I at our graduation</div>
</div>


<div class="gallery">
  <a target="_blank" href="pictures/Disney.jpg">
    <img src="pictures/Disney.jpg" alt="Disney" width="800" height="400">
  </a>
  <div class="desc">This is from Disney, a senior class trip. </div>
</div>

<div class="gallery">
  <a target="_blank" href="pictures/sister.jpg">
    <img src="pictures/sister.jpg" alt="sister" width="800" height="400">
  </a>
  <div class="desc">This is my little sister, we were took this photo during New Year's Eve.</div>
</div>


</body>
</html>