초기 작업물
This commit is contained in:
이희원
commit
dcbb0b9eb3
|
|
@ -0,0 +1,5 @@
|
||||||
|
node_modules/
|
||||||
|
dist/
|
||||||
|
.DS_Store
|
||||||
|
*.local
|
||||||
|
package-lock.json
|
||||||
|
|
@ -0,0 +1,23 @@
|
||||||
|
{
|
||||||
|
"name": "boda-lab",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"description": "",
|
||||||
|
"main": "index.js",
|
||||||
|
"scripts": {
|
||||||
|
"dev": "vite",
|
||||||
|
"build": "vite build",
|
||||||
|
"preview": "vite preview"
|
||||||
|
},
|
||||||
|
"keywords": [],
|
||||||
|
"author": "",
|
||||||
|
"license": "ISC",
|
||||||
|
"devDependencies": {
|
||||||
|
"sass": "^1.101.0",
|
||||||
|
"vite": "^8.0.16",
|
||||||
|
"vite-plugin-imagemin": "^0.6.1"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"jquery": "^4.0.0",
|
||||||
|
"sharp": "^0.35.1"
|
||||||
|
}
|
||||||
|
}
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 7.1 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 627 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 869 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.3 MiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 26 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 333 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 820 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 509 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.1 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.6 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 859 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 596 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 251 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 395 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 639 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 385 KiB |
|
|
@ -0,0 +1,450 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="ko">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>BODA LAB - Creative Development Company</title>
|
||||||
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||||
|
<link rel="stylesheet" href="/scss/index.scss">
|
||||||
|
<script type="module" src="/js/main.js"></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<!-- GNB -->
|
||||||
|
<header class="gnb" id="gnb">
|
||||||
|
<div class="gnb__inner">
|
||||||
|
<a href="#intro" class="gnb__logo">
|
||||||
|
<svg viewBox="0 0 140 62" fill="none" xmlns="http://www.w3.org/2000/svg" aria-label="BODA LAB">
|
||||||
|
<rect x="0.5" y="0.5" width="139" height="61" stroke="white"/>
|
||||||
|
<rect x="13.5" y="13.5" width="27" height="35" stroke="white"/>
|
||||||
|
<rect x="53.5" y="13.5" width="27" height="35" stroke="white"/>
|
||||||
|
<text x="70" y="36" text-anchor="middle" fill="white" font-family="Pretendard, sans-serif" font-size="10" font-weight="700" letter-spacing="2">BODA LAB</text>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
<nav class="gnb__nav">
|
||||||
|
<ul>
|
||||||
|
<li class="is-active"><a href="#intro">HOME</a></li>
|
||||||
|
<li><a href="#about">ABOUT</a></li>
|
||||||
|
<li><a href="#project">PROJECTS</a></li>
|
||||||
|
<li><a href="#contact">CONTACT</a></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
<button class="gnb__hamburger" aria-label="메뉴 열기" aria-expanded="false">
|
||||||
|
<span></span>
|
||||||
|
<span></span>
|
||||||
|
<span></span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<!-- 모바일 메뉴 -->
|
||||||
|
<nav class="gnb__mobile-nav">
|
||||||
|
<ul>
|
||||||
|
<li><a href="#intro">HOME</a></li>
|
||||||
|
<li><a href="#about">ABOUT</a></li>
|
||||||
|
<li><a href="#project">PROJECTS</a></li>
|
||||||
|
<li><a href="#contact">CONTACT</a></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<main>
|
||||||
|
|
||||||
|
<!-- 01. INTRO -->
|
||||||
|
<section id="intro" class="section section--intro">
|
||||||
|
<div class="intro__blobs" aria-hidden="true">
|
||||||
|
<span class="blob blob--cyan"></span>
|
||||||
|
<span class="blob blob--purple"></span>
|
||||||
|
<span class="blob blob--blue"></span>
|
||||||
|
</div>
|
||||||
|
<div class="intro__content">
|
||||||
|
<p class="intro__sub">Creative Development Company</p>
|
||||||
|
<h1 class="intro__title">THE BODA LAB</h1>
|
||||||
|
</div>
|
||||||
|
<a href="#about" class="scroll-down" aria-label="아래로 스크롤">
|
||||||
|
<svg viewBox="0 0 72 72" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<circle cx="36" cy="36" r="35.5" stroke="white"/>
|
||||||
|
<path d="M28 31L36 40L44 31" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
<path d="M36 25L36 40" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- 02. ABOUT -->
|
||||||
|
<section id="about" class="section section--about">
|
||||||
|
<div class="about__inner">
|
||||||
|
<div class="about__text">
|
||||||
|
<h2 class="section-title">ABOUT US</h2>
|
||||||
|
<p class="about__desc">
|
||||||
|
The BODA LAB은 디지털시대에 발맞춰 클라이언트의 비즈니스를 위한<br>
|
||||||
|
다양한 기술적 노하우로 완성된 경험을 제공합니다.<br>
|
||||||
|
우리의 활동은 웹, 앱, 모바일을 넘나들며 세상의 모든 비즈니스 활동에<br>
|
||||||
|
강한 영향력을 전달합니다.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="about__image">
|
||||||
|
<img src="images/about-hand.jpg" alt="스케치하는 손">
|
||||||
|
<p class="about__caption">Creative Development Company BODA.Lab</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- 03. HISTORY -->
|
||||||
|
<section id="history" class="section section--history">
|
||||||
|
<div class="history__top">
|
||||||
|
<h2 class="section-title section-title--dark">HISTORY</h2>
|
||||||
|
<div class="history__timeline">
|
||||||
|
<div class="history__year-group">
|
||||||
|
<span class="history__year">2024</span>
|
||||||
|
<div class="history__divider"></div>
|
||||||
|
<ul class="history__list">
|
||||||
|
<li><strong>12.01</strong><span>신한은행 슈퍼소울 운영 계약</span></li>
|
||||||
|
<li><strong>09.01</strong><span>한화금융통합 서비스 구축 계약</span></li>
|
||||||
|
<li><strong>05.30</strong><span>신한은행 슈퍼소울 구축 계약</span></li>
|
||||||
|
<li><strong>05.01</strong><span>롯데 렌터카 오토리스 구축 계약</span></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="history__year-group">
|
||||||
|
<span class="history__year">2023</span>
|
||||||
|
<div class="history__divider"></div>
|
||||||
|
<ul class="history__list">
|
||||||
|
<li><strong>12.01</strong><span>신한은행 슈퍼소울 운영 계약</span></li>
|
||||||
|
<li><strong>11.01</strong><span>한화금융 라이프 플러스 아카데미 구축 계약</span></li>
|
||||||
|
<li><strong>10.01</strong><span>대교 차세대 구축 계약</span></li>
|
||||||
|
<li><strong>09.01</strong><span>한화금융통합 서비스 구축 계약</span></li>
|
||||||
|
<li><strong>05.30</strong><span>신한은행 슈퍼소울 구축 계약</span></li>
|
||||||
|
<li><strong>05.01</strong><span>롯데 렌터카 오토리스 구축 계약</span></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="history__year-group">
|
||||||
|
<span class="history__year">2022</span>
|
||||||
|
<div class="history__divider"></div>
|
||||||
|
<ul class="history__list">
|
||||||
|
<li><strong>11.01</strong><span>한화금융 서비스앱 플러스 리뉴얼 2차 계약</span></li>
|
||||||
|
<li><strong>09.01</strong><span>한화금융 서비스앱 플러스 리뉴얼 1차 계약</span></li>
|
||||||
|
<li><strong>08.01</strong><span>밀레 쇼핑몰 리뉴얼 구축 계약</span></li>
|
||||||
|
<li><strong>07.01</strong><span>오뚜기 쇼핑몰 리뉴얼 구축 계약</span></li>
|
||||||
|
<li><strong>05.01</strong><span>캐나다구스 코리아 쇼핑몰 구축 계약</span></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="history__year-group">
|
||||||
|
<span class="history__year">2021</span>
|
||||||
|
<div class="history__divider"></div>
|
||||||
|
<ul class="history__list">
|
||||||
|
<li><strong>11.22</strong><span>롯데 렌터카 차세대 구축 계약</span></li>
|
||||||
|
<li><strong>11.01</strong><span>LSN MALL 구축 계약</span></li>
|
||||||
|
<li><strong>7.29</strong><span>(주)보다랩 설립</span></li>
|
||||||
|
<li><strong>5.15</strong><span>현대홈쇼핑 리뉴얼 구축 계약</span></li>
|
||||||
|
<li><strong>01.11</strong><span>KONA I 헬스케어 구축 계약</span></li>
|
||||||
|
<li><strong>01.11</strong><span>유아이팩토리 설립</span></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="history__bottom">
|
||||||
|
<div class="history__images">
|
||||||
|
<img class="history__img history__img--1" src="images/history-1.jpg" alt="">
|
||||||
|
<img class="history__img history__img--2" src="images/history-2.jpg" alt="">
|
||||||
|
<img class="history__img history__img--3" src="images/history-3.jpg" alt="">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- 04. BODA INTRO -->
|
||||||
|
<section id="boda-intro" class="section section--boda-intro">
|
||||||
|
<div class="boda-intro__content">
|
||||||
|
<h2 class="boda-intro__title">BODA Lab Co., Ltd.</h2>
|
||||||
|
<p class="boda-intro__desc">
|
||||||
|
accurately identifies customer needs to<br>
|
||||||
|
achieve the best completeness and satisfaction.<br>
|
||||||
|
We are working on a project with talented<br>
|
||||||
|
people with high technology.
|
||||||
|
</p>
|
||||||
|
<a href="#vision" class="scroll-down scroll-down--sm" aria-label="아래로 스크롤">
|
||||||
|
<svg viewBox="0 0 72 72" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<circle cx="36" cy="36" r="35.5" stroke="white"/>
|
||||||
|
<path d="M28 31L36 40L44 31" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
<path d="M36 25L36 40" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- 05. VISION -->
|
||||||
|
<section id="vision" class="section section--vision">
|
||||||
|
<div class="vision__inner">
|
||||||
|
<div class="vision__item">
|
||||||
|
<div class="vision__text">
|
||||||
|
<em class="vision__keyword">Perspective</em>
|
||||||
|
<p>클라이언트의 고유한 가치를 발견하고<br>차별화된 디지털 경험을 설계합니다.</p>
|
||||||
|
</div>
|
||||||
|
<div class="vision__image">
|
||||||
|
<img src="images/vision-1.jpg" alt="Uniqueness">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="vision__item vision__item--reverse">
|
||||||
|
<div class="vision__image">
|
||||||
|
<img src="images/vision-2.jpg" alt="Expertise">
|
||||||
|
</div>
|
||||||
|
<div class="vision__text">
|
||||||
|
<em class="vision__keyword">Expertise</em>
|
||||||
|
<p>10년 이상의 기술 노하우를 기반으로<br>최적의 솔루션을 제공합니다.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="vision__item">
|
||||||
|
<div class="vision__text">
|
||||||
|
<em class="vision__keyword">Satisfaction</em>
|
||||||
|
<p>고객의 만족을 최우선 가치로 삼아<br>완성도 높은 결과물을 만듭니다.</p>
|
||||||
|
</div>
|
||||||
|
<div class="vision__image">
|
||||||
|
<img src="images/vision-3.jpg" alt="Satisfaction">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- 06. PROJECT -->
|
||||||
|
<section id="project" class="section section--project">
|
||||||
|
<div class="project__inner">
|
||||||
|
<h2 class="section-title project__heading">PROJECT</h2>
|
||||||
|
<div class="project__grid">
|
||||||
|
<article class="project__card">
|
||||||
|
<div class="project__thumb"><img src="images/project-1.jpg" alt="신한유니버설앱 구축"></div>
|
||||||
|
<div class="project__info">
|
||||||
|
<div class="project__meta"><h3 class="project__name">신한유니버설앱 구축</h3><span class="project__date">2023.12</span></div>
|
||||||
|
<p class="project__company">신한은행</p>
|
||||||
|
<div class="project__stack"><span class="project__tag">vue</span><span class="project__tag">scss</span><span class="project__tag">typescript</span><span class="project__tag">nuxt.js</span></div>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
<article class="project__card">
|
||||||
|
<div class="project__thumb"><img src="images/project-2.jpg" alt="SK그룹 공식앱 내부 모바일"></div>
|
||||||
|
<div class="project__info">
|
||||||
|
<div class="project__meta"><h3 class="project__name">SK그룹 공식앱 내부 모바일</h3><span class="project__date">2023.12</span></div>
|
||||||
|
<p class="project__company">SK그룹</p>
|
||||||
|
<div class="project__stack"><span class="project__tag">vue</span><span class="project__tag">html5</span><span class="project__tag">css3</span></div>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
<article class="project__card">
|
||||||
|
<div class="project__thumb"><img src="images/project-3.jpg" alt="PNS네트웍스 디지털 플랫폼 구축"></div>
|
||||||
|
<div class="project__info">
|
||||||
|
<div class="project__meta"><h3 class="project__name">PNS네트웍스 디지털 플랫폼 구축</h3><span class="project__date">2023.04</span></div>
|
||||||
|
<p class="project__company">PNS 네트웍스</p>
|
||||||
|
<div class="project__stack"><span class="project__tag">react</span><span class="project__tag">scss</span><span class="project__tag">typescript</span></div>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
<article class="project__card">
|
||||||
|
<div class="project__thumb"><img src="images/project-4.jpg" alt="롯데렌터카 차세대"></div>
|
||||||
|
<div class="project__info">
|
||||||
|
<div class="project__meta"><h3 class="project__name">롯데렌터카 차세대</h3><span class="project__date">2022.05</span></div>
|
||||||
|
<p class="project__company">롯데</p>
|
||||||
|
<div class="project__stack"><span class="project__tag">vue</span><span class="project__tag">css3</span></div>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
<article class="project__card">
|
||||||
|
<div class="project__thumb"><img src="images/project-5.jpg" alt="오뚜기 쇼핑몰 구축"></div>
|
||||||
|
<div class="project__info">
|
||||||
|
<div class="project__meta"><h3 class="project__name">오뚜기 쇼핑몰 구축</h3><span class="project__date">2022.07</span></div>
|
||||||
|
<p class="project__company">오뚜기</p>
|
||||||
|
<div class="project__stack"><span class="project__tag">vue</span><span class="project__tag">html5</span><span class="project__tag">css3</span><span class="project__tag">typescript</span></div>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
<article class="project__card">
|
||||||
|
<div class="project__thumb"><img src="images/project-6.jpg" alt="캐나다구스 구축"></div>
|
||||||
|
<div class="project__info">
|
||||||
|
<div class="project__meta"><h3 class="project__name">캐나다구스 구축</h3><span class="project__date">2022.05</span></div>
|
||||||
|
<p class="project__company">캐나다구스 코리아</p>
|
||||||
|
<div class="project__stack"><span class="project__tag">html5</span><span class="project__tag">css3</span><span class="project__tag">typescript</span></div>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
<article class="project__card">
|
||||||
|
<div class="project__thumb"><img src="images/project-7.jpg" alt="한옥홈페이지 서버 이관"></div>
|
||||||
|
<div class="project__info">
|
||||||
|
<div class="project__meta"><h3 class="project__name">한옥홈페이지 서버 이관</h3><span class="project__date">2022.11</span></div>
|
||||||
|
<p class="project__company">더한옥</p>
|
||||||
|
<div class="project__stack"><span class="project__tag">vue</span><span class="project__tag">html5</span><span class="project__tag">css3</span><span class="project__tag">typescript</span><span class="project__tag">aws</span></div>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
<article class="project__card">
|
||||||
|
<div class="project__thumb"><img src="images/project-8.jpg" alt="그린카 차세대"></div>
|
||||||
|
<div class="project__info">
|
||||||
|
<div class="project__meta"><h3 class="project__name">그린카 차세대</h3><span class="project__date">2022.11</span></div>
|
||||||
|
<p class="project__company">그린카</p>
|
||||||
|
<div class="project__stack"><span class="project__tag">html5</span><span class="project__tag">css3</span><span class="project__tag">typescript</span><span class="project__tag">aos</span><span class="project__tag">ios</span></div>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
<article class="project__card">
|
||||||
|
<div class="project__thumb project__thumb--empty"></div>
|
||||||
|
<div class="project__info">
|
||||||
|
<div class="project__meta"><h3 class="project__name">프로스펙스 구축</h3><span class="project__date">2021.01</span></div>
|
||||||
|
<p class="project__company">(주)LS네트웍스</p>
|
||||||
|
<div class="project__stack"><span class="project__tag">react</span><span class="project__tag">scss</span><span class="project__tag">typescript</span></div>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
<article class="project__card">
|
||||||
|
<div class="project__thumb project__thumb--empty"></div>
|
||||||
|
<div class="project__info">
|
||||||
|
<div class="project__meta"><h3 class="project__name">중소기업창업</h3><span class="project__date">2021.11</span></div>
|
||||||
|
<p class="project__company">중소벤처기업부</p>
|
||||||
|
<div class="project__stack"><span class="project__tag">html5</span><span class="project__tag">css3</span><span class="project__tag">typescript</span></div>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
<article class="project__card">
|
||||||
|
<div class="project__thumb project__thumb--empty"></div>
|
||||||
|
<div class="project__info">
|
||||||
|
<div class="project__meta"><h3 class="project__name">한화 GAsk 구축 프로젝트</h3><span class="project__date">2021.11</span></div>
|
||||||
|
<p class="project__company">한화</p>
|
||||||
|
<div class="project__stack"><span class="project__tag">html5</span><span class="project__tag">css3</span><span class="project__tag">typescript</span><span class="project__tag">java</span></div>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
<article class="project__card">
|
||||||
|
<div class="project__thumb project__thumb--empty"></div>
|
||||||
|
<div class="project__info">
|
||||||
|
<div class="project__meta"><h3 class="project__name">(주)국민은행_KB국민은행<br>리브 Reboot One 구축, 프론트개발</h3><span class="project__date">2021.10</span></div>
|
||||||
|
<p class="project__company">국민은행</p>
|
||||||
|
<div class="project__stack"><span class="project__tag">vue</span><span class="project__tag">html5</span><span class="project__tag">css3</span><span class="project__tag">typescript</span></div>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
<article class="project__card">
|
||||||
|
<div class="project__thumb project__thumb--empty"></div>
|
||||||
|
<div class="project__info">
|
||||||
|
<div class="project__meta"><h3 class="project__name">코나아이 PC</h3><span class="project__date">2021.01</span></div>
|
||||||
|
<p class="project__company">코나아이</p>
|
||||||
|
<div class="project__stack"><span class="project__tag">html5</span><span class="project__tag">css3</span></div>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
<div class="project__more">
|
||||||
|
<a href="#" class="btn-more">+ VIEW MORE</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- 07. EXPERTISE -->
|
||||||
|
<section id="expertise" class="section section--expertise">
|
||||||
|
<div class="expertise__inner">
|
||||||
|
<h2 class="section-title">EXPERTISE</h2>
|
||||||
|
<p class="expertise__desc">The BODA LAB은 서비스와 사용자를 고려하여 다양한 경험을 제공하며,<br>거쳐간 모든 곳에서 지속적인 성장이 이루어질 수 있도록 함께합니다.</p>
|
||||||
|
<ul class="expertise__list">
|
||||||
|
<li class="expertise__item">
|
||||||
|
<span class="expertise__num">01</span>
|
||||||
|
<h3 class="expertise__name">UX Consulting</h3>
|
||||||
|
<p class="expertise__text">UX 컨설팅</p>
|
||||||
|
</li>
|
||||||
|
<li class="expertise__item">
|
||||||
|
<span class="expertise__num">02</span>
|
||||||
|
<h3 class="expertise__name">Plarform Building</h3>
|
||||||
|
<p class="expertise__text">플랫폼 구축</p>
|
||||||
|
</li>
|
||||||
|
<li class="expertise__item">
|
||||||
|
<span class="expertise__num">03</span>
|
||||||
|
<h3 class="expertise__name">Mobile App & Web</h3>
|
||||||
|
<p class="expertise__text">앱 & 웹 개발</p>
|
||||||
|
</li>
|
||||||
|
<li class="expertise__item">
|
||||||
|
<span class="expertise__num">04</span>
|
||||||
|
<h3 class="expertise__name">Service Management</h3>
|
||||||
|
<p class="expertise__text">서비스 운영</p>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- 08. CONTACT / FOOTER -->
|
||||||
|
<section id="contact" class="section section--contact">
|
||||||
|
<div class="contact__inner">
|
||||||
|
<div class="contact__left">
|
||||||
|
<h2 class="contact__greeting">Welcome!<br><span>BODA LAB</span></h2>
|
||||||
|
<address class="contact__address">
|
||||||
|
<p class="contact__label">Head Office</p>
|
||||||
|
<dl class="contact__info-list">
|
||||||
|
<div class="contact__info-item">
|
||||||
|
<dt>Address</dt>
|
||||||
|
<dd>서울특별시 금천구 가산디지털2로 169-16,<br>907호 (가산하우스디퍼스타)</dd>
|
||||||
|
</div>
|
||||||
|
<div class="contact__info-item">
|
||||||
|
<dt>e-mail</dt>
|
||||||
|
<dd><a href="mailto:bodalab@bodalab.com">bodalab@bodalab.com</a></dd>
|
||||||
|
</div>
|
||||||
|
<div class="contact__info-item">
|
||||||
|
<dt>tel</dt>
|
||||||
|
<dd>010-1234-5678</dd>
|
||||||
|
</div>
|
||||||
|
<div class="contact__info-item">
|
||||||
|
<dt>fax</dt>
|
||||||
|
<dd>010-1234-5678</dd>
|
||||||
|
</div>
|
||||||
|
</dl>
|
||||||
|
</address>
|
||||||
|
</div>
|
||||||
|
<div class="contact__right">
|
||||||
|
<div class="contact__map"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- 프로젝트 문의 -->
|
||||||
|
<div class="contact-accordion">
|
||||||
|
<div class="contact-accordion__item is-open" id="acc-project">
|
||||||
|
<button class="contact-accordion__header" aria-expanded="true" aria-controls="acc-project-body">
|
||||||
|
<span>프로젝트 문의</span>
|
||||||
|
<svg class="contact-accordion__icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M18 15L12 9L6 15" stroke="white" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
<div class="contact-accordion__body" id="acc-project-body">
|
||||||
|
<form class="contact-form" onsubmit="return false;">
|
||||||
|
<div class="contact-form__row">
|
||||||
|
<input type="text" class="contact-form__input" placeholder="회사명">
|
||||||
|
<input type="text" class="contact-form__input" placeholder="담당자 이름">
|
||||||
|
</div>
|
||||||
|
<div class="contact-form__row">
|
||||||
|
<input type="tel" class="contact-form__input" placeholder="연락처">
|
||||||
|
<input type="email" class="contact-form__input" placeholder="이메일">
|
||||||
|
</div>
|
||||||
|
<textarea class="contact-form__textarea" placeholder="문의내용"></textarea>
|
||||||
|
<div class="contact-form__agree">
|
||||||
|
<label class="contact-form__checkbox">
|
||||||
|
<input type="checkbox">
|
||||||
|
<span class="contact-form__checkbox-box"></span>
|
||||||
|
<span>개인정보보호정책에 동의합니다.</span>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<div class="contact-form__submit">
|
||||||
|
<button type="submit" class="btn-send">SEND</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 채용 -->
|
||||||
|
<div class="contact-accordion__item" id="acc-career">
|
||||||
|
<button class="contact-accordion__header" aria-expanded="false" aria-controls="acc-career-body">
|
||||||
|
<span>채용</span>
|
||||||
|
<svg class="contact-accordion__icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M6 9L12 15L18 9" stroke="white" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
<div class="contact-accordion__body" id="acc-career-body" hidden>
|
||||||
|
<div class="career-tags">
|
||||||
|
<a href="#" class="career-tag">Planner & Consulting <svg viewBox="0 0 16 16" fill="none"><path d="M4 12L12 4M12 4H6M12 4V10" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/></svg></a>
|
||||||
|
<a href="#" class="career-tag">Designer <svg viewBox="0 0 16 16" fill="none"><path d="M4 12L12 4M12 4H6M12 4V10" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/></svg></a>
|
||||||
|
<a href="#" class="career-tag">Publisher <svg viewBox="0 0 16 16" fill="none"><path d="M4 12L12 4M12 4H6M12 4V10" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/></svg></a>
|
||||||
|
<a href="#" class="career-tag">Scripter <svg viewBox="0 0 16 16" fill="none"><path d="M4 12L12 4M12 4H6M12 4V10" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/></svg></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<footer class="footer">
|
||||||
|
<div class="footer__inner">
|
||||||
|
<p class="footer__brand">THE<br>BODA LAB</p>
|
||||||
|
<p class="footer__contact">
|
||||||
|
Mail <a href="mailto:bodalab@bodalab.com">bodalab@bodalab.com</a>
|
||||||
|
Tel <a href="tel:010-1234-5678">010-1234-5678</a>
|
||||||
|
</p>
|
||||||
|
<p class="footer__copy">© 2024 BODA LAB</p>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
</main>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,66 @@
|
||||||
|
import $ from 'jquery'
|
||||||
|
|
||||||
|
$(function () {
|
||||||
|
|
||||||
|
const $gnb = $('#gnb');
|
||||||
|
const $hamburger = $('.gnb__hamburger');
|
||||||
|
const $mobileNav = $('.gnb__mobile-nav');
|
||||||
|
const $sections = $('section[id]');
|
||||||
|
const $navLinks = $('.gnb__nav li');
|
||||||
|
|
||||||
|
// GNB 스크롤 배경
|
||||||
|
$(window).on('scroll.gnb', { passive: true }, function () {
|
||||||
|
$gnb.toggleClass('is-scrolled', $(this).scrollTop() > 40);
|
||||||
|
updateActiveNav();
|
||||||
|
});
|
||||||
|
|
||||||
|
// 햄버거 메뉴
|
||||||
|
$hamburger.on('click', function () {
|
||||||
|
const isOpen = $hamburger.toggleClass('is-open').hasClass('is-open');
|
||||||
|
$hamburger.attr('aria-expanded', isOpen);
|
||||||
|
$mobileNav.toggleClass('is-open', isOpen);
|
||||||
|
});
|
||||||
|
|
||||||
|
// 모바일 메뉴 링크 클릭 시 닫기
|
||||||
|
$('.gnb__mobile-nav a').on('click', function () {
|
||||||
|
$hamburger.removeClass('is-open').attr('aria-expanded', false);
|
||||||
|
$mobileNav.removeClass('is-open');
|
||||||
|
});
|
||||||
|
|
||||||
|
// 현재 섹션에 따라 GNB 활성화
|
||||||
|
function updateActiveNav() {
|
||||||
|
let current = '';
|
||||||
|
const scrollY = $(window).scrollTop() + $(window).height() / 3;
|
||||||
|
|
||||||
|
$sections.each(function () {
|
||||||
|
if ($(this).offset().top <= scrollY) {
|
||||||
|
current = $(this).attr('id');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
$navLinks.each(function () {
|
||||||
|
const href = $(this).find('a').attr('href').replace('#', '');
|
||||||
|
$(this).toggleClass('is-active', href === current);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Contact 아코디언
|
||||||
|
$('.contact-accordion__header').on('click', function () {
|
||||||
|
const $item = $(this).closest('.contact-accordion__item');
|
||||||
|
const $body = $('#' + $(this).attr('aria-controls'));
|
||||||
|
const isOpen = $item.hasClass('is-open');
|
||||||
|
|
||||||
|
$item.toggleClass('is-open', !isOpen);
|
||||||
|
$(this).attr('aria-expanded', !isOpen);
|
||||||
|
|
||||||
|
if (isOpen) {
|
||||||
|
$body.attr('hidden', '');
|
||||||
|
} else {
|
||||||
|
$body.removeAttr('hidden');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// 초기 실행
|
||||||
|
updateActiveNav();
|
||||||
|
|
||||||
|
});
|
||||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 11 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 545 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 546 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 868 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 674 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 439 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 356 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 459 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 359 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 698 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 252 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 113 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 34 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 12 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 764 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 922 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 58 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 125 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 622 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 555 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.4 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.4 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 620 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 169 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 727 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.0 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.5 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 791 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 749 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 489 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 672 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 70 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 331 KiB |
|
|
@ -0,0 +1,2 @@
|
||||||
|
@import url('https://cdn.jsdelivr.net/gh/sunn-us/SUIT/fonts/variable/woff2/SUIT-Variable.css');
|
||||||
|
@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@1&display=swap');
|
||||||
|
|
@ -0,0 +1,7 @@
|
||||||
|
@use 'variable' as *;
|
||||||
|
|
||||||
|
@mixin mo {
|
||||||
|
@media (max-width: #{$bp-mo}) {
|
||||||
|
@content;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,90 @@
|
||||||
|
@use 'variable' as *;
|
||||||
|
@use 'mixin' as *;
|
||||||
|
|
||||||
|
*, *::before, *::after {
|
||||||
|
box-sizing: border-box;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
scroll-behavior: smooth;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: $font-sans;
|
||||||
|
background-color: $color-bg;
|
||||||
|
color: $color-white;
|
||||||
|
overflow-x: hidden;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul, ol { list-style: none; }
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: inherit;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
address { font-style: normal; }
|
||||||
|
|
||||||
|
// Common
|
||||||
|
.section {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-title {
|
||||||
|
font-family: $font-sans;
|
||||||
|
font-size: clamp(28px, 3vw, 40px);
|
||||||
|
font-weight: 600;
|
||||||
|
letter-spacing: 0.02em;
|
||||||
|
color: $color-white;
|
||||||
|
line-height: 1;
|
||||||
|
|
||||||
|
&--dark {
|
||||||
|
color: $color-dark;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.scroll-down {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 40px;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
width: 72px;
|
||||||
|
height: 72px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
transition: opacity 0.3s;
|
||||||
|
|
||||||
|
&:hover { opacity: 0.6; }
|
||||||
|
|
||||||
|
svg {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
&--sm {
|
||||||
|
position: relative;
|
||||||
|
bottom: auto;
|
||||||
|
left: auto;
|
||||||
|
transform: none;
|
||||||
|
margin-top: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@include mo {
|
||||||
|
width: 52px;
|
||||||
|
height: 52px;
|
||||||
|
bottom: 24px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,16 @@
|
||||||
|
$color-bg: #0d0d0d;
|
||||||
|
$color-bg-light: #e5e5e5;
|
||||||
|
$color-cyan: #00f0ff;
|
||||||
|
$color-purple: #8f00ff;
|
||||||
|
$color-blue: #7796ff;
|
||||||
|
$color-white: #ffffff;
|
||||||
|
$color-dark: #0d0d0d;
|
||||||
|
$color-gray: #999;
|
||||||
|
|
||||||
|
$font-sans: 'SUIT Variable', 'SUIT', sans-serif;
|
||||||
|
$font-serif: 'DM Serif Display', serif;
|
||||||
|
|
||||||
|
$gnb-height: 80px;
|
||||||
|
$gnb-height-mo: 60px;
|
||||||
|
|
||||||
|
$bp-mo: 768px;
|
||||||
|
|
@ -0,0 +1,9 @@
|
||||||
|
// Base
|
||||||
|
@use 'base/font';
|
||||||
|
@use 'base/reset';
|
||||||
|
|
||||||
|
// Pages
|
||||||
|
@use 'page/home';
|
||||||
|
@use 'page/about';
|
||||||
|
@use 'page/projects';
|
||||||
|
@use 'page/contact';
|
||||||
|
|
@ -0,0 +1,361 @@
|
||||||
|
@use '../base/variable' as *;
|
||||||
|
@use '../base/mixin' as *;
|
||||||
|
|
||||||
|
// About
|
||||||
|
.section--about {
|
||||||
|
height: 100vh;
|
||||||
|
background: $color-bg;
|
||||||
|
display: flex;
|
||||||
|
align-items: stretch;
|
||||||
|
|
||||||
|
@include mo {
|
||||||
|
height: auto;
|
||||||
|
min-height: 100vh;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.about__inner {
|
||||||
|
display: flex;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
|
@include mo {
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.about__text {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
width: 45%;
|
||||||
|
padding: $gnb-height 48px 60px;
|
||||||
|
gap: 80px;
|
||||||
|
|
||||||
|
@include mo {
|
||||||
|
width: 100%;
|
||||||
|
padding: calc(#{$gnb-height-mo} + 40px) 24px 40px;
|
||||||
|
gap: 40px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.about__desc {
|
||||||
|
font-size: clamp(13px, 1.1vw, 16px);
|
||||||
|
font-weight: 300;
|
||||||
|
line-height: 1.8;
|
||||||
|
color: $color-white;
|
||||||
|
opacity: 0.9;
|
||||||
|
|
||||||
|
@include mo {
|
||||||
|
br { display: none; }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.about__image {
|
||||||
|
position: relative;
|
||||||
|
width: 55%;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: cover;
|
||||||
|
object-position: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
@include mo {
|
||||||
|
width: 100%;
|
||||||
|
height: 56vw;
|
||||||
|
min-height: 260px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.about__caption {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
padding: 20px 24px;
|
||||||
|
font-size: clamp(18px, 2.5vw, 36px);
|
||||||
|
font-weight: 400;
|
||||||
|
color: $color-white;
|
||||||
|
background: linear-gradient(to top, rgba($color-bg, 0.7) 0%, transparent 100%);
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
|
||||||
|
@include mo {
|
||||||
|
font-size: 16px;
|
||||||
|
padding: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// History
|
||||||
|
.section--history {
|
||||||
|
background: $color-bg;
|
||||||
|
}
|
||||||
|
|
||||||
|
.history__top {
|
||||||
|
background: $color-bg-light;
|
||||||
|
padding: 80px 48px 60px;
|
||||||
|
|
||||||
|
@include mo {
|
||||||
|
padding: 60px 24px 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-title--dark {
|
||||||
|
margin-bottom: 48px;
|
||||||
|
|
||||||
|
@include mo {
|
||||||
|
margin-bottom: 32px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.history__timeline {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(4, 1fr);
|
||||||
|
gap: 0 24px;
|
||||||
|
|
||||||
|
@include mo {
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
gap: 40px 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.history__year-group {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.history__year {
|
||||||
|
font-size: clamp(24px, 2.5vw, 32px);
|
||||||
|
font-weight: 100;
|
||||||
|
color: $color-dark;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.history__divider {
|
||||||
|
width: 0.5px;
|
||||||
|
background: $color-dark;
|
||||||
|
align-self: flex-start;
|
||||||
|
height: 0;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
opacity: 0.4;
|
||||||
|
}
|
||||||
|
|
||||||
|
.history__list {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 16px;
|
||||||
|
|
||||||
|
li {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 4px;
|
||||||
|
|
||||||
|
strong {
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 700;
|
||||||
|
color: $color-dark;
|
||||||
|
line-height: 1.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
span {
|
||||||
|
font-size: clamp(12px, 1vw, 14px);
|
||||||
|
font-weight: 300;
|
||||||
|
color: $color-dark;
|
||||||
|
line-height: 1.6;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.history__bottom {
|
||||||
|
background: $color-bg;
|
||||||
|
padding: 0 48px 80px;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
@include mo {
|
||||||
|
padding: 0 24px 60px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.history__images {
|
||||||
|
position: relative;
|
||||||
|
height: 400px;
|
||||||
|
margin-top: -80px;
|
||||||
|
|
||||||
|
@include mo {
|
||||||
|
height: 260px;
|
||||||
|
margin-top: -40px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.history__img {
|
||||||
|
position: absolute;
|
||||||
|
object-fit: cover;
|
||||||
|
|
||||||
|
&--1 {
|
||||||
|
width: 260px;
|
||||||
|
height: 170px;
|
||||||
|
left: 0;
|
||||||
|
bottom: 0;
|
||||||
|
|
||||||
|
@include mo {
|
||||||
|
width: 120px;
|
||||||
|
height: 80px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&--2 {
|
||||||
|
width: 370px;
|
||||||
|
height: 400px;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
top: 0;
|
||||||
|
|
||||||
|
@include mo {
|
||||||
|
width: 180px;
|
||||||
|
height: 200px;
|
||||||
|
left: 50%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&--3 {
|
||||||
|
width: 300px;
|
||||||
|
height: 190px;
|
||||||
|
right: 0;
|
||||||
|
bottom: 40px;
|
||||||
|
|
||||||
|
@include mo {
|
||||||
|
width: 130px;
|
||||||
|
height: 90px;
|
||||||
|
bottom: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Boda Intro
|
||||||
|
.section--boda-intro {
|
||||||
|
height: 100vh;
|
||||||
|
background: $color-bg;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
@include mo {
|
||||||
|
min-height: 100vh;
|
||||||
|
height: auto;
|
||||||
|
padding: 80px 24px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.boda-intro__content {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.boda-intro__title {
|
||||||
|
font-size: clamp(20px, 2vw, 28px);
|
||||||
|
font-weight: 600;
|
||||||
|
letter-spacing: 0.02em;
|
||||||
|
margin-bottom: 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.boda-intro__desc {
|
||||||
|
font-size: clamp(14px, 1.3vw, 18px);
|
||||||
|
font-weight: 300;
|
||||||
|
line-height: 1.8;
|
||||||
|
color: rgba($color-white, 0.8);
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
@include mo {
|
||||||
|
br { display: none; }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Vision
|
||||||
|
.section--vision {
|
||||||
|
background: $color-bg;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vision__inner {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vision__item {
|
||||||
|
display: flex;
|
||||||
|
align-items: stretch;
|
||||||
|
height: 33.333vh;
|
||||||
|
min-height: 280px;
|
||||||
|
|
||||||
|
&--reverse {
|
||||||
|
flex-direction: row-reverse;
|
||||||
|
}
|
||||||
|
|
||||||
|
@include mo {
|
||||||
|
flex-direction: column !important;
|
||||||
|
height: auto;
|
||||||
|
min-height: unset;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.vision__text {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
width: 50%;
|
||||||
|
padding: 40px 80px;
|
||||||
|
gap: 20px;
|
||||||
|
|
||||||
|
p {
|
||||||
|
font-size: clamp(13px, 1vw, 15px);
|
||||||
|
font-weight: 300;
|
||||||
|
line-height: 1.8;
|
||||||
|
color: rgba($color-white, 0.75);
|
||||||
|
|
||||||
|
@include mo {
|
||||||
|
br { display: none; }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@include mo {
|
||||||
|
width: 100%;
|
||||||
|
padding: 32px 24px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.vision__keyword {
|
||||||
|
font-family: $font-serif;
|
||||||
|
font-style: italic;
|
||||||
|
font-size: clamp(32px, 4vw, 56px);
|
||||||
|
color: $color-white;
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vision__image {
|
||||||
|
width: 50%;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: cover;
|
||||||
|
transition: transform 0.6s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover img {
|
||||||
|
transform: scale(1.04);
|
||||||
|
}
|
||||||
|
|
||||||
|
@include mo {
|
||||||
|
width: 100%;
|
||||||
|
height: 56vw;
|
||||||
|
min-height: 220px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,471 @@
|
||||||
|
@use '../base/variable' as *;
|
||||||
|
@use '../base/mixin' as *;
|
||||||
|
|
||||||
|
// Expertise
|
||||||
|
.section--expertise {
|
||||||
|
background: $color-bg;
|
||||||
|
padding: 100px 48px;
|
||||||
|
border-top: 1px solid rgba($color-white, 0.08);
|
||||||
|
|
||||||
|
@include mo {
|
||||||
|
padding: 60px 24px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.expertise__inner {
|
||||||
|
max-width: 1200px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.expertise__desc {
|
||||||
|
margin-top: 20px;
|
||||||
|
margin-bottom: 64px;
|
||||||
|
font-size: 15px;
|
||||||
|
font-weight: 300;
|
||||||
|
color: rgba($color-white, 0.6);
|
||||||
|
|
||||||
|
@include mo {
|
||||||
|
margin-bottom: 40px;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.expertise__list {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(4, 1fr);
|
||||||
|
gap: 0;
|
||||||
|
border-top: 1px solid rgba($color-white, 0.12);
|
||||||
|
|
||||||
|
@include mo {
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.expertise__item {
|
||||||
|
padding: 40px 32px 40px 0;
|
||||||
|
border-right: 1px solid rgba($color-white, 0.12);
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
border-right: none;
|
||||||
|
|
||||||
|
@include mo {
|
||||||
|
border-right: 1px solid rgba($color-white, 0.12);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@include mo {
|
||||||
|
padding: 28px 20px 28px 0;
|
||||||
|
|
||||||
|
&:nth-child(2),
|
||||||
|
&:nth-child(4) {
|
||||||
|
border-right: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:nth-child(3),
|
||||||
|
&:nth-child(4) {
|
||||||
|
border-top: 1px solid rgba($color-white, 0.12);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.expertise__num {
|
||||||
|
display: block;
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: 400;
|
||||||
|
color: $color-cyan;
|
||||||
|
letter-spacing: 0.1em;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.expertise__name {
|
||||||
|
font-size: clamp(16px, 1.4vw, 20px);
|
||||||
|
font-weight: 400;
|
||||||
|
color: $color-white;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
line-height: 1.3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.expertise__text {
|
||||||
|
font-size: 13px;
|
||||||
|
font-weight: 300;
|
||||||
|
line-height: 1.7;
|
||||||
|
color: rgba($color-white, 0.55);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Contact
|
||||||
|
.section--contact {
|
||||||
|
background: $color-bg;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
border-top: 1px solid rgba($color-white, 0.08);
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact__inner {
|
||||||
|
display: flex;
|
||||||
|
align-items: stretch;
|
||||||
|
flex: 1;
|
||||||
|
min-height: 60vh;
|
||||||
|
|
||||||
|
@include mo {
|
||||||
|
flex-direction: column;
|
||||||
|
min-height: unset;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact__left {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 40px;
|
||||||
|
width: 50%;
|
||||||
|
padding: 80px 80px 80px 48px;
|
||||||
|
|
||||||
|
@include mo {
|
||||||
|
width: 100%;
|
||||||
|
padding: 60px 24px 40px;
|
||||||
|
gap: 32px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact__greeting {
|
||||||
|
font-family: $font-serif;
|
||||||
|
font-style: italic;
|
||||||
|
font-size: clamp(36px, 5vw, 72px);
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: 1.1;
|
||||||
|
color: $color-white;
|
||||||
|
|
||||||
|
span {
|
||||||
|
display: block;
|
||||||
|
font-size: clamp(16px, 1.5vw, 22px);
|
||||||
|
font-family: $font-sans;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 900;
|
||||||
|
letter-spacing: 0.15em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
margin-top: 8px;
|
||||||
|
color: $color-cyan;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact__label {
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: 600;
|
||||||
|
letter-spacing: 0.1em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
color: rgba($color-white, 0.5);
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact__info-list {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact__info-item {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 4px;
|
||||||
|
|
||||||
|
dt {
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: 600;
|
||||||
|
letter-spacing: 0.08em;
|
||||||
|
color: $color-cyan;
|
||||||
|
}
|
||||||
|
|
||||||
|
dd {
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 300;
|
||||||
|
line-height: 1.7;
|
||||||
|
color: rgba($color-white, 0.85);
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: inherit;
|
||||||
|
transition: opacity 0.2s;
|
||||||
|
&:hover { opacity: 0.7; }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact__right {
|
||||||
|
width: 50%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 80px 48px 80px 0;
|
||||||
|
gap: 24px;
|
||||||
|
|
||||||
|
@include mo {
|
||||||
|
width: 100%;
|
||||||
|
padding: 0 24px 60px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact__map {
|
||||||
|
width: 100%;
|
||||||
|
aspect-ratio: 4 / 3;
|
||||||
|
background: #1a1a1a url('../../images/map.svg') center / cover no-repeat;
|
||||||
|
border: 1px solid rgba($color-white, 0.1);
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Contact accordion — 프로젝트문의 / 채용
|
||||||
|
.contact-accordion {
|
||||||
|
border-top: 1px solid rgba($color-white, 0.08);
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-accordion__item {
|
||||||
|
border-bottom: 1px solid rgba($color-white, 0.08);
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-accordion__header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
width: 100%;
|
||||||
|
padding: 28px 48px;
|
||||||
|
background: none;
|
||||||
|
border: none;
|
||||||
|
cursor: pointer;
|
||||||
|
color: $color-white;
|
||||||
|
font-size: clamp(16px, 1.4vw, 20px);
|
||||||
|
font-weight: 400;
|
||||||
|
font-family: $font-sans;
|
||||||
|
text-align: left;
|
||||||
|
transition: opacity 0.2s;
|
||||||
|
|
||||||
|
&:hover { opacity: 0.7; }
|
||||||
|
|
||||||
|
@include mo {
|
||||||
|
padding: 22px 24px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-accordion__icon {
|
||||||
|
width: 24px;
|
||||||
|
height: 24px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
transition: transform 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-accordion__item.is-open .contact-accordion__icon {
|
||||||
|
transform: rotate(180deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-accordion__body {
|
||||||
|
overflow: hidden;
|
||||||
|
max-height: 0;
|
||||||
|
transition: max-height 0.4s ease;
|
||||||
|
|
||||||
|
&:not([hidden]) {
|
||||||
|
max-height: 800px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&[hidden] {
|
||||||
|
display: block !important;
|
||||||
|
max-height: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 문의 폼
|
||||||
|
.contact-form {
|
||||||
|
padding: 8px 48px 48px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 12px;
|
||||||
|
|
||||||
|
@include mo {
|
||||||
|
padding: 8px 24px 40px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-form__row {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
gap: 12px;
|
||||||
|
|
||||||
|
@include mo {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-form__input,
|
||||||
|
.contact-form__textarea {
|
||||||
|
width: 100%;
|
||||||
|
background: rgba($color-white, 0.04);
|
||||||
|
border: 1px solid rgba($color-white, 0.1);
|
||||||
|
color: $color-white;
|
||||||
|
font-family: $font-sans;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 300;
|
||||||
|
padding: 14px 16px;
|
||||||
|
outline: none;
|
||||||
|
transition: border-color 0.2s;
|
||||||
|
|
||||||
|
&::placeholder { color: rgba($color-white, 0.35); }
|
||||||
|
&:focus { border-color: rgba($color-white, 0.3); }
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-form__textarea {
|
||||||
|
resize: none;
|
||||||
|
height: 180px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-form__agree {
|
||||||
|
margin-top: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-form__checkbox {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 10px;
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 13px;
|
||||||
|
font-weight: 300;
|
||||||
|
color: rgba($color-white, 0.6);
|
||||||
|
|
||||||
|
input[type="checkbox"] { display: none; }
|
||||||
|
|
||||||
|
&-box {
|
||||||
|
width: 18px;
|
||||||
|
height: 18px;
|
||||||
|
border: 1px solid rgba($color-white, 0.3);
|
||||||
|
flex-shrink: 0;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
transition: background 0.2s, border-color 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
input:checked + &-box {
|
||||||
|
background: $color-cyan;
|
||||||
|
border-color: $color-cyan;
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
content: '';
|
||||||
|
display: block;
|
||||||
|
width: 10px;
|
||||||
|
height: 6px;
|
||||||
|
border-left: 1.5px solid $color-dark;
|
||||||
|
border-bottom: 1.5px solid $color-dark;
|
||||||
|
transform: rotate(-45deg) translateY(-2px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-form__submit {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
margin-top: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-send {
|
||||||
|
padding: 12px 48px;
|
||||||
|
background: $color-cyan;
|
||||||
|
border: none;
|
||||||
|
border-radius: 100px;
|
||||||
|
color: $color-dark;
|
||||||
|
font-family: $font-sans;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 700;
|
||||||
|
letter-spacing: 0.1em;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: opacity 0.2s;
|
||||||
|
|
||||||
|
&:hover { opacity: 0.8; }
|
||||||
|
}
|
||||||
|
|
||||||
|
// 채용 태그
|
||||||
|
.career-tags {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 12px;
|
||||||
|
padding: 8px 48px 48px;
|
||||||
|
|
||||||
|
@include mo {
|
||||||
|
padding: 8px 24px 40px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.career-tag {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
padding: 10px 20px;
|
||||||
|
border: 1px solid rgba($color-white, 0.25);
|
||||||
|
border-radius: 100px;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 300;
|
||||||
|
color: $color-white;
|
||||||
|
transition: border-color 0.2s, color 0.2s;
|
||||||
|
|
||||||
|
svg {
|
||||||
|
width: 14px;
|
||||||
|
height: 14px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
border-color: $color-cyan;
|
||||||
|
color: $color-cyan;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Footer
|
||||||
|
.footer {
|
||||||
|
border-top: 1px solid rgba($color-white, 0.08);
|
||||||
|
padding: 32px 48px;
|
||||||
|
|
||||||
|
@include mo {
|
||||||
|
padding: 24px 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer__inner {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: 24px;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
|
||||||
|
@include mo {
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-start;
|
||||||
|
gap: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer__brand {
|
||||||
|
font-size: clamp(18px, 2vw, 28px);
|
||||||
|
font-weight: 700;
|
||||||
|
letter-spacing: 0.08em;
|
||||||
|
color: rgba($color-white, 0.4);
|
||||||
|
line-height: 1.2;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer__contact {
|
||||||
|
font-size: 13px;
|
||||||
|
font-weight: 300;
|
||||||
|
color: rgba($color-white, 0.5);
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: rgba($color-white, 0.5);
|
||||||
|
transition: color 0.2s;
|
||||||
|
&:hover { color: $color-white; }
|
||||||
|
}
|
||||||
|
|
||||||
|
@include mo {
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer__copy {
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: 300;
|
||||||
|
color: rgba($color-white, 0.3);
|
||||||
|
letter-spacing: 0.03em;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,231 @@
|
||||||
|
@use '../base/variable' as *;
|
||||||
|
@use '../base/mixin' as *;
|
||||||
|
|
||||||
|
// GNB
|
||||||
|
.gnb {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: $gnb-height;
|
||||||
|
z-index: 100;
|
||||||
|
transition: background 0.4s;
|
||||||
|
|
||||||
|
&.is-scrolled {
|
||||||
|
background: rgba($color-bg, 0.92);
|
||||||
|
backdrop-filter: blur(12px);
|
||||||
|
}
|
||||||
|
|
||||||
|
&__inner {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
height: 100%;
|
||||||
|
padding: 0 48px;
|
||||||
|
|
||||||
|
@include mo {
|
||||||
|
padding: 0 20px;
|
||||||
|
height: $gnb-height-mo;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__logo {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
svg {
|
||||||
|
width: 90px;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__nav {
|
||||||
|
ul {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
li a {
|
||||||
|
display: block;
|
||||||
|
padding: 24px 32px;
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 400;
|
||||||
|
letter-spacing: 0.05em;
|
||||||
|
color: $color-white;
|
||||||
|
transition: color 0.2s;
|
||||||
|
|
||||||
|
&:hover { color: $color-cyan; }
|
||||||
|
}
|
||||||
|
|
||||||
|
li.is-active a {
|
||||||
|
color: $color-cyan;
|
||||||
|
}
|
||||||
|
|
||||||
|
@include mo {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__hamburger {
|
||||||
|
display: none;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 5px;
|
||||||
|
width: 32px;
|
||||||
|
height: 32px;
|
||||||
|
background: none;
|
||||||
|
border: none;
|
||||||
|
cursor: pointer;
|
||||||
|
padding: 0;
|
||||||
|
|
||||||
|
span {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
height: 1px;
|
||||||
|
background: $color-white;
|
||||||
|
transition: transform 0.3s, opacity 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.is-open {
|
||||||
|
span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
|
||||||
|
span:nth-child(2) { opacity: 0; }
|
||||||
|
span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
|
||||||
|
}
|
||||||
|
|
||||||
|
@include mo {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__mobile-nav {
|
||||||
|
display: none;
|
||||||
|
position: absolute;
|
||||||
|
top: $gnb-height-mo;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
background: rgba($color-bg, 0.97);
|
||||||
|
backdrop-filter: blur(16px);
|
||||||
|
padding: 16px 0 24px;
|
||||||
|
transform: translateY(-100%);
|
||||||
|
opacity: 0;
|
||||||
|
transition: transform 0.35s ease, opacity 0.35s ease;
|
||||||
|
pointer-events: none;
|
||||||
|
|
||||||
|
ul {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
li a {
|
||||||
|
display: block;
|
||||||
|
padding: 14px 24px;
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: 400;
|
||||||
|
letter-spacing: 0.05em;
|
||||||
|
color: $color-white;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.is-open {
|
||||||
|
transform: translateY(0);
|
||||||
|
opacity: 1;
|
||||||
|
pointer-events: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
@include mo {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Intro
|
||||||
|
.section--intro {
|
||||||
|
height: 100vh;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
overflow: hidden;
|
||||||
|
background: $color-bg;
|
||||||
|
}
|
||||||
|
|
||||||
|
.intro__blobs {
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
pointer-events: none;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.blob {
|
||||||
|
position: absolute;
|
||||||
|
border-radius: 50%;
|
||||||
|
filter: blur(120px);
|
||||||
|
opacity: 0.55;
|
||||||
|
|
||||||
|
&--cyan {
|
||||||
|
width: 56vw;
|
||||||
|
height: 56vw;
|
||||||
|
background: $color-cyan;
|
||||||
|
top: -10%;
|
||||||
|
right: -10%;
|
||||||
|
|
||||||
|
@include mo {
|
||||||
|
width: 90vw;
|
||||||
|
height: 90vw;
|
||||||
|
right: -20%;
|
||||||
|
top: -5%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&--purple {
|
||||||
|
width: 32vw;
|
||||||
|
height: 32vw;
|
||||||
|
background: $color-purple;
|
||||||
|
top: 15%;
|
||||||
|
left: 5%;
|
||||||
|
|
||||||
|
@include mo {
|
||||||
|
width: 60vw;
|
||||||
|
height: 60vw;
|
||||||
|
left: -15%;
|
||||||
|
top: 20%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&--blue {
|
||||||
|
width: 24vw;
|
||||||
|
height: 24vw;
|
||||||
|
background: $color-blue;
|
||||||
|
bottom: 10%;
|
||||||
|
left: -5%;
|
||||||
|
|
||||||
|
@include mo {
|
||||||
|
width: 50vw;
|
||||||
|
height: 50vw;
|
||||||
|
left: -10%;
|
||||||
|
bottom: 5%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.intro__content {
|
||||||
|
position: relative;
|
||||||
|
text-align: center;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.intro__sub {
|
||||||
|
font-size: clamp(16px, 2.5vw, 36px);
|
||||||
|
font-weight: 100;
|
||||||
|
letter-spacing: 0.02em;
|
||||||
|
color: $color-white;
|
||||||
|
margin-bottom: clamp(16px, 2vw, 32px);
|
||||||
|
line-height: 1.2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.intro__title {
|
||||||
|
font-size: clamp(14px, 1.5vw, 20px);
|
||||||
|
font-weight: 900;
|
||||||
|
letter-spacing: 0.2em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
color: $color-white;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,146 @@
|
||||||
|
@use '../base/variable' as *;
|
||||||
|
@use '../base/mixin' as *;
|
||||||
|
|
||||||
|
.section--project {
|
||||||
|
background: $color-bg;
|
||||||
|
padding: 100px 48px;
|
||||||
|
|
||||||
|
@include mo {
|
||||||
|
padding: 60px 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.project__inner {
|
||||||
|
max-width: 1200px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.project__heading {
|
||||||
|
margin-bottom: 60px;
|
||||||
|
|
||||||
|
@include mo {
|
||||||
|
margin-bottom: 36px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.project__grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(2, 1fr);
|
||||||
|
gap: 40px 40px;
|
||||||
|
|
||||||
|
@include mo {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
gap: 32px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.project__card {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 16px;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
&:hover .project__thumb img {
|
||||||
|
transform: scale(1.04);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.project__thumb {
|
||||||
|
width: 100%;
|
||||||
|
aspect-ratio: 16 / 10;
|
||||||
|
overflow: hidden;
|
||||||
|
background: #1a1a1a;
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: cover;
|
||||||
|
transition: transform 0.5s ease;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.project__thumb--empty {
|
||||||
|
background: #1a1a1a;
|
||||||
|
}
|
||||||
|
|
||||||
|
.project__info {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.project__meta {
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-start;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.project__name {
|
||||||
|
font-size: clamp(14px, 1.1vw, 16px);
|
||||||
|
font-weight: 500;
|
||||||
|
color: $color-white;
|
||||||
|
line-height: 1.4;
|
||||||
|
}
|
||||||
|
|
||||||
|
.project__date {
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: 300;
|
||||||
|
color: $color-gray;
|
||||||
|
white-space: nowrap;
|
||||||
|
padding-top: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.project__company {
|
||||||
|
font-size: 13px;
|
||||||
|
font-weight: 300;
|
||||||
|
color: rgba($color-white, 0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
.project__stack {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 6px;
|
||||||
|
margin-top: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.project__tag {
|
||||||
|
display: inline-block;
|
||||||
|
padding: 3px 10px;
|
||||||
|
border: 1px solid rgba($color-white, 0.2);
|
||||||
|
font-size: 11px;
|
||||||
|
font-weight: 300;
|
||||||
|
color: rgba($color-white, 0.55);
|
||||||
|
letter-spacing: 0.03em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.project__more {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
margin-top: 64px;
|
||||||
|
|
||||||
|
@include mo {
|
||||||
|
margin-top: 48px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-more {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 6px;
|
||||||
|
padding: 14px 40px;
|
||||||
|
border: 1px solid rgba($color-white, 0.4);
|
||||||
|
border-radius: 100px;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 400;
|
||||||
|
letter-spacing: 0.1em;
|
||||||
|
color: $color-white;
|
||||||
|
transition: background 0.3s, border-color 0.3s, color 0.3s;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: $color-white;
|
||||||
|
color: $color-dark;
|
||||||
|
border-color: $color-white;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,36 @@
|
||||||
|
import { defineConfig } from 'vite'
|
||||||
|
import viteImagemin from 'vite-plugin-imagemin'
|
||||||
|
|
||||||
|
export default defineConfig({
|
||||||
|
root: 'src',
|
||||||
|
build: {
|
||||||
|
outDir: '../dist',
|
||||||
|
emptyOutDir: true,
|
||||||
|
assetsDir: 'assets',
|
||||||
|
},
|
||||||
|
server: {
|
||||||
|
port: 3000,
|
||||||
|
open: true,
|
||||||
|
},
|
||||||
|
css: {
|
||||||
|
preprocessorOptions: {
|
||||||
|
scss: {
|
||||||
|
api: 'modern-compiler',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
plugins: [
|
||||||
|
viteImagemin({
|
||||||
|
gifsicle: { optimizationLevel: 3 },
|
||||||
|
optipng: { optimizationLevel: 5 },
|
||||||
|
mozjpeg: { quality: 80 },
|
||||||
|
pngquant: { quality: [0.7, 0.9], speed: 4 },
|
||||||
|
svgo: {
|
||||||
|
plugins: [
|
||||||
|
{ name: 'removeViewBox', active: false },
|
||||||
|
{ name: 'removeEmptyAttrs', active: true },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
}),
|
||||||
|
],
|
||||||
|
})
|
||||||
Loading…
Reference in New Issue