Scribd
Upload
15 views7 pages

Body

Uploaded by

pifir25311
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
15 views7 pages

Body

Uploaded by

pifir25311
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 7

body {

margin: 0;
padding: 110;
height: 100px;
display: flex;
flex-direction: column;
background-image:linear-gradient(rgba(255, 255, 255, 0.2), rgba(249, 245, 245,
0.2)), url('https://wallpapercave.com/wp/wp3228062.png');
background-size: cover;

.navbar {
position: sticky;
top: 0;
width: 100%;
background-color: #1976d2;
padding: 10px;
display: flex;
justify-content: space-between;
align-items: center;
z-index: 1;
}

.ubox {
display: flex;
flex-direction: column;
align-items: center;
padding: 140px;
gap: 30px;
max-width: 500px;
margin: auto;
flex-grow: 1;
background-image: linear-gradient(rgba(215, 231, 220, 0.9), rgb(255, 255,
255,0.7)),
url('https://cdn.dribbble.com/users/2317423/screenshots/11178230/farming_vector_ill
ustration__4x.jpg');
background-size: cover;
background-position: center;
background-color: aquamarine;
}

.sname {
margin-bottom: 20px;
}

.ubox > * {
width: 100%;
margin-bottom: 1020px;
}

.ubox button[type="submit"] {
background-color: #1976d2;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
}
.ubox button[type="submit"]:hover {
background-color: #1565c0;
}
--------------------
import SimplePaper from "./Paper";

export default function CreateAdmin() {


return(
<div>

<SimplePaper></SimplePaper>
</div>
)
}
-----------------------
import * as React from 'react';
import AppBar from '@mui/material/AppBar';
import Box from '@mui/material/Box';
import Toolbar from '@mui/material/Toolbar';
import IconButton from '@mui/material/IconButton';
import Typography from '@mui/material/Typography';
import Menu from '@mui/material/Menu';
import MenuIcon from '@mui/icons-material/Menu';
import Container from '@mui/material/Container';
import Avatar from '@mui/material/Avatar';
import Button from '@mui/material/Button';
import Tooltip from '@mui/material/Tooltip';
import MenuItem from '@mui/material/MenuItem';
import AdbIcon from '@mui/icons-material/Adb';

const pages = ['Products', 'Pricing', 'Blog'];


const settings = ['Profile', 'Account', 'Dashboard', 'Logout'];

function ResponsiveAppBar() {
const [anchorElNav, setAnchorElNav] = React.useState(null);
const [anchorElUser, setAnchorElUser] = React.useState(null);

const handleOpenNavMenu = (event) => {


setAnchorElNav(event.currentTarget);
};
const handleOpenUserMenu = (event) => {
setAnchorElUser(event.currentTarget);
};

const handleCloseNavMenu = () => {


setAnchorElNav(null);
};

const handleCloseUserMenu = () => {


setAnchorElUser(null);
};

return (
<AppBar position="static">
<Container maxWidth="xl">
<Toolbar disableGutters>
<AdbIcon sx={{ display: { xs: 'none', md: 'flex' }, mr: 1 }} />
<Typography
variant="h6"
noWrap
component="a"
sx={{
mr: 2,
display: { xs: 'none', md: 'flex' },
fontFamily: 'monospace',
fontWeight: 700,
letterSpacing: '.3rem',
color: 'inherit',
textDecoration: 'none',
}}
>
LOGO
</Typography>

<Box sx={{ flexGrow: 1, display: { xs: 'flex', md: 'none' } }}>


<IconButton
size="large"
aria-label="account of current user"
aria-controls="menu-appbar"
aria-haspopup="true"
onClick={handleOpenNavMenu}
color="inherit"
>
<MenuIcon />
</IconButton>
<Menu
id="menu-appbar"
anchorEl={anchorElNav}
anchorOrigin={{
vertical: 'bottom',
horizontal: 'left',
}}
keepMounted
transformOrigin={{
vertical: 'top',
horizontal: 'left',
}}
open={Boolean(anchorElNav)}
onClose={handleCloseNavMenu}
sx={{
display: { xs: 'block', md: 'none' },
}}
>
{pages.map((page) => (
<MenuItem key={page} onClick={handleCloseNavMenu}>
<Typography textAlign="center">{page}</Typography>
</MenuItem>
))}
</Menu>
</Box>
<AdbIcon sx={{ display: { xs: 'flex', md: 'none' }, mr: 1 }} />
<Typography
variant="h5"
noWrap
component="a"
sx={{
mr: 2,
display: { xs: 'flex', md: 'none' },
flexGrow: 1,
fontFamily: 'monospace',
fontWeight: 700,
letterSpacing: '.3rem',
color: 'inherit',
textDecoration: 'none',
}}
>
LOGO
</Typography>
<Box sx={{ flexGrow: 1, display: { xs: 'none', md: 'flex' } }}>
{pages.map((page) => (
<Button
key={page}
onClick={handleCloseNavMenu}
sx={{ my: 2, color: 'white', display: 'block' }}
>
{page}
</Button>
))}
</Box>

<Box sx={{ flexGrow: 0 }}>


<Tooltip title="Open settings">
<IconButton onClick={handleOpenUserMenu} sx={{ p: 0 }}>
<Avatar alt="Remy Sharp" src="/static/images/avatar/2.jpg" />
</IconButton>
</Tooltip>
<Menu
sx={{ mt: '45px' }}
id="menu-appbar"
anchorEl={anchorElUser}
anchorOrigin={{
vertical: 'top',
horizontal: 'right',
}}
keepMounted
transformOrigin={{
vertical: 'top',
horizontal: 'right',
}}
open={Boolean(anchorElUser)}
onClose={handleCloseUserMenu}
>
{settings.map((setting) => (
<MenuItem key={setting} onClick={handleCloseUserMenu}>
<Typography textAlign="center">{setting}</Typography>
</MenuItem>
))}
</Menu>
</Box>
</Toolbar>
</Container>
</AppBar>
);
}
export default ResponsiveAppBar;
------------------------------------
import * as React from 'react';
import Box from '@mui/material/Box';
import Paper from '@mui/material/Paper';
import TextField from '@mui/material/TextField';
import Button from '@mui/material/Button';
import './AdminCreatePaper.css';

export default function SimplePaper() {


return (
<Box
sx={{
display: 'flex',
flexWrap: 'wrap',
'& > :not(style)': {
m: 1,
width: 728,
height: 628,
},
}}
>
<Paper elevation={8}>
<div className='ubox'>
<TextField
id="outlined-basic"
label="Student Name"
variant="outlined"
className='sname'
/>
<TextField
id="outlined-basic"
label="Student Roll No"
variant="outlined"
/>
<TextField
id="outlined-basic"
label="Student Branch"
variant="outlined"
/>
<Button
variant="contained"
className='submit-btn'
>
Submit
</Button>
</div>
</Paper>
</Box>
);
}
---------------
.App {
text-align: center;
display: flex;
flex-flow: row;
width: 100%;
align-items: center;
justify-content: space-around;
margin-top: 4rem;
padding: 12r;
height: 75.3%;

.App-logo {
height: 40vmin;
pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {


.App-logo {
animation: App-logo-spin infinite 20s linear;
}
}

.App-header {
background-color: #282c34;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
color: white;
}

.App-link {
color: #61dafb;
}

@keyframes App-logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
-------------
import logo from './logo.svg';
import './App.css';
import CreateUser from './Components/ADMIN/AdminCreateUser/CreateUser';
import Create from './Components/Scientist/Create/Create';
import Update from './Components/Scientist/Update/Update';
import CreateAdmin from './Components/ADMIN/AdminCreate/CreateAdmin';
import ResponsiveAppBar from "./Components/ADMIN/AdminCreate/Nav";

function App() {
return (
<><ResponsiveAppBar></ResponsiveAppBar><div className="App">
<CreateAdmin></CreateAdmin>
</div></>
);
}

export default App;

You might also like