-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
80 lines (79 loc) · 5.47 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Portfolio</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.9.6/tailwind.min.css" integrity="sha512-l7qZAq1JcXdHei6h2z8h8sMe3NbMrmowhOl+QkP3UhifPpCW2MC4M0i26Y8wYpbz1xD9t61MLT9L1N773dzlOA==" crossorigin="anonymous" />
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@300&display=swap" rel="stylesheet">
<style>
body{
font-family: 'Roboto Mono', monospace;
}
</style>
</head>
<body class="bg-black ">
<section class="text-gray-700 body-font">
<div class="container px-2 py-12 mx-auto">
<div class="flex flex-wrap -m-4">
<div class="p-4 lg:w-1/3 px-2 py-12">
<h1 class="title-font sm:text-4xl text-3xl mb-4 font-medium text-yellow-100">Hello,
<br class="hidden lg:inline-block">
<span class="bg-gradient-to-r from-purple-400 via-gray-500 to-black px-2 py-2 ">I am Generate Portfolio</span>
</h1>
<p class="mb-8 leading-relaxed text-gray-100">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Libero voluptatem quaerat delectus illum illo dolorem voluptas provident? Atque recusandae vel delectus quas placeat suscipit quo illo, aliquam possimus eius modi minus quasi, quisquam accusamus!</p>
<div class="flex">
<button class="inline-flex text-black bg-yellow-500 border-0 py-2 px-6 focus:outline-none hover:bg-green-600 text-lg border-t-4 border-pink-900 border-l-4 border-pink-900 shadow-2xl">Button</button>
<button class="ml-4 inline-flex text-black bg-pink-500 border-0 py-2 px-6 focus:outline-none hover:bg-green-600 text-lg border-t-4 border-pink-900 border-l-4 border-pink-900 shadow-2xl">Button</button>
</div>
</div>
<div class="p-4 lg:w-1/3 ">
<div class="h-full overflow-hidden text-center relative">
<img class="object-cover object-center border-t-4 border-pink-700 border-l-4 border-pink-700" alt="hero" src="https://source.unsplash.com/user/erondu/900x1100">
</div>
</div>
<div class="p-4 lg:w-1/3 px-2 py-12">
<section class="text-gray-500 body-font">
<div class="container px-5 py-2 mx-auto flex flex-wrap">
<div class="flex flex-wrap md:-m-2 -m-1">
<div class="flex flex-wrap w-1/2">
<div class="md:p-2 p-1 w-1/2 shadow-2xl">
<img alt="gallery" class="w-full object-cover h-full object-center block border-t-4 border-pink-700 border-l-4 border-pink-700" src=https://source.unsplash.com/random">
</div>
<div class="md:p-2 p-1 w-1/2 shadow-2xl">
<img alt="gallery" class="w-full object-cover h-full object-center block border-t-4 border-pink-700 border-l-4 border-pink-700" src="https://source.unsplash.com/random">
</div>
<div class="md:p-2 p-1 w-full shadow-2xl">
<img alt="gallery" class="w-full h-full object-cover object-center block border-t-4 border-pink-700 border-l-4 border-pink-700" src="https://source.unsplash.com/random">
</div>
</div>
<div class="flex flex-wrap w-1/2">
<div class="md:p-2 p-1 w-full shadow-2xl">
<img alt="gallery" class="w-full h-full object-cover object-center block border-t-4 border-pink-700 border-l-4 border-pink-700" src="https://source.unsplash.com/random/601x361">
</div>
<div class="md:p-2 p-1 w-1/2 shadow-2xl">
<img alt="gallery" class="w-full object-cover h-full object-center block border-t-4 border-pink-700 border-l-4 border-pink-700" src="https://source.unsplash.com/random/502x302">
</div>
<div class="md:p-2 p-1 w-1/2 shadow-2xl">
<img alt="gallery" class="w-full object-cover h-full object-center block border-t-4 border-pink-700 border-l-4 border-pink-700" src="https://source.unsplash.com/random/503x303">
</div>
<div class="md:p-2 p-1 w-full">
<img alt="gallery" class="w-full h-full object-cover object-center block border-t-4 border-pink-700 border-l-4 border-pink-700" src="https://source.unsplash.com/random/601x361">
</div>
<div class="md:p-2 p-1 w-1/2 shadow-2xl">
<img alt="gallery" class="w-full object-cover h-full object-center block border-t-4 border-pink-700 border-l-4 border-pink-700" src="https://source.unsplash.com/random/502x302">
</div>
<div class="md:p-2 p-1 w-1/2 shadow-2xl">
<img alt="gallery" class="w-full object-cover h-full object-center block border-t-4 border-pink-700 border-l-4 border-pink-700" src="https://source.unsplash.com/random/503x303">
</div>
</div>
</div>
</div>
</section>
</div>
</div>
</div>
</section>
</body>
</html>