4 |
5 | Photosnap is a photography website designed by FrontEnd Mentor and coded by me.
6 |
7 | The project is a challenge from FrontEnd Mentor which I partake in.
8 |
9 | Built using HTML, CSS, Sass and Javascript.
10 |
11 | The project contains four pages which are :
12 |
13 | 1. Homepage
14 | 2. Stories
15 | 3. Features
16 | 4. Pricing
17 |
18 | All the resources used in building this site were provided by FrontEnd Mentor.
19 |
20 | Live URL = https://abdulsamadayoade.github.io/Photosnap
21 |
--------------------------------------------------------------------------------
/images/youtube.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/styles/sass/basics/_mixins.scss:
--------------------------------------------------------------------------------
1 | @mixin flex {
2 | display: flex;
3 | }
4 |
5 | @mixin grid {
6 | display: grid;
7 | grid-template-columns: repeat(4, 1fr);
8 | }
9 |
10 | @mixin bg-cover {
11 | background-size: cover;
12 | }
13 |
14 | @mixin bg-center {
15 | background-position: center;
16 | }
17 |
18 | @mixin menu-icons {
19 | position: absolute;
20 | top: 50%;
21 | left: 50%;
22 | }
23 |
24 | @mixin flex-column {
25 | flex-direction: column;
26 | }
27 |
28 | @mixin column-reverse {
29 | flex-direction: column-reverse;
30 | }
31 |
32 | @mixin uppercase {
33 | text-transform: uppercase;
34 | }
35 |
36 | @mixin sectionHeight {
37 | height: 480px;
38 | }
--------------------------------------------------------------------------------
/images/twitter.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/styles/sass/basics/_header.scss:
--------------------------------------------------------------------------------
1 | header {
2 | height: 70px;
3 | }
4 |
5 | .navbar {
6 | @include flex;
7 | align-items: center;
8 | justify-content: space-between;
9 | height: 70px;
10 | }
11 |
12 | %navlink-shared {
13 | text-transform: uppercase;
14 | font-family: $ff-bold;
15 | font-size: $font-size-h4;
16 | letter-spacing: 2px;
17 | transition: color .5s ease;
18 | }
19 |
20 | .nav_list {
21 | @include flex;
22 |
23 | &-item {
24 | margin-right: 45px;
25 | }
26 |
27 | &-link {
28 | @extend %navlink-shared;
29 | color: $black;
30 |
31 | &:hover {
32 | color: $light-grey;
33 | }
34 | }
35 | }
36 |
37 | .menu_toggle {
38 | display: none;
39 | }
--------------------------------------------------------------------------------
/images/white-FB.svg:
--------------------------------------------------------------------------------
1 |
11 |
--------------------------------------------------------------------------------
/styles/sass/basics/_presets.scss:
--------------------------------------------------------------------------------
1 | *,
2 | *::before,
3 | *::after {
4 | margin: 0;
5 | padding: 0;
6 | box-sizing: border-box;
7 | }
8 |
9 | body {
10 | font-family: $ff-reg;
11 | font-size: $font-size-body;
12 | }
13 |
14 | ul {
15 | list-style: none;
16 | }
17 |
18 | a {
19 | text-decoration: none;
20 | }
21 |
22 | button {
23 | cursor: pointer;
24 | }
25 |
26 | .row {
27 | @include flex;
28 | }
29 |
30 | .grid {
31 | @include grid;
32 | }
33 |
34 | .container,
35 | .container-lg,
36 | .container-small {
37 | width: 100%;
38 | margin: 0 auto;
39 | }
40 |
41 | .container {
42 | max-width: 1150px;
43 | padding: 0 25px;
44 | }
45 |
46 | .container-lg {
47 | max-width: 3000px;
48 | }
49 |
50 | .container-small {
51 | max-width: 900px;
52 | padding: 0 20px;
53 | }
--------------------------------------------------------------------------------
/styles/sass/pages/_stories.scss:
--------------------------------------------------------------------------------
1 | // HERO
2 |
3 | .hero {
4 | background-image: url("../../../images/moon-of-appalacia.jpg");
5 | @include bg-cover;
6 | padding: 30px 0;
7 |
8 | .section_text {
9 | width: 100%;
10 |
11 | &-box {
12 | width: 100%;
13 | max-width: 400px;
14 | margin: 0;
15 | }
16 | }
17 |
18 | h2 {
19 | width: 400px;
20 | max-width: 100%;
21 | }
22 |
23 | h5 {
24 | color: $white;
25 | margin-bottom: 14px;
26 | }
27 |
28 | p {
29 | margin: 23px 0;
30 |
31 | span {
32 | color: $white;
33 | font-size: 13px;
34 | }
35 | }
36 |
37 | p:last-of-type {
38 | margin-bottom: 40px;
39 | }
40 | }
41 |
42 | .hero-mobile {
43 | display: none;
44 | }
--------------------------------------------------------------------------------
/images/white-YT.svg:
--------------------------------------------------------------------------------
1 |
11 |
--------------------------------------------------------------------------------
/styles/sass/pages/_features.scss:
--------------------------------------------------------------------------------
1 | // FEATURES SECTION
2 | .features {
3 | .section_text {
4 | @include sectionHeight;
5 | }
6 | }
7 |
8 | .section-features-img {
9 | background-image: url("../../../images/features-bg.jpg");
10 | @include bg-cover;
11 | }
12 |
13 | // BETA SECTION
14 |
15 | .beta {
16 | background-image: url("../../../images/bg-beta.jpg");
17 | @include bg-cover;
18 | padding: 70px 0;
19 | height: 280px;
20 | position: relative;
21 |
22 | &::before {
23 | content: '';
24 | position: absolute;
25 | top: 0;
26 | left: 0;
27 | height: 100%;
28 | width: 6px;
29 | background-image: linear-gradient(to bottom, #5a77ff, #bc7198, #ffc593);
30 | }
31 |
32 | h2 {
33 | width: 450px;
34 | max-width: 100%;
35 | padding-right: 10px;
36 | }
37 |
38 | a {
39 | display: inline-flex;
40 | }
41 | }
--------------------------------------------------------------------------------
/images/pinterest.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/js/app.js:
--------------------------------------------------------------------------------
1 | // MOBILE NAVIGATION MENU
2 | const menuButton = document.querySelector('.menu_toggle');
3 | const open = document.querySelector('.open');
4 | const close = document.querySelector('.close');
5 | const navList = document.querySelector('.nav_list');
6 |
7 | menuButton.addEventListener('click', function () {
8 | navList.classList.toggle('active');
9 | open.classList.toggle('active');
10 | close.classList.toggle('active');
11 | });
12 |
13 | // CLOSE THE NAV WHEN NAVLNKS ARE CLICKED
14 | let navLinks = document.querySelectorAll('.nav_list-link');
15 |
16 | navLinks.forEach(function (navLink) {
17 | navLink.addEventListener('click', function () {
18 | navList.classList.remove('active');
19 | })
20 | })
21 |
22 | // PRICING TABS SWITCH
23 | const priceToggle = document.getElementById('toggle');
24 | const priceGrid = document.querySelector('.price-grid');
25 |
26 | priceToggle.addEventListener('change', e => {
27 | priceGrid.classList.toggle('show-yearly');
28 | });
29 |
--------------------------------------------------------------------------------
/images/instagram.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/images/white-Tw.svg:
--------------------------------------------------------------------------------
1 |
11 |
--------------------------------------------------------------------------------
/styles/sass/basics/_buttons.scss:
--------------------------------------------------------------------------------
1 | %btn-shared {
2 | text-transform: uppercase;
3 | font-size: $font-size-h4;
4 | font-family: $ff-bold;
5 | letter-spacing: $letter-spacing-S;
6 | }
7 |
8 | .btn {
9 | display: inline-block;
10 | border: none;
11 | outline: none;
12 | padding: 11px 25px;
13 | @extend %btn-shared;
14 | }
15 |
16 | .btn-black {
17 | background-color: $black;
18 | color: $white;
19 | transition: all .4s;
20 |
21 | &:hover {
22 | background-color: $light-grey;
23 | color: $black;
24 | }
25 | }
26 |
27 | .invite-link {
28 | display: inline-flex;
29 | align-items: center;
30 | width: 100%;
31 | max-width: 165px;
32 | position: relative;
33 | @extend %btn-shared;
34 |
35 | &::after {
36 | content: '';
37 | position: absolute;
38 | right: 0;
39 | width: 42px;
40 | height: 12px;
41 | background-size: cover;
42 | transition: transform .4s;
43 | }
44 |
45 | &:hover {
46 | text-decoration: underline;
47 | }
48 |
49 | &:hover::after {
50 | transform: translateX(-10px);
51 | }
52 | }
53 |
54 | .invite-link-white {
55 | color: $white;
56 |
57 | &::after {
58 | background-image: url("../../../images/arrow-white.svg");
59 | }
60 | }
61 |
62 | .invite-link-black {
63 | color: $black;
64 | max-width: 200px;
65 |
66 | &::after {
67 | background-image: url("../../../images/arrow-black.svg");
68 | }
69 | }
--------------------------------------------------------------------------------
/images/white-Pin.svg:
--------------------------------------------------------------------------------
1 |
16 |
--------------------------------------------------------------------------------
/images/responsive.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/styles/sass/basics/_typography.scss:
--------------------------------------------------------------------------------
1 | @font-face {
2 | font-family: "DM Sans Regular";
3 | src: url("../../../textfont/DMSans-Regular.ttf") format("truetype");
4 | }
5 |
6 | @font-face {
7 | font-family: "DM Sans Bold";
8 | src: url("../../../textfont/DMSans-Bold.ttf") format("truetype");
9 | }
10 |
11 | // @import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;700&display=swap');
12 |
13 | $ff-bold: "DM Sans Bold", sans-serif;
14 | $ff-reg: "DM Sans Regular", sans-serif;
15 |
16 |
17 | $font-size-body: 15px;
18 | $font-size-h1: 40px;
19 | $font-size-h2: 24px;
20 | $font-size-h3: 18px;
21 | $font-size-h4: 12px;
22 | $font-size-h5: 10px;
23 |
24 | $letter-spacing-L: 4.17px;
25 | $letter-spacing-S: 2px;
26 |
27 | $line-height-L: 48px;
28 | $line-height-M: 25px;
29 | $line-height-S: 16px;
30 |
31 | h1 {
32 | font-size: $font-size-h1;
33 | @include uppercase;
34 | letter-spacing: $letter-spacing-L;
35 | }
36 |
37 | .white {
38 | color: $white;
39 | }
40 |
41 | h3 {
42 | font-family: $ff-bold;
43 | font-size: $font-size-h3;
44 | line-height: $line-height-M;
45 | }
46 |
47 | h4 {
48 | font-size: 24px;
49 | line-height: $line-height-M;
50 | letter-spacing: .2px;
51 | font-family: $ff-bold;
52 | text-align: center;
53 | margin-bottom: 25px;
54 | }
55 |
56 | h5 {
57 | font-family: $ff-bold;
58 | font-size: $font-size-h4;
59 | @include uppercase;
60 | letter-spacing: $letter-spacing-S;
61 | }
62 |
63 | p.opaque-grey {
64 | color: $opaque-grey;
65 | }
66 |
67 | p.opaque-black {
68 | color: $opaque-black;
69 | }
70 |
71 | .heading {
72 | font-size: $font-size-h1;
73 | @include uppercase;
74 | letter-spacing: $letter-spacing-L;
75 | }
--------------------------------------------------------------------------------
/images/drag.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/images/no-limit.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/images/white-Insta.svg:
--------------------------------------------------------------------------------
1 |
12 |
--------------------------------------------------------------------------------
/images/boost.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/images/custom.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/styles/sass/_tablet.scss:
--------------------------------------------------------------------------------
1 | // MEDIA QUERIES FOR TABLETS
2 |
3 | @media screen and (max-width: 1024px) {
4 | .heading {
5 | font-size: 36px;
6 | }
7 |
8 | .section_text {
9 | width: 65%;
10 | }
11 |
12 | .stories {
13 | .section_text-box {
14 | max-width: 100%;
15 | }
16 | }
17 |
18 | .everyone {
19 | .section_text-box {
20 | max-width: 100%;
21 | }
22 | }
23 |
24 | .section_image {
25 | width: 35%;
26 | }
27 |
28 | .section-create-img {
29 | background-image: url("../../images/create-and-share-tablet.jpg");
30 | @include bg-center;
31 | }
32 |
33 | .section-stories-img {
34 | background-image: url("../../images/beautiful-stories-tablet.jpg");
35 | @include bg-center;
36 | }
37 |
38 | .section-everyone-img {
39 | background-image: url("../../images/designed-for-everyone-tablet.jpg");
40 | @include bg-center;
41 | }
42 |
43 | .grid {
44 | grid-template-columns: repeat(2, 1fr);
45 | }
46 |
47 | .our-features {
48 | .row {
49 | flex-direction: column;
50 | }
51 |
52 | p {
53 | max-width: 500px;
54 | margin: 0 auto;
55 | }
56 | }
57 |
58 | .hero {
59 | background-image: url("../../images/moon-of-appalacia-tablet.jpg");
60 | }
61 |
62 | .section-features-img {
63 | background-image: url("../../images/features-bg-tablet.jpg");
64 | }
65 |
66 | .section-pricing-img {
67 | background-image: url("../../images/pricing-bg-tablet.jpg");
68 | }
69 |
70 | .beta {
71 | background-image: url("../../images/bg-beta-tablet.jpg");
72 | }
73 |
74 | .pricing-tabs {
75 | .price-grid {
76 | grid-template-columns: 1fr;
77 | row-gap: 30px;
78 | max-width: 800px;
79 | margin: 0 auto;
80 | }
81 |
82 | .price-box {
83 | height: 410px;
84 | padding: 30px 40px;
85 | text-align: left;
86 |
87 | p {margin-bottom: 35px;}
88 |
89 | p, .btn {
90 | max-width: 300px;
91 | }
92 | }
93 |
94 | .price-box.pro {
95 | transform: translateY(0);
96 | height: 410px;
97 | padding: 30px 40px;
98 | }
99 |
100 | h4 {
101 | text-align: left;
102 | }
103 | }
104 | }
105 |
106 | @media screen and (max-width: 800px) {
107 | .nav_list-item {
108 | margin-right: 25px;
109 | }
110 | }
--------------------------------------------------------------------------------
/styles/sass/basics/_footer.scss:
--------------------------------------------------------------------------------
1 | footer {
2 | background-color: $black;
3 | padding: 60px 0 40px;
4 |
5 | .footer-row {
6 | @include flex;
7 | align-items: flex-start;
8 | }
9 |
10 | .footer_logo-box {
11 | padding-right: 100px;
12 | height: 140px;
13 | @include flex;
14 | flex-direction: column;
15 | justify-content: space-between;
16 |
17 | .social {
18 | @include flex;
19 |
20 | li:not(:last-child) {
21 | margin-right: 13px;
22 | }
23 |
24 | a {
25 | display: block;
26 | width: 20px;
27 | height: 20px;
28 | transition: all .4s;
29 | }
30 |
31 | a.facebook {
32 | background-image: url("../../../images/white-FB.svg");
33 | @include bg-cover;
34 |
35 | &:hover {
36 | background-image: url("../../../images/facebook.svg");
37 | }
38 | }
39 |
40 | a.youtube {
41 | background-image: url("../../../images/white-YT.svg");
42 | @include bg-cover;
43 |
44 | &:hover {
45 | background-image: url("../../../images/youtube.svg");
46 | }
47 | }
48 |
49 | a.twitter {
50 | background-image: url("../../../images/white-Tw.svg");
51 | @include bg-cover;
52 |
53 | &:hover {
54 | background-image: url("../../../images/twitter.svg");
55 | }
56 | }
57 |
58 | a.pinterest {
59 | background-image: url("../../../images/white-Pin.svg");
60 | @include bg-cover;
61 |
62 | &:hover {
63 | background-image: url("../../../images/pinterest.svg");
64 | }
65 | }
66 |
67 | a.instagram {
68 | background-image: url("../../../images/white-Insta.svg");
69 | @include bg-cover;
70 |
71 | &:hover {
72 | background-image: url("../../../images/instagram.svg");
73 | }
74 | }
75 |
76 | img {
77 | transition: transform .4s ease;
78 |
79 | &:hover {
80 | transform: scale(1.15);
81 | }
82 | }
83 | }
84 | }
85 |
86 | .footer_menu-box {
87 | height: 140px;
88 | }
89 |
90 | .footer_menu {
91 | @include flex;
92 | flex-direction: column;
93 | justify-content: space-between;
94 | height: 140px;
95 |
96 | &-link {
97 | @extend %navlink-shared;
98 | color: $white;
99 |
100 | &:hover {
101 | color: $opaque-grey;
102 | }
103 | }
104 | }
105 |
106 | .footer_copyright {
107 | margin-left: auto;
108 | @include flex;
109 | flex-direction: column;
110 | justify-content: space-between;
111 | height: 140px;
112 | }
113 | }
114 |
--------------------------------------------------------------------------------
/images/embed.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/images/logo.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/styles/sass/pages/_pricing.scss:
--------------------------------------------------------------------------------
1 | // PRICING HERO SECTION
2 | .pricing {
3 | .section_text {
4 | @include sectionHeight;
5 | }
6 | }
7 |
8 | .section-pricing-img {
9 | background-image: url("../../../images/pricing-bg.jpg");
10 | @include bg-cover;
11 | }
12 |
13 | // PRICING TABS
14 |
15 | .pricing-tabs {
16 | padding: 100px 0 60px;
17 |
18 | .toggle-container {
19 | margin-bottom: 40px;
20 | color: $black;
21 | display: flex;
22 | align-items: center;
23 | justify-content: center;
24 |
25 | span {
26 | font-family: $ff-bold;
27 | font-size: $font-size-h3;
28 | }
29 |
30 | label {
31 | background-color: #dfdfdf;
32 | display: inline-block;
33 | position: relative;
34 | margin: 0 30px;
35 | width: 60px;
36 | height: 30px;
37 | border-radius: 50px;
38 | cursor: pointer;
39 |
40 | .ball {
41 | height: 25px;
42 | width: 25px;
43 | background-color: $black;
44 | border-radius: 50%;
45 | position: absolute;
46 | top: 3px;
47 | left: 3px;
48 | transition: transform 0.4s ease;
49 | }
50 | }
51 |
52 | input {
53 | position: absolute;
54 | left: -9999px;
55 |
56 | &:checked + label .ball {
57 | transform: translateX(29px);
58 | }
59 | }
60 | }
61 |
62 | .price-grid {
63 | display: grid;
64 | grid-template-columns: repeat(3, 1fr);
65 | column-gap: 30px;
66 | padding: 35px 0 30px;
67 | }
68 |
69 | .price-box {
70 | background-color: #f5f5f5;
71 | padding: 50px 40px;
72 | text-align: center;
73 | height: 430px;
74 |
75 | p {
76 | color: $opaque-black;
77 | line-height: $line-height-M;
78 | margin-bottom: 45px;
79 | }
80 |
81 | .yearly {
82 | display: none;
83 | }
84 |
85 | .btn {
86 | display: block;
87 | width: 100%;
88 | text-align: center;
89 | }
90 |
91 | }
92 |
93 | .price-box.pro {
94 | background-color: $black;
95 | height: 500px;
96 | padding-top: 88px;
97 | transform: translateY(-35px);
98 | position: relative;
99 |
100 | p {
101 | color: $opaque-grey;
102 | }
103 |
104 | h2, h4 {
105 | color: $white;
106 | }
107 |
108 | button {
109 | background-color: $white;
110 | color: $black;
111 |
112 | &:hover {
113 | background-color: $light-grey;
114 | }
115 |
116 | &::before {
117 | content: '';
118 | position: absolute;
119 | top: 0;
120 | left: 0;
121 | height: 6px;
122 | width: 100%;
123 | background-image: linear-gradient(to right, #ffc593, #bc7198, #5a77ff);
124 | }
125 | }
126 | }
127 | }
128 |
129 | .show-yearly .price-box .yearly {
130 | display: block;
131 | }
132 |
133 | .show-yearly .price-box .monthly {
134 | display: none;
135 | }
136 |
137 | // COMPARE SECTION
138 | %border-bottom {
139 | content: '';
140 | position: absolute;
141 | bottom: 0;
142 | left: 0;
143 | height: .5px;
144 | width: 90%;
145 | }
146 |
147 | .compare {
148 | padding: 50px 0 130px;
149 |
150 | h2 {
151 | text-align: center;
152 | margin-bottom: 45px;
153 | }
154 |
155 | .table_row {
156 | padding: 23px 30px;
157 | display: flex;
158 | position: relative;
159 |
160 | &::after {
161 | @extend %border-bottom;
162 | background-color: $light-grey;
163 | }
164 |
165 | .col-1 {
166 | margin-right: auto;
167 | }
168 |
169 | .col-2 {
170 | display: flex;
171 |
172 | span {
173 | margin-right: 80px;
174 | }
175 |
176 | .plan-name {display: none;}
177 | }
178 |
179 | span {
180 | font-family: $ff-bold;
181 | font-size: $font-size-h4;
182 | @include uppercase;
183 | letter-spacing: 1.5px;
184 | }
185 | }
186 |
187 | .table_head {
188 | position: relative;
189 |
190 | &::after {
191 | @extend %border-bottom;
192 | background-color: $black;
193 | }
194 | }
195 |
196 | .table_body {
197 | .col-2 {
198 | span {
199 | margin-right: 105px;
200 | }
201 | }
202 | }
203 | }
--------------------------------------------------------------------------------
/styles/sass/pages/_home.scss:
--------------------------------------------------------------------------------
1 | // THE SECTIONS
2 |
3 | .section_text {
4 | width: 43%;
5 | height: 590px;
6 | @include flex;
7 | align-items: center;
8 |
9 | &_black {
10 | background-color: $black;
11 | }
12 |
13 | &_white {
14 | background-color: $white;
15 | }
16 |
17 | &-box {
18 | width: 100%;
19 | max-width: 500px;
20 | margin: 0 auto;
21 | padding: 0 55px;
22 |
23 | p {
24 | line-height: $line-height-M;
25 | margin: 40px 0 55px;
26 | }
27 | }
28 | }
29 |
30 | .section_image {
31 | width: 57%;
32 | }
33 |
34 | .section-create-img {
35 | background-image: url("../../../images/create-and-share.jpg");
36 | @include bg-cover;
37 | }
38 |
39 | .section-stories-img {
40 | background-image: url("../../../images/beautiful-stories.jpg");
41 | @include bg-cover;
42 | }
43 |
44 | .section-everyone-img {
45 | background-image: url("../../../images/designed-for-everyone.jpg");
46 | @include bg-cover;
47 | }
48 |
49 | // THE GALLERY SECTION
50 |
51 | .image-container {
52 | display: block;
53 | height: 500px;
54 | position: relative;
55 | transition: all .3s;
56 |
57 | &::after {
58 | content: '';
59 | position: absolute;
60 | bottom: 0;
61 | left: 0;
62 | width: 100%;
63 | height: 5px;
64 | background-image: linear-gradient(27deg, #FFC593 0%, #BC7198 49%, #5A77FF 95%);
65 | opacity: 0;
66 | transition: opacity .3s;
67 | }
68 |
69 | &:hover {
70 | transform: translateY(-25px);
71 | }
72 |
73 | &:hover::after {
74 | opacity: 1;
75 | }
76 | }
77 |
78 | .image {
79 | height: 100%;
80 | width: 100%;
81 | @include flex;
82 | align-items: flex-end;
83 | justify-content: center;
84 | padding: 35px 0;
85 |
86 | &-box {
87 | color: $white;
88 | width: 80%;
89 | max-width: 100%;
90 |
91 | p {
92 | margin-top: 5px;
93 | font-size: 14px;
94 | }
95 | }
96 |
97 | &-textbox {
98 | border-bottom: 1px solid rgba(255,255,255,.25);
99 | padding: 10px 5px 18px;
100 | }
101 |
102 | &-link {
103 | @include flex;
104 | justify-content: space-between;
105 | padding: 18px 5px 5px;
106 |
107 | h6 {
108 | text-transform: uppercase;
109 | font-family: $ff-bold;
110 | font-size: $font-size-h4;
111 | letter-spacing: 2px;
112 | }
113 | }
114 |
115 | &-1 {
116 | background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.5)), url("../../../images/mountains.jpg");
117 | @include bg-cover;
118 | }
119 | &-2 {
120 | background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.5)), url("../../../images/cityscapes.jpg");
121 | @include bg-cover;
122 | }
123 | &-3 {
124 | background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.5)), url("../../../images/18-days-voyage.jpg");
125 | @include bg-cover;
126 | }
127 | &-4 {
128 | background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.5)), url("../../../images/architecturals.jpg");
129 | @include bg-cover;
130 | }
131 | &-5 {
132 | background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.5)), url("../../../images/world-tour.jpg");
133 | @include bg-cover;
134 | }
135 |
136 | &-6 {
137 | background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.5)), url("../../../images/unforeseen-corners.jpg");
138 | @include bg-cover;
139 | }
140 | &-7 {
141 | background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.5)), url("../../../images/king-on-africa.jpg");
142 | @include bg-cover;
143 | }
144 | &-8 {
145 | background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.5)), url("../../../images/trip-to-nowhere.jpg");
146 | @include bg-cover;
147 | }
148 | &-9 {
149 | background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.5)), url("../../../images/rage-of-the-sea.jpg");
150 | @include bg-cover;
151 | }
152 | &-10 {
153 | background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.5)), url("../../../images/running-free.jpg");
154 | @include bg-cover;
155 | }
156 |
157 | &-11 {
158 | background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.5)), url("../../../images/behind-the-waves.jpg");
159 | @include bg-cover;
160 | }
161 | &-12 {
162 | background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.5)), url("../../../images/calm-waters.jpg");
163 | @include bg-cover;
164 | }
165 | &-13 {
166 | background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.5)), url("../../../images/milky-way.jpg");
167 | @include bg-cover;
168 | }
169 | &-14 {
170 | background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.5)), url("../../../images/dark-forest.jpg");
171 | @include bg-cover;
172 | }
173 | &-15 {
174 | background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.5)), url("../../../images/somwarpet.jpg");
175 | @include bg-cover;
176 | }
177 |
178 | &-16 {
179 | background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.5)), url("../../../images/land-of-dreams.jpg");
180 | @include bg-cover;
181 | }
182 | }
183 |
184 | // FEATURES SECTION
185 |
186 | .our-features {
187 | padding: 100px 0;
188 |
189 | .feature {
190 | text-align: center;
191 | padding: 0 10px;
192 | margin-bottom: 30px;
193 |
194 | &-image {
195 | @include flex;
196 | align-items: center;
197 | justify-content: center;
198 | height: 100px;
199 | margin-bottom: 40px;
200 |
201 | img {
202 | max-width: 100%;
203 | }
204 | }
205 |
206 | &-heading {
207 | margin-bottom: 18px;
208 | }
209 |
210 | &-text {
211 | line-height: $line-height-M;
212 | color: $opaque-black;
213 | }
214 | }
215 | }
--------------------------------------------------------------------------------
/images/logo-white.svg:
--------------------------------------------------------------------------------
1 |
19 |
--------------------------------------------------------------------------------
/features.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Features
59 |We make sure all of our features are designed to be loved by every 60 | aspiring and even professional photograpers who wanted to share their stories.
61 |
100% Responsive
75 |No matter which the device you’re on, our site is fully responsive and 76 | stories look beautiful on 77 | any screen.
78 |
No Photo Upload Limit
82 |Our tool has no limits on uploads or bandwidth. Freely upload in bulk 83 | and 84 | share all of your stories in one go.
85 |
Available to Embed
89 |Embed Tweets, Facebook posts, Instagram media, Vimeo or YouTube videos, 90 | Google Maps, and more. 91 |
92 |
Custom Domain
98 |With Photosnap subscriptions you can host your stories on your own 99 | domain. You can also remove our branding!
100 |
Boost Your Experience
104 |Users that viewed your story or gallery can easily get notifed of new 105 | and featured stories with our built in mailing list.
106 |
Drag & Drop Image
110 |Easily drag and drop your image and get beautiful shots everytime. No 111 | over the top tooling to add friction to creating stories. 112 |
113 |
124 | 
138 | 
152 | 
166 | 
147 | 
160 | 
175 | 
190 | 
205 | 
220 | 
235 | 
250 | 
265 | 
280 | 
295 | 
310 | 
325 |