-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
executable file
·177 lines (176 loc) · 11.2 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/png" sizes="32x32" href="./assets/favicon-32x32.png">
<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=DM+Sans:wght@400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/styles.css" />
<script defer src="script/app.js"></script>
<title>Photosnap</title>
</head>
<body>
<div class="main-container">
<header class="main-header">
<a class="logo" href="index.html"><img src="assets/shared/desktop/logo.svg" alt="Photosnap logo"/></a>
<a class="open-menu"><img src="assets/shared/mobile/menu.svg" alt="Open menu"/></a>
<nav class="header__nav">
<div class="header__nav--header">
<a href="index.html"><img class="logo" src="assets/shared/desktop/logo.svg" alt="Photosnap logo"/></a>
<a class="close-menu"><img src="assets/shared/mobile/close.svg" alt="Close menu"/></a>
</div>
<div class="nav-invite--container">
<ul>
<li><a href="stories.html" class="nav-link">Stories</a></li>
<li><a href="features.html" class="nav-link">Features</a></li>
<li><a href="pricing.html" class="nav-link">Pricing</a></li>
</ul>
<a class="button button--1">Get an invite</a>
</div>
<div class="header__nav_background"></div>
</nav>
</header>
<main class="home-content">
<section class="picture-text-box">
<picture>
<source media="(min-width: 1440px)" srcset="assets/home/desktop/create-and-share.jpg">
<source media="(min-width: 768px)" srcset="assets/home/tablet/create-and-share.jpg">
<img alt="Create and share" src="assets/home/mobile/create-and-share.jpg" />
</picture>
<article class="text-box-content content-with-gradient">
<h1 class="heading-2">Create and share your photo stories.</h1>
<p class="default-paragraph">Photosnap is a platform for photographers and visual storytellers. We make it easy to share photos, tell stories and connect with others.</p>
<a class="arrow-button">
<span>Get an invite</span>
<svg xmlns="http://www.w3.org/2000/svg" width="43" height="14"><g fill="none" fill-rule="evenodd" stroke="#000"><path d="M0 7h41.864M35.428 1l6 6-6 6"/></g></svg>
</a>
</article>
</section>
<section class="picture-text-box">
<picture>
<source media="(min-width: 1440px)" srcset="assets/home/desktop/beautiful-stories.jpg">
<source media="(min-width: 768px)" srcset="assets/home/tablet/beautiful-stories.jpg">
<img alt="Create and share" src="assets/home/mobile/beautiful-stories.jpg" />
</picture>
<div class="white-box">
<article class="text-box-content">
<h2 class="heading-2">BEAUTIFUL STORIES EVERY TIME</h2>
<p class="default-paragraph">We provide design templates to ensure your stories look terrific. Easily add photos, text, embed maps and media from other networks. Then share your story with everyone.</p>
<a class="arrow-button">
<span>View the stories</span>
<svg xmlns="http://www.w3.org/2000/svg" width="43" height="14"><g fill="none" fill-rule="evenodd" stroke="#000"><path d="M0 7h41.864M35.428 1l6 6-6 6"/></g></svg>
</a>
</article>
</div>
</section>
<section class="picture-text-box">
<picture>
<source media="(min-width: 1440px)" srcset="assets/home/desktop/designed-for-everyone.jpg">
<source media="(min-width: 768px)" srcset="assets/home/tablet/designed-for-everyone.jpg">
<img alt="Create and share" src="assets/home/mobile/designed-for-everyone.jpg" />
</picture>
<div class="black-box">
<article class="text-box-content">
<h2 class="heading-2">DESIGNED FOR EVERYONE</h2>
<p class="default-paragraph">Photosnap can help you create stories that resonate with your audience. Our tool is designed for photographers of all levels, brands, businesses you name it.</p>
<a class="arrow-button">
<span>View the stories</span>
<svg xmlns="http://www.w3.org/2000/svg" width="43" height="14"><g fill="none" fill-rule="evenodd" stroke="#000"><path d="M0 7h41.864M35.428 1l6 6-6 6"/></g></svg>
</a>
</article>
</div>
</section>
<section class="gallery">
<a class="gallery-item">
<div class="gallery-item__description">
<h5 class="title-gallery-item">The Mountains</h5>
<span class="story-author">by John Smith</span>
</div>
<div class="arrow-button">
<span>read story</span>
<svg xmlns="http://www.w3.org/2000/svg" width="43" height="14"><g fill="none" fill-rule="evenodd" stroke="#fff"><path d="M0 7h41.864M35.428 1l6 6-6 6"/></g></svg>
</div>
</a>
<a class="gallery-item">
<div class="gallery-item__description">
<h5 class="title-gallery-item">Sunset Cityscapes</h5>
<span class="story-author">by Benjamin Cruz</span>
</div>
<div class="arrow-button">
<span>read story</span>
<svg xmlns="http://www.w3.org/2000/svg" width="43" height="14"><g fill="none" fill-rule="evenodd" stroke="#fff"><path d="M0 7h41.864M35.428 1l6 6-6 6"/></g></svg>
</div>
</a>
<a class="gallery-item">
<div class="gallery-item__description">
<h5 class="title-gallery-item">18 days Voyage</h5>
<span class="story-author">by Alexei Borodin</span>
</div>
<div class="arrow-button">
<span>read story</span>
<svg xmlns="http://www.w3.org/2000/svg" width="43" height="14"><g fill="none" fill-rule="evenodd" stroke="#fff"><path d="M0 7h41.864M35.428 1l6 6-6 6"/></g></svg>
</div>
</a>
<a class="gallery-item">
<div class="gallery-item__description">
<h5 class="title-gallery-item">Architecturals</h5>
<span class="story-author">by Samantha Brooke</span>
</div>
<div class="arrow-button">
<span>read story</span>
<svg xmlns="http://www.w3.org/2000/svg" width="43" height="14"><g fill="none" fill-rule="evenodd" stroke="#fff"><path d="M0 7h41.864M35.428 1l6 6-6 6"/></g></svg>
</div>
</a>
</section>
<section class="features-container">
<div class="feature">
<picture>
<img src="assets/features/desktop/responsive.svg" alt="100% responsive"/>
</picture>
<h3 class="heading-5">100% responsive</h3>
<p class="default-paragraph">No matter which the device you’re on, our site is fully responsive and stories look beautiful on any screen.</p>
</div>
<div class="feature">
<picture>
<img src="assets/features/desktop/no-limit.svg" alt="No limit"/>
</picture>
<h3 class="heading-5">No Photo Upload Limit</h3>
<p class="default-paragraph">Our tool has no limits on uploads or bandwidth. Freely upload in bulk and share all of your stories in one go.</p>
</div>
<div class="feature">
<picture>
<img src="assets/features/desktop/embed.svg" alt="embed"/>
</picture>
<h3 class="heading-5">Available to Embed</h3>
<p class="default-paragraph">Embed Tweets, Facebook posts, Instagram media, Vimeo or YouTube videos, Google Maps, and more.</p>
</div>
</section>
</main>
<footer class="main-footer">
<a href="index.html"><img class="logo" src="assets/shared/desktop/logo-white.svg" alt="Photosnap logo"/></a>
<div class="social-networks">
<a><img alt="facebook" src="assets/shared/desktop/facebook.svg" /></a>
<a><img alt="youtube" src="assets/shared/desktop/youtube.svg" /></a>
<a><img alt="twitter" src="assets/shared/desktop/twitter.svg" /></a>
<a><img alt="pinterest" src="assets/shared/desktop/pinterest.svg" /></a>
<a><img alt="instagram" src="assets/shared/desktop/instagram.svg" /></a>
</div>
<nav class="footer__nav">
<ul>
<li><a href="index.html" class="nav-link">Home</a></li>
<li><a href="stories.html" class="nav-link">Stories</a></li>
<li><a href="features.html" class="nav-link">Features</a></li>
<li><a href="pricing.html" class="nav-link">Pricing</a></li>
</ul>
</nav>
<a class="arrow-button">
<span>Get an invite</span>
<svg xmlns="http://www.w3.org/2000/svg" width="43" height="14"><g fill="none" fill-rule="evenodd" stroke="#000"><path d="M0 7h41.864M35.428 1l6 6-6 6"/></g></svg>
</a>
<div class="footer__copy">Copyright 2019. All Rights Reserved</div>
</footer>
</div>
</body>
</html>