-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
72 lines (58 loc) · 2.66 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/output.css">
<title>Ayush Acharya ko website </title>
</head>
<body>
<nav class=" relative container mx-auto p-6">
<!--nav -bar relative use gareko chai paxi hamburger menu rakhna lai ho-->
<!-- i am still learning-->
<!-- flex container halni -->
<!-- -->
<div class=" flex items-center justify-between">
<!-- logo rakhne re -->
<div class="pt-2">
<img class="w-24" src="./logo.png" alt="logo" srcset="">
</div>
<!-- items in nav-bar -->
<!-- <div class="hidden md:flex space-x-6"> -->
<div class="hidden space-x-6 md:flex">
<a class="hover:underline" href="#">home</a>
<a class="hover:underline" href="#">menu</a>
<a class="hover:underline" href="#">about</a>
<a class="hover:underline" href="#">info</a>
<a class="hover:underline" href="#">feedback</a>
</div>
<!-- buttons -->
<a href="" class=" hidden md:block p-3 px-6 pt-2 text-white bg-blue-600 rounded-full baseline hover:bg-blue-900">let's begin</a>
</div>
</nav>
<!-- mainn section -->
<section id="mainn">
<!-- flex-container -->
<div class="container flex flex-col-reverse md:flex-row items-center px-6 mx-auto mt-10 space-y-0 md:space-y-0">
<div class="flex flex-col mb-32 space-y-12 md:w-1/2" >
<h1 class="max-w-xl text-center text-4xl font-bold md:text-5xl md:text-left">
Hi! I am <p class="text-blue-500">Ayush Acharya</p> and i welcome everyone to my blog site
</h1>
<p class="max-w-sm text-center text-zinc-600 md:text-left">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
</p>
</div>
<!-- images on right side -->
<div class="md:w-1/2">
<img src="./side.png" alt="" />
</div>
</div>
</div>
</section>
</body>
</html>