-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
189 lines (164 loc) · 6.15 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
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Portfolio Homepage</title>
<!-- CSS reset -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/modern-normalize.min.css">
<!-- Google Fonts -->
<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=Manrope:wght@300;400;700&family=Poppins:wght@700&display=swap" rel="stylesheet">
<!-- Main stylesheet -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<a href="index.html">
<svg id="logo" width="48" height="48" viewBox="0 0 48 48" fill="none">
<rect x="2" y="2" width="44" height="44" stroke="#000a1f" stroke-width="4"/>
<path d="M12 33.8075C12 34.1199 12.0558 34.41 12.1674 34.6778C12.2789 34.9456 12.4351 35.1799 12.636 35.3808C12.8257 35.5704 13.0544 35.7211 13.3222 35.8326C13.59 35.9442 13.8801 36 14.1925 36H29.8912C30.2929 36 30.728 35.9554 31.1967 35.8661C31.6541 35.7657 32.1116 35.6151 32.569 35.4142C33.0153 35.2134 33.4449 34.9568 33.8577 34.6444C34.2706 34.3208 34.6388 33.9358 34.9623 33.4895C35.2748 33.0321 35.5258 32.5077 35.7155 31.9163C35.9052 31.3138 36 30.6388 36 29.8912V18.1088C36 17.7071 35.9554 17.2775 35.8661 16.8201C35.7657 16.3515 35.6151 15.894 35.4142 15.4477C35.2134 14.9902 34.9512 14.5551 34.6276 14.1423C34.304 13.7294 33.9191 13.3668 33.4728 13.0544C33.0153 12.7308 32.4909 12.4742 31.8996 12.2845C31.3082 12.0948 30.6388 12 29.8912 12H12.2008V16.3515H29.8912C30.4603 16.3515 30.8954 16.5021 31.1967 16.8033C31.4979 17.1046 31.6485 17.5509 31.6485 18.1423V29.8912C31.6485 30.4491 31.4979 30.8842 31.1967 31.1967C30.8842 31.4979 30.4491 31.6485 29.8912 31.6485H16.3515V26.1925H27.9331V21.8075H14.1925C13.8801 21.8075 13.59 21.8689 13.3222 21.9916C13.0544 22.1032 12.8257 22.2594 12.636 22.4603C12.4351 22.6611 12.2789 22.8954 12.1674 23.1632C12.0558 23.4198 12 23.6987 12 24V33.8075Z" fill="#000a1f"/>
</svg>
</a>
<nav>
<ul class="unstyled">
<li><a href="#">Work</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<button id="menu-button">
<span></span>
<span></span>
<span></span>
</button>
</header>
<div id="mobile-menu-container">
<ul class="unstyled">
<li><a href="#">Work</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<section id="hero">
<hgroup>
<h1>Illustration is my passion</h1>
<h3>I'm a US-based illustrator and I love working with passionate people from all around the world.</h3>
</hgroup>
<ul class="social unstyled">
<li><a href="#">FB</a></li>
<li><a href="#">IG</a></li>
<li><a href="#">X</a></li>
<li><a href="#">YT</a></li>
</ul>
<div id="icon-scroll-down">
<svg width="11" height="20" viewBox="0 0 11 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5.5 19V1M9.5 15L5.5 19L9.5 15ZM5.5 19L1.5 15L5.5 19Z" stroke="#D11F3E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</div>
</section>
<main id="gallery">
<div class="quote">
<blockquote>
"Have no fear of perfection—you'll never reach it."
<cite>- Salvador Dali</cite>
</blockquote>
<button class="link-button">
My Work
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M21 12H3M17 8L21 12L17 8ZM21 12L17 16L21 12Z" stroke="#D11F3E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</button>
</div>
<div class="gallery--item">
<a href="#">
<figure>
<img src="images/gallery-japanese-people.png" alt="People wearing traditional robes on a Japanese city street">
</figure>
</a>
<hgroup>
<h6>Client Projects <span></span> Kumiko</h6>
<h4>People wearing traditional robes on a Japanese city street</h4>
</hgroup>
</div>
<div class="gallery--item">
<a href="#">
<figure>
<img src="images/gallery-leo.png" alt="Leo Zodiac Star Sign">
</figure>
</a>
<hgroup>
<h6>Personal Projects <span></span> Astrology</h6>
<h4>Leo Zodiac Star Sign</h4>
</hgroup>
</div>
<div class="gallery--item">
<a href="#">
<figure>
<img src="images/gallery-girl-sitting.png" alt="Girl Sitting at Her Desk at Work">
</figure>
</a>
<hgroup>
<h6>Branding <span></span> Easy Go Startup</h6>
<h4>Girl Sitting at Her Desk at Work</h4>
</hgroup>
</div>
<div class="gallery--item">
<a href="#">
<figure>
<img src="images/gallery-scorpio.png" alt="Scorpio Zodiac Star Sign">
</figure>
</a>
<hgroup>
<h6>Personal Projects <span></span> Astrology</h6>
<h4>Scorpio Zodiac Star Sign</h4>
</hgroup>
</div>
<div class="gallery--item">
<a href="#">
<figure>
<img src="images/gallery-doggo.png" alt="Festive Puppy Dog">
</figure>
</a>
<hgroup>
<h6>Personal Projects <span></span> Astrology</h6>
<h4>Festive Puppy Dog</h4>
</hgroup>
</div>
<div class="gallery--item">
<a href="#">
<figure>
<img src="images/gallery-computer-desk.png" alt="Desk with a Computer, Coffee and Snacks">
</figure>
</a>
<hgroup>
<h6>Branding <span></span> Easy Go Startup</h6>
<h4>Desk with a Computer, Coffee and Snacks</h4>
</hgroup>
</div>
</main>
<footer>
<hgroup>
<h5>Illustration is my passion</h5>
<h2>Let's create something amazing together</h2>
</hgroup>
<button class="link-button">
Get in touch
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M21 12H3M17 8L21 12L17 8ZM21 12L17 16L21 12Z" stroke="#D11F3E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</button>
<ul class="social unstyled">
<li><a href="#">FB</a></li>
<li><a href="#">IG</a></li>
<li><a href="#">X</a></li>
<li><a href="#">YT</a></li>
</ul>
<p>© 2023 Adi Purdila. All rights reserved.</p>
</footer>
<script src="script.js"></script>
</body>
</html>