김재웅 / TFT

Go to a project
Toggle navigation Toggle navigation pinning
서준혁
b7dd0b18 1 parent 22b30505

create frontend template

Expand all
Inline Side-by-side
Showing 14 changed files with 374 additions and 0 deletions
div.svelte-hpuxjp{text-align:left;box-sizing:border-box;display:block}body{padding:0;margin:0}html{scroll-behavior:smooth}nav.svelte-pxoyop{background-color:rgb(225, 175, 85);font-family:"Helvetica Neue", "Helvetica", "Arial", sans-serif;height:70px;top:0}.inner.svelte-pxoyop{max-width:500px;padding-left:10px;padding-right:10px;margin:auto;box-sizing:border-box;display:flex;align-items:center;height:100%}.logo.svelte-pxoyop{display:flex;position:absolute;width:50px;left:40px;top:25px
}.navbar-list.svelte-pxoyop{display:flex;padding:0;width:100%;justify-content:space-between;margin:0}#backtotop.svelte-16na1oq{border-radius:100%;width:50px;height:50px;position:fixed;right:4%;bottom:10%}.article.svelte-90y9ti.svelte-90y9ti{font-family:맑은고딕, Malgun Gothic, dotum, gulim, sans-serif;font-size:24pt;padding:10vw;text-align:center;display:flex}.wbg.svelte-90y9ti.svelte-90y9ti{background-color:#ffffff}.gbg.svelte-90y9ti.svelte-90y9ti{background-color:#edeff2}.article.svelte-90y9ti img.svelte-90y9ti{display:inline-block;max-width:500px;width:20vw;margin-left:4vw;margin-right:4vw}.article.svelte-90y9ti .text.svelte-90y9ti{display:inline-block;width:50vw}.contents.svelte-90y9ti.svelte-90y9ti{display:flex;align-items:center}li.svelte-1c821dq{list-style-type:none;position:relative}li.svelte-1c821dq:before{content:"";position:absolute;bottom:0;left:0;width:100%;height:1px}a.svelte-1c821dq{color:#e5e6e5;text-decoration:none;display:inline-flex;height:45px;align-items:center;padding:0 10px;font-size:20px}@media only screen and (max-width: 767px){a.svelte-1c821dq{display:none}}.onmouse.svelte-1c821dq{color:#ffffff}#chat_bg.svelte-1177unw{box-sizing:border-box;display:flex;height:100vh;background-color:#edeff2}
\ No newline at end of file
This diff is collapsed. Click to expand it.
This diff could not be displayed because it is too large.
html, body {
position: relative;
width: 100%;
height: 100%;
}
body {
color: #333;
margin: 0;
padding: 8px;
box-sizing: border-box;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}
a {
color: rgb(0,100,200);
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a:visited {
color: rgb(0,80,160);
}
label {
display: block;
}
input, button, select, textarea {
font-family: inherit;
font-size: inherit;
-webkit-padding: 0.4em 0;
padding: 0.4em;
margin: 0 0 0.5em 0;
box-sizing: border-box;
border: 1px solid #ccc;
border-radius: 2px;
}
input:disabled {
color: #ccc;
}
button {
color: #333;
background-color: #f4f4f4;
outline: none;
}
button:disabled {
color: #999;
}
button:not(:disabled):active {
background-color: #ddd;
}
button:focus {
border-color: #666;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset='utf-8'>
<meta name='viewport' content='width=device-width,initial-scale=1'>
<title>Svelte app</title>
<link rel='icon' type='image/png' href='./favicon.png'>
<link rel='stylesheet' href='./global.css'>
<link rel='stylesheet' href='./build/bundle.css'>
<script defer src='./build/bundle.js'></script>
</head>
<body>
</body>
</html>
<script>
import Menu from './Menu.svelte'
import Backtotop from './Backtotop.svelte'
import Map from './Map.svelte'
import Article from './Articles.svelte'
</script>
<style>
div {
text-align: left;
box-sizing: border-box;
display: block;
}
:global(body) {
padding: 0;
margin: 0;
}
:global(html) {
scroll-behavior: smooth;
}
</style>
<div>
<Menu/>
<Map/>
<Backtotop/>
<Article/>
</div>
\ No newline at end of file
<style>
.article{
font-family: 맑은고딕, Malgun Gothic, dotum, gulim, sans-serif;
font-size: 24pt;
padding:10vw;
text-align: center;
display: flex;
}
.wbg{
background-color: #ffffff;
}
.gbg{
background-color: #edeff2;
}
.article img {
display: inline-block;
max-width: 500px;
width: 20vw;
margin-left: 4vw;
margin-right: 4vw;
}
.article .text {
display: inline-block;
width: 50vw;
}
.contents{
display: flex;
align-items: center;
}
</style>
<script>
</script>
<div class="article wbg" id="article1">
<div class="contents">
<img src="https://d2u3dcdbebyaiu.cloudfront.net/uploads/atch_img/574/a90016a30d614a19fe6987d94edb5e29.jpeg" alt=":)">
<div class="text">
ㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎ
ㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎ
</div>
</div>
</div>
<div class="article gbg" id="article2">
<div class="contents">
<div class="text">
ㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠ
ㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠ
</div>
<img src="https://www.pinclipart.com/picdir/big/550-5506338_pepe-the-frog-transparent-png-transparent-pepe-png.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=":)">
<div class="text">
ㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎ
ㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎ
</div>
</div>
</div>
<div class="article gbg" id="article4">
<div class="contents">
<div class="text">
ㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠ
ㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠ
</div>
<img src="https://www.pinclipart.com/picdir/big/550-5506338_pepe-the-frog-transparent-png-transparent-pepe-png.png" alt=";(">
</div>
</div>
\ No newline at end of file
<script>
import { fly } from 'svelte/transition'
import { onMount, onDestroy } from 'svelte';
let show = false;
function scrollUp() {
document.body.scrollIntoView({behavior: "smooth"})
}
onMount(() => {
window.onscroll = () => {
if (window.scrollY > 60) {
show = true
} else {
show = false
}
}
});
onDestroy(() => {
window.onscroll = () => {}
});
</script>
<style>
#backtotop {
border-radius: 100%;
width: 50px;
height: 50px;
position: fixed;
right: 4%;
bottom: 10%;
}
</style>
{#if (show)}
<button id="backtotop"
transition:fly="{{ y : 200, duration:400}}"
on:click={scrollUp}>
▲
</button>
{/if}
\ No newline at end of file
<style>
#chat_bg {
box-sizing: border-box;
display: flex;
height: 100vh;
background-color:#edeff2;
}
</style>
<script>
</script>
<div id="chat_bg">
</div>
<script>
import Menuitems from './Menuitems.svelte'
// 메뉴 바 항목들
const navItems = [
{ label: "Article1", href: "#article1" },
{ label: "Article2", href: "#article2" },
{ label: "Article3", href: "#article3" },
{ label: "Article4", href: "#article4" }
];
</script>
<style>
nav {
background-color: rgb(225, 175, 85);
font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
height: 70px;
top: 0;
}
.inner {
max-width: 500px;
padding-left: 10px;
padding-right: 10px;
margin: auto;
box-sizing: border-box;
display: flex;
align-items: center;
height: 100%;
}
.logo {
display: flex;
position: absolute;
width: 50px;
left: 40px;
top: 25px
}
.navbar-list {
display: flex;
padding: 0;
width: 100%;
justify-content: space-between;
margin: 0;
}
</style>
<nav>
<div class="logo">Logo</div>
<div class="inner">
<ul class='navbar-list'>
{#each navItems as item}
<Menuitems {item}/>
{/each}
</ul>
</div>
</nav>
\ No newline at end of file
<style>
li {
list-style-type: none;
position: relative;
}
li:before {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 1px;
}
a {
color: #e5e6e5;
text-decoration: none;
display: inline-flex;
height: 45px;
align-items: center;
padding: 0 10px;
font-size: 20px;
}
@media only screen and (max-width: 767px) {
a {
display: none;
}
}
.onmouse {
color: #ffffff;
}
</style>
<script>
export let item;
let onmouse;
function enter() {
onmouse = true;
}
function leave() {
onmouse = false;
}
</script>
<li on:mouseenter={enter} on:mouseleave={leave} >
<a href={item.href} class:onmouse>{item.label}</a>
</li>
\ No newline at end of file
<script>
</script>
<span>
...
</span>
\ No newline at end of file
import App from './App.svelte';
const app = new App({
target: document.body,
props: {
// name: 'world'
}
});
export default app;
\ No newline at end of file