-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
84 lines (83 loc) · 4.84 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
<!DOCTYPE html>
<html>
<head>
<link rel="icon" href="./img/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<meta charset="utf-8">
<!-- For JavaScript CDN -->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<!-- For CSS CDN -->
<link href='https://fonts.googleapis.com/css?family=Roboto:400,700' rel='stylesheet'>
<link href="https://fonts.googleapis.com/css?family=Fredericka+the+Great" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- For CSS local -->
<link rel="stylesheet" href="./css/materialize.min.css" type="text/css">
<link rel="stylesheet" href="./css/style.css" type="text/css">
<link rel="stylesheet" href="./css/aos.css">
<!-- For JavaScript local -->
<script src="./js/materialize.min.js"></script>
<script src="./js/aos.js"></script>
<script src="./js/script.js"></script>
<!-- Title -->
<title>Abhishek Dutta | Home</title>
</head>
<body>
<header class="navbar-fixed">
<nav class="nav-head z-depth-0" hidden="true" style="background:rgba(0,77,64,0.9);">
<div class="nav-wrapper">
<div class="container">
<h4 class="white-text text-darken-4 brand-logo hide-on-med-and-down" style="font-family: 'Fredericka the Great', cursive;">Abhishek Dutta</h4>
<ul id="nav-mobile" class="right hide-on-med-and-down table-of-content">
<li><a class="tooltipped" data-position="bottom" data-tooltip="About Me" href="#introduction"><i class="material-icons">person</i></a></li>
</ul>
</div>
<h4 class="white-text text-darken-4 brand-logo center hide-on-large-only" style="font-family: 'Fredericka the Great', cursive;">AD</h4>
<div class="container">
<span class="hide-on-large-only" style="font-size:30px;cursor:pointer" onclick="openNav()">☰</span>
</div>
</div>
</nav>
</header>
<!-- SideNav for Mobile -->
<div id="myNav" class="overlay">
<!-- Button to close the overlay navigation -->
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
<!-- Overlay content -->
<div class="overlay-content">
<a href="#introduction" onclick="closeNav()">About Me</a>
</div>
</div>
<!-- Main Data Section START -->
<!-- Lander Section START -->
<div id="" class="parallax-container scrollspy">
<div class="section no-pad-bot">
<div class="container">
<br><br>
<h1 data-aos="zoom-in-down" data-aos-duration="2000" data-aos-once="true" class="header center white-text text-lighten-2" style="font-family: 'Lobster', cursive;font-size:75px">Hi! I am Abhishek Dutta</h1>
<div class="row center">
<h5 data-aos="fade-down"data-aos-duration="2000" data-aos-once="true" class="header col s12 light white-text" style="font-family: 'Lobster', cursive;font-size:30px">Engineer by heart. Designer by passion</h5>
</div>
<div class="row center">
<a data-aos="zoom-out"data-aos-duration="2000" data-aos-once="true" href="#introduction" id="toAboutMe" class="btn-large white-text" style="background:rgba(0,77,64,0.5);">Get Started</a>
</div>
<br><br>
</div>
</div>
<div class="parallax"><img src="./img/Eclipse.gif" alt="Unsplashed background img 1" style="display: block; transform: translate3d(-50%, 241px, 0px);opacity:0.3"></div>
</div>
<!-- Lander Section END -->
<!-- My Introduction Section START -->
<div id="introduction" class="section grey lighten-2 scrollspy">
<div class="row container">
<h2 data-aos="zoom-in" data-aos-once="true" class="header">My Expertise</h2>
<p data-aos="zoom-out" data-aos-once="true" class="grey-text text-darken-3 lighten-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos voluptatibus tempora itaque eveniet libero odio soluta accusamus nihil veniam minus quae suscipit placeat consectetur, maxime et sint, aspernatur provident consequuntur cupiditate quisquam non possimus. Hic voluptates provident culpa eum, sint aliquam ullam, quo, inventore vero minima molestiae? Commodi voluptatum harum temporibus sed quo sequi rerum cumque molestiae suscipit, qui minus id non, ea quia. Quam dicta, repudiandae, repellendus cum aliquid veritatis nam fuga eaque voluptates officia ipsa, quisquam quis, ut.</p>
</div>
</div>
<div class="parallax-container">
<div class="parallax"><img src="./img/WallOfFame.jpg"></div>
</div>
<!-- My Introduction Section END -->
<!-- Main Data Section END -->
</body>
</html>