-
Notifications
You must be signed in to change notification settings - Fork 4
/
skill-set.html
158 lines (150 loc) · 7.86 KB
/
skill-set.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 name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Review this part and modify it to your liking -->
<meta name="description" content="Sample text for portfolio template meta tag">
<meta name="keywords" content="Sample text for portfolio template meta tag">
<meta name="author" content="Sample text for portfolio template meta tag">
<title>Skillset</title>
<link rel="stylesheet" type="text/css" href="style.css">
<!-- This subpage also benefits from the about me, because of the media queries -->
<link rel="stylesheet" type="text/css" href="style-about-me.css">
<link rel="stylesheet" type="text/css" href="style-skill-set.css">
<!-- font for the quote -->
<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=Covered+By+Your+Grace&display=swap" rel="stylesheet">
<!-- font for the body -->
<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=Montserrat:wght@200&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400&display=swap" rel="stylesheet">
<!-- font for headings -->
<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=Oswald:wght@200&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Oswald:wght@400&display=swap" rel="stylesheet">
</head>
<body>
<!-- navigation bar -->
<nav class="sticky">
<label for="drop" class="toggle" id="main-toggle">
<span class="nav-icon"></span>
</label>
<input type="checkbox" id="drop">
<ul class="main-nav">
<li><a href="index.html">Home</a></li>
<li><a href="about-me.html">About me</a></li>
<li><a href="skill-set.html">Skill-set</a></li>
<li><a href="portfolio.html">Portfolio</a></li>
<li><a href="index.html#contact-me">Contact me</a></li>
</ul>
</nav>
<!-- hard skills -->
<section>
<h2 class="main-title-large center padding">Skills</h2>
</section>
<section class="grid-system-2 w-900 padding">
<section>
<h3 class="main-title">Your title here</h3>
<section class="skills">
<ul class="no-bullet-list no-padding-list-item">
<li>
<p>html</p>
<span class="progress-bar"><span class="html"></span></span>
</li>
<li>
<p>css</p>
<span class="progress-bar"><span class="css"></span></span>
</li>
<li>
<p>javascript</p>
<span class="progress-bar"><span class="javascript"></span></span>
</li>
<li>
<p>php, mysql</p>
<span class="progress-bar"><span class="php"></span></span>
</li>
</ul>
</section>
</section>
<section class="justify">
<h3 class="main-title">Your title here</h3>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sed ut minima odio quisquam voluptatem nobis
voluptates laudantium suscipit vel, veritatis, aspernatur doloremque officiis animi voluptate quia
magnam. Dolorum, assumenda accusantium? </p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto sed non, atque quam quaerat, ea
dignissimos velit placeat iure obcaecati sapiente, dolorum ut assumenda dolore culpa odit aspernatur
alias. Aliquam!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque libero deleniti sed eius porro et
exercitationem quae!</p>
</section>
</section>
<!-- soft skills -->
<section class="grid-system-2 w-900 padding">
<section class="justify grid-flip">
<h3 class="main-title">Your title here</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas assumenda porro alias repellendus
deleniti cumque similique vel quae provident unde explicabo reiciendis fugit, itaque iure sunt.
Voluptas, fugiat. Quis, consequuntur.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quia placeat rerum ipsum magnam quos,
dolorum ducimus, doloremque molestias, ipsa neque explicabo assumenda totam ab nesciunt voluptate
fugiat tempore fuga at.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi quo suscipit aspernatur officiis
aliquam tempore, impedit provident. </p>
</section>
<section>
<h3 class="main-title">Your title here</h3>
<section class="skills">
<ul class="no-bullet-list no-padding-list-item">
<li>
<p>communication</p>
<span class="progress-bar"><span class="comm-adapt"></span></span>
</li>
<li>
<p>teamplayer, adaptability</p>
<span class="progress-bar"><span class="team-player"></span></span>
</li>
<li>
<p>problem solving</p>
<span class="progress-bar"><span class="problem-solving"></span></span>
</li>
<li>
<p>open-minded</p>
<span class="progress-bar"><span class="open-minded"></span></span>
</li>
</ul>
</section>
</section>
</section>
<!--future plans in skill development-->
<!-- tell about how you improve your knowledge, if you have something important, the "colorful-letter" class may come handy, use it anywhere -->
<section class="w-900">
<section class="baby-pink-light">
<h3 class="main-title padding-top">Future Plans in Skill Development</h3>
<section class="justify">
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Adipisci eum asperiores, itaque autem deserunt
corrupti, optio sit qui illum, voluptate sunt quos hic doloribus praesentium repellendus tempora
suscipit cum facere.
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aspernatur similique voluptatem quaerat magnam
fugiat autem adipisci nulla rem quasi, aut distinctio facere earum aliquid dolorem nemo nihil, quidem
quae nostrum.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias facilis inventore beatae, dicta
commodi odio dolorum debitis, magni veniam sed similique, iusto labore dolore? Iure minima velit amet
soluta quo!
</p>
</section>
</section>
</section>
<!-- footer -->
<footer>@iluskaland 2024</footer>
</body>
</html>