├── .gitattributes ├── css ├── _container.scss ├── _features.scss ├── _footer.scss ├── _forms.scss ├── _global.scss ├── _header.scss ├── _hero.scss ├── _productive.scss ├── _quotes.scss ├── _signup.scss ├── _variables.scss ├── style.css ├── style.css.map └── style.scss ├── images ├── bg-curvy-desktop.svg ├── bg-curvy-mobile.svg ├── bg-quotes.png ├── facebook-f.svg ├── favicon-32x32.png ├── icon-access-anywhere.svg ├── icon-any-file.svg ├── icon-arrow.svg ├── icon-collaboration.svg ├── icon-email.svg ├── icon-location.svg ├── icon-phone.svg ├── icon-security.svg ├── illustration-intro.png ├── illustration-stay-productive.png ├── instagram.svg ├── logo.svg ├── profile-1.jpg ├── profile-2.jpg ├── profile-3.jpg └── twitter.svg └── index.html /.gitattributes: -------------------------------------------------------------------------------- 1 | # Auto detect text files and perform LF normalization 2 | * text=auto 3 | -------------------------------------------------------------------------------- /css/_container.scss: -------------------------------------------------------------------------------- 1 | .container { 2 | max-width: 1440px; 3 | margin: 0 auto; 4 | padding: 25px 20px 100px 20px; 5 | 6 | @include breakpoint(large){ 7 | padding: 73px 60px 87px 60px; 8 | } 9 | 10 | &--small { 11 | @extend .container; 12 | max-width: 920px; 13 | } 14 | } -------------------------------------------------------------------------------- /css/_features.scss: -------------------------------------------------------------------------------- 1 | .features { 2 | 3 | .feature-grid { 4 | display: grid; 5 | grid-template-columns: 1fr; 6 | gap: 6vw 10vw; 7 | margin: 0 auto; 8 | 9 | @include breakpoint(medium){ 10 | grid-template-columns: repeat(2, 1fr); 11 | } 12 | 13 | @include breakpoint(large){ 14 | gap: 7vw 7vw; 15 | } 16 | } 17 | 18 | .feature { 19 | text-align: center; 20 | 21 | &-image { 22 | display: flex; 23 | justify-content: center; 24 | align-items: center; 25 | height: 90px; 26 | margin-bottom: 30px; 27 | 28 | img { 29 | height: 100%; 30 | width: auto; 31 | } 32 | } 33 | 34 | &-title { 35 | font-family: $font-title; 36 | font-size: 1.5rem; 37 | font-weight: 700; 38 | margin-bottom: 16px; 39 | } 40 | 41 | &-description { 42 | font-size: 1rem; 43 | } 44 | } 45 | } -------------------------------------------------------------------------------- /css/_footer.scss: -------------------------------------------------------------------------------- 1 | .footer { 2 | background-color: $footerBg; 3 | font-size: 1rem; 4 | padding-top: 200px; 5 | 6 | a:hover { 7 | text-decoration: underline; 8 | } 9 | 10 | .container { 11 | display: grid; 12 | grid-row-gap: 35px; 13 | grid-column-gap: 0px; 14 | grid-template-columns: 1fr; 15 | grid-template-areas: "logo" "address" "contact" "links1" "links2" "social"; 16 | 17 | @include breakpoint(medium){ 18 | grid-column-gap: 25px; 19 | } 20 | 21 | @include breakpoint(large){ 22 | grid-column-gap: 35px; 23 | grid-template-columns: 3fr 2fr 2fr 2fr auto; 24 | grid-template-rows: 60px 1fr; 25 | grid-template-areas: "logo logo logo logo logo" "address contact links1 links2 social"; 26 | } 27 | 28 | @include breakpoint(xlarge){ 29 | grid-column-gap: 60px; 30 | } 31 | } 32 | 33 | &__logo { 34 | @include breakpoint(large){ 35 | grid-area: logo; 36 | } 37 | } 38 | 39 | &__address { 40 | grid-area: address; 41 | display: flex; 42 | 43 | svg { 44 | flex: 0 0 13px; 45 | margin-top: 3px; 46 | margin-right: 20px; 47 | } 48 | } 49 | 50 | &__contact { 51 | grid-area: contact; 52 | 53 | @include breakpoint(large){ 54 | justify-self: right; 55 | } 56 | 57 | a { 58 | font-size: 0.875rem; 59 | } 60 | 61 | &-phone, &-email { 62 | display: flex; 63 | } 64 | 65 | &-phone { 66 | margin-bottom: 20px; 67 | } 68 | 69 | &-phone svg { 70 | width: 18px; 71 | margin-right: 20px; 72 | } 73 | 74 | &-email svg { 75 | width: 20px; 76 | margin-right: 20px; 77 | } 78 | } 79 | 80 | &__links1, &__links2 { 81 | 82 | a { 83 | display: block; 84 | margin-bottom: 20px; 85 | } 86 | } 87 | 88 | &__links1 { 89 | grid-area: links1; 90 | 91 | @include breakpoint(large){ 92 | justify-self: right; 93 | } 94 | } 95 | 96 | &__links2 { 97 | grid-area: links2; 98 | } 99 | 100 | &__social { 101 | grid-area: social; 102 | justify-self: center; 103 | 104 | @include breakpoint(medium){ 105 | justify-self: start; 106 | } 107 | 108 | svg { 109 | width: 35px; 110 | height: 35px; 111 | border: 1px solid #ffffff; 112 | border-radius: 50%; 113 | padding: 8px; 114 | fill: #ffffff; 115 | margin-right: 16px; 116 | transition: all 150ms ease-in-out; 117 | 118 | &:hover { 119 | background-color: rgba(255, 255, 255, 0.8); 120 | fill: $footerBg; 121 | } 122 | } 123 | } 124 | 125 | } -------------------------------------------------------------------------------- /css/_forms.scss: -------------------------------------------------------------------------------- 1 | button, .button { 2 | border: none; 3 | background: linear-gradient(to right, $ctaCyan, $ctaBlue); 4 | font-size: 0.875rem; 5 | font-weight: 700; 6 | padding: 15px 20px; 7 | width: 100%; 8 | text-align: center; 9 | border-radius: $border-radius-circle; 10 | cursor: pointer; 11 | 12 | @include breakpoint(medium){ 13 | max-width: 200px; 14 | } 15 | 16 | &:hover { 17 | background: linear-gradient(to right, $ctaBlue, $ctaBlue); 18 | } 19 | 20 | &--large { 21 | @extend .button; 22 | padding: 20px; 23 | 24 | @include breakpoint(medium){ 25 | max-width: 285px; 26 | } 27 | } 28 | } 29 | 30 | input { 31 | font-family: $font-body; 32 | } 33 | 34 | input[type="text"], input[type="email"]{ 35 | outline: none; 36 | border: none; 37 | border-radius: $border-radius-circle; 38 | font-size: 0.9rem; 39 | color: $footerBg; 40 | padding: 17px 40px; 41 | } 42 | 43 | -------------------------------------------------------------------------------- /css/_global.scss: -------------------------------------------------------------------------------- 1 | html { 2 | font-size: 100%; 3 | } 4 | 5 | *, *:after, *:before { 6 | box-sizing: border-box; 7 | } 8 | 9 | body { 10 | font-family: $font-body; 11 | font-size: calc(1rem + 0.75vw); 12 | line-height: 1.3; 13 | margin: 0; 14 | padding: 0; 15 | } 16 | 17 | *, a { 18 | color: #ffffff; 19 | } 20 | 21 | a, p { 22 | font-size: 0.875rem; 23 | 24 | @include breakpoint(large){ 25 | font-size: 1rem; 26 | } 27 | } 28 | 29 | a { 30 | text-decoration: none; 31 | } 32 | 33 | h1, h2, h3 { 34 | font-family: $font-title; 35 | margin-top: 0px; 36 | } 37 | 38 | h2.small { 39 | font-size: 1.3em; 40 | } 41 | 42 | h2.large { 43 | font-size: 1.6em; 44 | } 45 | 46 | p { 47 | margin-top: 0px; 48 | margin-bottom: 1.5em; 49 | } 50 | 51 | section { 52 | background-color: $mainBg; 53 | } 54 | -------------------------------------------------------------------------------- /css/_header.scss: -------------------------------------------------------------------------------- 1 | header { 2 | background-color: $introBg; 3 | 4 | .container { 5 | display: grid; 6 | grid-template-columns: minmax(100px, 1fr) repeat(3, auto); 7 | grid-gap: 20px; 8 | align-items: center; 9 | 10 | @include breakpoint(large){ 11 | grid-gap: 56px; 12 | } 13 | } 14 | 15 | img { 16 | width: 83px; 17 | 18 | @include breakpoint(large){ 19 | width: 185px; 20 | } 21 | } 22 | 23 | a { 24 | font-size: 0.875rem; 25 | 26 | @include breakpoint(large){ 27 | font-size: 1rem; 28 | } 29 | 30 | &:hover { 31 | text-decoration: underline; 32 | } 33 | } 34 | } -------------------------------------------------------------------------------- /css/_hero.scss: -------------------------------------------------------------------------------- 1 | .hero { 2 | position: relative; 3 | background-color: $introBg; 4 | 5 | &:after { 6 | content: ""; 7 | position: absolute; 8 | z-index: 0; 9 | width: 100%; 10 | height: 40vw; 11 | bottom: 0px; 12 | background-image: url('/images/bg-curvy-mobile.svg'); 13 | background-size: cover; 14 | background-repeat: no-repeat; 15 | background-position: bottom center; 16 | 17 | @include breakpoint(medium){ 18 | background-image: url('/images/bg-curvy-desktop.svg'); 19 | height: 33vw; 20 | } 21 | } 22 | 23 | .container { 24 | display: flex; 25 | flex-direction: column; 26 | align-items: center; 27 | text-align: center; 28 | } 29 | 30 | > * { 31 | position: relative; 32 | z-index: 1; 33 | } 34 | 35 | img { 36 | width: 100%; 37 | max-width: 716px; 38 | } 39 | 40 | h1 { 41 | max-width: 678px; 42 | font-size: 1.5em; 43 | line-height: 1.5; 44 | margin: 1.1em 0; 45 | } 46 | 47 | p { 48 | max-width: 585px; 49 | font-size: 0.95em; 50 | } 51 | 52 | button { 53 | margin-top: 8px; 54 | } 55 | } -------------------------------------------------------------------------------- /css/_productive.scss: -------------------------------------------------------------------------------- 1 | .productive { 2 | 3 | &__grid { 4 | display: grid; 5 | grid-template-columns: 1fr; 6 | align-items: center; 7 | gap: 50px; 8 | max-width: 600px; 9 | margin: 0 auto; 10 | 11 | @include breakpoint(large){ 12 | grid-template-columns: repeat(2, 1fr); 13 | max-width: 1320px; 14 | } 15 | } 16 | 17 | &__image { 18 | text-align: center; 19 | 20 | img { 21 | width: 100%; 22 | max-width: 615px; 23 | } 24 | } 25 | 26 | &__text { 27 | 28 | h2 { 29 | 30 | @include breakpoint(large){ 31 | max-width: 400px; 32 | } 33 | } 34 | 35 | a { 36 | background-image: url('/images/icon-arrow.svg'); 37 | background-repeat: no-repeat; 38 | background-position: right center; 39 | padding-right: 25px; 40 | color: $ctaCyan; 41 | border-bottom: 1px solid $ctaCyan; 42 | transition: all 200ms ease-in-out; 43 | 44 | &:hover { 45 | color: #ffffff; 46 | border-bottom: 1px solid #ffffff; 47 | } 48 | } 49 | } 50 | } -------------------------------------------------------------------------------- /css/_quotes.scss: -------------------------------------------------------------------------------- 1 | .quotes { 2 | padding-bottom: 200px; 3 | 4 | &__grid { 5 | position: relative; 6 | display: grid; 7 | grid-template-columns: 1fr; 8 | gap: 25px; 9 | max-width: 500px; 10 | 11 | @include breakpoint(large) { 12 | grid-template-columns: repeat(3, 1fr); 13 | gap: 40px; 14 | max-width: 1320px; 15 | } 16 | 17 | &:first-child:before { 18 | content: url('/images/bg-quotes.png'); 19 | transform: scale(0.7); 20 | position: absolute; 21 | z-index: 0; 22 | top: -20px; 23 | left: 20px; 24 | width: 27px; 25 | height: 18px; 26 | 27 | @include breakpoint(large) { 28 | transform: none; 29 | top: 37px; 30 | left: 50px; 31 | width: 60px; 32 | height: 45px; 33 | } 34 | } 35 | } 36 | 37 | .quote { 38 | position: relative; 39 | z-index: 1; 40 | background-color: $testimonialBg; 41 | padding: 30px 24px 24px 24px; 42 | border-radius: 5px; 43 | 44 | @include breakpoint(large) { 45 | padding: 44px 24px 24px 24px; 46 | } 47 | 48 | &__text { 49 | font-size: 0.65em; 50 | margin-bottom: 30px; 51 | } 52 | 53 | &__author { 54 | display: grid; 55 | grid-template-columns: 40px 1fr; 56 | grid-template-rows: 20px 20px; 57 | column-gap: 14px; 58 | 59 | &-image { 60 | grid-column: 1 / span 1; 61 | grid-row: 1 / span 2; 62 | 63 | img { 64 | width: 100%; 65 | height: auto; 66 | border-radius: 50%; 67 | } 68 | } 69 | 70 | &-name { 71 | font-size: 0.5em; 72 | font-weight: 700; 73 | } 74 | 75 | &-title { 76 | font-size: 0.5em; 77 | } 78 | } 79 | } 80 | } -------------------------------------------------------------------------------- /css/_signup.scss: -------------------------------------------------------------------------------- 1 | .signup { 2 | position: absolute; 3 | background: transparent; 4 | width: 100%; 5 | transform: translateY(-248px); 6 | 7 | &__block { 8 | //border: 1px solid red; 9 | border-radius: $border-radius; 10 | box-shadow: 0px 12px 20px rgba(0, 0, 0, 0.2); 11 | background-color: $introBg; 12 | padding: 45px 30px 45px 30px; 13 | text-align: center; 14 | 15 | @include breakpoint(medium){ 16 | padding: 45px 60px 45px 60px; 17 | } 18 | 19 | @include breakpoint(large){ 20 | padding: 45px 80px 45px 80px; 21 | } 22 | } 23 | 24 | &__form { 25 | display: grid; 26 | grid-template-columns: 1fr; 27 | gap: 25px; 28 | margin-top: 35px; 29 | 30 | @include breakpoint(medium){ 31 | grid-template-columns: 1fr 200px; 32 | gap: 30px; 33 | margin-top: 40px; 34 | } 35 | } 36 | 37 | input[type="email"]{ 38 | 39 | } 40 | 41 | input[type="submit"]{ 42 | 43 | } 44 | 45 | } -------------------------------------------------------------------------------- /css/_variables.scss: -------------------------------------------------------------------------------- 1 | // Fonts 2 | $font-title: 'Raleway', sans-serif; 3 | $font-body: 'Open Sans', sans-serif; 4 | 5 | // Colors 6 | $introBg: #1b2330; 7 | $mainBg: #171e2a; 8 | $footerBg: #0a1423; 9 | $testimonialBg: #20293b; 10 | $ctaCyan: #64e1d9; 11 | $ctaBlue: #329ecc; 12 | 13 | // Borders 14 | $border-radius: 10px; 15 | $border-radius-circle: 30px; 16 | 17 | // Breakpoints 18 | $breakpoints: ( 19 | small: 499px, 20 | medium: 699px, 21 | large: 999px, 22 | xlarge: 1399px 23 | ); 24 | 25 | @mixin breakpoint($size){ 26 | $breakpoint-value: map-get($breakpoints, $size); 27 | 28 | @media screen and (min-width: $breakpoint-value){ 29 | @content; 30 | } 31 | } -------------------------------------------------------------------------------- /css/style.css: -------------------------------------------------------------------------------- 1 | html { 2 | font-size: 100%; 3 | } 4 | 5 | *, *:after, *:before { 6 | -webkit-box-sizing: border-box; 7 | box-sizing: border-box; 8 | } 9 | 10 | body { 11 | font-family: "Open Sans", sans-serif; 12 | font-size: calc(1rem + 0.75vw); 13 | line-height: 1.3; 14 | margin: 0; 15 | padding: 0; 16 | } 17 | 18 | *, a { 19 | color: #ffffff; 20 | } 21 | 22 | a, p { 23 | font-size: 0.875rem; 24 | } 25 | 26 | @media screen and (min-width: 999px) { 27 | a, p { 28 | font-size: 1rem; 29 | } 30 | } 31 | 32 | a { 33 | text-decoration: none; 34 | } 35 | 36 | h1, h2, h3 { 37 | font-family: "Raleway", sans-serif; 38 | margin-top: 0px; 39 | } 40 | 41 | h2.small { 42 | font-size: 1.3em; 43 | } 44 | 45 | h2.large { 46 | font-size: 1.6em; 47 | } 48 | 49 | p { 50 | margin-top: 0px; 51 | margin-bottom: 1.5em; 52 | } 53 | 54 | section { 55 | background-color: #171e2a; 56 | } 57 | 58 | .container, .container--small { 59 | max-width: 1440px; 60 | margin: 0 auto; 61 | padding: 25px 20px 100px 20px; 62 | } 63 | 64 | @media screen and (min-width: 999px) { 65 | .container, .container--small { 66 | padding: 73px 60px 87px 60px; 67 | } 68 | } 69 | 70 | .container--small { 71 | max-width: 920px; 72 | } 73 | 74 | button, .button, button--large, .button--large { 75 | border: none; 76 | background: -webkit-gradient(linear, left top, right top, from(#64e1d9), to(#329ecc)); 77 | background: linear-gradient(to right, #64e1d9, #329ecc); 78 | font-size: 0.875rem; 79 | font-weight: 700; 80 | padding: 15px 20px; 81 | width: 100%; 82 | text-align: center; 83 | border-radius: 30px; 84 | cursor: pointer; 85 | } 86 | 87 | @media screen and (min-width: 699px) { 88 | button, .button, button--large, .button--large { 89 | max-width: 200px; 90 | } 91 | } 92 | 93 | button:hover, .button:hover, button--large:hover, .button--large:hover { 94 | background: -webkit-gradient(linear, left top, right top, from(#329ecc), to(#329ecc)); 95 | background: linear-gradient(to right, #329ecc, #329ecc); 96 | } 97 | 98 | button--large, .button--large { 99 | padding: 20px; 100 | } 101 | 102 | @media screen and (min-width: 699px) { 103 | button--large, .button--large { 104 | max-width: 285px; 105 | } 106 | } 107 | 108 | input { 109 | font-family: "Open Sans", sans-serif; 110 | } 111 | 112 | input[type="text"], input[type="email"] { 113 | outline: none; 114 | border: none; 115 | border-radius: 30px; 116 | font-size: 0.9rem; 117 | color: #0a1423; 118 | padding: 17px 40px; 119 | } 120 | 121 | header { 122 | background-color: #1b2330; 123 | } 124 | 125 | header .container, header .container--small { 126 | display: -ms-grid; 127 | display: grid; 128 | -ms-grid-columns: minmax(100px, 1fr) (auto)[3]; 129 | grid-template-columns: minmax(100px, 1fr) repeat(3, auto); 130 | grid-gap: 20px; 131 | -webkit-box-align: center; 132 | -ms-flex-align: center; 133 | align-items: center; 134 | } 135 | 136 | @media screen and (min-width: 999px) { 137 | header .container, header .container--small { 138 | grid-gap: 56px; 139 | } 140 | } 141 | 142 | header img { 143 | width: 83px; 144 | } 145 | 146 | @media screen and (min-width: 999px) { 147 | header img { 148 | width: 185px; 149 | } 150 | } 151 | 152 | header a { 153 | font-size: 0.875rem; 154 | } 155 | 156 | @media screen and (min-width: 999px) { 157 | header a { 158 | font-size: 1rem; 159 | } 160 | } 161 | 162 | header a:hover { 163 | text-decoration: underline; 164 | } 165 | 166 | .hero { 167 | position: relative; 168 | background-color: #1b2330; 169 | } 170 | 171 | .hero:after { 172 | content: ""; 173 | position: absolute; 174 | z-index: 0; 175 | width: 100%; 176 | height: 40vw; 177 | bottom: 0px; 178 | background-image: url("/images/bg-curvy-mobile.svg"); 179 | background-size: cover; 180 | background-repeat: no-repeat; 181 | background-position: bottom center; 182 | } 183 | 184 | @media screen and (min-width: 699px) { 185 | .hero:after { 186 | background-image: url("/images/bg-curvy-desktop.svg"); 187 | height: 33vw; 188 | } 189 | } 190 | 191 | .hero .container, .hero .container--small { 192 | display: -webkit-box; 193 | display: -ms-flexbox; 194 | display: flex; 195 | -webkit-box-orient: vertical; 196 | -webkit-box-direction: normal; 197 | -ms-flex-direction: column; 198 | flex-direction: column; 199 | -webkit-box-align: center; 200 | -ms-flex-align: center; 201 | align-items: center; 202 | text-align: center; 203 | } 204 | 205 | .hero > * { 206 | position: relative; 207 | z-index: 1; 208 | } 209 | 210 | .hero img { 211 | width: 100%; 212 | max-width: 716px; 213 | } 214 | 215 | .hero h1 { 216 | max-width: 678px; 217 | font-size: 1.5em; 218 | line-height: 1.5; 219 | margin: 1.1em 0; 220 | } 221 | 222 | .hero p { 223 | max-width: 585px; 224 | font-size: 0.95em; 225 | } 226 | 227 | .hero button { 228 | margin-top: 8px; 229 | } 230 | 231 | .features .feature-grid { 232 | display: -ms-grid; 233 | display: grid; 234 | -ms-grid-columns: 1fr; 235 | grid-template-columns: 1fr; 236 | gap: 6vw 10vw; 237 | margin: 0 auto; 238 | } 239 | 240 | @media screen and (min-width: 699px) { 241 | .features .feature-grid { 242 | -ms-grid-columns: (1fr)[2]; 243 | grid-template-columns: repeat(2, 1fr); 244 | } 245 | } 246 | 247 | @media screen and (min-width: 999px) { 248 | .features .feature-grid { 249 | gap: 7vw 7vw; 250 | } 251 | } 252 | 253 | .features .feature { 254 | text-align: center; 255 | } 256 | 257 | .features .feature-image { 258 | display: -webkit-box; 259 | display: -ms-flexbox; 260 | display: flex; 261 | -webkit-box-pack: center; 262 | -ms-flex-pack: center; 263 | justify-content: center; 264 | -webkit-box-align: center; 265 | -ms-flex-align: center; 266 | align-items: center; 267 | height: 90px; 268 | margin-bottom: 30px; 269 | } 270 | 271 | .features .feature-image img { 272 | height: 100%; 273 | width: auto; 274 | } 275 | 276 | .features .feature-title { 277 | font-family: "Raleway", sans-serif; 278 | font-size: 1.5rem; 279 | font-weight: 700; 280 | margin-bottom: 16px; 281 | } 282 | 283 | .features .feature-description { 284 | font-size: 1rem; 285 | } 286 | 287 | .productive__grid { 288 | display: -ms-grid; 289 | display: grid; 290 | -ms-grid-columns: 1fr; 291 | grid-template-columns: 1fr; 292 | -webkit-box-align: center; 293 | -ms-flex-align: center; 294 | align-items: center; 295 | gap: 50px; 296 | max-width: 600px; 297 | margin: 0 auto; 298 | } 299 | 300 | @media screen and (min-width: 999px) { 301 | .productive__grid { 302 | -ms-grid-columns: (1fr)[2]; 303 | grid-template-columns: repeat(2, 1fr); 304 | max-width: 1320px; 305 | } 306 | } 307 | 308 | .productive__image { 309 | text-align: center; 310 | } 311 | 312 | .productive__image img { 313 | width: 100%; 314 | max-width: 615px; 315 | } 316 | 317 | @media screen and (min-width: 999px) { 318 | .productive__text h2 { 319 | max-width: 400px; 320 | } 321 | } 322 | 323 | .productive__text a { 324 | background-image: url("/images/icon-arrow.svg"); 325 | background-repeat: no-repeat; 326 | background-position: right center; 327 | padding-right: 25px; 328 | color: #64e1d9; 329 | border-bottom: 1px solid #64e1d9; 330 | -webkit-transition: all 200ms ease-in-out; 331 | transition: all 200ms ease-in-out; 332 | } 333 | 334 | .productive__text a:hover { 335 | color: #ffffff; 336 | border-bottom: 1px solid #ffffff; 337 | } 338 | 339 | .quotes { 340 | padding-bottom: 200px; 341 | } 342 | 343 | .quotes__grid { 344 | position: relative; 345 | display: -ms-grid; 346 | display: grid; 347 | -ms-grid-columns: 1fr; 348 | grid-template-columns: 1fr; 349 | gap: 25px; 350 | max-width: 500px; 351 | } 352 | 353 | @media screen and (min-width: 999px) { 354 | .quotes__grid { 355 | -ms-grid-columns: (1fr)[3]; 356 | grid-template-columns: repeat(3, 1fr); 357 | gap: 40px; 358 | max-width: 1320px; 359 | } 360 | } 361 | 362 | .quotes__grid:first-child:before { 363 | content: url("/images/bg-quotes.png"); 364 | -webkit-transform: scale(0.7); 365 | transform: scale(0.7); 366 | position: absolute; 367 | z-index: 0; 368 | top: -20px; 369 | left: 20px; 370 | width: 27px; 371 | height: 18px; 372 | } 373 | 374 | @media screen and (min-width: 999px) { 375 | .quotes__grid:first-child:before { 376 | -webkit-transform: none; 377 | transform: none; 378 | top: 37px; 379 | left: 50px; 380 | width: 60px; 381 | height: 45px; 382 | } 383 | } 384 | 385 | .quotes .quote { 386 | position: relative; 387 | z-index: 1; 388 | background-color: #20293b; 389 | padding: 30px 24px 24px 24px; 390 | border-radius: 5px; 391 | } 392 | 393 | @media screen and (min-width: 999px) { 394 | .quotes .quote { 395 | padding: 44px 24px 24px 24px; 396 | } 397 | } 398 | 399 | .quotes .quote__text { 400 | font-size: 0.65em; 401 | margin-bottom: 30px; 402 | } 403 | 404 | .quotes .quote__author { 405 | display: -ms-grid; 406 | display: grid; 407 | -ms-grid-columns: 40px 1fr; 408 | grid-template-columns: 40px 1fr; 409 | -ms-grid-rows: 20px 20px; 410 | grid-template-rows: 20px 20px; 411 | -webkit-column-gap: 14px; 412 | column-gap: 14px; 413 | } 414 | 415 | .quotes .quote__author-image { 416 | -ms-grid-column: 1; 417 | -ms-grid-column-span: 1; 418 | grid-column: 1 / span 1; 419 | -ms-grid-row: 1; 420 | -ms-grid-row-span: 2; 421 | grid-row: 1 / span 2; 422 | } 423 | 424 | .quotes .quote__author-image img { 425 | width: 100%; 426 | height: auto; 427 | border-radius: 50%; 428 | } 429 | 430 | .quotes .quote__author-name { 431 | font-size: 0.5em; 432 | font-weight: 700; 433 | } 434 | 435 | .quotes .quote__author-title { 436 | font-size: 0.5em; 437 | } 438 | 439 | .signup { 440 | position: absolute; 441 | background: transparent; 442 | width: 100%; 443 | -webkit-transform: translateY(-248px); 444 | transform: translateY(-248px); 445 | } 446 | 447 | .signup__block { 448 | border-radius: 10px; 449 | -webkit-box-shadow: 0px 12px 20px rgba(0, 0, 0, 0.2); 450 | box-shadow: 0px 12px 20px rgba(0, 0, 0, 0.2); 451 | background-color: #1b2330; 452 | padding: 45px 30px 45px 30px; 453 | text-align: center; 454 | } 455 | 456 | @media screen and (min-width: 699px) { 457 | .signup__block { 458 | padding: 45px 60px 45px 60px; 459 | } 460 | } 461 | 462 | @media screen and (min-width: 999px) { 463 | .signup__block { 464 | padding: 45px 80px 45px 80px; 465 | } 466 | } 467 | 468 | .signup__form { 469 | display: -ms-grid; 470 | display: grid; 471 | -ms-grid-columns: 1fr; 472 | grid-template-columns: 1fr; 473 | gap: 25px; 474 | margin-top: 35px; 475 | } 476 | 477 | @media screen and (min-width: 699px) { 478 | .signup__form { 479 | -ms-grid-columns: 1fr 200px; 480 | grid-template-columns: 1fr 200px; 481 | gap: 30px; 482 | margin-top: 40px; 483 | } 484 | } 485 | 486 | .footer { 487 | background-color: #0a1423; 488 | font-size: 1rem; 489 | padding-top: 200px; 490 | } 491 | 492 | .footer a:hover { 493 | text-decoration: underline; 494 | } 495 | 496 | .footer .container, .footer .container--small { 497 | display: -ms-grid; 498 | display: grid; 499 | grid-row-gap: 35px; 500 | grid-column-gap: 0px; 501 | -ms-grid-columns: 1fr; 502 | grid-template-columns: 1fr; 503 | grid-template-areas: "logo" "address" "contact" "links1" "links2" "social"; 504 | } 505 | 506 | @media screen and (min-width: 699px) { 507 | .footer .container, .footer .container--small { 508 | grid-column-gap: 25px; 509 | } 510 | } 511 | 512 | @media screen and (min-width: 999px) { 513 | .footer .container, .footer .container--small { 514 | grid-column-gap: 35px; 515 | -ms-grid-columns: 3fr 2fr 2fr 2fr auto; 516 | grid-template-columns: 3fr 2fr 2fr 2fr auto; 517 | -ms-grid-rows: 60px 1fr; 518 | grid-template-rows: 60px 1fr; 519 | grid-template-areas: "logo logo logo logo logo" "address contact links1 links2 social"; 520 | } 521 | } 522 | 523 | @media screen and (min-width: 1399px) { 524 | .footer .container, .footer .container--small { 525 | grid-column-gap: 60px; 526 | } 527 | } 528 | 529 | @media screen and (min-width: 999px) { 530 | .footer__logo { 531 | -ms-grid-row: 1; 532 | -ms-grid-column: 1; 533 | grid-area: logo; 534 | } 535 | } 536 | 537 | .footer__address { 538 | -ms-grid-row: 2; 539 | -ms-grid-column: 1; 540 | grid-area: address; 541 | display: -webkit-box; 542 | display: -ms-flexbox; 543 | display: flex; 544 | } 545 | 546 | .footer__address svg { 547 | -webkit-box-flex: 0; 548 | -ms-flex: 0 0 13px; 549 | flex: 0 0 13px; 550 | margin-top: 3px; 551 | margin-right: 20px; 552 | } 553 | 554 | .footer__contact { 555 | -ms-grid-row: 3; 556 | -ms-grid-column: 1; 557 | grid-area: contact; 558 | } 559 | 560 | @media screen and (min-width: 999px) { 561 | .footer__contact { 562 | -ms-grid-column-align: right; 563 | justify-self: right; 564 | } 565 | } 566 | 567 | .footer__contact a { 568 | font-size: 0.875rem; 569 | } 570 | 571 | .footer__contact-phone, .footer__contact-email { 572 | display: -webkit-box; 573 | display: -ms-flexbox; 574 | display: flex; 575 | } 576 | 577 | .footer__contact-phone { 578 | margin-bottom: 20px; 579 | } 580 | 581 | .footer__contact-phone svg { 582 | width: 18px; 583 | margin-right: 20px; 584 | } 585 | 586 | .footer__contact-email svg { 587 | width: 20px; 588 | margin-right: 20px; 589 | } 590 | 591 | .footer__links1 a, .footer__links2 a { 592 | display: block; 593 | margin-bottom: 20px; 594 | } 595 | 596 | .footer__links1 { 597 | -ms-grid-row: 4; 598 | -ms-grid-column: 1; 599 | grid-area: links1; 600 | } 601 | 602 | @media screen and (min-width: 999px) { 603 | .footer__links1 { 604 | -ms-grid-column-align: right; 605 | justify-self: right; 606 | } 607 | } 608 | 609 | .footer__links2 { 610 | -ms-grid-row: 5; 611 | -ms-grid-column: 1; 612 | grid-area: links2; 613 | } 614 | 615 | .footer__social { 616 | -ms-grid-row: 6; 617 | -ms-grid-column: 1; 618 | grid-area: social; 619 | -ms-grid-column-align: center; 620 | justify-self: center; 621 | } 622 | 623 | @media screen and (min-width: 699px) { 624 | .footer__social { 625 | -ms-grid-column-align: start; 626 | justify-self: start; 627 | } 628 | } 629 | 630 | .footer__social svg { 631 | width: 35px; 632 | height: 35px; 633 | border: 1px solid #ffffff; 634 | border-radius: 50%; 635 | padding: 8px; 636 | fill: #ffffff; 637 | margin-right: 16px; 638 | -webkit-transition: all 150ms ease-in-out; 639 | transition: all 150ms ease-in-out; 640 | } 641 | 642 | .footer__social svg:hover { 643 | background-color: rgba(255, 255, 255, 0.8); 644 | fill: #0a1423; 645 | } 646 | /*# sourceMappingURL=style.css.map */ -------------------------------------------------------------------------------- /css/style.css.map: -------------------------------------------------------------------------------- 1 | { 2 | "version": 3, 3 | "mappings": "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", 4 | "sources": [ 5 | "style.scss", 6 | "_variables.scss", 7 | "_global.scss", 8 | "_container.scss", 9 | "_forms.scss", 10 | "_header.scss", 11 | "_hero.scss", 12 | "_features.scss", 13 | "_productive.scss", 14 | "_quotes.scss", 15 | "_signup.scss", 16 | "_footer.scss" 17 | ], 18 | "names": [], 19 | "file": "style.css" 20 | } -------------------------------------------------------------------------------- /css/style.scss: -------------------------------------------------------------------------------- 1 | // Global 2 | @import "variables"; 3 | @import "global"; 4 | @import "container"; 5 | @import "forms"; 6 | 7 | // Sections 8 | @import "header"; 9 | @import "hero"; 10 | @import "features"; 11 | @import "productive"; 12 | @import "quotes"; 13 | @import "signup"; 14 | @import "footer"; 15 | -------------------------------------------------------------------------------- /images/bg-curvy-desktop.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /images/bg-curvy-mobile.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /images/bg-quotes.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/fem-fylo-dark/2c0e06ccd6ec7dbbdd7060e0420a146098286b99/images/bg-quotes.png -------------------------------------------------------------------------------- /images/facebook-f.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /images/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/fem-fylo-dark/2c0e06ccd6ec7dbbdd7060e0420a146098286b99/images/favicon-32x32.png -------------------------------------------------------------------------------- /images/icon-access-anywhere.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /images/icon-any-file.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /images/icon-arrow.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /images/icon-collaboration.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /images/icon-email.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /images/icon-location.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /images/icon-phone.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /images/icon-security.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /images/illustration-intro.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/fem-fylo-dark/2c0e06ccd6ec7dbbdd7060e0420a146098286b99/images/illustration-intro.png -------------------------------------------------------------------------------- /images/illustration-stay-productive.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/fem-fylo-dark/2c0e06ccd6ec7dbbdd7060e0420a146098286b99/images/illustration-stay-productive.png -------------------------------------------------------------------------------- /images/instagram.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /images/logo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /images/profile-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/fem-fylo-dark/2c0e06ccd6ec7dbbdd7060e0420a146098286b99/images/profile-1.jpg -------------------------------------------------------------------------------- /images/profile-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/fem-fylo-dark/2c0e06ccd6ec7dbbdd7060e0420a146098286b99/images/profile-2.jpg -------------------------------------------------------------------------------- /images/profile-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thecodercoder/fem-fylo-dark/2c0e06ccd6ec7dbbdd7060e0420a146098286b99/images/profile-3.jpg -------------------------------------------------------------------------------- /images/twitter.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | FEM Fylo Dark Landing Page 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 |
19 | 20 | Features 21 | Team 22 | Sign In 23 |
24 |
25 | 26 |
27 |
28 | 29 |

