Skip to content

Commit 3466c04

Browse files
n7bestn7best
committed
init
1 parent 8f396f4 commit 3466c04

File tree

11 files changed

+761
-9
lines changed

11 files changed

+761
-9
lines changed

‎src/app.js‎

Lines changed: 44 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,44 @@
1-
import './app.sass';
1+
import './app.sass';
2+
import { h, wait } from './utils/engine';
3+
import { logo, intro, intro_text } from './view/intro';
4+
import { about, about_name, about_title, down_indicator} from './view/about';
5+
6+
7+
const container = h('div', 'container', intro, about, down_indicator)
8+
document.body.appendChild(container)
9+
10+
11+
//timeline
12+
wait(2000)
13+
.then( ()=> {
14+
intro.className = 'intro active'
15+
16+
return wait(1000)
17+
})
18+
.then( ()=> {
19+
intro.className = 'intro active bs'
20+
container.className = 'container bg-white'
21+
intro_text.style.display = 'none'
22+
intro.appendChild(logo)
23+
return wait(700)
24+
})
25+
.then( ()=> {
26+
container.style.background = 'transparent'
27+
intro.className = 'intro active bg-grey'
28+
29+
return wait(700)
30+
})
31+
.then( ()=> {
32+
intro.className = 'intro active bg-blue'
33+
34+
return wait(500)
35+
})
36+
.then( ()=> {
37+
container.className = 'container bg-white block'
38+
about.className = 'about block'
39+
down_indicator.style.display = 'inline-block';
40+
return wait(500)
41+
})
42+
.then( ()=> {
43+
down_indicator.style.opacity = 1;
44+
})

‎src/app.sass‎

