Initial commit
This commit is contained in:
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user