39 | {/* Main Body of Slider */}
40 |
41 |
45 | {projects.map((_, index) => (
46 |
47 |
{
52 | document.getElementById(`${_.id}`).scrollIntoView({
53 | behavior: "smooth",
54 | });
55 | }}
56 | />
57 |
58 | ))}
59 |
60 |
61 |
62 |
63 | {
66 | for (let i = 0; i < pro.length; i++) {
67 | let x = pro[i];
68 | console.log(x);
69 | x.classList.remove("hidden");
70 | }
71 | }}
72 | >
73 | MORE
74 |
75 |
76 |
77 | {/* Dots below slider for moving slides */}
78 |
79 | {/* Number Showing Current Slide Number (Hide in case of small device) Small device width < 450px */}
80 |
81 | 0{index + 1} / 0{projects.length}
82 |
83 |
84 | {/* Previous arrow */}
85 |
{
90 | setIndex((prevIndex) =>
91 | prevIndex === 0 ? projects.length - 1 : prevIndex - 1
92 | );
93 | }}
94 | />
95 |
96 | {/* Dots */}
97 | {projects.map((_, id) => (
98 |
{
102 | setIndex(id);
103 | }}
104 | />
105 | ))}
106 |
107 | {/* Next arrow */}
108 |
{
113 | setIndex((prevIndex) =>
114 | prevIndex === projects.length - 1 ? 0 : prevIndex + 1
115 | );
116 | }}
117 | />
118 |
119 |
120 | );
121 | }
122 |
--------------------------------------------------------------------------------
/src/components/Slider/slider.css:
--------------------------------------------------------------------------------
1 | /* Slider component wrapper */
2 |
3 | .slider-wrapper {
4 | max-height: 92vh;
5 | height: 92vh;
6 | }
7 |
8 |
9 | /* Slide Show*/
10 |
11 | .slide-show {
12 | margin: 5px auto;
13 | overflow: hidden;
14 | max-width: 85vw;
15 | }
16 |
17 | /* Slide (Contain all items of announcement) */
18 |
19 | .slide {
20 | display: inline-block;
21 | position: relative;
22 | height: 400px;
23 | width: 100%;
24 | margin: 15px 0px 5px 0px;
25 | }
26 |
27 | .slide-img
28 | {
29 | height:400px;
30 | width: 90vw;
31 | }
32 |
33 | /* More info button */
34 | .more-info-btn {
35 | background-color: #fff;
36 | color: #00B4D8;
37 | border: none;
38 | cursor: pointer;
39 | padding: 12px 22px;
40 |
41 | font-weight: bold;
42 | }
43 |
44 | .more-info-btn-container {
45 | display: flex;
46 | position: relative;
47 |
48 | margin: 20px 0 20px 80vw;
49 |
50 | background: #fff;
51 | width: 110px;
52 |
53 | border: 6px solid #4ac0ee;
54 | color: #4ac0ee;
55 | font-weight: bold;
56 | font-size: large;
57 | text-transform: uppercase;
58 | text-align: center;
59 |
60 | transition: all 0.2s 0.2s ease-out;
61 | }
62 |
63 | .more-info-btn-container::after,
64 | .more-info-btn-container::before {
65 | position: absolute;
66 | width: 100%;
67 | max-width: 100%;
68 | top: 100%;
69 | left: -15px;
70 | bottom: -10px;
71 | content: "";
72 | z-index: 1;
73 | transition: all 0.2s ease-out 0.2s;
74 | }
75 |
76 | .more-info-btn-container::before {
77 | background: #4ac0ee;
78 | top: 10px;
79 | height: 100%;
80 | width: 15px;
81 | }
82 |
83 | .more-info-btn-container::after {
84 | width: 100%;
85 | background: #4ac0ee;
86 | right: 0px;
87 | height: 15px;
88 | }
89 |
90 | /* Hovering effect on more button */
91 | .more-info-btn:hover{
92 | background-color: #4ac0ee;
93 | color: #fff;
94 | }
95 |
96 | .more-info-btn-container:hover {
97 | background: #4ac0ee;
98 | color: #fff;
99 | }
100 |
101 | .more-info-btn-container:hover:after,
102 | .more-info-btn-container:hover:before {
103 | top: 100%;
104 | left: -15px;
105 | bottom: 0px;
106 | }
107 |
108 | .more-info-btn-container:hover:before {
109 | top: 0px;
110 | left: 0px;
111 | width: 0px;
112 | }
113 |
114 | .more-info-btn-container:hover:after {
115 | right: 0px;
116 | left: 0px;
117 | height: 0px;
118 | }
119 |
120 | /* slider */
121 |
122 | .slide-show-slider {
123 | white-space: nowrap;
124 | transition: ease 2000ms;
125 | }
126 |
127 |
128 | /* Button (Dots) */
129 |
130 | .slide-show-dots {
131 | display: flex;
132 | text-align: center;
133 | justify-content: center;
134 | margin: 20px 0;
135 | }
136 |
137 | .slide-show-dot {
138 | display: inline-block;
139 | height: 8px;
140 | width: 8px;
141 | border-radius: 50%;
142 | cursor: pointer;
143 | margin: 15px 9px 7px 0px;
144 | background-color: #CAF0F8;
145 | }
146 |
147 | .slide-show-dot:hover{
148 | background-color: #90E0EF;
149 | }
150 |
151 | .slide-show-dot.active {
152 | transform: scale3d(1.6,1.6,1.6);
153 | transition: ease-out 100ms;
154 | background-color: white;
155 | border: 1.5px solid #00B4D8;
156 | }
157 |
158 | /* Numbers Showing Count of slide */
159 | .slide-num
160 | {
161 | font-size: x-large;
162 | font-weight: 600;
163 | align-self: center;
164 | justify-content: center;
165 | margin-left: 40px;
166 | }
167 |
168 | /* Buttons (Arrows) */
169 |
170 | .btn-prev-slide,
171 | .btn-next-slide {
172 | height: 30px;
173 | width: 30px;
174 | cursor: pointer;
175 | margin-left: auto;
176 | margin-right:40px;
177 | border-radius: 50%;
178 |
179 | /* 3D View */
180 | box-shadow: 0px 14px 11px -10px rgb(0 0 0 / 50%);
181 | }
182 |
183 | .btn-next-slide
184 | {
185 | margin-left: 40px;
186 | box-shadow: 0px -14px 11px -10px rgb(0 0 0 / 50%);
187 | transform: rotate(180deg);
188 | }
189 |
190 | .btn-next-slide:hover,
191 | .btn-prev-slide:hover {
192 | box-shadow: 0px -0 11px -10px rgb(0 0 0 / 50%);
193 | background-color: #e2e2e2;
194 | }
195 |
196 | /* Responsiveness - (Make Image width 100vw) and Hide Numberbers below it */
197 |
198 | @media (max-width: 750px) {
199 | .btn-prev-slide{
200 | margin-left: 30px;
201 | margin-right: 30px;
202 | }
203 |
204 | .slide-num{
205 | margin: 0px 40px 0px 0px;
206 | }
207 | }
208 |
209 | @media (max-width: 550px) {
210 | .slide{
211 | height:230px;
212 | }
213 |
214 | .slide-img{
215 | height: 230px;
216 | }
217 |
218 | .slide-num{
219 | visibility: hidden;
220 | font-size: 0px;
221 | }
222 |
223 | .btn-prev-slide,
224 | .btn-next-slide{
225 | height: 40px;
226 | width: 40px;
227 | }
228 |
229 | .slide-show-dot{
230 | height: 9px;
231 | width: 9px;
232 | }
233 |
234 | .slide-show-dot.active{
235 | transform: scale3d(1.2, 1.2, 1.2);
236 | }
237 |
238 | .more-info-btn-container{
239 | margin-left: 70vw;
240 | }
241 | }
242 |
243 | /* Responsive based on height */
244 | @media (max-height: 600px) {
245 | .slide,
246 | .slide-img {
247 | height:200px;
248 | }
249 | }
--------------------------------------------------------------------------------
/src/components/common/Footer/Footer.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Link } from 'react-router-dom';
3 | import logoacm from "../../../utils/images/pec_acm_logo.jpg";
4 | import styles from "./footer.module.css";
5 |
6 | const Footer = () => {
7 | return (
8 | <>
9 |
10 |
18 |
19 |
Contact Info
20 |
31 |
33 |
Important Links
34 |
35 |
40 |
42 |
Social Links
43 |
51 |
53 |
54 | )
55 | }
56 |
57 | export default Footer
--------------------------------------------------------------------------------
/src/components/common/Footer/footer.module.css:
--------------------------------------------------------------------------------
1 | .mainFooter {
2 | width: 100%;
3 | height: max-content;
4 | background-color: #5069ff;
5 | background-image: url(/static/media/Student.724ce49f.png);
6 | background-repeat: no-repeat;
7 | }
8 |
9 | .logo {
10 | grid-column: 2/3;
11 | justify-content: flex-start;
12 | align-items: center;
13 | }
14 |
15 | .logo img {
16 | max-width: 76.54px;
17 | max-height: 76.54px;
18 | font-size: 2.5rem;
19 | font-weight: 400;
20 | color: cyan;
21 | }
22 |
23 | .logo h2 {
24 | font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
25 | letter-spacing: 0.3px;
26 | margin-top: 1rem;
27 | color: white;
28 | }
29 |
30 | .mainFooter span,
31 | .mainFooter a {
32 | color: white;
33 | }
--------------------------------------------------------------------------------
/src/components/common/Header/header.css:
--------------------------------------------------------------------------------
1 | @import url('https://fonts.googleapis.com/css2?family=Space+Mono&display=swap');
2 |
3 | * {
4 | margin:0;
5 | padding:0;
6 | box-sizing: border-box;
7 | font-family: 'Space Mono', monospace;
8 | }
9 |
10 | html {
11 | font-size: 62.5%;
12 | }
13 |
14 | a {
15 | text-decoration: none !important;
16 | color: inherit;
17 | }
18 |
19 | li {
20 | list-style: none;
21 | }
22 |
23 |
24 | /* navbar style */
25 |
26 | .main-nav {
27 | width: 100%;
28 | height: 10rem;
29 | display: grid;
30 | grid-template-columns: 10rem 1fr 2fr 1fr 10rem;
31 | box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px,
32 | rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
33 | }
34 | .no-wrap{
35 | white-space: nowrap;
36 | }
37 | .logo {
38 | display: grid;
39 | /* background-color: #3b5998; */
40 | grid-column: 2/3;
41 | justify-content: flex-start;
42 | align-items: center;
43 | }
44 |
45 | .logo img{
46 | max-width: 76.54px;
47 | max-height: 76.54px;
48 | font-size: 2.5rem;
49 | font-weight: 400;
50 | color: cyan;
51 | }
52 |
53 | .menu-link {
54 | grid-column: 3/4;
55 | }
56 |
57 | .menu-link ul {
58 | height: 10rem;
59 | display: flex;
60 | justify-content: space-around;
61 | align-items: center;
62 | }
63 |
64 | .social-media {
65 | grid-column: 4/5;
66 | }
67 |
68 | .social-media ul {
69 | height: 10rem;
70 | display: grid;
71 | grid-template-columns: 3fr repeat(4, 1fr);
72 | align-items: center;
73 | justify-content: flex-end;
74 | }
75 |
76 | .social-media ul li {
77 | text-align: right;
78 | }
79 |
80 | .social-media ul li:hover {
81 | transform: scale(1.5);
82 | }
83 |
84 | .social-media ul li:first-child {
85 | grid-column: 2/3;
86 | }
87 |
88 | /* ----------- menu parts ----------------- */
89 |
90 | .menu-link ul li {
91 | font-size: 1.8rem;
92 | }
93 |
94 | .menu-link ul li:hover {
95 | transform: scale(1.3);
96 | }
97 |
98 |
99 | .social-media ul li {
100 | font-size: 3rem;
101 | transition: ease 400ms;
102 | }
103 |
104 | .social-media .hamburger-menu {
105 | display: none;
106 | }
107 |
108 | .facebook {
109 | color: #3b5998;
110 | }
111 |
112 | .instagram {
113 | color: #c32aa3;
114 | }
115 |
116 | .youtube {
117 | color: #ff0000;
118 | }
119 |
120 | .linkedin{
121 | color:#0e76a8;
122 | }
123 |
124 | /* hover animation */
125 |
126 | .hover-underline-animation {
127 | display: inline-block;
128 | position: relative;
129 | /* color: #0087ca; */
130 | transition: ease 500ms;
131 | }
132 |
133 | .hover-underline-animation:after {
134 | content: '';
135 | position: absolute;
136 | width: 100%;
137 | transform: scaleX(0);
138 | height: 2px;
139 | bottom: -5px;
140 | left: 0;
141 | background-color: #9AD0EC;
142 | transform-origin: bottom right;
143 | transition: transform 0.25s ease-out;
144 | }
145 |
146 | .hover-underline-animation:hover:after {
147 | transform: scaleX(1);
148 | transform-origin: bottom left;
149 | }
150 |
151 |
152 | /* responsive */
153 |
154 | @media (max-width: 1080px) {
155 | .main-nav {
156 | height: 8rem;
157 | grid-template-columns: 2rem 3fr 3fr 1fr 2rem;
158 | }
159 |
160 | .logo,
161 | .menu-link ul,
162 | .social-media ul {
163 | height: 8rem;
164 | }
165 | .logo img{
166 | max-width: 56.54px;
167 | max-height: 56.54px;
168 | }
169 | }
170 |
171 | /* responsive css style */
172 | @media (max-width: 998px) {
173 | .main-nav {
174 | height: 7rem;
175 | grid-template-columns: 2rem 2fr 3fr 2rem 2rem;
176 | }
177 |
178 | .menu-link {
179 | display: none;
180 | }
181 |
182 | .logo,
183 | .social-media ul {
184 | height: 7rem;
185 | }
186 |
187 | .logo img{
188 | max-height: auto;
189 | max-width: 2em;
190 | }
191 |
192 | .mobile-menu-link {
193 | grid-column: 2/4;
194 | position: relative;
195 | z-index: 99;
196 | }
197 |
198 | .mobile-menu-link {
199 | background-color: white;
200 | display: grid;
201 | grid-column: 2/5;
202 | align-items: center;
203 | padding-left: 3rem;
204 | transition: all 2s linear;
205 | transform-origin: top;
206 | box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px,
207 | rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
208 | }
209 |
210 | .mobile-menu-link ul {
211 | display: flex;
212 | justify-content: space-around;
213 | flex-direction: column;
214 | align-items: flex-start;
215 | height: 100%;
216 | }
217 |
218 | .mobile-menu-link ul li:first-child {
219 | transition-delay: 0.2s;
220 | }
221 |
222 | .social-media {
223 | grid-row: 1/2;
224 | grid-column: 3/5;
225 | justify-items: end;
226 | align-items: center;
227 | transition: all 2s linear;
228 | }
229 |
230 | .social-media .social-media-desktop {
231 | height: 0;
232 | display: none;
233 | }
234 |
235 | .social-media {
236 | height: 7rem;
237 | display: flex;
238 | justify-self: end;
239 | align-items: center;
240 | }
241 |
242 | .social-media .hamburger-menu {
243 | display: block;
244 | font-size: 2.5rem;
245 | }
246 | }
247 |
248 | @media (max-width: 798px) {
249 | .main-nav {
250 | height: 6rem;
251 | grid-template-columns: 1rem 2fr 1fr 1fr 1rem;
252 | }
253 |
254 | .logo,
255 | .social-media ul {
256 | height: 6rem;
257 | }
258 |
259 | .social-media {
260 | height: 6rem;
261 | display: flex;
262 | justify-self: end;
263 | align-items: center;
264 | }
265 |
266 | .social-media .hamburger-menu {
267 | display: block;
268 | font-size: 2.5rem;
269 | }
270 | }
271 |
272 | @media (max-width: 520px) {
273 | .main-nav {
274 | height: 6rem;
275 | grid-template-columns: 1rem 4fr 1fr 1fr rem;
276 | }
277 |
278 | .logo,
279 | .social-media ul {
280 | height: 6rem;
281 | }
282 |
283 | .logo h2 {
284 | font-size: 2rem;
285 | }
286 |
287 | .social-media {
288 | height: 6rem;
289 | display: flex;
290 | justify-self: end;
291 | align-items: center;
292 | }
293 |
294 | .social-media .hamburger-menu {
295 | display: block;
296 | font-size: 2.5rem;
297 | }
298 |
299 | /* hero section */
300 |
301 | .hero-section h1 {
302 | font-size: 3.8rem;
303 | }
304 | }
305 |
--------------------------------------------------------------------------------
/src/components/common/Header/header.js:
--------------------------------------------------------------------------------
1 | import React, { useState } from 'react';
2 | import { Link } from 'react-router-dom';
3 |
4 | import { FaFacebookSquare, FaInstagramSquare, FaYoutubeSquare, FaLinkedin} from 'react-icons/fa';
5 | import { TiThMenuOutline } from 'react-icons/ti';
6 |
7 | import logoacm from "../../../utils/images/pec_acm_logo.jpg";
8 |
9 | import './header.css';
10 |
11 |
12 | const Header = () => {
13 | const [showMediaIcons, setShowMediaIcons] = useState(false);
14 |
15 | return (
16 | <>
17 |
18 | {/* Logo */}
19 |
20 |
21 |
23 |
26 |
27 |
33 |
36 |
42 | {/* Menu For Mobile */}
43 |
46 |
47 |
49 |
50 |
51 |
52 |
53 | )
54 | }
55 |
56 |
57 | export default Header;
58 |
--------------------------------------------------------------------------------
/src/components/common/ScrollTopButton/ScrollTopButton.jsx:
--------------------------------------------------------------------------------
1 | import React, { useEffect } from 'react';
2 | import style from './ScrollTopButton.module.css';
3 | import { HiArrowNarrowUp } from 'react-icons/hi';
4 |
5 | const ScrollTopButton = () => {
6 | const handleShowHideBtn = () => {
7 | const el = document.querySelector(`.${style['btn-wrap']}`);
8 | let curr = 0;
9 | window.onscroll = () => {
10 | if (window.scrollY >= 200) {
11 | const rect = document.body.getBoundingClientRect().top;
12 | el.classList[rect < curr ? 'add' : 'remove'](style.active);
13 |
14 | curr = rect;
15 | }
16 | };
17 | };
18 |
19 | useEffect(() => {
20 | handleShowHideBtn();
21 | }, []);
22 |
23 | return (
24 |
25 | {
28 | window.scrollTo({
29 | top: 0,
30 | behavior: 'smooth',
31 | });
32 | }}
33 | >
34 |
36 |
37 | );
38 | };
39 |
40 | export default ScrollTopButton;
41 |
--------------------------------------------------------------------------------
/src/components/common/ScrollTopButton/ScrollTopButton.module.css:
--------------------------------------------------------------------------------
1 | .btn-wrap {
2 | position: fixed;
3 | width: 80px;
4 | height: 80px;
5 | right: 0;
6 | bottom: 0;
7 | display: flex;
8 | justify-content: center;
9 | align-items: center;
10 | opacity: 0;
11 | z-index: -9;
12 | transform: translate(-40px, -40px);
13 | transition-delay: 0.3s;
14 | }
15 |
16 | .btn {
17 | background: #050c7a;
18 | width: 0;
19 | height: 0;
20 | border-radius: 50%;
21 | transition: cubic-bezier(.5,-.75,.7,2) 0.3s;
22 | box-shadow: #00000060 0px 5px 15px;
23 | cursor: pointer;
24 | overflow: hidden;
25 | }
26 |
27 | .btn:hover {
28 | background: #03095b;
29 | }
30 |
31 | .icon {
32 | color: white;
33 | margin: auto auto;
34 | font-size: 0;
35 | transition: font-size cubic-bezier(.5,-.75,.7,2) 0.3s;
36 | }
37 |
38 | /* if button is active */
39 | .btn-wrap.active {
40 | transition-delay: 0s;
41 | opacity: 1;
42 | z-index: 9;
43 | }
44 |
45 | .btn-wrap.active .btn {
46 | width: 70px;
47 | height: 70px;
48 | }
49 |
50 | .btn-wrap.active .icon {
51 | font-size: 2rem;
52 | }
53 |
--------------------------------------------------------------------------------
/src/data/blogslist.js:
--------------------------------------------------------------------------------
1 | export const Bloglist = [
2 | {
3 | key:1,
4 | author: "Admin",
5 | date: "17 August",
6 | title: "Tourist deaths in Costa Rica jeopardize safe dest ination reputation all time.",
7 | tags: "travel, life style, technology, fashion",
8 | content: "Over yielding doesn't so moved green saw meat hath fish he him from given yielding lesser cattle were fruitful lights. Given let have, lesser their made him above gathered dominion sixth. Creeping deep said can't called second. Air created seed heaven sixth created living Over yielding doesn't so moved green saw meat hath fish he him from given yielding lesser cattle were fruitful lights. Given let have, lesser their made him above gathered dominion sixth. Creeping deep said can't called second. Air created seed heaven sixth created living Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum.",
9 | image: "https://images.immediate.co.uk/production/volatile/sites/4/2021/08/mountains-7ddde89.jpg?quality=90&resize=768,574"
10 | },
11 | {
12 | key:2,
13 | author: "Admin",
14 | date: "17 June",
15 | title: "Tourist deaths in Costa Rica jeopardize safe dest ination reputation all time.",
16 | tags: "travel, life style, technology, fashion",
17 | content: "Over yielding doesn't so moved green saw meat hath fish he him from given yielding lesser cattle were fruitful lights. Given let have, lesser their made him above gathered dominion sixth. Creeping deep said can't called second. Air created seed heaven sixth created living Over yielding doesn't so moved green saw meat hath fish he him from given yielding lesser cattle were fruitful lights. Given let have, lesser their made him above gathered dominion sixth. Creeping deep said can't called second. Air created seed heaven sixth created living Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum.",
18 | image: "https://www.planetware.com/photos-large/AUS/australia-beautiful-places-sydney-harbour.jpg"
19 | },
20 | {
21 | key:3,
22 | author: "Admin",
23 | date: "17 May",
24 | title: "Tourist deaths in Costa Rica jeopardize safe dest ination reputation all time.",
25 | tags: "travel, life style, technology, fashion",
26 | content: "Over yielding doesn't so moved green saw meat hath fish he him from given yielding lesser cattle were fruitful lights. Given let have, lesser their made him above gathered dominion sixth. Creeping deep said can't called second. Air created seed heaven sixth created living Over yielding doesn't so moved green saw meat hath fish he him from given yielding lesser cattle were fruitful lights. Given let have, lesser their made him above gathered dominion sixth. Creeping deep said can't called second. Air created seed heaven sixth created living Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum.",
27 | image: "https://cdn.theculturetrip.com/wp-content/uploads/2020/08/aoraki-mt-cook-new-zealand-e1597846479229.jpg"
28 | },
29 | {
30 | key:4,
31 | author: "Admin",
32 | date: "17 April",
33 | title: "Tourist deaths in Costa Rica jeopardize safe dest ination reputation all time.",
34 | tags: "travel, life style, technology, fashion",
35 | content: "Over yielding doesn't so moved green saw meat hath fish he him from given yielding lesser cattle were fruitful lights. Given let have, lesser their made him above gathered dominion sixth. Creeping deep said can't called second. Air created seed heaven sixth created living Over yielding doesn't so moved green saw meat hath fish he him from given yielding lesser cattle were fruitful lights. Given let have, lesser their made him above gathered dominion sixth. Creeping deep said can't called second. Air created seed heaven sixth created living Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum.",
36 | image: "https://www.globalization-partners.com/wp-content/uploads/2014/06/globalpedia-hero-newzealand-1.jpg"
37 | }
38 | ]
39 |
40 | export default Bloglist;
--------------------------------------------------------------------------------
/src/data/projectlist.json:
--------------------------------------------------------------------------------
1 | [
2 | {
3 | "id": 0,
4 | "title": "ACM-CSS WEBSITE",
5 | "imgSrc": "pec_acm_logo.jpg",
6 | "description": "This is the official website of PEC ACM student chapter. This is an Open-Source project. Feel free to contribute in it.",
7 | "repo": "https://github.com/PEC-CSS/ACM-PEC-Website"
8 | },
9 | {
10 | "id": 1,
11 | "title": "Stock Watchlist",
12 | "imgSrc": "https://image.cnbcfm.com/api/v1/image/106895886-1623424433335-gettyimages-1318384825-210464_7.jpeg?v=1623685977&w=1340&h=500",
13 | "description": "An open source project developed by ACM-CSS, where you can keep an eye on how the market changes day-to-day.",
14 | "repo": "https://github.com/PEC-CSS/Stock-Watchlist"
15 | },
16 | {
17 | "id": 2,
18 | "title": "MovieDroid",
19 | "imgSrc": "https://via.placeholder.com/350",
20 | "description": "MovieDroid is a completely free and open source native android application that maintains an organized and categorized list of a user's favourite movies and TV shows. The app aims at helping a user keep track of the shows they have watched while keeping to up-to-date with the latest releases.",
21 | "repo": "https://github.com/PEC-CSS/MovieDroid"
22 | }
23 | ]
24 |
--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
1 | @tailwind base;
2 | @tailwind components;
3 | @tailwind utilities;
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 |
4 | import {Provider} from 'react-redux';
5 | import { createStore, applyMiddleware, compose } from 'redux';
6 | import reduxThunk from 'redux-thunk';
7 |
8 | import './index.css';
9 |
10 | import App from './App';
11 | import reducers from './utils/apis_redux/reducers';
12 |
13 | const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ||compose;
14 | const store = createStore(reducers,
15 | composeEnhancers(applyMiddleware(reduxThunk)));
16 |
17 |
18 | ReactDOM.render(
19 |
20 | ,
22 | document.getElementById('root')
23 | );
24 |
--------------------------------------------------------------------------------
/src/sanity/client.js:
--------------------------------------------------------------------------------
1 | import sanityClient from "@sanity/client";
2 |
3 | export default sanityClient({
4 | projectId: "9zrn54i9", // find this at manage.sanity.io or in your sanity.json
5 | dataset: "events", // this is from those question during 'sanity init'
6 | useCdn: true,
7 | });
8 |
9 | // server https://pecacm.sanity.studio/
--------------------------------------------------------------------------------
/src/setupTests.js:
--------------------------------------------------------------------------------
1 | // jest-dom adds custom jest matchers for asserting on DOM nodes.
2 | // allows you to do things like:
3 | // expect(element).toHaveTextContent(/react/i)
4 | // learn more: https://github.com/testing-library/jest-dom
5 | import '@testing-library/jest-dom';
6 |
--------------------------------------------------------------------------------
/src/utils/apis_redux/reducers/index.js:
--------------------------------------------------------------------------------
1 | import { combineReducers } from "redux";
2 |
3 | export default combineReducers({
4 | // reducers
5 | });
6 |
--------------------------------------------------------------------------------
/src/utils/helpers/index.js:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PEC-CSS/ACM-PEC-Website/b10b2b8d0ef310b196f7eac4873b98179fbd2876/src/utils/helpers/index.js
--------------------------------------------------------------------------------
/src/utils/helpers/scrollToTop.jsx:
--------------------------------------------------------------------------------
1 | import { useEffect } from "react";
2 | import { useLocation } from "react-router";
3 | import React from "react";
4 |
5 | const ScrollToTop = (props) => {
6 | const location = useLocation();
7 | useEffect(() => {
8 | window.scrollTo(0, 0);
9 | }, [location]);
10 |
11 | return <>{props.children}
12 | };
13 |
14 | export default ScrollToTop;
15 |
--------------------------------------------------------------------------------
/src/utils/images/Images.js:
--------------------------------------------------------------------------------
1 | // Don't Change Anything Region START ---------------------
2 |
3 | function makeGDriveLinkUsable(s)
4 | {
5 | var new_link = s.slice(0, 25);
6 | new_link += "uc?export=view&id=";
7 |
8 | for(var i = 32; i < s.length; i++)
9 | {
10 | if (s[i] === '/')
11 | break;
12 | new_link += s[i];
13 | }
14 |
15 | return new_link;
16 | }
17 |
18 | // ------------------------- Don't Change Anything Region ENDS
19 |
20 |
21 | // Paste drive Link and add it in the ProjectImg List
22 | // End name with a comma (Place links within quotes)
23 | // First 4 names will be displayed
24 | const ProjectImg = [
25 | {
26 | src: 'https://drive.google.com/file/d/1ven0z8524cKmY3cnJLQyjhXuTVCsYD2o/view?usp=sharing',
27 | id: "webapp"
28 | },
29 |
30 | {
31 | src: 'https://drive.google.com/file/d/1DsND2x20HvDsdY7Ve4PTfyGT-XSYhlPD/view?usp=sharing',
32 | id: "stock"
33 | },
34 | ];
35 |
36 |
37 | // Don't Change Anything Region STARTS ---------------
38 |
39 | for(var i = 0; i < ProjectImg.length; i++)
40 | ProjectImg[i].src = makeGDriveLinkUsable(ProjectImg[i].src);
41 |
42 | export default ProjectImg;
43 |
44 | // ------------------ Don't Change Anything Region ENDS
--------------------------------------------------------------------------------
/src/utils/images/Nishant_puri.JPG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PEC-CSS/ACM-PEC-Website/b10b2b8d0ef310b196f7eac4873b98179fbd2876/src/utils/images/Nishant_puri.JPG
--------------------------------------------------------------------------------
/src/utils/images/Student.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PEC-CSS/ACM-PEC-Website/b10b2b8d0ef310b196f7eac4873b98179fbd2876/src/utils/images/Student.png
--------------------------------------------------------------------------------
/src/utils/images/blog1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PEC-CSS/ACM-PEC-Website/b10b2b8d0ef310b196f7eac4873b98179fbd2876/src/utils/images/blog1.jpg
--------------------------------------------------------------------------------
/src/utils/images/home.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PEC-CSS/ACM-PEC-Website/b10b2b8d0ef310b196f7eac4873b98179fbd2876/src/utils/images/home.png
--------------------------------------------------------------------------------
/src/utils/images/left_point_btn.svg:
--------------------------------------------------------------------------------
1 |
2 |
5 |
--------------------------------------------------------------------------------
/src/utils/images/pec_acm_logo.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PEC-CSS/ACM-PEC-Website/b10b2b8d0ef310b196f7eac4873b98179fbd2876/src/utils/images/pec_acm_logo.jpg
--------------------------------------------------------------------------------
/src/utils/stylesheets/About-Us-body.css:
--------------------------------------------------------------------------------
1 | @import url("https://fonts.googleapis.com/css2?family=Special+Elite&display=swap");
2 |
3 |
4 | .Body1 {
5 | display: flex;
6 | flex-direction: column;
7 | background-color: black;
8 | }
9 |
10 | .heading {
11 | display: flex;
12 | flex-direction: column;
13 | align-items: center;
14 | gap: 4rem;
15 | width: 100%;
16 | max-height: 90vh;
17 | height: 90vh;
18 | background-color: black;
19 | padding: 10px;
20 | color: rgb(255, 255, 255);
21 | font-weight: 800;
22 | padding-top: 3%;
23 | }
24 |
25 | .mission {
26 | width: fit-content;
27 | height: max-content;
28 | font-size: 3.5rem;
29 | margin-top: 10%;
30 | align-self: center;
31 | font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
32 |
33 | }
34 |
35 | .statement {
36 | width: 100;
37 | height: max-content;
38 | text-align: center;
39 | font-size: 4.5rem;
40 | align-self: center;
41 | margin-bottom: 2rem;
42 | font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
43 |
44 | }
45 |
46 | /* <-----------------------------------------------------------------> */
47 | .arrow {
48 | position: absolute;
49 | top: 85vh;
50 | left: 50%;
51 | transform: translate(-50%, -50%);
52 | }
53 |
54 | .arrow span {
55 | display: block;
56 | width: 30px;
57 | height: 30px;
58 | border-bottom: 5px solid #ffffff;
59 | border-right: 5px solid #ffffff;
60 | transform: rotate(45deg);
61 | margin: -10px;
62 | animation: animate 2s infinite;
63 | }
64 |
65 | .arrow span:nth-child(2) {
66 | animation-delay: -0.2s;
67 | }
68 |
69 | .arrow span:nth-child(3) {
70 | animation-delay: -0.4s;
71 | }
72 |
73 | @keyframes animate {
74 | 0% {
75 | opacity: 0;
76 | transform: rotate(45deg) translate(-20px, -20px);
77 | }
78 |
79 | 50% {
80 | opacity: 1;
81 | }
82 |
83 | 100% {
84 | opacity: 0;
85 | transform: rotate(45deg) translate(20px, 20px);
86 | }
87 | }
88 |
89 | /* <-------------------------------------------------------------------> */
90 | .history {
91 | margin-left: 5%;
92 | margin-right: 5%;
93 | }
94 |
95 | .textbox1 {
96 | display: grid;
97 | grid-template-columns: 60% 40%;
98 | width: 100%;
99 | padding-left: 1rem;
100 | padding-right: 5rem;
101 | font-size: 1.75rem;
102 | background-color: black;
103 | }
104 |
105 | .heading1 {
106 | /* font-size: 3rem;
107 | padding-left: 5rem;
108 | font-family: Georgia, 'Times New Roman', Times, serif;
109 | font-weight: 600;
110 | width: max-content;
111 | color: rgb(241, 245, 245); */
112 | font-size: 3rem;
113 | padding-left: 5rem;
114 | padding-top: 5rem;
115 | font-weight: 600;
116 | width: max-content;
117 | color: rgb(241, 245, 245);
118 | line-height: 1.5 !important;
119 | font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif !important;
120 |
121 | }
122 |
123 | .text1 {
124 | max-width: 90%;
125 | padding-left: 5rem;
126 | padding-right: 5rem;
127 | padding-bottom: 5rem;
128 | color: #ffffff;
129 | font-size: 2rem;
130 | text-align: justify;
131 | font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
132 |
133 | letter-spacing: 0.3px;
134 | margin-top: 0;
135 | margin-bottom: 1rem;
136 | display: block;
137 | margin-block-start: 1em;
138 | margin-block-end: 1em;
139 | margin-inline-start: 0px;
140 | margin-inline-end: 0px;
141 | }
142 |
143 | .i1 {
144 | justify-content: center;
145 | align-items: center;
146 | }
147 |
148 | /* .img1::after {
149 | content: "";
150 | clear: both;
151 | display: table;
152 | } */
153 |
154 | /* <---------------------------------------------------------------------> */
155 |
156 | .textbox2 {
157 | display: grid;
158 | grid-template-columns: 40% 60%;
159 | width: 100%;
160 | padding-left: 5rem;
161 | padding-right: 1rem;
162 | font-size: 1.75rem;
163 | background-color: black;
164 | }
165 |
166 | .heading2 {
167 | /* font-size: 3rem;
168 | padding-left: 1rem;
169 | font-family: Georgia, 'Times New Roman', Times, serif;
170 | font-weight: 500;
171 | width: max-content;
172 | color: rgb(241, 245, 245); */
173 | font-size: 3rem;
174 | padding-left: 5rem;
175 | padding-top: 5rem;
176 | font-weight: 600;
177 | width: max-content;
178 | color: rgb(241, 245, 245);
179 | line-height: 1.5 !important;
180 | font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif !important;
181 |
182 | }
183 |
184 | .text2 {
185 | max-width: 90%;
186 | /* font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; */
187 | padding-left: 5rem;
188 | padding-right: 5rem;
189 | padding-bottom: 5rem;
190 | color: #ffffff;
191 | font-size: 2rem;
192 | font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
193 |
194 | letter-spacing: 0.3px;
195 | margin-top: 0;
196 | margin-bottom: 1rem;
197 | display: block;
198 | margin-block-start: 1em;
199 | margin-block-end: 1em;
200 | margin-inline-start: 0px;
201 | margin-inline-end: 0px;
202 | }
203 |
204 |
205 |
206 | .img2 {
207 | margin-top: 130px;
208 | width: 100%;
209 | max-height: 100%;
210 | float: right;
211 | border-radius: 2%;
212 | }
213 |
214 | /* .img1::after {
215 | content: "";
216 | clear: both;
217 | display: table;
218 | } */
219 |
220 | /* <---------------------------------------------------------------> */
221 |
222 | .textbox3 {
223 | display: grid;
224 | grid-template-columns: 60% 40%;
225 | width: 100%;
226 | padding-left: 0.5rem;
227 | padding-right: 5rem;
228 | font-size: 1.75rem;
229 | background-color: black;
230 | }
231 |
232 | .heading3 {
233 | /* font-size: 3rem;
234 | padding-left: 1rem;
235 | font-family: Georgia, 'Times New Roman', Times, serif;
236 | font-weight: 500;
237 | width: max-content;
238 | color: rgb(241, 245, 245); */
239 | font-size: 3rem;
240 | padding-left: 5rem;
241 | padding-top: 5rem;
242 | font-weight: 600;
243 | width: max-content;
244 | color: rgb(241, 245, 245);
245 | line-height: 1.5 !important;
246 | font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif !important;
247 |
248 | }
249 |
250 | .text3 {
251 | max-width: 90%;
252 | /* font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; */
253 | padding-left: 5rem;
254 | padding-right: 5rem;
255 | padding-bottom: 5rem;
256 | color: #ffffff;
257 | font-size: 2rem;
258 | text-align: justify;
259 | font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
260 | letter-spacing: 0.3px;
261 | margin-top: 0;
262 | margin-bottom: 1rem;
263 | display: block;
264 | margin-block-start: 1em;
265 | margin-block-end: 1em;
266 | margin-inline-start: 0px;
267 | margin-inline-end: 0px;
268 | }
269 |
270 | .img3 {
271 | width: 100%;
272 | max-height: 100%;
273 | float: right;
274 | border-radius: 2%;
275 | margin-top: 130px;
276 | }
277 |
278 | /* .img1::after {
279 | content: "";
280 | clear: both;
281 | display: table;
282 | } */
283 |
284 | /* <---------------------------------------------------------------> */
285 | .Body2 {
286 | display: flex;
287 | flex-direction: column;
288 | }
289 |
290 | .box1 {
291 | display: flex;
292 | width: 100%;
293 | height: 15rem;
294 | align-items: center;
295 | justify-content: center;
296 | font-size: 4rem;
297 | background-color: white;
298 | font-weight: 600;
299 | line-height: 1.5 !important;
300 | font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif !important;
301 |
302 | }
303 |
304 | .box2 {
305 | display: flex;
306 | width: 100%;
307 | height: 55rem;
308 | padding-left: 0.5rem;
309 | padding-right: 0.5rem;
310 | font-size: 1.75rem;
311 | background-color: #2a2a72;
312 | background-image: linear-gradient(315deg, #2a2a72 0%, #009ffd 74%);
313 | }
314 |
315 | .box3 {
316 | display: flex;
317 | width: 100%;
318 | height: 55rem;
319 | padding-left: 0.5rem;
320 | padding-right: 0.5rem;
321 | font-size: 1.75rem;
322 | background-color: white;
323 | align-items: center;
324 | justify-content: center;
325 | }
326 |
327 | .left {
328 | width: 40%;
329 | display: flex;
330 | align-items: center;
331 | justify-content: flex-end;
332 | }
333 |
334 | .img4 {
335 | height: 27rem;
336 | width: 27rem;
337 | border-radius: 100%;
338 | }
339 |
340 | .img5,
341 | .img6,
342 | .img7,
343 | .img8 {
344 | height: 40rem;
345 | width: 20%;
346 | padding: 2rem;
347 | }
348 |
349 | .right {
350 | width: 60%;
351 | display: flex;
352 | flex-direction: column;
353 | justify-content: center;
354 | align-items: center;
355 | }
356 |
357 | .heading4 {
358 | font-size: 3rem;
359 | padding-left: 5rem;
360 | padding-top: 5rem;
361 | font-weight: 600;
362 | width: 100%;
363 | color: rgb(241, 245, 245);
364 | line-height: 1.5 !important;
365 | font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif !important;
366 | }
367 |
368 | .text4 {
369 | width: 100%;
370 | /* font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; */
371 | padding-left: 5rem;
372 | padding-right: 20rem;
373 | color: #ffffff;
374 | font-size: 2rem;
375 | font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif !important;
376 |
377 | letter-spacing: 0.3px;
378 | margin-bottom: 0;
379 | margin-top: 0;
380 | display: block;
381 | margin-block-start: 1em;
382 | margin-block-end: 1em;
383 | margin-inline-start: 0px;
384 | margin-inline-end: 0px;
385 | }
386 |
387 | .btn1 {
388 | padding: 1.3em 2em;
389 | font-size: 14px;
390 | text-transform: uppercase;
391 | letter-spacing: 2.5px;
392 | font-weight: 500;
393 | color: #000;
394 | background-color: #aee1f9;
395 | background-image: linear-gradient(315deg, #aee1f9 0%, #f6ebe6 74%);
396 |
397 | border: none;
398 | border-radius: 45px;
399 | box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
400 | transition: all 0.3s ease 0s;
401 | cursor: pointer;
402 | outline: none;
403 | width: 30rem;
404 | }
405 |
406 | .btn1:hover {
407 | background-color: rgb(8, 170, 170);
408 | box-shadow: 0px 15px 20px rgba(46, 229, 157, 0.4);
409 | color: #fff;
410 | transform: translateY(-7px);
411 | }
412 |
413 | .btn1:active {
414 | transform: translateY(-1px);
415 | }
416 |
417 | .btn1.selec {
418 | background-color: #f5bfa6;
419 | background-image: none;
420 | }
421 |
422 | .smallbox {
423 | /* border:1px solid black; */
424 | width: 130rem;
425 | height: 50rem;
426 | }
427 |
428 | li {
429 | padding: 2rem;
430 | font-size: 2rem;
431 | font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
432 |
433 | letter-spacing: 0.3px;
434 | }
435 |
436 | .col1 {
437 | display: flex;
438 | align-items: center;
439 | justify-content: center;
440 | width: 50%;
441 | }
442 |
443 | .ebs {
444 | display: flex;
445 | align-items: center;
446 | justify-content: center;
447 | }
448 |
449 | .btn-div {
450 | display: flex;
451 | justify-content: center;
452 | }
453 |
454 | .flip-card-inner {
455 | position: relative;
456 | width: 100%;
457 | height: 100%;
458 | text-align: center;
459 | transition: transform 0.8s;
460 | transform-style: preserve-3d;
461 | }
462 |
463 | .flip-card {
464 | margin-top: 2%;
465 | perspective: 1000px;
466 | /* Remove this if you don't want the 3D effect */
467 | border-radius: 25px;
468 | background-color: #8ec5fc;
469 | background-image: linear-gradient(62deg, #8ec5fc 0%, #e0c3fc 100%);
470 | }
471 |
472 | .rotate {
473 | transform: rotateX(180deg);
474 | }
475 |
476 | .img1 {
477 | width: 100%;
478 | max-height: 100%;
479 | float: right;
480 | border-radius: 2%;
481 | margin-top: 130px;
482 | }
483 |
484 | .slide-left {
485 | display: flex;
486 | align-items: flex-start;
487 | justify-content: center;
488 | width: 100%;
489 | }
490 |
491 | .slide-right {
492 | width: 100%;
493 | overflow: hidden;
494 | }
495 |
496 | .slide-right p {
497 | animation: 2s slide-right;
498 | }
499 |
500 | .slide-right img {
501 | animation: 2s slide-right;
502 | }
503 |
504 | @keyframes slide-right {
505 | from {
506 | margin-left: -500px;
507 | }
508 |
509 | to {
510 | margin-left: 0%;
511 | }
512 | }
513 |
514 | .slide-left img {
515 | animation: 2s slide-left;
516 | }
517 |
518 | .slide-left p {
519 | animation: 2s slide-left;
520 | }
521 |
522 | @keyframes slide-left {
523 | from {
524 | margin-right: -500px;
525 | }
526 |
527 | to {
528 | margin-right: 0%;
529 | }
530 | }
--------------------------------------------------------------------------------
/src/utils/stylesheets/BlogCard.css:
--------------------------------------------------------------------------------
1 | .blog-card-root{
2 | width: 320px;
3 | height: 520px;
4 | margin: 10px 20px;
5 | padding: 15px;
6 | display: flex;
7 | flex-direction: column;
8 | border-radius: 10px;
9 | transition: transform 0.2s;
10 | box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 2px, rgba(0, 0, 0, 0.07) 0px 2px 4px, rgba(0, 0, 0, 0.07) 0px 4px 8px, rgba(0, 0, 0, 0.07) 0px 8px 16px, rgba(0, 0, 0, 0.07) 0px 16px 32px, rgba(0, 0, 0, 0.07) 0px 32px 64px;
11 | }
12 |
13 | .blog-card-content{
14 | padding: 10px;
15 | flex-basis: 70%;
16 | display: flex;
17 | flex-direction: column;
18 | }
19 |
20 | .blog-card-img{
21 | width: 290px;
22 | flex-basis: 30%;
23 | box-shadow: rgba(0, 0, 0, 0.04) 0px 3px 5px;
24 | }
25 |
26 | .blog-card-title{
27 | font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
28 | font-weight: bold;
29 | text-decoration: none;
30 | transition: all 0.3s ease-in-out;
31 | font-size: 18px;
32 | margin: 10px 0px;
33 | background-color: none;
34 | }
35 |
36 | .blog-card-description{
37 | font-size: 16px;
38 | line-height: 30px;
39 | font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
40 | color: rgb(148, 148, 148);
41 | }
42 |
43 | .blog-card-hr{
44 | margin-top: auto;
45 | }
46 |
47 | .blog-card-date-content{
48 | display: flex;
49 | flex-direction: row;
50 | align-items: center;
51 | margin: 10px 0px;
52 | }
53 | .calendar-img{
54 | height: 20px;
55 | width: 20px;
56 | }
57 |
58 | .blog-card-date{
59 | font-size: 14px;
60 | margin: 0px 10px;
61 | }
62 |
63 | @media screen and (max-width:1057px ) {
64 | .blog-card-root{
65 | width: 100%;
66 | height: auto;
67 | min-height: 400px;
68 | }
69 |
70 | .blog-card-img{
71 | width: 100%;
72 | height: auto;
73 | }
74 | }
--------------------------------------------------------------------------------
/src/utils/stylesheets/Events.css:
--------------------------------------------------------------------------------
1 | h1{
2 | display: block;
3 | }
4 |
5 | .event-wrapper{
6 | background-color: skyblue;
7 | max-height: 90vh;
8 | height: 90vh;
9 | display: flex;
10 | justify-content: center;
11 | align-items: center;
12 | -webkit-box-orient: vertical;
13 | flex-direction: column;
14 | }
15 | .center{
16 | align-items: center;
17 | /* align-self: center; */
18 | z-index: 20;
19 | margin-left: 12.5%;
20 |
21 | }
22 |
23 | .title{
24 | text-align: center;
25 | color: #fff;
26 | font-weight: 600;
27 | letter-spacing: 1px;
28 | font-size: 13vw;
29 | margin-bottom: 1px;
30 | }
31 |
32 | .events-section{
33 | background-color: #f5f5f5;
34 | padding: 80px 0;
35 | display: block;
36 | }
37 |
38 | .event-container{
39 | display: flex;
40 | flex-direction: column;
41 | align-items: center;
42 | width: 100%;
43 | padding-right: 30px;
44 | padding-left: 30px;
45 |
46 | }
47 |
48 | .event-card{
49 | /* width: 80vw; */
50 | display: block;
51 | width: 72vw;
52 | border-radius: 5px;
53 | overflow: hidden;
54 | box-shadow: 0 4px 8px rgb(31,31,31,0.2);
55 | margin-bottom: 50px;
56 |
57 |
58 | }
59 |
60 | .card-container{
61 | display: flex !important;
62 | align-items: center !important;
63 | width: 100%;
64 | /* height: 100%; */
65 | /* flex-wrap: wrap; */
66 | margin-right: -15px;
67 | box-sizing: border-box;
68 | }
69 |
70 | .card-img{
71 | padding-left: 0;
72 | padding-right: 0;
73 | flex: 0 0 40%;
74 | position: relative;
75 | width: 487px;
76 | max-width: 50%;
77 | display: block;
78 | overflow: hidden;
79 | position: relative;
80 | height: 487px;
81 | }
82 |
83 | .img-fluid{
84 | max-width: 100%;
85 | width: 100%;
86 | height: 100%;
87 | }
88 |
89 | .card-content{
90 | text-align: left;
91 | justify-content: flex-start;
92 | display: flex;
93 | flex-direction: column;
94 | padding: 20px 45px;
95 | width: 100%;
96 | }
97 |
98 | .event-date{
99 | margin-bottom: 15px;
100 | font-size: 25px;
101 | word-spacing: -2.5px;
102 | font-weight: 500;
103 | align-items: center;
104 | color: #666;
105 | display: flex;
106 | }
107 |
108 | .timer-icon{
109 | font-size: 20px;
110 | margin-right: 8px;
111 | }
112 |
113 | .event-heading{
114 | font-size: 2.25vw;
115 | margin-bottom: 1.5vw;
116 | font-weight: bold;
117 | /* white-space: pre-line; */
118 | line-height: 100%;
119 | }
120 |
121 | .event-details{
122 | font-size: 1.5vw;
123 | overflow: hidden;
124 | }
125 |
126 | .date{
127 | visibility: visible;
128 | }
129 |
130 |
131 | /* RESPONSIVE DESIGN FOR MOBILE */
132 |
133 | /* MOBILE RESOLUTIONS such as IPHONE 5, SE 2016 */
134 |
135 | /****** PORTRAIT *************/
136 | @media only screen
137 | and (min-width : 300px)
138 | and (max-width : 358px)
139 | and (orientation: portrait) {
140 |
141 | .event-container {
142 | flex-direction: column;
143 | width: 100%;
144 | padding: 0;
145 | }
146 | .event-card {
147 | width: 100vw;
148 | }
149 | .card-img {
150 | max-width: none;
151 | flex: 0 0 60%;
152 | }
153 | .card-content {
154 | padding: 5px 15px;
155 | }
156 | .event-date {
157 | font-size: 14px;
158 | }
159 | .event-heading {
160 | font-size: 12px;
161 | }
162 | .event-details {
163 | font-size: 10px;
164 | }
165 | }
166 | /* MOBILE RESOLUTIONS such as IPHONE 13Pro until mid range */
167 |
168 | @media only screen
169 | and (min-width : 359px)
170 | and (max-width : 480px)
171 | and (orientation: portrait) {
172 | .event-container {
173 | flex-direction: column;
174 | width: 100%;
175 | padding: 0;
176 | }
177 | .event-card {
178 | width: 100vw;
179 | }
180 | .card-img {
181 | max-width: none;
182 | flex: 0 0 60%;
183 | }
184 | .card-content {
185 | padding: 5px 15px;
186 | }
187 | .event-date {
188 | font-size: 18px;
189 | }
190 | .event-heading {
191 | font-size: 16px;
192 | }
193 | .event-details {
194 | font-size: 14px;
195 | }
196 |
197 | }
198 |
199 | /* RESPONSIVE DESIGN FOR TABLES */
200 | /* TABLES RESOLUTIONS Ipad mini, Air4, Ipad Pro 11 */
201 |
202 | /****** PORTRAIT *************/
203 | @media only screen
204 | and (min-width : 569px)
205 | and (max-width : 834px)
206 | and (orientation: portrait) {
207 |
208 | .event-container {
209 | flex-direction: column;
210 | width: 100%;
211 | padding: 0;
212 | }
213 | .event-card {
214 | width: 100vw;
215 | }
216 | .card-img {
217 | max-width: none;
218 | flex: 0 0 70%;
219 | }
220 | .card-content {
221 | padding: 5px 15px;
222 | }
223 | .event-date {
224 | font-size: 25px;
225 | }
226 | .event-heading {
227 | font-size: 20px;
228 | }
229 | .event-details {
230 | font-size: 18px;
231 | }
232 |
233 | }
234 |
235 |
--------------------------------------------------------------------------------
/src/utils/stylesheets/GroupCard.css:
--------------------------------------------------------------------------------
1 | .group-card-root {
2 | display: flex;
3 | flex-direction: row;
4 | flex-basis: 50%;
5 | margin: 10px 0px;
6 | }
7 |
8 | .group-card-title {
9 | font-weight: bold;
10 | font-size: 18px;
11 | font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
12 | }
13 |
14 | .group-card-description {
15 | font-size: 16px;
16 | font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
17 | color: rgb(148, 148, 148);
18 | }
19 |
20 | .group-card-image {
21 | height: 56px;
22 | width: 56px;
23 | margin: 0px 15px;
24 | padding: 5px;
25 | border-radius: 28px;
26 | background-color: rgb(168, 206, 221);
27 | }
28 |
29 | @media screen and (max-width:560px) {
30 | .group-card-root {
31 | flex-basis: 100%;
32 | }
33 | }
--------------------------------------------------------------------------------
/src/utils/stylesheets/blogs.css:
--------------------------------------------------------------------------------
1 | .blogs-section {
2 | background-color: whitesmoke;
3 | font-size: larger;
4 | padding: 10.5rem;
5 | display: flex;
6 | flex-direction: column;
7 | align-items: center;
8 | justify-items: center;
9 | }
10 |
11 | .blog-container {
12 | background-color: white;
13 | /* border-top-right-radius: 5%; */
14 | border-top-left-radius: 5%;
15 | margin-bottom: 10rem;
16 | }
17 |
18 | .blog-img {
19 | width: 100%;
20 | max-height: 80vh;
21 | border-top-left-radius: 5%;
22 | border-top-right-radius: 5%;
23 | }
24 |
25 | .blog-info {
26 | position: relative;
27 | display: flex;
28 | align-items: center;
29 | justify-content: center;
30 | background-color: white;
31 | width: max-content;
32 | margin-top: -6rem;
33 | padding-right: 2rem;
34 | border-top-right-radius: 4%;
35 | font-size: larger;
36 | }
37 |
38 | .blog-admin {
39 | padding: 2rem;
40 | display: flex;
41 | align-items: center;
42 | gap: 0.5rem;
43 | }
44 |
45 | .blog-date {
46 | padding: 2rem;
47 | display: flex;
48 | align-items: center;
49 | gap: 0.5rem;
50 | }
51 |
52 | .content-wrapper {
53 | margin: 2rem;
54 | padding: 2rem;
55 | }
56 |
57 | .blog-h1 {
58 | font-size: xx-large;
59 | margin: 10px 0px;
60 | }
61 |
62 | .blog-tags {
63 | font-size: medium;
64 | font-weight: bold;
65 | margin: 15px 0 10px 0;
66 | }
67 |
68 | .blog-content {
69 | padding-right: 4rem;
70 | }
71 |
72 | .read-or-hide {
73 | color: rgb(255, 118, 118);
74 | cursor: pointer;
75 | }
76 |
--------------------------------------------------------------------------------
/src/utils/stylesheets/footer.css:
--------------------------------------------------------------------------------
1 | @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&display=swap');
2 |
3 | .footer-main{
4 | display: flex;
5 | justify-content: space-between;
6 | color: white;
7 | background-color: black;
8 | font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
9 | }
10 |
11 | .footer-i{
12 | color: red;
13 | }
14 |
15 | .footer-left, .footer-right, .footer-center{
16 | width: 33.33vw;
17 | border: 1px solid black;
18 | padding: 35px;
19 | }
20 |
21 | .footer-hr{
22 | border: 0.3px solid #4c4c4c;
23 | margin: 15px 0px;
24 | }
25 |
26 | .lfooter-content, .rfooter-content{
27 | line-height: 1.7;
28 | padding-bottom: 17px;
29 | font-family: 'Montserrat', sans-serif;
30 | color: #a7a4a4;
31 | font-size: 14px;
32 |
33 | }
34 |
35 | .contact-footer{
36 | display: flex;
37 | padding: 10px 0px;
38 | align-items: center;
39 | }
40 |
41 | .contact-text-footer{
42 | padding-left: 20px ;
43 | font-family: 'Montserrat', sans-serif;
44 | }
45 |
46 |
47 | .footer-inputbox{
48 | height: 45px;
49 | display: flex;
50 | align-items: center;
51 | }
52 | .footer-input{
53 | height: 100%;
54 | width: 80%;
55 | outline: none;
56 | border-top-left-radius: 5px;
57 | border-bottom-left-radius: 5px;
58 | border: none;
59 | padding: 1rem 2rem;
60 | }
61 |
62 |
63 | .footer-input-btn{
64 | height: 100%;
65 | background-color: red;
66 |
67 | width: 20%;
68 | justify-content: center;
69 | align-items: center;
70 | display: flex;
71 | border-top-right-radius: 5px;
72 | border-bottom-right-radius: 5px;
73 | font-family: 'Montserrat', sans-serif;
74 | }
75 |
76 | .cfooter-content{
77 | display: flex;
78 | flex-direction: column;
79 | align-items: center;
80 | }
81 |
82 | .cfooter-post{
83 | width: 100%;
84 | display: flex;
85 | align-items: center;
86 | padding: 0px 18px;
87 | }
88 |
89 | .cfooter-text{
90 | padding: 22px;
91 | }
92 |
93 | .cfooter-text-title,.cfooter-text-info{
94 | font-family: 'Montserrat', sans-serif;
95 | padding: 3px 0px;
96 | }
97 |
98 | .cfooter-text-info{
99 | color: #a7a4a4;
100 | }
101 |
102 | .footer-input-btn:hover{
103 | cursor: pointer;
104 | }
105 |
106 | .img-footer{
107 | height: 65px;
108 | width: 90px;
109 | }
110 |
111 | .cfooter-post:hover{
112 | cursor: pointer;
113 | }
114 |
115 | @media screen and (max-width: 1023px) {
116 |
117 | .cfooter-post{
118 | margin: 5px;
119 | }
120 | .cfooter-text, .cfooter-post{
121 | padding: 0px 6px 0px 10px;
122 | }
123 | }
124 |
125 | @media screen and (max-width: 850px) {
126 |
127 | .footer-main{
128 | flex-direction: column;
129 | }
130 |
131 | .footer-left, .footer-right, .footer-center{
132 | width: 100%;
133 | }
134 | }
--------------------------------------------------------------------------------
/src/utils/stylesheets/home.css:
--------------------------------------------------------------------------------
1 | .home {
2 | background-color: snow;
3 | height: 400px;
4 | display: flex;
5 | justify-content: center;
6 | align-items: center;
7 | }
8 |
9 | .home-content {
10 | font-size: 100px;
11 | margin-top: 12vh;
12 | }
13 |
14 | .home-wrapper {
15 | background-image: url("../images/home.png");
16 | background-repeat: no-repeat;
17 | background-position: center center;
18 | background-size: cover;
19 | padding: 20rem 8rem;
20 | max-height: 80vh;
21 | display: flex;
22 | justify-content: center;
23 | align-items: center;
24 | -webkit-box-orient: vertical;
25 | flex-direction: column;
26 | }
27 |
28 | @keyframes float {
29 | 0% {
30 | /* box-shadow: 0 5px 15px 0px rgba(0, 0, 0, 0.6); */
31 | transform: translate(0px);
32 | }
33 |
34 | 50% {
35 | /* box-shadow: 0 25px 15px 0px rgba(0, 0, 0, 0.2); */
36 | transform: translate(15px, -20px);
37 | }
38 |
39 | 100% {
40 | /* box-shadow: 0 5px 15px 0px rgba(0, 0, 0, 0.6); */
41 | transform: translate(0px);
42 | }
43 | }
44 |
45 | @keyframes float-rev {
46 | 0% {
47 | /* box-shadow: 0 5px 15px 0px rgba(0, 0, 0, 0.6); */
48 | transform: translate(0px);
49 | }
50 |
51 | 50% {
52 | /* box-shadow: 0 25px 15px 0px rgba(0, 0, 0, 0.2); */
53 | transform: translate(20px, 10px);
54 | }
55 |
56 | 100% {
57 | /* box-shadow: 0 5px 15px 0px rgba(0, 0, 0, 0.6); */
58 | transform: translate(0px);
59 | }
60 | }
61 |
62 | .home-imgs {
63 | transform: translatey(0px);
64 | animation: float 4s ease-in-out infinite;
65 | }
66 |
67 | .home-imgs-2 {
68 | transform: translatex(0px);
69 | animation: float-rev 3s ease-in-out infinite;
70 | }
71 |
72 | .h1-title {
73 | text-align: center;
74 | color: #fff;
75 | font-weight: 700;
76 | letter-spacing: 1px;
77 | font-size: 9vh;
78 | margin-bottom: 1px;
79 | line-height: 8vh;
80 | }
81 |
82 | .home-wrapper-description {
83 | text-align: center;
84 | font-size: 2vw;
85 | padding: 40px 0;
86 | display: block;
87 | line-height: 7vh;
88 | }
89 |
90 | .home-content-title {
91 | margin-top: 50vh;
92 | text-align: center;
93 | padding-top: 2vh;
94 | font-size: 4rem;
95 | }
96 |
97 | .home-content-br {
98 | width: 7rem;
99 | margin: 0 auto;
100 | }
101 |
102 | .content-items {
103 | display: grid;
104 | padding: 0 2rem;
105 | grid-template-columns: 1fr 1fr 1fr;
106 | width: 100%;
107 | }
108 |
109 | .content-item {
110 | display: flex;
111 | flex-direction: row;
112 | padding: 5%;
113 | margin: 0 auto;
114 |
115 | }
116 |
117 | .content-item-number {
118 | color: #3f2b96;
119 | font-size: 6rem;
120 | font-weight: 800;
121 | margin-right: 0.5rem;
122 |
123 | }
124 |
125 | .content-item-para-title {
126 | width: 80%;
127 | height: 100%;
128 |
129 |
130 | }
131 |
132 | .content-item-title {
133 | font-size: 2rem;
134 | font-weight: 600;
135 | }
136 |
137 | .content-item-para {
138 | font-size: 1.5rem;
139 |
140 | }
141 |
142 | .c {
143 | display: flex;
144 | flex-direction: row;
145 | background-color: #fafafad9;
146 | box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
147 | }
148 |
149 |
150 | .groups-content {
151 | flex-basis: 50%;
152 | padding: 20px;
153 | }
154 |
155 | .groups-list {
156 | margin: 20px 0px;
157 | display: flex;
158 | flex-direction: row;
159 | flex-wrap: wrap;
160 | }
161 |
162 | .d {
163 | margin-top: 0;
164 | display: flex;
165 | flex-direction: row;
166 | background-color: #fafafad9;
167 | box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
168 | }
169 |
170 | .whowe-content {
171 | padding: 20px;
172 | flex-basis: 50%;
173 | }
174 |
175 | .whowe-info {
176 | font-size: 17px;
177 | ily: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-font-famserif;
178 | color: rgb(148, 148, 148);
179 | margin: 15px;
180 | line-height: 2.8rem;
181 | }
182 |
183 | .parallax-image {
184 | flex-basis: 50%;
185 | background-repeat: no-repeat;
186 | background-attachment: fixed;
187 | background-size: contain;
188 | min-height: 300px;
189 | }
190 |
191 | .groups-image {
192 | background-image: url("https://imageio.forbes.com/specials-images/imageserve/5f2da49df99ed4ddb7c00b9c/Software-developer-holds-a-pen-pointing-to-a-computer-screen--analyzing-the-code-/960x0.jpg?fit=bounds&format=jpg&width=960");
193 | background-position: right;
194 | }
195 |
196 | .whowe-image {
197 | background-image: url('https://pm-powerconsulting.com/wp-content/uploads/2018/04/agileteam.jpg');
198 | background-position: left;
199 | }
200 |
201 | .whowe-buttons {
202 | display: flex;
203 | flex-direction: row;
204 | padding: 20px;
205 | align-items: center;
206 | }
207 |
208 | .whowe-button {
209 | text-decoration: none;
210 | text-align: center;
211 | font-size: 12px;
212 | border: 2px solid;
213 | padding: 12px;
214 | border-radius: 5px;
215 | letter-spacing: 2px;
216 | font-weight: bold;
217 | text-transform: uppercase;
218 | font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
219 | box-shadow: rgba(0, 0, 0, 0.3) 0px 5px 15px;
220 | transition: all 0.3s ease-in-out;
221 | }
222 |
223 | .whowe-team {
224 | margin-left: 20px;
225 | border-color: rgb(5, 12, 122);
226 | background-color: rgb(5, 12, 122);
227 | color: white;
228 | }
229 |
230 | .whowe-team:hover {
231 | background-color: rgb(3, 9, 91);
232 | color: white;
233 | border-color: rgb(3, 9, 91);
234 | }
235 |
236 | .f {
237 | margin-bottom: 40px;
238 | }
239 |
240 | .blogs-list {
241 | display: flex;
242 | flex-direction: row;
243 | align-items: center;
244 | justify-content: center;
245 | margin: 10px;
246 | }
247 |
248 | @media screen and (max-width: 768px) {
249 | .content-items {
250 | display: flex;
251 | flex-direction: column;
252 | }
253 |
254 | .content-item-para-title {
255 | width: 100%;
256 | height: 100%;
257 | margin: 0 auto;
258 | padding: 5%;
259 | }
260 |
261 |
262 | }
263 |
264 | @media screen and (max-width:1002px) {
265 | .c {
266 | flex-direction: column;
267 | }
268 |
269 | .d {
270 | flex-direction: column-reverse;
271 | }
272 |
273 | .groups-content {
274 | flex-basis: 100%;
275 | }
276 |
277 | .whowe-content {
278 | flex-basis: 100%;
279 | }
280 |
281 | .whowe-buttons {
282 | justify-content: center;
283 | }
284 |
285 | .parallax-image {
286 | background-position: center;
287 | background-size: cover;
288 | flex-basis: 100%;
289 | }
290 |
291 | .content-item {
292 | padding: 10px;
293 | }
294 | }
295 |
296 | @media screen and (max-width:1057px) {
297 | .blogs-list {
298 | flex-direction: column;
299 | }
300 | }
--------------------------------------------------------------------------------
/src/utils/stylesheets/project.css:
--------------------------------------------------------------------------------
1 | @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&display=swap');
2 |
3 |
4 | .project-card-h2{
5 | font-size: 50px;
6 | margin-left: 10px;
7 | font-weight: boldest;
8 | }
9 | .project-card-text{
10 | font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
11 |
12 | font-size: 17px;
13 | margin-left: 10px;
14 | }
15 | .project-card-h4{
16 | font-size: 20px;
17 | margin-left: 10px;
18 | }
19 |
20 | .project-card-link{
21 | padding-left: 6px;
22 | font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
23 | }
24 | .project-card-link:hover{
25 | text-decoration: underline;
26 | }
27 | .project-card-desc{
28 | padding: 30px;
29 | }
30 | .project-tile{
31 | background-color: lightblue;
32 | display: inline-flex;
33 | margin: 30px 50px 30px 50px;
34 | align-items: center;
35 | width: 75%;
36 | margin-left: 12.5%;
37 | display: flex;
38 | z-index: 10;
39 | font-family: Arial, Helvetica, sans-serif;
40 | filter: drop-shadow(0 0 .2rem black);
41 | backdrop-filter: blur(10px);
42 | }
43 |
44 | .project-tile:hover{
45 | filter: drop-shadow(0 0 1.3rem black);
46 | transform: scale(1.05);
47 | }
48 | @media screen and (max-width: 1024px) {
49 | .project-tile{
50 | display: flow-root;
51 | }
52 | }
53 | @media screen and (max-width: 510px) {
54 | .project-project-card-img{
55 | width: 250px;
56 | height: 250px;
57 | }
58 | .project-tile{
59 | margin: auto auto 20px auto;
60 | }
61 | }
62 |
--------------------------------------------------------------------------------
/src/utils/stylesheets/projectCard.css:
--------------------------------------------------------------------------------
1 |
2 | .card-content{
3 | position:relative;
4 | overflow:hidden;
5 | }
6 | .more-btn__wrapper{
7 | position:absolute;
8 | bottom:0;
9 | right:0;
10 | width:100%;
11 | padding:1.5rem;
12 | text-align:right;
13 | }
14 | .more-btn{
15 | font-weight:bolder;
16 | font-size:1rem;
17 | color:#888;
18 | }
19 | .project-card-img{
20 | width:300px;
21 | height:230px;
22 | }
23 | .projectdiv{
24 | display:flex;
25 | justify-content:center;
26 | padding:2rem;
27 | }
28 |
--------------------------------------------------------------------------------
/src/utils/stylesheets/slider.css:
--------------------------------------------------------------------------------
1 | /* Slide Show*/
2 |
3 | .slide-show {
4 | margin: 5px auto;
5 | overflow: hidden;
6 | max-width: 85vw;
7 | }
8 |
9 | /* Slide (Contain all items of announcement) */
10 |
11 | .slide {
12 | display: inline-block;
13 | position: relative;
14 | height: 400px;
15 | width: 100%;
16 | margin: 15px 0px 5px 0px;
17 | }
18 |
19 | .slide-img
20 | {
21 | height:400px;
22 | width: 90vw;
23 | }
24 |
25 | /* More info button */
26 | .more-info-btn {
27 | background-color: #fff;
28 | color: #00B4D8;
29 | border: none;
30 | cursor: pointer;
31 | padding: 12px 27px;
32 |
33 | font-weight: bold;
34 | }
35 |
36 | .more-info-btn-container {
37 | display: flex;
38 | position: relative;
39 |
40 | margin: 20px 0 20px 80vw;
41 |
42 | background: #fff;
43 | width: 110px;
44 |
45 | border: 6px solid #4ac0ee;
46 | color: #4ac0ee;
47 | font-weight: bold;
48 | font-size: large;
49 | text-transform: uppercase;
50 | text-align: center;
51 |
52 | transition: all 0.2s 0.2s ease-out;
53 | }
54 |
55 | .more-info-btn-container::after,
56 | .more-info-btn-container::before {
57 | position: absolute;
58 | width: 100%;
59 | max-width: 100%;
60 | top: 100%;
61 | left: -15px;
62 | bottom: -10px;
63 | content: "";
64 | z-index: 1;
65 | transition: all 0.2s ease-out 0.2s;
66 | }
67 |
68 | .more-info-btn-container::before {
69 | background: #4ac0ee;
70 | top: 10px;
71 | height: 100%;
72 | width: 15px;
73 | }
74 |
75 | .more-info-btn-container::after {
76 | width: 100%;
77 | background: #4ac0ee;
78 | right: 0px;
79 | height: 15px;
80 | }
81 |
82 | /* Hovering effect on more button */
83 | .more-info-btn:hover{
84 | background-color: #4ac0ee;
85 | color: #fff;
86 | }
87 |
88 | .more-info-btn-container:hover {
89 | background: #4ac0ee;
90 | color: #fff;
91 | }
92 |
93 | .more-info-btn-container:hover:after,
94 | .more-info-btn-container:hover:before {
95 | top: 100%;
96 | left: -15px;
97 | bottom: 0px;
98 | }
99 |
100 | .more-info-btn-container:hover:before {
101 | top: 0px;
102 | left: 0px;
103 | width: 0px;
104 | }
105 |
106 | .more-info-btn-container:hover:after {
107 | right: 0px;
108 | left: 0px;
109 | height: 0px;
110 | }
111 |
112 | /* slider */
113 |
114 | .slide-show-slider {
115 | white-space: nowrap;
116 | transition: ease 2000ms;
117 | }
118 |
119 |
120 | /* Button (Dots) */
121 |
122 | .slide-show-dots {
123 | display: flex;
124 | text-align: center;
125 | justify-content: center;
126 | margin: 20px 0;
127 | }
128 |
129 | .slide-show-dot {
130 | display: inline-block;
131 | height: 8px;
132 | width: 8px;
133 | border-radius: 50%;
134 | cursor: pointer;
135 | margin: 15px 9px 7px 0px;
136 | background-color: #CAF0F8;
137 | }
138 |
139 | .slide-show-dot:hover{
140 | background-color: #90E0EF;
141 | }
142 |
143 | .slide-show-dot.active {
144 | transform: scale3d(1.6,1.6,1.6);
145 | transition: ease-out 100ms;
146 | background-color: white;
147 | border: 1.5px solid #00B4D8;
148 | }
149 |
150 | /* Numbers Showing Count of slide */
151 | .slide-num
152 | {
153 | font-size: x-large;
154 | font-weight: 600;
155 | align-self: center;
156 | justify-content: center;
157 | margin-left: 40px;
158 | }
159 |
160 | /* Buttons (Arrows) */
161 |
162 | .btn-prev-slide,
163 | .btn-next-slide {
164 | height: 30px;
165 | width: 30px;
166 | cursor: pointer;
167 | margin-left: auto;
168 | margin-right:40px;
169 | border-radius: 50%;
170 |
171 | /* 3D View */
172 | box-shadow: 0px 14px 11px -10px rgb(0 0 0 / 50%);
173 | }
174 |
175 | .btn-next-slide
176 | {
177 | margin-left: 40px;
178 | box-shadow: 0px -14px 11px -10px rgb(0 0 0 / 50%);
179 | transform: rotate(180deg);
180 | }
181 |
182 | .btn-next-slide:hover,
183 | .btn-prev-slide:hover {
184 | box-shadow: 0px -0 11px -10px rgb(0 0 0 / 50%);
185 | background-color: #e2e2e2;
186 | }
187 |
188 | /* Responsiveness - (Make Image width 100vw) and Hide Numberbers below it */
189 |
190 | @media (max-width: 750px) {
191 | .btn-prev-slide{
192 | margin-left: 30px;
193 | margin-right: 30px;
194 | }
195 |
196 | .slide-num{
197 | margin: 0px 40px 0px 0px;
198 | }
199 | }
200 |
201 | @media (max-width: 550px) {
202 | .slide{
203 | height:230px;
204 | }
205 |
206 | .slide-img{
207 | height: 230px;
208 | }
209 |
210 | .slide-num{
211 | visibility: hidden;
212 | font-size: 0px;
213 | }
214 |
215 | .btn-prev-slide,
216 | .btn-next-slide{
217 | height: 40px;
218 | width: 40px;
219 | }
220 |
221 | .slide-show-dot{
222 | height: 9px;
223 | width: 9px;
224 | }
225 |
226 | .slide-show-dot.active{
227 | transform: scale3d(1.2, 1.2, 1.2);
228 | }
229 |
230 | .more-info-btn-container{
231 | margin-left: 70vw;
232 | }
233 | }
234 |
235 | /* Responsive based on height */
236 | @media (max-height: 600px) {
237 | .slide,
238 | .slide-img {
239 | height:200px;
240 | }
241 | }
--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
1 | /** @type {import('tailwindcss').Config} */
2 | module.exports = {
3 | content: [
4 | "./src/**/*.{js,jsx,ts,tsx}",
5 | "./src/*.{js,jsx,ts,tsx}",
6 | "./src/**/**/*.{js,jsx,ts,tsx}",
7 | "./src/**/**/**/*.{js,jsx,ts,tsx}",
8 | "./src/**/*.{js,jsx,ts,tsx}",
9 | ],
10 | theme: {
11 | extend: {
12 | colors: {
13 | 'Dorange': "#ef2853",
14 | 'Dblue': "#08104d",
15 | 'Lblue': "#ecf2fe",
16 | 'Mblue': "#273fdf",
17 | }
18 | },
19 | },
20 | plugins: [],
21 | }
22 |
--------------------------------------------------------------------------------
16 | 
67 | 
101 | 
174 | 
175 | 
176 | 
177 | 
31 | 
20 | 
73 | 
74 | 
75 | 
76 |