LI WENHAO / TFT

Go to a project
Toggle navigation Toggle navigation pinning
서준혁
44c6af6d 1 parent e1fe1466

Fill articles

Expand all
Inline Side-by-side
Showing 12 changed files with 97 additions and 41 deletions
This diff is collapsed. Click to expand it.
This diff could not be displayed because it is too large.
...@@ -9,7 +9,7 @@ body { ...@@ -9,7 +9,7 @@ body {
9 margin: 0; 9 margin: 0;
10 padding: 8px; 10 padding: 8px;
11 box-sizing: border-box; 11 box-sizing: border-box;
12 - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; 12 + font-family: '맑은 고딕 Semilight', "AppleSDGothicNeo-Regular", 'Malgun Gothic', '맑은 고딕', "dotum", '돋움', sans-serif;
13 } 13 }
14 14
15 a { 15 a {
......
...@@ -38,37 +38,43 @@ ...@@ -38,37 +38,43 @@
38 38
39 <div class="article wbg" id="article1"> 39 <div class="article wbg" id="article1">
40 <div class="contents"> 40 <div class="contents">
41 - <img src="https://d2u3dcdbebyaiu.cloudfront.net/uploads/atch_img/574/a90016a30d614a19fe6987d94edb5e29.jpeg" alt=":)"> 41 + <img src="./public/TFTlogo.png" alt=":)">
42 <div class="text"> 42 <div class="text">
43 - ㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎ 43 + <h3>TFT에 오신 걸 환영합니다!</h3>
44 - ㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎ 44 + Travel & Festival with Temperature<br>
45 + 각종 행사 정보와 날씨 정보를 한눈에 알 수 있는 서비스입니다.
45 </div> 46 </div>
46 </div> 47 </div>
47 </div> 48 </div>
48 <div class="article gbg" id="article2"> 49 <div class="article gbg" id="article2">
49 <div class="contents"> 50 <div class="contents">
50 <div class="text"> 51 <div class="text">
51 - ㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠ 52 + <h3>손쉬운 행사 탐색</h3>
52 - ㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠ 53 + TFT를 통해 전국에서 개최중인 행사와 축제를<br>
54 + 한 눈에 확인할 수 있습니다.
53 </div> 55 </div>
54 - <img src="https://www.pinclipart.com/picdir/big/550-5506338_pepe-the-frog-transparent-png-transparent-pepe-png.png" alt=";("> 56 + <img src="./public/exploremap.png" alt=";(">
55 </div> 57 </div>
56 </div> 58 </div>
57 <div class="article wbg" id="article3"> 59 <div class="article wbg" id="article3">
58 <div class="contents"> 60 <div class="contents">
59 - <img src="https://d2u3dcdbebyaiu.cloudfront.net/uploads/atch_img/574/a90016a30d614a19fe6987d94edb5e29.jpeg" alt=":)"> 61 + <img src="./public/infofesta.png" alt=":)">
60 <div class="text"> 62 <div class="text">
61 - ㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎ 63 + <h3>행사 정보 확인</h3>
62 - ㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎ 64 + 지도에 표시된 마커를 클릭하여<br>
65 + 행사 정보를 확인할 수 있습니다.
63 </div> 66 </div>
64 </div> 67 </div>
65 </div> 68 </div>
66 <div class="article gbg" id="article4"> 69 <div class="article gbg" id="article4">
67 <div class="contents"> 70 <div class="contents">
68 <div class="text"> 71 <div class="text">
69 - ㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠ 72 + 사용된 기술 스택은 다음과 같습니다.<br><br>
70 - ㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠ 73 + WEB : NodeJS / Express / Svelte<br>
74 + Database : MongoDB<br>
75 + API Handler : NodeJS / RequestJS<br>
76 + Docker
71 </div> 77 </div>
72 - <img src="https://www.pinclipart.com/picdir/big/550-5506338_pepe-the-frog-transparent-png-transparent-pepe-png.png" alt=";("> 78 + <img src="./public/stacks.png" alt=";(">
73 </div> 79 </div>
74 </div> 80 </div>
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -3,10 +3,10 @@ ...@@ -3,10 +3,10 @@
3 3
4 // 메뉴 바 항목들 4 // 메뉴 바 항목들
5 const navItems = [ 5 const navItems = [
6 - { label: "Article1", href: "#article1" }, 6 + { label: "TFT 소개", href: "#article1" },
7 - { label: "Article2", href: "#article2" }, 7 + { label: "행사 탐색", href: "#article2" },
8 - { label: "Article3", href: "#article3" }, 8 + { label: "행사 정보", href: "#article3" },
9 - { label: "Article4", href: "#article4" } 9 + { label: "기술 스택", href: "#article4" }
10 ]; 10 ];
11 </script> 11 </script>
12 12
...@@ -20,38 +20,37 @@ ...@@ -20,38 +20,37 @@
20 } 20 }
21 21
22 .inner { 22 .inner {
23 - max-width: 600px; 23 + max-width: 700px;
24 padding-left: 10px; 24 padding-left: 10px;
25 padding-right: 10px; 25 padding-right: 10px;
26 margin: auto; 26 margin: auto;
27 - box-sizing: content-box; 27 + box-sizing: border-box;
28 display: flex; 28 display: flex;
29 align-items: center; 29 align-items: center;
30 justify-content: center; 30 justify-content: center;
31 height: 100%; 31 height: 100%;
32 } 32 }
33 33
34 - .logo { 34 + .logo img{
35 display: flex; 35 display: flex;
36 - align-items: center; 36 + width: 120px;
37 - color: black; 37 + left: 20px;
38 - width: 50px; 38 + top: 15px;
39 - margin-right: 350px; 39 + margin-right: 400px;
40 } 40 }
41 41
42 .navbar-list { 42 .navbar-list {
43 display: flex; 43 display: flex;
44 - padding: 0; 44 + padding: 0;
45 - width: 400px; 45 + width: 100%;
46 - justify-content: space-around; 46 + justify-content: space-between;
47 margin: 0; 47 margin: 0;
48 - margin-left: 200px;
49 } 48 }
50 </style> 49 </style>
51 50
52 <nav id="nav"> 51 <nav id="nav">
53 <div class="inner"> 52 <div class="inner">
54 - <div class="logo">Logo</div> 53 + <div class="logo"><img alt="Logo" src="./public/TFTlogo.png"></div>
55 <ul class='navbar-list'> 54 <ul class='navbar-list'>
56 {#each navItems as item} 55 {#each navItems as item}
57 <Menuitems {item}/> 56 <Menuitems {item}/>
......
1 <style> 1 <style>
2 li { 2 li {
3 + display: flex;
3 list-style-type: none; 4 list-style-type: none;
4 position: relative; 5 position: relative;
5 margin-left: 50px; 6 margin-left: 50px;
7 + height: 45px;
8 + white-space: nowrap;
9 + align-items: center;
6 } 10 }
7 11
8 li:before { 12 li:before {
...@@ -18,8 +22,6 @@ ...@@ -18,8 +22,6 @@
18 color: #000000; 22 color: #000000;
19 text-decoration: none; 23 text-decoration: none;
20 display: inline-flex; 24 display: inline-flex;
21 - height: 45px;
22 - align-items: center;
23 padding: 0 10px; 25 padding: 0 10px;
24 font-size: 20px; 26 font-size: 20px;
25 } 27 }
...@@ -31,7 +33,7 @@ ...@@ -31,7 +33,7 @@
31 } 33 }
32 34
33 .onmouse { 35 .onmouse {
34 - color: #ffffff; 36 + text-decoration: underline;
35 } 37 }
36 </style> 38 </style>
37 39
......
...@@ -12,7 +12,38 @@ ...@@ -12,7 +12,38 @@
12 } 12 }
13 </script> 13 </script>
14 14
15 +<style>
16 + .title {
17 + font-size: 18pt;
18 + font-weight: bold;
19 + text-align: center;
20 + }
21 +
22 + .content {
23 + padding: 0.5rem 0.5rem 0.5rem;
24 + text-align: center;
25 + }
26 +
27 + .info img {
28 + max-height: 20rem;
29 + }
30 +
31 +</style>
32 +
15 <svelte:window on:scroll={hide}></svelte:window> 33 <svelte:window on:scroll={hide}></svelte:window>
16 <SideBar bind:show={sidebar_show} {side}> 34 <SideBar bind:show={sidebar_show} {side}>
17 - {festa.title} 35 + <div class="info">
36 + <div class="title">{festa.title}</div>
37 + <img alt="festaImg" src={festa.firstimage}><br>
38 + <div class="content">
39 + 개최지 : {festa.addr1}<br>
40 + 전화번호 : {festa.tel}<br>
41 + <!-- 행사 시작일 : {festa.startdate}<br>
42 + 행사 시작일 : {festa.enddate}<br>
43 + 날씨 : {festa.weather 어쩌구} -->
44 + </div>
45 + </div>
46 +
47 +
48 +
18 </SideBar> 49 </SideBar>
......
...@@ -32,7 +32,7 @@ ...@@ -32,7 +32,7 @@
32 border-left: 1px solid #aaa; 32 border-left: 1px solid #aaa;
33 background: #fff; 33 background: #fff;
34 overflow-y: auto; 34 overflow-y: auto;
35 - width: 330px; 35 + width: 560px;
36 z-index: 900; 36 z-index: 900;
37 } 37 }
38 38
...@@ -47,21 +47,39 @@ ...@@ -47,21 +47,39 @@
47 padding: 5px 5px 5px; 47 padding: 5px 5px 5px;
48 border-bottom: #999999 solid 1px; 48 border-bottom: #999999 solid 1px;
49 } 49 }
50 + .bg {
51 + position: fixed;
52 + display: block;
53 + width: 100vw;
54 + height: 100vw;
55 + left: 0;
56 + top: 0;
57 + background-color: rgba(0, 0, 0, 10%);
58 + z-index: 800;
59 + }
50 60
51 .navitems { 61 .navitems {
52 display: flex; 62 display: flex;
53 - padding: 2rem 1rem 0.6rem;
54 flex-direction: column 63 flex-direction: column
55 } 64 }
65 +
66 + .left .navitems {
67 + padding: 2rem 1rem 0.6rem;
68 + }
56 69
57 </style> 70 </style>
58 71
59 -{#if show} 72 +{#if show}
60 - <nav class={"nav " + side} transition:fly={{x: (side == "left" ? -400 : 400), opacity: 1, duration: 800}}> 73 + {#if side == "right"}
61 - <div class="navtop" on:click={() => {show = false;}} 74 + <div class="bg" on:click={() => {show = false;}}></div>
62 - style="justify-content:{side == "left" ? "right" : "left"}; cursor:pointer;"> 75 + {/if}
63 - { side == "left" ? "＜" : "＞" } 76 + <nav class={"nav " + side} transition:fly={{x: (side == "left" ? -400 : 600), opacity: 1, duration: 800}}>
64 - </div> 77 + {#if side == "left"}
78 + <div class="navtop" on:click={() => {show = false;}}
79 + style="justify-content:{side == "left" ? "right" : "left"}; cursor:pointer;">
80 + { side == "left" ? "＜" : "＞" }
81 + </div>
82 + {/if}
65 <div class="navitems"> 83 <div class="navitems">
66 <slot> 84 <slot>
67 85
......