Skip to content

Commit d3c5780

Browse files
neilbrianpadorneilbrianpador
authored
Merge pull request protobi#19 from Planning-and-Development-BULSU/carousel2
Carousel2
2 parents c14022c + 751f093 commit d3c5780

File tree

2 files changed

+162
-19
lines changed

2 files changed

+162
-19
lines changed

‎src/sections/homePageSection/Components/bulsupips101.js‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -10,13 +10,13 @@ import Carousel6 from './carousel6';
1010
import Carousel7 from './carousel7';
1111

1212
const items = [
13-
{ component: <Carousel1 />, alt: 'Carousel 1' },
14-
{ component: <Carousel2 />, alt: 'Carousel 2' },
15-
{ component: <Carousel3 />, alt: 'Carousel 3' },
16-
{ component: <Carousel4 />, alt: 'Carousel 4' },
17-
{ component: <Carousel5 />, alt: 'Carousel 5' },
18-
{ component: <Carousel6 />, alt: 'Carousel 6' },
19-
{ component: <Carousel7 />, alt: 'Carousel 7' },
13+
{ component: <Carousel1 />, alt: 'Carousel 1' },
14+
{ component: <Carousel2 />, alt: 'Carousel 2' },
15+
{ component: <Carousel3 />, alt: 'Carousel 3' },
16+
{ component: <Carousel4 />, alt: 'Carousel 4' },
17+
{ component: <Carousel5 />, alt: 'Carousel 5' },
18+
{ component: <Carousel6 />, alt: 'Carousel 6' },
19+
{ component: <Carousel7 />, alt: 'Carousel 7' },
2020
];
2121

2222
const BulsuPips101 = () => {

‎src/sections/homePageSection/Components/carousel2.js‎

Lines changed: 155 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,163 @@
1-
import React from 'react';
1+
import React from "react";
2+
import { Typography } from "@material-ui/core";
3+
import BalanceOutlinedIcon from "@mui/icons-material/BalanceOutlined";
4+
import PlayArrowSharpIcon from "@mui/icons-material/PlayArrowSharp";
5+
26

37
const Carousel2 = () => {
4-
const styles = {
5-
backgroundColor: 'red',
6-
width: '100%',
7-
height: '100%',
8-
display: 'flex',
9-
justifyContent: 'center',
10-
alignItems: 'center',
11-
color: 'white',
12-
fontSize: '24px',
8+
const logo = {
9+
height: "100%",
10+
maxWidth: "100%",
11+
maxHeight: "120px",
12+
justifyContent: "center",
13+
alignItems: "center",
14+
};
15+
16+
const header = {
17+
display: "flex",
18+
justifyContent: "center",
19+
alignItems: "center",
20+
backgroundColor: "#7d0001",
21+
color: "white",
22+
fontStyle: "italic",
23+
width: "100%",
24+
marginBottom: "30px",
1325
};
1426

27+
const body = {
28+
display: "flex",
29+
flexDirection: "row",
30+
justifyContent: "center", // Space sections evenly
31+
alignItems: "flex-start",
32+
textAlign: "justify",
33+
padding: "20px", // Adds spacing from edges
34+
};
35+
36+
const bodyContent = {
37+
display: "flex",
38+
flexDirection: "column",
39+
justifyContent: "center",
40+
alignItems: "flex-start", // Align text to left
41+
textAlign: "justify",
42+
width: "45%", // Adjusts width for balance
43+
backgroundColor: "white", // Keeps it clean
44+
padding: "20px",
45+
borderRadius: "8px",
46+
};
47+
48+
const description_title = {
49+
display: "flex",
50+
alignItems: "center",
51+
gap: "10px",
52+
fontWeight: "bold",
53+
color: "blue",
54+
fontSize: "22px",
55+
fontStyle: "italic",
56+
alignSelf: "flex-start",
57+
58+
};
59+
60+
const intro = {
61+
display: "block",
62+
color: "#7d0001",
63+
fontSize: "22px",
64+
fontWeight: "bold",
65+
textAlign: 'justify'
66+
};
67+
68+
const description = {
69+
textAlign: "justify",
70+
display: "block",
71+
};
72+
73+
74+
const footer = {
75+
width: "100%",
76+
backgroundColor: "#7d0001",
77+
color: "white",
78+
textAlign: "center",
79+
padding: "20px 0",
80+
fontSize: "18px",
81+
marginTop: "5px",
82+
display: "flex",
83+
justifyContent: "space-between",
84+
paddingLeft: "20px",
85+
paddingRight: "20px",
86+
};
87+
88+
1589
return (
16-
<div style={styles}>
17-
Carousel 2
90+
<div>
91+
<div style={header}>
92+
<img
93+
src="./logo192.png"
94+
alt="BulSU PIPS Logo"
95+
style={{ ...logo, marginRight: "30px" }}
96+
/>
97+
<div>
98+
<Typography
99+
variant="h4"
100+
style={{ fontWeight: "bold", fontSize: "32px" }}
101+
>
102+
<span style={{ color: "#ffc001", fontSize: "28px" }}>
103+
BulSUPIPS
104+
</span>{" "}
105+
101
106+
</Typography>
107+
<Typography
108+
variant="h3"
109+
style={{ fontWeight: "bold", fontSize: "80px" }}
110+
>
111+
THE LAW
112+
</Typography>
113+
</div>
114+
<BalanceOutlinedIcon
115+
style={{ fontSize: "140px", marginLeft: "30px" }}
116+
/>
117+
</div>
118+
119+
<div style={body}>
120+
<div style={bodyContent}>
121+
<Typography variant="body1" gutterBottom>
122+
<span style={description_title}>
123+
<PlayArrowSharpIcon /> Executive Order No. 27 s. 2017
124+
</span>
125+
<span style={intro}>
126+
On the implementation of the 2017 – 2022 Philippine Development Plan (PDP).
127+
</span>
128+
<span style={description}>
129+
The implementation of the 2017 – 2022 Philippine Development Plan (PDP), the annual
130+
updating of Philippine Investment Program (PIP), and the updating of the Three-Year
131+
Rolling Infrastructure Projects (TRIP), has been exerting efforts to create its priority
132+
Projects and Programs (PAPs) for FY 2022 as an input to the budget preparation for the
133+
said Fiscal Year.
134+
</span>
135+
</Typography>
136+
</div>
137+
138+
<div style={bodyContent}>
139+
<Typography variant="body1" gutterBottom>
140+
<span style={description_title}>
141+
<PlayArrowSharpIcon /> Section 4, Feb 18, 2020
142+
</span>
143+
<span style={intro}>
144+
Call for preparation of FY 2022 PAPs by CHED.
145+
</span>
146+
<span style={description}>
147+
It requires SUC to seek endorsement/approval of the proposed PAPs from the Governing
148+
Board before its enrollment to the NEDA PIP Online (PIPOL) System.
149+
</span>
150+
</Typography>
151+
</div>
152+
</div>
153+
154+
{/* Footer */}
155+
<div style={footer}>
156+
<Typography variant="body1">
157+
[email protected]
158+
</Typography>
159+
<Typography variant="body1">www.bulsu.edu.ph</Typography>
160+
</div>
18161
</div>
19162
);
20163
};

0 commit comments

Comments
 (0)