├── .gitignore ├── design ├── desktop-design.jpg ├── desktop-preview.jpg └── mobile-design.jpg ├── images ├── favicon-32x32.png ├── icon-email.svg ├── bg-footer-top-mobile.svg ├── icon-phone.svg ├── bg-footer-top-desktop.svg ├── bg-section-bottom-mobile-1.svg ├── bg-section-top-mobile-1.svg ├── bg-section-top-desktop-1.svg ├── bg-section-bottom-mobile-2.svg ├── bg-section-bottom-desktop-1.svg ├── bg-section-top-mobile-2.svg ├── bg-section-top-desktop-2.svg ├── bg-section-bottom-desktop-2.svg ├── icon-messages.svg ├── icon-communities.svg ├── logo--white.svg ├── screen-mockups.svg ├── logo.svg ├── illustration-grow-together.svg ├── illustration-your-users.svg └── illustration-flowing-conversation.svg ├── style-guide.md ├── README.md ├── index.html └── styles.scss /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store -------------------------------------------------------------------------------- /design/desktop-design.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ceshine/huddle-landing-page-with-curved-sections/master/design/desktop-design.jpg -------------------------------------------------------------------------------- /design/desktop-preview.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ceshine/huddle-landing-page-with-curved-sections/master/design/desktop-preview.jpg -------------------------------------------------------------------------------- /design/mobile-design.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ceshine/huddle-landing-page-with-curved-sections/master/design/mobile-design.jpg -------------------------------------------------------------------------------- /images/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ceshine/huddle-landing-page-with-curved-sections/master/images/favicon-32x32.png -------------------------------------------------------------------------------- /images/icon-email.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /images/bg-footer-top-mobile.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /images/icon-phone.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /images/bg-footer-top-desktop.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /images/bg-section-bottom-mobile-1.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /images/bg-section-top-mobile-1.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /images/bg-section-top-desktop-1.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /images/bg-section-bottom-mobile-2.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /images/bg-section-bottom-desktop-1.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /images/bg-section-top-mobile-2.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /images/bg-section-top-desktop-2.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /images/bg-section-bottom-desktop-2.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /style-guide.md: -------------------------------------------------------------------------------- 1 | # Front-end Style Guide 2 | 3 | ## Layout 4 | 5 | The designs were created to the following widths: 6 | 7 | - Mobile: 375px 8 | - Desktop: 1440px 9 | 10 | ## Colors 11 | 12 | ### Primary 13 | 14 | - Pink: hsl(322, 100%, 66%) 15 | 16 | ### Neutral 17 | 18 | - Very Dark Cyan: hsl(192, 100%, 9%) 19 | - Very Pale Blue: hsl(207, 100%, 98%) 20 | 21 | ## Typography 22 | 23 | ### Headings 24 | 25 | - Family: [Poppins](https://fonts.google.com/specimen/Poppins) 26 | - Weights: 700 27 | 28 | ### Body 29 | 30 | - Family: [Open Sans](https://fonts.google.com/specimen/Open+Sans) 31 | - Weights: 400, 600, 700 32 | 33 | ## Icons 34 | 35 | For the social icons, you can use a font icon library. Some suggestions can be found below: 36 | 37 | - [Font Awesome](https://fontawesome.com/) 38 | - [IcoMoon](https://icomoon.io/) 39 | - [Ionicons](https://ionicons.com/) -------------------------------------------------------------------------------- /images/icon-messages.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /images/icon-communities.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Frontend Mentor - Huddle landing page with curved sections 2 | 3 | ![Header/intro section for the Huddle landing page with curved sections](./design/desktop-preview.jpg) 4 | 5 | ## Notes from Ceshine 6 | 7 | This is heavily based on [zuolizhu](https://github.com/zuolizhu/frontendmentor_challenges/tree/master/huddle-landing-page-with-curved-sections-master)'s solution. I converted its CSS file to SCSS, and made some simplification in class design. 8 | 9 | You'll need to compile `index.scss` into `index.css` for the page to work. For more details, please refer to [Sass: Install Sass](https://sass-lang.com/install). 10 | 11 | ## Welcome! 👋 12 | 13 | Thanks for checking out this front-end coding challenge. 14 | 15 | [Frontend Mentor](https://www.frontendmentor.io) challenges allow you to improve your skills in a real-life workflow. 16 | 17 | **To do this challenge, you need a basic understanding of HTML and CSS.** 18 | 19 | ## Where to find everything 20 | 21 | Your task is to build out the project to the designs inside the `/design` folder. You will find both a mobile and a desktop version of the design to work to. 22 | 23 | The designs are in JPG static format. This will mean that you'll need to use your best judgment for styles such as `font-size`, `padding` and `margin`. This should help train your eye to perceive differences in spacings and sizes. 24 | 25 | If you would like the Sketch file in order to see sizes etc, it is available to download from the challenge page. 26 | 27 | You will find all the required assets in the `/images` folder. The assets are already optimized. 28 | 29 | There is also a `style-guide.md` file, which contains the information you'll need, such as color palette and fonts. 30 | 31 | ## Building your project 32 | 33 | Feel free to use any workflow that you feel comfortable with. Below is a suggested process, but do not feel like you need to follow these steps: 34 | 35 | 1. Initialize your project as a public repository on [GitHub](https://github.com/). This will make it easier to share your code with the community if you need some help. If you're not sure how to do this, [have a read through of this Try Git resource](https://try.github.io/). 36 | 2. Configure your repository to publish your code to a URL. This will also be useful if you need some help during a challenge as you can share the URL for your project with your repo URL. There are a number of ways to do this, but we recommend using [ZEIT Now](http://bit.ly/fem-zeit). We've got more information about deploying your project with ZEIT below. 37 | 3. Look through the designs to start planning out how you'll tackle the project. This step is crucial to help you think ahead for CSS classes that you could create to make reusable styles. 38 | 4. Before adding any styles, structure your content with HTML. Writing your HTML first can help focus your attention on creating well-structured content. 39 | 5. Write out the base styles for your project, including general content styles, such as `font-family` and `font-size`. 40 | 6. Start adding styles to the top of the page and work down. Only move on to the next section once you're happy you've completed the area you're working on. 41 | 42 | ## Deploying your project 43 | 44 | As mentioned above, there are a number of ways to host your project for free. We recommend using [ZEIT Now](http://bit.ly/fem-zeit) as it's an amazing service and extremely simple to get set up with. If you'd like to use ZEIT, here are some steps to follow to get started: 45 | 46 | 1. [Sign up to ZEIT Now](http://bit.ly/fem-zeit-signup) and go through the onboarding flow, ensuring your GitHub account is connected by using their [ZEIT Now for GitHub](https://zeit.co/docs/v2/git-integrations/zeit-now-for-github) integration. 47 | 2. Connect your project to ZEIT Now from the ["Create a new project" page](https://zeit.co/new), using the "New Project From GitHub" button and selecting the project you want to deploy. 48 | 3. Once connected, every time you `git push`, ZEIT Now will create a new [deployment](https://zeit.co/docs/v2/platform/deployments) and the deployment URL will be shown on your [ZEIT Dashboard](https://zeit.co/dashboard). You will also receive an email for each deployment with the URL. 49 | 50 | ## Sharing your solution 51 | 52 | There are multiple places you can share your solution: 53 | 54 | 1. Submit it on the platform so that other users will see your solution on the site. Other users will be able to give you feedback, which could help improve your code for the next project. 55 | 2. Share your repository and live URL in the **#finished-projects** channel of the [Slack community](https://www.frontendmentor.io/slack). 56 | 3. Tweet [@frontendmentor](https://twitter.com/frontendmentor) and mention **@frontendmentor** including the repo and live URLs in the tweet. We'd love to take a look at what you've built and help share it around. 57 | 58 | ## Giving feedback 59 | 60 | Feedback is always welcome, so if you have any to give on this challenge please email hi[at]frontendmentor[dot]io. 61 | 62 | This challenge is completely free. Please share it with anyone who will find it useful for practice. 63 | 64 | **Have fun building!** 🚀 65 | -------------------------------------------------------------------------------- /images/logo--white.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 8 | 9 | 25 | 67 | 68 | 69 | -------------------------------------------------------------------------------- /images/screen-mockups.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /images/logo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 8 | 9 | Frontend Mentor | Huddle landing page with curved sections 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 |
19 |
20 |
21 |