Lines changed: 155 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,156 @@
1-
$color: #fff;
2-
31
body {
4-
background-color: $color;
5-
}
2+
font-size: 12px;
3+
color: #345274;
4+
height: 100vh;
5+
background: #f2f2f2 linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(242,242,242,1) 100%);
6+
}
7+
8+
.container {
9+
height: 100%;
10+
width: 100%;
11+
display: flex;
12+
align-items: center;
13+
justify-content: center;
14+
flex-direction: column;
15+
transition: all 1s;
16+
background: #ccc;
17+
overflow-y: scroll;
18+
position:　relative;
19+
.btn {
20+
transition: all .5s;
21+
opacity: 0;
22+
margin-top: 2em;
23+
display: none;
24+
font-size: 2em;
25+
animation: fadeInTop 1.5s;
26+
i {
27+
left: 1em;
28+
29+
}
30+
}
31+
32+
.btn:hover {
33+
background-color: #53dbff;
34+
background-image: linear-gradient(19deg, #65bbf7 0%, #98d2fa 100%);
35+
box-shadow: 5px 5px 12px rgba(194, 195, 195, 0.75);
36+
}
37+
}
38+
39+
.container.block, .about.block{
40+
display: block;
41+
text-align: center;
42+
}
43+
44+
.intro {
45+
font-family: 'Quicksand', sans-serif;
46+
font-weight: 300;
47+
height: 100vh;
48+
width: 100%;
49+
display: flex;
50+
align-items: center;
51+
justify-content: center;
52+
font-size: 5em;
53+
color: #111;
54+
animation: fadeInTop 2s ease-out;
55+
background: #fff;
56+
transition: all 1.5s;
57+
58+
span {
59+
opacity: 1;
60+
transition: opacity .5s ;
61+
}
62+
}
63+
64+
.intro.active {
65+
height: 3em;
66+
width: 3em;
67+
border-radius: .5em;
68+
margin: auto;
69+
margin-top: 3em;
70+
span {
71+
opacity: 0;
72+
}
73+
}
74+
75+
.logo {
76+
width: 80%;
77+
animation: fadeInTop 1.5s;
78+
}
79+
80+
81+
.about {
82+
margin-top: 15vh;
83+
display: none;
84+
85+
&-name {
86+
font-family: 'Quicksand', sans-serif;
87+
font-size: 5.5em;
88+
font-weight: 600;
89+
animation: fadeInTop 1.5s;
90+
text-shadow: 5px 5px 5px rgba(194, 195, 195, 0.75);
91+
color: #fff;
92+
letter-spacing: 1px;
93+
transition: all 2s;
94+
margin-bottom: .25em;
95+
}
96+
97+
&-name.reveal {
98+
text-shadow: 5px 5px 5px rgba(194, 195, 195, 0);
99+
}
100+
101+
&-title {
102+
font-size: 1.25em;
103+
font-weight: bold;
104+
font-family: 'Quicksand', sans-serif;
105+
color: #0a80d2;
106+
animation: fadeInTop .5s;
107+
}
108+
109+
110+
}
111+
112+
@keyframes fadeInTop {
113+
from {
114+
opacity: 0;
115+
transform: translateY(-15px);
116+
}
117+
to {
118+
opacity: 1;
119+
transform: translateY(0px);
120+
}
121+
}
122+
123+
.bs {
124+
box-shadow:
125+
inset 0 7em 10em -5em rgba(255,255,255,0.6),
126+
0 0.3em 0.5em -0.2em rgba(100,100,100,1),
127+
0 1em 2em -0.75em rgba(100,100,100,0.75),
128+
0 1em 3em -0.5em rgba(100,100,100,0.5),
129+
0 3em 3em -0.25em rgba(100,100,100,0.2);
130+
}
131+
132+
.bg-white {
133+
background-color: #fff;
134+
}
135+
136+
.bg-blue {
137+
background: rgba(53,166,245,1);
138+
box-shadow:
139+
inset 0 7em 10em -5em rgba(255,255,255,0.6),
140+
0 0.3em 0.5em -0.2em rgba(47,131,189,1),
141+
0 1em 2em -0.75em rgba(47,131,189,0.75),
142+
0 1em 3em -0.5em rgba(47,131,189,0.5),
143+
0 3em 3em -0.25em rgba(47,131,189,0.2);
144+
}
145+
146+
.bg-grey {
147+
background: rgba(150,150,150,1);
148+
box-shadow:
149+
inset 0 7em 10em -5em rgba(255,255,255,0.6),
150+
0 0.3em 0.5em -0.2em rgba(100,100,100,1),
151+
0 1em 2em -0.75em rgba(100,100,100,0.75),
152+
0 1em 3em -0.5em rgba(100,100,100,0.5),
153+
0 3em 3em -0.25em rgba(100,100,100,0.2);
154+
}
155+
156+

‎src/components/button/index.js‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import { h } from '../../utils/engine';
2+
import './style.scss';
3+
4+
export const button = (icon, text, clz= '') => {
5+
let btn_text = h('span', '', text);
6+
let btn_icon = h('i', icon);
7+
8+
let $btn = h('div', 'btn '+clz, btn_icon, btn_text)
9+
10+
return $btn;
11+
}
12+

‎src/components/button/style.scss‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
/* Button Style */
2+
3+
.btn {
4+
background: #111;
5+
color: #fff;
6+
margin: 1em;
7+
border: none;
8+
transition: all 1s;
9+
padding: 1em 0em 1em 3em;
10+
font-weight: 600;
11+
font-size: 1.5em;
12+
letter-spacing: .05em;
13+
border-radius: 2em;
14+
cursor: pointer;
15+
position: relative;
16+
display: inline-block;
17+
height: 1em;
18+
width: 0;
19+
max-width: 0;
20+
i {
21+
position: absolute;
22+
left: .75em;
23+
top: .75em;
24+
}
25+
26+
i.fa {
27+
font-size: 1.25em;
28+
}
29+
30+
.text {
31+
display: inline-block;
32+
opacity: 0;
33+
transition: all .3s;
34+
transition-delay: 0s;
35+
min-width: 100px;
36+
transform: translateX(.5em);
37+
}
38+
}
39+
40+
.btn.expand, .expand-on-hover:hover {
41+
padding: 1em 2em 1em 3.5em;
42+
max-width: 10em;
43+
width: auto;
44+
.text {
45+
opacity: 1;
46+
transition-delay: .3s;
47+
min-width: inherit;
48+
transform: translateX(0);
49+
}
50+
}
51+
52+
.btn {
53+
&-purple {
54+
background-color: #8EC5FC;
55+
background-image: linear-gradient(62deg, #8EC5FC 0%, #E0C3FC 100%);
56+
}
57+
58+
&-grey {
59+
background-color: rgba(204, 204, 204, 0.5);
60+
}
61+
}

‎src/index.hbs‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,16 +8,19 @@
88
{{{ css }}}
99
</style>
1010
{{else}}
11-
<link rel="stylesheet" href="main.css">
11+
<link rel="stylesheet" href="main.css">
12+
<link rel="stylesheet" href="app.css">
1213
{{/if}}
14+
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Quicksand:300,400|Arimo">
15+
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
1316
</head>
1417
<body>
1518
{{#if js}}
1619
<script>
1720
{{{ js }}}
1821
</script>
1922
{{else}}
20-
<script src='main.js'></script>
23+
<script src='app.js'></script>
2124
{{/if}}
2225
</body>
2326
</html>

‎src/utils/engine.js‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
export const h = (tag, className, ...children) => {
2+
const el = document.createElement(tag)
3+
el.className = className
4+
5+
children.forEach( $el => {
6+
if(typeof $el === 'string'){
7+
el.appendChild(document.createTextNode($el))
8+
}else{
9+
el.appendChild($el)
10+
}
11+
})
12+
13+
console.log(el)
14+
return el
15+
}
16+
17+
export const wait = (time) => {
18+
return new Promise( res=> {
19+
setTimeout(res, time)
20+
})
21+
}

0 commit comments

Comments
 (0)