Front-End Mentor: Landing page usando ReactJS + Styled Components

Last update: Feb 14, 2022

Front-End Mentor: Fylo Landing Page

O projeto se trata de um desafio disponível no site Front-End Mentor.
A ideia é desenvolver um código que se aproxime o máximo possível do design proposto no desafio.


🦄 Como foi feito?

Para realização desse projeto foi usado ReactJS + SmoothScroll e Hooks como: useState e useEffect.
Para estilização foi utilizado styled components.


💫 Tecnologias

As seguintes ferramentas foram usadas na construção do projeto:

  • 🚀 React
  • 💻 JavaScript
  • 🎨 Styled Components

Confira a página no link abaixo:

https://frontendmentor-landing-page.netlify.app/


Caso você queira analisar o projeto em sua máquina, siga o passo a passo:


🤍 Clone o repositório:

https://github.com/laoliveir/landing-page.git

💙 Acesse o diretório:

cd <nome-do-diretorio>

💚 Instale as dependências:

npm install

🧡 Inicie a aplicação:

npm start

💛 O projeto fica na porta:

http://localhost:3000/

📱 💻 🖥️ Imagens do projeto:



👩‍💻 Autora:

Feito com ❤️ por Larissa Oliveira

👋 Entre em contato!

Linkedin Badge

Gmail Badge

GitHub

https://github.com/laoliveir/landing-page
You might also like...

A react component available on npm to easily link to your project on github and is made using React, TypeScript and styled-components.

fork-me-corner is a react component available on npm to easily link to your project on github and is made using React, TypeScript and styled-components.

Feb 27, 2022

Flexibly styled chat-widget for your react apps.

Flexibly styled chat-widget for your react apps.

Flexibly styled chat-widget for your react apps. It was mainly created for integration with chat-bots in messengers.

Jun 11, 2021

A styled switch for React built using Emotion CSS and Framer motion

A styled switch for React built using Emotion CSS and Framer motion

A styled switch for React built using Emotion CSS and Framer motion

Aug 27, 2021

A terminal style/styled portfolio website made with 3 using react.

A Terminal Styled Portfolio Website. 🐱‍💻, a terminal style/styled portfolio website made with 3 using react.

May 14, 2022

I had cloned my Instagram profile UI using ReactJS.

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

Nov 8, 2021

Seamless mapping of class names to CSS modules inside of React components.

Seamless mapping of class names to CSS modules inside of React components.

React CSS Modules React CSS Modules implement automatic mapping of CSS modules. Every CSS class is assigned a local-scoped identifier with a global un

May 7, 2022

Style your React components with simplicity using css inside your comments.

Style your React components with simplicity using css inside your comments.

Oct 12, 2021

Encapsulated styling for your javascript components with all the power of javascript and CSS combined.

Stilr Encapsulated styling for your javascript components with all the power of javascript and CSS combined. Unique class names (Content Hash Based) U

May 7, 2021

Incredible fast template toolkit for making new or re-styling existing components with Tailwind CSS.

Stail Incredible fast template toolkit for making new or re-styling existing components with Tailwind CSS. Why it's needed? First of all, I'm tired fr

Jan 25, 2022
Imersão React.js 3º edição. Project using ReactJS, Next JS, and Styled Components for the week challenge by Alura. We created a social network inspired by Orkut.

Example app with styled-components This example features how you use a different styling solution than styled-jsx that also supports universal styles.

Jul 19, 2021
Create tailwind css react components like styled components with classes name on multiple lines

Create Tailwind CSS React components like styled components with class names on multiple lines and conditional class rendering

May 11, 2022
Typograpy components for react and styled-components
Typograpy components for react and styled-components

styled-typography Typograpy components for react and styled-components styled-typography is a small set of components, using styled-components, to bet

May 1, 2022
Minimal and performant React component library built on styled-components

Minimal and performant React component library built on styled-components

Jan 3, 2022
🔧 💅 Jest utilities for Styled Components

Jest Styled Components A set of utilities for testing Styled Components with Jest. This package improves the snapshot testing experience and provides

May 10, 2022
Simples Projeto Desenvolvido durante o programa DevInHouse do SENAI-SC, com o intúito de desenvolver um formulário em React utilizando Styled Components
Simples Projeto Desenvolvido durante o programa DevInHouse do SENAI-SC, com o intúito de desenvolver um formulário em React utilizando Styled Components

Simple Styled Form Simples Projeto Desenvolvido durante o programa DevInHouse do SENAI-SC, com o intúito de desenvolver um formulário em React utiliza

Oct 29, 2021
The simplest solution for content loading in React and styled-components.

styled-content-loader The simplest solution for content loading in React and styled-components. Getting Started npm install styled-components styled-c

Jul 13, 2021
Simple Portfolio Using React Hooks & Styled Components
Simple Portfolio Using React Hooks & Styled Components

Said MOUNAIM To view a live example, click here. Getting Started These instructi

Mar 20, 2022
🎥A criação de uma UI para Streaming utilizando React.js, Styled Components junto com Sass.
🎥A criação de uma UI para Streaming utilizando React.js, Styled Components junto com Sass.

Movie Screen - Exercitando React, Styled Components e Sass ??️ Dependencias React Styled Components Sass React Icons ?? Objetivo O principal intuito d

Dec 28, 2021
Styled Components for React Native the way they should have been.

?? Styled-RN Styled Components for React Native the way they should have been. Inspired by this article Intro Why ?? styled-rn it better than ???? sty

Apr 1, 2022