Madhuban Khatri
Posted on June 12, 2023
Hello Friends, This is Madhuban Khatri and Here I am sharing you Material UI Design code
Material UI
MUI offers a comprehensive suite of UI tools to help you ship new features faster. Start with Material UI, our fully-loaded component library, or bring your own design system to our production-ready components.
Installation
npm install @mui/material @emotion/react @emotion/styled
Source Code
App.js
import HomePage from './Pages/HomePage';
import AboutPage from './Pages/AboutPage';
import ContactPage from './Pages/ContactPage';
import Navbar from './Pages/Navbar';
import Login from './Pages/Login';
import SignupPage from './Pages/SignupPage';
import { useState } from 'react';
import { BrowserRouter, Route, Routes } from 'react-router-dom';
function App() {
const typoStyle = {
display: "inline",
marginLeft: "20px",
marginRight: "20px",
fontSize: "25px",
}
const pageTextStyle = {
// border: "2px solid white",
// backgroundColor:"rgb(10 25 41)",
width:"960px",
height: "400px"
}
const linkStyle = {
textDecoration: 'none',
color: '#fff',
fontWeight: 'bolder'
}
return (
<>
<BrowserRouter>
<Navbar typoStyle={typoStyle}/>
<Routes>
<Route path='/' element={<HomePage pageTextStyle={pageTextStyle} linkStyle={linkStyle}/>}/>
<Route path='/about' element={<AboutPage pageTextStyle={pageTextStyle} linkStyle={linkStyle}/>}/>
<Route path='/contact' element={<ContactPage pageTextStyle={pageTextStyle} linkStyle={linkStyle}/>}/>
<Route path='/signup' element={<SignupPage pageTextStyle={pageTextStyle} linkStyle={linkStyle}/>}/>
<Route path='/login' element={<Login pageTextStyle={pageTextStyle} linkStyle={linkStyle}/>}/>
</Routes>
</BrowserRouter>
</>
);
}
export default App;
Navbar.js
import{ Container, Typography, AppBar, Toolbar, IconButton, Switch } from '@mui/material/'
import { Link } from 'react-router-dom'
import { Menu } from '@mui/icons-material'
import { useState } from 'react'
export default function Navbar(props) {
const [theme, setTheme] = useState('rgb(3, 45, 87)');
const changeTheme = () => {
if(theme==='#032d57'){
setTheme('#001e3c')
}else{
setTheme('#032d57')
}
}
document.body.style.backgroundColor = theme;
const linkStyle = {
textDecoration: 'none',
color: '#fff',
fontWeight: 'bolder',
}
return (
<>
<Container style={{backgroundColor: "black", padding:"20px 0px"}}>
<AppBar>
<Toolbar sx={{backgroundColor:'rgb(0,30,60)'}}>
<IconButton
size='large'
edge='end'
color='inherit'
aria-label='menu'
sx={{mx:2}}
>
<Menu/>
</IconButton>
<Typography variant='h6' sx={{mx:4, flexGrow:1}}>
<Link to="/" style={{textDecoration:'none', color:'white', fontWeight: 'bolder'}} >App Bar</Link>
</Typography>
<Typography variant='h6' sx={{mx:4}}>
<Link to="/" style={linkStyle}>Home</Link>
</Typography>
<Typography variant='h6' sx={{mx:4}}>
<Link to="/about" style={linkStyle}>About</Link>
</Typography>
<Typography variant='h6' sx={{mx:4}}>
<Link to="/contact" style={linkStyle}>Contact</Link>
</Typography>
<Switch onClick={changeTheme}/> Change Theme
</Toolbar>
</AppBar>
</Container>
</>
)
}
HomePage.js
import{ Container, Typography, Box, Button, Grid } from '@mui/material/'
import { useNavigate } from 'react-router-dom'
import Footer from './Footer';
export default function HomePage(props) {
const navigate = useNavigate();
return (
<>
<Container style={{position:"absolute",top:"160px"}}>
<Box ml={35} color={'white'} style={props.pageTextStyle}>
<Typography variant='h2' mt={15} ml={15} color={'white'}>
Design Material UI Website
</Typography>
<Grid container sx={{maxWidth:'450px'}} mx={35} my={3}>
<Grid item lg={6}>
<Button
variant="contained"
color='secondary'
sx={{
width:"150px",
fontSize:"15px",
display:'inline-block',
'&:hover':{backgroundColor:'#4a148c'}}}
onClick={()=>navigate("/signup")}>
Signup
</Button>
</Grid>
<Grid item lg={6}>
<Button
variant="contained"
color='secondary'
sx={{
width:"150px",
fontSize:"15px",
display:'inline-block',
'&:hover':{backgroundColor:'#4a148c'}}}
onClick={()=>navigate("/login")}>
Login
</Button>
</Grid>
</Grid>
</Box>
<Box
component={'div'}
mx={10}
my={40}
sx={{
position:'absolute',
top:'150px',
textAlign:'center',
width:'1280px',
borderBottom: '4px solid white',
borderTop: '4px solid white',
}}>
<Typography variant='h1' color={'white'}>Projects</Typography>
</Box>
<Grid container m={20} spacing={5}>
<Grid item lg={6}>
<img src='img1.png' alt='img1' style={{width:500, borderRadius:'5px'}}/>
</Grid>
<Grid item lg={6}>
<Typography variant='h3' my={3} color={'white'} sx={{fontSize: '35px'}}>
Video Sharing App | Django | Python
</Typography>
<Typography variant='span' color={'white'}>
YouTube is an American online video sharing and social media platform headquartered in San Bruno, California, United States. Accessible worldwide, it was launched on February 14, 2005, by Steve Chen, Chad Hurley, and Jawed Karim. It is owned by Google and is the second most visited website, after Google Search.
</Typography>
</Grid>
<Grid item lg={6}>
<Typography variant='h3' my={3} color={'white'} sx={{fontSize: '35px'}}>
File Sharing App | Django | Python
</Typography>
<Typography variant='span' color={'white'}>
File Share is an American online file sharing and social media platform headquartered in San Bruno, California, United States. Accessible worldwide, it was launched on February 14, 2005, by Steve Chen, Chad Hurley, and Jawed Karim. It is owned by Google and is the second most visited website, after Google Search.
</Typography>
</Grid>
<Grid item lg={6}>
<img src='img2.png' alt='img2' style={{width:500, borderRadius:'5px'}}/>
</Grid>
<Grid item lg={6}>
<img src='img3.png' alt='img3' style={{width:500, borderRadius:'5px'}}/>
</Grid>
<Grid item lg={6}>
<Typography variant='h3' my={3} color={'white'} sx={{fontSize: '35px'}}>
Student Management System | PHP
</Typography>
<Typography variant='span' alt='img4' color={'white'} my={5}>
File Share is an American online file sharing and social media platform headquartered in San Bruno, California, United States. Accessible worldwide, it was launched on February 14, 2005, by Steve Chen, Chad Hurley, and Jawed Karim. It is owned by Google and is the second most visited website, after Google Search.
</Typography>
</Grid>
<Grid item lg={6}>
<Typography variant='h3' my={3} color={'white'} sx={{fontSize: '35px'}}>
Material UI Design
</Typography>
<Typography variant='span' color={'white'}>
Material UI is an American online video sharing and social media platform headquartered in San Bruno, California, United States. Accessible worldwide, it was launched on February 14, 2005, by Steve Chen, Chad Hurley, and Jawed Karim. It is owned by Google and is the second most visited website, after Google Search.
</Typography>
</Grid>
<Grid item lg={6}>
<img src='img4.png' alt='img4' style={{width:500, borderRadius:'5px'}}/>
</Grid>
</Grid>
</Container>
<Footer marginT={'2600px'} linkSize={'25px'} linkStyle={props.linkStyle}/>
</>
)
}
AboutPage.js
I know the page looks very simple but you can add your own elements like images, paragraph etc to look better.
import{ Container, Typography, Box, Grid, Button } from '@mui/material/'
import {Card,CardActions,CardContent, CardMedia, CardHeader} from '@mui/material/'
import Footer from './Footer'
export default function AboutPage(props) {
const cardStyle = {
color: "#fff",
backgroundColor: `${props.theme}`=='#001e3c' ? '#032d57' : '#001e3c',
maxWidth: "300px",
height: "400px"
}
return (
<>
<Container sx={{position:"relative", marginTop: '60px'}}>
<Box color={'white'} sx={props.pageTextStyle}>
<Grid container spacing={5} mx={5} my={5}>
{/* Card 1 */}
<Grid item lg={4}>
<Card sx={cardStyle}>
<CardMedia
component='img'
height='195'
image='img1.png'
alt="Card Image"
/>
<CardContent>
<Typography variant='h2'>Card title</Typography>
</CardContent>
<CardContent>
<Typography variant='span'>Card description</Typography>
</CardContent>
<CardActions>
<Button variant="outlined" color='secondary' sx={{'&:hover':{backgroundColor:'#9C27B0', color: 'white'}}}>Read More</Button>
</CardActions>
</Card>
</Grid>
{/* Card 2 */}
<Grid item lg={4}>
<Card sx={cardStyle}>
<CardMedia
component='img'
height='195'
image='img2.png'
alt="Card Image"
/>
<CardContent>
<Typography variant='h2'>Card title</Typography>
</CardContent>
<CardContent>
<Typography variant='span'>Card description</Typography>
</CardContent>
<CardActions>
<Button variant="outlined" color='secondary' sx={{'&:hover':{backgroundColor:'#9C27B0', color: 'white'}}}>Read More</Button>
</CardActions>
<CardContent>
<Typography variant='span'>Card description</Typography>
</CardContent>
</Card>
</Grid>
{/* Card 3 */}
<Grid item lg={4}>
<Card sx={cardStyle}>
<CardMedia
component='img'
height='195'
image='img4.png'
alt="Card Image"
/>
<CardContent>
<Typography variant='h2'>Card title</Typography>
</CardContent>
<CardContent>
<Typography variant='span'>Card description</Typography>
</CardContent>
<CardActions>
<Button
variant="outlined"
color='secondary'
sx={
{'&:hover':{backgroundColor:'#9C27B0', color: 'white'}
}}>Read More
</Button>
</CardActions>
</Card>
</Grid>
</Grid>
</Box>
</Container>
<Footer linkStyle={props.linkStyle} marginT={'120px'}/>
</>
)
}
ContactPage.js
import { Container, Typography, Box, TextField, Button } from '@mui/material/'
import Footer from './Footer'
export default function ContactPage(props) {
return (
<>
<Container style={{ position: "relative", top: "40px" }} fullWidth>
<Box mx={40} px={5} py={5} color={'white'} sx={{ backgroundColor: "rgb(0,30,60)", input: {color: 'white'}, width:'500px'}}>
<Typography variant='h2' my={2} >Contact Us</Typography>
<form>
<Typography variant='label' htmlFor='outlined-basic-email' color='secondary'>Full Name</Typography>
<TextField sx={{ marginTop: '10px' }} type='password' name='password' color='secondary' id="outlined-basic-name" variant="outlined" fullWidth />
<br /><br />
<Typography variant='label' htmlFor='outlined-basic-email' color='secondary'>Email</Typography>
<TextField sx={{ marginTop: '10px' }} type='email' name='email' color='secondary' id="outlined-basic-email" variant="outlined" fullWidth />
<br /><br />
<Typography variant='label' htmlFor='outlined-basic-email' color='secondary'>Message</Typography>
<TextField sx={{ marginTop: '10px'}} type='text' name='password' color='secondary' id="outlined-basic-message" variant="outlined" fullWidth />
<br /><br />
<Button type='submit' variant='contained' color='secondary'>Submit</Button>
</form>
</Box>
</Container>
<Footer marginT={'70px'} linkStyle={props.linkStyle}/>
</>
)
}
SignupPage.js
import{ Container, Typography, Box, Button } from '@mui/material/'
import TextField from '@mui/material/TextField'
import Footer from './Footer';
import { useNavigate } from 'react-router-dom';
export default function SignupPage(props) {
const navigate = useNavigate();
const handleSubmit=(event)=>{
event.preventDefault();
const email = event.target.email.value;
const password = event.target.password.value;
if(email!="" && password!=""){
alert("Your email: "+email+" and Password: "+password)
}else{
alert("Please enter email and password")
}
}
return (
<>
<Container style={{position:"absolute",top:"100px"}}>
<Box ml={50} color={'white'} style={props.pageTextStyle}>
<Box width={"500px"} mx={5} px={5} py={5} sx={{backgroundColor:"rgb(0,30,60)",input: { color: 'white' }}}>
<Typography variant='h2' my={2}>Sign Up</Typography>
<form onSubmit={handleSubmit}>
<Typography variant='label' htmlFor='outlined-basic-email' color='secondary'>Email</Typography>
<TextField sx={{marginTop:'10px'}} type='email' name='email' color='secondary' id="outlined-basic-email" variant="outlined" fullWidth/>
<br/><br/>
<Typography variant='label' htmlFor='outlined-basic-email' color='secondary'>Password</Typography>
<TextField sx={{marginTop:'10px'}} type='password' name='password' color='secondary' id="outlined-basic-password" variant="outlined" fullWidth />
<br/><br/>
<Button type='submit' variant='contained' color='secondary'>Signup</Button>
<br/>
<Typography variant='p' onClick={()=>navigate('/login')}>Don't have an account? Login here</Typography>
</form>
</Box>
</Box>
</Container>
<Footer marginT={'580px'} linkStyle={props.linkStyle}/>
</>
)
}
Login.js
import{ Container, Typography, Box, Button, Checkbox } from '@mui/material/'
import TextField from '@mui/material/TextField'
import Footer from './Footer';
import { useNavigate } from 'react-router-dom';
export default function Login(props) {
const navigate = useNavigate();
const handleSubmit=(event)=>{
event.preventDefault();
const email = event.target.email.value;
const password = event.target.password.value;
if(email!="" && password!=""){
alert("Your email: "+email+" and Password: "+password)
}else{
alert("Please enter email and password")
}
}
return (
<>
<Container style={{position:"absolute",top:"100px"}}>
<Box ml={50} color={'white'} style={props.pageTextStyle}>
<Box width={"500px"} mx={5} px={5} py={5} sx={{backgroundColor:"rgb(0,30,60)",input: { color: 'white' }}}>
<Typography variant='h2' my={2}>Login</Typography>
<form onSubmit={handleSubmit}>
<Typography variant='label' htmlFor='outlined-basic-email' color='secondary'>Email</Typography>
<TextField sx={{marginTop:'10px'}} type='email' name='email' color='secondary' id="outlined-basic-email" variant="outlined" fullWidth/>
<br/><br/>
<Typography variant='label' htmlFor='outlined-basic-email' color='secondary'>Password</Typography>
<TextField sx={{marginTop:'10px'}} type='password' name='password' color='secondary' id="outlined-basic-password" variant="outlined" fullWidth />
<br/><br/>
<Checkbox color='secondary'/> Remember Me
<br/><br/>
<Button type='submit' variant='contained' color='secondary'>Login</Button>
<br/>
<Typography variant='p' onClick={()=>navigate('/signup')}>Already have an account? Signup here</Typography>
</form>
</Box>
</Box>
</Container>
<Footer marginT={'600px'} linkStyle={props.linkStyle}/>
</>
)
}
Footer.js
import { Box, Grid} from "@mui/material"
import { Link } from 'react-router-dom'
export default function Footer(props) {
return (
<Box sx={{backgroundColor:"rgb(0,30,60)", height:"140px", marginTop:`${props.marginT}`, boxShadow:'10px 10px 10px 10px black'}}>
<Grid container my={5} color={'white'} textAlign={'center'} justifyItems={'start'}>
<Grid item lg={3} md={4} sm={3} xs={6} pt={2}>
<Link to='/' style={props.linkStyle}>Home</Link>
</Grid>
<Grid item lg={3} md={4} sm={3} xs={6} pt={2}>
<Link to='/about' style={props.linkStyle}>About</Link>
</Grid>
<Grid item lg={3} md={4} sm={3} xs={6} pt={2}>
<Link to='/contact' style={props.linkStyle}>Contact</Link>
</Grid>
<Grid item lg={3} md={4} sm={3} xs={6} pt={2}>
<Link to='/contact' style={props.linkStyle}>Contact</Link>
</Grid>
<Grid item lg={3} md={4} sm={3} xs={6} pt={2}>
<Link to='/contact' style={props.linkStyle}>Contact</Link>
</Grid>
<Grid item lg={3} md={4} sm={3} xs={6} pt={2}>
<Link to='/contact' style={props.linkStyle}>Contact</Link>
</Grid>
<Grid item lg={3} md={4} sm={3} xs={6} pt={2}>
<Link to='/contact' style={props.linkStyle}>Contact</Link>
</Grid>
<Grid item lg={3} md={4} sm={3} xs={6} pt={2}>
<Link to='/contact' style={props.linkStyle}>Contact</Link>
</Grid>
<Grid item lg={3} md={4} sm={3} xs={6} pt={2}>
<Link to='/contact' style={props.linkStyle}>Contact</Link>
</Grid>
<Grid item lg={3} md={4} sm={3} xs={6} pt={2}>
<Link to='/contact' style={props.linkStyle}>Contact</Link>
</Grid>
<Grid item lg={3} md={4} sm={3} xs={6} pt={2}>
<Link to='/contact' style={props.linkStyle}>Contact</Link>
</Grid>
<Grid item lg={3} md={4} sm={3} xs={6} pt={2}>
<Link to='/contact' style={props.linkStyle}>Contact</Link>
</Grid>
</Grid>
</Box>
)
}
You can change the page theme using Switch. I have created a function which can switch between #001e3c and #032d57.
💖 💪 🙅 🚩
Madhuban Khatri
Posted on June 12, 2023
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.
Related