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

fix: about

This commit is contained in:
이희원 2026-06-19 13:26:09 +09:00
parent 5bfe6256aa
commit 57aac808e8
8 changed files with 133 additions and 89 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/images/history-1.jpg
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 627 KiB

After

Width:  |  Height:  |  Size: 25 KiB

BIN
src/images/history-2.jpg
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 869 KiB

After

Width:  |  Height:  |  Size: 145 KiB

BIN
src/images/history-3.jpg
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.3 MiB

After

Width:  |  Height:  |  Size: 79 KiB

7
src/images/icon-scroll-down.svg
View File

@ -1,5 +1,4 @@
<svg viewBox="0 0 72 72" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="36" cy="36" r="35.5" stroke="white"/>
<path d="M28 31L36 40L44 31" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M36 25L36 40" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
<svg width="72" height="72" viewBox="0 0 72 72" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="36" cy="36" r="35.5" stroke="white"/>
<path d="M36 24V48M28.5 40.7273L36 48L43.5 40.7273" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 330 B

After

Width:  |  Height:  |  Size: 269 B

83
src/index.html
View File

@ -44,18 +44,22 @@
<main>
<!-- 01. INTRO -->
<section id="intro" class="intro">
<div class="intro__blobs" aria-hidden="true">
<span class="blob blobCyan"></span>
<span class="blob blobPurple"></span>
<span class="blob blobBlue"></span>
<div class="blob blobCyan"></div>
<div class="blob blobPurple"></div>
<div class="blob blobBlue"></div>
</div>
<div class="intro__content">
<p class="intro__sub">Creative Development Company</p>
<h1 class="intro__title">THE BODA LAB</h1>
</div>
<a href="#about" class="scrollDown" aria-label="아래로 스크롤">
<img src="images/icon-scroll-down.svg" alt="" />
</a>
</section>
<!-- 02. ABOUT -->
@ -88,9 +92,9 @@
<div class="history__top">
<h2 class="sectionTitle sectionTitleDark">HISTORY</h2>
<div class="history__timeline">
<div class="history__yearGroup">
<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>
@ -110,9 +114,9 @@
</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>
@ -140,9 +144,9 @@
</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>
@ -166,9 +170,65 @@
</li>
</ul>
</div>
<div class="history__yearGroup">
<span class="history__year">2023</span>
<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>
</ul>
</div>
<div class="history__yearGroup">
<span class="history__year">2022</span>
<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>
</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>
@ -196,14 +256,13 @@
</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="" />
</div>
<img class="history__img history__img--1" src="images/history-1.jpg" alt="" />
<img class="history__img history__img--2" src="images/history-2.jpg" alt="" />
<img class="history__img history__img--3" src="images/history-3.jpg" alt="" />
</div>
</section>

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

@ -25,7 +25,6 @@ body {
img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}

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

@ -79,22 +79,24 @@
// History
.history {
background: $color-bg;
background: $color-bg-light;
padding: 0 0 0;
}
.history__top {
background: $color-bg-light;
padding: 80px 48px 60px;
max-width: 1280px;
padding: 120px 40px 120px;
margin: 0 auto;
}
.history__top .sectionTitleDark {
margin-bottom: 48px;
margin-bottom: 88px;
}
.history__timeline {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0 24px;
grid-template-columns: repeat(3, 1fr);
gap: 60px 24px;
}
.history__yearGroup {
@ -106,23 +108,16 @@
font-size: clamp(24px, 2.5vw, 32px);
font-weight: 100;
color: $color-dark;
margin-bottom: 16px;
margin-bottom: 32px;
line-height: 1;
}
.history__divider {
width: 0.5px;
background: $color-dark;
align-self: flex-start;
height: 0;
margin-bottom: 16px;
opacity: 0.4;
}
.history__list {
display: flex;
flex-direction: column;
gap: 16px;
gap: 12px;
border-left: 1px solid #0d0d0d;
padding: 0 0 0 23px;
}
.history__listItem {
@ -139,49 +134,40 @@
}
.history__listText {
font-size: clamp(12px, 1vw, 14px);
font-size: clamp(12px, 1vw, 16px);
font-weight: 300;
color: $color-dark;
line-height: 1.6;
}
.history__bottom {
background: $color-bg;
padding: 0 48px 80px;
overflow: hidden;
}
.history__images {
position: relative;
height: 400px;
margin-top: -80px;
background: $color-bg;
height: 480px;
}
.history__img {
position: absolute;
object-fit: cover;
}
.history__img1 {
width: 260px;
height: 170px;
left: 0;
bottom: 0;
}
&.history__img--1 {
width: 16.67%;
top: 0px;
left: 0;
}
.history__img2 {
width: 370px;
height: 400px;
left: 50%;
transform: translateX(-50%);
top: 0;
}
&.history__img--2 {
width: 27.1%;
left: 50%;
transform: translateX(-50%);
top: -60px;
}
.history__img3 {
width: 300px;
height: 190px;
right: 0;
bottom: 40px;
&.history__img--3 {
width: 18.23%;
top: 0px;
left: 0;
}
}
// Boda Intro

55
src/scss/page/_intro.scss
View File

@ -16,37 +16,38 @@
inset: 0;
pointer-events: none;
overflow: hidden;
}
.blob {
position: absolute;
border-radius: 50%;
filter: blur(120px);
opacity: 0.55;
}
.blob {
position: absolute;
border-radius: 50%;
filter: blur(60px);
opacity: 0.5;
}
.blobCyan {
width: 56vw;
height: 56vw;
background: $color-cyan;
top: -10%;
right: -10%;
}
.blobCyan {
width: 20vw;
height: 20vw;
background: $color-cyan;
top: 50%;
right: 20%;
transform: translateY(-50%);
}
.blobPurple {
width: 32vw;
height: 32vw;
background: $color-purple;
top: 15%;
left: 5%;
}
.blobPurple {
width: 10vw;
height: 10vw;
background: $color-purple;
top: 40%;
left: 50%;
}
.blobBlue {
width: 24vw;
height: 24vw;
background: $color-blue;
bottom: 10%;
left: -5%;
.blobBlue {
width: 10vw;
height: 10vw;
background: $color-blue;
top: 42%;
left: 30%;
}
}
.intro__content {