-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathplayground.html
121 lines (113 loc) · 4.38 KB
/
playground.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
<!DOCTYPE html>
<html lang="en" data-theme="light">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link
href="https://fonts.googleapis.com/css2?family=Montserrat+Subrayada:wght@700&family=Montserrat:wght@100;400;700;900&display=swap"
rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2?family=Caladea:ital,wght@0,400;0,700;1,400&display=swap"
rel="stylesheet" />
<link rel="stylesheet" href="./css/reset.css" />
<link rel="stylesheet" href="./css/style.css" />
<link rel="stylesheet" href="./css/main.css" />
<title>Ina Bang</title>
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Montserrat|Nanum+Gothic&display=swap" rel="stylesheet" />
</head>
<body>
<div class="transition"><img src="./img/logo.svg" alt="" /></div>
<!-- Header start-->
<header>
<div class="cursor"></div>
<div class="header_inner">
<h1><a href="index.html">Ina Bang</a></h1>
<!-- Global Navigation -->
<nav>
<ul class="gnb">
<li><a href="index.html" title="home" class="pink">Home</a></li>
<li><a href="work.html" title="work">Work</a></li>
<li><a href="about.html">About</a></li>
<li><a href="playground.html">Playground</a></li>
</ul>
</nav>
<!-- DAY & NIGHT toggle button-->
<div class="toggle_box">
<span class="toggle_txt"></span>
<label><i class="far fa-sun"></i></label>
<div class="toggle_bar"><input type="checkbox" name="theme" /></div>
<label><i class="far fa-moon"></i></label>
</div>
</div>
</header>
<!-- Contents start-->
<main>
<section id="playground">
<div class="play-container">
<div class="play-box">
<span class="play-box-bg">
<p class="p-title">Meditaion Wep App</p>
<p class="p-desc">that will put you in sleep in 5 minutes.</p>
</span>
<span class="play-box-bg">
<p class="p-title">🍎 Animation</p>
<p class="p-desc">that will put you in sleep in 5 minutes.</p>
</span>
</div>
</div>
</section>
</main>
<!-- Let's Talk Bubble icon -->
<div class="talk-box">
<input type="checkbox" id="talk-checkbox" />
<label for="talk-checkbox">
<a href="mailto:[email protected]">
<span class="talk-txt">Let's<br />Talk</span>
</a>
<svg id="talk-bubble" width="63" height="63" viewBox="0 0 63 63" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_d)">
<circle id="bubble-circle" cx="30.1587" cy="30.1587" r="28.1587" fill="#252525" />
<path id="bubble-tail"
d="M58.5032 55.6005C51.1971 53.774 47.3412 44.1848 46.3264 39.6185L36.8134 49.5121C44.7282 58.9491 54.5711 57.5031 58.5032 55.6005Z"
fill="#252525" />
</g>
<defs>
<filter id="filter0_d" x="0" y="0" width="62.5032" height="62.3174" filterUnits="userSpaceOnUse"
color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix" />
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
<feOffset dx="1" dy="1" />
<feGaussianBlur stdDeviation="1.5" />
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0" />
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow" />
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape" />
</filter>
</defs>
</svg>
</label>
</div>
<!--푸터 영역 시작-->
<footer>
<div>Designed and Coded by Ina Bang © 2020</div>
</footer>
<script>
//transition
$(document).ready(function () {
$(".transition").stop().animate({
opacity: "1",
left: "-100%",
},
1500
);
$(".transition").stop().animate({
opacity: "1",
left: "-100%",
},
1500
);
});
</script>
</body>
<script src="./js/main.js"></script>
</html>