-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathskill.html
More file actions
156 lines (146 loc) · 6.61 KB
/
skill.html
File metadata and controls
156 lines (146 loc) · 6.61 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
<!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="css/skillstyle.css">
<!--fonts link-->
<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=Barlow+Condensed:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Barlow:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Bellefair&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap"
rel="stylesheet">
<!--icons link-->
<link rel="stylesheet" href="https://unpkg.com/boxicons@latest/css/boxicons.min.css">
<title>Portfolio Site | Skills</title>
</head>
<body>
<div class="open-nav close">
<?xml version="1.0" ?>
<!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'><svg height="50px"
id="Layer_1" style="enable-background:new 0 0 32 32; fill: #2f2e41;" version="1.1" viewBox="0 0 32 32"
width="50px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<path
d="M4,10h24c1.104,0,2-0.896,2-2s-0.896-2-2-2H4C2.896,6,2,6.896,2,8S2.896,10,4,10z M28,14H4c-1.104,0-2,0.896-2,2 s0.896,2,2,2h24c1.104,0,2-0.896,2-2S29.104,14,28,14z M28,22H4c-1.104,0-2,0.896-2,2s0.896,2,2,2h24c1.104,0,2-0.896,2-2 S29.104,22,28,22z" />
</svg>
</div>
<div class="close-nav close">
<?xml version="1.0" ?><svg fill="none" height="50" viewBox="0 0 16 16" width="50"
xmlns="http://www.w3.org/2000/svg">
<path clip-rule="evenodd"
d="M5.17157 8.00003L0.585785 3.41424L3.41421 0.585815L8 5.1716L12.5858 0.585815L15.4142 3.41424L10.8284 8.00003L15.4142 12.5858L12.5858 15.4142L8 10.8285L3.41421 15.4142L0.585785 12.5858L5.17157 8.00003Z" />
</svg>
</div>
<div class="downBlur">
<nav id="nav">
<ul class="menu">
<li>
<a href="home.html">Home</a>
</li>
<li>
<a href="service.html">Services</a>
</li>
<li>
<a href="skill.html">Skills</a>
</li>
<li>
<a href="about.html">about</a>
</li>
<li>
<a href="contact.html">contact</a>
</li>
<div class="start-home animation"></div>
</ul>
</nav>
</div>
<div class="section-title hidden">
<h3>my skills</h3>
</div>
<section>
<div class="container-bar hidden">
<div class="title-bar">
<h3>HTML</h3>
</div>
<div class="bar"">
<div class="bar-status P83" per="83%"></div>
</div>
</div>
<div class="container-bar hidden">
<div class="title-bar">
<h3>CSS</h3>
</div>
<div class="bar"">
<div class="bar-status P90" per="90%"></div>
</div>
</div>
<div class="container-bar hidden">
<div class="title-bar">
<h3>JAVASCRIPT</h3>
</div>
<div class="bar"">
<div class="bar-status P79" per="79%"></div>
</div>
</div>
</section>
<div class="section-title down-title">
<h3>Status</h3>
</div>
<section>
<div class="container hidden translate-left">
<div class="card yel">
<div class="icon">
<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 24 24"
style="fill: #edff63c8;">
<path
d="M21.947 9.179a1.001 1.001 0 0 0-.868-.676l-5.701-.453-2.467-5.461a.998.998 0 0 0-1.822-.001L8.622 8.05l-5.701.453a1 1 0 0 0-.619 1.713l4.213 4.107-1.49 6.452a1 1 0 0 0 1.53 1.057L12 18.202l5.445 3.63a1.001 1.001 0 0 0 1.517-1.106l-1.829-6.4 4.536-4.082c.297-.268.406-.686.278-1.065z">
</path>
</svg>
</div>
<div class="num" val = 238>
000
</div>
<div class="text">
<p>Five stars</p>
</div>
</div>
<div class="card pin">
<div class="icon">
<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 24 24"
style="fill: #f773e1;">
<path
d="M12 2C6.486 2 2 5.589 2 10c0 2.908 1.897 5.516 5 6.934V22l5.34-4.004C17.697 17.852 22 14.32 22 10c0-4.411-4.486-8-10-8zm-2.5 9a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3z">
</path>
</svg>
</div>
<div class="num" val = 835>
000
</div>
<div class="text">
<p>customer</p>
</div>
</div>
<div class="card pur">
<div class="icon">
<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 24 24"
style="fill: #bfbdbd;">
<path
d="M7.5 6.5C7.5 8.981 9.519 11 12 11s4.5-2.019 4.5-4.5S14.481 2 12 2 7.5 4.019 7.5 6.5zM20 21h1v-1c0-3.859-3.141-7-7-7h-4c-3.86 0-7 3.141-7 7v1h17z">
</path>
</svg>
</div>
<div class="num" val= 980>
000
</div>
<div class="text">
<p>visits</p>
</div>
</div>
</div>
</section>
<footer>
<p>© All Copyrights Reserved To MohamedAbdelnasser, Built with HTML,CSS and JS</p>
</footer>
<script src="js/skill/skillApp.js"></script>
<script src="Nav.js"></script>
</body>
</html>