-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
180 lines (174 loc) · 8.36 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
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>John Doe Photography</title>
<link rel="icon" href="img/logo.ico">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/home.css">
</head>
<body>
<header>
<div class="logo">
<a href="../index.html"><img src="img/logo.png" alt="John Doe"></a>
</div>
<div class="nav-items">
<ul>
<li><a href="pages/gallery.html">Gallery</a></li>
<li><a href="pages/adventures.html">My Adventures</a></li>
<li><a href="pages/about.html">About</a></li>
<li><a href="pages/contact.html">Contact</a></li>
</ul>
</div>
<div class="nav-items">
<ul>
<li><a href="#"><img src="img/twitter-logo.svg" alt="Twitter"></a></li>
<li><a href="#"><img src="img/facebook-logo.svg" alt="Facebook"></a></li>
<li><a href="#"><img src="img/pinterest-logo.svg" alt="Pinterest"></a></li>
</ul>
</div>
</header>
<main>
<section id="showcase-eagle">
<div class="image">
<img src="img/showcase-img.jpg" alt="Eagle image">
</div>
<div class="content-showcase">
<h3>JOHN DOE MOUNTAIN BIRDS PHOTO GALLERY</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Augue elit nunc velit molestie.</br></br>
Tellus metus, lectus erat enim arcu, sollicitudin. Suspendisse blandit habitant libero ipsum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Augue elit nunc velit molestie.</br></br>
Tellus metus, lectus erat enim arcu, sollicitudin. Suspendisse blandit habitant libero ipsum.</p>
<div class="read-more-link">
<a href="pages/gallery.html">
<p>Check out my gallery</p>
<img src="img/horizontal-arrow.svg" alt="Arrow">
</a>
</div>
</div>
<div class="side-arrow">
<p>Scroll down</p>
<img src="img/vertical-arrow-90deg.svg" alt="Vertical arrow">
</div>
</section>
<section id="showcase-gallery">
<ul>
<li>
<div class="img-div">
<img src="img/black-swans.png" alt="Black Swans">
<div class="stats">
<p>23 likes</p>
<img src="img/star.svg" alt="Like" width="30" height="50">
</div>
</div>
<h3>Black Swans</h3>
<p class="description-p">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Augue elit nunc velit molestie.</p>
</li>
<li>
<div class="img-div">
<img src="img/cassins-finch.png" alt="Black Swans">
<div class="stats">
<p>48 likes</p>
<img src="img/star.svg" alt="Like" width="30" height="50">
</div>
</div>
<h3>Cassin's Finch</h3>
<p class="description-p">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Augue elit nunc velit molestie.</p>
</li>
<li>
<div class="img-div">
<img src="img/barn-owl.png" alt="Black Swans">
<div class="stats">
<p>13 likes</p>
<img src="img/star.svg" alt="Like" width="30" height="50">
</div>
</div>
<h3>Barn Owl</h3>
<p class="description-p">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Augue elit nunc velit molestie.</p>
</li>
</ul>
<button onclick="location.href='pages/gallery.html'">Look at more of my photos</button>
</section>
<section id="showcase-adventures">
<h1>Latest news from My Adventures</h1>
<div class="adventures">
<div id="first-adventure">
<div class="adventure-content">
<h2>The Mountain Fircussi</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Augue elit nunc velit molestie.</br></br>
Tellus metus, lectus erat enim arcu, sollicitudin. Suspendisse blandit habitant libero ipsum.</br></br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Augue elit nunc velit molestie.
</p>
<div class="read-more-link">
<a href="pages/adventures-post.html">
<p>Read more</p>
<img src="img/horizontal-arrow.svg" alt="Arrow">
</a>
</div>
</div>
<div>
<img src="img/first-image-adventure.jpg" alt="Mountain image">
</div>
</div>
<div id="second-adventure">
<div>
<img src="img/second-image-adventure.jpg" alt="Mountain image">
</div>
<div class="adventure-content">
<h2>The Mountain Fircussi</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Augue elit nunc velit molestie.</br></br>
Tellus metus, lectus erat enim arcu, sollicitudin. Suspendisse blandit habitant libero ipsum.</br></br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Augue elit nunc velit molestie.
</p>
<div class="read-more-link">
<a href="pages/adventures-post.html">
<img src="img/horizontal-arrow.svg" alt="Arrow">
<p>Read more</p>
</a>
</div>
</div>
</div>
</div>
</section>
<section class="about-section">
<h1><span>About</span> me</h1>
<div class="about-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Facilisis quis feugiat rhoncus turpis diam, eu
ullamcorper orci
nibh. Montes, enim urna, condimentum urna ultricies consectetur nisl.</br></br>
Enim in mattis fermentum aliquam vitae, sapien. Ultrices neque a, ipsum, sed morbi quam commodo. Odio ut quis
etiam elit
ultrices et dolor.</br></br>
Nulla semper at sed molestie tellus quis odio. Ac morbi tincidunt morbi fusce ultrices sed. Amet, enim euismod
sapien
eget at. Morbi lectus eu, ac cursus. Cras mi suspendisse nulla lobortis.
</p>
<img src="img/avatar.jpg" alt="">
</div>
<img src="img/birds-on-wire.jpg" width="100%">
</section>
<section class="newsletter-section">
<div>
<h2>Subscribe to my newsletter for more lovely photographies:</h2>
<form>
<label>Email:</label>
<input type="text" placeholder="Email...">
<button type="submit">Subscribe</button>
</form>
</div>
</section>
<section id="preview-photos">
<img src="img/preview-photo-1.jpg" alt="Photo 1">
<img src="img/preview-photo-2.jpg" alt="Photo 2">
<img src="img/preview-photo-3.jpg" alt="Photo 3">
</section>
</main>
<footer>
<p>John Doe photography website - All Rights Reserved © 2019</br>
- Developed with 🖤 by Tiberiu Ioan</p>
<img src="img/logo.svg" alt="Logo John Doe">
</footer>
</body>
</html>