outsourcing
/
bodalab
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: 스타일정리

This commit is contained in:
이희원 2026-06-19 09:55:14 +09:00
parent 06b9bf7c52
commit 8ffba8e76a
7 changed files with 624 additions and 673 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

270
src/index.html
View File

@ -15,29 +15,29 @@
<header class="gnb" id="gnb"> <header class="gnb" id="gnb">
<div class="gnb__inner"> <div class="gnb__inner">
<a href="#intro" class="gnb__logo"> <a href="#intro" class="gnb__logo">
<img src="images/logo.svg" alt="BODA LAB"> <img class="gnb__logoImg" src="images/logo.svg" alt="BODA LAB">
</a> </a>
<nav class="gnb__nav"> <nav class="gnb__nav">
<ul> <ul class="gnb__navList">
<li class="is-active"><a href="#intro">HOME</a></li> <li class="gnb__navItem is-active"><a class="gnb__navLink" href="#intro">HOME</a></li>
<li><a href="#about">ABOUT</a></li> <li class="gnb__navItem"><a class="gnb__navLink" href="#about">ABOUT</a></li>
<li><a href="#project">PROJECTS</a></li> <li class="gnb__navItem"><a class="gnb__navLink" href="#project">PROJECTS</a></li>
<li><a href="#contact">CONTACT</a></li> <li class="gnb__navItem"><a class="gnb__navLink" href="#contact">CONTACT</a></li>
</ul> </ul>
</nav> </nav>
<button class="gnb__hamburger" aria-label="메뉴 열기" aria-expanded="false"> <button class="gnb__hamburger" aria-label="메뉴 열기" aria-expanded="false">
<span></span> <span class="gnb__hamburgerLine"></span>
<span></span> <span class="gnb__hamburgerLine"></span>
<span></span> <span class="gnb__hamburgerLine"></span>
</button> </button>
</div> </div>
<!-- 모바일 메뉴 --> <!-- 모바일 메뉴 -->
<nav class="gnb__mobile-nav"> <nav class="gnb__mobileNav">
<ul> <ul class="gnb__mobileNavList">
<li><a href="#intro">HOME</a></li> <li class="gnb__mobileNavItem"><a class="gnb__mobileNavLink" href="#intro">HOME</a></li>
<li><a href="#about">ABOUT</a></li> <li class="gnb__mobileNavItem"><a class="gnb__mobileNavLink" href="#about">ABOUT</a></li>
<li><a href="#project">PROJECTS</a></li> <li class="gnb__mobileNavItem"><a class="gnb__mobileNavLink" href="#project">PROJECTS</a></li>
<li><a href="#contact">CONTACT</a></li> <li class="gnb__mobileNavItem"><a class="gnb__mobileNavLink" href="#contact">CONTACT</a></li>
</ul> </ul>
</nav> </nav>
</header> </header>
@ -45,157 +45,157 @@
<main> <main>
<!-- 01. INTRO --> <!-- 01. INTRO -->
<section id="intro" class="section section--intro"> <section id="intro" class="intro">
<div class="intro__blobs" aria-hidden="true"> <div class="intro__blobs" aria-hidden="true">
<span class="blob blob--cyan"></span> <span class="blob blobCyan"></span>
<span class="blob blob--purple"></span> <span class="blob blobPurple"></span>
<span class="blob blob--blue"></span> <span class="blob blobBlue"></span>
</div> </div>
<div class="intro__content"> <div class="intro__content">
<p class="intro__sub">Creative Development Company</p> <p class="intro__sub">Creative Development Company</p>
<h1 class="intro__title">THE BODA LAB</h1> <h1 class="intro__title">THE BODA LAB</h1>
</div> </div>
<a href="#about" class="scroll-down" aria-label="아래로 스크롤"> <a href="#about" class="scrollDown" aria-label="아래로 스크롤">
<img src="images/icon-scroll-down.svg" alt=""> <img src="images/icon-scroll-down.svg" alt="">
</a> </a>
</section> </section>
<!-- 02. ABOUT --> <!-- 02. ABOUT -->
<section id="about" class="section section--about"> <section id="about" class="about">
<div class="about__inner"> <div class="about__inner">
<div class="about__text"> <div class="about__text">
<h2 class="section-title">ABOUT US</h2> <h2 class="sectionTitle">ABOUT US</h2>
<p class="about__desc"> <p class="about__desc">
The BODA LAB은 디지털시대에 발맞춰 클라이언트의 비즈니스를 위한<br> The BODA LAB은 디지털시대에 발맞춰 클라이언트의 비즈니스를 위한<br class="breakLine">
다양한 기술적 노하우로 완성된 경험을 제공합니다.<br> 다양한 기술적 노하우로 완성된 경험을 제공합니다.<br class="breakLine">
우리의 활동은 웹, 앱, 모바일을 넘나들며 세상의 모든 비즈니스 활동에<br> 우리의 활동은 웹, 앱, 모바일을 넘나들며 세상의 모든 비즈니스 활동에<br class="breakLine">
강한 영향력을 전달합니다. 강한 영향력을 전달합니다.
</p> </p>
</div> </div>
<div class="about__image"> <div class="about__image">
<img src="images/about-hand.jpg" alt="스케치하는 손"> <img class="about__imageThumb" src="images/about-hand.jpg" alt="스케치하는 손">
<p class="about__caption">Creative Development Company BODA.Lab</p> <p class="about__caption">Creative Development Company BODA.Lab</p>
</div> </div>
</div> </div>
</section> </section>
<!-- 03. HISTORY --> <!-- 03. HISTORY -->
<section id="history" class="section section--history"> <section id="history" class="history">
<div class="history__top"> <div class="history__top">
<h2 class="section-title section-title--dark">HISTORY</h2> <h2 class="sectionTitle sectionTitleDark">HISTORY</h2>
<div class="history__timeline"> <div class="history__timeline">
<div class="history__year-group"> <div class="history__yearGroup">
<span class="history__year">2024</span> <span class="history__year">2024</span>
<div class="history__divider"></div> <div class="history__divider"></div>
<ul class="history__list"> <ul class="history__list">
<li><strong>12.01</strong><span>신한은행 슈퍼소울 운영 계약</span></li> <li class="history__listItem"><strong class="history__listDate">12.01</strong><span class="history__listText">신한은행 슈퍼소울 운영 계약</span></li>
<li><strong>09.01</strong><span>한화금융통합 서비스 구축 계약</span></li> <li class="history__listItem"><strong class="history__listDate">09.01</strong><span class="history__listText">한화금융통합 서비스 구축 계약</span></li>
<li><strong>05.30</strong><span>신한은행 슈퍼소울 구축 계약</span></li> <li class="history__listItem"><strong class="history__listDate">05.30</strong><span class="history__listText">신한은행 슈퍼소울 구축 계약</span></li>
<li><strong>05.01</strong><span>롯데 렌터카 오토리스 구축 계약</span></li> <li class="history__listItem"><strong class="history__listDate">05.01</strong><span class="history__listText">롯데 렌터카 오토리스 구축 계약</span></li>
</ul> </ul>
</div> </div>
<div class="history__year-group"> <div class="history__yearGroup">
<span class="history__year">2023</span> <span class="history__year">2023</span>
<div class="history__divider"></div> <div class="history__divider"></div>
<ul class="history__list"> <ul class="history__list">
<li><strong>12.01</strong><span>신한은행 슈퍼소울 운영 계약</span></li> <li class="history__listItem"><strong class="history__listDate">12.01</strong><span class="history__listText">신한은행 슈퍼소울 운영 계약</span></li>
<li><strong>11.01</strong><span>한화금융 라이프 플러스 아카데미 구축 계약</span></li> <li class="history__listItem"><strong class="history__listDate">11.01</strong><span class="history__listText">한화금융 라이프 플러스 아카데미 구축 계약</span></li>
<li><strong>10.01</strong><span>대교 차세대 구축 계약</span></li> <li class="history__listItem"><strong class="history__listDate">10.01</strong><span class="history__listText">대교 차세대 구축 계약</span></li>
<li><strong>09.01</strong><span>한화금융통합 서비스 구축 계약</span></li> <li class="history__listItem"><strong class="history__listDate">09.01</strong><span class="history__listText">한화금융통합 서비스 구축 계약</span></li>
<li><strong>05.30</strong><span>신한은행 슈퍼소울 구축 계약</span></li> <li class="history__listItem"><strong class="history__listDate">05.30</strong><span class="history__listText">신한은행 슈퍼소울 구축 계약</span></li>
<li><strong>05.01</strong><span>롯데 렌터카 오토리스 구축 계약</span></li> <li class="history__listItem"><strong class="history__listDate">05.01</strong><span class="history__listText">롯데 렌터카 오토리스 구축 계약</span></li>
</ul> </ul>
</div> </div>
<div class="history__year-group"> <div class="history__yearGroup">
<span class="history__year">2022</span> <span class="history__year">2022</span>
<div class="history__divider"></div> <div class="history__divider"></div>
<ul class="history__list"> <ul class="history__list">
<li><strong>11.01</strong><span>한화금융 서비스앱 플러스 리뉴얼 2차 계약</span></li> <li class="history__listItem"><strong class="history__listDate">11.01</strong><span class="history__listText">한화금융 서비스앱 플러스 리뉴얼 2차 계약</span></li>
<li><strong>09.01</strong><span>한화금융 서비스앱 플러스 리뉴얼 1차 계약</span></li> <li class="history__listItem"><strong class="history__listDate">09.01</strong><span class="history__listText">한화금융 서비스앱 플러스 리뉴얼 1차 계약</span></li>
<li><strong>08.01</strong><span>밀레 쇼핑몰 리뉴얼 구축 계약</span></li> <li class="history__listItem"><strong class="history__listDate">08.01</strong><span class="history__listText">밀레 쇼핑몰 리뉴얼 구축 계약</span></li>
<li><strong>07.01</strong><span>오뚜기 쇼핑몰 리뉴얼 구축 계약</span></li> <li class="history__listItem"><strong class="history__listDate">07.01</strong><span class="history__listText">오뚜기 쇼핑몰 리뉴얼 구축 계약</span></li>
<li><strong>05.01</strong><span>캐나다구스 코리아 쇼핑몰 구축 계약</span></li> <li class="history__listItem"><strong class="history__listDate">05.01</strong><span class="history__listText">캐나다구스 코리아 쇼핑몰 구축 계약</span></li>
</ul> </ul>
</div> </div>
<div class="history__year-group"> <div class="history__yearGroup">
<span class="history__year">2021</span> <span class="history__year">2021</span>
<div class="history__divider"></div> <div class="history__divider"></div>
<ul class="history__list"> <ul class="history__list">
<li><strong>11.22</strong><span>롯데 렌터카 차세대 구축 계약</span></li> <li class="history__listItem"><strong class="history__listDate">11.22</strong><span class="history__listText">롯데 렌터카 차세대 구축 계약</span></li>
<li><strong>11.01</strong><span>LSN MALL 구축 계약</span></li> <li class="history__listItem"><strong class="history__listDate">11.01</strong><span class="history__listText">LSN MALL 구축 계약</span></li>
<li><strong>7.29</strong><span>(주)보다랩 설립</span></li> <li class="history__listItem"><strong class="history__listDate">7.29</strong><span class="history__listText">(주)보다랩 설립</span></li>
<li><strong>5.15</strong><span>현대홈쇼핑 리뉴얼 구축 계약</span></li> <li class="history__listItem"><strong class="history__listDate">5.15</strong><span class="history__listText">현대홈쇼핑 리뉴얼 구축 계약</span></li>
<li><strong>01.11</strong><span>KONA I 헬스케어 구축 계약</span></li> <li class="history__listItem"><strong class="history__listDate">01.11</strong><span class="history__listText">KONA I 헬스케어 구축 계약</span></li>
<li><strong>01.11</strong><span>유아이팩토리 설립</span></li> <li class="history__listItem"><strong class="history__listDate">01.11</strong><span class="history__listText">유아이팩토리 설립</span></li>
</ul> </ul>
</div> </div>
</div> </div>
</div> </div>
<div class="history__bottom"> <div class="history__bottom">
<div class="history__images"> <div class="history__images">
<img class="history__img history__img--1" src="images/history-1.jpg" alt=""> <img class="history__img history__img1" src="images/history-1.jpg" alt="">
<img class="history__img history__img--2" src="images/history-2.jpg" alt=""> <img class="history__img history__img2" src="images/history-2.jpg" alt="">
<img class="history__img history__img--3" src="images/history-3.jpg" alt=""> <img class="history__img history__img3" src="images/history-3.jpg" alt="">
</div> </div>
</div> </div>
</section> </section>
<!-- 04. BODA INTRO --> <!-- 04. BODA INTRO -->
<section id="boda-intro" class="section section--boda-intro"> <section id="boda-intro" class="bodaIntro">
<div class="boda-intro__content"> <div class="bodaIntro__content">
<h2 class="boda-intro__title">BODA Lab Co., Ltd.</h2> <h2 class="bodaIntro__title">BODA Lab Co., Ltd.</h2>
<p class="boda-intro__desc"> <p class="bodaIntro__desc">
accurately identifies customer needs to<br> accurately identifies customer needs to<br class="breakLine">
achieve the best completeness and satisfaction.<br> achieve the best completeness and satisfaction.<br class="breakLine">
We are working on a project with talented<br> We are working on a project with talented<br class="breakLine">
people with high technology. people with high technology.
</p> </p>
<a href="#vision" class="scroll-down scroll-down--sm" aria-label="아래로 스크롤"> <a href="#vision" class="scrollDown scrollDownSm" aria-label="아래로 스크롤">
<img src="images/icon-scroll-down.svg" alt=""> <img src="images/icon-scroll-down.svg" alt="">
</a> </a>
</div> </div>
</section> </section>
<!-- 05. VISION --> <!-- 05. VISION -->
<section id="vision" class="section section--vision"> <section id="vision" class="vision">
<div class="vision__inner"> <div class="vision__inner">
<div class="vision__item"> <div class="vision__item">
<div class="vision__text"> <div class="vision__text">
<em class="vision__keyword">Perspective</em> <em class="vision__keyword">Perspective</em>
<p>클라이언트의 고유한 가치를 발견하고<br>차별화된 디지털 경험을 설계합니다.</p> <p class="vision__textDesc">클라이언트의 고유한 가치를 발견하고<br class="breakLine">차별화된 디지털 경험을 설계합니다.</p>
</div> </div>
<div class="vision__image"> <div class="vision__image">
<img src="images/vision-1.jpg" alt="Uniqueness"> <img class="vision__imageThumb" src="images/vision-1.jpg" alt="Uniqueness">
</div> </div>
</div> </div>
<div class="vision__item vision__item--reverse"> <div class="vision__item vision__itemReverse">
<div class="vision__image"> <div class="vision__image">
<img src="images/vision-2.jpg" alt="Expertise"> <img class="vision__imageThumb" src="images/vision-2.jpg" alt="Expertise">
</div> </div>
<div class="vision__text"> <div class="vision__text">
<em class="vision__keyword">Expertise</em> <em class="vision__keyword">Expertise</em>
<p>10년 이상의 기술 노하우를 기반으로<br>최적의 솔루션을 제공합니다.</p> <p class="vision__textDesc">10년 이상의 기술 노하우를 기반으로<br class="breakLine">최적의 솔루션을 제공합니다.</p>
</div> </div>
</div> </div>
<div class="vision__item"> <div class="vision__item">
<div class="vision__text"> <div class="vision__text">
<em class="vision__keyword">Satisfaction</em> <em class="vision__keyword">Satisfaction</em>
<p>고객의 만족을 최우선 가치로 삼아<br>완성도 높은 결과물을 만듭니다.</p> <p class="vision__textDesc">고객의 만족을 최우선 가치로 삼아<br class="breakLine">완성도 높은 결과물을 만듭니다.</p>
</div> </div>
<div class="vision__image"> <div class="vision__image">
<img src="images/vision-3.jpg" alt="Satisfaction"> <img class="vision__imageThumb" src="images/vision-3.jpg" alt="Satisfaction">
</div> </div>
</div> </div>
</div> </div>
</section> </section>
<!-- 06. PROJECT --> <!-- 06. PROJECT -->
<section id="project" class="section section--project"> <section id="project" class="project">
<div class="project__inner"> <div class="project__inner">
<h2 class="section-title project__heading">PROJECT</h2> <h2 class="sectionTitle project__heading">PROJECT</h2>
<div class="project__grid"> <div class="project__grid">
<article class="project__card"> <article class="project__card">
<div class="project__thumb"><img src="images/project-1.jpg" alt="신한유니버설앱 구축"></div> <div class="project__thumb"><img class="project__thumbImg" src="images/project-1.jpg" alt="신한유니버설앱 구축"></div>
<div class="project__info"> <div class="project__info">
<div class="project__meta"><h3 class="project__name">신한유니버설앱 구축</h3><span class="project__date">2023.12</span></div> <div class="project__meta"><h3 class="project__name">신한유니버설앱 구축</h3><span class="project__date">2023.12</span></div>
<p class="project__company">신한은행</p> <p class="project__company">신한은행</p>
@ -203,7 +203,7 @@
</div> </div>
</article> </article>
<article class="project__card"> <article class="project__card">
<div class="project__thumb"><img src="images/project-2.jpg" alt="SK그룹 공식앱 내부 모바일"></div> <div class="project__thumb"><img class="project__thumbImg" src="images/project-2.jpg" alt="SK그룹 공식앱 내부 모바일"></div>
<div class="project__info"> <div class="project__info">
<div class="project__meta"><h3 class="project__name">SK그룹 공식앱 내부 모바일</h3><span class="project__date">2023.12</span></div> <div class="project__meta"><h3 class="project__name">SK그룹 공식앱 내부 모바일</h3><span class="project__date">2023.12</span></div>
<p class="project__company">SK그룹</p> <p class="project__company">SK그룹</p>
@ -211,7 +211,7 @@
</div> </div>
</article> </article>
<article class="project__card"> <article class="project__card">
<div class="project__thumb"><img src="images/project-3.jpg" alt="PNS네트웍스 디지털 플랫폼 구축"></div> <div class="project__thumb"><img class="project__thumbImg" src="images/project-3.jpg" alt="PNS네트웍스 디지털 플랫폼 구축"></div>
<div class="project__info"> <div class="project__info">
<div class="project__meta"><h3 class="project__name">PNS네트웍스 디지털 플랫폼 구축</h3><span class="project__date">2023.04</span></div> <div class="project__meta"><h3 class="project__name">PNS네트웍스 디지털 플랫폼 구축</h3><span class="project__date">2023.04</span></div>
<p class="project__company">PNS 네트웍스</p> <p class="project__company">PNS 네트웍스</p>
@ -219,7 +219,7 @@
</div> </div>
</article> </article>
<article class="project__card"> <article class="project__card">
<div class="project__thumb"><img src="images/project-4.jpg" alt="롯데렌터카 차세대"></div> <div class="project__thumb"><img class="project__thumbImg" src="images/project-4.jpg" alt="롯데렌터카 차세대"></div>
<div class="project__info"> <div class="project__info">
<div class="project__meta"><h3 class="project__name">롯데렌터카 차세대</h3><span class="project__date">2022.05</span></div> <div class="project__meta"><h3 class="project__name">롯데렌터카 차세대</h3><span class="project__date">2022.05</span></div>
<p class="project__company">롯데</p> <p class="project__company">롯데</p>
@ -227,7 +227,7 @@
</div> </div>
</article> </article>
<article class="project__card"> <article class="project__card">
<div class="project__thumb"><img src="images/project-5.jpg" alt="오뚜기 쇼핑몰 구축"></div> <div class="project__thumb"><img class="project__thumbImg" src="images/project-5.jpg" alt="오뚜기 쇼핑몰 구축"></div>
<div class="project__info"> <div class="project__info">
<div class="project__meta"><h3 class="project__name">오뚜기 쇼핑몰 구축</h3><span class="project__date">2022.07</span></div> <div class="project__meta"><h3 class="project__name">오뚜기 쇼핑몰 구축</h3><span class="project__date">2022.07</span></div>
<p class="project__company">오뚜기</p> <p class="project__company">오뚜기</p>
@ -235,7 +235,7 @@
</div> </div>
</article> </article>
<article class="project__card"> <article class="project__card">
<div class="project__thumb"><img src="images/project-6.jpg" alt="캐나다구스 구축"></div> <div class="project__thumb"><img class="project__thumbImg" src="images/project-6.jpg" alt="캐나다구스 구축"></div>
<div class="project__info"> <div class="project__info">
<div class="project__meta"><h3 class="project__name">캐나다구스 구축</h3><span class="project__date">2022.05</span></div> <div class="project__meta"><h3 class="project__name">캐나다구스 구축</h3><span class="project__date">2022.05</span></div>
<p class="project__company">캐나다구스 코리아</p> <p class="project__company">캐나다구스 코리아</p>
@ -243,7 +243,7 @@
</div> </div>
</article> </article>
<article class="project__card"> <article class="project__card">
<div class="project__thumb"><img src="images/project-7.jpg" alt="한옥홈페이지 서버 이관"></div> <div class="project__thumb"><img class="project__thumbImg" src="images/project-7.jpg" alt="한옥홈페이지 서버 이관"></div>
<div class="project__info"> <div class="project__info">
<div class="project__meta"><h3 class="project__name">한옥홈페이지 서버 이관</h3><span class="project__date">2022.11</span></div> <div class="project__meta"><h3 class="project__name">한옥홈페이지 서버 이관</h3><span class="project__date">2022.11</span></div>
<p class="project__company">더한옥</p> <p class="project__company">더한옥</p>
@ -251,7 +251,7 @@
</div> </div>
</article> </article>
<article class="project__card"> <article class="project__card">
<div class="project__thumb"><img src="images/project-8.jpg" alt="그린카 차세대"></div> <div class="project__thumb"><img class="project__thumbImg" src="images/project-8.jpg" alt="그린카 차세대"></div>
<div class="project__info"> <div class="project__info">
<div class="project__meta"><h3 class="project__name">그린카 차세대</h3><span class="project__date">2022.11</span></div> <div class="project__meta"><h3 class="project__name">그린카 차세대</h3><span class="project__date">2022.11</span></div>
<p class="project__company">그린카</p> <p class="project__company">그린카</p>
@ -259,7 +259,7 @@
</div> </div>
</article> </article>
<article class="project__card"> <article class="project__card">
<div class="project__thumb project__thumb--empty"></div> <div class="project__thumb project__thumbEmpty"></div>
<div class="project__info"> <div class="project__info">
<div class="project__meta"><h3 class="project__name">프로스펙스 구축</h3><span class="project__date">2021.01</span></div> <div class="project__meta"><h3 class="project__name">프로스펙스 구축</h3><span class="project__date">2021.01</span></div>
<p class="project__company">(주)LS네트웍스</p> <p class="project__company">(주)LS네트웍스</p>
@ -267,7 +267,7 @@
</div> </div>
</article> </article>
<article class="project__card"> <article class="project__card">
<div class="project__thumb project__thumb--empty"></div> <div class="project__thumb project__thumbEmpty"></div>
<div class="project__info"> <div class="project__info">
<div class="project__meta"><h3 class="project__name">중소기업창업</h3><span class="project__date">2021.11</span></div> <div class="project__meta"><h3 class="project__name">중소기업창업</h3><span class="project__date">2021.11</span></div>
<p class="project__company">중소벤처기업부</p> <p class="project__company">중소벤처기업부</p>
@ -275,7 +275,7 @@
</div> </div>
</article> </article>
<article class="project__card"> <article class="project__card">
<div class="project__thumb project__thumb--empty"></div> <div class="project__thumb project__thumbEmpty"></div>
<div class="project__info"> <div class="project__info">
<div class="project__meta"><h3 class="project__name">한화 GAsk 구축 프로젝트</h3><span class="project__date">2021.11</span></div> <div class="project__meta"><h3 class="project__name">한화 GAsk 구축 프로젝트</h3><span class="project__date">2021.11</span></div>
<p class="project__company">한화</p> <p class="project__company">한화</p>
@ -283,7 +283,7 @@
</div> </div>
</article> </article>
<article class="project__card"> <article class="project__card">
<div class="project__thumb project__thumb--empty"></div> <div class="project__thumb project__thumbEmpty"></div>
<div class="project__info"> <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> <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> <p class="project__company">국민은행</p>
@ -291,7 +291,7 @@
</div> </div>
</article> </article>
<article class="project__card"> <article class="project__card">
<div class="project__thumb project__thumb--empty"></div> <div class="project__thumb project__thumbEmpty"></div>
<div class="project__info"> <div class="project__info">
<div class="project__meta"><h3 class="project__name">코나아이 PC</h3><span class="project__date">2021.01</span></div> <div class="project__meta"><h3 class="project__name">코나아이 PC</h3><span class="project__date">2021.01</span></div>
<p class="project__company">코나아이</p> <p class="project__company">코나아이</p>
@ -300,15 +300,15 @@
</article> </article>
</div> </div>
<div class="project__more"> <div class="project__more">
<a href="#" class="btn-more">+ VIEW MORE</a> <a href="#" class="btnMore">+ VIEW MORE</a>
</div> </div>
</div> </div>
</section> </section>
<!-- 07. EXPERTISE --> <!-- 07. EXPERTISE -->
<section id="expertise" class="section section--expertise"> <section id="expertise" class="expertise">
<div class="expertise__inner"> <div class="expertise__inner">
<h2 class="section-title">EXPERTISE</h2> <h2 class="sectionTitle">EXPERTISE</h2>
<p class="expertise__desc">The BODA LAB은 서비스와 사용자를 고려하여 다양한 경험을 제공하며,<br>거쳐간 모든 곳에서 지속적인 성장이 이루어질 수 있도록 함께합니다.</p> <p class="expertise__desc">The BODA LAB은 서비스와 사용자를 고려하여 다양한 경험을 제공하며,<br>거쳐간 모든 곳에서 지속적인 성장이 이루어질 수 있도록 함께합니다.</p>
<ul class="expertise__list"> <ul class="expertise__list">
<li class="expertise__item"> <li class="expertise__item">
@ -336,28 +336,28 @@
</section> </section>
<!-- 08. CONTACT / FOOTER --> <!-- 08. CONTACT / FOOTER -->
<section id="contact" class="section section--contact"> <section id="contact" class="contact">
<div class="contact__inner"> <div class="contact__inner">
<div class="contact__left"> <div class="contact__left">
<h2 class="contact__greeting">Welcome!<br><span>BODA LAB</span></h2> <h2 class="contact__greeting">Welcome!<br><span class="contact__greetingBrand">BODA LAB</span></h2>
<address class="contact__address"> <address class="contact__address">
<p class="contact__label">Head Office</p> <p class="contact__label">Head Office</p>
<dl class="contact__info-list"> <dl class="contact__infoList">
<div class="contact__info-item"> <div class="contact__infoItem">
<dt>Address</dt> <dt class="contact__infoLabel">Address</dt>
<dd>서울특별시 금천구 가산디지털2로 169-16,<br>907호 (가산하우스디퍼스타)</dd> <dd class="contact__infoValue">서울특별시 금천구 가산디지털2로 169-16,<br>907호 (가산하우스디퍼스타)</dd>
</div> </div>
<div class="contact__info-item"> <div class="contact__infoItem">
<dt>e-mail</dt> <dt class="contact__infoLabel">e-mail</dt>
<dd><a href="mailto:bodalab@bodalab.com">bodalab@bodalab.com</a></dd> <dd class="contact__infoValue"><a class="contact__infoLink" href="mailto:bodalab@bodalab.com">bodalab@bodalab.com</a></dd>
</div> </div>
<div class="contact__info-item"> <div class="contact__infoItem">
<dt>tel</dt> <dt class="contact__infoLabel">tel</dt>
<dd>010-1234-5678</dd> <dd class="contact__infoValue">010-1234-5678</dd>
</div> </div>
<div class="contact__info-item"> <div class="contact__infoItem">
<dt>fax</dt> <dt class="contact__infoLabel">fax</dt>
<dd>010-1234-5678</dd> <dd class="contact__infoValue">010-1234-5678</dd>
</div> </div>
</dl> </dl>
</address> </address>
@ -367,49 +367,49 @@
</div> </div>
</div> </div>
<!-- 프로젝트 문의 --> <!-- 프로젝트 문의 -->
<div class="contact-accordion"> <div class="contactAccordion">
<div class="contact-accordion__item is-open" id="acc-project"> <div class="contactAccordion__item is-open" id="acc-project">
<button class="contact-accordion__header" aria-expanded="true" aria-controls="acc-project-body"> <button class="contactAccordion__header" aria-expanded="true" aria-controls="acc-project-body">
<span>프로젝트 문의</span> <span>프로젝트 문의</span>
<img class="contact-accordion__icon" src="images/icon-chevron.svg" alt=""> <img class="contactAccordion__icon" src="images/icon-chevron.svg" alt="">
</button> </button>
<div class="contact-accordion__body" id="acc-project-body"> <div class="contactAccordion__body" id="acc-project-body">
<form class="contact-form" onsubmit="return false;"> <form class="contactForm" onsubmit="return false;">
<div class="contact-form__row"> <div class="contactForm__row">
<input type="text" class="contact-form__input" placeholder="회사명"> <input type="text" class="contactForm__input" placeholder="회사명">
<input type="text" class="contact-form__input" placeholder="담당자 이름"> <input type="text" class="contactForm__input" placeholder="담당자 이름">
</div> </div>
<div class="contact-form__row"> <div class="contactForm__row">
<input type="tel" class="contact-form__input" placeholder="연락처"> <input type="tel" class="contactForm__input" placeholder="연락처">
<input type="email" class="contact-form__input" placeholder="이메일"> <input type="email" class="contactForm__input" placeholder="이메일">
</div> </div>
<textarea class="contact-form__textarea" placeholder="문의내용"></textarea> <textarea class="contactForm__textarea" placeholder="문의내용"></textarea>
<div class="contact-form__agree"> <div class="contactForm__agree">
<label class="contact-form__checkbox"> <label class="contactForm__checkbox">
<input type="checkbox"> <input class="contactForm__checkboxInput" type="checkbox">
<span class="contact-form__checkbox-box"></span> <span class="contactForm__checkboxBox"></span>
<span>개인정보보호정책에 동의합니다.</span> <span>개인정보보호정책에 동의합니다.</span>
</label> </label>
</div> </div>
<div class="contact-form__submit"> <div class="contactForm__submit">
<button type="submit" class="btn-send">SEND</button> <button type="submit" class="btnSend">SEND</button>
</div> </div>
</form> </form>
</div> </div>
</div> </div>
<!-- 채용 --> <!-- 채용 -->
<div class="contact-accordion__item" id="acc-career"> <div class="contactAccordion__item" id="acc-career">
<button class="contact-accordion__header" aria-expanded="false" aria-controls="acc-career-body"> <button class="contactAccordion__header" aria-expanded="false" aria-controls="acc-career-body">
<span>채용</span> <span>채용</span>
<img class="contact-accordion__icon" src="images/icon-chevron.svg" alt=""> <img class="contactAccordion__icon" src="images/icon-chevron.svg" alt="">
</button> </button>
<div class="contact-accordion__body" id="acc-career-body" hidden> <div class="contactAccordion__body" id="acc-career-body" hidden>
<div class="career-tags"> <div class="careerTags">
<a href="#" class="career-tag">Planner &amp; 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="careerTag">Planner &amp; 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="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="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="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="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="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> <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>
</div> </div>
@ -419,8 +419,8 @@
<div class="footer__inner"> <div class="footer__inner">
<p class="footer__brand">THE<br>BODA LAB</p> <p class="footer__brand">THE<br>BODA LAB</p>
<p class="footer__contact"> <p class="footer__contact">
Mail <a href="mailto:bodalab@bodalab.com">bodalab@bodalab.com</a> Mail <a class="footer__contactLink" href="mailto:bodalab@bodalab.com">bodalab@bodalab.com</a>
&nbsp;&nbsp;Tel <a href="tel:010-1234-5678">010-1234-5678</a> &nbsp;&nbsp;Tel <a class="footer__contactLink" href="tel:010-1234-5678">010-1234-5678</a>
</p> </p>
<p class="footer__copy">© 2024 BODA LAB</p> <p class="footer__copy">© 2024 BODA LAB</p>
</div> </div>

