sosokker/SOS12
1
0
Fork 0
mirror of https://github.com/Sosokker/SOS12.git synced 2025-12-19 12:44:05 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

change color

Browse Source
This commit is contained in:
Yanatchara JERAJA 2023-06-28 14:09:33 +07:00
parent 0c0143dd1c
commit 21b8e7f566
1 changed files with 139 additions and 108 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

63
src/App.jsx
View File

@ -17,7 +17,7 @@ import { createTheme, ThemeProvider } from '@mui/material/styles';
function Copyright() { function Copyright() {
return ( return (
<Typography variant="body2" color="text.secondary" align="center"> <Typography variant="body2" color="#5585A4" align="center">
{'Copyright © '} {'Copyright © '}
<Link color="inherit" href="https://mui.com/"> <Link color="inherit" href="https://mui.com/">
Your Website Your Website
@ -36,7 +36,11 @@ export default function App() {
return ( return (
<ThemeProvider theme={defaultTheme}> <ThemeProvider theme={defaultTheme}>
<CssBaseline/> <CssBaseline/>
<AppBar position="relative"> <AppBar position="relative"
sx={{
bgcolor: '#161E29',
}}
>
<Toolbar> <Toolbar>
<Typography variant="h6" color="inherit" noWrap> <Typography variant="h6" color="inherit" noWrap>
Album layout Album layout
@ -47,7 +51,7 @@ export default function App() {
{/* Hero unit */} {/* Hero unit */}
<Box <Box
sx={{ sx={{
bgcolor: 'background.paper', bgcolor: '#0A0E1A',
pt: 8, pt: 8,
pb: 6, pb: 6,
}} }}
@ -57,12 +61,12 @@ export default function App() {
component="h1" component="h1"
variant="h2" variant="h2"
align="center" align="center"
color="text.primary" color="#7DD6F6"
gutterBottom gutterBottom
> >
SOS12 SOS12
</Typography> </Typography>
<Typography variant="h5" align="center" color="text.secondary" paragraph> <Typography variant="h5" align="center" color="aliceblue" paragraph>
Something short and leading about the collection below—its contents, Something short and leading about the collection below—its contents,
the creator, etc. Make it short and sweet, but not too short so folks the creator, etc. Make it short and sweet, but not too short so folks
don&apos;t simply skip over it entirely. don&apos;t simply skip over it entirely.
@ -73,12 +77,31 @@ export default function App() {
spacing={2} spacing={2}
justifyContent="center" justifyContent="center"
> >
<Button variant="contained">Main call to action</Button> <Button variant="contained"
<Button variant="outlined">Secondary action</Button> sx={{
bgcolor: '#5585A4',
":hover": {
bgcolor: '#69ACCD',
}
}}
>Main call to action</Button>
<Button variant="outlined"
sx={{
color: '#69ACCD',
borderColor: '#69ACCD',
":hover": {
borderColor: 'aliceblue',
}
}}
>Secondary action</Button>
</Stack> </Stack>
</Container> </Container>
</Box> </Box>
<Container sx={{ py: 8 }} maxWidth="md"> <Container
sx={{
py: 8,
bgcolor: '#0A0E1A',
}} maxWidth="fit-content">
{/* End hero unit */} {/* End hero unit */}
<Grid container spacing={4}> <Grid container spacing={4}>
@ -86,7 +109,12 @@ export default function App() {
{cards.map((card) => ( {cards.map((card) => (
<Grid item key={card} xs={12} sm={6} md={4}> <Grid item key={card} xs={12} sm={6} md={4}>
<Card <Card
sx={{ height: '100%', display: 'flex', flexDirection: 'column' }} sx={{
height: '100%',
display: 'flex',
flexDirection: 'column',
bgcolor: '#2B3E52'
}}
> >
<CardMedia <CardMedia
component="div" component="div"
@ -97,16 +125,18 @@ export default function App() {
image="https://source.unsplash.com/random?wallpapers" image="https://source.unsplash.com/random?wallpapers"
/> />
<CardContent sx={{flexGrow: 1}}> <CardContent sx={{flexGrow: 1}}>
<Typography gutterBottom variant="h5" component="h2"> <Typography gutterBottom variant="h5" component="h2"
color="#7DD6F6">
Jode1 Jode1
</Typography> </Typography>
<Typography> <Typography color="aliceblue">
This is a media card. You can use this section to describe the This is a media card. You can use this section to
describe the
content. content.
</Typography> </Typography>
</CardContent> </CardContent>
<CardActions> <CardActions>
<Button size="small">View</Button> <Button size="small" sx={{color: "#69ACCD"}}>View</Button>
<Button size="small">Edit</Button> <Button size="small">Edit</Button>
</CardActions> </CardActions>
</Card> </Card>
@ -117,14 +147,15 @@ export default function App() {
</Container> </Container>
</main> </main>
{/* Footer */} {/* Footer */}
<Box sx={{ bgcolor: 'background.paper', p: 6 }} component="footer"> <Box sx={{bgcolor: '#161E29', p: 6}} component="footer">
<Typography variant="h6" align="center" gutterBottom> <Typography variant="h6" align="center" gutterBottom
sx={{color: "aliceblue"}}>
Footer Footer
</Typography> </Typography>
<Typography <Typography
variant="subtitle1" variant="subtitle1"
align="center" align="center"
color="text.secondary" color="aliceblue"
component="p" component="p"
> >
Something here to give the footer a purpose! Something here to give the footer a purpose!