Frontend Mentor - Huddle landing page with curved sections solution

This is a solution to the Huddle landing page with curved sections challenge on Frontend Mentor.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author
• Acknowledgments

Overview

The challenge

Users should be able to:

• View the optimal layout for the site depending on their device's screen size
• See hover states for all interactive elements on the page

Screenshot

Links

• Solution URL: FrontendMentor.io
• Live Site URL: Vercel

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS Grid
• Mobile-first workflow
• tailwindcss - CSS library

What I learned

Use of FontAwesome icons:

<div class="flex flex-nowrap space-x-4 py-12 lg:pl-24">
  <div class="hover:text-sky-400 hover:cursor-pointer">
    <i class="fab fa-facebook-square fa-2x"></i>
  </div>
  <div class="hover:text-sky-400 hover:cursor-pointer">
    <i class="fab fa-instagram fa-2x"></i>
  </div>
  <div class="hover:text-sky-400 hover:cursor-pointer">
    <i class="fab fa-twitter-square fa-2x"></i>
  </div>
</div>

Customizing TailwindCSS theme:

module.exports = {
  content: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"],
  theme: {
    extend: {
      fontFamily: {
        openSans: ["Open Sans", "sans-serif"],
        poppins: ["Poppins", "sans-serif"],
      },
      colors: {
        pink: "hsl(322, 100%, 66%)",
        lightPink: "hsl(321, 100%, 78%)",
        lightRed: "hsl(0, 100%, 63%)",
        veryDarkCyan: "hsl(192, 100%, 9%)",
        veryPaleBlue: "hsl(207, 100%, 98%)",
      },
      backgroundImage: {
        bgfootertopdesktop: "url('images/bg-footer-top-desktop.svg')",
        bgfootertopmobile: "url('images/bg-footer-top-mobile.svg')",
        bgsectionbottomdesktop1:
          "url('images/bg-section-bottom-desktop-1.svg')",
        bgsectionbottomdesktop2:
          "url('images/bg-section-bottom-desktop-2.svg')",
        bgsectionbottommobile1: "url('images/bg-section-bottom-mobile-1.svg')",
        bgsectionbottommobile2: "url('images/bg-section-bottom-mobile-2.svg')",
        bgsectiontopdesktop1: "url('images/bg-section-top-desktop-1.svg')",
        bgsectiontopdesktop2: "url('images/bg-section-top-desktop-2.svg')",
        bgsectiontopmobile1: "url('images/bg-section-top-mobile-1.svg')",
        bgsectiontopmobile2: "url('images/bg-section-top-mobile-2.svg')",
      },
      backgroundPosition: {
        mytop: "top -2rem",
      },
    },
  },
  plugins: [],
};

Continued development

Future projects will be developed using Vue.JS when interactivity must be included.

Useful resources

• TailwindCSS Directives - Use of @apply directive
• Form states - Style form elements in different states using modifiers like required, invalid, and disabled.
• Customizing Colors in TailwindCSS - Adding personalized color names to be used in tailwindcss.
• Customizing Fonts in TailwindCSS - Adding Google fonts to be used in tailwindcss.

Author

• Website - Gustavo Sanchez
• Frontend Mentor - @gusanchedev
• Github - @gusanchedev
• Twitter - @gusanchedev
• Linkedin - gusanchedev

Acknowledgments

Thanks to Mariapaz for being my friend and support 💙