Merge branch 'dev_vite' of http://18.167.251.121:10003/aidlab/aida_front into dev_vite
This commit is contained in:
李志鹏
68
src/views/AwardPage/components/Bloom.vue
Normal file
68
src/views/AwardPage/components/Bloom.vue
Normal file
@@ -0,0 +1,68 @@
|
||||
<template>
|
||||
<div class="bloom container flex flex-col align-center">
|
||||
<div
|
||||
class="title"
|
||||
ref="titleRef"
|
||||
>
|
||||
Bloom Your Creativity
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="season"
|
||||
ref="subtitleRef"
|
||||
>
|
||||
Theme of 2026
|
||||
</div>
|
||||
<div
|
||||
class="desc"
|
||||
ref="textRef"
|
||||
>
|
||||
Where imagination meets innovation, creativity blooms. This theme celebrates
|
||||
AI as a catalyst for fashion design, allowing your vision to flourish beyond
|
||||
traditional boundaries. Let your ideas blossom into extraordinary designs that
|
||||
merge human artistry with artificial intelligence.
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from 'vue'
|
||||
import gsap from 'gsap'
|
||||
|
||||
const titleRef = ref<HTMLElement | null>(null)
|
||||
const subtitleRef = ref<HTMLElement | null>(null)
|
||||
const textRef = ref<HTMLElement | null>(null)
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.bloom {
|
||||
padding-top: 12.8rem;
|
||||
font-family: 'Poppins';
|
||||
background: url('@/assets/images/award/bloom_bg.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
.title {
|
||||
font-size: 4rem;
|
||||
color: #232323;
|
||||
margin-bottom: 2.4rem;
|
||||
}
|
||||
.logo {
|
||||
margin-bottom: 2.2rem;
|
||||
}
|
||||
.season {
|
||||
font-size: 3rem;
|
||||
color: #c7342c;
|
||||
margin-bottom: 6.6rem;
|
||||
}
|
||||
.desc {
|
||||
font-family: 'Arial';
|
||||
font-size: 2.8rem;
|
||||
color: #585858;
|
||||
text-align: center;
|
||||
padding: 0 21.5rem;
|
||||
line-height: 4.5rem;
|
||||
margin-bottom: 12.3rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -89,9 +89,11 @@
|
||||
}
|
||||
if (prizesRightRef.value) {
|
||||
gsap.set(prizesRightRef.value, {
|
||||
opacity: 0,
|
||||
y: 40,
|
||||
scale: 1.08
|
||||
'opacity': 0,
|
||||
'y': 40,
|
||||
'scale': 1.08,
|
||||
'--prize-row-gap': '2rem',
|
||||
'--prize-col-gap': '2rem'
|
||||
})
|
||||
}
|
||||
}
|
||||
@@ -116,11 +118,13 @@
|
||||
tl.to(
|
||||
prizesRightRef.value,
|
||||
{
|
||||
opacity: 1,
|
||||
y: 0,
|
||||
scale: 1,
|
||||
duration: 0.55,
|
||||
ease: 'back.out(1.4)'
|
||||
'opacity': 1,
|
||||
'y': 0,
|
||||
'scale': 1,
|
||||
'--prize-row-gap': '4.2rem',
|
||||
'--prize-col-gap': '4.4rem',
|
||||
'duration': 0.55,
|
||||
'ease': 'back.out(1.4)'
|
||||
},
|
||||
titleEls.length ? '-=0.15' : 0
|
||||
)
|
||||
@@ -186,8 +190,8 @@
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
grid-template-rows: repeat(2, 1fr);
|
||||
row-gap: 4.2rem;
|
||||
column-gap: 4.4rem;
|
||||
row-gap: var(--prize-row-gap, 4.2rem);
|
||||
column-gap: var(--prize-col-gap, 4.4rem);
|
||||
// flex: 1;
|
||||
.prize-item {
|
||||
width: 35.5rem;
|
||||
|
||||
280
src/views/AwardPage/components/TimeLine.vue
Normal file
280
src/views/AwardPage/components/TimeLine.vue
Normal file
@@ -0,0 +1,280 @@
|
||||
<template>
|
||||
<div
|
||||
ref="containerRef"
|
||||
class="timeline-container container flex flex-col align-center"
|
||||
>
|
||||
<div class="timeline-title">Competition Timeline</div>
|
||||
<div class="desc">Shaping the Future</div>
|
||||
<div class="timeline-point">
|
||||
<div class="labels-row flex align-center">
|
||||
<div
|
||||
class="item-label flex flex-col"
|
||||
v-for="item in points"
|
||||
:key="'label-' + item.time"
|
||||
>
|
||||
<div class="main-label">{{ item.label }}</div>
|
||||
<div
|
||||
class="sub-label"
|
||||
v-if="item.subLabel"
|
||||
>
|
||||
{{ item.subLabel }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Icons row -->
|
||||
<div class="icons-row flex align-center">
|
||||
<div class="timeline-line"></div>
|
||||
<img
|
||||
src="@/assets/images/award/point.png"
|
||||
class="point-icon"
|
||||
v-for="item in points"
|
||||
:key="'icon-' + item.time"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Times row -->
|
||||
<div class="times-row flex align-center">
|
||||
<div
|
||||
class="item-time"
|
||||
v-for="item in points"
|
||||
:key="'time-' + item.time"
|
||||
>
|
||||
{{ item.time }}
|
||||
</div>
|
||||
</div>
|
||||
<!-- Descriptions row -->
|
||||
<div class="descs-row flex align-center">
|
||||
<div
|
||||
class="item-desc flex justify-center"
|
||||
v-for="item in points"
|
||||
:key="'desc-' + item.time"
|
||||
>
|
||||
<div class="txt">
|
||||
{{ item.desc }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { nextTick, onBeforeUnmount, onMounted, ref } from 'vue'
|
||||
import { gsap } from 'gsap'
|
||||
|
||||
const containerRef = ref<HTMLElement | null>(null)
|
||||
const hasAnimated = ref(false)
|
||||
|
||||
const points = ref([
|
||||
{
|
||||
label: 'Select Top 20',
|
||||
time: 'May',
|
||||
desc: 'Submit your design concept, mood board, and initial sketch.'
|
||||
},
|
||||
{
|
||||
label: `Top 20`,
|
||||
subLabel: 'Collections Finalize',
|
||||
time: 'June',
|
||||
desc: 'Complete collections, physical garments, and AiDA process videos due.'
|
||||
},
|
||||
{
|
||||
label: `Top 3`,
|
||||
subLabel: 'Finalists Select',
|
||||
time: 'August',
|
||||
desc: 'Complete collections, physical garments, and AiDA process videos due.'
|
||||
},
|
||||
{
|
||||
label: 'Award Ceremony',
|
||||
time: 'November',
|
||||
desc: 'Winners revealed with media coverage and live showcase.'
|
||||
}
|
||||
])
|
||||
|
||||
const playAnimation = () => {
|
||||
if (!containerRef.value || hasAnimated.value) return
|
||||
const title = containerRef.value.querySelector('.timeline-title')
|
||||
const subtitle = containerRef.value.querySelector('.desc')
|
||||
const line = containerRef.value.querySelector('.timeline-line')
|
||||
const timeline = containerRef.value.querySelector('.timeline-point')
|
||||
|
||||
const tl = gsap.timeline()
|
||||
if (title && subtitle) {
|
||||
tl.from([title, subtitle], {
|
||||
scaleX: 0,
|
||||
autoAlpha: 0,
|
||||
transformOrigin: '50% 50%',
|
||||
duration: 0.6,
|
||||
stagger: 0.1,
|
||||
ease: 'power2.out'
|
||||
})
|
||||
}
|
||||
|
||||
if (timeline) {
|
||||
tl.fromTo(
|
||||
timeline,
|
||||
{
|
||||
clipPath: 'inset(0 100% 0 0)'
|
||||
},
|
||||
{
|
||||
clipPath: 'inset(0 0% 0 0)',
|
||||
duration: 1.6,
|
||||
ease: 'power1.out'
|
||||
}
|
||||
)
|
||||
}
|
||||
|
||||
if (line) {
|
||||
tl.from(
|
||||
line,
|
||||
{
|
||||
scaleX: 0,
|
||||
transformOrigin: '0% 50%',
|
||||
duration: 1.3,
|
||||
ease: 'power1.out'
|
||||
},
|
||||
'-=1.1'
|
||||
)
|
||||
}
|
||||
|
||||
hasAnimated.value = true
|
||||
}
|
||||
|
||||
let observer: IntersectionObserver | null = null
|
||||
|
||||
onMounted(async () => {
|
||||
await nextTick()
|
||||
if (!containerRef.value) return
|
||||
observer = new IntersectionObserver(
|
||||
(entries) => {
|
||||
entries.forEach((entry) => {
|
||||
if (entry.isIntersecting) {
|
||||
playAnimation()
|
||||
}
|
||||
})
|
||||
},
|
||||
{ threshold: 0.3 }
|
||||
)
|
||||
observer.observe(containerRef.value)
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
if (observer && containerRef.value) {
|
||||
observer.unobserve(containerRef.value)
|
||||
}
|
||||
observer = null
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.timeline-container {
|
||||
background: url('@/assets/images/award/timeline_bg.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
position: relative;
|
||||
padding-top: 12.8rem;
|
||||
width: 100%;
|
||||
color: #fff;
|
||||
.timeline-title {
|
||||
font-family: 'PoppinsBold';
|
||||
font-weight: 600;
|
||||
font-size: 4rem;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.logo {
|
||||
margin: 2.4rem 0 2.2rem 0;
|
||||
}
|
||||
.desc {
|
||||
font-family: 'Arial';
|
||||
font-size: 3rem;
|
||||
font-weight: 400;
|
||||
color: #f95750;
|
||||
}
|
||||
.timeline-point {
|
||||
overflow: hidden;
|
||||
will-change: clip-path;
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
margin-top: 12rem;
|
||||
padding: 0 21.2rem 0 22rem;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
|
||||
.labels-row {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
margin-bottom: 8rem;
|
||||
.item-label {
|
||||
flex: 1;
|
||||
color: #fff;
|
||||
font-family: 'PoppinsBold';
|
||||
font-weight: 600;
|
||||
font-size: 2.8rem;
|
||||
text-align: center;
|
||||
white-space: pre-line;
|
||||
height: 6rem;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
.icons-row {
|
||||
margin-bottom: 1.6rem;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
.point-icon {
|
||||
width: 6.4rem;
|
||||
height: 6.4rem;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
z-index: 2;
|
||||
}
|
||||
.timeline-line {
|
||||
width: calc(100% + 22rem + 21.2rem);
|
||||
left: -22rem;
|
||||
height: 0.15rem;
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
rgba(199, 52, 44, 0) 0%,
|
||||
rgba(199, 52, 44, 0.719626) 25.96%,
|
||||
#c7342c 51.44%,
|
||||
rgba(199, 52, 44, 0.762376) 75.96%,
|
||||
rgba(199, 52, 44, 0) 100%
|
||||
);
|
||||
position: absolute;
|
||||
bottom: 50%;
|
||||
transform: translateY(-50%);
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.times-row {
|
||||
margin-bottom: 6rem;
|
||||
z-index: 2;
|
||||
position: relative;
|
||||
.item-time {
|
||||
flex: 1;
|
||||
color: #f95750;
|
||||
font-family: 'Arial';
|
||||
font-weight: 400;
|
||||
font-size: 2.8rem;
|
||||
line-height: 4.5rem;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.descs-row {
|
||||
.item-desc {
|
||||
flex: 1;
|
||||
.txt {
|
||||
font-family: 'Arial';
|
||||
font-weight: 400;
|
||||
font-size: 2rem;
|
||||
text-align: center;
|
||||
color: #e0e0e0;
|
||||
width: 31.2rem;
|
||||
height: 10.2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -25,95 +25,9 @@
|
||||
<div class="line"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bloom container flex flex-col align-center">
|
||||
<div class="title">Bloom Your Creativity</div>
|
||||
<img
|
||||
src="@/assets/images/award/bloom_logo.png"
|
||||
class="logo"
|
||||
/>
|
||||
<div class="season">Theme of 2026</div>
|
||||
<div class="desc">
|
||||
Where imagination meets innovation, creativity blooms. This theme
|
||||
celebrates AI as a catalyst for fashion design, allowing your vision to
|
||||
flourish beyond traditional boundaries. Let your ideas blossom into
|
||||
extraordinary designs that merge human artistry with artificial
|
||||
intelligence.
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="design-container container">
|
||||
<div class="design-title limit">Design Without Borders</div>
|
||||
<div class="limit">
|
||||
<img
|
||||
src="@/assets/images/award/bloom_logo.png"
|
||||
class="logo"
|
||||
/>
|
||||
</div>
|
||||
<div class="global limit">Global Opportunity</div>
|
||||
<div class="desc">
|
||||
Open to visionary designers across the globe. From Seoul to Singapore, New
|
||||
York to Shanghai, we're seeking the next generation of fashion innovators
|
||||
who dare to reimagine the future of design.
|
||||
</div>
|
||||
</div> -->
|
||||
<div class="timeline-container container flex flex-col align-center">
|
||||
<div class="timeline-title">Competition Timeline</div>
|
||||
<!-- <img
|
||||
src="@/assets/images/award/bloom_logo.png"
|
||||
alt=""
|
||||
class="logo"
|
||||
/> -->
|
||||
<div class="desc">Shaping the Future</div>
|
||||
<div class="timeline-point">
|
||||
<div class="labels-row flex align-center">
|
||||
<div
|
||||
class="item-label flex flex-col"
|
||||
v-for="item in points"
|
||||
:key="'label-' + item.time"
|
||||
>
|
||||
<div class="main-label">{{ item.label }}</div>
|
||||
<div
|
||||
class="sub-label"
|
||||
v-if="item.subLabel"
|
||||
>
|
||||
{{ item.subLabel }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Icons row -->
|
||||
<div class="icons-row flex align-center">
|
||||
<div class="timeline-line"></div>
|
||||
<img
|
||||
src="@/assets/images/award/point.png"
|
||||
class="point-icon"
|
||||
v-for="item in points"
|
||||
:key="'icon-' + item.time"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Times row -->
|
||||
<div class="times-row flex align-center">
|
||||
<div
|
||||
class="item-time"
|
||||
v-for="item in points"
|
||||
:key="'time-' + item.time"
|
||||
>
|
||||
{{ item.time }}
|
||||
</div>
|
||||
</div>
|
||||
<!-- Descriptions row -->
|
||||
<div class="descs-row flex align-center">
|
||||
<div
|
||||
class="item-desc flex justify-center"
|
||||
v-for="item in points"
|
||||
:key="'desc-' + item.time"
|
||||
>
|
||||
<div class="txt">
|
||||
{{ item.desc }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Bloom />
|
||||
<TimeLine />
|
||||
<JudgesSection />
|
||||
<PrizesSection />
|
||||
<ApplySection />
|
||||
@@ -128,6 +42,8 @@
|
||||
import SelectionSection from './components/SelectionSection.vue'
|
||||
import ApplySection from './components/ApplySection.vue'
|
||||
import PrizesSection from './components/PrizesSection.vue'
|
||||
import TimeLine from './components/TimeLine.vue'
|
||||
import Bloom from './components/Bloom.vue'
|
||||
|
||||
const router = useRouter()
|
||||
|
||||
@@ -153,31 +69,6 @@
|
||||
label: 'for finalists to attend\naward ceremony'
|
||||
}
|
||||
])
|
||||
|
||||
const points = ref([
|
||||
{
|
||||
label: 'Select Top 20',
|
||||
time: 'May',
|
||||
desc: 'Submit your design concept, mood board, and initial sketch.'
|
||||
},
|
||||
{
|
||||
label: `Top 20`,
|
||||
subLabel: 'Collections Finalize',
|
||||
time: 'June',
|
||||
desc: 'Complete collections, physical garments, and AiDA process videos due.'
|
||||
},
|
||||
{
|
||||
label: `Top 3`,
|
||||
subLabel: 'Finalists Select',
|
||||
time: 'August',
|
||||
desc: 'Complete collections, physical garments, and AiDA process videos due.'
|
||||
},
|
||||
{
|
||||
label: 'Award Ceremony',
|
||||
time: 'November',
|
||||
desc: 'Winners revealed with media coverage and live showcase.'
|
||||
}
|
||||
])
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
@@ -264,197 +155,4 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
.bloom {
|
||||
padding-top: 12.8rem;
|
||||
font-family: 'Poppins';
|
||||
background: url('@/assets/images/award/bloom_bg.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
.title {
|
||||
font-size: 4rem;
|
||||
color: #232323;
|
||||
margin-bottom: 2.4rem;
|
||||
}
|
||||
.logo {
|
||||
margin-bottom: 2.2rem;
|
||||
}
|
||||
.season {
|
||||
font-size: 3rem;
|
||||
color: #c7342c;
|
||||
margin-bottom: 6.6rem;
|
||||
}
|
||||
.desc {
|
||||
font-family: 'Arial';
|
||||
font-size: 2.8rem;
|
||||
color: #585858;
|
||||
text-align: center;
|
||||
padding: 0 21.5rem;
|
||||
line-height: 4.5rem;
|
||||
margin-bottom: 12.3rem;
|
||||
}
|
||||
}
|
||||
// .design-container {
|
||||
// background: url('@/assets/images/award/design_bg.png') no-repeat;
|
||||
// background-size: 100% 100%;
|
||||
// padding-left: 21.5rem;
|
||||
// padding-top: 16rem;
|
||||
// .limit {
|
||||
// width: 48.4rem;
|
||||
// text-align: center;
|
||||
// }
|
||||
// .design-title {
|
||||
// color: #fff;
|
||||
// font-size: 4rem;
|
||||
// font-weight: 600;
|
||||
// font-family: 'Poppins';
|
||||
// font-style: SemiBold;
|
||||
// vertical-align: middle;
|
||||
// text-transform: capitalize;
|
||||
// }
|
||||
// .logo {
|
||||
// margin-top: 2.4rem;
|
||||
// margin-bottom: 2.1rem;
|
||||
// }
|
||||
// .global {
|
||||
// font-family: 'Poppins';
|
||||
// font-size: 3rem;
|
||||
// color: #f95750;
|
||||
// margin-bottom: 19.8rem;
|
||||
// }
|
||||
// .desc {
|
||||
// font-family: 'Arial';
|
||||
// font-weight: 400;
|
||||
// font-size: 2.8rem;
|
||||
// color: #e0e0e0;
|
||||
// width: 54rem;
|
||||
// }
|
||||
// }
|
||||
.timeline-container {
|
||||
background: url('@/assets/images/award/timeline_bg.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
position: relative;
|
||||
padding-top: 12.8rem;
|
||||
width: 100%;
|
||||
color: #fff;
|
||||
.timeline-title {
|
||||
font-family: 'PoppinsBold';
|
||||
font-weight: 600;
|
||||
font-size: 4rem;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.logo {
|
||||
margin: 2.4rem 0 2.2rem 0;
|
||||
}
|
||||
.desc {
|
||||
font-family: 'Arial';
|
||||
font-size: 3rem;
|
||||
font-weight: 400;
|
||||
color: #f95750;
|
||||
}
|
||||
.timeline-point {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
margin-top: 12rem;
|
||||
padding: 0 21.2rem 0 22rem;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
|
||||
.labels-row {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
margin-bottom: 8rem;
|
||||
.item-label {
|
||||
flex: 1;
|
||||
color: #fff;
|
||||
font-family: 'PoppinsBold';
|
||||
font-weight: 600;
|
||||
font-size: 2.8rem;
|
||||
text-align: center;
|
||||
white-space: pre-line;
|
||||
height: 6rem;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
.icons-row {
|
||||
margin-bottom: 1.6rem;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
.point-icon {
|
||||
width: 6.4rem;
|
||||
height: 6.4rem;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
z-index: 2;
|
||||
}
|
||||
.timeline-line {
|
||||
width: calc(100% + 22rem + 21.2rem);
|
||||
left: -22rem;
|
||||
height: 0.15rem;
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
rgba(199, 52, 44, 0) 0%,
|
||||
rgba(199, 52, 44, 0.719626) 25.96%,
|
||||
#c7342c 51.44%,
|
||||
rgba(199, 52, 44, 0.762376) 75.96%,
|
||||
rgba(199, 52, 44, 0) 100%
|
||||
);
|
||||
position: absolute;
|
||||
bottom: 50%;
|
||||
transform: translateY(-50%);
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.times-row {
|
||||
margin-bottom: 6rem;
|
||||
z-index: 2;
|
||||
position: relative;
|
||||
.item-time {
|
||||
flex: 1;
|
||||
color: #f95750;
|
||||
font-family: 'Arial';
|
||||
font-weight: 400;
|
||||
font-size: 2.8rem;
|
||||
line-height: 4.5rem;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.descs-row {
|
||||
.item-desc {
|
||||
flex: 1;
|
||||
.txt {
|
||||
font-family: 'Arial';
|
||||
font-weight: 400;
|
||||
font-size: 2rem;
|
||||
text-align: center;
|
||||
color: #e0e0e0;
|
||||
width: 31.2rem;
|
||||
height: 10.2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.footer {
|
||||
height: 10rem;
|
||||
padding-left: 21.5rem;
|
||||
padding-right: 22rem;
|
||||
background-color: #232323;
|
||||
.social-list {
|
||||
column-gap: 2rem;
|
||||
img {
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
}
|
||||
}
|
||||
.copyright {
|
||||
color: #fff;
|
||||
font-family: 'Arial';
|
||||
font-weight: 400;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user