625 lines
29 KiB
HTML
625 lines
29 KiB
HTML
<!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">
|
|
<img class="gnb__logoImg" src="images/logo.svg" alt="BODA LAB" />
|
|
</a>
|
|
<nav class="gnb__nav">
|
|
<ul class="gnb__navList">
|
|
<li class="gnb__navItem"><a class="gnb__navLink isActive" href="#intro">HOME</a></li>
|
|
<li class="gnb__navItem"><a class="gnb__navLink" href="#about">ABOUT US</a></li>
|
|
<li class="gnb__navItem"><a class="gnb__navLink" href="#history">HISTORY</a></li>
|
|
<li class="gnb__navItem"><a class="gnb__navLink" href="#vision">VISION</a></li>
|
|
<li class="gnb__navItem"><a class="gnb__navLink" href="#project">PROJECT</a></li>
|
|
<li class="gnb__navItem"><a class="gnb__navLink" href="#contact">CONTACT US</a></li>
|
|
</ul>
|
|
</nav>
|
|
<button class="gnb__hamburger" aria-label="메뉴 열기" aria-expanded="false">
|
|
<span class="gnb__hamburgerLine"></span>
|
|
<span class="gnb__hamburgerLine"></span>
|
|
<span class="gnb__hamburgerLine"></span>
|
|
</button>
|
|
</div>
|
|
<!-- 모바일 메뉴 -->
|
|
<nav class="gnb__mobileNav">
|
|
<button class="gnb__mobileNavClose" aria-label="메뉴 닫기">
|
|
<span class="gnb__mobileNavCloseLine"></span>
|
|
<span class="gnb__mobileNavCloseLine"></span>
|
|
</button>
|
|
<ul class="gnb__mobileNavList">
|
|
<li class="gnb__mobileNavItem"><a class="gnb__mobileNavLink isActive" href="#intro">HOME</a></li>
|
|
<li class="gnb__mobileNavItem"><a class="gnb__mobileNavLink" href="#about">ABOUT US</a></li>
|
|
<li class="gnb__mobileNavItem"><a class="gnb__mobileNavLink" href="#history">HISTORY</a></li>
|
|
<li class="gnb__mobileNavItem"><a class="gnb__mobileNavLink" href="#vision">VISION</a></li>
|
|
<li class="gnb__mobileNavItem"><a class="gnb__mobileNavLink" href="#project">PROJECTS</a></li>
|
|
<li class="gnb__mobileNavItem"><a class="gnb__mobileNavLink" href="#contact">CONTACT US</a></li>
|
|
</ul>
|
|
</nav>
|
|
</header>
|
|
|
|
<main>
|
|
<!-- 01. INTRO -->
|
|
<section id="intro" class="intro">
|
|
<div class="intro__bg" aria-hidden="true"></div>
|
|
|
|
<div class="intro__content">
|
|
<p class="intro__sub">Our Company</p>
|
|
<h1 class="intro__title">THE BODA LAB</h1>
|
|
</div>
|
|
|
|
<a href="#about" class="scrollDown" aria-label="아래로 스크롤">
|
|
<img src="images/icon-scroll-down.svg" alt="" />
|
|
</a>
|
|
|
|
</section>
|
|
|
|
<!-- 02. ABOUT US -->
|
|
<section id="about" class="about">
|
|
<div class="about__bg" aria-hidden="true"></div>
|
|
|
|
<div class="about__inner">
|
|
<div class="about__head">
|
|
<h2 class="sectionTitle">ABOUT US</h2>
|
|
<p class="about__desc">
|
|
디지털 시대에 발맞춰, 차별화된 기술적 노하우로 클라이언트의 비즈니스에 완벽한 디지털 경험을 선사합니다.<br class="breakLine" />
|
|
우리의 스펙트럼은 웹과 앱을 넘어 세상의 모든 비즈니스에 강력한 영향력을 전합니다.
|
|
</p>
|
|
<div class="about__quote">
|
|
<span class="about__quoteMark" aria-hidden="true">“</span>
|
|
<p class="about__quoteText">Creative Development Company<br />BODA.Lab</p>
|
|
</div>
|
|
</div>
|
|
<ul class="about__expertiseList">
|
|
<li class="about__expertiseItem">
|
|
<span class="num">01</span>
|
|
<h3 class="name">UX<br />Consulting</h3>
|
|
<p class="text">UX 컨설팅</p>
|
|
</li>
|
|
<li class="about__expertiseItem">
|
|
<span class="num">02</span>
|
|
<h3 class="name">Plarform<br />Building</h3>
|
|
<p class="text">웹사이트 구축</p>
|
|
</li>
|
|
<li class="about__expertiseItem">
|
|
<span class="num">03</span>
|
|
<h3 class="name">Mobile<br />App & Web</h3>
|
|
<p class="text">모바일 앱 & 웹</p>
|
|
</li>
|
|
<li class="about__expertiseItem">
|
|
<span class="num">04</span>
|
|
<h3 class="name">Service<br />Management</h3>
|
|
<p class="text">서비스 운영</p>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 03. HISTORY -->
|
|
<section id="history" class="history">
|
|
<div class="history__inner">
|
|
<h2 class="sectionTitle sectionTitleDark history__title">HISTORY</h2>
|
|
<div class="history__photo">
|
|
<img class="img" src="images/history-1.jpg" alt="" />
|
|
</div>
|
|
<div class="history__timeline">
|
|
<div class="history__yearGroup isOpen">
|
|
<button class="history__yearToggle" aria-expanded="true" aria-controls="history2025">
|
|
<span class="history__year">2025</span>
|
|
<span class="icon" aria-hidden="true"></span>
|
|
</button>
|
|
<ul class="history__list" id="history2025">
|
|
<li class="history__listItem">
|
|
<div class="main">
|
|
<h3 class="title">한국전자기술연구원 대쉬보드 구축</h3>
|
|
<p class="sub">
|
|
유체기기 위험 운전 알고리즘 모니터링 프로그램 / 송풍 제어 모듈 비정상 운전 상태 진단 프로그램<br />
|
|
윈도우 프로그래밍 개발, 대시보드 UX UI 기획/디자인
|
|
</p>
|
|
</div>
|
|
<span class="date">25.12 - 26.02</span>
|
|
</li>
|
|
<li class="history__listItem">
|
|
<div class="main">
|
|
<h3 class="title">현대차 판매시스템 구축</h3>
|
|
<p class="sub">React.Js, F/E, B/E 개발</p>
|
|
</div>
|
|
<span class="date">25.08 - 26.06</span>
|
|
</li>
|
|
<li class="history__listItem">
|
|
<div class="main">
|
|
<h3 class="title">LG 개인정보삭제 프로그램개발</h3>
|
|
<p class="sub">React.Js, F/E, B/E 개발</p>
|
|
</div>
|
|
<span class="date">25.08 - 25.12</span>
|
|
</li>
|
|
<li class="history__listItem">
|
|
<div class="main">
|
|
<h3 class="title">신한투자증권_New 슈퍼SOL 통합 프로젝트 <span class="badge">Finance</span></h3>
|
|
<p class="sub">Vue.Js, Publishing</p>
|
|
</div>
|
|
<span class="date">25.07 - 26.07</span>
|
|
</li>
|
|
<li class="history__listItem">
|
|
<div class="main">
|
|
<h3 class="title">신한은행_New 슈퍼SOL 통합 프로젝트 <span class="badge">Finance</span></h3>
|
|
<p class="sub">React.Js, Purescript, Publishing</p>
|
|
</div>
|
|
<span class="date">25.07 - 26.06</span>
|
|
</li>
|
|
<li class="history__listItem">
|
|
<div class="main">
|
|
<h3 class="title">한화생명 신탁시스템 재구축 <span class="badge">Finance</span></h3>
|
|
<p class="sub">React.Js, Pblishing, UX UI 기획, F/E 개발</p>
|
|
</div>
|
|
<span class="date">25.06 - 26.06</span>
|
|
</li>
|
|
<li class="history__listItem">
|
|
<div class="main">
|
|
<h3 class="title">SK매직 운영 개발</h3>
|
|
<p class="sub">React.Js, Vue.Js, F/E, B/E 개발</p>
|
|
</div>
|
|
<span class="date">25.07 - 25.12</span>
|
|
</li>
|
|
<li class="history__listItem">
|
|
<div class="main">
|
|
<h3 class="title">롯데카드 외국인 선불카드 연계플랫폼 구축대행 <span class="badge">Finance</span></h3>
|
|
<p class="sub">Vue.Js, Next.Js, Publishing, F/E 개발</p>
|
|
</div>
|
|
<span class="date">25.04 - 25.11</span>
|
|
</li>
|
|
<li class="history__listItem">
|
|
<div class="main">
|
|
<h3 class="title">LG전자 홈스타일(리빙) 서비스 구축 프로젝트</h3>
|
|
<p class="sub">UX UI 기획</p>
|
|
</div>
|
|
<span class="date">25.04 - 25.08</span>
|
|
</li>
|
|
<li class="history__listItem">
|
|
<div class="main">
|
|
<h3 class="title">에어인천 ERP 구축 프로젝트</h3>
|
|
<p class="sub">UX UI 디자인, Publishing</p>
|
|
</div>
|
|
<span class="date">25.03 - 25.04</span>
|
|
</li>
|
|
<li class="history__listItem">
|
|
<div class="main">
|
|
<h3 class="title">하나캐피탈 자산관리시스템 재구축 프로젝트 <span class="badge">Finance</span></h3>
|
|
<p class="sub">Vue.Js, Nuxt.Js, Publishing, F/E 개발</p>
|
|
</div>
|
|
<span class="date">25.03 - 25.08</span>
|
|
</li>
|
|
<li class="history__listItem">
|
|
<div class="main">
|
|
<h3 class="title">현대해상 고도화 구축 <span class="badge">Finance</span></h3>
|
|
<p class="sub">React, Typescript, Scss</p>
|
|
</div>
|
|
<span class="date">25.02 - 26.01</span>
|
|
</li>
|
|
<li class="history__listItem">
|
|
<div class="main">
|
|
<h3 class="title">우리은행 전자지갑 구축 <span class="badge">Finance</span></h3>
|
|
<p class="sub">React, Typescript, Recoil, Spring Boot</p>
|
|
</div>
|
|
<span class="date">25.01 - 25.07</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="history__yearGroup">
|
|
<button class="history__yearToggle" aria-expanded="false" aria-controls="history2024">
|
|
<span class="history__year">2024</span>
|
|
<span class="icon" aria-hidden="true"></span>
|
|
</button>
|
|
<ul class="history__list" id="history2024" hidden>
|
|
<li class="history__listItem">
|
|
<div class="main">
|
|
<h3 class="title">우리은행 로보어드바이저 구축 <span class="badge">Finance</span></h3>
|
|
<p class="sub">React, Typescript, Recoil</p>
|
|
</div>
|
|
<span class="date">24.11 - 25.07</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="history__yearGroup">
|
|
<button class="history__yearToggle" aria-expanded="false" aria-controls="history2023">
|
|
<span class="history__year">2023</span>
|
|
<span class="icon" aria-hidden="true"></span>
|
|
</button>
|
|
<ul class="history__list" id="history2023" hidden>
|
|
<li class="history__listItem">
|
|
<div class="main">
|
|
<h3 class="title">신한은행 슈퍼SOL 운영 계약 <span class="badge">Finance</span></h3>
|
|
<p class="sub">Vue</p>
|
|
</div>
|
|
<span class="date">23.12</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="history__yearGroup">
|
|
<button class="history__yearToggle" aria-expanded="false" aria-controls="history2022">
|
|
<span class="history__year">2022</span>
|
|
<span class="icon" aria-hidden="true"></span>
|
|
</button>
|
|
<ul class="history__list" id="history2022" hidden>
|
|
<li class="history__listItem">
|
|
<div class="main">
|
|
<h3 class="title">한화금융 서비스앱 플러스 리뉴얼 2차 계약 <span class="badge">Finance</span></h3>
|
|
</div>
|
|
<span class="date">22.11</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="history__yearGroup">
|
|
<button class="history__yearToggle" aria-expanded="false" aria-controls="history2021">
|
|
<span class="history__year">2021</span>
|
|
<span class="icon" aria-hidden="true"></span>
|
|
</button>
|
|
<ul class="history__list" id="history2021" hidden>
|
|
<li class="history__listItem">
|
|
<div class="main">
|
|
<h3 class="title">롯데 렌터카 차세대 구축 계약</h3>
|
|
</div>
|
|
<span class="date">21.11</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 04. VISION -->
|
|
<section id="vision" class="vision">
|
|
<div class="vision__inner">
|
|
<div class="vision__head">
|
|
<h2 class="sectionTitle">VISION</h2>
|
|
<p class="vision__desc">우리는 고객사의 니즈를 정확히 파악하고, 우수한 기술력을 가진 인재들을 투입하여 프로젝트의 완성도와 만족도를 극대화합니다.</p>
|
|
</div>
|
|
<div class="vision__quote">
|
|
<span class="mark" aria-hidden="true">”</span>
|
|
<p class="text">Flawless execution, absolute satisfaction. BODA Lab delivers excellence through advanced tech talent.</p>
|
|
</div>
|
|
<ul class="vision__keywordList">
|
|
<li class="vision__keywordItem">
|
|
<h3 class="keyword">PERSPECTIVE</h3>
|
|
<p class="desc">고객사의 눈으로 관점을 바라봅니다.</p>
|
|
</li>
|
|
<li class="vision__keywordItem">
|
|
<h3 class="keyword">EXPERTISE</h3>
|
|
<p class="desc">다양한 기술력을 가진 인재들을 보유하고 있습니다.</p>
|
|
</li>
|
|
<li class="vision__keywordItem">
|
|
<h3 class="keyword">SATISFACTION</h3>
|
|
<p class="desc">타사보다 높은 만족도와 완성도를 갖추고 있습니다.</p>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 06. PROJECT -->
|
|
<section id="project" class="project">
|
|
<div class="project__inner">
|
|
<h2 class="sectionTitle project__heading">PROJECT</h2>
|
|
<div class="project__grid">
|
|
<article class="project__card">
|
|
<div class="project__thumb">
|
|
<img class="project__thumbImg" src="images/project-1.jpg" alt="신한유니버설앱 구축" />
|
|
</div>
|
|
<div class="project__info">
|
|
<h3 class="project__name">신한유니버설앱 구축</h3>
|
|
<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 class="project__thumbImg" src="images/project-2.jpg" alt="SK그룹 공식앱 내부 모바일" />
|
|
</div>
|
|
<div class="project__info">
|
|
<h3 class="project__name">SK그룹 공식앱 내부 모바일</h3>
|
|
<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 class="project__thumbImg" src="images/project-3.jpg" alt="PNS네트웍스 디지털 플랫폼 구축" />
|
|
</div>
|
|
<div class="project__info">
|
|
<h3 class="project__name">PNS네트웍스 디지털 플랫폼 구축</h3>
|
|
<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 class="project__thumbImg" src="images/project-4.jpg" alt="롯데렌터카 차세대" />
|
|
</div>
|
|
<div class="project__info">
|
|
<h3 class="project__name">롯데렌터카 차세대</h3>
|
|
<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 class="project__thumbImg" src="images/project-5.jpg" alt="오뚜기 쇼핑몰 구축" />
|
|
</div>
|
|
<div class="project__info">
|
|
<h3 class="project__name">오뚜기 쇼핑몰 구축</h3>
|
|
<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 class="project__thumbImg" src="images/project-6.jpg" alt="캐나다구스 구축" />
|
|
</div>
|
|
<div class="project__info">
|
|
<h3 class="project__name">캐나다구스 구축</h3>
|
|
<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 class="project__thumbImg" src="images/project-7.jpg" alt="한옥홈페이지 서버 이관" />
|
|
</div>
|
|
<div class="project__info">
|
|
<h3 class="project__name">한옥홈페이지 서버 이관</h3>
|
|
<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 class="project__thumbImg" src="images/project-8.jpg" alt="그린카 차세대" />
|
|
</div>
|
|
<div class="project__info">
|
|
<h3 class="project__name">그린카 차세대</h3>
|
|
<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__thumbEmpty"></div>
|
|
<div class="project__info">
|
|
<h3 class="project__name">프로스펙스 구축</h3>
|
|
<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__thumbEmpty"></div>
|
|
<div class="project__info">
|
|
<h3 class="project__name">중소기업창업</h3>
|
|
<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__thumbEmpty"></div>
|
|
<div class="project__info">
|
|
<h3 class="project__name">롯데 GA2ck 구축 프로젝트 (롯데 렌터카)</h3>
|
|
<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__thumbEmpty"></div>
|
|
<div class="project__info">
|
|
<h3 class="project__name">
|
|
(주)국민은행_KB국민은행
|
|
<br />
|
|
리브 Reboot One 구축, 프론트개발
|
|
</h3>
|
|
<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__thumbEmpty"></div>
|
|
<div class="project__info">
|
|
<h3 class="project__name">코나아이 PC</h3>
|
|
<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="btnMore">+ VIEW MORE</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 07. CONTACT / FOOTER -->
|
|
<section id="contact" class="contact">
|
|
<div class="contact__inner">
|
|
<h2 class="contact__heading">WELCOME BODA LAB</h2>
|
|
<p class="contact__desc">
|
|
The BODA LAB은 서비스와 사용자를 고려하여 다양한 경험을 제공하며,
|
|
<br />
|
|
거쳐간 모든 곳에서 지속적인 성장이 이루어질 수 있도록 함께합니다.
|
|
</p>
|
|
<address class="contact__office">
|
|
<p class="contact__label">Head Office</p>
|
|
<dl class="contact__infoList">
|
|
<div class="contact__infoItem">
|
|
<dt class="contact__infoLabel">Address</dt>
|
|
<dd class="contact__infoValue">서울시 강서구 마곡중앙로 161-8, 두산더랜드파크 C동 618호</dd>
|
|
</div>
|
|
<div class="contact__infoItem">
|
|
<dt class="contact__infoLabel">e-mail</dt>
|
|
<dd class="contact__infoValue">
|
|
<a class="contact__infoLink" href="mailto:koji@bodalab.co.kr">koji@bodalab.co.kr</a>
|
|
</dd>
|
|
</div>
|
|
<div class="contact__infoItem">
|
|
<dt class="contact__infoLabel">tel</dt>
|
|
<dd class="contact__infoValue">010-4169-4728</dd>
|
|
</div>
|
|
</dl>
|
|
</address>
|
|
</div>
|
|
<!-- Contact Us -->
|
|
<div class="contactAccordion">
|
|
<div class="contactAccordion__item isOpen" id="acc-project">
|
|
<button class="contactAccordion__header" aria-expanded="true" aria-controls="acc-project-body">
|
|
<span>Contact Us</span>
|
|
<img class="contactAccordion__icon" src="images/icon-chevron.svg" alt="" />
|
|
</button>
|
|
<div class="contactAccordion__body" id="acc-project-body">
|
|
<form class="contactForm" onsubmit="return false;">
|
|
<div class="contactForm__cols">
|
|
<div class="contactForm__fields">
|
|
<input type="text" class="contactForm__input" placeholder="회사명*" />
|
|
<input type="text" class="contactForm__input" placeholder="담당자 이름*" />
|
|
<input type="tel" class="contactForm__input" placeholder="연락처*" />
|
|
<input type="email" class="contactForm__input" placeholder="이메일*" />
|
|
</div>
|
|
<textarea class="contactForm__textarea" placeholder="문의내용"></textarea>
|
|
</div>
|
|
<div class="contactForm__agree">
|
|
<label class="contactForm__checkbox">
|
|
<input class="contactForm__checkboxInput" type="checkbox" />
|
|
<span class="contactForm__checkboxBox"></span>
|
|
<span>[필수] 개인정보 수집 및 이용 동의</span>
|
|
</label>
|
|
</div>
|
|
<div class="contactForm__submit">
|
|
<button type="submit" class="btnSend">SEND</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Recruitment -->
|
|
<div class="contactAccordion__item" id="acc-career">
|
|
<button class="contactAccordion__header" aria-expanded="false" aria-controls="acc-career-body">
|
|
<span>Recruitment</span>
|
|
<img class="contactAccordion__icon" src="images/icon-chevron.svg" alt="" />
|
|
</button>
|
|
<div class="contactAccordion__body" id="acc-career-body" hidden>
|
|
<div class="careerTags">
|
|
<a href="#" class="careerTag">
|
|
Planner & Consulting
|
|
<svg class="careerTag__icon" 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="careerTag">
|
|
Designer
|
|
<svg class="careerTag__icon" 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="careerTag">
|
|
Publisher
|
|
<svg class="careerTag__icon" 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="careerTag">
|
|
Scripter
|
|
<svg class="careerTag__icon" 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 class="footer__contactLink" href="mailto:bodalab@bodalab.com">bodalab@bodalab.com</a>
|
|
Tel
|
|
<a class="footer__contactLink" href="tel:010-1234-5678">010-1234-5678</a>
|
|
</p>
|
|
<p class="footer__copy">© 2024 BODA LAB</p>
|
|
</div>
|
|
</footer>
|
|
</section>
|
|
</main>
|
|
</body>
|
|
</html>
|