All your files in one secure location, accessible anywhere.

30 |

31 | Fylo stores all your most important files in one secure location. Access them wherever 32 | you need, share and collaborate with friends family, and co-workers. 33 |

34 | 35 |
36 |
37 | 38 |
39 |
40 |
41 |
42 | Access anywhere 43 |
44 |
45 | Access your files, anywhere 46 |
47 |
48 | The ability to use a smartphone, tablet, or computer to access your account means your files follow you everywhere. 49 |
50 |
51 |
52 |
53 | Security 54 |
55 |
56 | Security you can trust 57 |
58 |
59 | 2-factor authentication and user-controlled encryption are just a couple of the security features we allow to help secure your files. 60 |
61 |
62 |
63 |
64 | Collaboration 65 |
66 |
67 | Real-time collaboration 68 |
69 |
70 | Securely share files and folders with friends, family and colleagues for live collaboration. No email attachments required. 71 |
72 |
73 |
74 |
75 | Any file 76 |
77 |
78 | Store any type of file 79 |
80 |
81 | Whether you're sharing holidays photos or work documents, Fylo has you covered allowing for all file types to be securely stored and shared. 82 |
83 |
84 |
85 |
86 | 87 |
88 |
89 |
90 | Stay productive 91 |
92 |
93 |

Stay productive, wherever you are

