-
Notifications
You must be signed in to change notification settings - Fork 0
/
contact.html
165 lines (159 loc) · 10.3 KB
/
contact.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
<!DOCTYPE html>
<html lang="en" class="scroll-smooth">
<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" />
<title>Ruchika Yadav - Contact</title>
<!-- Favicon -->
<link rel="icon" type="image/x-icon" href="./assets/favicon.ico" />
<link rel="stylesheet" href="output.css" />
<link rel="stylesheet" href="styles.css" />
<!-- Alpine.js -->
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
<!-- Start - Fonts -->
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link href="https://fonts.googleapis.com/css2?family=Signika:wght@400;700&display=swap" rel="stylesheet">
<!-- End - Fonts -->
</head>
<body
class="dark:bg-black bg-white h-screen text-black dark:text-white px-5 md:px-20 opacity-0 animate-fade-in transition duration-500">
<!-- Navbar -->
<header class="flex w-full overflow-hidden pt-10 pb-1">
<nav id="nav" x-data="{ open: false }" role="navigation" class="w-full">
<div class="container mx-auto flex flex-wrap items-center md:flex-no-wrap">
<div class="mr-4 md:mr-8">
<a href="index.html" class="text-2xl font-signika font-bold">Ruchika Yadav</a>
</div>
<div class="ml-auto md:hidden flex items-center justify-start">
<button onclick="menuToggle()" @click="open = !open"
class="tap-highlight-transparent text-black dark:text-white w-5 h-5 relative focus:outline-none"
@click="open = !open">
<span class="sr-only">Open main menu</span>
<div class="block w-5 absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2">
<span aria-hidden="true"
class="block absolute h-0.5 w-5 bg-current transform transition duration-500 ease-in-out"
:class="{'rotate-45': open,' -translate-y-1.5': !open }"></span>
<span aria-hidden="true"
class="block absolute h-0.5 w-5 bg-current transform transition duration-500 ease-in-out"
:class="{'opacity-0': open } "></span>
<span aria-hidden="true"
class="block absolute h-0.5 w-5 bg-current transform transition duration-500 ease-in-out"
:class="{'-rotate-45': open, ' translate-y-1.5': !open}"></span>
</div>
</button>
</div>
<div id="menu"
class="w-full h-0 transition-all ease-out duration-500 md:transition-none md:w-auto md:flex-grow md:flex md:items-center">
<ul id="ulMenu"
class="flex flex-col duration-300 ease-out md:space-x-5 sm:transition-none mt-5 md:flex-row md:items-center md:ml-auto md:mt-0 md:pt-0 md:border-0">
<li class="group transition duration-300">
<a href="index.html" class="font-signika text-2xl">HOME
<span
class="hidden md:block max-w-0 group-hover:max-w-full transition-all duration-500 h-0.5 bg-black dark:bg-white"></span>
</a>
</li>
<li class="group transition duration-300">
<a href="about_me.html" class="font-signika text-2xl">ABOUT ME
<span
class="hidden md:block max-w-0 group-hover:max-w-full transition-all duration-500 h-0.5 bg-black dark:bg-white"></span>
</a>
</li>
<li class="group transition duration-300">
<a href="contact.html" class="font-signika text-2xl">CONTACT
<span class="hidden md:block h-0.5 bg-black dark:bg-white"></span>
</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<!-- Content -->
<div class="container mx-auto">
<div class="grid grid-cols-2 gap-16">
<section class="col-span-2 md:col-span-1">
<div class="max-w-screen-md">
<h1 class="text-4xl pt-10 pb-8"><b>CONTACT</b></h1>
<form class="space-y-8" action="mailto:ruchika14yadav@gmail.com">
<div>
<label for="email" class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300">Your
email</label>
<input type="email" id="email"
class="shadow-sm bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 dark:bg-neutral-900 dark:border-neutral-800 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500 dark:shadow-sm-light"
placeholder="EXAMPLE@gmail.com" required />
</div>
<div>
<label for="subject"
class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300">Subject</label>
<input type="text" id="subject"
class="block p-3 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 shadow-sm focus:ring-primary-500 focus:border-primary-500 dark:bg-neutral-900 dark:border-neutral-800 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500 dark:shadow-sm-light"
placeholder="Let me know how I can help you" required />
</div>
<div class="sm:col-span-2">
<label for="message" class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-400">Your
message</label>
<textarea id="message" rows="6"
class="block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg shadow-sm border border-gray-300 focus:ring-primary-500 focus:border-primary-500 dark:bg-neutral-900 dark:border-neutral-800 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
placeholder="Leave a comment..." required></textarea>
</div>
<button type="submit"
class="py-3 px-5 text-sm font-medium text-center bg-black dark:bg-white text-white dark:text-black rounded-lg bg-primary-700 sm:w-fit hover:bg-primary-800 focus:ring-4 focus:outline-none focus:ring-primary-300 dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800">
Send message
</button>
</form>
</div>
</section>
<div class="col-span-2 md:col-span-1 flex relative">
<div
class="bg-white dark:bg-neutral-900 p-5 pb-20 m-6 md:m-12 shadow-lg border border-gray-100 dark:border-neutral-800 hover:rotate-0 transition duration-500 rotate-6 relative">
<img
src="assets/ff.jpg"
alt="" class="flex flex-col aspect-square w-full object-cover h-auto max-h-full" />
</div>
</div>
</div>
</div>
<!-- Footer -->
<footer>
<div class="max-w-screen-xl py-16 mx-auto">
<div class="grid grid-cols-1 gap-8 text-center mx-auto">
<div>
<p class="font-signika"><b>RUCHIKA YADAV</b></p>
<p class="mt-4 text-sm text-gray-600 dark:text-gray-300">
Ghaziabad , India<br />+91 7065314385
</p>
<div class="flex mx-auto">
<div class="mx-auto space-x-6 flex mt-8 text-gray-600 dark:text-gray-300">
<a class="transition duration-300 hover:opacity-75" href="https://www.instagram.com/r.u.c.h.i.k.a.14/" target="_blank"
rel="noreferrer">
<span class="sr-only"> Instagram </span>
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fillRule="evenodd"
d="M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.067.06 1.407.06 4.123v.08c0 2.643-.012 2.987-.06 4.043-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.067.048-1.407.06-4.123.06h-.08c-2.643 0-2.987-.012-4.043-.06-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.047-1.024-.06-1.379-.06-3.808v-.63c0-2.43.013-2.784.06-3.808.049-1.064.218-1.791.465-2.427a4.902 4.902 0 011.153-1.772A4.902 4.902 0 015.45 2.525c.636-.247 1.363-.416 2.427-.465C8.901 2.013 9.256 2 11.685 2h.63zm-.081 1.802h-.468c-2.456 0-2.784.011-3.807.058-.975.045-1.504.207-1.857.344-.467.182-.8.398-1.15.748-.35.35-.566.683-.748 1.15-.137.353-.3.882-.344 1.857-.047 1.023-.058 1.351-.058 3.807v.468c0 2.456.011 2.784.058 3.807.045.975.207 1.504.344 1.857.182.466.399.8.748 1.15.35.35.683.566 1.15.748.353.137.882.3 1.857.344 1.054.048 1.37.058 4.041.058h.08c2.597 0 2.917-.01 3.96-.058.976-.045 1.505-.207 1.858-.344.466-.182.8-.398 1.15-.748.35-.35.566-.683.748-1.15.137-.353.3-.882.344-1.857.048-1.055.058-1.37.058-4.041v-.08c0-2.597-.01-2.917-.058-3.96-.045-.976-.207-1.505-.344-1.858a3.097 3.097 0 00-.748-1.15 3.098 3.098 0 00-1.15-.748c-.353-.137-.882-.3-1.857-.344-1.023-.047-1.351-.058-3.807-.058zM12 6.865a5.135 5.135 0 110 10.27 5.135 5.135 0 010-10.27zm0 1.802a3.333 3.333 0 100 6.666 3.333 3.333 0 000-6.666zm5.338-3.205a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4z"
clipRule="evenodd" />
</svg>
</a>
<a class="transition duration-300 hover:opacity-75" href="https://www.linkedin.com/in/ruchika-connected14/" target="_blank"
rel="noreferrer">
<span class="sr-only">LinkedIn</span>
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path
d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z" />
</svg>
</a>
</div>
</div>
</div>
</div>
<p class="mt-8 text-xs text-gray-600 dark:text-gray-300 text-center">
© 2023 Developed and Designed by
<a href="" class="underline">RUCHIKA YADAV</a>
</p>
</div>
</footer>
<script src="fade_in.js"></script>
<script src="menu.js"></script>
</body>
</html>