-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
153 lines (133 loc) · 6.7 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="css/animate.css">
<link rel="stylesheet" href="css/font-awesome.css">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/responsive.css">
</head>
<body>
<div class="header">
<div class="header-bg">
<div class="container">
<div class="navigation wow fadeInDown animated" data-wow-duration="1s">
<div id="target">
<i class="fa fa-bars"></i>
</div>
<a href="#"><h3>ZA</h3></a>
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#myStory">About</a></li>
<li><a href="#myWorks">Work</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#">BLog</a></li>
</ul>
</div>
<div class="header-content">
<h1 class="wow fadeInUp animated" data-wow-duration="2s">Hello,I'm Zamaal Azad</h1>
<h4 title="Frontend developer" class="wow fadeInUp animated" data-wow-duration="2s" data-wow-delay="1s">Graphic Designer</h4>
</div>
<div class="next wow fadeInDown animated" data-wow-duration="4s">
<a href="#myStory"><i class="fa fa-chevron-down"></i></a>
</div>
</div>
</div>
</div><!-- End Header Section-->
<div id="responsive_nav">
<i class="fa fa-times close"></i>
<a href="#">
<h3>ZA</h3>
</a>
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#myStory">About</a></li>
<li><a href="#myWorks">Work</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#">BLog</a></li>
</ul>
</div>
<div class="my-story wow fadeInUp animated" data-wow-delay=".3s" id="myStory">
<h1 title="My Story">My Story</h1>
<h5 title="tagline">A Nature of I’ve helped create.</h5>
<hr>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque
penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium
quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo,
rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque
penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium
quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo,
rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam, harum ex dicta quam nobis ea molestiae veniam et minus provident eligendi! Ipsum natus cupiditate, tempore rem praesentium necessitatibus mollitia numquam?</p>
<a href="#" class="wow fadeInDown animated" data-wow-delay=".6s">Check my Work</a>
</div> <!-- End My Story Section -->
<div class="my-works wow fadeInDown animated" data-wow-delay="400ms" id="myWorks">
<h1 title="My Story">My Works</h1>
<h5 title="tagline">A bomb things that I have done so far.</h5>
<hr>
<div class="works-image wow slideInUp animated" data-wow-delay="800ms">
<img src="img/1.jpg" alt="">
<img src="img/2.jpg" alt="">
<img src="img/3.jpg" alt="">
<img src="img/4.jpg" alt="">
<img src="img/5.jpg" alt="">
<img src="img/6.jpg" alt="">
<img src="img/7.jpg" alt="">
<img src="img/8.jpg" alt="">
<img src="img/9.jpg" alt="">
<img src="img/10.jpg" alt="">
<img src="img/11.jpg" alt="">
<img src="img/12.jpg" alt="">
</div> <!-- End Gallery Collection -->
<a href="#" class="wow fadeInDown animated" data-wow-delay="0.8s">Get In Touch</a>
</div> <!-- End My Works -->
<div class="say-hello wow fadeInDown animated" data-wow-delay="400ms" id="contact">
<h1 title="Say Hello!">Say Hello!</h1>
<h5 title="tagline">Write is a few words whatever want to tell you.</h5>
<hr>
<form method="post" action="" class="wow fadeInUp animated" data-wow-delay="800ms">
<input type="text" name="name" placeholder="Your Name">
<input type="email" name="email" placeholder="Your Email">
<input type="text" name="subject" placeholder="Subjuct">
<textarea placeholder="Add Some Words" name="message"></textarea>
<input type="submit" value="Send">
</form>
</div><!-- End Hello Section!-->
<div class="footer wow fadeInUp animated" data-wow-delay="400ms">
<div class="foo wow fadeInUp animated" data-wow-delay="800ms">
<div class="go-to-top">
<a href="#">
<i class="fa fa-chevron-up"></i>
</a>
</div>
<div class="social wow fadeInUp animated" data-wow-delay="1ss">
<ul>
<li><a href="#"><i class="fa fa-behance"></i></a></li>
<li><a href="#"><i class="fa fa-google-plus"></i></a></li>
<li><a href="#"><i class="fa fa-facebook"></i></a></li>
<li><a href="#"><i class="fa fa-youtube-play"></i></a></li>
<li><a href="#"><i class="fa fa-twitter"></i></a></li>
</ul>
</div>
</div>
</div> <!-- End Footer -->
<!-- Adding Javascript File for Responsive Navigation Menu -->
<script src="js/jquery.js"></script>
<script src="js/wow.min.js"></script>
<script>
$(document).ready(function() {
$('#target').click(function() {
$('#responsive_nav').addClass('visible');
});
$('#responsive_nav i').click(function() {
$('#responsive_nav').removeClass('visible');
})
});
new WOW().init();
</script>
</body>
</html>