-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
119 lines (115 loc) · 3.75 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
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Angelica | Portfolio</title>
<link
href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,700&family=Montserrat:wght@500;700&display=swap"
rel="stylesheet"
/>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
/>
<!--stylesheet-->
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div class="hero-image" id="home">
<!--Menu-->
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
<div class="hero-text">
<h1>Angelica | Photography</h1>
</div>
</div>
<!--About-->
<div class="about" id="about">
<h3>About Me</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore
</p>
</div>
<div class="portfolio" id="portfolio">
<div class="hero-text">
<h1>Portfolio</h1>
</div>
</div>
<!--Gallery-->
<div class="responsive">
<div class="gallery">
<a href="images/1.jpg" target="_blank">
<img src="images/1.jpg" alt="bridge in a forest" />
</a>
</div>
</div>
<div class="responsive">
<div class="gallery">
<a href="images/2.jpg" target="_blank">
<img src="images/2.jpg" alt="dark forestt" />
</a>
</div>
</div>
<div class="responsive">
<div class="gallery">
<a href="images/3.jpg" target="_blank">
<img src="images/3.jpg" alt="tree roots w/ moss at bottom trunk" />
</a>
</div>
</div>
<div class="responsive">
<div class="gallery">
<a href="images/4.jpg" target="_blank">
<img src="images/4.jpg" alt="sunny forest" />
</a>
</div>
</div>
<div class="responsive">
<div class="gallery">
<a href="images/5.jpg" target="_blank">
<img src="images/5.jpg" alt="upward perspective of trees" />
</a>
</div>
</div>
<div class="responsive">
<div class="gallery">
<a href="images/6.jpg" target="_blank">
<img src="images/6.jpg" alt="golden sunlight in forest" />
</a>
</div>
</div>
<div class="responsive">
<div class="gallery">
<a href="images/7.jpg" target="_blank">
<img src="images/7.jpg" alt="downlook of a whole forest" />
</a>
</div>
</div>
<div class="responsive">
<div class="gallery">
<a href="images/8.jpg" target="_blank">
<img src="images/8.jpg" alt="golden sunlight on tree branches" />
</a>
</div>
</div>
<!--footer-->
<div class="footer" id="contact">
<p>Phone:<em>603 849 8493</em></p>
<p>Email:<em>mail@mail.com</em></p>
<p>Location:<em>Chicago, US</em></p>
</div>
</body>
</html>