fix: about us
This commit is contained in:
이희원
parent
8ffba8e76a
commit
aba82b0c71
|
|
@ -1,6 +1,17 @@
|
|||
<svg viewBox="0 0 140 62" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<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 width="140" height="64" viewBox="0 0 140 64" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M105.558 1.6094L114.28 10.0894V27.3882H131.855L139.158 36.8565V62.1082H61.6378L53.1149 53.8541V36.1788H8.98649L0.671622 27.6988V1.6094H105.558ZM105.823 0.941162H0V27.9718L8.7027 36.8376H52.4432V54.1271L61.3635 62.7671H139.82V36.6212L132.177 26.72H114.942V9.80705L105.823 0.941162Z" fill="white"/>
|
||||
<path d="M26.2216 1.88234V27.0306H0.945946V1.88234H26.2216ZM27.1676 0.941162H0V27.9717H27.1676V0.941162Z" fill="white"/>
|
||||
<path d="M8.02161 7.30347H13.65C14.3689 7.30347 15.0311 7.38817 15.627 7.54817C16.223 7.71758 16.7338 7.95288 17.1594 8.28229C17.5851 8.60229 17.9162 9.007 18.1527 9.487C18.3892 9.967 18.5121 10.5317 18.5121 11.1717C18.5121 11.6329 18.4554 12.0188 18.3419 12.3388C18.2284 12.6588 18.1054 12.9317 17.973 13.1388C17.8121 13.3929 17.6324 13.6093 17.4338 13.7788C17.7459 13.9764 18.0392 14.2399 18.2946 14.5505C18.5121 14.8235 18.7108 15.1623 18.8905 15.5764C19.0703 15.9905 19.1649 16.4988 19.1649 17.1011C19.1649 17.7882 19.0419 18.4093 18.7959 18.9646C18.55 19.5199 18.2 19.9999 17.7459 20.3952C17.2919 20.7905 16.7432 21.0917 16.0811 21.2988C15.4284 21.5058 14.7 21.6093 13.8959 21.6093H8.03107V7.30347H8.02161ZM13.2811 19.8964C14.5486 19.8964 15.4851 19.6235 16.0811 19.0776C16.6865 18.5317 16.9892 17.8164 16.9892 16.9129C16.9892 16.3293 16.8662 15.8588 16.6108 15.5105C16.3554 15.1623 16.0905 14.8893 15.8067 14.6823C15.4473 14.4564 15.05 14.2964 14.6243 14.2117C14.9648 14.1082 15.277 13.9576 15.5513 13.7411C15.7973 13.5529 16.0148 13.2988 16.2135 12.9788C16.4121 12.6588 16.5067 12.2446 16.5067 11.7458C16.5067 10.8423 16.223 10.1646 15.6459 9.70347C15.0689 9.24229 14.2838 9.01641 13.3 9.01641H10.1973V19.8964H13.3H13.2811ZM10.7365 13.9576V9.53405H13.2811C14.2176 9.53405 14.8892 9.74111 15.2959 10.1458C15.7027 10.5505 15.9108 11.087 15.9108 11.7458C15.9108 12.4046 15.7027 12.9411 15.2959 13.3458C14.8892 13.7505 14.2176 13.9576 13.2811 13.9576H10.7365ZM10.7365 19.3788V14.4658H13.2621C13.7067 14.4658 14.123 14.5129 14.5013 14.607C14.8797 14.7011 15.2203 14.8423 15.504 15.0399C15.7878 15.2376 16.0149 15.4917 16.1851 15.8023C16.3459 16.1129 16.4311 16.4893 16.4311 16.9223C16.4311 17.7976 16.1378 18.4282 15.5608 18.8141C14.9743 19.1999 14.2176 19.3976 13.2621 19.3976H10.7365V19.3788ZM14.0567 11.6611C14.0567 11.0023 13.6973 10.6729 12.9784 10.6729H12.4581V12.6493H12.9784C13.6973 12.6493 14.0567 12.3199 14.0567 11.6611ZM12.9784 18.2493C14.0662 18.2493 14.6148 17.8352 14.6148 17.007C14.6148 16.1788 14.0662 15.7646 12.9784 15.7646H12.4581V18.2493H12.9784Z" fill="white"/>
|
||||
<path d="M52.4432 1.88234V27.0306H27.1675V1.88234H52.4432ZM53.3891 0.941162H26.2216V27.9717H53.3891V0.941162Z" fill="white"/>
|
||||
<path d="M104.877 1.88234V27.0306H79.6109V1.88234H104.877ZM105.823 0.941162H78.6555V27.9717H105.832V0.941162H105.823Z" fill="white"/>
|
||||
<path d="M78.6554 1.88234V27.0306H53.3797V1.88234H78.6554ZM79.6013 0.941162H52.4338V27.9717H79.6013V0.941162Z" fill="white"/>
|
||||
<path d="M32.2567 14.4564C32.2567 13.4305 32.4554 12.4517 32.8527 11.5387C33.25 10.6258 33.7891 9.8258 34.4702 9.14815C35.1513 8.47051 35.9554 7.93404 36.8729 7.53874C37.7905 7.14345 38.7743 6.9458 39.8054 6.9458C40.8364 6.9458 41.8202 7.14345 42.7378 7.53874C43.6554 7.93404 44.4594 8.47051 45.1405 9.14815C45.8216 9.8258 46.3608 10.6258 46.7581 11.5387C47.1554 12.4517 47.354 13.4305 47.354 14.4564C47.354 15.4823 47.1554 16.4611 46.7581 17.374C46.3608 18.287 45.8216 19.087 45.1405 19.7646C44.4594 20.4423 43.6554 20.9787 42.7378 21.374C41.8202 21.7693 40.8364 21.967 39.8054 21.967C38.7743 21.967 37.7905 21.7693 36.8729 21.374C35.9554 20.9787 35.1513 20.4423 34.4702 19.7646C33.7891 19.087 33.25 18.287 32.8527 17.374C32.4554 16.4611 32.2567 15.4823 32.2567 14.4564ZM34.281 14.4564C34.281 15.2187 34.4229 15.9246 34.7162 16.5929C35 17.2611 35.3973 17.8446 35.8986 18.3434C36.4 18.8423 36.9864 19.2376 37.6581 19.5199C38.3297 19.8023 39.0392 19.9529 39.8054 19.9529C40.5716 19.9529 41.281 19.8117 41.9527 19.5199C42.6243 19.2376 43.2108 18.8423 43.7121 18.3434C44.2135 17.8446 44.6108 17.2611 44.8946 16.5929C45.1783 15.9246 45.3297 15.2187 45.3297 14.4564C45.3297 13.694 45.1878 12.9882 44.8946 12.3199C44.6108 11.6517 44.2135 11.0682 43.7121 10.5693C43.2108 10.0705 42.6243 9.67521 41.9527 9.39286C41.281 9.11051 40.5716 8.95992 39.8054 8.95992C39.0392 8.95992 38.3297 9.10109 37.6581 9.39286C36.9864 9.67521 36.4 10.0705 35.8986 10.5693C35.3973 11.0682 35 11.6517 34.7162 12.3199C34.4324 12.9882 34.281 13.694 34.281 14.4564ZM39.8054 19.3976C39.1148 19.3976 38.4716 19.2658 37.8756 19.0117C37.2797 18.7576 36.75 18.3999 36.3054 17.9482C35.8513 17.4964 35.5013 16.9787 35.2364 16.3858C34.981 15.7929 34.8486 15.1529 34.8486 14.4658C34.8486 13.7787 34.981 13.1387 35.2364 12.5458C35.4919 11.9529 35.8513 11.4258 36.3054 10.9834C36.7594 10.5317 37.2797 10.1834 37.8756 9.91992C38.4716 9.6658 39.1148 9.53404 39.8054 9.53404C40.4959 9.53404 41.1391 9.6658 41.7351 9.91992C42.331 10.174 42.8608 10.5317 43.3054 10.9834C43.7594 11.4352 44.1094 11.9529 44.3743 12.5458C44.6297 13.1387 44.7621 13.7787 44.7621 14.4658C44.7621 15.1529 44.6297 15.7929 44.3743 16.3858C44.1189 16.9787 43.7594 17.5058 43.3054 17.9482C42.8513 18.3999 42.331 18.7482 41.7351 19.0117C41.1391 19.2658 40.4959 19.3976 39.8054 19.3976ZM36.7878 14.4564C36.7878 14.8705 36.8635 15.2564 37.0243 15.6234C37.1851 15.9905 37.4027 16.3105 37.6675 16.574C37.9419 16.847 38.2635 17.0634 38.6229 17.214C38.9919 17.374 39.3797 17.4493 39.7959 17.4493C40.2121 17.4493 40.6 17.374 40.9689 17.214C41.3378 17.054 41.6594 16.8376 41.9243 16.574C42.1986 16.3011 42.4162 15.9811 42.5675 15.6234C42.7283 15.2564 42.804 14.8705 42.804 14.4564C42.804 14.0423 42.7283 13.6564 42.5675 13.2893C42.4067 12.9223 42.1891 12.6023 41.9243 12.3387C41.65 12.0658 41.3283 11.8493 40.9689 11.6987C40.6 11.5387 40.2121 11.4634 39.7959 11.4634C39.3797 11.4634 38.9919 11.5387 38.6229 11.6987C38.254 11.8587 37.9324 12.0752 37.6675 12.3387C37.3932 12.6117 37.1756 12.9317 37.0243 13.2893C36.8635 13.6564 36.7878 14.0423 36.7878 14.4564Z" fill="white"/>
|
||||
<path d="M59.7649 21.6188V7.30347H63.7568C65.1095 7.30347 66.3108 7.45405 67.3703 7.75523C68.4298 8.05641 69.319 8.50817 70.0473 9.11053C70.7757 9.71288 71.3244 10.4564 71.7122 11.3505C72.0906 12.2446 72.2798 13.2799 72.2798 14.447C72.2798 15.6141 72.0906 16.6493 71.7122 17.5435C71.3338 18.4376 70.7757 19.1811 70.0473 19.7835C69.319 20.3858 68.4298 20.8376 67.3703 21.1482C66.3108 21.4588 65.1095 21.6093 63.7568 21.6093H59.7649V21.6188ZM61.9216 19.8964H63.7568C65.8568 19.8964 67.4365 19.4164 68.5149 18.4658C69.5838 17.5152 70.123 16.1693 70.123 14.447C70.123 12.7246 69.5838 11.3788 68.5149 10.4376C67.446 9.49641 65.8568 9.02582 63.7568 9.02582H61.9216V19.9058V19.8964ZM62.4892 19.3788V9.53405H63.7568C65.5825 9.53405 67.0014 9.94817 68.0135 10.767C69.0257 11.5858 69.5365 12.8188 69.5365 14.447C69.5365 16.0752 69.0257 17.3082 68.0135 18.1364C67.0014 18.9646 65.5825 19.3788 63.7568 19.3788H62.4892ZM64.3622 17.5341C65.4406 17.5341 66.273 17.2799 66.8595 16.7717C67.446 16.2635 67.7392 15.4917 67.7392 14.447C67.7392 13.4023 67.446 12.6305 66.8595 12.1317C66.273 11.6329 65.4406 11.3788 64.3622 11.3788V17.5341Z" fill="white"/>
|
||||
<path d="M90.5176 7.30347H93.9703L99.4284 21.6188H85.0689L90.527 7.30347H90.5176ZM88.2567 19.9152L92.2392 9.53405L96.1932 19.9152H88.2662H88.2567ZM96.4392 20.6023L96.8081 21.6188H97.4135L96.3824 18.7858L92.6459 9.02582H91.823L88.077 18.8235L86.9892 21.6282H87.5946L87.9919 20.6117L88.0676 20.4141H96.3635L96.4297 20.6117L96.4392 20.6023ZM93.7338 18.5317L92.2392 14.6635L90.8297 18.5317H93.7338Z" fill="white"/>
|
||||
<path d="M104.877 27.9812V53.1294H79.6014V27.9812H104.877ZM105.823 27.04H78.6555V54.0706H105.823V27.04Z" fill="white"/>
|
||||
<path d="M131.108 27.9812V53.1294H105.832V27.9812H131.108ZM132.054 27.04H104.886V54.0706H132.054V27.04Z" fill="white"/>
|
||||
<path d="M78.6649 27.9812V53.1294H53.3892V27.9812H78.6649ZM79.6108 27.04H52.4432V54.0706H79.6108V27.04Z" fill="white"/>
|
||||
<path d="M95.4176 44.3481H89.4581L87.9067 47.7081H85.6459L92.5324 32.9976L99.173 47.7081H96.8743L95.4176 44.3481ZM94.5662 42.3811L92.504 37.6752L90.3378 42.3811H94.5662Z" fill="white"/>
|
||||
<path d="M114.251 47.2848V33.4495H116.342C117.269 33.4495 118.016 33.5248 118.565 33.6659C119.123 33.8071 119.596 34.0518 119.984 34.3906C120.372 34.7389 120.684 35.1812 120.911 35.7083C121.147 36.2448 121.261 36.7812 121.261 37.3177C121.261 38.3059 120.882 39.153 120.116 39.8401C120.854 40.0942 121.441 40.5271 121.866 41.1577C122.301 41.7789 122.519 42.5036 122.519 43.3224C122.519 44.4048 122.131 45.3177 121.365 46.0612C120.901 46.5224 120.381 46.8424 119.804 47.0212C119.17 47.1906 118.385 47.2848 117.439 47.2848H114.261H114.251ZM116.351 39.3883H117.014C117.799 39.3883 118.366 39.2189 118.726 38.8706C119.085 38.5224 119.274 38.0236 119.274 37.3553C119.274 36.6871 119.085 36.2071 118.716 35.8683C118.347 35.5295 117.799 35.36 117.099 35.36H116.361V39.3883H116.351ZM116.351 45.3177H117.647C118.593 45.3177 119.293 45.1295 119.738 44.7624C120.211 44.3577 120.438 43.8589 120.438 43.2377C120.438 42.6165 120.211 42.1365 119.766 41.7318C119.331 41.3271 118.546 41.1295 117.411 41.1295H116.351V45.3177Z" fill="white"/>
|
||||
<path d="M65.1946 33.4307V45.3083H69.2811V47.2754H63.0946V33.4401H65.1946V33.4307Z" fill="white"/>
|
||||
</svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 439 B After Width: | Height: | Size: 9.1 KiB |
446
src/index.html
446
src/index.html
|
|
@ -1,21 +1,20 @@
|
|||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="ko">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<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">
|
||||
<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">
|
||||
<img class="gnb__logoImg" src="images/logo.svg" alt="BODA LAB" />
|
||||
</a>
|
||||
<nav class="gnb__nav">
|
||||
<ul class="gnb__navList">
|
||||
|
|
@ -43,7 +42,6 @@
|
|||
</header>
|
||||
|
||||
<main>
|
||||
|
||||
<!-- 01. INTRO -->
|
||||
<section id="intro" class="intro">
|
||||
<div class="intro__blobs" aria-hidden="true">
|
||||
|
|
@ -56,7 +54,7 @@
|
|||
<h1 class="intro__title">THE BODA LAB</h1>
|
||||
</div>
|
||||
<a href="#about" class="scrollDown" aria-label="아래로 스크롤">
|
||||
<img src="images/icon-scroll-down.svg" alt="">
|
||||
<img src="images/icon-scroll-down.svg" alt="" />
|
||||
</a>
|
||||
</section>
|
||||
|
||||
|
|
@ -65,16 +63,22 @@
|
|||
<div class="about__inner">
|
||||
<div class="about__text">
|
||||
<h2 class="sectionTitle">ABOUT US</h2>
|
||||
<p class="about__desc">
|
||||
The BODA LAB은 디지털시대에 발맞춰 클라이언트의 비즈니스를 위한<br class="breakLine">
|
||||
다양한 기술적 노하우로 완성된 경험을 제공합니다.<br class="breakLine">
|
||||
우리의 활동은 웹, 앱, 모바일을 넘나들며 세상의 모든 비즈니스 활동에<br class="breakLine">
|
||||
강한 영향력을 전달합니다.
|
||||
<p class="desc">
|
||||
The BODA LAB은 디지털시대에 발맞춰 클라이언트의 비즈니스를 위한<br class="breakLine" />
|
||||
다양한 기술적 노하우로 완성된 경험을 제공합니다.<br class="breakLine" />
|
||||
우리의 활동은 웹, 앱, 모바일을 넘나들며 세상의 모든 비즈니스 활동에 강한 영향력을 전달합니다.
|
||||
</p>
|
||||
</div>
|
||||
<div class="about__image">
|
||||
<img class="about__imageThumb" src="images/about-hand.jpg" alt="스케치하는 손">
|
||||
<p class="about__caption">Creative Development Company BODA.Lab</p>
|
||||
<img class="about__imageThumb" src="images/about-hand.jpg" alt="스케치하는 손" />
|
||||
</div>
|
||||
<div class="about__caption">
|
||||
<div class="about__captionTrack">
|
||||
<span class="about__captionText">Creative Development Company BODA.Lab</span>
|
||||
<span class="about__captionText">Creative Development Company BODA.Lab</span>
|
||||
<span class="about__captionText">Creative Development Company BODA.Lab</span>
|
||||
<span class="about__captionText">Creative Development Company BODA.Lab</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
@ -88,54 +92,117 @@
|
|||
<span class="history__year">2024</span>
|
||||
<div class="history__divider"></div>
|
||||
<ul class="history__list">
|
||||
<li class="history__listItem"><strong class="history__listDate">12.01</strong><span class="history__listText">신한은행 슈퍼소울 운영 계약</span></li>
|
||||
<li class="history__listItem"><strong class="history__listDate">09.01</strong><span class="history__listText">한화금융통합 서비스 구축 계약</span></li>
|
||||
<li class="history__listItem"><strong class="history__listDate">05.30</strong><span class="history__listText">신한은행 슈퍼소울 구축 계약</span></li>
|
||||
<li class="history__listItem"><strong class="history__listDate">05.01</strong><span class="history__listText">롯데 렌터카 오토리스 구축 계약</span></li>
|
||||
<li class="history__listItem">
|
||||
<strong class="history__listDate">12.01</strong>
|
||||
<span class="history__listText">신한은행 슈퍼소울 운영 계약</span>
|
||||
</li>
|
||||
<li class="history__listItem">
|
||||
<strong class="history__listDate">09.01</strong>
|
||||
<span class="history__listText">한화금융통합 서비스 구축 계약</span>
|
||||
</li>
|
||||
<li class="history__listItem">
|
||||
<strong class="history__listDate">05.30</strong>
|
||||
<span class="history__listText">신한은행 슈퍼소울 구축 계약</span>
|
||||
</li>
|
||||
<li class="history__listItem">
|
||||
<strong class="history__listDate">05.01</strong>
|
||||
<span class="history__listText">롯데 렌터카 오토리스 구축 계약</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="history__yearGroup">
|
||||
<span class="history__year">2023</span>
|
||||
<div class="history__divider"></div>
|
||||
<ul class="history__list">
|
||||
<li class="history__listItem"><strong class="history__listDate">12.01</strong><span class="history__listText">신한은행 슈퍼소울 운영 계약</span></li>
|
||||
<li class="history__listItem"><strong class="history__listDate">11.01</strong><span class="history__listText">한화금융 라이프 플러스 아카데미 구축 계약</span></li>
|
||||
<li class="history__listItem"><strong class="history__listDate">10.01</strong><span class="history__listText">대교 차세대 구축 계약</span></li>
|
||||
<li class="history__listItem"><strong class="history__listDate">09.01</strong><span class="history__listText">한화금융통합 서비스 구축 계약</span></li>
|
||||
<li class="history__listItem"><strong class="history__listDate">05.30</strong><span class="history__listText">신한은행 슈퍼소울 구축 계약</span></li>
|
||||
<li class="history__listItem"><strong class="history__listDate">05.01</strong><span class="history__listText">롯데 렌터카 오토리스 구축 계약</span></li>
|
||||
<li class="history__listItem">
|
||||
<strong class="history__listDate">12.01</strong>
|
||||
<span class="history__listText">신한은행 슈퍼소울 운영 계약</span>
|
||||
</li>
|
||||
<li class="history__listItem">
|
||||
<strong class="history__listDate">11.01</strong>
|
||||
<span class="history__listText">한화금융 라이프 플러스 아카데미 구축 계약</span>
|
||||
</li>
|
||||
<li class="history__listItem">
|
||||
<strong class="history__listDate">10.01</strong>
|
||||
<span class="history__listText">대교 차세대 구축 계약</span>
|
||||
</li>
|
||||
<li class="history__listItem">
|
||||
<strong class="history__listDate">09.01</strong>
|
||||
<span class="history__listText">한화금융통합 서비스 구축 계약</span>
|
||||
</li>
|
||||
<li class="history__listItem">
|
||||
<strong class="history__listDate">05.30</strong>
|
||||
<span class="history__listText">신한은행 슈퍼소울 구축 계약</span>
|
||||
</li>
|
||||
<li class="history__listItem">
|
||||
<strong class="history__listDate">05.01</strong>
|
||||
<span class="history__listText">롯데 렌터카 오토리스 구축 계약</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="history__yearGroup">
|
||||
<span class="history__year">2022</span>
|
||||
<div class="history__divider"></div>
|
||||
<ul class="history__list">
|
||||
<li class="history__listItem"><strong class="history__listDate">11.01</strong><span class="history__listText">한화금융 서비스앱 플러스 리뉴얼 2차 계약</span></li>
|
||||
<li class="history__listItem"><strong class="history__listDate">09.01</strong><span class="history__listText">한화금융 서비스앱 플러스 리뉴얼 1차 계약</span></li>
|
||||
<li class="history__listItem"><strong class="history__listDate">08.01</strong><span class="history__listText">밀레 쇼핑몰 리뉴얼 구축 계약</span></li>
|
||||
<li class="history__listItem"><strong class="history__listDate">07.01</strong><span class="history__listText">오뚜기 쇼핑몰 리뉴얼 구축 계약</span></li>
|
||||
<li class="history__listItem"><strong class="history__listDate">05.01</strong><span class="history__listText">캐나다구스 코리아 쇼핑몰 구축 계약</span></li>
|
||||
<li class="history__listItem">
|
||||
<strong class="history__listDate">11.01</strong>
|
||||
<span class="history__listText">한화금융 서비스앱 플러스 리뉴얼 2차 계약</span>
|
||||
</li>
|
||||
<li class="history__listItem">
|
||||
<strong class="history__listDate">09.01</strong>
|
||||
<span class="history__listText">한화금융 서비스앱 플러스 리뉴얼 1차 계약</span>
|
||||
</li>
|
||||
<li class="history__listItem">
|
||||
<strong class="history__listDate">08.01</strong>
|
||||
<span class="history__listText">밀레 쇼핑몰 리뉴얼 구축 계약</span>
|
||||
</li>
|
||||
<li class="history__listItem">
|
||||
<strong class="history__listDate">07.01</strong>
|
||||
<span class="history__listText">오뚜기 쇼핑몰 리뉴얼 구축 계약</span>
|
||||
</li>
|
||||
<li class="history__listItem">
|
||||
<strong class="history__listDate">05.01</strong>
|
||||
<span class="history__listText">캐나다구스 코리아 쇼핑몰 구축 계약</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="history__yearGroup">
|
||||
<span class="history__year">2021</span>
|
||||
<div class="history__divider"></div>
|
||||
<ul class="history__list">
|
||||
<li class="history__listItem"><strong class="history__listDate">11.22</strong><span class="history__listText">롯데 렌터카 차세대 구축 계약</span></li>
|
||||
<li class="history__listItem"><strong class="history__listDate">11.01</strong><span class="history__listText">LSN MALL 구축 계약</span></li>
|
||||
<li class="history__listItem"><strong class="history__listDate">7.29</strong><span class="history__listText">(주)보다랩 설립</span></li>
|
||||
<li class="history__listItem"><strong class="history__listDate">5.15</strong><span class="history__listText">현대홈쇼핑 리뉴얼 구축 계약</span></li>
|
||||
<li class="history__listItem"><strong class="history__listDate">01.11</strong><span class="history__listText">KONA I 헬스케어 구축 계약</span></li>
|
||||
<li class="history__listItem"><strong class="history__listDate">01.11</strong><span class="history__listText">유아이팩토리 설립</span></li>
|
||||
<li class="history__listItem">
|
||||
<strong class="history__listDate">11.22</strong>
|
||||
<span class="history__listText">롯데 렌터카 차세대 구축 계약</span>
|
||||
</li>
|
||||
<li class="history__listItem">
|
||||
<strong class="history__listDate">11.01</strong>
|
||||
<span class="history__listText">LSN MALL 구축 계약</span>
|
||||
</li>
|
||||
<li class="history__listItem">
|
||||
<strong class="history__listDate">7.29</strong>
|
||||
<span class="history__listText">(주)보다랩 설립</span>
|
||||
</li>
|
||||
<li class="history__listItem">
|
||||
<strong class="history__listDate">5.15</strong>
|
||||
<span class="history__listText">현대홈쇼핑 리뉴얼 구축 계약</span>
|
||||
</li>
|
||||
<li class="history__listItem">
|
||||
<strong class="history__listDate">01.11</strong>
|
||||
<span class="history__listText">KONA I 헬스케어 구축 계약</span>
|
||||
</li>
|
||||
<li class="history__listItem">
|
||||
<strong class="history__listDate">01.11</strong>
|
||||
<span class="history__listText">유아이팩토리 설립</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="history__bottom">
|
||||
<div class="history__images">
|
||||
<img class="history__img history__img1" src="images/history-1.jpg" alt="">
|
||||
<img class="history__img history__img2" src="images/history-2.jpg" alt="">
|
||||
<img class="history__img history__img3" src="images/history-3.jpg" alt="">
|
||||
<img class="history__img history__img1" src="images/history-1.jpg" alt="" />
|
||||
<img class="history__img history__img2" src="images/history-2.jpg" alt="" />
|
||||
<img class="history__img history__img3" src="images/history-3.jpg" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
@ -145,14 +212,12 @@
|
|||
<div class="bodaIntro__content">
|
||||
<h2 class="bodaIntro__title">BODA Lab Co., Ltd.</h2>
|
||||
<p class="bodaIntro__desc">
|
||||
accurately identifies customer needs to<br class="breakLine">
|
||||
achieve the best completeness and satisfaction.<br class="breakLine">
|
||||
We are working on a project with talented<br class="breakLine">
|
||||
accurately identifies customer needs to<br class="breakLine" />
|
||||
achieve the best completeness and satisfaction.<br class="breakLine" />
|
||||
We are working on a project with talented<br class="breakLine" />
|
||||
people with high technology.
|
||||
</p>
|
||||
<a href="#vision" class="scrollDown scrollDownSm" aria-label="아래로 스크롤">
|
||||
<img src="images/icon-scroll-down.svg" alt="">
|
||||
</a>
|
||||
<a href="#vision" class="scrollDown scrollDownSm" aria-label="아래로 스크롤"><img src="images/icon-scroll-down.svg" alt="" /></a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
|
@ -162,28 +227,40 @@
|
|||
<div class="vision__item">
|
||||
<div class="vision__text">
|
||||
<em class="vision__keyword">Perspective</em>
|
||||
<p class="vision__textDesc">클라이언트의 고유한 가치를 발견하고<br class="breakLine">차별화된 디지털 경험을 설계합니다.</p>
|
||||
<p class="vision__textDesc">
|
||||
클라이언트의 고유한 가치를 발견하고
|
||||
<br class="breakLine" />
|
||||
차별화된 디지털 경험을 설계합니다.
|
||||
</p>
|
||||
</div>
|
||||
<div class="vision__image">
|
||||
<img class="vision__imageThumb" src="images/vision-1.jpg" alt="Uniqueness">
|
||||
<img class="vision__imageThumb" src="images/vision-1.jpg" alt="Uniqueness" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="vision__item vision__itemReverse">
|
||||
<div class="vision__image">
|
||||
<img class="vision__imageThumb" src="images/vision-2.jpg" alt="Expertise">
|
||||
<img class="vision__imageThumb" src="images/vision-2.jpg" alt="Expertise" />
|
||||
</div>
|
||||
<div class="vision__text">
|
||||
<em class="vision__keyword">Expertise</em>
|
||||
<p class="vision__textDesc">10년 이상의 기술 노하우를 기반으로<br class="breakLine">최적의 솔루션을 제공합니다.</p>
|
||||
<p class="vision__textDesc">
|
||||
10년 이상의 기술 노하우를 기반으로
|
||||
<br class="breakLine" />
|
||||
최적의 솔루션을 제공합니다.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="vision__item">
|
||||
<div class="vision__text">
|
||||
<em class="vision__keyword">Satisfaction</em>
|
||||
<p class="vision__textDesc">고객의 만족을 최우선 가치로 삼아<br class="breakLine">완성도 높은 결과물을 만듭니다.</p>
|
||||
<p class="vision__textDesc">
|
||||
고객의 만족을 최우선 가치로 삼아
|
||||
<br class="breakLine" />
|
||||
완성도 높은 결과물을 만듭니다.
|
||||
</p>
|
||||
</div>
|
||||
<div class="vision__image">
|
||||
<img class="vision__imageThumb" src="images/vision-3.jpg" alt="Satisfaction">
|
||||
<img class="vision__imageThumb" src="images/vision-3.jpg" alt="Satisfaction" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -195,107 +272,224 @@
|
|||
<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__thumb">
|
||||
<img class="project__thumbImg" 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>
|
||||
<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 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__thumb">
|
||||
<img class="project__thumbImg" 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>
|
||||
<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 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__thumb">
|
||||
<img class="project__thumbImg" 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>
|
||||
<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 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__thumb">
|
||||
<img class="project__thumbImg" 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>
|
||||
<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 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__thumb">
|
||||
<img class="project__thumbImg" 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>
|
||||
<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 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__thumb">
|
||||
<img class="project__thumbImg" 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>
|
||||
<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 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__thumb">
|
||||
<img class="project__thumbImg" 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>
|
||||
<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 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__thumb">
|
||||
<img class="project__thumbImg" 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>
|
||||
<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 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">
|
||||
<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>
|
||||
<div class="project__stack"><span class="project__tag">react</span><span class="project__tag">scss</span><span class="project__tag">typescript</span></div>
|
||||
<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">
|
||||
<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>
|
||||
<div class="project__stack"><span class="project__tag">html5</span><span class="project__tag">css3</span><span class="project__tag">typescript</span></div>
|
||||
<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">
|
||||
<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>
|
||||
<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 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">
|
||||
<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>
|
||||
<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 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">
|
||||
<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>
|
||||
<div class="project__stack"><span class="project__tag">html5</span><span class="project__tag">css3</span></div>
|
||||
<div class="project__stack">
|
||||
<span class="project__tag">html5</span>
|
||||
<span class="project__tag">css3</span>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
|
|
@ -309,7 +503,11 @@
|
|||
<section id="expertise" class="expertise">
|
||||
<div class="expertise__inner">
|
||||
<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">
|
||||
<li class="expertise__item">
|
||||
<span class="expertise__num">01</span>
|
||||
|
|
@ -339,17 +537,27 @@
|
|||
<section id="contact" class="contact">
|
||||
<div class="contact__inner">
|
||||
<div class="contact__left">
|
||||
<h2 class="contact__greeting">Welcome!<br><span class="contact__greetingBrand">BODA LAB</span></h2>
|
||||
<h2 class="contact__greeting">
|
||||
Welcome!
|
||||
<br />
|
||||
<span class="contact__greetingBrand">BODA LAB</span>
|
||||
</h2>
|
||||
<address class="contact__address">
|
||||
<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">서울특별시 금천구 가산디지털2로 169-16,<br>907호 (가산하우스디퍼스타)</dd>
|
||||
<dd class="contact__infoValue">
|
||||
서울특별시 금천구 가산디지털2로 169-16,
|
||||
<br />
|
||||
907호 (가산하우스디퍼스타)
|
||||
</dd>
|
||||
</div>
|
||||
<div class="contact__infoItem">
|
||||
<dt class="contact__infoLabel">e-mail</dt>
|
||||
<dd class="contact__infoValue"><a class="contact__infoLink" 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 class="contact__infoItem">
|
||||
<dt class="contact__infoLabel">tel</dt>
|
||||
|
|
@ -371,22 +579,22 @@
|
|||
<div class="contactAccordion__item is-open" id="acc-project">
|
||||
<button class="contactAccordion__header" aria-expanded="true" aria-controls="acc-project-body">
|
||||
<span>프로젝트 문의</span>
|
||||
<img class="contactAccordion__icon" src="images/icon-chevron.svg" alt="">
|
||||
<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__row">
|
||||
<input type="text" class="contactForm__input" placeholder="회사명">
|
||||
<input type="text" class="contactForm__input" placeholder="담당자 이름">
|
||||
<input type="text" class="contactForm__input" placeholder="회사명" />
|
||||
<input type="text" class="contactForm__input" placeholder="담당자 이름" />
|
||||
</div>
|
||||
<div class="contactForm__row">
|
||||
<input type="tel" class="contactForm__input" placeholder="연락처">
|
||||
<input type="email" 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 class="contactForm__agree">
|
||||
<label class="contactForm__checkbox">
|
||||
<input class="contactForm__checkboxInput" type="checkbox">
|
||||
<input class="contactForm__checkboxInput" type="checkbox" />
|
||||
<span class="contactForm__checkboxBox"></span>
|
||||
<span>개인정보보호정책에 동의합니다.</span>
|
||||
</label>
|
||||
|
|
@ -402,14 +610,34 @@
|
|||
<div class="contactAccordion__item" id="acc-career">
|
||||
<button class="contactAccordion__header" aria-expanded="false" aria-controls="acc-career-body">
|
||||
<span>채용</span>
|
||||
<img class="contactAccordion__icon" src="images/icon-chevron.svg" alt="">
|
||||
<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>
|
||||
<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>
|
||||
|
|
@ -417,17 +645,21 @@
|
|||
|
||||
<footer class="footer">
|
||||
<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">
|
||||
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>
|
||||
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>
|
||||
|
|
|
|||
|
|
@ -1,66 +1,64 @@
|
|||
import $ from 'jquery'
|
||||
import $ from "jquery";
|
||||
|
||||
$(function () {
|
||||
|
||||
const $gnb = $('#gnb');
|
||||
const $hamburger = $('.gnb__hamburger');
|
||||
const $mobileNav = $('.gnb__mobileNav');
|
||||
const $sections = $('section[id]');
|
||||
const $navLinks = $('.gnb__navItem');
|
||||
const $gnb = $("#gnb");
|
||||
const $hamburger = $(".gnb__hamburger");
|
||||
const $mobileNav = $(".gnb__mobileNav");
|
||||
const $sections = $("section[id]");
|
||||
const $navLinks = $(".gnb__navItem");
|
||||
|
||||
// GNB 스크롤 배경
|
||||
$(window).on('scroll.gnb', { passive: true }, function () {
|
||||
$gnb.toggleClass('is-scrolled', $(this).scrollTop() > 40);
|
||||
$(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);
|
||||
$hamburger.on("click", function () {
|
||||
const isOpen = $hamburger.toggleClass("is-open").hasClass("is-open");
|
||||
$hamburger.attr("aria-expanded", isOpen);
|
||||
$mobileNav.toggleClass("is-open", isOpen);
|
||||
});
|
||||
|
||||
// 모바일 메뉴 링크 클릭 시 닫기
|
||||
$('.gnb__mobileNavLink').on('click', function () {
|
||||
$hamburger.removeClass('is-open').attr('aria-expanded', false);
|
||||
$mobileNav.removeClass('is-open');
|
||||
$(".gnb__mobileNavLink").on("click", function () {
|
||||
$hamburger.removeClass("is-open").attr("aria-expanded", false);
|
||||
$mobileNav.removeClass("is-open");
|
||||
});
|
||||
|
||||
// 현재 섹션에 따라 GNB 활성화
|
||||
function updateActiveNav() {
|
||||
let current = '';
|
||||
let current = "";
|
||||
const scrollY = $(window).scrollTop() + $(window).height() / 3;
|
||||
|
||||
$sections.each(function () {
|
||||
if ($(this).offset().top <= scrollY) {
|
||||
current = $(this).attr('id');
|
||||
current = $(this).attr("id");
|
||||
}
|
||||
});
|
||||
|
||||
$navLinks.each(function () {
|
||||
const href = $(this).find('a').attr('href').replace('#', '');
|
||||
$(this).toggleClass('is-active', href === current);
|
||||
const href = $(this).find("a").attr("href").replace("#", "");
|
||||
$(this).toggleClass("is-active", href === current);
|
||||
});
|
||||
}
|
||||
|
||||
// Contact 아코디언
|
||||
$('.contactAccordion__header').on('click', function () {
|
||||
const $item = $(this).closest('.contactAccordion__item');
|
||||
const $body = $('#' + $(this).attr('aria-controls'));
|
||||
const isOpen = $item.hasClass('is-open');
|
||||
$(".contactAccordion__header").on("click", function () {
|
||||
const $item = $(this).closest(".contactAccordion__item");
|
||||
const $body = $("#" + $(this).attr("aria-controls"));
|
||||
const isOpen = $item.hasClass("is-open");
|
||||
|
||||
$item.toggleClass('is-open', !isOpen);
|
||||
$(this).attr('aria-expanded', !isOpen);
|
||||
$item.toggleClass("is-open", !isOpen);
|
||||
$(this).attr("aria-expanded", !isOpen);
|
||||
|
||||
if (isOpen) {
|
||||
$body.attr('hidden', '');
|
||||
$body.attr("hidden", "");
|
||||
} else {
|
||||
$body.removeAttr('hidden');
|
||||
$body.removeAttr("hidden");
|
||||
}
|
||||
});
|
||||
|
||||
// 초기 실행
|
||||
updateActiveNav();
|
||||
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,2 +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');
|
||||
@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");
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
@use 'variable' as *;
|
||||
@use "variable" as *;
|
||||
|
||||
@mixin mo {
|
||||
@media (max-width: #{$bp-mo}) {
|
||||
|
|
|
|||
|
|
@ -1,7 +1,9 @@
|
|||
@use 'variable' as *;
|
||||
@use 'mixin' as *;
|
||||
@use "variable" as *;
|
||||
@use "mixin" as *;
|
||||
|
||||
*, *::before, *::after {
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
|
@ -27,18 +29,22 @@ img {
|
|||
object-fit: cover;
|
||||
}
|
||||
|
||||
ul, ol { list-style: none; }
|
||||
ul,
|
||||
ol {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
address { font-style: normal; }
|
||||
address {
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
section {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.sectionTitle {
|
||||
|
|
@ -66,7 +72,9 @@ section {
|
|||
justify-content: center;
|
||||
transition: opacity 0.3s;
|
||||
|
||||
&:hover { opacity: 0.6; }
|
||||
&:hover {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
|
|
|
|||
|
|
@ -7,8 +7,8 @@ $color-white: #ffffff;
|
|||
$color-dark: #0d0d0d;
|
||||
$color-gray: #999;
|
||||
|
||||
$font-sans: 'SUIT Variable', 'SUIT', sans-serif;
|
||||
$font-serif: 'DM Serif Display', serif;
|
||||
$font-sans: "SUIT Variable", "SUIT", sans-serif;
|
||||
$font-serif: "DM Serif Display", serif;
|
||||
|
||||
$gnb-height: 80px;
|
||||
$gnb-height-mo: 60px;
|
||||
|
|
|
|||
|
|
@ -1,9 +1,10 @@
|
|||
// Base
|
||||
@use 'base/font';
|
||||
@use 'base/reset';
|
||||
@use "base/font";
|
||||
@use "base/reset";
|
||||
|
||||
// Pages
|
||||
@use 'page/home';
|
||||
@use 'page/about';
|
||||
@use 'page/projects';
|
||||
@use 'page/contact';
|
||||
@use "page/gnb";
|
||||
@use "page/intro";
|
||||
@use "page/about";
|
||||
@use "page/projects";
|
||||
@use "page/contact";
|
||||
|
|
|
|||
|
|
@ -1,41 +1,40 @@
|
|||
@use '../base/variable' as *;
|
||||
@use '../base/mixin' as *;
|
||||
@use "../base/variable" as *;
|
||||
@use "../base/mixin" as *;
|
||||
|
||||
// About
|
||||
.about {
|
||||
height: 100vh;
|
||||
height: 956px;
|
||||
background: $color-bg;
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.about__inner {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.about__text {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
width: 45%;
|
||||
padding: $gnb-height 48px 60px;
|
||||
gap: 80px;
|
||||
padding: 120px 16.7% 60px;
|
||||
|
||||
.sectionTitle {
|
||||
margin: 0 0 70px;
|
||||
}
|
||||
|
||||
.about__desc {
|
||||
.desc {
|
||||
padding: 0 0 0 80px;
|
||||
font-size: clamp(13px, 1.1vw, 16px);
|
||||
font-weight: 300;
|
||||
line-height: 1.8;
|
||||
color: $color-white;
|
||||
opacity: 0.9;
|
||||
}
|
||||
}
|
||||
|
||||
.about__image {
|
||||
position: relative;
|
||||
width: 55%;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
top: 229px;
|
||||
right: 0;
|
||||
width: 42%;
|
||||
}
|
||||
|
||||
.about__imageThumb {
|
||||
|
|
@ -47,17 +46,35 @@
|
|||
|
||||
.about__caption {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
bottom: 120px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding: 20px 24px;
|
||||
padding: 0;
|
||||
background: linear-gradient(to top, rgba($color-bg, 0.7) 0%, transparent 100%);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.about__captionTrack {
|
||||
display: flex;
|
||||
width: max-content;
|
||||
animation: marquee 18s linear infinite;
|
||||
}
|
||||
|
||||
.about__captionText {
|
||||
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;
|
||||
padding-right: 80px;
|
||||
}
|
||||
|
||||
@keyframes marquee {
|
||||
from {
|
||||
transform: translateX(0);
|
||||
}
|
||||
to {
|
||||
transform: translateX(-25%);
|
||||
}
|
||||
}
|
||||
|
||||
// History
|
||||
|
|
@ -266,7 +283,9 @@
|
|||
flex-direction: column;
|
||||
}
|
||||
|
||||
.about__inner { flex-direction: column; }
|
||||
.about__inner {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.about__text {
|
||||
width: 100%;
|
||||
|
|
@ -285,29 +304,48 @@
|
|||
padding: 16px;
|
||||
}
|
||||
|
||||
.breakLine { display: none; }
|
||||
.breakLine {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.history__top { padding: 60px 24px 40px; }
|
||||
.history__top {
|
||||
padding: 60px 24px 40px;
|
||||
}
|
||||
|
||||
.history__top .sectionTitleDark { margin-bottom: 32px; }
|
||||
.history__top .sectionTitleDark {
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.history__timeline {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 40px 20px;
|
||||
}
|
||||
|
||||
.history__bottom { padding: 0 24px 60px; }
|
||||
.history__bottom {
|
||||
padding: 0 24px 60px;
|
||||
}
|
||||
|
||||
.history__images {
|
||||
height: 260px;
|
||||
margin-top: -40px;
|
||||
}
|
||||
|
||||
.history__img1 { width: 120px; height: 80px; }
|
||||
.history__img1 {
|
||||
width: 120px;
|
||||
height: 80px;
|
||||
}
|
||||
|
||||
.history__img2 { width: 180px; height: 200px; left: 50%; }
|
||||
.history__img2 {
|
||||
width: 180px;
|
||||
height: 200px;
|
||||
left: 50%;
|
||||
}
|
||||
|
||||
.history__img3 { width: 130px; height: 90px; bottom: 20px; }
|
||||
.history__img3 {
|
||||
width: 130px;
|
||||
height: 90px;
|
||||
bottom: 20px;
|
||||
}
|
||||
|
||||
.bodaIntro {
|
||||
min-height: 100vh;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
@use '../base/variable' as *;
|
||||
@use '../base/mixin' as *;
|
||||
@use "../base/variable" as *;
|
||||
@use "../base/mixin" as *;
|
||||
|
||||
// Expertise
|
||||
.expertise {
|
||||
|
|
@ -32,7 +32,9 @@
|
|||
padding: 40px 32px 40px 0;
|
||||
border-right: 1px solid rgba($color-white, 0.12);
|
||||
|
||||
&:last-child { border-right: none; }
|
||||
&:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
}
|
||||
|
||||
.expertise__num {
|
||||
|
|
@ -143,7 +145,9 @@
|
|||
color: inherit;
|
||||
transition: opacity 0.2s;
|
||||
|
||||
&:hover { opacity: 0.7; }
|
||||
&:hover {
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
|
||||
.contact__right {
|
||||
|
|
@ -158,7 +162,7 @@
|
|||
.contact__map {
|
||||
width: 100%;
|
||||
aspect-ratio: 4 / 3;
|
||||
background: #1a1a1a url('../../images/map.svg') center / cover no-repeat;
|
||||
background: #1a1a1a url("../../images/map.svg") center / cover no-repeat;
|
||||
border: 1px solid rgba($color-white, 0.1);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
|
@ -188,7 +192,9 @@
|
|||
text-align: left;
|
||||
transition: opacity 0.2s;
|
||||
|
||||
&:hover { opacity: 0.7; }
|
||||
&:hover {
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
|
||||
.contactAccordion__icon {
|
||||
|
|
@ -208,7 +214,9 @@
|
|||
max-height: 0;
|
||||
transition: max-height 0.4s ease;
|
||||
|
||||
&:not([hidden]) { max-height: 800px; }
|
||||
&:not([hidden]) {
|
||||
max-height: 800px;
|
||||
}
|
||||
|
||||
&[hidden] {
|
||||
display: block !important;
|
||||
|
|
@ -243,8 +251,12 @@
|
|||
outline: none;
|
||||
transition: border-color 0.2s;
|
||||
|
||||
&::placeholder { color: rgba($color-white, 0.35); }
|
||||
&:focus { border-color: rgba($color-white, 0.3); }
|
||||
&::placeholder {
|
||||
color: rgba($color-white, 0.35);
|
||||
}
|
||||
&:focus {
|
||||
border-color: rgba($color-white, 0.3);
|
||||
}
|
||||
}
|
||||
|
||||
.contactForm__textarea {
|
||||
|
|
@ -276,7 +288,7 @@
|
|||
}
|
||||
|
||||
.contactForm__checkboxInput:checked + .contactForm__checkboxBox::after {
|
||||
content: '';
|
||||
content: "";
|
||||
display: block;
|
||||
width: 10px;
|
||||
height: 6px;
|
||||
|
|
@ -293,7 +305,9 @@
|
|||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: background 0.2s, border-color 0.2s;
|
||||
transition:
|
||||
background 0.2s,
|
||||
border-color 0.2s;
|
||||
}
|
||||
|
||||
.contactForm__submit {
|
||||
|
|
@ -315,7 +329,9 @@
|
|||
cursor: pointer;
|
||||
transition: opacity 0.2s;
|
||||
|
||||
&:hover { opacity: 0.8; }
|
||||
&:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
|
||||
// 채용 태그
|
||||
|
|
@ -336,7 +352,9 @@
|
|||
font-size: 14px;
|
||||
font-weight: 300;
|
||||
color: $color-white;
|
||||
transition: border-color 0.2s, color 0.2s;
|
||||
transition:
|
||||
border-color 0.2s,
|
||||
color 0.2s;
|
||||
|
||||
&:hover {
|
||||
border-color: $color-cyan;
|
||||
|
|
@ -383,7 +401,9 @@
|
|||
color: rgba($color-white, 0.5);
|
||||
transition: color 0.2s;
|
||||
|
||||
&:hover { color: $color-white; }
|
||||
&:hover {
|
||||
color: $color-white;
|
||||
}
|
||||
}
|
||||
|
||||
.footer__copy {
|
||||
|
|
@ -394,25 +414,35 @@
|
|||
}
|
||||
|
||||
@include mo {
|
||||
.expertise { padding: 60px 24px; }
|
||||
.expertise {
|
||||
padding: 60px 24px;
|
||||
}
|
||||
|
||||
.expertise__desc {
|
||||
margin-bottom: 40px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.expertise__list { grid-template-columns: 1fr 1fr; }
|
||||
.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); }
|
||||
&:last-child {
|
||||
border-right: 1px solid rgba($color-white, 0.12);
|
||||
}
|
||||
|
||||
&:nth-child(2),
|
||||
&:nth-child(4) { border-right: none; }
|
||||
&:nth-child(4) {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
&:nth-child(3),
|
||||
&:nth-child(4) { border-top: 1px solid rgba($color-white, 0.12); }
|
||||
&:nth-child(4) {
|
||||
border-top: 1px solid rgba($color-white, 0.12);
|
||||
}
|
||||
}
|
||||
|
||||
.contact__inner {
|
||||
|
|
@ -431,15 +461,25 @@
|
|||
padding: 0 24px 60px;
|
||||
}
|
||||
|
||||
.contactAccordion__header { padding: 22px 24px; }
|
||||
.contactAccordion__header {
|
||||
padding: 22px 24px;
|
||||
}
|
||||
|
||||
.contactForm { padding: 8px 24px 40px; }
|
||||
.contactForm {
|
||||
padding: 8px 24px 40px;
|
||||
}
|
||||
|
||||
.contactForm__row { grid-template-columns: 1fr; }
|
||||
.contactForm__row {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.careerTags { padding: 8px 24px 40px; }
|
||||
.careerTags {
|
||||
padding: 8px 24px 40px;
|
||||
}
|
||||
|
||||
.footer { padding: 24px 20px; }
|
||||
.footer {
|
||||
padding: 24px 20px;
|
||||
}
|
||||
|
||||
.footer__inner {
|
||||
flex-direction: column;
|
||||
|
|
@ -447,5 +487,7 @@
|
|||
gap: 20px;
|
||||
}
|
||||
|
||||
.footer__contact { font-size: 12px; }
|
||||
.footer__contact {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,138 @@
|
|||
@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);
|
||||
}
|
||||
}
|
||||
|
||||
.gnb__inner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 100%;
|
||||
padding: 0 48px;
|
||||
}
|
||||
|
||||
.gnb__logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.gnb__logoImg {
|
||||
width: 90px;
|
||||
height: auto;
|
||||
object-fit: unset;
|
||||
}
|
||||
|
||||
.gnb__nav {
|
||||
// nav block — layout only
|
||||
}
|
||||
|
||||
.gnb__navList {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.gnb__navItem {
|
||||
// list item — no extra styles needed
|
||||
}
|
||||
|
||||
.gnb__navLink {
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
.gnb__navItem.is-active .gnb__navLink {
|
||||
color: $color-cyan;
|
||||
}
|
||||
|
||||
.gnb__hamburger {
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
gap: 5px;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.gnb__hamburgerLine {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background: $color-white;
|
||||
transition:
|
||||
transform 0.3s,
|
||||
opacity 0.3s;
|
||||
}
|
||||
|
||||
.gnb__hamburger.is-open .gnb__hamburgerLine:nth-child(1) {
|
||||
transform: translateY(6px) rotate(45deg);
|
||||
}
|
||||
.gnb__hamburger.is-open .gnb__hamburgerLine:nth-child(2) {
|
||||
opacity: 0;
|
||||
}
|
||||
.gnb__hamburger.is-open .gnb__hamburgerLine:nth-child(3) {
|
||||
transform: translateY(-6px) rotate(-45deg);
|
||||
}
|
||||
|
||||
.gnb__mobileNav {
|
||||
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;
|
||||
|
||||
&.is-open {
|
||||
transform: translateY(0);
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.gnb__mobileNavList {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.gnb__mobileNavLink {
|
||||
display: block;
|
||||
padding: 14px 24px;
|
||||
font-size: 18px;
|
||||
font-weight: 400;
|
||||
letter-spacing: 0.05em;
|
||||
color: $color-white;
|
||||
}
|
||||
|
|
@ -1,231 +0,0 @@
|
|||
@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);
|
||||
}
|
||||
}
|
||||
|
||||
.gnb__inner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 100%;
|
||||
padding: 0 48px;
|
||||
}
|
||||
|
||||
.gnb__logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.gnb__logoImg {
|
||||
width: 90px;
|
||||
height: auto;
|
||||
object-fit: unset;
|
||||
}
|
||||
|
||||
.gnb__nav {
|
||||
// nav block — layout only
|
||||
}
|
||||
|
||||
.gnb__navList {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.gnb__navItem {
|
||||
// list item — no extra styles needed
|
||||
}
|
||||
|
||||
.gnb__navLink {
|
||||
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; }
|
||||
}
|
||||
|
||||
.gnb__navItem.is-active .gnb__navLink {
|
||||
color: $color-cyan;
|
||||
}
|
||||
|
||||
.gnb__hamburger {
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
gap: 5px;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.gnb__hamburgerLine {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background: $color-white;
|
||||
transition: transform 0.3s, opacity 0.3s;
|
||||
}
|
||||
|
||||
.gnb__hamburger.is-open .gnb__hamburgerLine:nth-child(1) { transform: translateY(6px) rotate(45deg); }
|
||||
.gnb__hamburger.is-open .gnb__hamburgerLine:nth-child(2) { opacity: 0; }
|
||||
.gnb__hamburger.is-open .gnb__hamburgerLine:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
|
||||
|
||||
.gnb__mobileNav {
|
||||
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;
|
||||
|
||||
&.is-open {
|
||||
transform: translateY(0);
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.gnb__mobileNavList {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.gnb__mobileNavLink {
|
||||
display: block;
|
||||
padding: 14px 24px;
|
||||
font-size: 18px;
|
||||
font-weight: 400;
|
||||
letter-spacing: 0.05em;
|
||||
color: $color-white;
|
||||
}
|
||||
|
||||
// Intro
|
||||
.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;
|
||||
}
|
||||
|
||||
.blobCyan {
|
||||
width: 56vw;
|
||||
height: 56vw;
|
||||
background: $color-cyan;
|
||||
top: -10%;
|
||||
right: -10%;
|
||||
}
|
||||
|
||||
.blobPurple {
|
||||
width: 32vw;
|
||||
height: 32vw;
|
||||
background: $color-purple;
|
||||
top: 15%;
|
||||
left: 5%;
|
||||
}
|
||||
|
||||
.blobBlue {
|
||||
width: 24vw;
|
||||
height: 24vw;
|
||||
background: $color-blue;
|
||||
bottom: 10%;
|
||||
left: -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;
|
||||
}
|
||||
|
||||
@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%;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,113 @@
|
|||
@use "../base/variable" as *;
|
||||
@use "../base/mixin" as *;
|
||||
|
||||
// Intro
|
||||
.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;
|
||||
}
|
||||
|
||||
.blobCyan {
|
||||
width: 56vw;
|
||||
height: 56vw;
|
||||
background: $color-cyan;
|
||||
top: -10%;
|
||||
right: -10%;
|
||||
}
|
||||
|
||||
.blobPurple {
|
||||
width: 32vw;
|
||||
height: 32vw;
|
||||
background: $color-purple;
|
||||
top: 15%;
|
||||
left: 5%;
|
||||
}
|
||||
|
||||
.blobBlue {
|
||||
width: 24vw;
|
||||
height: 24vw;
|
||||
background: $color-blue;
|
||||
bottom: 10%;
|
||||
left: -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;
|
||||
}
|
||||
|
||||
@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%;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
@use '../base/variable' as *;
|
||||
@use '../base/mixin' as *;
|
||||
@use "../base/variable" as *;
|
||||
@use "../base/mixin" as *;
|
||||
|
||||
.project {
|
||||
background: $color-bg;
|
||||
|
|
@ -119,7 +119,10 @@
|
|||
font-weight: 400;
|
||||
letter-spacing: 0.1em;
|
||||
color: $color-white;
|
||||
transition: background 0.3s, border-color 0.3s, color 0.3s;
|
||||
transition:
|
||||
background 0.3s,
|
||||
border-color 0.3s,
|
||||
color 0.3s;
|
||||
|
||||
&:hover {
|
||||
background: $color-white;
|
||||
|
|
@ -129,14 +132,20 @@
|
|||
}
|
||||
|
||||
@include mo {
|
||||
.project { padding: 60px 20px; }
|
||||
.project {
|
||||
padding: 60px 20px;
|
||||
}
|
||||
|
||||
.project__heading { margin-bottom: 36px; }
|
||||
.project__heading {
|
||||
margin-bottom: 36px;
|
||||
}
|
||||
|
||||
.project__grid {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 32px;
|
||||
}
|
||||
|
||||
.project__more { margin-top: 48px; }
|
||||
.project__more {
|
||||
margin-top: 48px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue