김재웅 / 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 {
margin: 0;
padding: 8px;
box-sizing: border-box;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
font-family: '맑은 고딕 Semilight', "AppleSDGothicNeo-Regular", 'Malgun Gothic', '맑은 고딕', "dotum", '돋움', sans-serif;
}
a {
......
......@@ -38,37 +38,43 @@
<div class="article wbg" id="article1">
<div class="contents">
<img src="https://d2u3dcdbebyaiu.cloudfront.net/uploads/atch_img/574/a90016a30d614a19fe6987d94edb5e29.jpeg" alt=":)">
<img src="./public/TFTlogo.png" alt=":)">
<div class="text">
ㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎ
ㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎ
<h3>TFT에 오신 걸 환영합니다!</h3>
Travel & Festival with Temperature<br>
각종 행사 정보와 날씨 정보를 한눈에 알 수 있는 서비스입니다.
</div>
</div>
</div>
<div class="article gbg" id="article2">
<div class="contents">
<div class="text">
ㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠ
ㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠ
<h3>손쉬운 행사 탐색</h3>
TFT를 통해 전국에서 개최중인 행사와 축제를<br>
한 눈에 확인할 수 있습니다.
</div>
<img src="https://www.pinclipart.com/picdir/big/550-5506338_pepe-the-frog-transparent-png-transparent-pepe-png.png" alt=";(">
<img src="./public/exploremap.png" alt=";(">
</div>
</div>
<div class="article wbg" id="article3">
<div class="contents">
<img src="https://d2u3dcdbebyaiu.cloudfront.net/uploads/atch_img/574/a90016a30d614a19fe6987d94edb5e29.jpeg" alt=":)">
<img src="./public/infofesta.png" alt=":)">
<div class="text">
ㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎ
ㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎ
<h3>행사 정보 확인</h3>
지도에 표시된 마커를 클릭하여<br>
행사 정보를 확인할 수 있습니다.
</div>
</div>
</div>
<div class="article gbg" id="article4">
<div class="contents">
<div class="text">
ㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠ
ㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠ
사용된 기술 스택은 다음과 같습니다.<br><br>
WEB : NodeJS / Express / Svelte<br>
Database : MongoDB<br>
API Handler : NodeJS / RequestJS<br>
Docker
</div>
<img src="https://www.pinclipart.com/picdir/big/550-5506338_pepe-the-frog-transparent-png-transparent-pepe-png.png" alt=";(">
<img src="./public/stacks.png" alt=";(">
</div>
</div>
\ No newline at end of file
......
......@@ -3,10 +3,10 @@
// 메뉴 바 항목들
const navItems = [
{ label: "Article1", href: "#article1" },
{ label: "Article2", href: "#article2" },
{ label: "Article3", href: "#article3" },
{ label: "Article4", href: "#article4" }
{ label: "TFT 소개", href: "#article1" },
{ label: "행사 탐색", href: "#article2" },
{ label: "행사 정보", href: "#article3" },
{ label: "기술 스택", href: "#article4" }
];
</script>
......@@ -20,38 +20,37 @@
}
.inner {
max-width: 600px;
max-width: 700px;
padding-left: 10px;
padding-right: 10px;
margin: auto;
box-sizing: content-box;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
.logo {
.logo img{
display: flex;
align-items: center;
color: black;
width: 50px;
margin-right: 350px;
width: 120px;
left: 20px;
top: 15px;
margin-right: 400px;
}
.navbar-list {
display: flex;
padding: 0;
width: 400px;
justify-content: space-around;
padding: 0;
width: 100%;
justify-content: space-between;
margin: 0;
margin-left: 200px;
}
</style>
<nav id="nav">
<div class="inner">
<div class="logo">Logo</div>
<div class="logo"><img alt="Logo" src="./public/TFTlogo.png"></div>
<ul class='navbar-list'>
{#each navItems as item}
<Menuitems {item}/>
......
<style>
li {
display: flex;
list-style-type: none;
position: relative;
margin-left: 50px;
height: 45px;
white-space: nowrap;
align-items: center;
}
li:before {
......@@ -18,8 +22,6 @@
color: #000000;
text-decoration: none;
display: inline-flex;
height: 45px;
align-items: center;
padding: 0 10px;
font-size: 20px;
}
......@@ -31,7 +33,7 @@
}
.onmouse {
color: #ffffff;
text-decoration: underline;
}
</style>
......
......@@ -12,7 +12,38 @@
}
</script>
<style>
.title {
font-size: 18pt;
font-weight: bold;
text-align: center;
}
.content {
padding: 0.5rem 0.5rem 0.5rem;
text-align: center;
}
.info img {
max-height: 20rem;
}
</style>
<svelte:window on:scroll={hide}></svelte:window>
<SideBar bind:show={sidebar_show} {side}>
{festa.title}
<div class="info">
<div class="title">{festa.title}</div>
<img alt="festaImg" src={festa.firstimage}><br>
<div class="content">
개최지 : {festa.addr1}<br>
전화번호 : {festa.tel}<br>
<!-- 행사 시작일 : {festa.startdate}<br>
행사 시작일 : {festa.enddate}<br>
날씨 : {festa.weather 어쩌구} -->
</div>
</div>
</SideBar>
......
......@@ -32,7 +32,7 @@
border-left: 1px solid #aaa;
background: #fff;
overflow-y: auto;
width: 330px;
width: 560px;
z-index: 900;
}
......@@ -47,21 +47,39 @@
padding: 5px 5px 5px;
border-bottom: #999999 solid 1px;
}
.bg {
position: fixed;
display: block;
width: 100vw;
height: 100vw;
left: 0;
top: 0;
background-color: rgba(0, 0, 0, 10%);
z-index: 800;
}
.navitems {
display: flex;
padding: 2rem 1rem 0.6rem;
flex-direction: column
}
.left .navitems {
padding: 2rem 1rem 0.6rem;
}
</style>
{#if show}
<nav class={"nav " + side} transition:fly={{x: (side == "left" ? -400 : 400), opacity: 1, duration: 800}}>
<div class="navtop" on:click={() => {show = false;}}
style="justify-content:{side == "left" ? "right" : "left"}; cursor:pointer;">
{ side == "left" ? "＜" : "＞" }
</div>
{#if show}
{#if side == "right"}
<div class="bg" on:click={() => {show = false;}}></div>
{/if}
<nav class={"nav " + side} transition:fly={{x: (side == "left" ? -400 : 600), opacity: 1, duration: 800}}>
{#if side == "left"}
<div class="navtop" on:click={() => {show = false;}}
style="justify-content:{side == "left" ? "right" : "left"}; cursor:pointer;">
{ side == "left" ? "＜" : "＞" }
</div>
{/if}
<div class="navitems">
<slot>
......