Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

텀블벅 메인페이지 클론코딩 #12

Open
wants to merge 3 commits into
base: hyunjin
Choose a base branch
from
Open

텀블벅 메인페이지 클론코딩 #12

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
d78349a
clone commit
xxxjinn Jun 28, 2022
49c1668
final commit
xxxjinn Jul 2, 2022
5a7f821
final commit
xxxjinn Jul 2, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
296 changes: 296 additions & 0 deletions hyunjin.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,296 @@
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.0/css/all.min.css" integrity="sha512-10/jx2EXwxxWqCLX/hHth/vu2KY3jCF70dCQB8TSgNjbCVAC/8vai53GfMDrO2Emgwccf2pJqxct9ehpzG+MTw==" crossorigin="anonymous" referrerpolicy="no-referrer"/>
<title>텀블벅 - 크리에이터를 위한 크라운드펀딩</title>
<script>
</script>
<style>
*{
font-family: sans-serif;
overflow: auto;
margin: 0 auto;
margin-bottom:8px;
}

.header_nav{
position: sticky;
height: 400px;
}

.category{
float:left;
padding: 8px 0px;
}

.category>li{
float: left;
list-style-type: none;
margin: 10px;
padding-left: 16px;
font-size: 15px;
font-weight: bold;
}

.category>li:hover{
color:red;
}

.category>li:first-child:hover>.details_category{
opacity: 1;
}

a:visited{
color:black;
}

a{
text-decoration: none;
}

.details_category{
display: grid;
grid-template-columns: 200px 200px 200px 200px 200px;
grid-template-rows: 50px 50px 50px 50px 50px;
list-style: none;
position: absolute;
top:80px;
background: white;
opacity: 0;
margin-right: 20px;
}

.details_category>li{
margin: 5px 50px 5px 5px;
padding: 0;
font-weight: normal;
font-size: 15px;
}

.search{
float: right;
background-color: #F2F2F2;
margin-right: 20px;
padding :8px 0px;
height: 20px;
width: 240px;
position: relative;
border: 1px solid #F2F2F2;
border-radius: 8px;
right: 0;
}

.placeholder{
position: absolute;
width: 70%;
background-color: #F2F2F2;
border:none;
padding: 0px 12px;
font-size: 14px;
left: 0;
}

.footer-1-right{
float: right;
margin-right:30px;
}

.footer-1-left-title{
font-weight: bold;
font-size: 15px;
}

.footer-1-left-content>td{
color: #9e9e9e;
font-weight: bold;
}

.footer-1-left-content>td:hover{
color: #797979;
}

.footer-1-left{
display: inline-block;
}

.footer-1-right-button{
background-color: white;
border: 1px solid #c5c5c5;
border-radius: 5px;
}

.footer-1-right-button:hover{
border: 3px solid #a5a5a5
}

.footer-2-left{
font-size: 13px;
margin-left: 10px;
color: #a5a5a5;
width: 80px;
}

.footer-2-left>b{
color:#797979;
}

.footer-2-right{
color: #797979;
font-size: 20px;
float: right;
}

.footer-2-right>i{
right: 10px;
margin-right:10px;
border: 1px solid rgb(228, 228, 228);
border-radius: 32px;
padding: 6px;
}

.footer-2-right>i:hover{
border: 2px solid #9e9e9e;
}

.footer-3{
color: #797979;
background-color:#E6E6E6 ;
width: 100%;
}

.footer-3-text{
margin: 10px 30px;
font-size: 13px;
}

