-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
169 lines (160 loc) · 6.14 KB
/
index.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
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
<!DOCTYPE html>
<html lang="zxx">
<head>
<title>Home</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8" />
<meta name="keywords" content="" />
<script>
addEventListener("load", function () {
setTimeout(hideURLbar, 0);
}, false);
function hideURLbar() {
window.scrollTo(0, 1);
}
</script>
<!-- Custom Theme files -->
<link href="css/bootstrap.css" type="text/css" rel="stylesheet" media="all">
<link href="css/style.css" type="text/css" rel="stylesheet" media="all">
<!-- nav -->
<link href="css/menufullpage.css" rel="stylesheet">
<!-- font-awesome icons -->
<link href="css/fontawesome-all.min.css" rel="stylesheet">
<!-- //Custom Theme files -->
<!-- online-fonts -->
<link href="http://fonts.googleapis.com/css?family=Fira+Sans+Condensed:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i"
rel="stylesheet">
<!-- //online-fonts -->
</head>
<body>
<!-- header -->
<header>
<!--nav -->
<a href="#menu" class="menu-link">
<span>toggle menu</span>
</a>
<nav id="menu" class="panel">
<ul>
<li>
<a href="index.html" class="active">Home</a>
</li>
<li>
<a href="about.html">About</a>
</li>
<li>
<a href="skills.html">Skills</a>
</li>
<li>
<a href="services.html">Services</a>
</li>
<li>
<a href="portfolio.html">Portofolio</a>
</li>
<li>
<a href="contact.html">contact</a>
</li>
</ul>
</nav>
<!-- //nav -->
<!-- logo -->
<div class="logo_wthree">
<a href="index.html">
<i class="fab fa-node-js"></i>
</a>
</div>
<!-- //logo -->
</header>
<!-- //header -->
<!-- banner -->
<section class="slide-wrapper">
<!-- banner slide -->
<div class="agile_banner bg1">
<div class="layer">
<div class="container">
<div class="banner_text_wthree">
<div class="d-flex">
<h1>welcome to </h1>
<h2> my site</h2>
</div>
<div id="text" class="banner_text_w3ls my-md-5 my-3"></div>
<ul class="list-inline bnr_list_w3">
<li class="list-inline-item">
<a class="btn text-white scroll" href="portfolio.html">view my work </a>
</li>
<li class="list-inline-item">
<a class="btn text-white bg-dark scroll" href="contact.html">contact me</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</section>
<!-- //banner-->
<!-- footer -->
<footer>
<div class="cpy-right text-center py-4">
<p class="text-white">Copyright © 2018.Company name All rights reserved.<a target="_blank" href="http://sc.chinaz.com/moban/">网页模板</a></p>
</div>
</footer>
<!-- //footer -->
<!-- js -->
<script src="js/jquery-2.2.3.min.js"></script>
<!-- //js -->
<!-- few java snippets-->
<script src="js/strive.js"></script>
<!-- banner text animation -->
<script>
//text effect
document.addEventListener('DOMContentLoaded', function (event) {
var dataText = [
"Hi there, I'am wind.",
"I'm UI/UX designer.",
"I have strong knowledge in web development",
"As well as in photohsop, 2019CC",
"Cross browser compiled layout"
];
// type one text in the typwriter
// keeps calling itself until the text is finished
function typeWriter(text, i, fnCallback) {
// chekc if text isn't finished yet
if (i < (text.length)) {
// add next character to h1
document.getElementById("text").innerHTML = text.substring(0, i + 1) +
'<span aria-hidden="true" class="banner_text_w3ls"></span>';
// wait for a while and call this function again for next character
setTimeout(function () {
typeWriter(text, i + 1, fnCallback)
}, 50);
}
// text finished, call callback if there is a callback function
else if (typeof fnCallback == 'function') {
// call callback after timeout
setTimeout(fnCallback, 1000);
}
}
// start a typewriter animation for a text in the dataText array
function StartTextAnimation(i) {
// check if dataText[i] exists
if (i < dataText[i].length) {
// text exists! start typewriter animation
typeWriter(dataText[i], 0, function () {
// after callback (and whole text has been animated), start next text
StartTextAnimation(i + 1);
});
}
}
// start the text animation
StartTextAnimation(0);
});
</script>
<!-- //banner text animation -->
<!-- nav -->
<script src="js/menuFullpage.min.js"></script>
<!-- //nav -->
<!-- smooth scroll -->
<script src="js/SmoothScroll.min.js "></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.js"></script>
</body>
</html>