-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
130 lines (121 loc) · 7.76 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
<!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">
<title>Portfolio | S Sitaraman</title>
<link rel="stylesheet" href="style.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=Open+Sans:wght@300;400;600;700&display=swap" rel="stylesheet">
</head>
<body>
<nav class="navbar">
<span class="nav-item username">Hackerb0ne</span>
<span class="nav-item">About</span>
<span class="nav-item">Works</span>
<span class="nav-item">Contact</span>
</nav>
<section class="landing-section">
<div>
<h1 class="me-text">I'm Sitaraman</h1>
<p class="me-para">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum
has been the industry's standard
dummy text ever since the 1500.</p>
</div>
<div>
<a href="instagram.com" class="link-icon"><img src="assets/instagram.svg" alt="instagram"></a>
<a href="linkedin.in" class="link-icon"><img src="assets/linkedin.svg" alt="linkedin"></a>
<a href="github.com" class="link-icon"><img src="assets/github.svg" alt="github"></a>
</div>
<div class="down-arrow">
<!-- Down arrow -->
<img src="assets/down-arrow.svg" alt="">
</div>
<img src="assets/left.svg" alt="left-blob" class="left-blob">
<img src="assets/right.svg" alt="right-blob" class="right-blob">
</section>
<section class="about-section">
<div class="experience-section">
<h1 class="count">2+</h1>
<span>
Years
</span>
<span>
Experience
</span>
<span>
Working
</span>
</div>
<div class="specialisation-section">
<span class="specialisation-heading">Developer and Product Designer specialised in UI/UX</span>
<div class="specialisation-cards">
<div class="specialisation-card">
<div class="card-content">
<div class="stack-icon">
<svg width="32" height="32" viewBox="0 0 32 32" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M16 24C15.8345 24 15.6716 23.9587 15.526 23.88L2.526 16.88L3.474 15.12L16 21.864L28.526 15.12L29.474 16.88L16.474 23.88C16.3284 23.9587 16.1655 24 16 24Z"
fill="white" />
<path
d="M16 30C15.8345 30 15.6716 29.9587 15.526 29.88L2.526 22.88L3.474 21.12L16 27.864L28.526 21.12L29.474 22.88L16.474 29.88C16.3284 29.9587 16.1655 30 16 30Z"
fill="white" />
<path
d="M16 18C15.8345 18 15.6716 17.9587 15.526 17.88L2.526 10.88C2.36725 10.7943 2.23464 10.6673 2.14221 10.5124C2.04978 10.3574 2.00098 10.1804 2.00098 10C2.00098 9.8196 2.04978 9.64256 2.14221 9.48764C2.23464 9.33272 2.36725 9.20568 2.526 9.12L15.526 2.12C15.6716 2.0414 15.8345 2.00025 16 2.00025C16.1655 2.00025 16.3284 2.0414 16.474 2.12L29.474 9.12C29.6328 9.20568 29.7654 9.33272 29.8578 9.48764C29.9502 9.64256 29.999 9.8196 29.999 10C29.999 10.1804 29.9502 10.3574 29.8578 10.5124C29.7654 10.6673 29.6328 10.7943 29.474 10.88L16.474 17.88C16.3284 17.9587 16.1655 18 16 18ZM5.11 10L16 15.864L26.89 10L16 4.136L5.11 10Z"
fill="white" />
</svg>
</div>
<p class="detail">Frontend Developer</p>
<p>Discover more -></p>
</div>
</div>
<div class="specialisation-card">
<div class="card-content">
<div class="stack-icon">
<svg width="32" height="32" viewBox="0 0 32 32" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M16 24C15.8345 24 15.6716 23.9587 15.526 23.88L2.526 16.88L3.474 15.12L16 21.864L28.526 15.12L29.474 16.88L16.474 23.88C16.3284 23.9587 16.1655 24 16 24Z"
fill="white" />
<path
d="M16 30C15.8345 30 15.6716 29.9587 15.526 29.88L2.526 22.88L3.474 21.12L16 27.864L28.526 21.12L29.474 22.88L16.474 29.88C16.3284 29.9587 16.1655 30 16 30Z"
fill="white" />
<path
d="M16 18C15.8345 18 15.6716 17.9587 15.526 17.88L2.526 10.88C2.36725 10.7943 2.23464 10.6673 2.14221 10.5124C2.04978 10.3574 2.00098 10.1804 2.00098 10C2.00098 9.8196 2.04978 9.64256 2.14221 9.48764C2.23464 9.33272 2.36725 9.20568 2.526 9.12L15.526 2.12C15.6716 2.0414 15.8345 2.00025 16 2.00025C16.1655 2.00025 16.3284 2.0414 16.474 2.12L29.474 9.12C29.6328 9.20568 29.7654 9.33272 29.8578 9.48764C29.9502 9.64256 29.999 9.8196 29.999 10C29.999 10.1804 29.9502 10.3574 29.8578 10.5124C29.7654 10.6673 29.6328 10.7943 29.474 10.88L16.474 17.88C16.3284 17.9587 16.1655 18 16 18ZM5.11 10L16 15.864L26.89 10L16 4.136L5.11 10Z"
fill="white" />
</svg>
</div>
<p class="detail">Product Designer</p>
<p>Discover more -></p>
</div>
</div>
<div class="specialisation-card">
<div class="card-content">
<div class="stack-icon">
<svg width="32" height="32" viewBox="0 0 32 32" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M16 24C15.8345 24 15.6716 23.9587 15.526 23.88L2.526 16.88L3.474 15.12L16 21.864L28.526 15.12L29.474 16.88L16.474 23.88C16.3284 23.9587 16.1655 24 16 24Z"
fill="white" />
<path
d="M16 30C15.8345 30 15.6716 29.9587 15.526 29.88L2.526 22.88L3.474 21.12L16 27.864L28.526 21.12L29.474 22.88L16.474 29.88C16.3284 29.9587 16.1655 30 16 30Z"
fill="white" />
<path
d="M16 18C15.8345 18 15.6716 17.9587 15.526 17.88L2.526 10.88C2.36725 10.7943 2.23464 10.6673 2.14221 10.5124C2.04978 10.3574 2.00098 10.1804 2.00098 10C2.00098 9.8196 2.04978 9.64256 2.14221 9.48764C2.23464 9.33272 2.36725 9.20568 2.526 9.12L15.526 2.12C15.6716 2.0414 15.8345 2.00025 16 2.00025C16.1655 2.00025 16.3284 2.0414 16.474 2.12L29.474 9.12C29.6328 9.20568 29.7654 9.33272 29.8578 9.48764C29.9502 9.64256 29.999 9.8196 29.999 10C29.999 10.1804 29.9502 10.3574 29.8578 10.5124C29.7654 10.6673 29.6328 10.7943 29.474 10.88L16.474 17.88C16.3284 17.9587 16.1655 18 16 18ZM5.11 10L16 15.864L26.89 10L16 4.136L5.11 10Z"
fill="white" />
</svg>
</div>
<p class="detail">Branding Designer</p>
<p>Discover more -></p>
</div>
</div>
</div>
<div>
<!-- Down arrow -->
</div>
</section>
</body>
</html>