-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
143 lines (128 loc) · 7.8 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
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Naman's Project List</title>
<meta property='og:title' content='Title of the article"/>
<meta property='og:description' content='Description that will show in the preview"/>
<link rel="stylesheet" href="styles.css">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
<script src="https://kit.fontawesome.com/fb78ffc365.js" crossorigin="anonymous"></script>
<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=Bungee+Spice&family=MonteCarlo&family=Montserrat&display=swap" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">Navigation Section</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-item nav-link active" href="#about">About <span class="sr-only">(current)</span></a>
<a class="nav-item nav-link" href="#proj">Projects</a>
<a class="nav-item nav-link" href="#games">Games</a>
<a class="nav-item nav-link " href="#guitar">Music</a>
<a class="nav-item nav-link " href="#cta">Contact Me</a>
</div>
</div>
</nav>
<div class="container-fluid name">
<h1 class="Intro a">Hello!!</h1>
<h2 class="Intro b">I am Naman Khera </h2>
<h2 class="Intro c">A wannabe Web Developer</h2>
</div>
<div class="row introduction" id="about" >
<div class="col-lg-6">
<p>I am currently a second year BTECH student majoring in CSE.I recently enrolled in <a href="https://www.udemy.com/course/the-complete-web-development-bootcamp/">The Complete Web Development Bootcamp</a> offered by Udemy.This page is a collection of all the projects compiled by me during the first half of this course. </p>
</div>
<div class="position relative col-lg-6 ">
<img class="web-dev-image"src="https://img.freepik.com/free-vector/hand-drawn-web-developers_23-2148819604.jpg?w=2000" alt="">
</div>
</div>
<div class="container-fluid projects1" id="proj">
<div class="row ">
<div class="tindog col-lg-3">
<h1>TINDOG</h1>
<br><br>
<p>A sample webpage design for the product Tinder for dogs.Showcases features,some testimonials and the various pricing plans available. Check out the product by clicking <a href="https://nmn03.github.io/first_web_design/">here</a>.</p>
</div>
<div class="tindog position relative col-lg-3">
<img class="dog"src="images/iphone6.png" alt="">
</div>
<div class="drumkit col-lg-3">
<h1>DRUM KIT</h1>
<br><br>
<p>A portable drumset for you to practice and play one in your free time. Tap <a href="Drum Kit Starting Files/index.html">here</a> to get started!</p>
</div>
<div class="drumkit position relative col-lg-3">
<img class="drums"src="https://img.freepik.com/premium-vector/sketched-drum-set-symbol-modern-percussion-instrument-with-bass-drum_231873-6191.jpg?w=2000" alt="">
</div>
</div>
</div>
<div class="container-fluid games" id= "games">
<div class="row">
<div class="dicegame col-lg-3">
<h1>DICE GAME</h1>
<hr><hr>
<p>A simple dice game created using HTML,CSS and Javascript.</p>
<button type="button" class="btn btn-dark btn-lg btn-block"><a href="DICE GAME/dicee.html">PLAY</a></button>
</div>
<div class="dicegame position relative col-lg-3">
<img class="dice"src="https://tabletopgameplanet.com/wp-content/uploads/2021/11/die-games-with-5-dice-scaled.jpg" alt="">
</div>
<div class="simongame col-lg-3">
<h1>SIMON GAME</h1>
<hr><hr>
<p>Get ready to watch, remember, repeat! The Simon game is an exciting game of lights and sounds in which players must repeat random sequences and advance to higher levels.</p>
<button type="button" class="btn btn-dark btn-lg btn-block"><a href="Simon Game/index.html">PLAY</a></button>
</div>
<div class="simongame position relative col-lg-3">
<img class="simon" src="images/simon.jpg" alt="">
</div>
</div>
</div>
<section id="guitar">
<h1>Guitar</h1>
<div id="carouselGuitar" class="carousel slide" data-ride="false">
<div class="carousel-inner">
<div class="carousel-item active">
<p>In addition to being a wannabe developer, I am also an amateur guitarist.Swipe ahead to listen to some of the tunes I can play on the guitar.</p>
</div>
<div class="carousel-item">
<p>Hotel California Theme <button type="button" class="btn hotel btn-secondary btn-sm">PLAY</button> </p>
<p>Pink Panther Theme <button type="button" class="btn pink btn-secondary btn-sm">PLAY</button> </p>
<p>Godfather Theme <button type="button" class="btn godfather btn-secondary btn-sm">PLAY</button> </p>
<p>Pirates of the Carribean Theme <button type="button" class="btn pirates btn-secondary btn-sm">PLAY</button></p>
<p>Symphony Number 25 <button type="button" class="btn btn-secondary symphony btn-sm">PLAY</button> </p>
</div>
</div>
<a class="carousel-control-prev" href="#carouselGuitar" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
</a>
<a class="carousel-control-next" href="#carouselGuitar" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
</a>
</div>
</section>
<div class="container-fluid contact " id="cta">
<h1>CONTACT ME</h1>
<br>
<p>You can connect with me through any of the following mediums.</p>
<a href="https://www.linkedin.com/in/naman-khera-282320235"><i class="fa-brands fa-linkedin fa-2x"></i></a>
<a href="https://twitter.com/Naman04364483"><i class="fa-brands fa-twitter fa-2x"></i></a>
<a href="https://github.com/NMN03"><i class="fa-brands fa-github fa-2x"></i></a>
<a href="https://www.instagram.com/kheranaman08"><i class="fa-brands fa-instagram fa-2x"></i></a>
</div>
<div class="container-fluid footer">
Made by Naman Khera
</div>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<script src="index.js" charset="utf-8"></script>
</body>
</html>