Build The Community Your Fans Will Love

22 |

Huddle re-imagines the way we build 23 | communities. You have a voice, but so does your audience. Create 24 | connections with your users as you engage in genuine discussion.

25 | 26 |
27 | intro 28 | section mockup svg 29 |
30 |
31 |
32 |
33 |
34 | communities icon 36 |
37 |

1.4k+

38 |

Communities 39 | Formed

40 |
41 |
42 |
43 | messages icon 45 |
46 |

2.7m+

47 |

Messages 48 | Sent

49 |
50 |
51 | 52 |
53 |
54 |
55 |
56 |
57 | grow 59 | together 60 |
61 |
62 |

Grow Together

63 |

Generate meaningful discussions with 64 | your audience and build a strong, loyal community. Think of 65 | the insightful conversations you miss out on with a feedback 66 | form.

67 |
68 |
69 |
70 |
71 |
72 | 73 |
74 |
75 |
76 |
77 | flowing conversations 80 |
81 |
82 |

Flowing 83 | Conversations

84 |

You wouldn't paginate a conversation in 85 | real life, so why do it online? Our threads have just-in-time 86 | loading for a more natural flow.

87 |
88 |
89 |
90 |
91 | 92 |
93 |
94 |
95 |
96 |
97 | your users 99 |
100 |
101 |

