-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex1.html
59 lines (54 loc) · 3.17 KB
/
index1.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://code.jquery.com/jquery-3.7.1.js" integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4=" crossorigin="anonymous"></script>
<title>Houtarou</title>
</head>
<body>
<div class="background"></div>
<div class="container w-full h-screen">
<div class="h-screen flex items-center justify-center">
<div class="card shadow-xl bg-gray-200 h-2/5 w-3/5 divide-y divide-dashed rounded-md p-3" >
<div class="card-header flex gap-3 justify-between items-center" >
<div class="flex gap-1">
<img src="./images/5051065e2400b32f9450aee4d9f72895.jpg" class="w-16 h-16 rounded-full object-cover border-rose-500 border-4" alt="">
<div class="">
<h1 class="text-2xl font-bold text-foreground">lorem</h1>
<h2 class="text-sm font-bold text-gray-600">@fuentez145</h2>
</div>
</div>
<button class="bg-gradient-to-tr from-purple-500 to-rose-500 p-2 rounded-full flex items-center gap-1 " type="button">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAAAXNSR0IArs4c6QAAAWhJREFUSEvlluFNxDAMRr+bBJgEmASYBJiE2wSYBEZBD9WR6yZNHE6cEJaq/qjjF3+2kx50Jjucias/Ab6U9Dmg0JDfXsY3ku4k8SYYBpjnwW1i1G+15xb4SdJjJ7tnSReS7gf8jlGtGjhCWfS+BL8OCnim+aEOfrxNKTZJ3GIRjGyvy9e3IKktIhg+FhQ/AvP2RqwX53fls47gj8WROuK4ZwTFqHfL/CZXMT0YJ8DYRprOJvY++9KVrD3Yy3xbkW6W7eOiDr2wOkDoTpNvVY9Z4rLOK1kF/0bGRclWc52yxkwASa0UjmDfCKeAexWpbZmA2gFiI2Wj8t0ME+ahm/GsgePgl4ZIwD2UZZsp2TuruSDsdMrAu9A4TjEh6p2FD0F7YL5n4MPQEfAoPAUdBffgaWgG3IIzJnaNVru3NQnZn71Ycx83dbFkwbXMU5naTmfAEZ7K9KdgWz/0K1ur82zGidOz7vr/wF/yhl8f1bvrFwAAAABJRU5ErkJggg==" class="w-5 h-5 "/>
Follow
</button>
</div>
<div class="card-body py-2">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Obcaecati impedit quasi quos? Facilis quidem vel, ratione autem dolor, saepe voluptatibus fugit, reprehenderit illum reiciendis blanditiis hic asperiores? Non, fugiat minima?</p>
</div>
<div class="card-footer grid place-items-center">
<ul class="flex gap-2">
<li>
<a href="#" class="p-1 px-2 rounded-full border-4 hover:bg-black/10">
ICON
</a>
</li>
<li>
<a href="#" class=" p-1 px-2 rounded-full border-4 hover:bg-black/10">
ICON
</a>
</li>
<li>
<a href="#" class="p-1 px-2 rounded-full border-4 hover:bg-black/10">
ICON
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>