-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
182 lines (175 loc) · 7.14 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Santosh | Portfolio </title>
<link rel="icon" href="favicon.png">
</head>
<body>
<!-- Header -->
<section id="header">
<div class="header container">
<div class="nav-bar">
<div class="brand">
<a href="#hero">
<h1><span> S</span>antosh <span> D</span>ahal</h1>
</a>
</div>
<div class="nav-list">
<div class="hamburger">
<div class="bar"></div>
</div>
<ul>
<li><a href="#hero" data-after="Home">Home</a></li>
<li><a href="#projects" data-after="Projects">Projects</a></li>
<li><a href="#about" data-after="About">About</a></li>
<li><a href="#contact" data-after="Contact">Contact</a></li>
</ul>
</div>
</div>
</div>
</section>
<!-- End Header -->
<!-- Hero Section -->
<section id="hero">
<div class="hero container">
<div>
<h1>Hello, <span></span></h1>
<h1>My Name is <span></span></h1>
<h1>Santosh <span></span></h1>
</div>
</div>
</section>
<!-- End Hero Section -->
<!-- Projects Section -->
<section id="projects">
<div class="projects container">
<div class="projects-header">
<h1 class="section-title">Recent <span>Projects</span></h1>
</div>
<div class="all-projects">
<div class="project-item">
<div class="project-info">
<h1>Project 1</h1>
<h2>Simple Snake Game Using Java</h2>
<p>The snake game was created back in 1970. In 1980, a new version of the snake game evolved. In the 1990s,
Nokia had this version of the snake game on its mobile phone. The game is related to moving a snakehead by
using the arrows left, right, up, and down to eat an apple. When you eat the apple, the snake becomes one
block bigger. If the snake hits the walls of the screen, the game is over. The score is dependent on the
number of apples eaten.</p>
</div>
<div class="project-img">
<img src="Snake.jpg" alt="img">
</div>
</div>
<div class="project-item">
<div class="project-info">
<h1>Project 2</h1>
<h2>JavaScript Calculator</h2>
<p>As we know, the Calculator is a portable device used in our daily life to perform various mathematical
functions such as addition, subtraction, multiplication, division, root, etc. However, we have scientific
or sophisticated calculators used to solve complex tasks such as trigonometry functions, degrees,
exponential operators, log functions, hyperbolic functions, square root, and so on. In this topic, we will
create a calculator program in JavaScript.</p>
</div>
<div class="project-img">
<img src="Calculator.jpg" alt="img">
</div>
</div>
<div class="project-item">
<div class="project-info">
<h1>Project 3</h1>
<h2>Online Banking System</h2>
<p>The online banking system developed using HTML, CSS, JavaScript, and PHP is a sophisticated and secure digital platform that allows users to manage their banking activities over the internet. This system combines the power of front-end technologies like HTML (for structuring web content), CSS (for designing visually appealing interfaces), and JavaScript (for interactive user experiences) with back-end scripting using PHP (for server-side processing and database interactions). </p>
</div>
<div class="project-img">
<img src="Bank.jpg" alt="img">
</div>
</div>
</div>
</div>
</div>
</section>
<!-- End Projects Section -->
<!-- About Section -->
<section id="about">
<div class="about container">
<div class="col-left">
<div class="about-img">
<!-- IMAGE -->
<img src="Pic.png" alt="Image">
</div>
</div>
<div class="col-right">
<h1 class="section-title">About <span>me</span></h1>
<h2>Bachelor in Computer Application Student</h2>
<p>Hello! As a beginner, I'm still in the early stages of exploring various programming languages. Recently, I've embarked on an online learning journey to expand my understanding in this realm. While my expertise primarily lies in Hyper Text Markup Language (HTML) and CSS, I've also delved into other domains such as MySQL, Photoshop, Git, GitHub, Java, Python, C, C++, and more.<br>
<br>
My aspiration is fueled by a deep-seated passion to evolve into a proficient Software Developer. My goal is to craft immersive, visually enchanting websites that resonate with users, leaving an indelible mark on their experience.</p>
</div>
</div>
</section>
<!-- End About Section -->
<!-- Contact Section -->
<section id="contact">
<div class="contact container">
<div>
<h1 class="section-title">Contact <span>info</span></h1>
</div>
<div class="contact-items">
<div class="contact-item">
<div class="icon"><img src="https://img.icons8.com/bubbles/100/000000/phone.png" /></div>
<div class="contact-info">
<h1>Phone</h1>
<h2><a href="tel:+9779800000000">977-9800000000</a></h2>
</div>
</div>
<div class="contact-item">
<div class="icon"><img src="https://img.icons8.com/bubbles/100/000000/new-post.png" /></div>
<div class="contact-info">
<h1>Email</h1>
<h2><a href="mailto:[email protected]">[email protected]</a></h2>
</div>
</div>
<div class="contact-item">
<div class="icon"><img src="https://img.icons8.com/bubbles/100/000000/map-marker.png" />
</div>
<div class="contact-info">
<h1>Address</h1>
<h2>Kageshwori Manohara Municipality-02, Aalapot Kathmandu, Nepal</h2>
</div>
</div>
</div>
</div>
</section>
<!-- End Contact Section -->
<!-- Footer -->
<section id="footer">
<div class="footer container">
<div class="brand">
<h1><span>S</span>antosh <span>D</span>ahal</h1>
</div>
<h2> Social Link</h2>
<div class="social-icon">
<div class="social-item">
<a href="https://github.com/saantdahal"><img
src="https://www.techspot.com/images2/downloads/topdownload/2021/04/2021-04-07-ts3_thumbs-8ba.png" /></a>
</div>
<div class="social-item">
<a href="https://www.viber.com/en/download/"><img
src="Viber.png" /></a>
</div>
<div class="social-item">
<a href="https://www.linkedin.com/in/santosh-dahal-83559b298/"><img
src="linkedin.png" /></a>
</div>
</div>
<p>Copyright © 2022 SantoshDahal. All rights reserved</p>
</div>
</section>
<!-- End Footer -->
<script src="node.js"></script>
</body>
</html>