Skip to content

Commit

Permalink
Merge pull request #1202 from Harsh2504/ContactPage
Browse files Browse the repository at this point in the history 
#3 Enhanced Contact Page ,dark mode and animations
  • Loading branch information
@vikhyatsingh123
vikhyatsingh123 authored Dec 31, 2023
2 parents e8a68c4 + f6c7d97 commit e0018de
Show file tree
Hide file tree
Showing 9 changed files with 253 additions and 88 deletions.
19 changes: 10 additions & 9 deletions about.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css"
integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz" crossorigin="anonymous" />
<link rel="icon" type="image/png" href="Images/favicon.png">
<title>Naruto</title>
<title>Naruto-About</title>
<link rel="shortcut icon" href="./Images/favicon.ico" />
<link rel="stylesheet" href="css/index.css">
<link rel="stylesheet" href="css/contact.css">
Expand Down Expand Up @@ -41,7 +41,6 @@
<!-- <a class="navbar-brand brand1 ml-4" href="#" style="color: beige;">Naruto</a> -->





<span class="clear" onclick="document.getElementById('mysearch').value = ' '"></span>
Expand All @@ -58,13 +57,15 @@
<a class="nav-link link" href="./index.html" >Home</a>

</li>
<li class="nav-item active mx-4">
<a class="link nav-link " href="./about.html">About</a>
</li>
<li class="nav-item mx-4">
<a class="link nav-link " href="./contact.html" >Contact</a>

</li>
<li class="nav-item mx-4">
<a class="link nav-link " href="./about.html" >About</a>
</li>
<li class="nav-item mx-4">
<a class="link nav-link " href="./contact.html" >Contact</a>
</li>
<li class="nav-item mx-4">
<a class="link nav-link " href="./Game.html" >Game</a>
</li>
<div class="dark_lang">
<li>
<div>
Expand Down
Binary file added adi image/contact naruto.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added adi image/contact_naruto.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added adi image/kakashi.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
48 changes: 32 additions & 16 deletions contact.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,23 +21,23 @@
<link href="css/translate.css" rel="stylesheet" type="text/css" media="all" />
<link rel="stylesheet" href="css/contact.css" />
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<title>Contact Form</title>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
/>
<title>Naruto-Contact</title>
</head>
<body class="contact_body light-mode">

<body class="contact_body light-mode" style="position: relative; overflow-y: hidden;">
<header>
<nav class="navbar fixed-top navbar-expand-lg navbar-light" style="height: 60px; padding:5px 5px 5px 30px;">
<nav class=" animate__animated animate__fadeInDown navbar fixed-top navbar-expand-lg navbar-light" style="height: 60px; padding:5px 5px 5px 30px;">

<img src="adi image/naruto-advenimiento-los-animes-cortos-2.png" style="max-height: 100%; width: auto;">
<!-- <a class="navbar-brand brand1 ml-4" href="#" style="color: beige;">Naruto</a> -->


<div class="search">
<div class="icon"></div>
<div class="input">
<input type="text" placeholder="search" id="mysearch">
</div>

<span class="clear" onclick="document.getElementById('mysearch').value = ' '"></span>
</div>


<button class="navbar-toggler" class="menu-btn" type="button" data-toggle="collapse"
data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
aria-label="Toggle navigation">
Expand Down Expand Up @@ -82,13 +82,15 @@
</nav>

</header>
<h1>Naruto Friends, Get In Touch with us</h1>

<div class="wpcf7" id="wpcf7-f156-p143-o1 formwrap">
<h1 class=" animate__animated animate__fadeInUp animate__slow">Naruto Friends, Get In Touch with us</h1>
<img class="img1 animate__animated animate__fadeInLeft" src="adi image/kakashi.png" alt="">
<img class="img2 animate__animated animate__fadeInRight" src="adi image/contact_naruto.png " alt="">
<div class="wpcf7 container animate__animated animate__fadeInUp animate__slow" id="wpcf7-f156-p143-o1 formwrap" >

<form
action="https://formsubmit.co/[email protected]"
method="POST"
class="contact__form wpcf7-form"
class="contact__form wpcf7-form "
novalidate="novalidate"
>
<input type="hidden" name="_captcha" value="false" />
Expand Down Expand Up @@ -148,12 +150,26 @@ <h1>Naruto Friends, Get In Touch with us</h1>
<input
type="submit"
value="Send"
class="wpcf7-form-control wpcf7-submit btn"
class="wpcf7-form-control wpcf7-submit btn"
style="float: none; margin-left: 165px;"
/>
</p>
<div class="wpcf7-response-output wpcf7-display-none"></div>
</form>
</div>

<footer class="footer" style="padding: 20px;">
<marquee> Developed and Designed By <span id="idblink" onclick="tap()" style="cursor: pointer;"><u>Vikhyat
Singh</u></span> | © All
Rights Reserved</marquee>
</footer>
<script>
function tap() {
const link = document.getElementById('idblink')
window.location.href = "https://github.com/vikhyatsingh123"
}
</script>

<script>
function darkmode() {
// console.log("hello");
Expand Down
179 changes: 140 additions & 39 deletions css/contact.css
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,9 @@
@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro);

.contact_body {
background: url("/adi image/677425.jpg");

/* background: url("/adi image/677425.jpg"); */

-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
Expand All @@ -14,10 +16,15 @@
right: 0;
bottom: 0;
overflow-y: auto;
}