</style>
</head>
<body>
<header>
<div>
<div class="logo">
<img src="images/logo.png" width="140" height="36" style="margin: 20px;">
</div>
<div class="header_nav">
<ul class="category">
<li><a href="#"><i class="fa-solid fa-bars" style="margin: 3px;"> 카테고리</i></a>
<ul class="details_category">
<li><a href="#"><b>전체</b></a></li>
<li><a href="#">디자인 문구</a></li>
<li><a href="#">푸드</a></li>
<li><a href="#">출판</a></li>
<li><a href="#">영화 · 비디오</a></li>
<li><a href="#">보드게임 · TRPG</a></li>
<li><a href="#">캐릭터 · 굿즈</a></li>
<li><a href="#">향수 · 뷰티</a></li>
<li><a href="#">디자인</a></li>
<li><a href="#">공연</a></li>
<li><a href="#">디지털 게임</a></li>
<li><a href="#">홈 · 리빙</a></li>
<li><a href="#">의류</a></li>
<li><a href="#">예술</a></li>
<li><a href="#">웹툰 · 만화</a></li>
<li><a href="#">테크 · 가전</a></li>
<li><a href="#">잡화</a></li>
<li><a href="#">사진</a></li>
<li><a href="#">웹툰 리소스</a></li>
<li><a href="#">반려동물</a></li>
<li><a href="#">주얼리</a></li>
<li><a href="#">음악</a></li>
</ul>
</li>
<li>홈</li>
<li>인기</li>
<li>신규</li>
<li>마감임박</li>
<li>공개예정</li>
</ul>
<div class="search">
<input type="text" placeholder="검색어를 입력해주세요." class="placeholder">
<i class="fa-solid fa-magnifying-glass" style="color:black; position: absolute; right:12px; top:10px"></i>
</div>
</div>
</div>
</header>
<div class="main_container">
<div class="main">
<div class="main-1">
<div class="inner-list">
</div>
<div class="button-list">
</div>
</div>
<div class="main-2"></div>
<div class="main-3"></div>
</div>
</div>
<footer>
<div class="footer-1">
<hr>
<div class="footer-1-left">
<table cellspacing="15" style="font-size: 14px; margin: 10px 0;">
<tr class="footer-1-left-title">
<td>텀블벅</td>
<td>이용안내</td>
<td>정책</td>
</tr>
<tr class="footer-1-left-content">
<td>공지사항</td>
<td>헬프 센터</td>
<td>이용약관</td>
</tr>
<tr class="footer-1-left-content">
<td>서비스 소개</td>
<td>첫 후원 가이드</td>
<td>개인정보 처리방침</td>
</tr>
<tr class="footer-1-left-content">
<td>채용</td>
<td>창작자 가이드</td>
<td>프로젝트 실시 기준</td>
</tr>
<tr class="footer-1-left-content">
<td>2021 연말 결산</td>
<td>제휴 협력</td>
</tr>
</table>
</div>
<div class="footer-1-right">
<br>
<b>고객지원</b><br><br>
평일 9:00 - 17:00 (12:00 - 14:00 제외)
<br><br>
<input type="button" class="footer-1-right-button"value="텀블벅에 문의" style="position:relative; left:3px; width:250px; height:35px">
</div>
</div>
<hr style="border: 0.1px solid #E6E6E6">
<div class="footer-2">
<span class="footer-2-left">
<b>회사명</b> 텀블벅(주) <b>주소</b> 서울 서초구 서초대로 398, 19층 (서초동, BNK디지털)
<b>대표</b> 김동환 <b>사업자등록번호</b> 105-87-52823 <br>
<b>통신판매업 신고번호</b> 2019-3010165-30-2-02129
<b>대표번호</b> 02-6080-0760 <br>ⓒ 2022 Tumblbug Inc.
</span>
<span class="footer-2-right">
<i class="fa-solid fa-comment"></i>
<i class="fa-brands fa-facebook"></i>
<i class="fa-brands fa-twitter"></i>
<i class="fa-brands fa-instagram"></i>
<i class="fa-solid fa-n"></i>
<i class="fa-regular fa-circle"></i>
</span>
</div>
<div class="footer-3">
<div class="footer-3-text">
텀블벅은 플랫폼 제공자로서 프로젝트의 당사자가 아니며,
직접적인 통신판매를 진행하지 않습니다. 프로젝트의 완수 및
선물제공의 책임은 해당 프로젝트의 창작자에게 있으며, 프로젝트와 관련하여 후원자와
발생하는 법적 분쟁에 대한 책임은 해당 창작자가 부담합니다.
</div>
</div>
</footer>
</body>
</html>