Natura is a women-only gym that provides a safe, supportive environment for women of all shapes, sizes, and fitness levels

Overview

Natura | For The Woman Who Wants It All

View Live Site

Natura is a women-only gym that provides a safe, supportive environment for women of all shapes, sizes, and fitness levels. Their goal is to help women feel confident and comfortable in their own skin, and to encourage them to lead healthy, active lifestyles.

Screenshot of home page

Description

This project is for Natura, a modern website for a women-only gym, that is fully responsive and was built with React and styled with CSS Modules.

Natura is a fictional women-only gym that was founded with the goal of providing a safe and welcoming environment for women to pursue their fitness goals. They saw how many women felt uncomfortable in traditional gyms, and they wanted to create a space where women could feel safe and supported while working on their health and fitness goals.

Motivation

I wanted to build a website for a women only gym to practice my skills with React and to put my design skills to the test. I think it's important for women to have their own space to work out and feel comfortable, and I wanted to create a website that would reflect that.

I wanted to create something unique that would grab attention and be visually appealing.I am motivated by my desire to learn and create something not only useful but also beautiful, hence the creation of this website.

Tools and Technologies

Natura was built using:

  • React
  • React Router Dom & React Router HashLink
  • React Icons

Design File

Figma Design File

Installation

To install this project, clone the repository and run the following commands:

npm install
npm run dev or npm run dev -- --host

This will install all the dependencies and start the development server. This project was bootstrapped with Vite and so the project will be available at http://localhost:5173.

Screenshot of Project

Screenshot of the entire page

You might also like...

This is an application that allows users to create a workouts to eliminate any gym anxiety.

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

Apr 6, 2022

💪 Reserve machine/rack/bench usage at a gym to minimize waiting times.

💪 Reserve machine/rack/bench usage at a gym to minimize waiting times.

Gym Reservation App 💪 Oscar Su, Amelia Reeves, Nathan Ma Possible name: Pump Program The goal is to reduce/eliminate the time spent waiting on others

Jul 8, 2022

Cloudy is a set of constructs for the AWS Cloud Development Kit that aim to improve the DX by providing a faster and type-safe code environment.

cloudy-ts These packages aren't yet published on npm. This is still highly experimental. Need to figure out a few things before releasing the first ve

Nov 3, 2022

🔑 Loads environment variables from .env for nodejs projects with safe

env-safe env-safe is module that loads that loads environment variables from a .env file into process.env with type-safe. And can also validate the ty

Dec 28, 2022

mirrord lets you easily mirror traffic from your production environment to your development environment.

mirrord lets you easily mirror traffic from your production environment to your development environment.

mirrord lets you easily mirror traffic from your Kubernetes cluster to your development environment. It comes as both Visual Studio Code extension and a CLI tool.

Dec 24, 2022

👕 The project is an E-Commerce called DevShop that simulates a sales site which has men's and women's clothing, jewelry and electronics.

👕 The project is an E-Commerce called DevShop that simulates a sales site which has men's and women's clothing, jewelry and electronics.

DEVSHOP • E-COMMERCE O projeto é um E-Commerce chamado DevShop que simula um site de vendas a qual possui roupas masculinas, femininas, joalherias e e

Sep 19, 2022

women who code - object oriented programming exercise

Table of contents General info Technologies Setup General info Authorizer APP Technologies Project is created with: Typescript: 4.2 Setup Requirements

Oct 1, 2022

This is the website of Women in tech++.

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

Oct 11, 2022

A Browser extension that not only makes your browsing experience safe but makes it optimized

A Browser extension that not only makes your browsing experience safe but makes it optimized

Sia Sia is a browser extension that not only makes your browsing experience safe but makes it optimized Table of Contents About The Project Built With

Feb 23, 2022
Owner
Monique
A passionate Frontend/React Developer committed to creating functional and beautiful websites and UI/UX designs.
Monique
Grupprojekt för kurserna 'Javascript med Ramverk' och 'Agil Utveckling'

JavaScript-med-Ramverk-Laboration-3 Grupprojektet för kurserna Javascript med Ramverk och Agil Utveckling. Utvecklingsguide För information om hur utv

Svante Jonsson IT-Högskolan 3 May 18, 2022
Hemsida för personer i Sverige som kan och vill erbjuda boende till människor på flykt

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

null 4 May 3, 2022
Kurs-repo för kursen Webbserver och Databaser

Webbserver och databaser This repository is meant for CME students to access exercises and codealongs that happen throughout the course. I hope you wi

null 14 Jan 3, 2023
A simple calculator for how many units of insulin to take with a meal depending on current and target blood sugar levels.

Insulin-Calculator One of my first programs, made to try building javascript-read HTML forms. A simple calculator for how many units of insulin to tak

Athena 1 Dec 26, 2021
VanillaSelectBox - A dropdown menu with lots of features that takes a select tag and transforms it into a single or multi-select menu with 1 or 2 levels

vanillaSelectBox v1.0.0 vanillaSelectBox : v1.00 : Adding a package.json file New : Possibility to change the dropdown tree and change the remote sear

philippe MEYER 103 Dec 16, 2022
Fitness Platform with authentication and more (still in development) 🏋️‍♂️🏋️

LB Fitness readme Fitness platform with authentication containing workout plans, diet and blogs. Explore the docs » View Demo Table of Contents About

Lucas Bendix Jolibois 10 Dec 19, 2022
E-commerce for fitness and sports equipment

Fitnest E-commerce for fitness and sports equipment. References https://topscore.id https://decathlon.co.id Links Frontend Production: https://fitnest

null 3 Oct 23, 2022
Interactive To Do List, draggable tasks, optimized for desktop and mobile screen sizes. It reserves data in local storage. Built with HTML, CSS, and JavaScript.

To Do List Interactive daily To-Do List Built With Major languages: html, css, javascript Frameworks: Technologies used: Webpack Live Demo Live Demo L

Jafar Yousef 6 Aug 4, 2022
Framework agnostic CLI tool for routes parsing and generation of a type-safe helper for safe route usage. 🗺️ Remix driver included. 🤟

About routes-gen is a framework agnostic CLI tool for routes parsing and generation of a type-safe helper for safe route usage. Think of it as Prisma,

Stratulat Alexandru 192 Jan 2, 2023
Gym Project to Learn ASP.NET Core

OneFitnessVue Gym Project to Learn ASP.NET Core. Read the Documentation » ⚡️ This is Sample Project Which Does not Contain All Features. ?? Buy Comple

Saineshwar Bageri 31 Jan 3, 2023