-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
124 lines (106 loc) · 6.6 KB
/
index.html
File metadata and controls
124 lines (106 loc) · 6.6 KB
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
<!DOCTYPE html>
<html>
<head>
<style>
*{margin:0px;}body{font-family:"open sans",sans-serif;font:aerial}
.hj5 li{list-style:none;font-size:20px;}
.t3 img{width:80%;height:150px;margin:5%;opacity:0.8;transition:all 0.3s ease-in-out;z-index:-2;border-radius:0%;border:solid 2px white;}
.t3 img:hover{opacity:0.7;transition:all 0.3s ease-in-out;border-radius:0;background-color:black;}
.t4 img{height:150px;margin:4%;opacity:0.8;transition:all 0.3s ease-in-out;z-index:-2;border-radius:50%;}
.t3 a{color:white; text-decoration:none; font-size:12px;outline:none;border:none;}
.t3 figcaption{margin-top:-3%;}
.t5 img{height:100px;margin:4%;opacity:0.9;transition:all 0.3s ease-in-out;z-index:-2;}
#menu{margin-left:30px;padding-top:10px;height:30px;font-size:20px;transition:all 0.3s ease-in-out;}
#menu:hover{font-weight:bold;font-size:25px;transition:all 0.3s ease-in-out;}
</style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
window.location = "http://sonukedia55.github.io/New";
$("document").ready(function(){
$('#picup2').css({'opacity' :0},0);
$(".m1").click(function() {
$('html, body').animate({
scrollTop: $(".t1").offset().top
}, 1000);
});
$(".m2").click(function() {
$('html, body').animate({
scrollTop: $(".t22").offset().top
}, 1000);
});
$(".m3").click(function() {
$('html, body').animate({
scrollTop: $(".t32").offset().top
}, 1000);
});
$(".m4").click(function() {
$('html, body').animate({
scrollTop: $(".t4").offset().top
}, 1000);
});
$(".m5").click(function() {
$('html, body').animate({
scrollTop: $(".t52").offset().top
}, 1000);
});
$(window).scroll(function(){
var wScroll = $(window).scrollTop();
$('#check').val(wScroll);
if(wScroll<350){$('#picup').css({'transform': 'translate(0px,'+wScroll/(-8.1)+'%)'});
$('#ppic').css({'transform': 'translate(0px,'+wScroll/(-2.1)+'%)'});
$("#picup2").css({'opacity' :0,'transition' : 'all 0s ease-in-out'});
$("#picup").css({'opacity' :1,'transition' : 'all 0s ease-in-out'});
$("#ppic").css({'opacity' :1,'transition' : 'all 0s ease-in-out'});$('#til')
}else{$("#picup2").css({'opacity' :1,'transition' : 'all 0.2s ease-in-out'});
$("#picup").css({'opacity' :0,'transition' : 'all 0s ease-in-out'});
$("#ppic").css({'opacity' :0,'transition' : 'all 0s ease-in-out'});}
});});
</script>
</head>
<body bgcolor="#20A5A5">
<div style="width:100%;">
<img id="picup" src="back.jpg" style="width:100%;position:fixed;margin:0px;height:400px;z-index:-1;margin-top:-400px;"/>
<img id="ppic" src="sonu.jpg" style="width:200px;position:fixed;margin:0px;height:200px;z-index:-1;margin-top:-230px;margin-left:80%;border:solid 6px white;"/></div>
<div id="picup2" style="width:100%;background-color:#246370;position:fixed;height:50px;margin-top:-400px;color:white;font-size:20px;z-index:3;">
<a id="menu" class="m1" style="float:left">Personal Details</a><a class="m2" id="menu" style="float:left">Educational Details</a><a class="m3" id="menu" style="float:left">Work Experience</a><a class="m5" id="menu" style="float:left">Skills</a><a class="m4" id="menu" style="float:left">Hobbies</a>
<a align="middle" style="float:right"> <h4 style="margin-top:10px;float:left;">Sonu Kedia </h4> <img src="sonu.jpg" style="height:50px"/></a></div>
<div id="til" style="position:absolute;font-size:50px;width:100%;margin-top:-80px;color:white;"><b>SONU KEDIA</b></div>
<div style="width:100%;height:1500px;background-color:#EBEEEE;margin-top:400px;z-index:2;"><br>
<div class="t1" style="width:100%; text-align:center;font-size:20px;color:grey;">
<h2 align="left" style="margin-left:5%;color:#246370"><br>Personal Details</h2><br><hr color="#246370" style="width:80%;margin-left:5%;height:5px;"><br>
<b>Name</b>: Sonu Kumar Kedia<br><br>
<b>1st Year BTech</b><br><br>
<b>College</b>: IIT Ropar<br><br>
<b>City</b>: Ropar, Punjab<br><br>
<b>Email</b>: sonukedia00@gmail.com<br><br>
<b>Birth</b>: July, 1999<br><br>
</div>
<h2 class="t22" align="left" style="margin-left:5%;color:#246370"><br>Educational Details</h2><br><hr color="#246370" style="width:80%;margin-left:5%;height:5px;"><br>
<div class="t2" style="margin-top:-4%;background-image:url(t2.jpg);background-size:100% 100%;background-position:top center;background-repeat:repeat;background-attachment:fixed;width:100%;height:400px;" >
<div style="text-align:right;z-index:2;">
<ul class="hj5" style="margin-top:50px;color:white;margin-right:10%;"><br><br><br><br>
<li style="color:#C1ECF5;font-size:25px;"><b><u>Bachelor in Technology </u></b></li><br>
<li><b>College</b>: IIT Ropar</li><br>
</ul>
</div></div><br>
<div style="margin-top:5%;background-image:url(t3.jpg);background-size:100% 100%;background-position:top center;background-repeat:repeat;background-attachment:fixed;width:100%;min-height:400px;" >
<h2 class="t32" align="left" style="margin-left:5%;color:#246370"><br>Work Experience</h2><br><hr color="#246370" style="width:80%;margin-left:5%;height:5px;"><br>
<div class="t3" style="text-align:center;z-index:2;margin-left:15%;">
<div style="width:30%;margin:5%;float:left;"><a href="http://www.iitrpr.ac.in/student-affairs/"><img src="sa.jpg" /><br>Student Affaris Website IIT Ropar</a></div>
<div style="width:30%;margin:5%;float:left;"><a href="http://www.hellobuddy.esy.es"><img src="hello.png" /><br>A Social Media Website</a></div>
<div style="width:30%;margin:5%;float:left;"><a href="http://www.woowfoods.net16.net"><img src="wow.png"/><br>A Online food-sevices Website</a></div>
<div style="width:30%;margin:5%;float:left"><a href="http://www.advitiya.in"> <img src="advitiya.png"/> <br>Advitiya IIT Ropar techfest Website</a></div>
</div><div style="clear:both;"/>
<br>
<h2 class="t52" align="left" style="margin-left:5%;color:#F2BF22"><br>Skills</h2><br><hr color="#F2BF22" style="width:80%;margin-left:5%;height:5px;"><br>
<div class="t5" style="text-align:center;z-index:2;">
<img src="html.png" /><img src="java.png" /><img src="php.png" /><img src="python.png" /><img src="android.png" /><img src="photoshop.png" /><img src="solid.png" />
</div></div>
<div class="t4" style="margin-top:3%;width:100%;height:400px;" >
<h2 align="left" style="margin-left:5%;color:#F2BF22"><br>Hobbies</h2><br><hr color="#F2BF22" style="width:80%;margin-left:5%;height:5px;"><br>
<div style="text-align:right;z-index:2;">
<img src="football.JPG" /><img src="computer.JPG" /><img src="piano.JPG" /><img src="photo.JPG" /><img src="art.JPG" />
</div></div>
</div>
</body>
</html>