-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
129 lines (127 loc) · 3.58 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
<!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" />
<title>myprofile</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=Istok+Web&display=swap"
rel="stylesheet"
/>
</head>
<body style="overflow-y: scroll; overflow-x: hidden; scrollbar-width: auto;">
<div class="container">
<div class="navbar">
<ol>
<li>
<a href="#home">
<img src="img/home white.webp" alt="home" />
</a>
</li>
<li>
<a href="#info">
<img src="img/info-white.webp" alt="info" />
</a>
</li>
<li>
<a href="#skill">
<img src="img/creative-thingking white.webp" alt="skill" />
</a>
</li>
<li>
<a href="#portfolio">
<img src="img/portfolio white.webp" alt="portfolio" />
</a>
</li>
</ol>
</div>
<div class="page" id="home">
<p>Hi, I'm Azwar Hamid</p>
<img src="img/cursor.webp" alt="cursor" />
</div>
<div
class="page"
id="info"
style="
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-around;
"
>
<div
class="box-image"
style="
width: 250px;
height: 421px;
border: #2e0052 5px solid;
position: absolute;
z-index: 1;
left: 10vw;
translate: -70px -40px;
border-radius: 31px;
"
></div>
<div
class="text-info"
style="
margin-right: 10vw;
margin-left: 2vw;
text-align: center;
font-size: 24px;
"
>
<p style="font-size: 30px; font-weight: bold; padding: 20px 30px">
I'm Backend Web Developer
</p>
<p style="width: fit-content">
My name is Azwar Hamid. I am a beginner in the field of web
development, and I have two years of self-taught experience. During
this time, I have worked on numerous personal projects to enhance my
skills. Currently.
</p>
</div>
</div>
<div
class="page"
id="skill"
style="
width: fit-content;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 31px;
flex-wrap: wrap;
padding: 0 100px 0 100px;
"
>
<div class="teks-html">
<p>HTML Level</p>
<p class="bgnr">BEGINNER</p>
</div>
<div class="teks-css">
<p>CSS Level</p>
<p class="bgnr">BEGINNER</p>
</div>
<div class="teks-js">
<p>Javascript Level</p>
<p class="itrmdt">INTERMEDIATE</p>
</div>
<div class="teks-php">
<p>PHP Level</p>
<p class="bgnr">BEGINNER</p>
</div>
<div class="teks-node">
<p>Node.js Level</p>
<p class="itrmdt">INTERMEDIATE</p>
</div>
</div>
<div class="page" id="portfolio"></div>
</div>
<script src="main.js"></script>
</body>
</html>