-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
149 lines (136 loc) · 6.29 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vasanthkumar s | portfolio</title>
<!-- favicon -->
<link rel="shortcut icon" href="./assets/img/vk-favicon.png" type="image/x-icon">
<!-- css links -->
<link rel="stylesheet" href="./assets/css/style.css">
<!-- icons from awesome material -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"
integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
<!-- theme picket -->
<div class="theme-picker">
<input type="color" id="theme" title="select color theme">
</div>
<!-- header content -->
<header>
<div>
<a href="./index.html"><span class="logo-text"><span class="blue-span">Vasanth</span>kumar S</span></a>
</div>
<div class="header-links">
<!-- cancel icon for menu in mobile viewport -->
<div class="cancel-icon">
<i class="fa-solid fa-xmark" style="font-size: larger;"></i>
</div>
<div>
<ul>
<li><a href="./index.html">Home</a></li>
<li><a href="./index.html#about">About</a></li>
<li><a href="./index.html#contact">Contact</a></li>
</ul>
</div>
<div>
<a href="https://drive.google.com/file/d/164BfxS2BcTXPfFd3sinxmcMNIuRD2ikx/view?usp=drive_link"
target="_blank"><button>Download Resume</button></a>
</div>
</div>
<!-- menu icon for menu in mobile viewport -->
<div class="menu-icon">
<i class="fa-solid fa-bars"></i>
</div>
</header>
<!-- main content -->
<main>
<!-- hero section -->
<section class="hero-section">
<div class="hero-text">
<h3 title="Hello buddy 👋">Hi There,</h3>
<h1><span class="logo-text"><span class="blue-span">Vasanth</span>kumar S</span></h1>
<p class="grey-span">
I develop Websites, software, ui Design and I love to code.❤️
</p>
<div class="social-icon">
<a href="https://www.instagram.com/vasanthkumar_24/" target="_blank"><i
class="fa-brands fa-instagram"></i></a>
<a href="https://github.com/Vk2401" target="_blank"><i class="fa-brands fa-github"></i></a>
<a href="https://www.linkedin.com/in/vasanthkumar-s-326527236/" target="_blank"><i
class="fa-brands fa-linkedin"></i></a>
</div>
<a href="#about"><button class="btn">Read More</button></a>
</div>
<div class="hero-img">
<img src="./assets/img/hero-img.png" alt="vasanth portfolio cartoon image">
</div>
</section>
<!-- service section -->
<section class="service-section">
<h1>My <span class="blue-span">Services</span></h1>
<div class="service-cards-container">
<div class="service-card">
<i class="fa-solid fa-earth-asia"></i>
<h4>Web Developer</h4>
<p>I make a websites and webapp to digitalize you.</p>
<a href="https://github.com/Vk2401" target="_blank">view demo</a>
</div>
<div class="service-card">
<i class="fa-solid fa-shapes"></i>
<h4>Designer</h4>
<p>I Design - Banners, Logo, website, app.</p>
<a href="https://codepen.io/VasanthKumar_24" target="_blank">view demo</a>
</div>
<div class="service-card">
<i class="fa-solid fa-icons"></i>
<h4>Content Creater</h4>
<p>I make videos in social media to document My Life.</p>
<a href="https://www.instagram.com/vasanthkumar_24/" target="_blank">view demo</a>
</div>
</div>
</section>
<!-- about section -->
<section class="about-section" id="about">
<div class="img-div">
<img src="./assets/img/hero-img.png" alt="vasanthkumar image">
</div>
<div>
<!-- about me list -->
<ol>
<li>
<h1>I'm a <span class="blue-span">Developer</span> also a <span
class="blue-span">Designer</span></h1>
</li>
<li><strong>Expirence : </strong>Starter</li>
<li><strong>Who I'm : </strong> Developer,Editor,Content Creater,Designer</li>
<li><strong>Place : </strong>Chennai,Tamilnadu, India</li>
<li><strong>Email : </strong><a href="mailto:vipvasanth433@gmail.com">vipvasanth433@gmail.com</a>
</li>
<li><strong>Phone : </strong><a href="tel:+91 8610983674">+91 8610983674</a></li>
<li><a href="https://linktr.ee/Vasanthkumar24" target="_blank"><button class="btn">Connect with
me</button></a>
</li>
</ol>
</div>
</section>
<section class="contact-section" id="contact">
<h1>My <span class="blue-span">Contact</span></h1>
<form action="#">
<input type="text" name="userName" placeholder="Your Name">
<input type="email" name="email" placeholder="Email">
<textarea name="message" cols="30" rows="10" placeholder="Message"></textarea>
<button class="submit-btn">Submit</button>
</form>
</section>
</main>
<footer>
<p>Copyright © 2023 - <a href="https://github.com/Vk2401" target="_blank">Vasanthkumar s</a> - AllRights
Reserved.</p>
</footer>
<!-- script link only for menu toggle & theme picker -->
<script src="./assets/js/main.js"></script>
</body>
</html>