웹 메인페이지 풋터 및 레이아웃 간격 스크롤 수정
This commit is contained in:
sungro815
parent
7f61430b40
commit
72718fa852
@ -158,8 +158,26 @@ h1, h2, h3, h4, h5, h6 {
|
||||
}
|
||||
|
||||
.text-h1 { font-size: 32px; line-height: 40px; }
|
||||
.text-h2 { font-size: 22px; line-height: 28px; font-weight: 600; }
|
||||
.text-body { font-size: 16px; }
|
||||
.text-h2 {
|
||||
margin: 0;
|
||||
font-size: 15px; /* 여기서 더 줄이고 싶으면 15px */
|
||||
line-height: 22px;
|
||||
font-weight: 800;
|
||||
color: #111827;
|
||||
letter-spacing: -0.2px;
|
||||
}
|
||||
.text-h2::before{
|
||||
content: none !important;
|
||||
}
|
||||
.text-body{
|
||||
margin: 0;
|
||||
font-size: 14px; /* 원래 크기 */
|
||||
line-height: 20px;
|
||||
color: #6B7280;
|
||||
white-space: normal;
|
||||
overflow: visible;
|
||||
text-overflow: clip;
|
||||
}
|
||||
.text-sm { font-size: 14px; }
|
||||
.text-xs { font-size: 12px; }
|
||||
|
||||
@ -473,20 +491,51 @@ h1, h2, h3, h4, h5, h6 {
|
||||
}
|
||||
|
||||
/* Sections */
|
||||
.section {
|
||||
padding: 60px 0;
|
||||
.section{
|
||||
padding: 25px 0; /* 더 타이트 */
|
||||
}
|
||||
.section + .section{
|
||||
padding-top: 16px; /* 섹션 사이 과한 간격 제거 */
|
||||
}
|
||||
|
||||
.section-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-end;
|
||||
margin-bottom: 24px;
|
||||
.section-header{
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.section-title h2 {
|
||||
font-size: 28px;
|
||||
margin-bottom: 8px;
|
||||
.section-title{
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
gap: 12px !important;
|
||||
flex-wrap: nowrap !important;
|
||||
min-width: 0 !important;
|
||||
}
|
||||
|
||||
.section-title .text-h2{
|
||||
margin: 0 !important;
|
||||
font-size: 22px !important;
|
||||
line-height: 22px !important;
|
||||
font-weight: 800 !important;
|
||||
color: #111827 !important;
|
||||
|
||||
white-space: nowrap !important;
|
||||
overflow: hidden !important;
|
||||
text-overflow: clip !important;
|
||||
flex: 0 0 auto !important;
|
||||
}
|
||||
.section-title .text-h2::before{
|
||||
content: none !important;
|
||||
}
|
||||
.section-title .text-body{
|
||||
margin: 0 !important;
|
||||
font-size: 14px !important;
|
||||
line-height: 20px !important;
|
||||
color: #6B7280 !important;
|
||||
|
||||
min-width: 0 !important;
|
||||
white-space: nowrap !important;
|
||||
overflow: hidden !important;
|
||||
text-overflow: clip !important;
|
||||
flex: 1 1 auto !important;
|
||||
}
|
||||
|
||||
.section-title p {
|
||||
@ -494,21 +543,45 @@ h1, h2, h3, h4, h5, h6 {
|
||||
}
|
||||
|
||||
/* Snap Carousel (Monthly Deals) */
|
||||
.snap-carousel {
|
||||
display: flex;
|
||||
gap: 24px;
|
||||
overflow-x: auto;
|
||||
scroll-snap-type: x mandatory;
|
||||
padding-bottom: 24px; /* for shadow */
|
||||
scrollbar-width: none;
|
||||
.snap-carousel{
|
||||
display:flex;
|
||||
gap:16px;
|
||||
overflow-x:auto;
|
||||
overflow-y:hidden;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
.snap-carousel > *{
|
||||
scroll-snap-align: start; /* 원치 않으면 삭제 */
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
.snap-carousel::-webkit-scrollbar { display: none; }
|
||||
|
||||
.snap-item {
|
||||
scroll-snap-align: start;
|
||||
.snap-carousel::-webkit-scrollbar{ height: 8px; }
|
||||
.snap-carousel::-webkit-scrollbar-thumb{ background: rgba(0,0,0,.15); border-radius: 999px; }
|
||||
|
||||
.snap-item{
|
||||
flex: 0 0 280px;
|
||||
}
|
||||
|
||||
#popular .snap-item{
|
||||
flex-basis: 200px;
|
||||
}
|
||||
|
||||
.snap-carousel{
|
||||
scrollbar-width: thin; /* Firefox */
|
||||
}
|
||||
.snap-carousel::-webkit-scrollbar{
|
||||
height: 8px;
|
||||
}
|
||||
.snap-carousel::-webkit-scrollbar-thumb{
|
||||
background: rgba(0,0,0,.15);
|
||||
border-radius: 999px;
|
||||
}
|
||||
.snap-carousel::-webkit-scrollbar-track{
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
|
||||
/* Filter Tabs */
|
||||
.filter-tabs {
|
||||
display: flex;
|
||||
@ -621,6 +694,7 @@ h1, h2, h3, h4, h5, h6 {
|
||||
.tag-green{ background:#ECFDF5; border-color:#A7F3D0; color:#047857; }
|
||||
.tag-sky{ background:#F0F9FF; border-color:#BAE6FD; color:#0369A1; }
|
||||
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.logo-img{
|
||||
height: 34px; /* 모바일에선 낮춰서 공간 확보 */
|
||||
@ -655,6 +729,13 @@ h1, h2, h3, h4, h5, h6 {
|
||||
padding:0 12px;
|
||||
font-size:12.5px;
|
||||
}
|
||||
|
||||
.section-title .text-h2{ font-size: 15px !important; }
|
||||
.section-title .text-body{ font-size: 13px !important; }
|
||||
|
||||
.text-body{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -672,9 +753,9 @@ h1, h2, h3, h4, h5, h6 {
|
||||
|
||||
.hero-title { font-size: 28px; }
|
||||
|
||||
.search-bar {
|
||||
display: none; /* Handle mobile search differently */
|
||||
}
|
||||
/* .search-bar {
|
||||
display: none; !* Handle mobile search differently *!
|
||||
}*/
|
||||
|
||||
.footer-grid {
|
||||
grid-template-columns: 1fr;
|
||||
@ -686,3 +767,154 @@ h1, h2, h3, h4, h5, h6 {
|
||||
padding-right: 24px;
|
||||
}
|
||||
}
|
||||
/* ===== Footer: modern & clean (light) ===== */
|
||||
.site-footer{
|
||||
background:#F8FAFC;
|
||||
border-top: 1px solid #E5E7EB;
|
||||
padding: 44px 0 28px;
|
||||
margin-top: 48px;
|
||||
color:#0F172A;
|
||||
}
|
||||
|
||||
.footer-top{
|
||||
display:grid;
|
||||
grid-template-columns: 1.2fr 0.8fr 1fr 1fr;
|
||||
gap: 28px;
|
||||
align-items:start;
|
||||
}
|
||||
|
||||
.footer-title{
|
||||
font-size: 13px;
|
||||
font-weight: 800;
|
||||
margin-bottom: 12px;
|
||||
color:#0F172A;
|
||||
}
|
||||
|
||||
.footer-brand-logo{ display:inline-flex; align-items:center; }
|
||||
.footer-logo-img{ height: 50px; width:auto; display:block; }
|
||||
|
||||
.footer-desc{
|
||||
margin-top: 10px;
|
||||
font-size: 13px;
|
||||
line-height: 1.6;
|
||||
color:#64748B;
|
||||
}
|
||||
|
||||
.footer-copy{
|
||||
margin-top: 14px;
|
||||
font-size: 12px;
|
||||
color:#94A3B8;
|
||||
}
|
||||
|
||||
.footer-link-list{ display:flex; flex-direction:column; gap: 10px; }
|
||||
.footer-link{
|
||||
color:#475569;
|
||||
font-size: 13px;
|
||||
}
|
||||
.footer-link:hover{ color:#2563EB; }
|
||||
.footer-link-strong{ font-weight: 800; color:#111827; }
|
||||
|
||||
/* contact KV */
|
||||
.footer-kv{ display:flex; flex-direction:column; gap: 10px; }
|
||||
.footer-kv-row{
|
||||
display:grid;
|
||||
grid-template-columns: 72px 1fr;
|
||||
gap: 10px;
|
||||
font-size: 13px;
|
||||
color:#475569;
|
||||
}
|
||||
.footer-k{ color:#94A3B8; }
|
||||
.footer-v{ color:#334155; }
|
||||
|
||||
/* payment */
|
||||
.footer-payment-col .footer-payment{
|
||||
display:flex;
|
||||
flex-direction:column;
|
||||
gap: 8px;
|
||||
}
|
||||
.footer-payment--mt{ margin-top: 14px; }
|
||||
|
||||
.footer-pay-img{
|
||||
width:auto;
|
||||
max-width: 100%;
|
||||
height:auto;
|
||||
display:block;
|
||||
}
|
||||
|
||||
.footer-pay-caption{
|
||||
font-size: 12px;
|
||||
color:#64748B;
|
||||
}
|
||||
|
||||
/* divider */
|
||||
.footer-divider{
|
||||
height:1px;
|
||||
background:#E5E7EB;
|
||||
margin: 24px 0 16px;
|
||||
}
|
||||
|
||||
/* bottom details */
|
||||
.footer-details{
|
||||
background:#FFFFFF;
|
||||
border: 1px solid #E5E7EB;
|
||||
border-radius: 14px;
|
||||
padding: 12px 14px;
|
||||
}
|
||||
|
||||
.footer-summary{
|
||||
cursor:pointer;
|
||||
font-size: 13px;
|
||||
font-weight: 800;
|
||||
color:#111827;
|
||||
display:flex;
|
||||
align-items:center;
|
||||
justify-content:space-between;
|
||||
gap: 12px;
|
||||
list-style:none;
|
||||
}
|
||||
|
||||
.footer-summary::-webkit-details-marker{ display:none; }
|
||||
|
||||
.footer-summary-hint{
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
color:#2563EB;
|
||||
}
|
||||
|
||||
.footer-details[open] .footer-summary-hint{
|
||||
color:#64748B;
|
||||
}
|
||||
|
||||
.footer-info{
|
||||
margin-top: 12px;
|
||||
display:grid;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.footer-info-row{
|
||||
display:grid;
|
||||
grid-template-columns: 130px 1fr;
|
||||
gap: 12px;
|
||||
font-size: 12.5px;
|
||||
color:#475569;
|
||||
}
|
||||
.footer-info-row span{ color:#94A3B8; }
|
||||
.footer-info-row b{ color:#334155; font-weight:700; }
|
||||
|
||||
/* responsive */
|
||||
@media (max-width: 1024px){
|
||||
.footer-top{
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 560px){
|
||||
.footer-top{
|
||||
grid-template-columns: 1fr;
|
||||
gap: 20px;
|
||||
}
|
||||
.footer-info-row{
|
||||
grid-template-columns: 1fr;
|
||||
gap: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -125,5 +125,4 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
alert('모바일 메뉴 드로어 열림 (구현 예정)');
|
||||
});
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
@ -1,38 +1,100 @@
|
||||
<footer class="site-footer">
|
||||
<div class="container footer-grid">
|
||||
<!-- Col 1: Brand -->
|
||||
<div>
|
||||
<div style="font-size: 20px; font-weight: 700; color: white; margin-bottom: 16px;">GIFTICON</div>
|
||||
<p style="font-size: 14px; color: #9CA3AF; line-height: 1.6;">
|
||||
대한민국 1등 상품권 거래소.<br>
|
||||
안전하고 빠른 거래를 약속드립니다.
|
||||
</p>
|
||||
<div style="margin-top: 24px; font-size: 12px; color: #6B7280;">
|
||||
© 2024 Gifticon Corp. All rights reserved.
|
||||
<div class="container">
|
||||
|
||||
{{-- Top --}}
|
||||
<div class="footer-top">
|
||||
{{-- Brand --}}
|
||||
<div class="footer-brand">
|
||||
<a href="{{ url('/') }}" class="footer-brand-logo" aria-label="홈으로">
|
||||
<img src="{{ asset('assets/images/common/bottom_logo.png') }}"
|
||||
alt="PIN FOR YOU"
|
||||
class="footer-logo-img">
|
||||
</a>
|
||||
|
||||
<p class="footer-desc">
|
||||
대한민국 1등 상품권 거래소.<br>
|
||||
안전하고 빠른 거래를 약속드립니다.
|
||||
</p>
|
||||
|
||||
<div class="footer-copy">
|
||||
© 2018 plusmaker Corp. All rights reserved.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- Links --}}
|
||||
<div class="footer-links">
|
||||
<h4 class="footer-title">고객지원</h4>
|
||||
<div class="footer-link-list">
|
||||
<a href="#" class="footer-link">공지사항</a>
|
||||
<a href="#" class="footer-link">자주 묻는 질문</a>
|
||||
<a href="#" class="footer-link">1:1 문의</a>
|
||||
<a href="#" class="footer-link">이용약관</a>
|
||||
<a href="#" class="footer-link footer-link-strong">개인정보처리방침</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- Contact --}}
|
||||
<div class="footer-contact">
|
||||
<h4 class="footer-title">Contact</h4>
|
||||
<div class="footer-kv">
|
||||
<div class="footer-kv-row">
|
||||
<span class="footer-k">고객센터</span>
|
||||
<span class="footer-v">1833-4856</span>
|
||||
</div>
|
||||
<div class="footer-kv-row">
|
||||
<span class="footer-k">운영시간</span>
|
||||
<span class="footer-v">평일 09:00 - 18:00</span>
|
||||
</div>
|
||||
<div class="footer-kv-row">
|
||||
<span class="footer-k">메일</span>
|
||||
<span class="footer-v">master@plusmaker.co.kr</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- Payment --}}
|
||||
<div class="footer-payment-col">
|
||||
<h4 class="footer-title">Payment</h4>
|
||||
|
||||
<div class="footer-payment">
|
||||
<img class="footer-pay-img"
|
||||
src="{{ asset('assets/images/web/escrow_logo.png') }}"
|
||||
alt="Danal escrow service" style="width:60px">
|
||||
<div class="footer-pay-caption">Danal escrow service</div>
|
||||
</div>
|
||||
|
||||
<div class="footer-payment footer-payment--mt">
|
||||
<img class="footer-pay-img"
|
||||
src="{{ asset('assets/images/web/payment-method.png') }}"
|
||||
alt="Secured Payment Gateways" style="width:170px">
|
||||
<div class="footer-pay-caption">Secured Payment Gateways</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Col 2: Links -->
|
||||
<div>
|
||||
<h4 style="color: white; margin-bottom: 20px;">고객지원</h4>
|
||||
<a href="#" class="footer-link">공지사항</a>
|
||||
<a href="#" class="footer-link">자주 묻는 질문</a>
|
||||
<a href="#" class="footer-link">1:1 문의</a>
|
||||
<a href="#" class="footer-link">이용약관</a>
|
||||
<a href="#" class="footer-link" style="font-weight: 600;">개인정보처리방침</a>
|
||||
{{-- Divider --}}
|
||||
<div class="footer-divider"></div>
|
||||
|
||||
{{-- Bottom: Corporation Info (collapsible) --}}
|
||||
<div class="footer-bottom">
|
||||
<details class="footer-details">
|
||||
<summary class="footer-summary">
|
||||
사업자 정보 (Corporation info)
|
||||
<span class="footer-summary-hint">펼치기</span>
|
||||
</summary>
|
||||
|
||||
<div class="footer-info">
|
||||
<div class="footer-info-row"><span>상호</span><b>(주) 플러스메이커</b></div>
|
||||
<div class="footer-info-row"><span>대표</span><b>송병수</b></div>
|
||||
<div class="footer-info-row"><span>주소</span><b>전북특별자치도 전주시 완산구 용마리로 94, 4층 451호</b></div>
|
||||
<div class="footer-info-row"><span>전화</span><b>1833-4856</b></div>
|
||||
<div class="footer-info-row"><span>메일</span><b>master@plusmaker.co.kr</b></div>
|
||||
<div class="footer-info-row"><span>사업자등록번호</span><b>121-88-01191</b></div>
|
||||
<div class="footer-info-row"><span>통신판매업신고번호</span><b>제 2018-전주완산-0705호</b></div>
|
||||
<div class="footer-info-row"><span>개인정보관리책임자</span><b>송병수</b></div>
|
||||
</div>
|
||||
</details>
|
||||
</div>
|
||||
|
||||
<!-- Col 3: Contact -->
|
||||
<div>
|
||||
<h4 style="color: white; margin-bottom: 20px;">Contact</h4>
|
||||
<p style="margin-bottom: 8px;">고객센터: 1544-0000</p>
|
||||
<p style="margin-bottom: 8px;">운영시간: 평일 09:00 - 18:00</p>
|
||||
<p style="margin-bottom: 24px;">이메일: help@gifticon.com</p>
|
||||
|
||||
<div style="padding: 12px; background: rgba(255,255,255,0.05); border-radius: 8px;">
|
||||
<p style="font-size: 12px; color: #9CA3AF; margin-bottom: 4px;">구매안전 서비스</p>
|
||||
<p style="font-size: 13px; color: white;">KG Inicis 에스크로 적용됨</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
@ -11,8 +11,8 @@
|
||||
|
||||
<nav class="desktop-nav" aria-label="주요 메뉴">
|
||||
<a href="/" class="nav-link">HOME</a>
|
||||
<a href="/shop" class="nav-link">SHOP</a>
|
||||
<a href="/exchange" class="nav-link nav-link--exchange">상품권현금교환</a>
|
||||
<a href="/shop" class="nav-link nav-link--exchange">SHOP</a>
|
||||
{{-- <a href="/exchange" class="nav-link nav-link--exchange">상품권현금교환</a>--}}
|
||||
<a href="/mypage" class="nav-link">마이페이지</a>
|
||||
<a href="/cs" class="nav-link">고객센터</a>
|
||||
</nav>
|
||||
|
||||
@ -1,20 +1,18 @@
|
||||
<div style="overflow-x: auto; padding-bottom: 24px;">
|
||||
<div style="display: flex; gap: 16px;">
|
||||
@for($i = 1; $i <= 8; $i++)
|
||||
<div style="flex: 0 0 200px;">
|
||||
<div class="product-card">
|
||||
<div class="card-thumb" style="aspect-ratio: 1/1;">
|
||||
<span style="color: #9CA3AF;">Icon</span>
|
||||
</div>
|
||||
<div class="card-body" style="padding: 12px;">
|
||||
<h3 class="card-title" style="font-size: 14px; height: 40px;">해피머니 상품권 {{$i}}만원권</h3>
|
||||
<div class="card-price-area">
|
||||
<span class="discount" style="font-size: 16px;">-5%</span>
|
||||
<span class="price" style="font-size: 16px;">{{$i}}9,000</span>
|
||||
</div>
|
||||
<div class="snap-carousel">
|
||||
@for($i = 1; $i <= 8; $i++)
|
||||
<div class="snap-item" style="flex: 0 0 200px;">
|
||||
<div class="product-card">
|
||||
<div class="card-thumb" style="aspect-ratio: 1/1;">
|
||||
<span style="color: #9CA3AF;">Icon</span>
|
||||
</div>
|
||||
<div class="card-body" style="padding: 12px;">
|
||||
<h3 class="card-title" style="font-size: 14px; height: 40px;">해피머니 상품권 {{$i}}만원권</h3>
|
||||
<div class="card-price-area">
|
||||
<span class="discount" style="font-size: 16px;">-5%</span>
|
||||
<span class="price" style="font-size: 16px;">{{$i}}9,000</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endfor
|
||||
</div>
|
||||
</div>
|
||||
@endfor
|
||||
</div>
|
||||
Loading…
x
Reference in New Issue
Block a user