Initial commit
This commit is contained in:
+21
@@ -0,0 +1,21 @@
|
||||
# build output
|
||||
dist/
|
||||
|
||||
# generated types
|
||||
.astro/
|
||||
|
||||
# dependencies
|
||||
node_modules/
|
||||
|
||||
# logs
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
|
||||
# environment variables
|
||||
.env
|
||||
.env.production
|
||||
|
||||
# macOS-specific files
|
||||
.DS_Store
|
||||
@@ -0,0 +1,6 @@
|
||||
{
|
||||
"trailingComma": "es5",
|
||||
"tabWidth": 2,
|
||||
"semi": true,
|
||||
"singleQuote": true
|
||||
}
|
||||
Vendored
+4
@@ -0,0 +1,4 @@
|
||||
{
|
||||
"recommendations": ["astro-build.astro-vscode"],
|
||||
"unwantedRecommendations": []
|
||||
}
|
||||
Vendored
+11
@@ -0,0 +1,11 @@
|
||||
{
|
||||
"version": "0.2.0",
|
||||
"configurations": [
|
||||
{
|
||||
"command": "./node_modules/.bin/astro dev",
|
||||
"name": "Development server",
|
||||
"request": "launch",
|
||||
"type": "node-terminal"
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,54 @@
|
||||
# Astro Starter Kit: Basics
|
||||
|
||||
```sh
|
||||
npm create astro@latest -- --template basics
|
||||
```
|
||||
|
||||
[](https://stackblitz.com/github/withastro/astro/tree/latest/examples/basics)
|
||||
[](https://codesandbox.io/p/sandbox/github/withastro/astro/tree/latest/examples/basics)
|
||||
[](https://codespaces.new/withastro/astro?devcontainer_path=.devcontainer/basics/devcontainer.json)
|
||||
|
||||
> 🧑🚀 **Seasoned astronaut?** Delete this file. Have fun!
|
||||
|
||||
|
||||
|
||||
## 🚀 Project Structure
|
||||
|
||||
Inside of your Astro project, you'll see the following folders and files:
|
||||
|
||||
```text
|
||||
/
|
||||
├── public/
|
||||
│ └── favicon.svg
|
||||
├── src/
|
||||
│ ├── components/
|
||||
│ │ └── Card.astro
|
||||
│ ├── layouts/
|
||||
│ │ └── Layout.astro
|
||||
│ └── pages/
|
||||
│ └── index.astro
|
||||
└── package.json
|
||||
```
|
||||
|
||||
Astro looks for `.astro` or `.md` files in the `src/pages/` directory. Each page is exposed as a route based on its file name.
|
||||
|
||||
There's nothing special about `src/components/`, but that's where we like to put any Astro/React/Vue/Svelte/Preact components.
|
||||
|
||||
Any static assets, like images, can be placed in the `public/` directory.
|
||||
|
||||
## 🧞 Commands
|
||||
|
||||
All commands are run from the root of the project, from a terminal:
|
||||
|
||||
| Command | Action |
|
||||
| :------------------------ | :----------------------------------------------- |
|
||||
| `npm install` | Installs dependencies |
|
||||
| `npm run dev` | Starts local dev server at `localhost:4321` |
|
||||
| `npm run build` | Build your production site to `./dist/` |
|
||||
| `npm run preview` | Preview your build locally, before deploying |
|
||||
| `npm run astro ...` | Run CLI commands like `astro add`, `astro check` |
|
||||
| `npm run astro -- --help` | Get help using the Astro CLI |
|
||||
|
||||
## 👀 Want to learn more?
|
||||
|
||||
Feel free to check [our documentation](https://docs.astro.build) or jump into our [Discord server](https://astro.build/chat).
|
||||
@@ -0,0 +1,17 @@
|
||||
import { defineConfig } from 'astro/config';
|
||||
import vercel from '@astrojs/vercel/serverless';
|
||||
|
||||
import sitemap from "@astrojs/sitemap";
|
||||
|
||||
import react from "@astrojs/react";
|
||||
|
||||
// https://astro.build/config
|
||||
export default defineConfig({
|
||||
output: 'server',
|
||||
adapter: vercel({
|
||||
imageService: false,
|
||||
functionPerRoute: false
|
||||
}),
|
||||
site: "https://www.upiecep.org",
|
||||
integrations: [react(), sitemap()]
|
||||
});
|
||||
@@ -0,0 +1,29 @@
|
||||
{
|
||||
"name": "upiecep-website",
|
||||
"type": "module",
|
||||
"version": "0.0.1",
|
||||
"scripts": {
|
||||
"dev": "astro dev",
|
||||
"start": "astro dev",
|
||||
"build": "astro check && astro build",
|
||||
"preview": "astro preview",
|
||||
"astro": "astro"
|
||||
},
|
||||
"dependencies": {
|
||||
"@astrojs/check": "^0.3.1",
|
||||
"@astrojs/react": "^3.0.7",
|
||||
"@astrojs/sitemap": "^3.1.6",
|
||||
"@astrojs/vercel": "^7.0.2",
|
||||
"@types/react": "^18.0.21",
|
||||
"@types/react-dom": "^18.0.6",
|
||||
"astro": "^4.2.6",
|
||||
"react": "^18.0.0",
|
||||
"react-dom": "^18.0.0",
|
||||
"react-hook-form": "^7.49.3",
|
||||
"swiper": "^11.0.5",
|
||||
"typescript": "^5.2.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"sass": "^1.69.5"
|
||||
}
|
||||
}
|
||||
Generated
+4352
File diff suppressed because it is too large
Load Diff
Binary file not shown.
|
After Width: | Height: | Size: 7.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 30 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 554 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 943 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 117 KiB |
@@ -0,0 +1,4 @@
|
||||
User-agent: *
|
||||
Allow: /
|
||||
|
||||
Sitemap: https://www.upiecep.org/sitemap-index.xml
|
||||
@@ -0,0 +1,19 @@
|
||||
{
|
||||
"name": "Institute of Electronics Engineers of the Philippines - University of the Philippines Diliman Student Chapter",
|
||||
"short_name": "UP IECEP",
|
||||
"icons": [
|
||||
{
|
||||
"src": "/android-chrome-192x192.png",
|
||||
"sizes": "192x192",
|
||||
"type": "image/png"
|
||||
},
|
||||
{
|
||||
"src": "/android-chrome-512x512.png",
|
||||
"sizes": "512x512",
|
||||
"type": "image/png"
|
||||
}
|
||||
],
|
||||
"theme_color": "#ffffff",
|
||||
"background_color": "#ffffff",
|
||||
"display": "standalone"
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 158 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 113 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 117 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 68 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 53 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 65 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 943 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 143 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 495 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 158 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 113 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 117 KiB |
@@ -0,0 +1,31 @@
|
||||
<section class="about-us-section" id="about">
|
||||
<div class="about-us-panel">
|
||||
<h2>About Us</h2>
|
||||
<p>
|
||||
<strong>UP IECEP</strong> is an academic, non-profit, non-political duly recognized
|
||||
organization of the UP College of Engineering aimed at improving the academic
|
||||
performance of its members and to establish a common ground for BS ECE students
|
||||
in the Electrical and Electronics Engineering Institute.
|
||||
</p>
|
||||
</div>
|
||||
<div class="mission-vision">
|
||||
<div class="mission-statement">
|
||||
<h3>our mission</h3>
|
||||
<p>
|
||||
To uphold academic excellence, foster camaraderie, and promote holistic
|
||||
development among its members.
|
||||
</p>
|
||||
<p>
|
||||
To develop the skills and abilities of the members as future
|
||||
professionals.
|
||||
</p>
|
||||
</div>
|
||||
<div class="vision-statement">
|
||||
<h3>our vision</h3>
|
||||
<p>
|
||||
To be an organization of humane, proficient, competitive and virtuous
|
||||
professionals.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -0,0 +1,137 @@
|
||||
.about-us-section {
|
||||
background-color: $text-light;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
grid-auto-flow: row;
|
||||
padding-block: 8.75rem;
|
||||
height: fit-content;
|
||||
min-height: fit-content;
|
||||
gap: 1.25rem;
|
||||
scroll-margin-top: 3rem;
|
||||
|
||||
.about-us-panel {
|
||||
place-self: center end;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
border-radius: 4rem;
|
||||
box-shadow: 7px 7px 50px 4px rgba(88, 24, 30, 0.4);
|
||||
padding-inline: 4.75rem;
|
||||
padding-top: 3.44rem;
|
||||
padding-bottom: 3.81rem;
|
||||
width: calc(100% - 12.81rem);
|
||||
text-align: center;
|
||||
|
||||
h2 {
|
||||
color: $primary;
|
||||
text-align: center;
|
||||
font-size: 4.4375rem;
|
||||
font-weight: 900;
|
||||
letter-spacing: 0.08875rem;
|
||||
margin-bottom: 3.25rem;
|
||||
}
|
||||
|
||||
p {
|
||||
text-align: center;
|
||||
font-size: 1.25rem;
|
||||
font-synthesis-weight: 600;
|
||||
line-height: 1.6;
|
||||
}
|
||||
}
|
||||
|
||||
.mission-vision {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
align-content: center;
|
||||
width: calc(100% - 12.81rem);
|
||||
|
||||
.mission-statement,
|
||||
.vision-statement {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
place-items: center;
|
||||
h3 {
|
||||
color: $primary;
|
||||
text-align: center;
|
||||
font-size: 3.75rem;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.075rem;
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
p {
|
||||
text-align: center;
|
||||
font-size: 1.25rem;
|
||||
line-height: 1.6;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
width: calc(10 / 12 * 100%);
|
||||
}
|
||||
}
|
||||
.mission-statement {
|
||||
margin-bottom: 1.81rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1024px) {
|
||||
.about-us-section {
|
||||
padding-block: 6rem;
|
||||
.about-us-panel {
|
||||
width: calc(100% - 6rem);
|
||||
padding-inline: 3rem;
|
||||
}
|
||||
.mission-vision {
|
||||
width: calc(100% - 6rem);
|
||||
.mission-statement,
|
||||
.vision-statement {
|
||||
h3 {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.about-us-section {
|
||||
padding-block: 3rem;
|
||||
.about-us-panel {
|
||||
width: calc(100% - 3rem);
|
||||
padding-inline: 1.5rem;
|
||||
}
|
||||
.mission-vision {
|
||||
width: calc(100% - 3rem);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 480px) {
|
||||
.about-us-section {
|
||||
grid-template-columns: repeat(1, 1fr);
|
||||
padding-inline: 2rem;
|
||||
padding-block: 4rem;
|
||||
height: fit-content;
|
||||
|
||||
.about-us-panel {
|
||||
place-self: center;
|
||||
width: 100%;
|
||||
padding-inline: 2rem;
|
||||
|
||||
h2 {
|
||||
font-size: 3rem;
|
||||
}
|
||||
}
|
||||
|
||||
.mission-vision {
|
||||
width: 100%;
|
||||
place-self: center;
|
||||
|
||||
.mission-statement,
|
||||
.vision-statement {
|
||||
h3 {
|
||||
margin-bottom: 1rem;
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,32 @@
|
||||
.contact-section {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(1, 1fr);
|
||||
place-items: center;
|
||||
align-content: center;
|
||||
|
||||
h1 {
|
||||
font-size: 6rem;
|
||||
}
|
||||
strong {
|
||||
font-size: 3rem;
|
||||
}
|
||||
|
||||
.contact-details {
|
||||
margin-top: 1rem;
|
||||
ul {
|
||||
row-gap: 1rem;
|
||||
li {
|
||||
a {
|
||||
color: $dark;
|
||||
font-size: 1.5rem;
|
||||
svg {
|
||||
color: $dark;
|
||||
}
|
||||
&:hover {
|
||||
border-bottom: 2px solid $dark;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,45 @@
|
||||
---
|
||||
import { FacebookIcon, InstagramIcon, MailIcon } from '../Icons/Icons';
|
||||
|
||||
type Props = {
|
||||
displayTitle?: boolean;
|
||||
};
|
||||
|
||||
const { displayTitle = true } = Astro.props;
|
||||
---
|
||||
|
||||
<div class="contact-details">
|
||||
{displayTitle && <h4>Contact Us</h4>}
|
||||
<ul>
|
||||
<li>
|
||||
<a
|
||||
href="https://www.facebook.com/UPIECEP"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<FacebookIcon client:load />
|
||||
<span>UP IECEP</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="https://www.instagram.com/upiecep"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<InstagramIcon client:load />
|
||||
<span>upiecep</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="mailto:upiecep@coe.upd.edu.ph"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<MailIcon client:load />
|
||||
<span>upiecep@coe.upd.edu.ph</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
@@ -0,0 +1,45 @@
|
||||
.contact-details {
|
||||
ul {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
grid-auto-flow: row;
|
||||
list-style-type: none;
|
||||
li {
|
||||
margin-bottom: 0.5rem;
|
||||
a {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
text-decoration: none;
|
||||
color: $text-light;
|
||||
transition: all 0.2s ease-in-out;
|
||||
border-bottom: 2px solid transparent;
|
||||
padding-bottom: 5px;
|
||||
span {
|
||||
margin-top: 2px;
|
||||
}
|
||||
svg {
|
||||
margin-right: 0.5rem;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border-bottom: 2px solid $text-light;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 480px) {
|
||||
.contact-details {
|
||||
ul {
|
||||
margin-top: 1rem;
|
||||
li {
|
||||
a {
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,63 @@
|
||||
---
|
||||
import family1 from '../../assets/images/family/family_1.png';
|
||||
import family2 from '../../assets/images/family/family_2.png';
|
||||
import family3 from '../../assets/images/family/family_3.png';
|
||||
---
|
||||
|
||||
<section class="family-section" id="people">
|
||||
<h2>UP IECEP Family</h2>
|
||||
<div class="members-panel">
|
||||
<div class="image-panel">
|
||||
<img src={family1.src} alt="" />
|
||||
<div class="image-panel-popup">
|
||||
<h3>Current Members →</h3>
|
||||
<p>A short list of all the current members of UP IECEP</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-panel">
|
||||
<div class="cover">
|
||||
<h3>Current Members</h3>
|
||||
</div>
|
||||
<div class="under">
|
||||
<h3>Current Members</h3>
|
||||
<strong>A short list of all the current members of UP IECEP</strong>
|
||||
</div>
|
||||
</div>
|
||||
<div class="image-panel">
|
||||
<img src={family2.src} alt="" />
|
||||
<div class="image-panel-popup">
|
||||
<h3>Notable Members →</h3>
|
||||
<p>
|
||||
Some of UP IECEP’s most well respected and accomplished individuals
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-panel">
|
||||
<div class="cover">
|
||||
<h3>Executive Commitee</h3>
|
||||
</div>
|
||||
<div class="under">
|
||||
<h3>Executive Committee</h3>
|
||||
<strong
|
||||
>A bit information about the current heads of each committee</strong
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="image-panel">
|
||||
<img src={family3.src} alt="" />
|
||||
<div class="image-panel-popup">
|
||||
<h3>Executive Commitee →</h3>
|
||||
<p>A bit information about the current heads of each committee</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-panel">
|
||||
<div class="cover">
|
||||
<h3>Current Members</h3>
|
||||
</div>
|
||||
<div class="under">
|
||||
<h3>Current Members</h3>
|
||||
<strong>A short list of all the current members of UP IECEP</strong>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -0,0 +1,246 @@
|
||||
.family-section {
|
||||
padding-block: 8rem;
|
||||
padding-inline: 2.81rem;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(1, 1fr);
|
||||
min-height: fit-content;
|
||||
scroll-margin-top: 3rem;
|
||||
|
||||
h2 {
|
||||
text-align: center;
|
||||
color: $primary;
|
||||
font-size: 4.4374rem;
|
||||
font-weight: 900;
|
||||
letter-spacing: 0.08875rem;
|
||||
margin-bottom: 2.44rem;
|
||||
}
|
||||
|
||||
.members-panel {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
width: 100%;
|
||||
grid-auto-flow: row;
|
||||
|
||||
.image-panel {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
aspect-ratio: 25.375 / 18.125;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
img {
|
||||
width: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.image-panel-popup {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.text-panel {
|
||||
display: grid;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
aspect-ratio: 25.375 / 18.125;
|
||||
position: relative;
|
||||
|
||||
&:nth-of-type(2) {
|
||||
.cover,
|
||||
.under {
|
||||
background-color: $background-accent;
|
||||
}
|
||||
}
|
||||
|
||||
&:nth-of-type(4),
|
||||
&:nth-of-type(6) {
|
||||
.cover,
|
||||
.under {
|
||||
background-color: $secondary;
|
||||
}
|
||||
}
|
||||
|
||||
.cover {
|
||||
display: block;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
aspect-ratio: 25.375 / 18.125;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
place-items: center;
|
||||
z-index: 2;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease-in-out;
|
||||
h3 {
|
||||
width: calc(3 / 4 * 100%);
|
||||
text-align: center;
|
||||
color: $text-light;
|
||||
text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.5);
|
||||
font-size: 2.625rem;
|
||||
font-weight: 900;
|
||||
letter-spacing: 0.0525rem;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.under {
|
||||
width: 85%;
|
||||
place-self: center;
|
||||
height: auto;
|
||||
aspect-ratio: inherit;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
place-items: center;
|
||||
align-content: center;
|
||||
padding: 1rem;
|
||||
|
||||
h3 {
|
||||
text-align: center;
|
||||
color: $text-light;
|
||||
text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.5);
|
||||
font-size: 2.625rem;
|
||||
font-weight: 900;
|
||||
letter-spacing: 0.0525rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
strong {
|
||||
text-align: center;
|
||||
font-size: 1.25rem;
|
||||
font-weight: 900;
|
||||
letter-spacing: 0.03rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1024px) {
|
||||
.family-section {
|
||||
padding-block: 3rem;
|
||||
|
||||
.members-panel {
|
||||
.text-panel {
|
||||
.cover {
|
||||
h3 {
|
||||
font-size: 1.75rem;
|
||||
}
|
||||
}
|
||||
.under {
|
||||
width: 90%;
|
||||
h3 {
|
||||
font-size: 1.75rem;
|
||||
}
|
||||
strong {
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.family-section {
|
||||
.members-panel {
|
||||
.text-panel {
|
||||
.cover {
|
||||
h3 {
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
.under {
|
||||
width: 90%;
|
||||
padding: 0.25rem;
|
||||
h3 {
|
||||
font-size: 1rem;
|
||||
}
|
||||
strong {
|
||||
font-size: 0.5rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: normal;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 480px) {
|
||||
.family-section {
|
||||
padding-block: 2rem;
|
||||
padding-inline: 0;
|
||||
|
||||
h2 {
|
||||
font-size: 3rem;
|
||||
padding-inline: 2rem;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.members-panel {
|
||||
grid-template-columns: repeat(1, 1fr);
|
||||
padding: 2rem;
|
||||
row-gap: 2rem;
|
||||
|
||||
.text-panel {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.image-panel {
|
||||
border-radius: 3rem;
|
||||
|
||||
.image-panel-popup {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
place-items: start center;
|
||||
top: 75%;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
aspect-ratio: 25.375 / 18.125;
|
||||
padding: 1rem;
|
||||
position: absolute;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
z-index: 2;
|
||||
color: $text-light;
|
||||
transition: all 0.2s ease-in-out;
|
||||
|
||||
h3 {
|
||||
font-weight: 400;
|
||||
text-decoration: underline;
|
||||
text-underline-offset: 3px;
|
||||
}
|
||||
|
||||
p {
|
||||
width: calc(3 / 4 * 100%);
|
||||
font-size: 1.25rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
top: 0;
|
||||
background-color: rgba(0, 0, 0, 0.6);
|
||||
place-items: center;
|
||||
align-content: center;
|
||||
row-gap: 2rem;
|
||||
|
||||
h3 {
|
||||
font-weight: 700;
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:nth-of-type(1) {
|
||||
order: 1;
|
||||
}
|
||||
&:nth-of-type(3) {
|
||||
order: 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,29 @@
|
||||
---
|
||||
import IecepLogo from '../IecepLogo/IecepLogo';
|
||||
import ContactDetails from '../ContactDetails/ContactDetails.astro';
|
||||
|
||||
const year = new Date(Date.now()).getFullYear();
|
||||
---
|
||||
|
||||
<footer>
|
||||
<div class="footer-logo">
|
||||
<IecepLogo client:load />
|
||||
<h4>UP IECEP</h4>
|
||||
</div>
|
||||
<ContactDetails />
|
||||
<div>
|
||||
<h4>Our Location</h4>
|
||||
<span>
|
||||
Electrical and Electronics Engineering Institute (EEEI), Velasquez St.,
|
||||
University of the Philippines, Diliman, Quezon City
|
||||
</span>
|
||||
</div>
|
||||
<div class="copyright">
|
||||
<span>© {`${year}`}</span>
|
||||
<span>
|
||||
Institute of Electronics Engineers of the Philippines University of the
|
||||
Philippines Student Chapter
|
||||
</span>
|
||||
<span> All rights reserved.</span>
|
||||
</div>
|
||||
</footer>
|
||||
@@ -0,0 +1,86 @@
|
||||
footer {
|
||||
background-color: $dark;
|
||||
color: $text-light;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
grid-auto-flow: row;
|
||||
padding-inline: 8rem;
|
||||
padding-block: 3.5rem;
|
||||
font-size: 1rem;
|
||||
gap: 2rem;
|
||||
|
||||
h4 {
|
||||
font-weight: 800;
|
||||
font-size: 1.25rem;
|
||||
margin-bottom: 1.25rem;
|
||||
}
|
||||
|
||||
.footer-logo {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
place-items: center;
|
||||
gap: 0.81rem;
|
||||
|
||||
img {
|
||||
width: 5.125rem;
|
||||
height: 5.125rem;
|
||||
}
|
||||
h4 {
|
||||
text-align: center;
|
||||
font-size: 2.1875rem;
|
||||
font-weight: 800;
|
||||
line-height: normal;
|
||||
}
|
||||
}
|
||||
.copyright {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
place-self: start center;
|
||||
|
||||
span:nth-of-type(2) {
|
||||
margin-bottom: 1.25rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1024px) {
|
||||
footer {
|
||||
padding: 4rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
footer {
|
||||
padding: 4rem;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
|
||||
.footer-logo {
|
||||
display: grid;
|
||||
place-items: start;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 480px) {
|
||||
footer {
|
||||
grid-template-columns: repeat(1, 1fr);
|
||||
font-size: 1.25rem;
|
||||
row-gap: 3rem;
|
||||
|
||||
h4 {
|
||||
font-size: 1.75rem;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.footer-logo {
|
||||
place-items: center;
|
||||
h4 {
|
||||
font-size: 3rem;
|
||||
}
|
||||
}
|
||||
|
||||
.copyright {
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,52 @@
|
||||
import { useState } from 'react';
|
||||
import { ChevronUpIcon, CloseIcon, ListIcon } from '../Icons/Icons';
|
||||
import HeaderNav from './HeaderNav/HeaderNav';
|
||||
import IecepLogo from '../IecepLogo/IecepLogo';
|
||||
|
||||
type Props = {
|
||||
path: string;
|
||||
};
|
||||
|
||||
const Header = ({ path }: Props) => {
|
||||
const [dropdownOpen, setDropdownOpen] = useState(false);
|
||||
|
||||
const handleToggleDropdown = () => {
|
||||
setDropdownOpen((dropdownOpen) => !dropdownOpen);
|
||||
}
|
||||
|
||||
const handleCloseDropdown = () => {
|
||||
setDropdownOpen(false);
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<header className='header'>
|
||||
<div className='logo'>
|
||||
<a href='/' className='logo-link'>
|
||||
<IecepLogo />
|
||||
</a>
|
||||
<a href='/' className='logo-text'>UP IECEP</a>
|
||||
</div>
|
||||
<HeaderNav handleCloseDropdown={ handleCloseDropdown } />
|
||||
<div className='apply-now'>
|
||||
<a href='apply'>
|
||||
Apply Now!
|
||||
</a>
|
||||
<button type='button' className='dropdown' onClick={ handleToggleDropdown }>
|
||||
{ dropdownOpen ? <CloseIcon /> : <ListIcon /> }
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
{ dropdownOpen && (
|
||||
<div className='dropdown-list'>
|
||||
<HeaderNav handleCloseDropdown={ handleCloseDropdown } />
|
||||
<button type='button' onClick={ handleCloseDropdown }>
|
||||
<ChevronUpIcon />
|
||||
</button>
|
||||
</div>
|
||||
) }
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Header;
|
||||
@@ -0,0 +1,31 @@
|
||||
type Props = {
|
||||
handleCloseDropdown: () => void;
|
||||
}
|
||||
|
||||
const HeaderNav = ({ handleCloseDropdown }: Props) => {
|
||||
return (
|
||||
<nav>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="/#about" onClick={ handleCloseDropdown }>About Us</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/#projects-and-campaigns" onClick={ handleCloseDropdown }>
|
||||
Project & Campaigns
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/#people" onClick={ handleCloseDropdown }>People</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/shop" onClick={ handleCloseDropdown }>Shop</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="contact" onClick={ handleCloseDropdown }>Contact Us</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
);
|
||||
};
|
||||
|
||||
export default HeaderNav;
|
||||
@@ -0,0 +1,150 @@
|
||||
header.header {
|
||||
background-color: $primary;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
z-index: 6;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
color: $text-light;
|
||||
padding-block: 0.5rem;
|
||||
padding-inline: 6.25rem;
|
||||
|
||||
.logo {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
.logo-link {
|
||||
img {
|
||||
width: 50px;
|
||||
height: auto;
|
||||
aspect-ratio: 1 / 1;
|
||||
}
|
||||
}
|
||||
.logo-text {
|
||||
margin-left: 0.44rem;
|
||||
font-size: 1.75rem;
|
||||
font-weight: 800;
|
||||
line-height: normal;
|
||||
color: $text-light;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
nav {
|
||||
flex: 1;
|
||||
ul {
|
||||
width: 100%;
|
||||
display: inline-flex;
|
||||
align-content: center;
|
||||
justify-content: space-evenly;
|
||||
list-style-type: none;
|
||||
|
||||
a {
|
||||
color: $text-light;
|
||||
text-decoration: none;
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.apply-now {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
a {
|
||||
text-decoration: none;
|
||||
background-color: $secondary;
|
||||
color: $text-light;
|
||||
padding-block: 0.81rem;
|
||||
padding-inline: 2.56rem;
|
||||
border-radius: 1.5625rem;
|
||||
flex-shrink: 0;
|
||||
border: 1px solid transparent;
|
||||
cursor: pointer;
|
||||
text-transform: capitalize;
|
||||
font-size: 1rem;
|
||||
font-weight: 400;
|
||||
line-height: normal;
|
||||
}
|
||||
button.dropdown {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-list {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1024px) {
|
||||
header.header {
|
||||
padding-inline: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
header.header {
|
||||
nav {
|
||||
display: none;
|
||||
}
|
||||
.apply-now {
|
||||
a {
|
||||
padding-inline: 1.5rem;
|
||||
margin-right: 0.25rem;
|
||||
}
|
||||
button.dropdown {
|
||||
display: block;
|
||||
padding: 0.5rem;
|
||||
border: 0;
|
||||
background-color: transparent;
|
||||
cursor: pointer;
|
||||
svg {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.dropdown-list {
|
||||
position: fixed;
|
||||
z-index: 5;
|
||||
top: 0;
|
||||
left: 0;
|
||||
padding-inline: 1rem;
|
||||
padding-block: 0.5rem;
|
||||
width: 100%;
|
||||
background-color: $primary;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
row-gap: 0.5rem;
|
||||
nav {
|
||||
padding-top: 5rem;
|
||||
ul {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
grid-auto-flow: row;
|
||||
gap: 1rem;
|
||||
list-style-type: none;
|
||||
text-align: center;
|
||||
a {
|
||||
color: $text-light;
|
||||
text-decoration: none;
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
button {
|
||||
display: block;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
background-color: transparent;
|
||||
cursor: pointer;
|
||||
svg {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,77 @@
|
||||
export const ListIcon = () => (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 16 16"
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5m0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5m0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
|
||||
export const CloseIcon = () => (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 16 16"
|
||||
>
|
||||
<path d="M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8z" />
|
||||
</svg>
|
||||
);
|
||||
|
||||
export const ChevronUpIcon = () => (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 16 16"
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
d="M7.646 4.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1-.708.708L8 5.707l-5.646 5.647a.5.5 0 0 1-.708-.708z"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
|
||||
export const MailIcon = () => (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 16 16"
|
||||
>
|
||||
<path d="M.05 3.555A2 2 0 0 1 2 2h12a2 2 0 0 1 1.95 1.555L8 8.414zM0 4.697v7.104l5.803-3.558zM6.761 8.83l-6.57 4.027A2 2 0 0 0 2 14h12a2 2 0 0 0 1.808-1.144l-6.57-4.027L8 9.586zm3.436-.586L16 11.801V4.697z" />
|
||||
</svg>
|
||||
);
|
||||
|
||||
export const FacebookIcon = () => (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 16 16"
|
||||
>
|
||||
<path d="M16 8.049c0-4.446-3.582-8.05-8-8.05C3.58 0-.002 3.603-.002 8.05c0 4.017 2.926 7.347 6.75 7.951v-5.625h-2.03V8.05H6.75V6.275c0-2.017 1.195-3.131 3.022-3.131.876 0 1.791.157 1.791.157v1.98h-1.009c-.993 0-1.303.621-1.303 1.258v1.51h2.218l-.354 2.326H9.25V16c3.824-.604 6.75-3.934 6.75-7.951" />
|
||||
</svg>
|
||||
);
|
||||
|
||||
export const InstagramIcon = () => (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 16 16"
|
||||
>
|
||||
<path d="M8 0C5.829 0 5.556.01 4.703.048 3.85.088 3.269.222 2.76.42a3.9 3.9 0 0 0-1.417.923A3.9 3.9 0 0 0 .42 2.76C.222 3.268.087 3.85.048 4.7.01 5.555 0 5.827 0 8.001c0 2.172.01 2.444.048 3.297.04.852.174 1.433.372 1.942.205.526.478.972.923 1.417.444.445.89.719 1.416.923.51.198 1.09.333 1.942.372C5.555 15.99 5.827 16 8 16s2.444-.01 3.298-.048c.851-.04 1.434-.174 1.943-.372a3.9 3.9 0 0 0 1.416-.923c.445-.445.718-.891.923-1.417.197-.509.332-1.09.372-1.942C15.99 10.445 16 10.173 16 8s-.01-2.445-.048-3.299c-.04-.851-.175-1.433-.372-1.941a3.9 3.9 0 0 0-.923-1.417A3.9 3.9 0 0 0 13.24.42c-.51-.198-1.092-.333-1.943-.372C10.443.01 10.172 0 7.998 0zm-.717 1.442h.718c2.136 0 2.389.007 3.232.046.78.035 1.204.166 1.486.275.373.145.64.319.92.599s.453.546.598.92c.11.281.24.705.275 1.485.039.843.047 1.096.047 3.231s-.008 2.389-.047 3.232c-.035.78-.166 1.203-.275 1.485a2.5 2.5 0 0 1-.599.919c-.28.28-.546.453-.92.598-.28.11-.704.24-1.485.276-.843.038-1.096.047-3.232.047s-2.39-.009-3.233-.047c-.78-.036-1.203-.166-1.485-.276a2.5 2.5 0 0 1-.92-.598 2.5 2.5 0 0 1-.6-.92c-.109-.281-.24-.705-.275-1.485-.038-.843-.046-1.096-.046-3.233s.008-2.388.046-3.231c.036-.78.166-1.204.276-1.486.145-.373.319-.64.599-.92s.546-.453.92-.598c.282-.11.705-.24 1.485-.276.738-.034 1.024-.044 2.515-.045zm4.988 1.328a.96.96 0 1 0 0 1.92.96.96 0 0 0 0-1.92m-4.27 1.122a4.109 4.109 0 1 0 0 8.217 4.109 4.109 0 0 0 0-8.217m0 1.441a2.667 2.667 0 1 1 0 5.334 2.667 2.667 0 0 1 0-5.334" />
|
||||
</svg>
|
||||
);
|
||||
@@ -0,0 +1,7 @@
|
||||
import logo from '../../assets/images/iecep-logo.svg';
|
||||
|
||||
const IecepLogo = () => {
|
||||
return <img src={ logo.src } alt='UP IECEP Logo' />;
|
||||
};
|
||||
|
||||
export default IecepLogo;
|
||||
@@ -0,0 +1,39 @@
|
||||
---
|
||||
import getLicensedPicture from '../../assets/images/projects_getlicensed.jpg';
|
||||
import iecepDayPicture from '../../assets/images/projects_iecepday.jpg';
|
||||
---
|
||||
|
||||
<section class="projects-and-campaigns-section" id="projects-and-campaigns">
|
||||
<h2>Projects & Campaigns</h2>
|
||||
<div class="get-licensed">
|
||||
<div class="get-licensed-text">
|
||||
<h3>Get Licensed</h3>
|
||||
<p>
|
||||
An event aimed towards preparing Electronics Engineering (ECE) students
|
||||
to <strong>jumpstart their careers as future professionals</strong> and serves
|
||||
as an avenue for the interaction between ECE students from different universities/colleges
|
||||
in Metro Manila, licensed engineers, and professionals who have established
|
||||
themselves in the field.
|
||||
</p>
|
||||
<a href="get-licensed" class="learn-more">Learn More →</a>
|
||||
</div>
|
||||
<div class="get-licensed-picture">
|
||||
<img src={getLicensedPicture.src} alt="Get Licensed" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="iecep-day">
|
||||
<div class="iecep-day-picture">
|
||||
<img src={iecepDayPicture.src} alt="IECEP Day" />
|
||||
</div>
|
||||
<div class="iecep-day-text">
|
||||
<h3>UP IECEP Day</h3>
|
||||
<p>
|
||||
An org-exclusive special celebration organized as an internal event
|
||||
catered for UP IECEP members. This includes an amazing race and other
|
||||
exciting activities and sharing fun moments between the organization's
|
||||
members to <strong>tighten the bond shared as ECE students</strong>.
|
||||
</p>
|
||||
<a href="iecep-day" class="learn-more">Learn More →</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -0,0 +1,200 @@
|
||||
.projects-and-campaigns-section {
|
||||
padding-block: 8.75rem;
|
||||
background-color: $background-accent;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
grid-auto-flow: row;
|
||||
place-items: center;
|
||||
scroll-margin-top: 3rem;
|
||||
h2 {
|
||||
color: $primary;
|
||||
font-weight: 900;
|
||||
letter-spacing: 0.08875rem;
|
||||
font-size: 4rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-weight: 700;
|
||||
font-size: 3.75rem;
|
||||
letter-spacing: 0.075rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.get-licensed {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
grid-auto-flow: row;
|
||||
gap: 3rem;
|
||||
width: calc(100% - 2 * 12.81rem);
|
||||
margin-top: 3.56rem;
|
||||
.get-licensed-text {
|
||||
place-self: center start;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 1.5rem;
|
||||
|
||||
p {
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.learn-more {
|
||||
border-radius: 1.5625rem;
|
||||
background-color: $primary;
|
||||
color: $text-light;
|
||||
text-decoration: none;
|
||||
width: fit-content;
|
||||
padding-inline: 2.25rem;
|
||||
padding-block: 0.81rem;
|
||||
}
|
||||
}
|
||||
.get-licensed-picture {
|
||||
place-self: center end;
|
||||
width: calc(10 / 12 * 100%);
|
||||
height: auto;
|
||||
aspect-ratio: 25 / 16;
|
||||
position: relative;
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 2.5rem;
|
||||
box-shadow: 7px 7px 50px 4px rgba(88, 24, 30, 0.4);
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
}
|
||||
.iecep-day {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
grid-auto-flow: row;
|
||||
width: calc(100% - 2 * 12.81rem);
|
||||
margin-top: 3.56rem;
|
||||
gap: 3rem;
|
||||
.iecep-day-picture {
|
||||
place-self: center start;
|
||||
width: calc(10 / 12 * 100%);
|
||||
height: auto;
|
||||
aspect-ratio: auto;
|
||||
object-fit: contain;
|
||||
position: relative;
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 2.5rem;
|
||||
box-shadow: 7px 7px 50px 4px rgba(88, 24, 30, 0.4);
|
||||
}
|
||||
}
|
||||
.iecep-day-text {
|
||||
place-self: center end;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 1.5rem;
|
||||
|
||||
p {
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.learn-more {
|
||||
border-radius: 1.5625rem;
|
||||
background-color: $primary;
|
||||
color: $text-light;
|
||||
text-decoration: none;
|
||||
width: fit-content;
|
||||
padding-inline: 2.25rem;
|
||||
padding-block: 0.81rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1024px) {
|
||||
.projects-and-campaigns-section {
|
||||
padding-block: 3rem;
|
||||
.get-licensed {
|
||||
width: calc(100% - 6rem);
|
||||
gap: 2rem;
|
||||
.get-licensed-text {
|
||||
h3 {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
}
|
||||
.get-licensed-picture {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.iecep-day {
|
||||
width: calc(100% - 6rem);
|
||||
gap: 2rem;
|
||||
.iecep-day-text {
|
||||
h3 {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
}
|
||||
.iecep-day-picture {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.projects-and-campaigns-section {
|
||||
h2 {
|
||||
font-size: 3rem;
|
||||
}
|
||||
|
||||
.get-licensed {
|
||||
margin-top: 2rem;
|
||||
grid-template-columns: repeat(1, 1fr);
|
||||
row-gap: 1rem;
|
||||
place-self: start center;
|
||||
|
||||
.get-licensed-text {
|
||||
order: 2;
|
||||
h3 {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.get-licensed-picture {
|
||||
place-self: center;
|
||||
order: 1;
|
||||
}
|
||||
}
|
||||
.iecep-day {
|
||||
grid-template-columns: repeat(1, 1fr);
|
||||
gap: 1rem;
|
||||
|
||||
.iecep-day-text {
|
||||
order: 2;
|
||||
h3 {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.iecep-day-picture {
|
||||
place-self: center;
|
||||
order: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 480px) {
|
||||
.projects-and-campaigns-section {
|
||||
.get-licensed {
|
||||
.get-licensed-text {
|
||||
h3 {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
.iecep-day {
|
||||
.iecep-day-text {
|
||||
h3 {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,13 @@
|
||||
.registration-section {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(1, 1fr);
|
||||
place-items: center;
|
||||
align-content: center;
|
||||
|
||||
h1 {
|
||||
font-size: 6rem;
|
||||
}
|
||||
strong {
|
||||
font-size: 3rem;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,13 @@
|
||||
.shop-section {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(1, 1fr);
|
||||
place-items: center;
|
||||
align-content: center;
|
||||
|
||||
h1 {
|
||||
font-size: 6rem;
|
||||
}
|
||||
strong {
|
||||
font-size: 3rem;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,47 @@
|
||||
import { Swiper, SwiperSlide } from 'swiper/react';
|
||||
import { Navigation, Pagination } from 'swiper/modules';
|
||||
|
||||
const Slider = () => {
|
||||
return (
|
||||
<section className="landing-slider-section">
|
||||
<div className="landing-slider-container">
|
||||
<Swiper
|
||||
modules={ [Navigation, Pagination] }
|
||||
navigation
|
||||
pagination={ {
|
||||
dynamicBullets: true,
|
||||
clickable: true,
|
||||
} }
|
||||
loop
|
||||
centeredSlides
|
||||
autoHeight
|
||||
className='landing-slider'
|
||||
>
|
||||
<SwiperSlide className='landing-slider-slide landing'>
|
||||
<div className='landing-panel'>
|
||||
<h1>One IECEP </h1>
|
||||
<span>One Organization.{ `\n` }One Profession.{ `\n` }One Family</span>
|
||||
<p>Institute of Electronics Engineers of the Philippines University of the Philippines Student Chapter</p>
|
||||
</div>
|
||||
</SwiperSlide>
|
||||
<SwiperSlide className='landing-slider-slide app-process'>
|
||||
<div className='app-process-panel'>
|
||||
<h1>Come and <br />Roll With Us!</h1>
|
||||
<span>Application Process - 2324A</span>
|
||||
<a href='apply' className='apply'>Apply Now! →</a>
|
||||
</div>
|
||||
</SwiperSlide>
|
||||
<SwiperSlide className='landing-slider-slide get-licensed'>
|
||||
<div className='get-licensed-panel'>
|
||||
<h1>Get Licensed 2024</h1>
|
||||
<span>Geared Up for the Future</span>
|
||||
<a href='get-licensed' className='learn-more'>Learn More →</a>
|
||||
</div>
|
||||
</SwiperSlide>
|
||||
</Swiper>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default Slider;
|
||||
@@ -0,0 +1,221 @@
|
||||
$margin-top: 1.5rem;
|
||||
|
||||
.landing-slider-section {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
.landing-slider-container {
|
||||
margin-top: $margin-top;
|
||||
height: calc(100dvh - $margin-top);
|
||||
min-height: calc(100dvh - $margin-top);
|
||||
|
||||
.landing-slider {
|
||||
height: calc(100dvh - $margin-top);
|
||||
min-height: calc(100dvh - $margin-top);
|
||||
|
||||
.swiper-button-prev,
|
||||
.swiper-button-next {
|
||||
color: $dark;
|
||||
border-radius: 100%;
|
||||
background-color: white;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.swiper-pagination {
|
||||
.swiper-pagination-bullet {
|
||||
background-color: $text-light;
|
||||
height: 13px;
|
||||
width: 13px;
|
||||
&.swiper-pagination-bullet-active {
|
||||
background-color: $primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.landing-slider-slide {
|
||||
height: calc(100dvh - $margin-top);
|
||||
min-height: calc(100dvh - $margin-top);
|
||||
position: relative;
|
||||
|
||||
h1 {
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.11875rem;
|
||||
font-weight: 900;
|
||||
font-size: 5.9375rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&.landing {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: url('/slider/carousel_1.jpg');
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
|
||||
.landing-panel {
|
||||
background: rgba(225, 221, 221, 0.76);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
place-items: center;
|
||||
align-content: center;
|
||||
|
||||
span {
|
||||
margin-top: 1rem;
|
||||
font-size: 1.5rem;
|
||||
padding-inline: 1rem;
|
||||
padding-block: 0.125rem;
|
||||
color: $text-light;
|
||||
background-color: $primary;
|
||||
border-radius: 1.21875rem;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-top: 5rem;
|
||||
width: calc(1 / 2 * 100%);
|
||||
text-align: center;
|
||||
font-size: 1.75rem;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.app-process {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: url('/slider/carousel_2.jpg');
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
|
||||
.app-process-panel {
|
||||
background-color: rgba(88, 24, 30, 0.7);
|
||||
box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
place-items: center;
|
||||
align-content: center;
|
||||
color: $text-light;
|
||||
|
||||
h1 {
|
||||
line-height: 0.9;
|
||||
text-align: center;
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
span {
|
||||
margin-top: 1.12rem;
|
||||
font-size: 1.5rem;
|
||||
color: $text-light;
|
||||
}
|
||||
|
||||
.apply {
|
||||
margin-top: 7rem;
|
||||
padding-block: 0.81rem;
|
||||
padding-inline: 2.25rem;
|
||||
border-radius: 1.5625rem;
|
||||
background-color: $primary;
|
||||
color: $text-light;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.get-licensed {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: url('/slider/carousel_3.jpg');
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
|
||||
.get-licensed-panel {
|
||||
background-color: rgba($color: #4d6066, $alpha: 0.7);
|
||||
backdrop-filter: opacity(0.1);
|
||||
box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
place-items: center;
|
||||
align-content: center;
|
||||
color: $text-light;
|
||||
|
||||
&::before {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
h1 {
|
||||
line-height: 0.9;
|
||||
text-align: center;
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
span {
|
||||
margin-top: 1.12rem;
|
||||
font-size: 1.5rem;
|
||||
color: $text-light;
|
||||
}
|
||||
|
||||
.learn-more {
|
||||
margin-top: 7rem;
|
||||
padding-block: 0.81rem;
|
||||
padding-inline: 2.25rem;
|
||||
border-radius: 1.5625rem;
|
||||
background-color: $primary;
|
||||
color: $text-light;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 480px) {
|
||||
.landing-slider-section {
|
||||
.landing-slider-container {
|
||||
.landing-slider {
|
||||
.landing-slider-slide {
|
||||
h1 {
|
||||
font-size: 4rem;
|
||||
width: calc(10 / 12 * 100%);
|
||||
}
|
||||
&.landing {
|
||||
background-color: red;
|
||||
.landing-panel {
|
||||
span {
|
||||
width: calc(2 / 3 * 100%);
|
||||
white-space: pre-wrap;
|
||||
word-break: break-word;
|
||||
padding: 2rem;
|
||||
text-align: center;
|
||||
border-radius: 4rem;
|
||||
}
|
||||
p {
|
||||
width: calc(3 / 4 * 100%);
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.app-process {
|
||||
span {
|
||||
width: calc(1 / 2 * 100%);
|
||||
text-align: center;
|
||||
}
|
||||
.apply {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
}
|
||||
&.get-licensed {
|
||||
.learn-more {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Vendored
+2
@@ -0,0 +1,2 @@
|
||||
/// <reference path="../.astro/types.d.ts" />
|
||||
/// <reference types="astro/client" />
|
||||
@@ -0,0 +1,69 @@
|
||||
---
|
||||
import { ViewTransitions } from 'astro:transitions';
|
||||
import Header from '../components/Header/Header';
|
||||
import Footer from '../components/Footer/Footer.astro';
|
||||
import '../styles/index.scss';
|
||||
interface Props {
|
||||
title: string;
|
||||
description?: string;
|
||||
}
|
||||
|
||||
const {
|
||||
title,
|
||||
description = 'Institute of Electronics Engineers of the Philippines - University of the Philippines Diliman Student Chapter',
|
||||
} = Astro.props;
|
||||
const path = Astro.url.pathname;
|
||||
---
|
||||
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="description" content={description} />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="generator" content={Astro.generator} />
|
||||
<title>{title}</title>
|
||||
<meta name="description" content={description} />
|
||||
<meta itemprop="name" content={title} />
|
||||
<meta itemprop="description" content={description} />
|
||||
<meta property="og:site_name" content="UP IECEP" />
|
||||
<meta property="og:title" content={title} />
|
||||
<meta property="og:description" content={description} />
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:url" content="https://www.upiecep.org" />
|
||||
<meta property="og:image" content="https://www.upiecep.org/img/meta.jpg" />
|
||||
<meta name="theme-color" content="#ffffff" />
|
||||
<meta name="author" content="UP IECEP" />
|
||||
<meta
|
||||
name="keywords"
|
||||
content="upiecep, up iecep, electronics engineers, organization, up, university of the philippines, org, ece, electronics engineering"
|
||||
/>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap"
|
||||
rel="preload"
|
||||
as="style"
|
||||
crossorigin="anonymous"
|
||||
/>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap"
|
||||
rel="stylesheet"
|
||||
crossorigin="anonymous"
|
||||
/>
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png" />
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png" />
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png" />
|
||||
<link rel="manifest" href="site.webmanifest" />
|
||||
<link rel="sitemap" href="/sitemap-index.xml" />
|
||||
<ViewTransitions />
|
||||
</head>
|
||||
<body>
|
||||
<Header path={path} client:load />
|
||||
<main>
|
||||
<slot />
|
||||
</main>
|
||||
<Footer />
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,23 @@
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
html {
|
||||
font-family: "Lato", -apple-system, BlinkMacSystemFont, sans-serif;
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
body {
|
||||
position: relative;
|
||||
}
|
||||
main {
|
||||
position: relative;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
inset: 0;
|
||||
min-height: fit-content;
|
||||
}
|
||||
|
||||
section {
|
||||
min-height: 100dvh;
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
---
|
||||
import Layout from '../layouts/Layout.astro';
|
||||
---
|
||||
|
||||
<Layout title="Registration | UP IECEP">
|
||||
<section class="registration-section">
|
||||
<h1>Registration Portal</h1>
|
||||
<strong>Coming soon</strong>
|
||||
</section>
|
||||
</Layout>
|
||||
@@ -0,0 +1,11 @@
|
||||
---
|
||||
import ContactDetails from '../components/ContactDetails/ContactDetails.astro';
|
||||
import Layout from '../layouts/Layout.astro';
|
||||
---
|
||||
|
||||
<Layout title="Contact | UP IECEP">
|
||||
<section class="contact-section">
|
||||
<h1>Contact Us</h1>
|
||||
<ContactDetails displayTitle={false} />
|
||||
</section>
|
||||
</Layout>
|
||||
@@ -0,0 +1,9 @@
|
||||
---
|
||||
import Layout from '../layouts/Layout.astro';
|
||||
---
|
||||
|
||||
<Layout title="Get Licensed | UP IECEP">
|
||||
<section>
|
||||
<h1>Get Licensed</h1>
|
||||
</section>
|
||||
</Layout>
|
||||
@@ -0,0 +1,14 @@
|
||||
---
|
||||
import ProjectsAndCampaigns from '../components/ProjectsAndCampaigns/ProjectsAndCampaigns.astro';
|
||||
import Slider from '../components/Slider/Slider';
|
||||
import Family from '../components/Family/Family.astro';
|
||||
import AboutUs from '../components/AboutUs/AboutUs.astro';
|
||||
import Layout from '../layouts/Layout.astro';
|
||||
---
|
||||
|
||||
<Layout title="UP IECEP">
|
||||
<Slider client:load />
|
||||
<AboutUs />
|
||||
<ProjectsAndCampaigns />
|
||||
<Family />
|
||||
</Layout>
|
||||
@@ -0,0 +1,12 @@
|
||||
---
|
||||
import Layout from "../layouts/Layout.astro"
|
||||
---
|
||||
|
||||
<Layout title="UP IECEP">
|
||||
<section>
|
||||
<a href="/">To Index</a>
|
||||
</section>
|
||||
<script is:inline>
|
||||
console.log("test")
|
||||
</script>
|
||||
</Layout>
|
||||
@@ -0,0 +1,10 @@
|
||||
---
|
||||
import Layout from '../layouts/Layout.astro';
|
||||
---
|
||||
|
||||
<Layout title="Shop | UP IECEP">
|
||||
<section class="shop-section">
|
||||
<h1>Shop</h1>
|
||||
<strong>Coming soon</strong>
|
||||
</section>
|
||||
</Layout>
|
||||
@@ -0,0 +1,25 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');
|
||||
|
||||
@import 'swiper/scss';
|
||||
@import 'swiper/scss/navigation';
|
||||
@import 'swiper/scss/pagination';
|
||||
|
||||
@import './variables.scss';
|
||||
|
||||
@import '../layouts/layout.scss';
|
||||
|
||||
@import '../components/Footer/footer.scss';
|
||||
@import '../components/Header/header.scss';
|
||||
|
||||
@import '../components/AboutUs/about-us.scss';
|
||||
@import '../components/Family/family.scss';
|
||||
@import '../components/ProjectsAndCampaigns/projects-and-campaigns.scss';
|
||||
@import '../components/Slider/slider.scss';
|
||||
|
||||
@import '../components/ContactDetails/contact-details.scss';
|
||||
|
||||
@import '../components/Contact/contact.scss';
|
||||
|
||||
@import '../components/Shop/shop.scss';
|
||||
|
||||
@import '../components/Registration/registration.scss';
|
||||
@@ -0,0 +1,6 @@
|
||||
$primary: #58181e;
|
||||
$secondary: #926063;
|
||||
$lowlight: #4d6066;
|
||||
$dark: #2e2e2e;
|
||||
$background-accent: #e1dddd;
|
||||
$text-light: #fff;
|
||||
@@ -0,0 +1,7 @@
|
||||
{
|
||||
"extends": "astro/tsconfigs/strict",
|
||||
"compilerOptions": {
|
||||
"jsx": "react-jsx",
|
||||
"jsxImportSource": "react"
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user