-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
192 lines (160 loc) · 8.03 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
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Comforter&family=Merriweather&family=Montserrat:ital@1&family=Sacramento&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@100;300;400;500;900&family=Ubuntu:wght@300;400;700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Comfortaa:wght@500&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />
<link rel="icon" href="icon-cat.ico">
<title>Sandeep</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="navigation">
<input type="checkbox" class="navi-checkbox" id="navi-toggle">
<label for="navi-toggle" class="navi-button">
<span class="navi-icon"> </span>
</label>
<div class="navi-background"> </div>
<div class="navi-nav">
<ul class="navi-list">
<li class="navi-item"><a id ="n1" href="#top-b" class="navi-link"><span>01</span> About </a></li>
<li class="navi-item"><a href="#top-c" class="navi-link"><span>02</span> Interests</a></li>
<li class="navi-item"><a href="#top-d" class="navi-link"><span>03</span> Contact</a></li>
</ul>
</div>
</div>
<header class="header">
<div class="logo-box">
<h5>Sandy</h5>
</div>
<div class="text-box">
<h1 class="heading-primary">
<span class="heading-primary-main">I'm Sandeep</span>
<span class="heading-primary-sub">a programmer.</span>
</h1>
</header>
<section id="top-b">
<div class="middle-container">
<div class="profile">
<img class="boy" src="images/boy.png" alt="profile-pic">
<h2>Hello.</h2>
<p class="intro">Hey there! I am a web developer enthusiast, love programming and prefer tea over coffee any time ❤️</p>
</div>
<hr>
<div class="skills">
<h2 class="heading-secondary">My Skills.</h2>
<div class="skill-row">
<img class="imA" src="images/java.png" alt="pic 1">
<h3 class="h3L">Java</h3>
<p class="h3L">I'm a passionate Java Developer, so I know how to solve your problems regarding to Java.Though there are other Coding languages avaiable still Java is the best Coding Language according to me and also gained knowledge in Java
GUI.</p>
</div>
<div class="skill-row">
<img class="imB" src="images/programming.gif" alt="pic 2">
<h3 class="h3R">Web-Development</h3>
<p class="h3R">I really enjoy doing web development. Over time, I have gained and wield my skills for designing and developing mobile and web applications and ongoing study on the latest in full stack developing and programming.I am
proficient in HTML Structuring, designing with advanced CSS , JavaScript and Frameworks. </p>
</div>
<div class="skill-row">
<img class="imA" src="images/sql.png" alt="sql-img">
<h3 class="h3L">Topics</h3>
<p class="h3L">I enjoy working with DSA, Operating System , Computer Organization , Api's , and working with Data Base .</p>
</div>
</section>
<hr>
<section id="top-c">
<div class="m-interest" style="padding-top:2px;">
<h2 class="heading-secondary" style="padding-bottom:0; margin-top:0">What i love to do.</h2>
<div class="carousel">
<div class="carousel-item">
<img src="images/imP.png" alt="">
<h3 class="h3T">Problem Solving</h3>
<p class="testimonial-text">I like to solve a problem, then understand how to translate the algorithm into something a computer can do, and finally how to write the specific syntax to get the job done.</p>
</div>
<div class="carousel-item">
<img src="images/sing.png" alt="">
<h3 class="h3T">Singing</h3>
<p class="testimonial-text">Singing is my driving force, it gives me miraculous energy and boots my system.</p>
</div>
<div class="carousel-item">
<img src="images/game.png" style="width:70%;" alt="">
<h3 class="h3T">Gaming</h3>
<p class="testimonial-text">I enjoy gaming the most. My favourite categories of games are FPS, RPG and Open world.</p>
</div>
<div class="carousel-item">
<img src="images/movie.png" alt="">
<h3 class="h3T">Movies & TV Series</h3>
<p class="testimonial-text">I am an ardent enjoyer of movies and tv series. I love watching science fiction, drama and thriller movies.</p>
</div>
</div>
<h3 style="padding-bottom :15px;">< <span style="visibility:hidden; ">asasasasasasasasas </span>> </h3>
</div>
</section>
<hr>
<section id="top-d">
<div class="contact-me">
<h2 class="heading-secondary">Get In Touch</h2>
<div class="smallChange">
<span style="--here:1;">i</span>
<span style="--here:2;">f</span>
<span style="--here:3; visibility:hidden">.</span>
<span style="--here:4;">y</span>
<span style="--here:5;">o</span>
<span style="--here:6;">u</span>
<span style="--here:7; visibility:hidden">.</span>
<span style="--here:8;">l</span>
<span style="--here:9;">o</span>
<span style="--here:10;">v</span>
<span style="--here:11;">e</span>
<span style="--here:12; visibility:hidden">.</span>
<span style="--here:13;">s</span>
<span style="--here:14;">i</span>
<span style="--here:15;">n</span>
<span style="--here:16;">g</span>
<span style="--here:17;">i</span>
<span style="--here:18;">n</span>
<span style="--here:19;">g</span>
<span style="--here:20; visibility:hidden">.</span>
<span style="--here:21;">a</span>
<span style="--here:22;">s</span>
<span style="--here:23; visibility:hidden">.</span>
<span style="--here:24;">m</span>
<span style="--here:25;">u</span>
<span style="--here:26;">c</span>
<span style="--here:27;">h</span>
<span style="--here:28; visibility:hidden">.</span>
<span style="--here:29;">a</span>
<span style="--here:30;">s</span>
<span style="--here:31; visibility:hidden">.</span>
<span style="--here:32;">i</span>
<span style="--here:33; visibility:hidden">.</span>
<span style="--here:34;">d</span>
<span style="--here:35;">o</span>
</div>
<h6>^ touch ^</h6>
<p class="contact">Love singing as much as i do? Let's do it together! We can code while we sing 😜.</p>
<a class="btn" href="mailto:[email protected]"><span>CONTACT ME</span><span>CONTACT ME</span></a>
</div>
<div class="bottom-container" id="contact">
<a class="link" href="https://www.linkedin.com/">LinkedIn</a>
<a class="link" href="https://github.com/">Github</a>
<a class="link" href="https://www.instagram.com/">Instagram</a>
<p class="copyRight"> @ Sandeep Neeli.</p>
</div>
</section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.carousel').carousel();
});
</script>
<script src="index.js" charset="utf-8"></script>
</body>
</html>