-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
166 lines (160 loc) · 8.86 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Hi! I am Saqib Hussain a front end developer passionate about technology, human psychology and music. To know more about me click on my website....">
<meta name="keywords" content="Front-end development, Designing, Programming, Personal portfolio">
<meta name="author" content="Saqib Hussain">
<title>Hey, I'm Saqib</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/responsive.css">
<link rel="icon" href="images/android-chrome-512x512.png">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="bgcontainer">
<header>
<nav>
<div class="logo">
<a href="#home">
<div class="crown">♔</div><span class="initials">SH</span>
<div class="wheel">✺</div>
</a>
</div>
<div class="openMenu" onclick="toggleMenu();"></div>
<ul class="menu">
<li><a href='#home' onclick="toggleMenu();">Home</a></li>
<li><a href='#about' onclick="toggleMenu();">About</a></li>
<li><a href='#skills' onclick="toggleMenu();">skills</a></li>
<li><a href='#work' onclick="toggleMenu();">Work</a></li>
<li><a href='#testimonials' onclick="toggleMenu();">Testimonials</a></li>
<li><a href='#Contact' onclick="toggleMenu();">Contact</a></li>
<div class="closeMenu"><i class="fa fa-times"></i></div>
</ul>
</nav>
</header>
<main>
<div class="intro-container" id="home">
<div class="intro-text-container">
<span class="line1">Hello, I'm</span><br><span class="line2">Saqib Hussain</span><br><span class="line3">Passionate About Technology and Music</span><br>
<button> <a href="#about">ABOUT ME</a></button>
</div>
</div></div>
<div class="about-me" id="about">
<h2>About Me</h2>
<div class="content">
<div class="content-box"><h3>I am a Front-end Web Developer!</h3>
My name is Saqib Hussain. I am a student at National Institute Of Technology(NIT) Srinagar currently pursuing B.Tech in Information Technology. I am a front end developer currently learning PHP and DSA. I love to learn about new technologies and will soon start learning about Artificial Intelligence and Machine Learning. Beside programming I love to play guitar and I also know touch typing. If you would like to know more about me feel free to <a href="#Contact">contact me</a>. </div><div>
<img src="images/myimg1.jpg" alt="image"></div></div>
</div>
<div class="skills center" id="skills">
<h2>My Skills</h2>
<p>The Advanced Level is Mastery of the Basics</p>
<div class="skill-box">
<div class="skill-card">
<img class="html" src="images/html icon.png" alt="ICON">
<h3>HTML5</h3>I have used HTML in all my webistes and have an intermediate understanding about its working.
</div>
<div class="skill-card">
<img class="css" src="images/css icon.png" alt="ICON">
<h3>CSS3</h3>CSS is one of my strong suit and I have a very good understanding of keyframes and responsive web design.
</div>
<div class="skill-card">
<img class="js" src="images/js icon.png" alt="ICON">
<h3>JavaScript</h3>I am a beginner in JavaScript and progressing to increase my skill by using JS in my projects.
</div>
<div class="skill-card">
<img src="images/php icon.png" alt="ICON">
<h3>PHP</h3>I am in the learning phase as I have just started taking a PHP course.
</div>
<div class="skill-card">
<img class="C_lang" src="images/c 240.png" alt="ICON">
<img class="C_lang" src="images/cpp 240.png" alt="ICON">
<h3>C/C++</h3>I have a good understanding of C/C++ and know about OOP, memory allocation and implementation of algorithms using these languages.
</div>
<div class="skill-card">
<img src="images/touchtyping icon.png" alt="ICON">
<h3>Touch Typing</h3>I have a been doing touch typing for a month now and have an average typing speed of 60 wpm and a top speed of 81 wpm.
</div>
</div>
</div>
<div class="work center" id="work">
<h2>My Projects</h2>
<p>Every project is different & Learnings are special.</p>
<img src="images/product1.jpg" alt="Image">
<!-- <iframe src="Project 3(word,character, sentence counter) (Done)/index.html" width="700px" height="600px"></iframe> --><!--Remember this you have to add your projects here using iframes tag-->
<img src="images/product2.jpg" alt="Image">
<img src="images/product3.jpg" alt="Image">
<img src="images/product4.jpg" alt="Image">
<button>VIEW MORE</button>
</div>
<div id="testimonials"><br><br><br><br><br></div>
<div class="testimonials center">
<div class="head"><h2>Testimonials</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere, in minus</p></div>
<div class="content">
<div class="content-box">
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Et voluptates Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia accusamus eligendi impedit nostrum quaerat. Obcaecati reiciendis numquam tempora. Vitae provident cum qui expedita sunt tempora. deleniti nam! Quasi, repellat, iure possimus nihil velit reiciendis excepturi ut dolorum dolor quidem maxime</p>
<h3>Mark Wood</h3>
<div>Lead Analyst</div>
</div>
<div class="content-box">
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Et voluptates Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia accusamus eligendi impedit nostrum quaerat. Obcaecati reiciendis numquam tempora. Vitae provident cum qui expedita sunt tempora. deleniti nam! Quasi, repellat, iure possimus nihil velit reiciendis excepturi ut dolorum dolor quidem maxime</p>
<h3>Adam Smith</h3>
<div>Creative Designer</div>
</div>
</div>
</div>
<div id="Contact" class="contact center">
<h2>Contact Me</h2>
<p>Get in touch with us by any of the following convenient means Lorem ipsum, dolor sit amet consectetur adipisicing elit. Incidunt, aut Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius, est.</p>
<div class="content">
<div class="contact-info">
<h3>Contact Info</h3>
<div class="container">
<div class="address">
<h4> <i class="fa fa-map-marker"></i>Address</h4>
<p>Near Mecca Masjid,
Gulmarg colony,Bathindi,
Jammu,180001</p>
</div>
<div class="phone">
<h4><i class="fa fa-phone"></i>Phone</h4>
<p>+91 7006280107</p>
</div>
<div class="email">
<h4><i class="fa fa-envelope"></i>Email</h4>
<p>saqibhussain596@gmail.com</p>
</div>
</div></div>
<div class="contact-form">
<h3>Write To Me</h3>
<div>
<input type="text" placeholder="Full Name"></div>
<div><input type="email" placeholder="Email"></div>
<div><textarea name="message" id="" cols="30" rows="10" placeholder="Your Message"></textarea>
<div><button>SEND</button></div>
</div>
</div>
</div>
</div>
</main>
<footer class="center">
Copyright © 2022! All rights reserved
</footer>
<script>
window.addEventListener("scroll", function () {
var nav = document.querySelector("nav");
nav.classList.toggle("sticky", window.scrollY > 0);
});
function toggleMenu() {
var menuToggle = document.querySelector(".openMenu");
menuToggle.classList.toggle("active");
var menu = document.querySelector(".menu");
menu.classList.toggle("active");
}
</script>
</body>
</html>