-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
126 lines (109 loc) · 4.5 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
120
121
122
123
124
125
126
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Photos</title>
<meta name='viewport' content='width=device-width'>
<link rel="stylesheet" href="style.css">
<link href="https://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Dancing+Script|Playfair+Display|Raleway" rel="stylesheet">
</head>
<body>
<div class="header">
<div id="toggle">
<i class="fa fa-bars fa-2x"></i>
</div>
<h2>MariaAnna</h2>
<h2>photography</h2>
<h1>See the world through my lens</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nibh augue, suscipit a, scelerisque sed, lacinia in, mi.</p>
<a href="#about"> <i class="fa fa-arrow-down"></i></a>
</div>
<nav>
<ul>
<div class="logo"><span>MariaAnna</span></div>
<li><a href="#follow">follow me</a></li>
<li><a href="#contact">contact me</a></li>
<li><a href="#works">works</a></li>
<li><a href="#about">about me</a></li>
</ul>
</nav>
<div id="about">
<h3>a little bit about me</h3>
<p>In quis massa non tellus congue commodo. Nunc varius dui nisl, at iaculis mauris viverra ut.
Etiam lobortis auctor interdum. Ut in libero sem. Curabitur sit amet diam odio. Quisque scelerisque
eros vel justo dictum suscipit. Etiam ac vulputate urna, in varius tortor. Nullam ornare massa ut tempor viverra.
Sed condimentum malesuada magna sit amet molestie.
</p>
</div>
<div id="work">
<h3>works</h3>
<div class="gallery">
<div class="left">
<div class="nature">
<img src="img/nature.jpg" alt="nature">
</div>
<div class="small">
<div class="people pic-row">
<img src="img/people.jpg" alt="people">
</div>
<div class="wedding pic-row">
<img src="img/wedding.jpg" alt="wedding">
</div>
</div>
<div class="architect">
<img src="img/arhitecture.jpg" alt="architecture">
</div>
</div>
<div class="right">
<div class="urban">
<img src="img/urbanbikes.jpg" alt="urban">
</div>
<div class="animals">
<img src="img/animals.jpg" alt="animals">
</div>
</div>
</div>
<a href="#" class="load">load more</a>
</div>
<div id="see-world">
<h3>See the world through my lens</h3>
<p>In quis massa non tellus congue commodo. Nunc varius dui nisl, at iaculis mauris viverra ut.
Etiam lobortis auctor interdum. Ut in libero sem. Curabitur sit amet diam odio. Quisque scelerisque
eros vel justo dictum suscipit. Etiam ac vulputate urna, in varius tortor. Nullam ornare massa ut tempor viverra.
Sed condimentum malesuada magna sit amet molestie.
</p>
<span class="author">John Doe CEO of Unknown</span>
<div class="squares">
<div class="sqr"></div>
<div class="sqr"></div>
<div class="sqr"></div>
</div>
</div>
<div id="follow">
<h3>Follow me</h3>
<a href="#"><i class="fa fa-pinterest-p"></i></a>
<a href="#"><i class="fa fa-instagram"></i></a>
<a href="#"><i class="fa fa-twitter"></i></a>
<a href="#"> <i class="fa fa-google-plus"></i></a>
<a href="#"><i class="fa fa-tumblr"></i></a>
</div>
<div id="contact">
<h3>Contact me</h3>
<p>In non tellus congue commodo. Nunc varius dui nisl</p>
<form>
<input name="name" type="text" placeholder="Your Name">
<input name="mail" type="email" placeholder="Your E-mail">
<textarea rows="5" name="message" placeholder="Your message"></textarea>
<button type="submit">send</button>
</form>
</div>
<footer>
<a href="#"><i class="fa fa-arrow-up fa-2x"></i></a>
<span>MariaAnna</span>
<span>Photography</span>
<p>© Copyright 2014 MariaAnna<br>
Coded by Kaysh</p>
</footer>
</body>
</html>