Everyone is aware of a Material UI website’s design. where users can learn how to use MUI components to build a website header navigation bar by utilizing the App bar component and Routing so that users can jump from one page to another page.
We learn How To Make a Material UI Website Using React JS | Website Design In React JS in a very easy way. This tutorial covers everything you need to know to make this website by using MUI. Let’s begin To Build this website.
Project Structure
Before starting this project these are the packages you have to install and download the assets.
Download Assets Link :
These are npm packages :
React Router Dom : npm i react-router-dom
Material UI : npm install @mui/material @emotion/react @emotion/styled
Material Icon : npm install @mui/icons-material @mui/material @emotion/styled @emotion/react
Layout Folder consists of two files one is Layout.js and another is Navbar.js in the Layout.js file we will handle all the scenarios that involve common layouts. and Also involves the Navbar.js files we will design the navigation bar like this :
Let’s Make the first Layout folder their structure will look like this
Layout.js
import React from 'react'
import Navbar from './Navbar'
const Layout = ({children}) => {
return (
<>
<Navbar/>
<div>
{children}
</div>
</>
)
}
export default Layout
Navbar.js
In the Navbar.js file, we will write the navigation barcode.
import * as React from 'react';
import PropTypes from 'prop-types';
import AppBar from '@mui/material/AppBar';
import Box from '@mui/material/Box';
import CssBaseline from '@mui/material/CssBaseline';
import Divider from '@mui/material/Divider';
import Drawer from '@mui/material/Drawer';
import IconButton from '@mui/material/IconButton';
import List from '@mui/material/List';
import ListItem from '@mui/material/ListItem';
import ListItemButton from '@mui/material/ListItemButton';
import ListItemText from '@mui/material/ListItemText';
import MenuIcon from '@mui/icons-material/Menu';
import Toolbar from '@mui/material/Toolbar';
import Typography from '@mui/material/Typography';
import Button from '@mui/material/Button';
// import Logo from '../Images/qq.png'
import Paper from '@mui/material/Paper';
import Grid from '@mui/material/Grid';
import { styled } from '@mui/material/styles';
import '../Styles/Navbar.css'
import { Link } from 'react-router-dom';
const drawerWidth = 240;
const navItems = ['Home', 'Careers', 'Blog', 'About Us'];
function Navbar(props) {
const { window } = props;
const [mobileOpen, setMobileOpen] = React.useState(false);
const handleDrawerToggle = () => {
setMobileOpen((prevState) => !prevState);
};
const drawer = (
<Box onClick={handleDrawerToggle} sx={{ textAlign: 'center', borderBottom: '1px solid #dad9dc' }}>
<svg width="63" height="38" viewBox="0 0 63 38" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M54.0087 34.8029L54.0087 18.9383C54.0087 18.9383 41.7705 20.4987 31.2334 25.7239C20.6962 20.4987 8.45805 18.9383 8.45805 18.9383L8.45805 34.8029C4.86693 35.6067 1.96095 36.5761 2.41136e-09 37.6873C6.61524 35.6067 18.121 34.2118 31.2097 34.2118C44.2985 34.2118 55.8043 35.5831 62.4195 37.6873C60.4822 36.5761 57.5998 35.6067 54.0087 34.8029Z" fill="#0B7077" />
<path d="M11.7893 17.2359L11.7893 19.482C16.1365 20.3095 24.0747 22.1537 31.2334 25.7238C22.7753 19.0801 11.7893 17.2359 11.7893 17.2359Z" fill="#0B7077" />
<path d="M50.701 17.2359C50.701 17.2359 39.715 19.0801 31.257 25.7238C38.4156 22.1773 46.3539 20.3095 50.701 19.482L50.701 17.2359Z" fill="#0B7077" />
<path d="M31.257 17.4486C30.8081 18.4416 30.123 19.3164 29.3197 20.0021L31.2334 23.3358L33.1943 20.0021C32.3674 19.3164 31.7059 18.4416 31.257 17.4486Z" fill="#0B7077" />
<path d="M25.4452 14.9662C26.721 14.9662 27.7841 13.9259 27.7841 12.6255C27.7841 11.3488 26.7446 10.2849 25.4452 10.2849C24.1694 10.2849 23.1062 11.3251 23.1062 12.6255C23.1062 13.9259 24.1457 14.9662 25.4452 14.9662ZM24.6655 10.9941C25.1617 10.9941 25.5633 11.3961 25.5633 11.8926C25.5633 12.3891 25.1617 12.791 24.6655 12.791C24.1694 12.791 23.7677 12.3891 23.7677 11.8926C23.7677 11.3961 24.1694 10.9941 24.6655 10.9941Z" fill="#0B7077" />
<path d="M34.7064 12.6255C34.7064 13.9023 35.746 14.9662 37.0218 14.9662C38.2975 14.9662 39.3607 13.9259 39.3607 12.6255C39.3607 11.3488 38.3212 10.2849 37.0218 10.2849C35.7696 10.3085 34.7064 11.3488 34.7064 12.6255ZM37.3053 11.8926C37.3053 12.3891 36.9036 12.791 36.4075 12.791C35.9113 12.791 35.5097 12.3891 35.5097 11.8926C35.5097 11.3961 35.9113 10.9941 36.4075 10.9941C36.9036 10.9941 37.3053 11.3961 37.3053 11.8926Z" fill="#0B7077" />
<path d="M20.9798 17.2122C22.1375 18.3471 23.7204 19.0328 25.4451 19.0328C27.9967 19.0328 30.2175 17.5196 31.257 15.3444C32.2729 17.5196 34.4938 19.0328 37.069 19.0328C38.8173 19.0328 40.3766 18.3235 41.5343 17.2122C42.0304 17.9215 42.4557 18.6781 42.8101 19.4583C44.2513 18.9145 45.5743 18.5126 46.732 18.1816C45.9759 16.6211 44.7946 15.2262 43.3062 14.044C43.4007 13.5948 43.4716 13.0983 43.4716 12.6255C43.4716 11.6797 43.259 10.7813 42.8809 9.95378C42.4321 8.62976 41.7469 7.40031 40.8728 6.31273L40.8255 -3.22089e-09L35.5806 2.45889C34.2103 1.93874 32.7455 1.67867 31.257 1.67867C29.7686 1.67867 28.3038 1.93874 26.9335 2.45889L21.6649 -7.56605e-10L21.6177 6.31273C20.7672 7.40031 20.082 8.60611 19.6331 9.90649C19.2551 10.734 19.0188 11.6561 19.0188 12.6255C19.0188 13.122 19.0661 13.5948 19.1842 14.044C17.6958 15.2262 16.5381 16.6211 15.7821 18.1816C16.9161 18.5126 18.2628 18.9382 19.704 19.4583C20.0584 18.6781 20.4836 17.9215 20.9798 17.2122ZM42.1013 12.6255C42.1013 15.4153 39.8332 17.6851 37.0454 17.6851C34.2575 17.6851 31.9894 15.4153 31.9894 12.6255C31.9894 9.83556 34.2575 7.56582 37.0454 7.56582C39.8332 7.58946 42.1013 9.8592 42.1013 12.6255ZM31.2334 3.02633C34.4465 3.02633 37.3761 4.42127 39.3843 6.66737C38.6519 6.38366 37.8486 6.21816 37.0217 6.21816C34.4701 6.21816 32.2493 7.73132 31.2098 9.90649C30.1939 7.73132 27.973 6.21816 25.3978 6.21816C24.5709 6.21816 23.7676 6.38366 23.0589 6.66737C25.1143 4.42127 28.0203 3.02633 31.2334 3.02633ZM25.4451 7.58946C28.2329 7.58946 30.501 9.8592 30.501 12.6491C30.501 15.439 28.2329 17.7087 25.4451 17.7087C22.6572 17.7087 20.3891 15.439 20.3891 12.6491C20.3891 9.8592 22.6572 7.58946 25.4451 7.58946Z" fill="#0B7077" />
</svg>
{/* <Divider /> */}
<List>
<ListItem variant="text" disablePadding>
<ListItemButton to='/' variant="text" sx={{ textAlign: 'center', color: 'red' }}>
<ListItemText variant="text" primary="Home" />
</ListItemButton>
</ListItem>
<ListItem variant="text" disablePadding>
<ListItemButton to='/career' variant="text" sx={{ textAlign: 'center', color: 'red' }}>
<ListItemText variant="text" primary="Career" />
</ListItemButton>
</ListItem>
</List>
</Box>
);
const container = window !== undefined ? () => window().document.body : undefined;
return (
<Box >
{/* <CssBaseline /> */}
<AppBar elevation={0} style={{ backgroundColor: '#181727' }}>
<Toolbar>
<IconButton
color="inherit"
aria-label="open drawer"
edge="start"
onClick={handleDrawerToggle}
sx={{ mr: 2, display: { sm: 'none' } }}
>
<MenuIcon />
</IconButton>
<Typography
variant="h6"
component="div"
sx={{ flexGrow: 1, display: { xs: 'none', sm: 'block' } }}
>
<svg width="183" height="38" viewBox="0 0 183 38" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M54.0087 34.8029L54.0087 18.9383C54.0087 18.9383 41.7705 20.4987 31.2334 25.7239C20.6962 20.4987 8.45805 18.9383 8.45805 18.9383L8.45805 34.8029C4.86693 35.6067 1.96095 36.5761 2.41136e-09 37.6873C6.61524 35.6067 18.121 34.2118 31.2097 34.2118C44.2985 34.2118 55.8043 35.5831 62.4195 37.6873C60.4822 36.5761 57.5998 35.6067 54.0087 34.8029Z" fill="white" />
<path d="M11.7893 17.2359L11.7893 19.482C16.1365 20.3095 24.0747 22.1537 31.2334 25.7238C22.7753 19.0801 11.7893 17.2359 11.7893 17.2359Z" fill="white" />
<path d="M50.701 17.2359C50.701 17.2359 39.715 19.0801 31.257 25.7238C38.4156 22.1773 46.3539 20.3095 50.701 19.482L50.701 17.2359Z" fill="white" />
<path d="M31.257 17.4486C30.8081 18.4416 30.123 19.3164 29.3197 20.0021L31.2334 23.3358L33.1943 20.0021C32.3674 19.3164 31.7059 18.4416 31.257 17.4486Z" fill="white" />
<path d="M25.4452 14.9662C26.721 14.9662 27.7841 13.9259 27.7841 12.6255C27.7841 11.3488 26.7446 10.2849 25.4452 10.2849C24.1694 10.2849 23.1062 11.3251 23.1062 12.6255C23.1062 13.9259 24.1457 14.9662 25.4452 14.9662ZM24.6655 10.9941C25.1617 10.9941 25.5633 11.3961 25.5633 11.8926C25.5633 12.3891 25.1617 12.791 24.6655 12.791C24.1694 12.791 23.7677 12.3891 23.7677 11.8926C23.7677 11.3961 24.1694 10.9941 24.6655 10.9941Z" fill="white" />
<path d="M34.7064 12.6255C34.7064 13.9023 35.746 14.9662 37.0218 14.9662C38.2975 14.9662 39.3607 13.9259 39.3607 12.6255C39.3607 11.3488 38.3212 10.2849 37.0218 10.2849C35.7696 10.3085 34.7064 11.3488 34.7064 12.6255ZM37.3053 11.8926C37.3053 12.3891 36.9036 12.791 36.4075 12.791C35.9113 12.791 35.5097 12.3891 35.5097 11.8926C35.5097 11.3961 35.9113 10.9941 36.4075 10.9941C36.9036 10.9941 37.3053 11.3961 37.3053 11.8926Z" fill="white" />
<path d="M20.9798 17.2122C22.1375 18.3471 23.7204 19.0328 25.4451 19.0328C27.9967 19.0328 30.2175 17.5196 31.257 15.3444C32.2729 17.5196 34.4938 19.0328 37.069 19.0328C38.8173 19.0328 40.3766 18.3235 41.5343 17.2122C42.0304 17.9215 42.4557 18.6781 42.8101 19.4583C44.2513 18.9145 45.5743 18.5126 46.732 18.1816C45.9759 16.6211 44.7946 15.2262 43.3062 14.044C43.4007 13.5948 43.4716 13.0983 43.4716 12.6255C43.4716 11.6797 43.259 10.7813 42.8809 9.95378C42.4321 8.62976 41.7469 7.40031 40.8728 6.31273L40.8255 -3.22089e-09L35.5806 2.45889C34.2103 1.93874 32.7455 1.67867 31.257 1.67867C29.7686 1.67867 28.3038 1.93874 26.9335 2.45889L21.6649 -7.56605e-10L21.6177 6.31273C20.7672 7.40031 20.082 8.60611 19.6331 9.90649C19.2551 10.734 19.0188 11.6561 19.0188 12.6255C19.0188 13.122 19.0661 13.5948 19.1842 14.044C17.6958 15.2262 16.5381 16.6211 15.7821 18.1816C16.9161 18.5126 18.2628 18.9382 19.704 19.4583C20.0584 18.6781 20.4836 17.9215 20.9798 17.2122ZM42.1013 12.6255C42.1013 15.4153 39.8332 17.6851 37.0454 17.6851C34.2575 17.6851 31.9894 15.4153 31.9894 12.6255C31.9894 9.83556 34.2575 7.56582 37.0454 7.56582C39.8332 7.58946 42.1013 9.8592 42.1013 12.6255ZM31.2334 3.02633C34.4465 3.02633 37.3761 4.42127 39.3843 6.66737C38.6519 6.38366 37.8486 6.21816 37.0217 6.21816C34.4701 6.21816 32.2493 7.73132 31.2098 9.90649C30.1939 7.73132 27.973 6.21816 25.3978 6.21816C24.5709 6.21816 23.7676 6.38366 23.0589 6.66737C25.1143 4.42127 28.0203 3.02633 31.2334 3.02633ZM25.4451 7.58946C28.2329 7.58946 30.501 9.8592 30.501 12.6491C30.501 15.439 28.2329 17.7087 25.4451 17.7087C22.6572 17.7087 20.3891 15.439 20.3891 12.6491C20.3891 9.8592 22.6572 7.58946 25.4451 7.58946Z" fill="white" />
<path d="M93.2294 19.7236C93.2294 21.8236 92.4894 23.6236 91.0094 25.1236C89.5294 26.6036 87.7394 27.3436 85.6394 27.3436C83.5394 27.3436 81.7394 26.6036 80.2394 25.1236C78.7594 23.6236 78.0194 21.8236 78.0194 19.7236C78.0194 17.6236 78.7594 15.8336 80.2394 14.3536C81.7394 12.8736 83.5394 12.1336 85.6394 12.1336C87.7394 12.1336 89.5294 12.8736 91.0094 14.3536C92.4894 15.8336 93.2294 17.6236 93.2294 19.7236ZM88.1294 19.7236C88.1294 19.0236 87.8894 18.4336 87.4094 17.9536C86.9294 17.4736 86.3394 17.2336 85.6394 17.2336C84.9394 17.2336 84.3394 17.4836 83.8394 17.9836C83.3594 18.4636 83.1194 19.0436 83.1194 19.7236C83.1194 20.4036 83.3694 20.9936 83.8694 21.4936C84.3694 21.9936 84.9594 22.2436 85.6394 22.2436C86.3194 22.2436 86.8994 22.0036 87.3794 21.5236C87.8794 21.0236 88.1294 20.4236 88.1294 19.7236ZM109.756 24.7936C109.756 25.4936 109.506 26.0936 109.006 26.5936C108.506 27.0936 107.906 27.3436 107.206 27.3436C106.506 27.3436 105.906 27.0936 105.406 26.5936C104.906 26.0936 104.656 25.4936 104.656 24.7936V19.7236C104.656 19.0236 104.406 18.4336 103.906 17.9536C103.426 17.4536 102.846 17.2036 102.166 17.2036C101.486 17.2036 100.896 17.4536 100.396 17.9536C99.8957 18.4336 99.6457 19.0236 99.6457 19.7236V24.7936C99.6457 25.4936 99.3957 26.0936 98.8957 26.5936C98.3957 27.0936 97.7957 27.3436 97.0957 27.3436C96.3957 27.3436 95.7957 27.0936 95.2957 26.5936C94.7957 26.0936 94.5457 25.4936 94.5457 24.7936V19.7236C94.5457 17.6236 95.2857 15.8336 96.7657 14.3536C98.2657 12.8536 100.066 12.1036 102.166 12.1036C104.266 12.1036 106.056 12.8536 107.536 14.3536C109.016 15.8336 109.756 17.6236 109.756 19.7236V24.7936ZM116.316 24.7936C116.316 25.4936 116.066 26.0936 115.566 26.5936C115.066 27.0936 114.466 27.3436 113.766 27.3436C113.066 27.3436 112.466 27.0936 111.966 26.5936C111.466 26.0936 111.216 25.4936 111.216 24.7936V9.52363C111.216 8.82363 111.466 8.22363 111.966 7.72363C112.466 7.22363 113.066 6.97363 113.766 6.97363C114.466 6.97363 115.066 7.22363 115.566 7.72363C116.066 8.22363 116.316 8.82363 116.316 9.52363V24.7936ZM132.928 24.7936C132.928 25.4936 132.678 26.0936 132.178 26.5936C131.678 27.0936 131.078 27.3436 130.378 27.3436H125.368C123.268 27.3436 121.468 26.6036 119.968 25.1236C118.468 23.6236 117.718 21.8236 117.718 19.7236C117.718 17.6236 118.458 15.8336 119.938 14.3536C121.438 12.8536 123.238 12.1036 125.338 12.1036C127.118 12.1036 128.698 12.6536 130.078 13.7536C131.458 14.8536 132.348 16.2736 132.748 18.0136C132.808 18.1336 132.838 18.3236 132.838 18.5836C132.838 19.2836 132.588 19.8836 132.088 20.3836C131.588 20.8836 130.988 21.1336 130.288 21.1336C129.028 21.1336 128.198 20.4836 127.798 19.1836C127.418 17.8836 126.608 17.2336 125.368 17.2336C124.668 17.2336 124.068 17.4836 123.568 17.9836C123.068 18.4636 122.818 19.0436 122.818 19.7236C122.818 20.4036 123.068 20.9936 123.568 21.4936C124.068 21.9936 124.658 22.2436 125.338 22.2436H130.348C131.048 22.2436 131.648 22.4936 132.148 22.9936C132.668 23.4936 132.928 24.0936 132.928 24.7936ZM149.602 24.7936C149.602 25.4936 149.352 26.0936 148.852 26.5936C148.352 27.0936 147.752 27.3436 147.052 27.3436H141.982C139.902 27.3436 138.112 26.6036 136.612 25.1236C135.112 23.6236 134.362 21.8236 134.362 19.7236C134.362 17.6236 135.102 15.8336 136.582 14.3536C138.082 12.8736 139.872 12.1336 141.952 12.1336C144.052 12.1336 145.852 12.8736 147.352 14.3536C148.852 15.8336 149.602 17.6236 149.602 19.7236V24.7936ZM144.502 19.7236C144.502 19.0436 144.252 18.4636 143.752 17.9836C143.272 17.4836 142.682 17.2336 141.982 17.2336C141.282 17.2336 140.682 17.4836 140.182 17.9836C139.702 18.4636 139.462 19.0436 139.462 19.7236C139.462 20.4236 139.702 21.0236 140.182 21.5236C140.682 22.0036 141.272 22.2436 141.952 22.2436H144.472L144.502 19.7236ZM164.679 14.6536C164.679 15.3536 164.429 15.9536 163.929 16.4536C163.429 16.9536 162.829 17.2036 162.129 17.2036H158.379C157.699 17.2036 157.109 17.4536 156.609 17.9536C156.109 18.4336 155.859 19.0236 155.859 19.7236V24.7936C155.859 25.4936 155.609 26.0936 155.109 26.5936C154.609 27.0936 154.009 27.3436 153.309 27.3436C152.609 27.3436 151.999 27.0936 151.479 26.5936C150.979 26.0936 150.729 25.4936 150.729 24.7936V19.7236C150.729 17.6236 151.469 15.8336 152.949 14.3536C154.449 12.8536 156.249 12.1036 158.349 12.1036H162.099C162.799 12.1036 163.399 12.3536 163.899 12.8536C164.419 13.3536 164.679 13.9536 164.679 14.6536ZM180.976 24.7936C180.976 25.4936 180.726 26.0936 180.226 26.5936C179.726 27.0936 179.126 27.3436 178.426 27.3436C177.726 27.3436 177.126 27.0936 176.626 26.5936C176.126 26.0936 175.876 25.4936 175.876 24.7936V19.7236C175.876 19.0236 175.626 18.4336 175.126 17.9536C174.646 17.4536 174.066 17.2036 173.386 17.2036C172.706 17.2036 172.116 17.4536 171.616 17.9536C171.116 18.4336 170.866 19.0236 170.866 19.7236V24.7936C170.866 25.4936 170.616 26.0936 170.116 26.5936C169.616 27.0936 169.016 27.3436 168.316 27.3436C167.616 27.3436 167.016 27.0936 166.516 26.5936C166.016 26.0936 165.766 25.4936 165.766 24.7936V19.7236C165.766 17.6236 166.506 15.8336 167.986 14.3536C169.486 12.8536 171.286 12.1036 173.386 12.1036C175.486 12.1036 177.276 12.8536 178.756 14.3536C180.236 15.8336 180.976 17.6236 180.976 19.7236V24.7936Z" fill="white" />
</svg>
</Typography>
{/* desktop view */}
<Box sx={{ display: { xs: 'none', sm: 'block' } }}>
<Link to='/'>
<Button variant="text" sx={{ color: '#fff', display: 'inline-block', padding: '20px' }}>
Home
</Button>
</Link>
<Link to='/career'>
<Button variant="text" sx={{ color: '#fff', display: 'inline-block', padding: '20px' }}>
Career
</Button>
</Link>
<Link to='/about'>
<Button variant="text" sx={{ color: '#fff', display: 'inline-block', padding: '20px' }}>
About Us
</Button>
</Link>
</Box>
</Toolbar>
</AppBar>
<nav>
<Drawer
container={container}
variant="temporary"
open={mobileOpen}
onClose={handleDrawerToggle}
ModalProps={{
keepMounted: true, // Better open performance on mobile.
}}
sx={{
display: { xs: 'block', sm: 'none' },
'& .MuiDrawer-paper': { boxSizing: 'border-box', width: drawerWidth },
}}
>
{drawer}
</Drawer>
</nav>
</Box>
);
}
Navbar.propTypes = {
/**
* Injected by the documentation to work in an iframe.
* You won't need it on your project.
*/
window: PropTypes.func,
};
export default Navbar;
Now let’s Jump to the Pages Folder where all pages like the Home page, Career page, and About Us page we have to build.
About.js
import * as React from 'react';
import Avatar from '@mui/material/Avatar';
import Button from '@mui/material/Button';
import CssBaseline from '@mui/material/CssBaseline';
import TextField from '@mui/material/TextField';
import FormControlLabel from '@mui/material/FormControlLabel';
import Checkbox from '@mui/material/Checkbox';
import Link from '@mui/material/Link';
import Paper from '@mui/material/Paper';
import Box from '@mui/material/Box';
import Grid from '@mui/material/Grid';
import LockOutlinedIcon from '@mui/icons-material/LockOutlined';
import Typography from '@mui/material/Typography';
import { createTheme, ThemeProvider } from '@mui/material/styles';
import Layout from '../Layout/Layout';
function Copyright(props) {
return (
<Typography variant="body2" color="text.secondary" align="center" {...props}>
{'Copyright © '}
<Link color="inherit" href="https://mui.com/">
Your Website
</Link>{' '}
{new Date().getFullYear()}
{'.'}
</Typography>
);
}
const defaultTheme = createTheme();
export default function SignInSide() {
const handleSubmit = (event) => {
event.preventDefault();
const data = new FormData(event.currentTarget);
console.log({
email: data.get('email'),
password: data.get('password'),
});
};
return (
<Layout>
<ThemeProvider theme={defaultTheme}>
<Grid container component="main" sx={{ height: '100vh',marginTop:'1rem' }}>
<CssBaseline />
<Grid
item
xs={false}
sm={4}
md={7}
sx={{
backgroundImage: 'url(https://source.unsplash.com/random?wallpapers)',
backgroundRepeat: 'no-repeat',
backgroundColor: (t) =>
t.palette.mode === 'light' ? t.palette.grey[50] : t.palette.grey[900],
backgroundSize: 'cover',
backgroundPosition: 'center',
}}
/>
<Grid item xs={12} sm={8} md={5} component={Paper} elevation={6} square>
<Box
sx={{
my: 8,
mx: 4,
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
}}
>
<Avatar sx={{ m: 1, bgcolor: 'secondary.main' }}>
<LockOutlinedIcon />
</Avatar>
<Typography component="h1" variant="h5">
Sign in
</Typography>
<Box component="form" noValidate onSubmit={handleSubmit} sx={{ mt: 1 }}>
<TextField
margin="normal"
required
fullWidth
id="email"
label="Email Address"
name="email"
autoComplete="email"
autoFocus
/>
<TextField
margin="normal"
required
fullWidth
name="password"
label="Password"
type="password"
id="password"
autoComplete="current-password"
/>
<FormControlLabel
control={<Checkbox value="remember" color="primary" />}
label="Remember me"
/>
<Button
type="submit"
fullWidth
variant="contained"
sx={{ mt: 3, mb: 2 }}
>
Sign In
</Button>
<Grid container>
<Grid item xs>
<Link href="#" variant="body2">
Forgot password?
</Link>
</Grid>
<Grid item>
<Link href="#" variant="body2">
{"Don't have an account? Sign Up"}
</Link>
</Grid>
</Grid>
<Copyright sx={{ mt: 5 }} />
</Box>
</Box>
</Grid>
</Grid>
</ThemeProvider>
</Layout>
);
}
Career.js
import React from "react";
import Layout from "../Layout/Layout"
import { Link } from "react-router-dom";
// import Banner from "../images/banner.jpeg";
import "../Styles/HomeStyles.css";
import Banner from '../Images/career_one.png'
const Careers = () => {
return (
<Layout>
<div className="home" style={{ backgroundImage: `url(${Banner})` }} >
<div className="headerContainer">
<h1>Turn Your Passion <br/> into career</h1>
<p>Webbee will make your product look modern and <br/>professional while saving you precious time.</p>
<Link to="/menu">
<button>Join Now</button>
</Link>
</div>
</div>
</Layout>
);
};
export default Careers;
Home.js
import React from "react";
import Layout from "../Layout/Layout"
import { Link } from "react-router-dom";
// import Banner from "../images/banner.jpeg";
import "../Styles/HomeStyles.css";
import Banner from '../Images/bgg.jpg'
const Home = () => {
return (
<Layout>
<div className="home" style={{ backgroundImage: `url(${Banner})` }} >
<div className="headerContainer">
<h1>Turn your ideas <br/>into a success.</h1>
<p>Webbee will make your product look modern and <br/>professional while saving you precious time.</p>
<Link to="/menu">
<button>Purchase now</button>
</Link>
</div>
</div>
</Layout>
);
};
export default Home;
Now let’s make our style folder where we will style our pages and also apply CSS so that we can style the particular page whether it is a home page or a Navbar page mostly all the styling is provided by MUI components.
HomeStyle.css
.home {
height: 100vh;
display: flex;
justify-content: center;
align-items: left;
flex-direction: column;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-color: #D2E6E4;
}
.headerContainer {
padding: 10rem;
}
.home .headerContainer h1 {
justify-content: center;
align-items: center;
font-weight: bold;
font-size: 4rem;
color: #ffffff;
}
.home .headerContainer p {
margin-top: 15px;
padding: 0;
font-size: 1.25rem;
line-height: 1.6;
color: rgb(174, 176, 180);
font-weight: 400;
}
.headerContainer button {
background-color: #FD661F;
margin-top: 20px;
border: none;
border-radius: 5px;
cursor: pointer;
height: 50px;
width: 180px;
text-decoration: none;
color: white;
font-size: 0.9375rem;
line-height: 1.75;
}
.headerContainer button:hover {
background-color: #07090a;
cursor: pointer;
transition: 0.3s ease-in;
}
/* mobile view */
@media only screen and (max-width: 600px) {
.home {
justify-content: center;
align-items: center;
}
.headerContainer {
margin-left: 0;
border-radius: 10px;
width: 90%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
background-color: #121619;
color: white;
}
.home .headerContainer h1 {
font-size: 40px;
height: 30px;
margin: 30px 0px;
color: white;
}
.home .headerContainer p {
font-size: 30px;
color: white;
}
.headerContainer button {
background-color: white;
color: #121619;
margin-bottom: 30px;
}
}
ignore Navbar.css because we will design Navbar using mui component style. Now lest Write our App.js file. where we will
App.js
import { BrowserRouter, Routes, Route } from "react-router-dom";
import Home from "./Pages/Home";
import Careers from "./Pages/Career";
import About from './Pages/About'
function App() {
return (
<div>
<BrowserRouter>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/career" element={<Careers />} />
<Route path="/about" element={<About/>}/>
</Routes>
</BrowserRouter>
</div>
);
}
export default App;
Let’s write our index.js and CSS where we have imported Our Font also. In index.css we will write our CSS which is for
index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();
Index.css
@import url('https://fonts.googleapis.com/css2?family=Alice&family=Inter:wght@100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
*
{
margin: 0;
padding: 0;
font-family: "Inter", sans-serif !important;
}
body {
margin: 0;
font-family: "Inter", sans-serif !important;
}
Download Assets
Now here I am giving the download link where you can download all the files and images .
Conclusion
We succeeded! We hope you like our guide on using ReactJS to How To Make Material UI Website Using React JS Website In React JS. Visit ziontutorial.com for similar projects and provide comments on which project I should cover next.
Check out this react and hooks-based BMI calculator. If you have any questions, comment. Please leave a remark on this project in the space provided. You can also join our Telegram channel, which is primarily accessible there, and ask any questions there.
Coding is fun!
People are also reading:
- Crypto-currency website| Source Code Free Download
- How to Build A BMI Calculator in React JS – useState Hook & Conditionals
- How To Create Sign Up Form In HTML and CSS
- Top Stunning Free Websites to Download Responsive HTML Templates 2021
- JavaScript Clock | CSS Neumorphism Working Analog Clock UI Design
- How to make Interactive Feedback Design Using HTML CSS & JS
- 5 amazing ways to earn money online as a side option .
- finest alternative of Chinese apps for Android and iOS
- Top Best 5 Fonts Of 2020 Used By Professional Graphic Designers
- React JS Mini-Project #2 Creating Simple Sum Calculator | Absolute beginners useState Hook & Conditionals