10
src/js/main.js
View File

@ -4,9 +4,9 @@ $(function () {
const $gnb = $('#gnb'); const $gnb = $('#gnb');
const $hamburger = $('.gnb__hamburger'); const $hamburger = $('.gnb__hamburger');
const $mobileNav = $('.gnb__mobile-nav'); const $mobileNav = $('.gnb__mobileNav');
const $sections = $('section[id]'); const $sections = $('section[id]');
const $navLinks = $('.gnb__nav li'); const $navLinks = $('.gnb__navItem');
// GNB 스크롤 배경 // GNB 스크롤 배경
$(window).on('scroll.gnb', { passive: true }, function () { $(window).on('scroll.gnb', { passive: true }, function () {
@ -22,7 +22,7 @@ $(function () {
}); });
// 모바일 메뉴 링크 클릭 시 닫기 // 모바일 메뉴 링크 클릭 시 닫기
$('.gnb__mobile-nav a').on('click', function () { $('.gnb__mobileNavLink').on('click', function () {
$hamburger.removeClass('is-open').attr('aria-expanded', false); $hamburger.removeClass('is-open').attr('aria-expanded', false);
$mobileNav.removeClass('is-open'); $mobileNav.removeClass('is-open');
}); });
@ -45,8 +45,8 @@ $(function () {
} }
// Contact 아코디언 // Contact 아코디언
$('.contact-accordion__header').on('click', function () { $('.contactAccordion__header').on('click', function () {
const $item = $(this).closest('.contact-accordion__item'); const $item = $(this).closest('.contactAccordion__item');
const $body = $('#' + $(this).attr('aria-controls')); const $body = $('#' + $(this).attr('aria-controls'));
const isOpen = $item.hasClass('is-open'); const isOpen = $item.hasClass('is-open');

26
src/scss/base/_reset.scss
View File

@ -36,26 +36,25 @@ a {
address { font-style: normal; } address { font-style: normal; }
// Common section {
.section {
position: relative; position: relative;
width: 100%; width: 100%;
} }
.section-title { .sectionTitle {
font-family: $font-sans; font-family: $font-sans;
font-size: clamp(28px, 3vw, 40px); font-size: clamp(28px, 3vw, 40px);
font-weight: 600; font-weight: 600;
letter-spacing: 0.02em; letter-spacing: 0.02em;
color: $color-white; color: $color-white;
line-height: 1; line-height: 1;
&--dark {
color: $color-dark;
}
} }
.scroll-down { .sectionTitleDark {
color: $color-dark;
}
.scrollDown {
position: absolute; position: absolute;
bottom: 40px; bottom: 40px;
left: 50%; left: 50%;
@ -69,20 +68,23 @@ address { font-style: normal; }
&:hover { opacity: 0.6; } &:hover { opacity: 0.6; }
svg { img {
width: 100%; width: 100%;
height: 100%; height: 100%;
object-fit: unset;
} }
}
&--sm { .scrollDownSm {
position: relative; position: relative;
bottom: auto; bottom: auto;
left: auto; left: auto;
transform: none; transform: none;
margin-top: 40px; margin-top: 40px;
} }
@include mo { @include mo {
.scrollDown {
width: 52px; width: 52px;
height: 52px; height: 52px;
bottom: 24px; bottom: 24px;

237
src/scss/page/_about.scss
View File

@ -2,27 +2,17 @@
@use '../base/mixin' as *; @use '../base/mixin' as *;
// About // About
.section--about { .about {
height: 100vh; height: 100vh;
background: $color-bg; background: $color-bg;
display: flex; display: flex;
align-items: stretch; align-items: stretch;
@include mo {
height: auto;
min-height: 100vh;
flex-direction: column;
}
} }
.about__inner { .about__inner {
display: flex; display: flex;
width: 100%; width: 100%;
height: 100%; height: 100%;
@include mo {
flex-direction: column;
}
} }
.about__text { .about__text {
@ -32,12 +22,6 @@
width: 45%; width: 45%;
padding: $gnb-height 48px 60px; padding: $gnb-height 48px 60px;
gap: 80px; gap: 80px;
@include mo {
width: 100%;
padding: calc(#{$gnb-height-mo} + 40px) 24px 40px;
gap: 40px;
}
} }
.about__desc { .about__desc {
@ -46,29 +30,19 @@
line-height: 1.8; line-height: 1.8;
color: $color-white; color: $color-white;
opacity: 0.9; opacity: 0.9;
@include mo {
br { display: none; }
}
} }
.about__image { .about__image {
position: relative; position: relative;
width: 55%; width: 55%;
overflow: hidden; overflow: hidden;
}
img { .about__imageThumb {
width: 100%; width: 100%;
height: 100%; height: 100%;
object-fit: cover; object-fit: cover;
object-position: center; object-position: center;
}
@include mo {
width: 100%;
height: 56vw;
min-height: 260px;
}
} }
.about__caption { .about__caption {
@ -84,47 +58,29 @@
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
@include mo {
font-size: 16px;
padding: 16px;
}
} }
// History // History
.section--history { .history {
background: $color-bg; background: $color-bg;
} }
.history__top { .history__top {
background: $color-bg-light; background: $color-bg-light;
padding: 80px 48px 60px; padding: 80px 48px 60px;
}
@include mo { .history__top .sectionTitleDark {
padding: 60px 24px 40px;
}
.section-title--dark {
margin-bottom: 48px; margin-bottom: 48px;
@include mo {
margin-bottom: 32px;
}
}
} }
.history__timeline { .history__timeline {
display: grid; display: grid;
grid-template-columns: repeat(4, 1fr); grid-template-columns: repeat(4, 1fr);
gap: 0 24px; gap: 0 24px;
@include mo {
grid-template-columns: 1fr 1fr;
gap: 40px 20px;
}
} }
.history__year-group { .history__yearGroup {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
@ -150,136 +106,100 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 16px; gap: 16px;
}
li { .history__listItem {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 4px; gap: 4px;
}
strong { .history__listDate {
font-size: 14px; font-size: 14px;
font-weight: 700; font-weight: 700;
color: $color-dark; color: $color-dark;
line-height: 1.6; line-height: 1.6;
} }
span { .history__listText {
font-size: clamp(12px, 1vw, 14px); font-size: clamp(12px, 1vw, 14px);
font-weight: 300; font-weight: 300;
color: $color-dark; color: $color-dark;
line-height: 1.6; line-height: 1.6;
}
}
} }
.history__bottom { .history__bottom {
background: $color-bg; background: $color-bg;
padding: 0 48px 80px; padding: 0 48px 80px;
overflow: hidden; overflow: hidden;
@include mo {
padding: 0 24px 60px;
}
} }
.history__images { .history__images {
position: relative; position: relative;
height: 400px; height: 400px;
margin-top: -80px; margin-top: -80px;
@include mo {
height: 260px;
margin-top: -40px;
}
} }
.history__img { .history__img {
position: absolute; position: absolute;
object-fit: cover; object-fit: cover;
}
&--1 { .history__img1 {
width: 260px; width: 260px;
height: 170px; height: 170px;
left: 0; left: 0;
bottom: 0; bottom: 0;
}
@include mo { .history__img2 {
width: 120px;
height: 80px;
}
}
&--2 {
width: 370px; width: 370px;
height: 400px; height: 400px;
left: 50%; left: 50%;
transform: translateX(-50%); transform: translateX(-50%);
top: 0; top: 0;
}
@include mo { .history__img3 {
width: 180px;
height: 200px;
left: 50%;
}
}
&--3 {
width: 300px; width: 300px;
height: 190px; height: 190px;
right: 0; right: 0;
bottom: 40px; bottom: 40px;
@include mo {
width: 130px;
height: 90px;
bottom: 20px;
}
}
} }
// Boda Intro // Boda Intro
.section--boda-intro { .bodaIntro {
height: 100vh; height: 100vh;
background: $color-bg; background: $color-bg;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
text-align: center; text-align: center;
@include mo {
min-height: 100vh;
height: auto;
padding: 80px 24px;
}
} }
.boda-intro__content { .bodaIntro__content {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
} }
.boda-intro__title { .bodaIntro__title {
font-size: clamp(20px, 2vw, 28px); font-size: clamp(20px, 2vw, 28px);
font-weight: 600; font-weight: 600;
letter-spacing: 0.02em; letter-spacing: 0.02em;
margin-bottom: 32px; margin-bottom: 32px;
} }
.boda-intro__desc { .bodaIntro__desc {
font-size: clamp(14px, 1.3vw, 18px); font-size: clamp(14px, 1.3vw, 18px);
font-weight: 300; font-weight: 300;
line-height: 1.8; line-height: 1.8;
color: rgba($color-white, 0.8); color: rgba($color-white, 0.8);
text-align: center; text-align: center;
@include mo {
br { display: none; }
}
} }
// Vision // Vision
.section--vision { .vision {
background: $color-bg; background: $color-bg;
} }
@ -293,16 +213,10 @@
align-items: stretch; align-items: stretch;
height: 33.333vh; height: 33.333vh;
min-height: 280px; min-height: 280px;
}
&--reverse { .vision__itemReverse {
flex-direction: row-reverse; flex-direction: row-reverse;
}
@include mo {
flex-direction: column !important;
height: auto;
min-height: unset;
}
} }
.vision__text { .vision__text {
@ -312,22 +226,6 @@
width: 50%; width: 50%;
padding: 40px 80px; padding: 40px 80px;
gap: 20px; 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 { .vision__keyword {
@ -338,22 +236,97 @@
line-height: 1; line-height: 1;
} }
.vision__textDesc {
font-size: clamp(13px, 1vw, 15px);
font-weight: 300;
line-height: 1.8;
color: rgba($color-white, 0.75);
}
.vision__image { .vision__image {
width: 50%; width: 50%;
overflow: hidden; overflow: hidden;
}
img { .vision__imageThumb {
width: 100%; width: 100%;
height: 100%; height: 100%;
object-fit: cover; object-fit: cover;
transition: transform 0.6s ease; transition: transform 0.6s ease;
} }
&:hover img { .vision__image:hover .vision__imageThumb {
transform: scale(1.04); transform: scale(1.04);
}
@include mo {
.about {
height: auto;
min-height: 100vh;
flex-direction: column;
} }
@include mo { .about__inner { flex-direction: column; }
.about__text {
width: 100%;
padding: calc(#{$gnb-height-mo} + 40px) 24px 40px;
gap: 40px;
}
.about__image {
width: 100%;
height: 56vw;
min-height: 260px;
}
.about__caption {
font-size: 16px;
padding: 16px;
}
.breakLine { display: none; }
.history__top { padding: 60px 24px 40px; }
.history__top .sectionTitleDark { margin-bottom: 32px; }
.history__timeline {
grid-template-columns: 1fr 1fr;
gap: 40px 20px;
}
.history__bottom { padding: 0 24px 60px; }
.history__images {
height: 260px;
margin-top: -40px;
}
.history__img1 { width: 120px; height: 80px; }
.history__img2 { width: 180px; height: 200px; left: 50%; }
.history__img3 { width: 130px; height: 90px; bottom: 20px; }
.bodaIntro {
min-height: 100vh;
height: auto;
padding: 80px 24px;
}
.vision__item {
flex-direction: column !important;
height: auto;
min-height: unset;
}
.vision__text {
width: 100%;
padding: 32px 24px;
}
.vision__image {
width: 100%; width: 100%;
height: 56vw; height: 56vw;
min-height: 220px; min-height: 220px;

260
src/scss/page/_contact.scss
View File

@ -2,14 +2,10 @@
@use '../base/mixin' as *; @use '../base/mixin' as *;
// Expertise // Expertise
.section--expertise { .expertise {
background: $color-bg; background: $color-bg;
padding: 100px 48px; padding: 100px 48px;
border-top: 1px solid rgba($color-white, 0.08); border-top: 1px solid rgba($color-white, 0.08);
@include mo {
padding: 60px 24px;
}
} }
.expertise__inner { .expertise__inner {
@ -23,11 +19,6 @@
font-size: 15px; font-size: 15px;
font-weight: 300; font-weight: 300;
color: rgba($color-white, 0.6); color: rgba($color-white, 0.6);
@include mo {
margin-bottom: 40px;
font-size: 14px;
}
} }
.expertise__list { .expertise__list {
@ -35,37 +26,13 @@
grid-template-columns: repeat(4, 1fr); grid-template-columns: repeat(4, 1fr);
gap: 0; gap: 0;
border-top: 1px solid rgba($color-white, 0.12); border-top: 1px solid rgba($color-white, 0.12);
@include mo {
grid-template-columns: 1fr 1fr;
}
} }
.expertise__item { .expertise__item {
padding: 40px 32px 40px 0; padding: 40px 32px 40px 0;
border-right: 1px solid rgba($color-white, 0.12); border-right: 1px solid rgba($color-white, 0.12);
&:last-child { &:last-child { border-right: none; }
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 { .expertise__num {
@ -93,7 +60,7 @@
} }
// Contact // Contact
.section--contact { .contact {
background: $color-bg; background: $color-bg;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -105,11 +72,6 @@
align-items: stretch; align-items: stretch;
flex: 1; flex: 1;
min-height: 60vh; min-height: 60vh;
@include mo {
flex-direction: column;
min-height: unset;
}
} }
.contact__left { .contact__left {
@ -119,12 +81,6 @@
gap: 40px; gap: 40px;
width: 50%; width: 50%;
padding: 80px 80px 80px 48px; padding: 80px 80px 80px 48px;
@include mo {
width: 100%;
padding: 60px 24px 40px;
gap: 32px;
}
} }
.contact__greeting { .contact__greeting {
@ -134,8 +90,9 @@
font-weight: 400; font-weight: 400;
line-height: 1.1; line-height: 1.1;
color: $color-white; color: $color-white;
}
span { .contact__greetingBrand {
display: block; display: block;
font-size: clamp(16px, 1.5vw, 22px); font-size: clamp(16px, 1.5vw, 22px);
font-family: $font-sans; font-family: $font-sans;
@ -145,7 +102,6 @@
text-transform: uppercase; text-transform: uppercase;
margin-top: 8px; margin-top: 8px;
color: $color-cyan; color: $color-cyan;
}
} }
.contact__label { .contact__label {
@ -157,36 +113,37 @@
margin-bottom: 16px; margin-bottom: 16px;
} }
.contact__info-list { .contact__infoList {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 16px; gap: 16px;
} }
.contact__info-item { .contact__infoItem {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 4px; gap: 4px;
}
dt { .contact__infoLabel {
font-size: 12px; font-size: 12px;
font-weight: 600; font-weight: 600;
letter-spacing: 0.08em; letter-spacing: 0.08em;
color: $color-cyan; color: $color-cyan;
} }
dd { .contact__infoValue {
font-size: 14px; font-size: 14px;
font-weight: 300; font-weight: 300;
line-height: 1.7; line-height: 1.7;
color: rgba($color-white, 0.85); color: rgba($color-white, 0.85);
}
a { .contact__infoLink {
color: inherit; color: inherit;
transition: opacity 0.2s; transition: opacity 0.2s;
&:hover { opacity: 0.7; } &:hover { opacity: 0.7; }
}
}
} }
.contact__right { .contact__right {
@ -196,11 +153,6 @@
justify-content: center; justify-content: center;
padding: 80px 48px 80px 0; padding: 80px 48px 80px 0;
gap: 24px; gap: 24px;
@include mo {
width: 100%;
padding: 0 24px 60px;
}
} }
.contact__map { .contact__map {
@ -211,17 +163,16 @@
overflow: hidden; overflow: hidden;
} }
// Contact accordion
// Contact accordion — 프로젝트문의 / 채용 .contactAccordion {
.contact-accordion {
border-top: 1px solid rgba($color-white, 0.08); border-top: 1px solid rgba($color-white, 0.08);
} }
.contact-accordion__item { .contactAccordion__item {
border-bottom: 1px solid rgba($color-white, 0.08); border-bottom: 1px solid rgba($color-white, 0.08);
} }
.contact-accordion__header { .contactAccordion__header {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
@ -238,31 +189,26 @@
transition: opacity 0.2s; transition: opacity 0.2s;
&:hover { opacity: 0.7; } &:hover { opacity: 0.7; }
@include mo {
padding: 22px 24px;
}
} }
.contact-accordion__icon { .contactAccordion__icon {
width: 24px; width: 24px;
height: 24px; height: 24px;
flex-shrink: 0; flex-shrink: 0;
transition: transform 0.3s ease; transition: transform 0.3s ease;
object-fit: unset;
} }
.contact-accordion__item.is-open .contact-accordion__icon { .contactAccordion__item.is-open .contactAccordion__icon {
transform: rotate(180deg); transform: rotate(180deg);
} }
.contact-accordion__body { .contactAccordion__body {
overflow: hidden; overflow: hidden;
max-height: 0; max-height: 0;
transition: max-height 0.4s ease; transition: max-height 0.4s ease;
&:not([hidden]) { &:not([hidden]) { max-height: 800px; }
max-height: 800px;
}
&[hidden] { &[hidden] {
display: block !important; display: block !important;
@ -271,29 +217,21 @@
} }
// 문의 폼 // 문의 폼
.contact-form { .contactForm {
padding: 8px 48px 48px; padding: 8px 48px 48px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 12px; gap: 12px;
@include mo {
padding: 8px 24px 40px;
}
} }
.contact-form__row { .contactForm__row {
display: grid; display: grid;
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
gap: 12px; gap: 12px;
@include mo {
grid-template-columns: 1fr;
}
} }
.contact-form__input, .contactForm__input,
.contact-form__textarea { .contactForm__textarea {
width: 100%; width: 100%;
background: rgba($color-white, 0.04); background: rgba($color-white, 0.04);
border: 1px solid rgba($color-white, 0.1); border: 1px solid rgba($color-white, 0.1);
@ -309,16 +247,16 @@
&:focus { border-color: rgba($color-white, 0.3); } &:focus { border-color: rgba($color-white, 0.3); }
} }
.contact-form__textarea { .contactForm__textarea {
resize: none; resize: none;
height: 180px; height: 180px;
} }
.contact-form__agree { .contactForm__agree {
margin-top: 4px; margin-top: 4px;
} }
.contact-form__checkbox { .contactForm__checkbox {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
gap: 10px; gap: 10px;
@ -326,10 +264,28 @@
font-size: 13px; font-size: 13px;
font-weight: 300; font-weight: 300;
color: rgba($color-white, 0.6); color: rgba($color-white, 0.6);
}
input[type="checkbox"] { display: none; } .contactForm__checkboxInput {
display: none;
}
&-box { .contactForm__checkboxInput:checked + .contactForm__checkboxBox {
background: $color-cyan;
border-color: $color-cyan;
}
.contactForm__checkboxInput:checked + .contactForm__checkboxBox::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);
}
.contactForm__checkboxBox {
width: 18px; width: 18px;
height: 18px; height: 18px;
border: 1px solid rgba($color-white, 0.3); border: 1px solid rgba($color-white, 0.3);
@ -338,31 +294,15 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
transition: background 0.2s, border-color 0.2s; 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 { .contactForm__submit {
display: flex; display: flex;
justify-content: center; justify-content: center;
margin-top: 8px; margin-top: 8px;
} }
.btn-send { .btnSend {
padding: 12px 48px; padding: 12px 48px;
background: $color-cyan; background: $color-cyan;
border: none; border: none;
@ -379,18 +319,14 @@
} }
// 채용 태그 // 채용 태그
.career-tags { .careerTags {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
gap: 12px; gap: 12px;
padding: 8px 48px 48px; padding: 8px 48px 48px;
@include mo {
padding: 8px 24px 40px;
}
} }
.career-tag { .careerTag {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
gap: 8px; gap: 8px;
@ -402,26 +338,22 @@
color: $color-white; color: $color-white;
transition: border-color 0.2s, color 0.2s; transition: border-color 0.2s, color 0.2s;
svg {
width: 14px;
height: 14px;
flex-shrink: 0;
}
&:hover { &:hover {
border-color: $color-cyan; border-color: $color-cyan;
color: $color-cyan; color: $color-cyan;
} }
} }
.careerTag__icon {
width: 14px;
height: 14px;
flex-shrink: 0;
}
// Footer // Footer
.footer { .footer {
border-top: 1px solid rgba($color-white, 0.08); border-top: 1px solid rgba($color-white, 0.08);
padding: 32px 48px; padding: 32px 48px;
@include mo {
padding: 24px 20px;
}
} }
.footer__inner { .footer__inner {
@ -430,12 +362,6 @@
justify-content: space-between; justify-content: space-between;
gap: 24px; gap: 24px;
flex-wrap: wrap; flex-wrap: wrap;
@include mo {
flex-direction: column;
align-items: flex-start;
gap: 20px;
}
} }
.footer__brand { .footer__brand {
@ -451,16 +377,13 @@
font-size: 13px; font-size: 13px;
font-weight: 300; font-weight: 300;
color: rgba($color-white, 0.5); color: rgba($color-white, 0.5);
}
a { .footer__contactLink {
color: rgba($color-white, 0.5); color: rgba($color-white, 0.5);
transition: color 0.2s; transition: color 0.2s;
&:hover { color: $color-white; }
}
@include mo { &:hover { color: $color-white; }
font-size: 12px;
}
} }
.footer__copy { .footer__copy {
@ -469,3 +392,60 @@
color: rgba($color-white, 0.3); color: rgba($color-white, 0.3);
letter-spacing: 0.03em; letter-spacing: 0.03em;
} }
@include mo {
.expertise { padding: 60px 24px; }
.expertise__desc {
margin-bottom: 40px;
font-size: 14px;
}
.expertise__list { grid-template-columns: 1fr 1fr; }
.expertise__item {
padding: 28px 20px 28px 0;
&:last-child { border-right: 1px solid rgba($color-white, 0.12); }
&:nth-child(2),
&:nth-child(4) { border-right: none; }
&:nth-child(3),
&:nth-child(4) { border-top: 1px solid rgba($color-white, 0.12); }
}
.contact__inner {
flex-direction: column;
min-height: unset;
}
.contact__left {
width: 100%;
padding: 60px 24px 40px;
gap: 32px;
}
.contact__right {
width: 100%;
padding: 0 24px 60px;
}
.contactAccordion__header { padding: 22px 24px; }
.contactForm { padding: 8px 24px 40px; }
.contactForm__row { grid-template-columns: 1fr; }
.careerTags { padding: 8px 24px 40px; }
.footer { padding: 24px 20px; }
.footer__inner {
flex-direction: column;
align-items: flex-start;
gap: 20px;
}
.footer__contact { font-size: 12px; }
}

162
src/scss/page/_home.scss
View File

@ -15,38 +15,41 @@
background: rgba($color-bg, 0.92); background: rgba($color-bg, 0.92);
backdrop-filter: blur(12px); backdrop-filter: blur(12px);
} }
}
&__inner { .gnb__inner {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
height: 100%; height: 100%;
padding: 0 48px; padding: 0 48px;
}
@include mo { .gnb__logo {
padding: 0 20px;
height: $gnb-height-mo;
}
}
&__logo {
display: flex; display: flex;
align-items: center; align-items: center;
}
svg { .gnb__logoImg {
width: 90px; width: 90px;
height: auto; height: auto;
} object-fit: unset;
} }
&__nav { .gnb__nav {
ul { // nav block — layout only
}
.gnb__navList {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 0; }
}
li a { .gnb__navItem {
// list item — no extra styles needed
}
.gnb__navLink {
display: block; display: block;
padding: 24px 32px; padding: 24px 32px;
font-size: 16px; font-size: 16px;
@ -56,18 +59,13 @@
transition: color 0.2s; transition: color 0.2s;
&:hover { color: $color-cyan; } &:hover { color: $color-cyan; }
} }
li.is-active a { .gnb__navItem.is-active .gnb__navLink {
color: $color-cyan; color: $color-cyan;
} }
@include mo { .gnb__hamburger {
display: none;
}
}
&__hamburger {
display: none; display: none;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
@ -78,27 +76,21 @@
border: none; border: none;
cursor: pointer; cursor: pointer;
padding: 0; padding: 0;
}
span { .gnb__hamburgerLine {
display: block; display: block;
width: 100%; width: 100%;
height: 1px; height: 1px;
background: $color-white; background: $color-white;
transition: transform 0.3s, opacity 0.3s; transition: transform 0.3s, opacity 0.3s;
} }
&.is-open { .gnb__hamburger.is-open .gnb__hamburgerLine:nth-child(1) { transform: translateY(6px) rotate(45deg); }
span:nth-child(1) { transform: translateY(6px) rotate(45deg); } .gnb__hamburger.is-open .gnb__hamburgerLine:nth-child(2) { opacity: 0; }
span:nth-child(2) { opacity: 0; } .gnb__hamburger.is-open .gnb__hamburgerLine:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
}
@include mo { .gnb__mobileNav {
display: flex;
}
}
&__mobile-nav {
display: none; display: none;
position: absolute; position: absolute;
top: $gnb-height-mo; top: $gnb-height-mo;
@ -112,34 +104,29 @@
transition: transform 0.35s ease, opacity 0.35s ease; transition: transform 0.35s ease, opacity 0.35s ease;
pointer-events: none; pointer-events: none;
ul { &.is-open {
transform: translateY(0);
opacity: 1;
pointer-events: auto;
}
}
.gnb__mobileNavList {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
li a { .gnb__mobileNavLink {
display: block; display: block;
padding: 14px 24px; padding: 14px 24px;
font-size: 18px; font-size: 18px;
font-weight: 400; font-weight: 400;
letter-spacing: 0.05em; letter-spacing: 0.05em;
color: $color-white; color: $color-white;
}
&.is-open {
transform: translateY(0);
opacity: 1;
pointer-events: auto;
}
@include mo {
display: block;
}
}
} }
// Intro // Intro
.section--intro { .intro {
height: 100vh; height: 100vh;
display: flex; display: flex;
align-items: center; align-items: center;
@ -160,51 +147,30 @@
border-radius: 50%; border-radius: 50%;
filter: blur(120px); filter: blur(120px);
opacity: 0.55; opacity: 0.55;
}
&--cyan { .blobCyan {
width: 56vw; width: 56vw;
height: 56vw; height: 56vw;
background: $color-cyan; background: $color-cyan;
top: -10%; top: -10%;
right: -10%; right: -10%;
}
@include mo { .blobPurple {
width: 90vw;
height: 90vw;
right: -20%;
top: -5%;
}
}
&--purple {
width: 32vw; width: 32vw;
height: 32vw; height: 32vw;
background: $color-purple; background: $color-purple;
top: 15%; top: 15%;
left: 5%; left: 5%;
}
@include mo { .blobBlue {
width: 60vw;
height: 60vw;
left: -15%;
top: 20%;
}
}
&--blue {
width: 24vw; width: 24vw;
height: 24vw; height: 24vw;
background: $color-blue; background: $color-blue;
bottom: 10%; bottom: 10%;
left: -5%; left: -5%;
@include mo {
width: 50vw;
height: 50vw;
left: -10%;
bottom: 5%;
}
}
} }
.intro__content { .intro__content {
@ -229,3 +195,37 @@
text-transform: uppercase; text-transform: uppercase;
color: $color-white; color: $color-white;
} }
@include mo {
.gnb__inner {
padding: 0 20px;
height: $gnb-height-mo;
}
.gnb__nav { display: none; }
.gnb__hamburger { display: flex; }
.gnb__mobileNav { display: block; }
.blobCyan {
width: 90vw;
height: 90vw;
right: -20%;
top: -5%;
}
.blobPurple {
width: 60vw;
height: 60vw;
left: -15%;
top: 20%;
}
.blobBlue {
width: 50vw;
height: 50vw;
left: -10%;
bottom: 5%;
}
}

44
src/scss/page/_projects.scss
View File

@ -1,13 +1,9 @@
@use '../base/variable' as *; @use '../base/variable' as *;
@use '../base/mixin' as *; @use '../base/mixin' as *;
.section--project { .project {
background: $color-bg; background: $color-bg;
padding: 100px 48px; padding: 100px 48px;
@include mo {
padding: 60px 20px;
}
} }
.project__inner { .project__inner {
@ -17,21 +13,12 @@
.project__heading { .project__heading {
margin-bottom: 60px; margin-bottom: 60px;
@include mo {
margin-bottom: 36px;
}
} }
.project__grid { .project__grid {
display: grid; display: grid;
grid-template-columns: repeat(2, 1fr); grid-template-columns: repeat(2, 1fr);
gap: 40px 40px; gap: 40px 40px;
@include mo {
grid-template-columns: 1fr;
gap: 32px;
}
} }
.project__card { .project__card {
@ -39,10 +26,10 @@
flex-direction: column; flex-direction: column;
gap: 16px; gap: 16px;
cursor: pointer; cursor: pointer;
}
&:hover .project__thumb img { .project__card:hover .project__thumbImg {
transform: scale(1.04); transform: scale(1.04);
}
} }
.project__thumb { .project__thumb {
@ -50,16 +37,16 @@
aspect-ratio: 16 / 10; aspect-ratio: 16 / 10;
overflow: hidden; overflow: hidden;
background: #1a1a1a; background: #1a1a1a;
}
img { .project__thumbImg {
width: 100%; width: 100%;
height: 100%; height: 100%;
object-fit: cover; object-fit: cover;
transition: transform 0.5s ease; transition: transform 0.5s ease;
}
} }
.project__thumb--empty { .project__thumbEmpty {
background: #1a1a1a; background: #1a1a1a;
} }
@ -118,13 +105,9 @@
display: flex; display: flex;
justify-content: center; justify-content: center;
margin-top: 64px; margin-top: 64px;
@include mo {
margin-top: 48px;
}
} }
.btn-more { .btnMore {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@ -144,3 +127,16 @@
border-color: $color-white; border-color: $color-white;
} }
} }
@include mo {
.project { padding: 60px 20px; }
.project__heading { margin-bottom: 36px; }
.project__grid {
grid-template-columns: 1fr;
gap: 32px;
}
.project__more { margin-top: 48px; }
}