-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
197 lines (192 loc) · 14.7 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
190
191
192
193
194
195
196
197
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Twitter</title>
<style>
@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");
</style>
<!-- Favicon -->
<link rel="icon" sizes="16x16" href="./assets/img/twitter-x-logo-png-9.png"/>
<link rel="icon" sizes="32x32" href="./assets/img/twitter-x-logo-png-9.png"/>
<!-- End Favicon -->
<!--liens css-->
<script src="https://cdn.tailwindcss.com"></script>
<script src="./tailwind.config.js"></script>
<!--fin liens css-->
</head>
<body class="flex flex-row justify-between">
<section class="flex flex-col w-1/5 h-screen">
<div class="flex items-center h-20 gap-5 ml-[2rem] md:gap-10">
<svg
width="30"
height="30"
viewBox="0 0 30 30"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M29.5537 6.17125C28.51 6.63375 27.3888 6.94625 26.21 7.0875C27.4125 6.3675 28.335 5.225 28.77 3.865C27.645 4.5325 26.3988 5.0175 25.0725 5.2775C24.01 4.1475 22.4975 3.44 20.8225 3.44C17.6075 3.44 15 6.0475 15 9.265C15 9.72 15.0525 10.1625 15.15 10.59C10.3087 10.3463 6.02 8.0275 3.1475 4.505C2.6475 5.3675 2.36 6.3675 2.36 7.4325C2.36 9.4525 3.38875 11.2363 4.95 12.28C3.995 12.2488 3.0975 11.9875 2.3125 11.5513V11.6263C2.3125 14.4475 4.31875 16.8013 6.98375 17.3363C6.49375 17.4688 5.98 17.5388 5.45 17.5388C5.075 17.5388 4.70875 17.5038 4.35375 17.4363C5.095 19.7488 7.245 21.4338 9.79375 21.4788C7.8 23.0413 5.28875 23.9725 2.56125 23.9725C2.09125 23.9725 1.6275 23.945 1.17125 23.8913C3.74875 25.545 6.80875 26.5075 10.0962 26.5075C20.8087 26.5075 26.665 17.635 26.665 9.94C26.665 9.69 26.6588 9.4375 26.6475 9.1875C27.785 8.365 28.7725 7.34125 29.5513 6.175L29.5537 6.17125Z"
fill="#1DA1F2"
/>
</svg>
</div>
<div class="flex flex-col items-center ">
<div class="flex flex-row items-center h-20 gap-2">
<a class="flex items-center" href="#">
<svg
class="gap-2 mr-5"
width="30"
height="30"
viewBox="0 0 30 30"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M28.225 9.1875L15.5938 2.37125C15.2225 2.17125 14.7763 2.17125 14.4063 2.37125L1.78126 9.1875C1.17376 9.5175 0.947508 10.275 1.27501 10.8825C1.50001 11.3013 1.93126 11.5388 2.37501 11.5388C2.57501 11.5388 2.78001 11.4913 2.96876 11.3888L3.88626 10.8938L5.87376 24.9563C6.14376 26.4738 7.51126 27.5338 9.19876 27.5338H20.8013C22.4888 27.5338 23.8563 26.4738 24.1288 24.9238L26.1138 10.8925L27.035 11.39C27.6413 11.7188 28.4 11.4925 28.7275 10.885C29.0563 10.2775 28.8275 9.51875 28.2225 9.19125L28.225 9.1875ZM15 19.2938C12.7563 19.2938 10.9375 17.475 10.9375 15.2313C10.9375 12.9875 12.7563 11.1688 15 11.1688C17.2438 11.1688 19.0625 12.9875 19.0625 15.2313C19.0625 17.475 17.2438 19.2938 15 19.2938Z"
fill="#1DA1F2"
/>
</svg>
<span class="font-bold text-blue-500">Home</span>
</a>
</div>
<div class="flex flex-row items-center h-20 gap-2">
<a class="flex items-center" href="#">
<svg
class="gap-2 mr-5"
width="30"
height="30"
viewBox="0 0 30 30"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M26.25 9.17124H21.3375L21.8025 3.83124C21.8475 3.31624 21.465 2.86249 20.95 2.81624C20.4288 2.77874 19.98 3.15374 19.935 3.66999L19.4562 9.16999H11.5562L12.0187 3.83249C12.065 3.31624 11.6813 2.86249 11.1688 2.81624C10.6438 2.77874 10.1975 3.15374 10.1525 3.66999L9.675 9.16999H4.7275C4.21 9.16999 3.79 9.59124 3.79 10.1075C3.79 10.6237 4.21 11.045 4.7275 11.045H9.5125L8.825 18.9537H3.75C3.2325 18.9537 2.8125 19.3737 2.8125 19.8912C2.8125 20.4087 3.2325 20.8287 3.75 20.8287H8.6625L8.1975 26.1687C8.1525 26.6837 8.535 27.1375 9.05 27.1837L9.1325 27.1875C9.61375 27.1875 10.0225 26.8187 10.065 26.33L10.5438 20.83H18.4438L17.9813 26.1675C17.9363 26.6837 18.3188 27.1375 18.8337 27.1837L18.9163 27.1875C19.3975 27.1875 19.8062 26.8187 19.8487 26.33L20.3263 20.83H25.2725C25.7887 20.83 26.21 20.4087 26.21 19.8925C26.21 19.3762 25.7887 18.955 25.2725 18.955H20.4875L21.175 11.0462H26.25C26.7675 11.0462 27.1875 10.6262 27.1875 10.1087C27.1875 9.59124 26.7675 9.17124 26.25 9.17124ZM18.6063 18.9537H10.7062L11.3937 11.0462H19.2938L18.6063 18.9537Z"
fill="#0F1419"
/>
</svg>
<span class="font-bold">Explore</span>
</a>
</div>
<div class="flex flex-row items-center h-20 gap-2">
<a class="flex items-center" href="#">
<svg
class="gap-2 mr-5"
width="30"
height="30"
viewBox="0 0 30 30"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M27.1213 20.585C27.0963 20.565 24.4462 18.535 24.4925 13.0475C24.5175 9.88251 23.4775 7.07001 21.5588 5.12876C19.84 3.38751 17.5125 2.42501 15.0062 2.41251H14.99C12.485 2.42501 10.1575 3.38751 8.4375 5.13001C6.52 7.07126 5.4775 9.88251 5.505 13.0475C5.55125 18.46 2.98 20.5063 2.8775 20.585C2.5525 20.8263 2.42 21.2475 2.54625 21.6325C2.67375 22.0175 3.03375 22.2763 3.43625 22.2763H9.58625C9.71375 25.1638 12.0825 27.4763 14.9987 27.4763C17.915 27.4763 20.2812 25.1638 20.4075 22.2763H26.56C26.9625 22.2763 27.3225 22.0188 27.4475 21.6338C27.5763 21.25 27.4437 20.8275 27.1187 20.5863L27.1213 20.585ZM15 25.5975C13.1187 25.5975 11.5875 24.1263 11.465 22.275H18.535C18.41 24.125 16.8812 25.6 15 25.6V25.5975ZM5.475 20.4C6.4 18.985 7.41 16.615 7.38 13.03C7.3575 10.33 8.185 8.05251 9.77125 6.44626C11.1375 5.06251 12.9962 4.29626 15 4.28751C17.0037 4.29751 18.8587 5.06251 20.225 6.44751C21.8125 8.05376 22.6412 10.33 22.6187 13.0313C22.5887 16.6163 23.6 18.9875 24.525 20.4013H5.475V20.4Z"
fill="#0F1419"
/>
</svg>
<span class="font-bold">Notifications</span>
</a>
</div>
<div class="flex flex-row items-center h-20 gap-2">
<a class="flex items-center" href="#">
<svg
class="gap-2 mr-5"
width="30"
height="30"
viewBox="0 0 30 30"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M24.0625 3.77249H5.9375C4.04125 3.77249 2.5 5.31499 2.5 7.21249V22.8312C2.5 24.7287 4.04125 26.2725 5.9375 26.2725H24.0625C25.9587 26.2725 27.5 24.7287 27.5 22.8312V7.21249C27.5 5.31499 25.9587 3.77249 24.0625 3.77249ZM5.9375 5.64749H24.0625C24.925 5.64749 25.625 6.34749 25.625 7.20999V8.10249L15.5625 14.8112C15.2212 15.0362 14.78 15.0387 14.4375 14.8087L4.375 8.10249V7.20999C4.375 6.34749 5.075 5.64749 5.9375 5.64749ZM24.0625 24.395H5.9375C5.075 24.395 4.375 23.695 4.375 22.8325V10.3L13.425 16.3375C13.9037 16.6575 14.4525 16.8175 15 16.8175C15.55 16.8175 16.0963 16.6575 16.575 16.3387L25.625 10.3012V22.8287C25.625 23.6912 24.925 24.3912 24.0625 24.3912V24.395Z"
fill="#0F1419"
/>
</svg>
<span class="font-bold">Messages</span>
</a>
</div>
<div class="flex flex-row items-center h-20 gap-2 ">
<a class="flex items-center" href="#">
<svg
class="gap-2 mr-5"
width="30"
height="30"
viewBox="0 0 30 30"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M24.875 29.375C24.6787 29.375 24.485 29.3125 24.3225 29.195L15 22.41L5.6775 29.1975C5.3925 29.4025 5.015 29.435 4.7 29.2725C4.3875 29.1137 4.1875 28.7912 4.1875 28.4387V7C4.1875 5.45 5.45 4.1875 7 4.1875H22.9975C24.5475 4.1875 25.81 5.45 25.81 7V28.4375C25.81 28.79 25.6125 29.1125 25.2975 29.2725C25.165 29.3412 25.0188 29.375 24.8725 29.375H24.875ZM15 20.3125C15.1937 20.3125 15.3875 20.3725 15.55 20.4925L23.9375 26.5963V7C23.9375 6.485 23.5162 6.0625 23 6.0625H7C6.48375 6.0625 6.0625 6.485 6.0625 7V26.5963L14.45 20.4925C14.6125 20.3725 14.8062 20.3125 15 20.3125Z"
fill="#0F1419"
/>
</svg>
<span class="font-bold">Bookmarks</span>
</a>
</div>
<div class="flex flex-row items-center h-20 gap-2 ">
<a class="flex items-center" href="#">
<svg
class="gap-2 mr-5"
width="30"
height="30"
viewBox="0 0 30 30"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M24.6875 27.5H5.3125C3.7625 27.5 2.5 26.2375 2.5 24.6875V5.3125C2.5 3.7625 3.7625 2.5 5.3125 2.5H24.6875C26.2375 2.5 27.5 3.7625 27.5 5.3125V24.6875C27.5 26.2375 26.2375 27.5 24.6875 27.5ZM5.3125 4.375C4.795 4.375 4.375 4.79625 4.375 5.3125V24.6875C4.375 25.2038 4.795 25.625 5.3125 25.625H24.6875C25.205 25.625 25.625 25.2038 25.625 24.6875V5.3125C25.625 4.79625 25.205 4.375 24.6875 4.375H5.3125Z"
fill="#0F1419"
/>
<path
d="M21.25 10.8H8.75C8.2325 10.8 7.8125 10.3787 7.8125 9.86249C7.8125 9.34624 8.2325 8.92499 8.75 8.92499H21.25C21.7675 8.92499 22.1875 9.34374 22.1875 9.86249C22.1875 10.3812 21.7675 10.8 21.25 10.8ZM21.25 15.9375H8.75C8.2325 15.9375 7.8125 15.5175 7.8125 15C7.8125 14.4825 8.2325 14.0625 8.75 14.0625H21.25C21.7675 14.0625 22.1875 14.4825 22.1875 15C22.1875 15.5175 21.7675 15.9375 21.25 15.9375ZM15 21.075H8.75C8.2325 21.075 7.8125 20.6562 7.8125 20.1375C7.8125 19.6187 8.2325 19.2 8.75 19.2H15C15.5175 19.2 15.9375 19.6212 15.9375 20.1375C15.9375 20.6537 15.5175 21.075 15 21.075Z"
fill="#0F1419"
/>
</svg>
<span class="font-bold">Lists</span>
</a>
</div>
<div class="flex flex-row items-center h-20 gap-2 ">
<a class="flex items-center" href="#">
<svg
class="gap-2 mr-5"
width="30"
height="30"
viewBox="0 0 30 30"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M15 14.77C16.6938 14.77 18.59 14.5825 19.8 13.2C20.8175 12.0375 21.1475 10.24 20.8075 7.71001C20.3325 4.17876 18.1613 2.07001 15 2.07001C11.8388 2.07001 9.6675 4.17876 9.1925 7.71251C8.8525 10.24 9.1825 12.0375 10.2 13.2C11.41 14.5838 13.3063 14.77 15 14.77ZM11.05 7.96001C11.2525 6.46001 12.0338 3.94501 15 3.94501C17.9663 3.94501 18.7475 6.46126 18.95 7.96001C19.2088 9.89751 19.0213 11.2438 18.3875 11.9663C17.8188 12.6163 16.805 12.895 15 12.895C13.195 12.895 12.1813 12.6163 11.6125 11.9663C10.9788 11.2438 10.7913 9.89626 11.05 7.96001ZM25.35 24.045C24.2538 19.6375 19.9975 16.5575 15 16.5575C10.0025 16.5575 5.74625 19.6375 4.65 24.045C4.435 24.91 4.615 25.795 5.14375 26.47C5.65375 27.12 6.44375 27.495 7.31 27.495H22.69C23.5563 27.495 24.3463 27.12 24.8563 26.47C25.3863 25.795 25.565 24.9113 25.3488 24.045H25.35ZM23.38 25.315C23.2225 25.515 22.985 25.6225 22.69 25.6225H7.31C7.01625 25.6225 6.7775 25.5163 6.62 25.315C6.44875 25.0975 6.395 24.8 6.47 24.4975C7.3575 20.9288 10.8663 18.435 15 18.435C19.1338 18.435 22.6425 20.9275 23.53 24.4975C23.605 24.8 23.5513 25.0975 23.38 25.315Z"
fill="#0F1419"
/>
</svg>
<span class="font-bold">Profile</span>
</a>
</div>
<div class="flex flex-row items-center h-20 gap-1">
<a class="flex items-center" href="#">
<svg class="gap-2 mr-5"
width="30"
height="30"
viewBox="0 0 30 30"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M20.625 12.8125C19.4187 12.8125 18.4375 13.7962 18.4375 15C18.4375 16.2037 19.4175 17.1875 20.625 17.1875C21.83 17.1875 22.8125 16.205 22.8125 15C22.8125 13.795 21.83 12.8125 20.625 12.8125ZM20.625 15.9375C20.1075 15.9375 19.6875 15.5175 19.6875 15C19.6875 14.4837 20.1088 14.0625 20.625 14.0625C21.1412 14.0625 21.5625 14.4825 21.5625 15C21.5625 15.5162 21.1425 15.9375 20.625 15.9375ZM15 12.8125C13.7925 12.8125 12.8125 13.7962 12.8125 15C12.8125 16.2037 13.7937 17.1875 15 17.1875C16.2063 17.1875 17.1875 16.205 17.1875 15C17.1875 13.795 16.2075 12.8125 15 12.8125ZM15 15.9375C14.4825 15.9375 14.0625 15.5175 14.0625 15C14.0625 14.4837 14.4837 14.0625 15 14.0625C15.5162 14.0625 15.9375 14.4825 15.9375 15C15.9375 15.5162 15.5175 15.9375 15 15.9375ZM9.375 12.8125C8.16875 12.8125 7.1875 13.7962 7.1875 15C7.1875 16.2037 8.16875 17.1875 9.375 17.1875C10.58 17.1875 11.5625 16.205 11.5625 15C11.5625 13.795 10.5787 12.8125 9.375 12.8125ZM9.375 15.9375C8.8575 15.9375 8.4375 15.5175 8.4375 15C8.4375 14.4837 8.85875 14.0625 9.375 14.0625C9.89125 14.0625 10.3125 14.4825 10.3125 15C10.3125 15.5162 9.8925 15.9375 9.375 15.9375Z"
fill="#0F1419"
/>
<path
d="M15 28.4375C7.59 28.4375 1.5625 22.41 1.5625 15C1.5625 7.59 7.59 1.5625 15 1.5625C22.41 1.5625 28.4375 7.59 28.4375 15C28.4375 22.41 22.41 28.4375 15 28.4375ZM15 3.4375C8.625 3.4375 3.4375 8.625 3.4375 15C3.4375 21.375 8.625 26.5625 15 26.5625C21.375 26.5625 26.5625 21.375 26.5625 15C26.5625 8.625 21.375 3.4375 15 3.4375Z"
fill="#0F1419"
/>
</svg>
<span class="font-bold">More</span>
</a>
</div>
</div>
</section>
<section class="flex flex-col w-3/5 p-4 shadow-md"></section>
<section class="w-1/3 shadow-md"></section>
</body>
</html>