94 |

95 | Never let location be an issue when accessing your files. Fylo has you covered for all of your file storage needs. 96 |

97 |

98 | Securely share files and folders with friends, family and colleagues for live collaboration. No email attachments required. 99 |

100 | See how Fylo works 101 |
102 |
103 |
104 | 105 |
106 |
107 |
108 |
109 | Fylo has improved our team productivity by an order of magnitude. Since making the switch our team has become a well-oiled collaboration machine. 110 |
111 |
112 |
113 | Satish Patel 114 |
115 |
Satish Patel
116 |
Founder & CEO, Huddle
117 |
118 |
119 |
120 |
121 | Fylo has improved our team productivity by an order of magnitude. Since making the switch our team has become a well-oiled collaboration machine. 122 |
123 |
124 |
125 | Satish Patel 126 |
127 |
Bruce McKenzie
128 |
Founder & CEO, Huddle
129 |
130 |
131 |
132 |
133 | Fylo has improved our team productivity by an order of magnitude. Since making the switch our team has become a well-oiled collaboration machine. 134 |
135 |
136 |
137 | Satish Patel 138 |
139 |
Iva Boyd
140 |
Founder & CEO, Huddle
141 |
142 |
143 |
144 |
145 | 146 |
147 |
148 | 158 |
159 |
160 | 161 | 200 | 201 | 202 | --------------------------------------------------------------------------------