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

서제현 #23

Open
wants to merge 5 commits into
base: seojeahyean
Choose a base branch
from
+283 −0
Open

서제현 #23

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
1b9f95e
네비게이션 바
seojeahyean Jul 2, 2022
4f41254
배경색 O
seojeahyean Jul 2, 2022
4f6d9f6
서제현
seojeahyean Jul 2, 2022
5998707
텀블벅 서제현 final
seojeahyean Jul 3, 2022
c3b4a47
이미지 경로 변경
seojeahyean Jul 3, 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
104 changes: 104 additions & 0 deletions style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,104 @@
body{
margin: 0px;
}
header {
background-color: aqua;
border: 0px;

}

.logo {
width: 100%;
height: 100%;
}

.tumblbug {
width: 160px;
height: 40px;
margin-left: 10%;
margin-top: 1.5%;
}

nav {
width: 100%;
background-color: bisque;
height: 40px;
bottom: 80px;
margin: 0px;
border-bottom: solid;
border-bottom: 3px;
border-bottom: black;
}

.nav_bar {
float: left;
margin-top: 1%;
}
.bar{
margin-left: 10%;
}
.nav_button {
background-color: white;
border-style: none;
width: 80px;
}
.search_box{
height: 30px;
width: 150px;
float: right;
margin-right: 250px;
}
main{
height: 50%;
width: 55%;
margin-left: 10%;
background-color: blue;
}
.banner{
width: 800px;
height: 300px;
margin-top: 5%;
margin-bottom: 5%;
}
.noteable-text{
font-size:large ;
}
.project_picture{
width: 100%;
height: 40%;
}
.project{
width: 23%;
height: 100%;
background-color: brown;
margin-right: 0.8%;
}
.project_small-text{
opacity: 0.6;
font-size: small;
}
.project_large-text{
font-size: medium;

margin-bottom: 10%;
}
.project4{
float: left;
background-color: aqua;
width: 100%;
height: 100%;
}
.project:hover{
height: 27%;
width: 27%;

}
aside{
float: right;
margin-right: 10%;
background-color: darkorange;
width: 20%;
height: 100%;
position: relative;
top: -635px;
}
179 changes: 179 additions & 0 deletions tumblbug.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,179 @@
<!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">
<title>텀블벅-크리에이터를 위한 클라우드 펀딩</title>
<link rel="stylesheet" href="./style.css">
<script src="https://kit.fontawesome.com/def66b134a.js" crossorigin="anonymous"></script>
</head>

<body>
<header>
<div class=" tumblbug">
<img src="./images/logo.png" class="logo">
</div>
</header>
<nav>
<div class="bar">
<div class="nav_bar" margin-left: 300px; >
<i class="fa-solid fa-bars" margin-right:20px></i>
</div>
<div class="nav_bar">
<input type="button" value="카테고리" class="nav_button">
</div>
<div class="nav_bar">
<input type="button" value="홈" class="nav_button">
</div>
<div class="nav_bar">
<input type="button" value="인기" class="nav_button">
</div>
<div class="nav_bar">
<input type="button" value="신규" class="nav_button">
</div>
<div class="nav_bar">
<input type="button" value="마감임박" class="nav_button">
</div>
<div class="nav_bar">
<input type="button" value="공개예정" class="nav_button">
</div>
</div>
<div class="searching">
<input type="text" placeholder="검색어를 입력해주세요" class="search_box">
</div>
</nav>
<hr style="border:1px color= black;" width="100%">

<main>
<img src="./images/banner1.jpg" class="banner">
<div class="noteable">
<div class="noteable-text">
주목할 만한 프로젝트
</div>
<div class="project4">

<section class="project"style="float: left;">
<img src="./images/notable_project2.jpg" class="project_picture">
<div class="project_small-text">
웹툰·만화 | 네이버웹툰

</div>
<div class="project_large-text">
스타급 성우진과 함께하는<집이 없어>오디오웹툰 시즌1
</div>
</section>


<section class="project" style="float: left;">
<img src="./images/notable_project1.jpg" class="project_picture">
<div class="project_small-text">
디자인 문구 | wearingeul(글입다)
</div>
<div class="project_large-text">
악필은 고칠 수 있어.그것도 매우 쉽게!글씨 교정노트
</div>

</section>
<section class="project" style="float: left;">
<img src="./images/notable_project3.jpg" class="project_picture">
<div class="project_small-text">
푸드 | UNFISK109
</div>
<div class="project_large-text">
참치 아니었어? 식물성참치 UNTUNA!이제는 대체참치다
</div>

</section>

</section>
<section class="project" style="float: left;">
<img src="./images/notable_project5.jpg" class="project_picture">
<div class="project_small-text">
디지털 게임 | 나라이엔씨
</div>
<div class="project_large-text">
세상으로 생명을 배달하는 [숲속의 배달부]
</div>

</section>

</div>



</div>
<div class="project4">

<section class="project"style="float: left;">
<img src="./images/notable_project6.jpg" class="project_picture">
<div class="project_small-text">
웹툰·만화 | 박인주

</div>
<div class="project_large-text">
귀신들의 소망을 그린 만화[꿈의 유실물]
</div>
</section>


<section class="project" style="float: left;">
<img src="./images/notable_project4.jpg" class="project_picture">
<div class="project_small-text">
테크 · 가전| 주식회사 하만
</div>
<div class="project_large-text">
감성까지 충전하는 다재다능한 5 in 1충전기 C.C
</div>

</section>
<section class="project" style="float: left;">
<img src="./images/notable_project7.jpg" class="project_picture">
<div class="project_small-text">
주얼리 | SUITTE(수티)
</div>
<div class="project_large-text">
자연이 만든 아름다운 모양, 조약돌처람 귀여운 향수목걸이
</div>

</section>

</section>
<section class="project" style="float: left;">
<img src="./images/notable_project8.jpg" class="project_picture">
<div class="project_small-text">
출판 | 초점, magazine focus
</div>
<div class="project_large-text">
한강을 제대로 즐기고 싶다면, <한강의 대교>
</div>

</section>

</div>



</main>
<aside>
<div style="float: left;">
인기 프로젝트
</div>
<div style="float: right; opacity: 0.6;">
전체보기
</div>
<br>
<div id="current_date"></p>
<script>
date = new Date();
year = date.getFullYear();
month = date.getMonth() + 1;
day = date.getDate();
document.getElementById("current_date").innerHTML = + year +"."+ month +"." + day + "기준";
</script>
</aside>

</body>

</html>