Iris

This is a solution to the Sunnyside agency landing page challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

• Overview
  • Features
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Useful resources
• Author
• Acknowledgments

Overview

Features

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

• Live Site URL: Iris

My process

Built with

• Semantic HTML5 markup
• Flexbox
• CSS Grid
• Mobile-first workflow
• Tailwind - css framework
• Gsap - javascript animation library

What I learned

<h1
  class="text-2xl md:text-6xl mb-6 uppercase tracking-widest font-Fraunces font-[900] py-4"
>
  We are creatives
</h1>

@tailwind base;
@tailwind components;
@tailwind utilities;

Continued development

In this project, I started my journey on knowing and mastering tailwind css. I would love to keep experimenting with it.

Useful resources

• Responsitivity - This helped me responsive design in tailwind. I'd recommend it to anyone still learning this concept.
• Traversy media tailwind crash course - This helped me get a quick start in using the framework from installation to complete usage.

Author

• Frontend Mentor - @Aahil13
• Twitter - @OnyeanunaE

Acknowledgments

I want to appreciate Traversy media for his help and support. His crash course was a huge help.