-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
153 lines (153 loc) · 7.94 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
<!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>Grass Studio</title>
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;700;800&display=swap" rel="stylesheet">
</head>
<body>
<header>
<div class="header-content">
<div class="top-bar">
<h1>Grass Studio</h1>
<div class="top-bar__hamburger" role="button" aria-label="Open menu" aria-expanded="false" aria-haspopup="true">
<div></div>
<div></div>
<div></div>
</div>
<nav>
<ul role="menubar" class="top-bar__menu">
<li role="none" class="top-bar__menu-item top-bar__menu-item--has-children">
<a href="#" role="menuitem" aria-expanded="false">About</a>
<button class="screen-readers-only" aria-expanded="false" aria-haspopup="true">show submenu for About</button>
<div class="top-bar__submenu">
<ul>
<li role="none" class="top-bar__submenu-item">
<a href="/team" role="menuitem">Team</a>
</li>
<li role="none" class="top-bar__submenu-item">
<a href="/idea" role="menuitem">Idea</a>
</li>
<li role="none" class="top-bar__submenu-item">
<a href="/mission" role="menuitem">Mission</a>
</li>
<li role="none" class="top-bar__submenu-item">
<a href="/team" role="menuitem">Support</a>
</li>
</ul>
</div>
</li>
<li role="none" class="top-bar__menu-item">
<a href="/trips" role="menuitem">Trips</a>
</li>
<li role="none" class="top-bar__menu-item top-bar__menu-item--has-children">
<a href="#" role="menuitem" aria-expanded="false">Gallery</a>
<button class="screen-readers-only" aria-expanded="false" aria-haspopup="true">show submenu for Gallery</button>
<div class="top-bar__submenu">
<ul>
<li role="none" class="top-bar__submenu-item">
<a href="/iceland" role="menuitem">Iceland</a>
</li>
<li role="none" class="top-bar__submenu-item">
<a href="/norway" role="menuitem">Norway</a>
</li>
<li role="none" class="top-bar__submenu-item">
<a href="/arctica" role="menuitem">Arctica</a>
</li>
<li role="none" class="top-bar__submenu-item">
<a href="/alaska" role="menuitem">Alaska</a>
</li>
</ul>
</div>
</li>
<li role="none" class="top-bar__menu-item">
<a href="/blog" role="menuitem">Blog</a>
</li>
</ul>
</nav>
</div>
<div class="cta">
<h2>Outdoor Photography is a Journey</h2>
<div class="cta__text">
<p>We spent three months exploring Iceland</p>
<a href="/checkit" class="button button--white">Check it</a>
</div>
</div>
</div>
</header>
<main>
<article>
<h2>
Section title
</h2>
<div class="columns">
<div>
<p>Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur vulputate , ligula lacinia celerisque tempor, lacus lacus ornare ante. Ac egestas est urna sit amet arcu. consequat posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere. Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur vulputate , ligula lacinia celerisque tempor, lacus lacus.</p>
</div>
<div>
<p>Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur vulputate , ligula lacinia celerisque tempor, lacus lacus ornare ante. Ac egestas est urna sit amet arcu. consequat posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere. Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur vulputate , ligula lacinia celerisque tempor, lacus lacus.</p>
</div>
</div>
</article>
<article class="grey-background">
<h2>
Another title
</h2>
<div>
<img src="assets/landscape-tree-horizon-mountain-cloud-plant.png" alt="" class="floated-left">
<p>Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur vulputate , ligula lacinia celerisque tempor, lacus lacus ornare ante. Ac egestas est urna sit amet arcu. consequat posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere. Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur vulputate , ligula lacinia celerisque tempor, lacus lacus ornare ante.</p>
<p>This is how a link looks like. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed molestie augue sit amet leo consequat posuere. Vestibulum ante ipsum primis in faucibus la lacinia celerisque tempor, lacus lacus ornare ante orci luctus et ultrices posuere.Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed molestie augue sit amet leo consequat posuere. Vestibulum ante ipsum.</p>
<p>Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur vulputate , ligula lacinia celerisque tempor, lacus lacus ornare ante. Ac egestas est urna sit amet arcu. consequat posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere. Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur vulputate , ligula lacinia celerisque tempor, lacus lacus ornare ante.</p>
<p>This is how a link looks like. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed molestie augue sit amet leo consequat posuere. Vestibulum ante ipsum primis in faucibus la lacinia celerisque tempor, lacus lacus ornare ante orci luctus et ultrices posuere.Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed molestie augue sit amet leo consequat posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere.</p>
</div>
<div class="centered">
<a href="/readmore" class="button button--grey">Read more</a>
</div>
</article>
<section class="gallery">
<div class="gallery__item" role="button">
<img src="assets/beach-sea-coast-water-ocean-horizon.jpg" alt="beach, sea coast and bridge">
</div>
<div class="gallery__item" role="button">
<img src="assets/grass-field-farm-lawn-meadow-hill.jpg" alt="farm and meadow">
</div>
<div class="gallery__item" role="button">
<img src="assets/hand-outdoor-sand-morning-animal-horse.jpg" alt="horses">
</div>
<div class="gallery__item" role="button">
<img src="assets/landscape-sea-coast-horizon-mountain-snow.jpg" alt="car at seacost">
</div>
<div class="gallery__item" role="button">
<img src="assets/horses.png" alt="horses">
</div>
<div class="gallery__item" role="button">
<img src="assets/snow-winter-city-vehicle-church-iceland.jpg" alt="colorful houses in a town">
</div>
<div class="gallery__item" role="button">
<img src="assets/landscape-sea-nature-ocean-mountain-sky.jpg" alt="mountain by the lake">
</div>
<div class="gallery__item" role="button">
<img src="assets/sea-coast-water-ocean-bird-animal.jpg" alt="bird by the ocean">
</div>
<div class="gallery__item" role="button">
<img src="assets/landscape-nature-grass-horizon-wilderness-mountain.jpg" alt="grass in mountains">
</div>
<div class="gallery__lightbox" role="dialog" aria-hidden="true">
<div class="gallery__lightbox-content">
<button aria-label="close" tabindex="-1"></button>
<img src="" alt="">
</div>
</div>
</section>
</main>
<footer>
<p>All rights reserved Grass Studio</p>
</footer>
<script src="index.js"></script>
</body>
</html>