height: 100vh;
}
.container{
margin-top: 50px;
margin-bottom: 95px;
}
h1 {
color:aqua;
color:rgb(255, 255, 255);
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.4);
padding-top: 30px;
font-size: 50px;
Expand All @@ -27,76 +34,147 @@ h1 {
margin: 10px;
}

form {
.dark-mode h1{
color:#c0a5ff;
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.4);
padding-top: 30px;
font-size: 50px;
font-weight: 700;
text-align: center;
font-family: 'Source Sans Pro', sans-serif;
margin: 10px;
}


.light-mode form {
margin-left: auto;
margin-right: auto;
width: 965px;
height: 450px;
width: 600px;
height: auto;
padding: 30px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
background: rgba( 255, 255, 255, 0.2 );
box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
backdrop-filter: blur( 5.5px );
-webkit-backdrop-filter: blur( 5.5px );
border-radius: 10px;
border: 1px solid rgba( 255, 255, 255, 0.18 );
overflow: hidden;
}

textarea {
background: white;
width: 894px;
height: 110px;
border: none;


.dark-mode form {
margin-left: auto;
margin-right: auto;
width: 600px;

height: auto;
padding: 30px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
display: block;
font-family: 'Source Sans Pro', sans-serif;


backdrop-filter: blur( 5.5px );
-webkit-backdrop-filter: blur( 5.5px );
border-radius: 10px;
background: rgba(83, 83, 83, 0.25);
box-shadow: rgba(145, 56, 255, 0.35) 0px 30px 100px 0px;
border: 2px solid rgba(146, 56, 255, 0.711);
overflow: hidden;
}
.light-mode textarea {
font-size: 18px;
color: black;
padding-left: 45px;
padding-right: 20px;
padding-top: 12px;
color: rgb(82, 82, 82);
width: 100%;
border-radius: 20px;
height: 40px;
padding: 20px 20px;
min-height: 122px;
background-color: rgba(255, 255, 255, 0.536);
border: 2px solid rgba(70, 70, 70, 0.873);
transition: 0.3s ease-in;
margin-bottom: 20px;
overflow: hidden;
}

.dark-mode textarea {
font-size: 18px;
color: rgb(27, 27, 27);
width: 100%;
border-radius: 20px;
height: 40px;
padding: 20px 20px;
min-height: 122px;

background-color: rgb(255, 255, 255);
border: 3px solid rgb(146, 56, 255);
transition: 0.3s ease-in;

margin-bottom: 20px;
overflow: hidden;
}



.nameinput,
.emailinput {

.light-mode .nameinput,
.light-mode .emailinput {
width: 894px;
height: 48px;
border: none;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
display: block;
font-family: 'Source Sans Pro', sans-serif;
width: 100%;
border-radius: 20px;
height: 40px;
padding: 20px 20px;
background-color: rgba(255, 255, 255, 0.536);
border: 2px solid rgba(70, 70, 70, 0.873);
transition: 0.3s ease-in;
font-size: 18px;
color: black;
padding-left: 20px;
padding-right: 20px;
color: rgb(82, 82, 82);
margin-bottom: 20px;
}


.dark-mode .nameinput,
.dark-mode .emailinput {
width: 894px;
height: 48px;
width: 100%;
border-radius: 20px;
height: 40px;
padding: 20px 20px;
border-style: none;
background-color: rgb(255, 255, 255);
border: 3px solid rgb(146, 56, 255);
transition: 0.3s ease-in;
font-size: 18px;
color: rgb(4, 4, 4);
margin-bottom: 20px;
}



input[type=submit] {
cursor: pointer;
}

input.nameinput {
background: white;



padding-left: 45px;
}

input.emailinput {
background: white;
padding-left: 45px;
}

Expand All @@ -123,11 +201,19 @@ input.message {
color: #fff;
}

input:focus,
textarea:focus {
-moz-box-shadow: 0 0 10px 10px rgb(3, 213, 245);
-webkit-box-shadow: 0 0 10px 10px rgb(3, 213, 245);
box-shadow: 0 0 10px 10px rgb(3, 213, 245);

.light-mode input:focus,
.light-mode textarea:focus {
background-color: rgb(255, 255, 255);
box-shadow: 0 0 2px 5px rgb(132, 222, 236);
overflow: hidden;
border:none;
}

.dark-mode input:focus,
.dark-mode textarea:focus {
background-color: rgb(255, 255, 255);
box-shadow: 0 0 2px 5px rgb(160, 132, 236);
overflow: hidden;
border:none;
}
Expand Down Expand Up @@ -186,7 +272,6 @@ textarea:focus::placeholder{
background: #000000;
outline: none;
color:#ffffff;

box-shadow: 0 4px #cecece;
top: 2px;
}
Expand Down Expand Up @@ -291,11 +376,27 @@ textarea:focus::placeholder{
width: 225px !important;
}


.btn {
width: 110px;
}
}
.VIpgJd-ZVi9od-ORHb-OEVmcd{
display: none;
z-index: -10;

}

.img1{
position: absolute;
left: -30px;
bottom: -50px;
width: 500px;
}
.img2{
position: absolute;
right: -100px;
bottom: 50px;
width: 500px;

}
Loading

0 comments on commit e0018de

Please sign in to comment.