-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
177 lines (162 loc) · 5.77 KB
/
index.html
File metadata and controls
177 lines (162 loc) · 5.77 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
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
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<title> Portfolio | Slayer </title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="scroll-button">
<a href="#home"><i class="fas fa-arrow-up"></i></a>
</div>
<nav>
<div class="navbar">
<div class="logo"><a href="#">Portfolio.</a></div>
<ul class="menu">
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#skills">Skills</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#contact">Contact</a></li>
<div class="cancel-btn">
<i class="fas fa-times"></i>
</div>
</ul>
<div class="media-icons">
<a href="#"><i class="fab fa-facebook-f"></i></a>
<a href="#"><i class="fab fa-twitter"></i></a>
<a href="#"><i class="fab fa-instagram"></i></a>
</div>
</div>
<div class="menu-btn">
<i class="fas fa-bars"></i>
</div>
</nav>
<section class="home" id="home">
<div class="home-content">
<div class="text">
<div class="text-one">Hello,</div>
<div class="text-two">I'm Sujin</div>
<div class="text-three">Developer</div>
<div class="text-four">From Nagercoil</div>
</div>
<div class="button">
<button>Hire Me</button>
</div>
</div>
</section>
<section class="about" id="about">
<div class="content">
<div class="title"><span>About Me</span></div>
<div class="about-details">
<div class="left">
<img src="images/about.jpg" alt="">
</div>
<div class="right">
<div class="topic">Designing Is My Passion</div>
<p>The pain itself is a lot of pain, it's enhanced by the adipiscing process. They forsake it, but the truth is the result of it, let us drive back the pleasure itself, no one should be blamed, accepted or accepted by the error of hatred. Let the softness of the accusers seek the pleasure, he rejects the toil of the pain, let them please him; This choice of annoyance is just right for them to ask us to do those things which will open up greater pardon to these righteous people, or to discover the pleasures by which the error of life prevents the pleasures of those present? They don't open the door, they don't know how to carry the message through flight at other times, and, at the right time, we get the blame for the distinction from which we're free from hardships. It is easy to pardon the presents, and these are just the most gratifying. </p>
<div class="button">
<button>Download CV</button>
</div>
</div>
</div>
</div>
</section>
<section class="skills" id="skills">
<div class="content">
<div class="title"><span>My Skills</span></div>
<div class="skills-details">
<div class="text">
<div class="topic">Skills Reflects Our Knowledge</div>
<p>A skill may be called an art when it represents a body of knowledge or branch of learning, as in the art of medicine or the art of war. Although the arts are also skills, there are many skills that form an art but have no connection to the fine arts. A practice is when the learned skill is put into practice. An art or skill may be the basis for a profession, trade, or craft.</p>
<div class="experience">
<div class="num">2</div>
<div class="exp">Years Of <br> Experience</div>
</div>
</div>
<div class="boxes">
<div class="box">
<div class="topic">HTML</div>
<div class="per">90%</div>
</div>
<div class="box">
<div class="topic">CSS</div>
<div class="per">80%</div>
</div>
<div class="box">
<div class="topic">JavScript</div>
<div class="per">70%</div>
</div>
<div class="box">
<div class="topic">PHP</div>
<div class="per">60%</div>
</div>
</div>
</div>
</div>
</section>
<section class="services" id="services">
<div class="content">
<div class="title"><span>My Services</span></div>
<div class="boxes">
<div class="box">
<div class="icon">
<i class="fas fa-desktop"></i>
</div>
<div class="topic">Web Devlopment</div>
</div>
<div class="box">
<div class="icon">
<i class="fas fa-paint-brush"></i>
</div>
<div class="topic">Graphic Design</div>
</div>
<div class="box">
<div class="icon">
<i class="fas fa-chart-line"></i>
</div>
<div class="topic">Digital Marketing</div>
</div>
<div class="box">
<div class="icon">
<i class="fab fa-android"></i>
</div>
<div class="topic">Icon Design</div>
</div>
<div class="box">
<div class="icon">
<i class="fas fa-camera-retro"></i>
</div>
<div class="topic">Photography</div>
</div>
<div class="box">
<div class="icon">
<i class="fas fa-tablet-alt"></i>
</div>
<div class="topic">Apps Devlopment</div>
</div>
</div>
</div>
</section>
<section class="contact" id="contact">
<div class="content">
<div class="title"><span>Contact Me</span></div>
<div class="text">
<div class="topic">Have Any Project?</div>
<p>Click here to contact me. Let's Have a Chat!</p>
<div class="button">
<button>Contact me</button>
</div>
</div>
</div>
</section>
<footer>
<div class="text">
<span>Created By <a href="#">Sujin</a> | © 2021 </span>
</div>
</footer>
<script src="script.js"></script>
</body>
</html>