-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
151 lines (151 loc) · 7.35 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
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CSS Layout Masterclass</title>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"
/>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="left">
<div class="left-content">
<div class="left-content-category">E-conomy</div>
<div class="left-content-main">UNF</div>
<div class="left-content-description">Design & Development</div>
<div class="left-content-button">
<div>2014 - Present</div>
</div>
</div>
<div class="left-content">
<div class="left-content-category">Event</div>
<div class="left-content-main">Veuve Clicquot</div>
<div class="left-content-description">
Website, Initiative Identities
</div>
<div class="left-content-button">
<div>2015 - Present</div>
</div>
</div>
<div class="left-content">
<div class="left-content-category">Artist</div>
<div class="left-content-main">HAIM</div>
<div class="left-content-description">Visual Identity, Digital</div>
<div class="left-content-button">
<div>2014 - Forverver</div>
</div>
</div>
<div class="left-content">
<div class="left-content-category">Instituonal</div>
<div class="left-content-main">MOCA</div>
<div class="left-content-description">Streaming Platform</div>
<div class="left-content-button">
<div>2016</div>
</div>
</div>
<div class="left-content">
<div class="left-content-category">Stundio Project</div>
<div class="left-content-main">Public Access</div>
<div class="left-content-description">
Website Stereaming Platform, <br />
Programmming
</div>
<div class="left-content-button">
<div>2014 - Forever</div>
</div>
</div>
<div class="left-content">
<div class="left-content-category">Museician</div>
<div class="left-content-main">Kelela</div>
<div class="left-content-description">Interactive Microsite</div>
<div class="left-content-button">
<div>2015</div>
</div>
</div>
</div>
<div class="mid">
<div class="mid-top">Special - Offer, Inc</div>
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
fill="currentColor"
class="bi bi-flower1"
viewBox="0 0 16 16"
>
<path
d="M6.174 1.184a2 2 0 0 1 3.652 0A2 2 0 0 1 12.99 3.01a2 2 0 0 1 1.826 3.164 2 2 0 0 1 0 3.652 2 2 0 0 1-1.826 3.164 2 2 0 0 1-3.164 1.826 2 2 0 0 1-3.652 0A2 2 0 0 1 3.01 12.99a2 2 0 0 1-1.826-3.164 2 2 0 0 1 0-3.652A2 2 0 0 1 3.01 3.01a2 2 0 0 1 3.164-1.826M8 1a1 1 0 0 0-.998 1.03l.01.091q.017.116.054.296c.049.241.122.542.213.887.182.688.428 1.513.676 2.314L8 5.762l.045-.144c.248-.8.494-1.626.676-2.314.091-.345.164-.646.213-.887a5 5 0 0 0 .064-.386L9 2a1 1 0 0 0-1-1M2 9l.03-.002.091-.01a5 5 0 0 0 .296-.054c.241-.049.542-.122.887-.213a61 61 0 0 0 2.314-.676L5.762 8l-.144-.045a61 61 0 0 0-2.314-.676 17 17 0 0 0-.887-.213 5 5 0 0 0-.386-.064L2 7a1 1 0 1 0 0 2m7 5-.002-.03a5 5 0 0 0-.064-.386 16 16 0 0 0-.213-.888 61 61 0 0 0-.676-2.314L8 10.238l-.045.144c-.248.8-.494 1.626-.676 2.314-.091.345-.164.646-.213.887a5 5 0 0 0-.064.386L7 14a1 1 0 1 0 2 0m-5.696-2.134.025-.017a5 5 0 0 0 .303-.248c.184-.164.408-.377.661-.629A61 61 0 0 0 5.96 9.23l.103-.111-.147.033a61 61 0 0 0-2.343.572c-.344.093-.64.18-.874.258a5 5 0 0 0-.367.138l-.027.014a1 1 0 1 0 1 1.732zM4.5 14.062a1 1 0 0 0 1.366-.366l.014-.027q.014-.03.036-.084a5 5 0 0 0 .102-.283c.078-.233.165-.53.258-.874a61 61 0 0 0 .572-2.343l.033-.147-.11.102a61 61 0 0 0-1.743 1.667 17 17 0 0 0-.629.66 5 5 0 0 0-.248.304l-.017.025a1 1 0 0 0 .366 1.366m9.196-8.196a1 1 0 0 0-1-1.732l-.025.017a5 5 0 0 0-.303.248 17 17 0 0 0-.661.629A61 61 0 0 0 10.04 6.77l-.102.111.147-.033a61 61 0 0 0 2.342-.572c.345-.093.642-.18.875-.258a5 5 0 0 0 .367-.138zM11.5 1.938a1 1 0 0 0-1.366.366l-.014.027q-.014.03-.036.084a5 5 0 0 0-.102.283c-.078.233-.165.53-.258.875a61 61 0 0 0-.572 2.342l-.033.147.11-.102a61 61 0 0 0 1.743-1.667c.252-.253.465-.477.629-.66a5 5 0 0 0 .248-.304l.017-.025a1 1 0 0 0-.366-1.366M14 9a1 1 0 0 0 0-2l-.03.002a5 5 0 0 0-.386.064c-.242.049-.543.122-.888.213-.688.182-1.513.428-2.314.676L10.238 8l.144.045c.8.248 1.626.494 2.314.676.345.091.646.164.887.213a5 5 0 0 0 .386.064zM1.938 4.5a1 1 0 0 0 .393 1.38l.084.035q.108.045.283.103c.233.078.53.165.874.258a61 61 0 0 0 2.343.572l.147.033-.103-.111a61 61 0 0 0-1.666-1.742 17 17 0 0 0-.66-.629 5 5 0 0 0-.304-.248l-.025-.017a1 1 0 0 0-1.366.366m2.196-1.196.017.025a5 5 0 0 0 .248.303c.164.184.377.408.629.661A61 61 0 0 0 6.77 5.96l.111.102-.033-.147a61 61 0 0 0-.572-2.342c-.093-.345-.18-.642-.258-.875a5 5 0 0 0-.138-.367l-.014-.027a1 1 0 1 0-1.732 1m9.928 8.196a1 1 0 0 0-.366-1.366l-.027-.014a5 5 0 0 0-.367-.138c-.233-.078-.53-.165-.875-.258a61 61 0 0 0-2.342-.572l-.147-.033.102.111a61 61 0 0 0 1.667 1.742c.253.252.477.465.66.629a5 5 0 0 0 .304.248l.025.017a1 1 0 0 0 1.366-.366m-3.928 2.196a1 1 0 0 0 1.732-1l-.017-.025a5 5 0 0 0-.248-.303 17 17 0 0 0-.629-.661A61 61 0 0 0 9.23 10.04l-.111-.102.033.147a61 61 0 0 0 .572 2.342c.093.345.18.642.258.875a5 5 0 0 0 .138.367zM8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3"
/>
</svg>
<div class="mid-bottom">©2024 -> Forever</div>
</div>
<div class="right">
<div class="right-nav">
<span> ◯ Information</span>
<span> ◯ Team</span>
<span> ● Press</span>
</div>
<div class="right-contents">
<div class="right-content">
<h3>Art News</h3>
<p>
Performa Launches Online Platform for Streaming New and Archived
Workds
</p>
</div>
<div class="right-content">
<h3>Art News</h3>
<p>
Performa Launches Online Platform for Streaming New and Archived
Workds
</p>
</div>
<div class="right-content">
<h3>Art News</h3>
<p>
Performa Launches Online Platform for Streaming New and Archived
Workds
</p>
</div>
<div class="right-content">
<h3>Art News</h3>
<p>
Performa Launches Online Platform for Streaming New and Archived
Workds
</p>
</div>
<div class="right-content">
<h3>Art News</h3>
<p>
Performa Launches Online Platform for Streaming New and Archived
Workds
</p>
</div>
<div class="right-content">
<h3>Art News</h3>
<p>
Performa Launches Online Platform for Streaming New and Archived
Workds
</p>
</div>
<div class="right-content">
<h3>Art News</h3>
<p>
Performa Launches Online Platform for Streaming New and Archived
Workds
</p>
</div>
<div class="right-content">
<h3>Art News</h3>
<p>
Performa Launches Online Platform for Streaming New and Archived
Workds
</p>
</div>
</div>
</div>
</body>
</html>