Your Users

102 |

It takes no time at all to integrate 103 | Huddle with your app's authentication solution. This means, 104 | once signed in to your app, your users can start chatting 105 | immediately.

106 |
107 |
108 |
109 |
110 |
111 |
112 |

Ready To Build Your Community?

113 | 114 |
115 |
116 | 117 | 228 | 229 | -------------------------------------------------------------------------------- /styles.scss: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css?family=Open+Sans:400,600,700|Poppins:700&display=swap"); 2 | 3 | $font-sans: "Open Sans", sans-serif; 4 | $font-poppins: Poppins, sans-serif; 5 | $primary-color: hsl(322, 100%, 66%); 6 | $shadow-pink: rgba(255, 82, 193, 0.15); 7 | $dark-cyan: hsl(192, 100%, 9%); 8 | $pale-blue: hsl(207, 100%, 98%); 9 | $dark-green: #00252e; 10 | $white: #fff; 11 | $weight-regular: 400; 12 | $weight-semi-bold: 600; 13 | $weight-bold: 700; 14 | $transition: 300ms ease-in-out; 15 | $border-radius-5: 0.5rem; 16 | $border-radius-6: 0.6rem; 17 | $border-radius-11: 1.176rem; 18 | $border-radius-20: 2rem; 19 | $border-radius-40: 4rem; 20 | 21 | html { 22 | font-size: 62.5%; 23 | height: 100%; 24 | } 25 | 26 | body { 27 | font-family: $font-sans; 28 | font-size: 1.6rem; 29 | } 30 | 31 | h1, 32 | h2, 33 | h3, 34 | p { 35 | margin: 0; 36 | } 37 | 38 | button { 39 | background: none; 40 | border: none; 41 | &:hover { 42 | cursor: pointer; 43 | } 44 | } 45 | 46 | .button--pink { 47 | color: $white; 48 | font-weight: $weight-bold; 49 | background-color: $primary-color; 50 | line-height: 1.5; 51 | box-shadow: 0 0.6rem 1.3rem $shadow-pink; 52 | transition: $transition opacity, $transition transform, $transition box-shadow; 53 | &:hover { 54 | opacity: 0.9; 55 | transform: translateY(-2px); 56 | box-shadow: 0 0.3rem 2rem $shadow-pink; 57 | } 58 | @media (max-width: 639px) { 59 | font-size: 1.2rem; 60 | padding: 1.1rem 3.9rem 1.1rem 4rem; 61 | border-radius: $border-radius-20; 62 | } 63 | @media (min-width: 640px) { 64 | font-size: 2rem; 65 | padding: 2.5rem 9.9rem 2.5rem 10rem; 66 | border-radius: $border-radius-40; 67 | } 68 | } 69 | 70 | .button--subscribe { 71 | line-height: 1.5; 72 | font-size: 1.6rem; 73 | color: $white; 74 | font-weight: $weight-bold; 75 | background-color: $primary-color; 76 | padding: 1.2rem 4.1rem; 77 | border-radius: $border-radius-5; 78 | transition: $transition transform, $transition box-shadow; 79 | &:hover { 80 | transform: translateY(-2px); 81 | box-shadow: 0 0.3rem 2rem $shadow-pink; 82 | } 83 | } 84 | 85 | a { 86 | text-decoration: none; 87 | } 88 | 89 | header { 90 | display: flex; 91 | flex-direction: row; 92 | justify-content: space-between; 93 | align-items: center; 94 | margin: 0 auto; 95 | max-width: 129.7rem; 96 | .brand { 97 | display: inline-block; 98 | @media (max-width: 639px) { 99 | max-width: 9.6rem; 100 | } 101 | @media (min-width: 640px) { 102 | max-width: 24rem; 103 | } 104 | } 105 | @media (max-width: 639px) { 106 | padding: 2.4rem 2.4rem 0; 107 | } 108 | @media (min-width: 640px) { 109 | padding: 6.8rem 6.3rem 0 8rem; 110 | } 111 | 112 | .brand__logo { 113 | width: 100%; 114 | } 115 | 116 | .button--header { 117 | color: $primary-color; 118 | text-transform: capitalize; 119 | font-weight: $weight-regular; 120 | transition: $transition background-color, $transition color, 121 | $transition box-shadow, $transition transform; 122 | @media (max-width: 639px) { 123 | line-height: 1.382; 124 | font-size: 0.941rem; 125 | border: 0.59px solid $primary-color; 126 | border-radius: $border-radius-11; 127 | padding: 0.529rem 1.776rem 0.524rem 1.824rem; 128 | } 129 | @media (min-width: 640px) { 130 | font-size: 1.6rem; 131 | line-height: 1.375; 132 | border: 1px solid $primary-color; 133 | border-radius: $border-radius-20; 134 | padding: 0.9rem 3rem 0.9rem 3.1rem; 135 | } 136 | } 137 | .button--header:hover { 138 | background-color: $primary-color; 139 | color: $pale-blue; 140 | transform: translateY(-2px); 141 | box-shadow: 0 0.5rem 1rem $shadow-pink; 142 | } 143 | } 144 | 145 | /* Intro */ 146 | .intro { 147 | text-align: center; 148 | @media (max-width: 639px) { 149 | padding: 11.2rem 4rem 0; 150 | } 151 | @media (min-width: 640px) and (max-width: 1199px) { 152 | padding: 7.5rem 5rem 0; 153 | } 154 | @media (min-width: 1200px) { 155 | padding: 22.5rem 0rem 0; 156 | max-width: 101.6rem; 157 | margin: 0 auto; 158 | } 159 | 160 | .t-intro-heading { 161 | line-height: 1.5; 162 | font-weight: $weight-bold; 163 | font-family: $font-poppins; 164 | @media (max-width: 639px) { 165 | font-size: 2.4rem; 166 | } 167 | @media (min-width: 640px) { 168 | font-size: 4.8rem; 169 | } 170 | } 171 | 172 | .intro-body { 173 | margin-bottom: 4.8rem; 174 | @media (max-width: 639px) { 175 | margin-top: 2.4rem; 176 | } 177 | @media (min-width: 640px) { 178 | margin-top: 2.7rem; 179 | margin-left: auto; 180 | margin-right: auto; 181 | max-width: 62rem; 182 | } 183 | } 184 | 185 | .intro__image-container { 186 | @media (max-width: 639px) { 187 | margin-top: 10.4rem; 188 | } 189 | @media (min-width: 640px) { 190 | margin-top: 12rem; 191 | } 192 | .intro__image { 193 | width: 100%; 194 | } 195 | } 196 | 197 | .t-intro-body { 198 | line-height: 1.5; 199 | font-weight: $weight-regular; 200 | font-family: $font-sans; 201 | @media (max-width: 639px) { 202 | font-size: 1.4rem; 203 | } 204 | @media (min-width: 640px) { 205 | font-size: 2rem; 206 | } 207 | } 208 | } 209 | 210 | /* Statistic*/ 211 | .statistic { 212 | padding-top: 12rem; 213 | display: flex; 214 | justify-content: center; 215 | flex-direction: column; 216 | align-items: center; 217 | @media (max-width: 639px) { 218 | padding-bottom: 2.17rem; 219 | } 220 | @media (min-width: 640px) { 221 | flex-direction: row; 222 | align-items: center; 223 | justify-content: space-between; 224 | margin: 0 auto; 225 | max-width: 53rem; 226 | padding-bottom: 13.3rem; 227 | } 228 | @media (min-width: 1200px) { 229 | max-width: 88rem; 230 | } 231 | @media (max-width: 639px) { 232 | .communities { 233 | margin-bottom: 8.853rem; 234 | } 235 | } 236 | .statistic-image-icon { 237 | display: flex; 238 | } 239 | @media (max-width: 639px) { 240 | .statistic-image-icon__image { 241 | max-width: 2.8rem; 242 | } 243 | } 244 | .statistic-body { 245 | text-align: center; 246 | } 247 | 248 | .t-statistic-number { 249 | font-weight: $weight-bold; 250 | line-height: 1.5; 251 | @media (max-width: 639px) { 252 | font-size: 5.352rem; 253 | } 254 | @media (min-width: 640px) and (max-width: 1199px) { 255 | font-size: 6.7rem; 256 | } 257 | @media (min-width: 1200px) { 258 | font-size: 9.6rem; 259 | } 260 | } 261 | 262 | .t-statistic-body { 263 | color: var(--color-gray-blue); 264 | font-weight: var(--weight-regular); 265 | line-height: 1.5; 266 | @media (min-width: 1200px) { 267 | font-size: 2.4rem; 268 | } 269 | 270 | @media (max-width: 639px) { 271 | font-size: 1.338rem; 272 | } 273 | @media (min-width: 640px) and (max-width: 1199px) { 274 | font-size: 2rem; 275 | } 276 | @media (min-width: 1200px) { 277 | font-size: 2.4rem; 278 | } 279 | } 280 | } 281 | 282 | // section containers 283 | .section-image-container { 284 | margin: 0 auto; 285 | width: 74.667%; 286 | display: flex; 287 | align-items: center; 288 | justify-content: center; 289 | 290 | .section-image { 291 | width: 100%; 292 | } 293 | @media (min-width: 640px) { 294 | margin: 0; 295 | } 296 | @media (min-width: 640px) and (max-width: 1199px) { 297 | max-width: 36rem; 298 | .conversation-image-mb { 299 | margin-right: 2rem; 300 | } 301 | } 302 | 303 | @media (min-width: 1200px) { 304 | max-width: 56rem; 305 | } 306 | } 307 | 308 | .section-container { 309 | @media (max-width: 639px) { 310 | padding: 0 2.7rem; 311 | } 312 | @media (min-width: 640px) and (max-width: 1299px) { 313 | padding: 0 5rem; 314 | } 315 | 316 | @media (min-width: 1300px) { 317 | max-width: 120rem; 318 | margin: 0 auto; 319 | } 320 | .text-container { 321 | @media (min-width: 640px) and (max-width: 1039px) { 322 | max-width: 36rem; 323 | } 324 | @media (min-width: 1040px) { 325 | max-width: 52rem; 326 | } 327 | .section-heading { 328 | @media (max-width: 639px) { 329 | margin-bottom: 1.6rem; 330 | } 331 | @media (min-width: 640px) and (max-width: 869px) { 332 | margin-bottom: 1.8rem; 333 | } 334 | @media (min-width: 870px) { 335 | margin-bottom: 2.6rem; 336 | } 337 | } 338 | .t-section-heading { 339 | line-height: 1.5; 340 | font-family: $font-poppins; 341 | font-weight: $weight-bold; 342 | @media (max-width: 639px) { 343 | font-size: 2rem; 344 | } 345 | @media (min-width: 640px) and (max-width: 869px) { 346 | font-size: 2.4rem; 347 | } 348 | @media (min-width: 870px) { 349 | font-size: 4rem; 350 | } 351 | } 352 | .t-section-body { 353 | line-height: 1.5; 354 | font-weight: $weight-regular; 355 | @media (max-width: 639px) { 356 | font-size: 1.4rem; 357 | } 358 | @media (min-width: 640px) and (max-width: 869px) { 359 | font-size: 1.5rem; 360 | } 361 | @media (min-width: 870px) { 362 | font-size: 1.6rem; 363 | } 364 | } 365 | } 366 | } 367 | 368 | .section-inner-bg { 369 | background-color: $pale-blue; 370 | } 371 | 372 | //together 373 | .image-right { 374 | @media (max-width: 639px) { 375 | text-align: center; 376 | } 377 | @media (min-width: 640px) { 378 | text-align: left; 379 | .flex-box { 380 | display: flex; 381 | flex-direction: row-reverse; 382 | align-items: center; 383 | justify-content: space-between; 384 | } 385 | } 386 | .inner-padding { 387 | @media (max-width: 639px) { 388 | padding-top: 8.222rem; 389 | padding-bottom: 5.7rem; 390 | } 391 | @media (min-width: 640px) { 392 | padding-top: 6.8rem; 393 | padding-bottom: 4.6rem; 394 | } 395 | } 396 | @media (max-width: 639px) { 397 | .image-mb { 398 | margin-bottom: 7.5rem; 399 | } 400 | } 401 | 402 | @media (min-width: 640px) { 403 | .section-image { 404 | max-width: 51.722rem; 405 | } 406 | } 407 | 408 | &::before { 409 | content: " "; 410 | display: block; 411 | background-image: url("./images/bg-section-top-desktop-1.svg"); 412 | background-size: 100% 100%; 413 | height: 165px; 414 | width: 100%; 415 | 416 | @media (max-width: 639px) { 417 | background-image: url("./images/bg-section-top-mobile-1.svg"); 418 | background-size: 100% 100%; 419 | height: 112px; 420 | } 421 | } 422 | 423 | &::after { 424 | content: " "; 425 | display: block; 426 | background-image: url("./images/bg-section-bottom-desktop-1.svg"); 427 | background-size: 100% 100%; 428 | height: 165px; 429 | width: 100%; 430 | 431 | @media (max-width: 639px) { 432 | background-image: url("./images/bg-section-bottom-mobile-1.svg"); 433 | background-size: 100% 100%; 434 | height: 112px; 435 | } 436 | } 437 | } 438 | 439 | // Conversation 440 | .conversation { 441 | @media (max-width: 639px) { 442 | padding-top: 14rem; 443 | text-align: center; 444 | padding-bottom: 12rem; 445 | } 446 | @media (min-width: 640px) { 447 | text-align: left; 448 | padding-top: 19.5rem; 449 | padding-bottom: 11.1rem; 450 | } 451 | .conversation-image-mb { 452 | @media (max-width: 639px) { 453 | margin-bottom: 8.7rem; 454 | } 455 | } 456 | @media (min-width: 640px) { 457 | .conversation-flex-box { 458 | display: flex; 459 | flex-direction: row; 460 | align-items: center; 461 | justify-content: space-between; 462 | } 463 | .section-image--conversation { 464 | max-width: 53.1rem; 465 | } 466 | } 467 | } 468 | 469 | /* Call to action */ 470 | .call-to-action { 471 | text-align: center; 472 | @media (max-width: 639px) { 473 | padding-top: 6.4rem; 474 | padding-bottom: 25rem; 475 | } 476 | @media (min-width: 640px) { 477 | padding-top: 16rem; 478 | padding-bottom: 18.5rem; 479 | } 480 | .cta-heading { 481 | @media (max-width: 639px) { 482 | margin-bottom: 4rem; 483 | } 484 | @media (min-width: 640px) { 485 | margin-bottom: 4.2rem; 486 | } 487 | } 488 | .t-cta-heading { 489 | line-height: 1.5; 490 | font-weight: $weight-bold; 491 | font-family: $font-poppins; 492 | @media (max-width: 769px) { 493 | font-size: 2.4rem; 494 | } 495 | @media (min-width: 770px) { 496 | font-size: 4rem; 497 | } 498 | } 499 | } 500 | 501 | // Footer 502 | .footer { 503 | color: $white; 504 | .inner-padding { 505 | @media (max-width: 1199px) { 506 | padding-top: 5.7rem; 507 | padding-right: 2.8rem; 508 | padding-bottom: 4.6rem; 509 | padding-left: 2.8rem; 510 | } 511 | 512 | @media (min-width: 1200px) { 513 | padding-top: 12.2rem; 514 | padding-right: 12rem; 515 | padding-bottom: 10.3rem; 516 | padding-left: 12rem; 517 | } 518 | } 519 | 520 | .footer-content { 521 | background-color: $dark-green; 522 | .footer-flex-box { 523 | display: flex; 524 | justify-content: space-between; 525 | @media (max-width: 1119px) { 526 | flex-direction: column; 527 | } 528 | @media (min-width: 1200px) { 529 | flex-direction: row-reverse; 530 | 531 | max-width: 120rem; 532 | margin: 0 auto; 533 | } 534 | 535 | .subscribe { 536 | @media (max-width: 1199px) { 537 | margin-bottom: 10.4rem; 538 | } 539 | @media (min-width: 580px) { 540 | min-width: 52rem; 541 | max-width: 52rem; 542 | } 543 | } 544 | 545 | .information { 546 | .footer-logo { 547 | @media (max-width: 639px) { 548 | max-width: 20rem; 549 | margin-bottom: 1.6rem; 550 | } 551 | @media (min-width: 640px) { 552 | max-width: 24rem; 553 | margin-bottom: 2.7rem; 554 | } 555 | } 556 | .footer-contact { 557 | display: flex; 558 | flex-direction: row; 559 | align-items: center; 560 | &:nth-child(1) { 561 | margin-bottom: 1.6rem; 562 | } 563 | @media (max-width: 639px) { 564 | margin-top: 4rem; 565 | margin-bottom: 4.8rem; 566 | } 567 | @media (min-width: 640px) { 568 | margin-top: 2.4rem; 569 | margin-bottom: 8rem; 570 | } 571 | .footer-icon--contact { 572 | margin-right: 1.85rem; 573 | } 574 | } 575 | .t-footer-body { 576 | font-weight: var(--weight-regular); 577 | font-size: 1.4rem; 578 | line-height: 1.714; 579 | } 580 | .t-footer-body--semi-bold { 581 | font-weight: var(--weight-semi-bold); 582 | } 583 | @media (min-width: 640px) { 584 | .footer-body { 585 | max-width: 34rem; 586 | } 587 | } 588 | .socials { 589 | display: flex; 590 | align-items: center; 591 | .social { 592 | cursor: pointer; 593 | @media (max-width: 639px) { 594 | width: 2.3rem; 595 | } 596 | @media (min-width: 640px) { 597 | width: 3.2rem; 598 | } 599 | &:not(:last-child) { 600 | margin-right: 1.733rem; 601 | } 602 | @media (min-width: 640px) { 603 | &:not(:last-child) { 604 | margin-right: 2.4rem; 605 | } 606 | } 607 | } 608 | } 609 | 610 | .social__icon { 611 | transition: var(--transition) color, var(--transition) box-shadow; 612 | } 613 | .social:hover .social__icon { 614 | color: var(--color-pink); 615 | box-shadow: 0 0.3rem 5rem var(--color-pink); 616 | } 617 | } 618 | 619 | .subscribe { 620 | @media (max-width: 1199px) { 621 | margin-bottom: 10.4rem; 622 | } 623 | 624 | @media (min-width: 580px) { 625 | min-width: 52rem; 626 | max-width: 52rem; 627 | } 628 | .t-subscribe-heading { 629 | font-weight: var(--weight-bold); 630 | line-height: 1.5; 631 | text-transform: uppercase; 632 | @media (max-width: 639px) { 633 | font-size: 2rem; 634 | } 635 | @media (min-width: 640px) { 636 | font-size: 2.4rem; 637 | } 638 | } 639 | 640 | .t-subscribe-body { 641 | font-weight: var(--weight-semi-bold); 642 | line-height: 1.714; 643 | font-size: 1.4rem; 644 | } 645 | .subscribe-body { 646 | margin-top: 1.6rem; 647 | @media (max-width: 1199px) { 648 | margin-bottom: 3.2rem; 649 | } 650 | @media (min-width: 1200px) { 651 | max-width: 34.4rem; 652 | margin-bottom: 4rem; 653 | } 654 | } 655 | .input-field { 656 | display: flex; 657 | justify-content: space-between; 658 | @media (max-width: 580px) { 659 | flex-direction: column; 660 | align-items: flex-end; 661 | } 662 | .email__input { 663 | background-color: $white; 664 | border-radius: $border-radius-6; 665 | height: 4.8rem; 666 | font-size: 1.6rem; 667 | padding-left: 1.2rem; 668 | color: $dark-cyan; 669 | @media (max-width: 374px) { 670 | width: 100%; 671 | } 672 | @media (min-width: 375px) { 673 | width: 32rem; 674 | } 675 | @media (max-width: 580px) { 676 | margin-bottom: 1.6rem; 677 | } 678 | } 679 | } 680 | } 681 | } 682 | 683 | .footer-icon { 684 | display: flex; 685 | flex-direction: row; 686 | align-items: center; 687 | } 688 | 689 | .attribution { 690 | font-size: 1.2rem; 691 | text-align: center; 692 | margin-top: 5rem; 693 | } 694 | } 695 | 696 | &::before { 697 | content: " "; 698 | display: block; 699 | background-image: url("./images/bg-footer-top-desktop.svg"); 700 | background-size: 100% 100%; 701 | height: 158px; 702 | width: 100%; 703 | 704 | @media (max-width: 639px) { 705 | background-image: url("./images/bg-footer-top-mobile.svg"); 706 | background-size: 100% 100%; 707 | height: 53px; 708 | } 709 | } 710 | } 711 | -------------------------------------------------------------------------------- /images/illustration-grow-together.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /images/illustration-your-users.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /images/illustration-flowing-conversation.svg: -------------------------------------------------------------------------------- 1 | --------------------------------------------------------------------------------