neosubhamoy/neosubhamoy-portfolio
1
1
Fork 0
mirror of https://github.com/neosubhamoy/neosubhamoy-portfolio.git synced 2025-12-20 01:09:35 +05:30
Code Issues Wiki Activity

(feat): added basic contact form

Browse Source
This commit is contained in:
Subhamoy Biswas
2023-12-08 22:22:39 +05:30
parent aac0da0479
commit 8ad0c7df4d
2 changed files with 122 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

129
htdocs/assets/style.css
View File

@@ -619,6 +619,34 @@ video {
top: 4.7rem;
}
.left-4 {
left: 1rem;
}
.top-\[-10\] {
top: -10;
}
.top-2 {
top: 0.5rem;
}
.-top-2 {
top: -0.5rem;
}
.-top-1 {
top: -0.25rem;
}
.-top-3 {
top: -0.75rem;
}
.-top-\[0\.60rem\] {
top: -0.60rem;
}
.z-10 {
z-index: 10;
}
@@ -706,6 +734,11 @@ video {
margin-bottom: 0.30rem;
}
.my-4 {
margin-top: 1rem;
margin-bottom: 1rem;
}
.mb-1 {
margin-bottom: 0.25rem;
}
@@ -866,6 +899,14 @@ video {
margin-top: 30vh;
}
.mt-4 {
margin-top: 1rem;
}
.mt-6 {
margin-top: 1.5rem;
}
.flex {
display: flex;
}
@@ -1027,12 +1068,8 @@ video {
width: 100vw;
}
.w-\[40\%\] {
width: 40%;
}
.w-\[230px\] {
width: 230px;
.w-\[30\%\] {
width: 30%;
}
.rotate-\[15deg\] {
@@ -1171,14 +1208,14 @@ video {
border-width: 3px;
}
.border-\[5px\] {
border-width: 5px;
}
.border-\[4px\] {
border-width: 4px;
}
.border-\[5px\] {
border-width: 5px;
}
.border-b-\[2px\] {
border-bottom-width: 2px;
}
@@ -1195,14 +1232,14 @@ video {
border-top-width: 3px;
}
.border-t-\[5px\] {
border-top-width: 5px;
}
.border-t-\[4px\] {
border-top-width: 4px;
}
.border-t-\[5px\] {
border-top-width: 5px;
}
.border-\[rgba\(255\2c _255\2c _255\2c _0\.15\)\] {
border-color: rgba(255, 255, 255, 0.15);
}
@@ -1245,11 +1282,6 @@ video {
border-top-color: rgb(56 189 248 / var(--tw-border-opacity));
}
.border-b-accent_primary {
--tw-border-opacity: 1;
border-bottom-color: rgb(56 189 248 / var(--tw-border-opacity));
}
.border-b-accent_secondary_transparent {
border-bottom-color: rgba(255, 255, 255, 0.30);
}
@@ -1316,6 +1348,10 @@ video {
padding: 0.30rem;
}
.p-5 {
padding: 1.25rem;
}
.px-1 {
padding-left: 0.25rem;
padding-right: 0.25rem;
@@ -1505,6 +1541,10 @@ video {
color: rgb(30 41 59 / var(--tw-text-opacity));
}
.text-accent_secondary_transparent {
color: rgba(255, 255, 255, 0.30);
}
.caret-accent_primary {
caret-color: #38BDF8;
}
@@ -1578,10 +1618,6 @@ video {
outline-offset: 2px;
}
.outline-accent_primary {
outline-color: #38BDF8;
}
.blur-2xl {
--tw-blur: blur(40px);
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
@@ -1645,6 +1681,16 @@ video {
margin-bottom: 0.75rem;
}
.invalid\:border-\[\#ff1c49\]:invalid {
--tw-border-opacity: 1;
border-color: rgb(255 28 73 / var(--tw-border-opacity));
}
.invalid\:border-\[\#ff8099\]:invalid {
--tw-border-opacity: 1;
border-color: rgb(255 128 153 / var(--tw-border-opacity));
}
.hover\:scale-125:hover {
--tw-scale-x: 1.25;
--tw-scale-y: 1.25;
@@ -1715,6 +1761,15 @@ video {
--tw-shadow: var(--tw-shadow-colored);
}
.focus\:border-accent_primary:focus {
--tw-border-opacity: 1;
border-color: rgb(56 189 248 / var(--tw-border-opacity));
}
.focus\:border-accent_primary_transparent:focus {
border-color: rgba(56, 189, 248, 0.30);
}
.group:hover .group-hover\:block {
display: block;
}
@@ -1731,6 +1786,21 @@ video {
width: 100%;
}
.group:focus .group-focus\:text-accent_primary {
--tw-text-opacity: 1;
color: rgb(56 189 248 / var(--tw-text-opacity));
}
.peer:invalid ~ .peer-invalid\:text-\[\#ff1c49\] {
--tw-text-opacity: 1;
color: rgb(255 28 73 / var(--tw-text-opacity));
}
.peer:focus ~ .peer-focus\:text-accent_primary {
--tw-text-opacity: 1;
color: rgb(56 189 248 / var(--tw-text-opacity));
}
@media (min-width: 768px) {
.md\:block {
display: block;
@@ -1896,6 +1966,10 @@ video {
margin-top: 0.5rem;
}
.lg\:mt-5 {
margin-top: 1.25rem;
}
.lg\:mt-\[2\.5rem\] {
margin-top: 2.5rem;
}
@@ -1908,10 +1982,6 @@ video {
margin-top: 7rem;
}
.lg\:mt-5 {
margin-top: 1.25rem;
}
.lg\:block {
display: block;
}
@@ -2034,11 +2104,6 @@ video {
line-height: 1.75rem;
}
.lg\:blur-2xl {
--tw-blur: blur(40px);
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.lg\:blur-lg {
--tw-blur: blur(16px);
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);

25
htdocs/contact.php
View File

@@ -36,6 +36,31 @@ require 'core/query_functions.php';
<div class="absolute bg-accent_primary w-[70px] h-[70px] rounded-full shadow-[0px_0px_120px_20px] shadow-accent_primary_transparent blur-2xl mr-0 mb-[2rem] lg:mb-0 lg:mr-[12.5rem] lg:mt-[3.5rem]"></div>
</div>
</div>
<div class="contactsection w-full flex justify-between items-start mt-32 mb-72 lg:mb-32 px-2 lg:px-0">
<div class="leftsec">
</div>
<div class="rightsec w-full lg:w-[40%]">
<form class="contactform w-full flex flex-col justify-center bg-bg_secondary rounded-lg p-5" action="">
<p class="self-start text-lg mb-4"><i class="fa-solid fa-bell text-accent_primary"></i>&nbsp; Contact Form</p>
<div class="nameinputcont w-full relative my-4">
<input type="text" class="peer w-full p-2 border-[2px] bg-bg_secondary border-accent_secondary_transparent rounded outline-none focus:border-accent_primary">
<span class="absolute text-sm -top-[0.60rem] left-4 px-3 bg-bg_secondary peer-focus:text-accent_primary">Your Full Name</span>
</div>
<div class="emailinputcont w-full relative my-4">
<input type="email" class="peer w-full p-2 border-[2px] bg-bg_secondary border-accent_secondary_transparent rounded outline-none focus:border-accent_primary invalid:border-[#ff1c49]">
<span class="absolute text-sm -top-[0.60rem] left-4 px-3 bg-bg_secondary peer-focus:text-accent_primary peer-invalid:text-[#ff1c49]">Your Email</span>
</div>
<div class="messagetextcont w-full relative my-4">
<textarea type="text" rows="5" class="peer w-full p-2 border-[2px] bg-bg_secondary border-accent_secondary_transparent rounded outline-none focus:border-accent_primary"></textarea>
<span class="absolute text-sm -top-[0.60rem] left-4 px-3 bg-bg_secondary peer-focus:text-accent_primary">Message</span>
</div>
<div class="contactsubmit w-full">
<button type="submit" class="bg-accent_primary rounded-full py-2 px-6 text-bg_primary font-bold hover:shadow-lg hover:shadow-accent_secondary_transparent hover:bg-accent_secondary hover:rounded-lg transition transform duration-500">SEND <i class="fa-regular fa-paper-plane ml-2"></i></button>
</div>
</form>
</div>
</div>
</div>
<?php require 'assets/_footer.php';?>
<script type="text/javascript" src="assets/js/preloader-config.js"></script>