Skip to content

Enhanced the contact us page #713

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Hetalnikam wants to merge 4 commits into
base: main
Choose a base branch
from
Open

Enhanced the contact us page #713

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
60f049a
hover effect added
Hetalnikam Oct 15, 2024
d6af35c
Merge branch 'dohinaf:main' into main
Hetalnikam Oct 20, 2024
147a11d
Improved contact us page
Hetalnikam Oct 20, 2024
95c6046
Contact us updated
Hetalnikam Oct 20, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
98 changes: 81 additions & 17 deletions contact.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,16 +6,26 @@
<meta http-equiv="X-UA-Compatible" content="IE-edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contact Us - Responsive Ice Cream Website</title>


<!-- Font Awesome CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">

<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;500;600&display=swap" rel="stylesheet">

<!-- Custom CSS -->
<link rel="stylesheet" href="preloaderStyle.css">
<link rel="stylesheet" href="style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js" defer></script>

<style>
/* Gradient Background */
body {
background: linear-gradient(135deg, #f9f9f9, #f0f0f0);
font-family: 'Poppins', sans-serif;
color: #333;
}

/* Circle styles */
.circle {
height: 24px;
Expand All @@ -29,23 +39,68 @@
z-index: 99999999;
/* Stays on top of all elements */
}

/* Header Styles */
.header {
background: rgba(255, 255, 255, 0.9);
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.navbar a {
padding: 15px 20px;
transition: color 0.3s, background-color 0.3s;
}

.navbar a:hover {
background-color: #ffe1a8;
color: #333;
}

.icons div {
transition: color 0.3s;
}

.icons div:hover {
color: #f39c12;
}

/* Footer Styles */
.footer {
background: #333;
color: white;
padding: 20px 0;
text-align: center;
}

.footer a {
color: #f39c12;
}

.footer a:hover {
color: #e67e22;
}

/* Contact Form Styles */
.visme_d {
margin: 20px 0;
}
</style>
</head>

<body>
<!-- preloader -->
<div id="preloader">
<div class="wrapper">
<div class="box-wrap">
<div class="box one"></div>
<div class="box two"></div>
<div class="box three"></div>
<div class="box four"></div>
<div class="box five"></div>
<div class="box six"></div>
<!-- Preloader -->
<div id="preloader">
<div class="wrapper">
<div class="box-wrap">
<div class="box one"></div>
<div class="box two"></div>
<div class="box three"></div>
<div class="box four"></div>
<div class="box five"></div>
<div class="box six"></div>
</div>
</div>
</div>
</div>
<!-- Circles -->
<div class="circle"></div>
<div class="circle"></div>
Expand Down Expand Up @@ -90,7 +145,8 @@
</header>
<!-- Header Ends Here -->

<div class="visme_d" data-title="Contact Form" data-url="4d6yepek-contact-form" data-domain="forms" data-full-page="false" data-min-height="500px" data-form-id="96782"></div><script src="https://static-bundles.visme.co/forms/vismeforms-embed.js"></script>
<div class="visme_d" data-title="Contact Form" data-url="4d6yepek-contact-form" data-domain="forms" data-full-page="false" data-min-height="500px" data-form-id="96782"></div>
<script src="https://static-bundles.visme.co/forms/vismeforms-embed.js"></script>

<!-- Footer Section Starts Here -->
<section class="footer" id="footer">
Expand All @@ -106,10 +162,10 @@
</div>
</section>
<!-- Footer Section Ends Here -->
<script src="preloader.js"></script>
<script src="preloader.js" defer></script>

<!-- JavaScript File -->
<script src="script.js"></script>
<script src="script.js" defer></script>
<script>
document.addEventListener('DOMContentLoaded', () => {
gsap.from(".contact-form", { opacity: 0, y: 50, duration: 1.5, ease: "power2.out" });
Expand Down Expand Up @@ -180,8 +236,16 @@
animateCircles();
</script>
<div class="gtranslate_wrapper"></div>
<script>window.gtranslateSettings = {"default_language":"en","detect_browser_language":true,"wrapper_selector":".gtranslate_wrapper"}</script>
<script>
window.gtranslateSettings = {
"default_language": "en",
"detect_browser_language": true,
"wrapper_selector": ".gtranslate_wrapper"
}
</script>
<script src="https://cdn.gtranslate.net/widgets/latest/float.js" defer></script>
</body>

</html>

//
54 changes: 52 additions & 2 deletions style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -880,9 +880,9 @@ button:hover {

/* filter box styles end */

/* Blogs Styles */
Blogs Styles

.heading {
/* .heading {
text-align: center;
color: var(--text-color);
text-transform: uppercase;
Expand Down Expand Up @@ -924,8 +924,58 @@ button:hover {
color: var(--text-color);
padding: 1rem 0;
line-height: 1.8;
} */

/* New styles for hover pop-up effect */
.blog-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 2rem;
}

.blog {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
background-color: var(--background-color);
border-radius: 1rem;
padding: 2rem;
width: 500px;
box-shadow: 8px 8px 20px rgba(0, 0, 0, 0.3);
transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transition for scaling and shadow */
}

.blog:hover {
transform: scale(1.05); /* Scale up by 5% on hover */
box-shadow: 12px 12px 30px rgba(0, 0, 0, 0.5); /* Deeper shadow on hover */
}

.blog-image {
width: 70%;
border-radius: 10rem;
}

.blog h3 {
font-size: 2rem;
color: #ffbe0b;
margin: 5px;
}

.blog p {
font-size: 1.7rem;
margin: 1rem 0;
}

.btn {
background: linear-gradient(to right, #ff4e50, #fc913a);
color: var(--text-color);
padding: 0.8rem 1.5rem;
border: none;
border-radius: 5px;
cursor: pointer;
}
/* Menu Styles */

#menu h1 {
Expand Down