-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
158 lines (156 loc) · 7.85 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
<!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">
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="index.css">
<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=Poppins&display=swap" rel="stylesheet">
<link rel="stylesheet" href="responsiveness.css">
<title>Atanu Ghosh</title>
</head>
<body>
<header class="headerMain">
<nav class="navigationBar">
<ul class="navMenu">
<li class="list_menu"><a href="http:/codersden.000webhostapp.com" class="a_tags_1">Home</a></li>
<li class="list_menu"><a href="#heading_id" class="a_tags_1">Services</a></li>
<li class="list_menu"><a href="#heading_id2" class="a_tags_1">Experience</a></li>
<li class="list_menu"><a href="#heading_id3" class="a_tags_1">About Me</a></li>
<li class="list_menu"><a href="#heading_id4" class="a_tags_1">Contact Me</a></li>
</ul>
<div id="menu" onclick="onClickMenu()">
<span class="bar" id="bar1"></span>
<span class="bar" id="bar2"></span>
<span class="bar" id="bar3"></span>
</div>
</nav>
</header>
<main class="main_body">
<div class="container_mypng">
<img src="mypng.png" alt="MyPhoto" id="myPng">
<h2 class="my_heading">I am a <span class="autoType"></span></h2>
</div>
<div class="text_box-1">
<p class="para">I am a student of Techno Main Salt Lake <br>
B.Tech Electrical Engineering
</p>
</div>
</main>
<section class="sub_sections">
<h2 id="heading_id">Services</h2>
<div class="image_container">
<img src="https://source.unsplash.com/1920x1080/?react, javascript" alt="image" class="images">
<ul>
<li class="list_items_myFav" id="html_item"><i class="fa-brands fa-html5"></i></li>
<li class="list_items_myFav" id="css_item"><i class="fa-brands fa-css3-alt"></i></li>
<li class="list_items_myFav" id="js_item"><i class="fa-brands fa-square-js"></i></li>
<li class="list_items_myFav" id="node_item"><i class="fa-brands fa-node-js"></i></li>
<li class="list_items_myFav" id="react_item"><i class="fa-brands fa-react"></i></li>
<li class="list_items_myFav" id="git_item"><i class="fa-brands fa-git-alt"></i></li>
<li class="list_items_myFav" id="github_item"><i class="fa-brands fa-square-github"></i></li>
</ul>
</div>
</section>
<section class="sub_sections2">
<h2 id="heading_id2">Experience</h2>
<div class="services_container1">
<div class="container_s1">
<div role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="--value:70">HTML</div>
</div>
<div class="container_s2">
<div role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="--value:60">CSS</div>
</div>
<div class="container_s3">
<div role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="--value:50">JS</div>
</div>
</div>
<div class="services_container2">
<div class="container_s4">
<div role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="--value:40">NODE</div>
</div>
<div class="container_s5">
<div role="progressbar" aria-valuenow="35" aria-valuemin="0" aria-valuemax="100" style="--value:35">REACT</div>
</div>
<div class="container_s6">
<div role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="--value:80">GIT</div>
</div>
</div>
</section>
<section class="about_me1">
<h2 id="heading_id3">About Me</h2>
<div class="about_page_image">
<img src="https://source.unsplash.com/1920x1080/?nature, water" alt="nature" class="images2">
</div>
<div class="text_box_about_section">
<p class="para2"> I am a student of Techno Main Salt Lake. I worked in many projects. <br> I am 1st year student of Electrical Engineering branch</p>
</div>
</section>
<section class="form_class">
<div class="form_container">
<h2 id="heading_id4">Contact Me</h2>
<form class="form_index" onsubmit="sendEmail(); reset(); return false;">
<input type="text" id="firstName" placeholder="First Name" required>
<input type="text" id="lastName" placeholder="Last Name" required>
<input type="email" id="email_user" placeholder="Email" required>
<input type="text" id="ph_number" placeholder="Phone Number" required minlength="10" maxlength="10">
<textarea id="message" cols="30" rows="5" required placeholder="How Can I Help You?"></textarea>
<button type="submit">Send</button>
</form>
</div>
</section>
<footer class="footer_of_the_website">
<div class="social">
<a href="https://www.instagram.com/_syntax.error.69_/"><i class="fab fa-instagram"></i></a>
<a href="https://www.linkedin.com/in/sandy-ghosh-b29707116/"><i class="fab fa-linkedin"></i></a>
<a href="https://www.facebook.com/hadhamsing.chawla/"><i class="fab fa-facebook"></i></a>
<a href="#"><i class="fab fa-twitter"></i></a>
</div>
<ul class="list_1">
<li><a href="http://127.0.0.1:5500/index.html">Home</a></li>
<li><a href="http://blogdroid.ml/portofolio/">Services</a></li>
<li><a href="http://blogdroid.ml/project-details/">Experience</a></li>
<li><a href="http://blogdroid.ml/about/">About Me</a></li>
</ul>
<p class="copyright">Atanu Ghosh @2022 <br>
<br>
Made With Love With HTML, CSS, JS</p>
</footer>
<script>
var typed = new Typed(".autoType", {
strings: ["Developer", "Designer", "Coder", "Gamer", "Student", "Youtuber"],
typeSpeed: 150,
backSpeed: 150,
loop: true
});
function sendEmail() {
Email.send({
Host : "smtp.elasticemail.com",
Username : "[email protected]",
Password : "blogsposts1234",
To : '[email protected]',
From : document.getElementById("email_user").value,
Subject : "New Contact Form Enquiry",
Body : "This is the form"
}).then(
message => alert(message)
);
}
const menu = document.querySelector("#menu");
const navMenu = document.querySelector(".navMenu");
menu.addEventListener("click", () => {
menu.classList.toggle("active");
navMenu.classList.toggle("active");
})
document.querySelectorAll(".list_menu").forEach(n => n.addEventListener("click", () => {
menu.classList.remove("active");
navMenu.classList.remove("active");
}))
</script>
<script src="https://smtpjs.com/v3/smtp.js"></script>
</body>
</html>