Skip to content

Commit

Permalink
Merge pull request #299 from dhruv-4444/main
Browse files Browse the repository at this point in the history 
Enhanced the UI of the contact us page.
  • Loading branch information
@Gyanthakur
Gyanthakur authored Oct 17, 2024
2 parents c32012f + 07c08bb commit 0500aa8
Show file tree
Hide file tree
Showing 3 changed files with 286 additions and 253 deletions.
149 changes: 82 additions & 67 deletions contact-us.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,95 +2,105 @@
<html lang="en">

<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Contact Us</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="shortcut icon" href="https://oyepriyansh.pages.dev/i/favicon.ico" type="image/x-icon" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"
integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.8/css/line.css" />
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/css/ionicons.min.css">


<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Contact Us</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="shortcut icon" href="https://oyepriyansh.pages.dev/i/favicon.ico" type="image/x-icon" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"
integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.8/css/line.css" />
<script async src="https://www.googletagmanager.com/gtag/js?id=G-GTFGBS8HG8"></script>
<script type="text/javascript" src="https://oyepriyansh.pages.dev/cdnjs/analytics/devprofiles.js"></script>
</head>
</head>

<body>
<div class="progress-bar" id="progressBar">
<div class="bar" id="bar"></div>
</div>
<!-- Navigation Header -->
<header>
<nav>

<p class="title" >Contact Us</p>


<p class="title">Contact Us</p>
<div class="nav-links">
<a href="index.html">
<button class="add">
Go To Profile Section &nbsp; <i class="fa-solid fa-user"></i>
<button class="add" >
Go To Profile Section &nbsp;<i class="fa-solid fa-user"></i>
</button>
</a>

<a href="project.html">
<button class="add">
Go to Project section &nbsp; <i class="fa-solid fa-list-check"></i>
Go to Project Section &nbsp;<i class="fa-solid fa-list-check"></i>
</button>
</a>

<a href="about-us.html">
<button class="add" onclick='window.open("about-us.html","_self")'>
About Us &nbsp; <i class="fa-solid fa-info-circle"></i>
<button class="add">
About Us &nbsp;<i class="fa-solid fa-info-circle"></i>
</button>
</a>
<a href="contact-us.html">
<button class="add" onclick='window.open("contact-us.html","_self")'>
Contact Us &nbsp; <i class="fa-solid fa-address-book"></i>
<button class="add">
Contact Us &nbsp;<i class="fa-solid fa-address-book"></i>
</button>
</a>
<button class="dark-btn"><img id="icon" src="dark.png" alt="Dark"></img></button>
</a>
<button class="dark-btn">
<img id="icon" src="dark.png" alt="Dark">
</button>
</div>
</nav>
</header>

<div class="line"><br /></div>

<div class="container">
<div class="add contact-container">
<form class="contact-form" action="https://formspree.io/f/mdkonvre" method="POST">
<div class="input-group">
<input type="text" id="name" name="name" placeholder="Your Name" required />
</div>
<div class="input-group">
<input type="email" id="email" name="email" placeholder="Your Email" required />
</div>
<div class="input-group">
<textarea name="message" id="message" placeholder="Your Message" required></textarea>
</div>
<div class="input-group">
<button type="submit">Send Message</button>
</div>
</form>
<!-- Main Contact Form Section -->
<div class="contact-section">
<div class="container">
<div class="contact-info">
<a href="tel:+1234567890" class="info-item">
<i class="fas fa-phone"></i> <!-- Font Awesome icon for phone -->
<span>+123 456 7890</span>
</a>
<a href="mailto:[email protected]" class="info-item">
<i class="fas fa-envelope"></i> <!-- Font Awesome icon for email -->
<span>[email protected]</span>
</a>
<a href="https://www.google.com/maps/place/123+Street+Name,+City,+Country" class="info-item" target="_blank">
<i class="fas fa-map-marker-alt"></i> <!-- Font Awesome icon for address -->
<span>123 Street Name, City, Country</span>
</a>
</div>

<div class="contact-container">
<h2>Get In Touch</h2>
<p style="color: black; margin-bottom: 30px;">Feel free to reach out for any inquiries or feedback.</p>

<!-- Contact Form -->
<form class="contact-form" action="https://formspree.io/f/mdkonvre" method="POST">
<div class="input-group">
<input type="text" id="name" name="name" placeholder="Your Name" required />
</div>
<div class="input-group">
<input type="email" id="email" name="email" placeholder="Your Email" required />
</div>
<div class="input-group">
<textarea name="message" id="message" placeholder="Your Message" required></textarea>
</div>
<div class="input-group">
<button type="submit">Send Message</button>
</div>
</form>
</div>

<!-- Error Message -->
<div id="error-message" class="error-message"></div>
</div>

<div id="error-message" class="error-message"></div>
</div>


<div class="line"><br /></div>

<button id="backToTopBtn" title="Go to top"><i class="fa-solid fa-arrow-up"></i>
</button>
<script src="script.js"></script>

<!-- Social Media Links and Footer -->
<footer class="footer">
<ul class="social-icon">
<li class="social-icon__item">
<a class="social-icon__link"
href="https://m.facebook.com/profile.php?eav=AfaQiAnLMKoJt9fhAP0mpclv59dhzAMBnCy-rfJi2qawDv01IOkuI4RSxLQFG4508J0&paipv=0">
<ion-icon name="logo-facebook"></ion-icon>
<i class="fa-brands fa-facebook"></i>
</a>
</li>
<li class="social-icon__item">
Expand All @@ -100,17 +110,20 @@
</li>
<li class="social-icon__item">
<a class="social-icon__link" href="https://www.linkedin.com/in/gyan-pratap-singh-275785236/">
<ion-icon name="logo-linkedin"></ion-icon>
<i class="fa-brands fa-linkedin"></i>
</a>
</li>
<li class="social-icon__item">
<a class="social-icon__link" href="https://www.instagram.com/gp.singh.ro.ckstar4438/">
<i class="fa-brands fa-instagram"></i>
</a>
</li>
<li class="social-icon__item">
<a class="social-icon__link" href=" https://www.instagram.com/gp.singh.ro.ckstar4438/">
<ion-icon name="logo-instagram"></ion-icon>
<a class="social-icon__link" href="https://wa.me/918957818597?text=Hey%20%F0%9F%91%8B%2C%20how%20can%20I%20help%20you%3F">
<i class="fa-brands fa-whatsapp"></i>
</a>
</li>
<li class="social-icon__item"></i><a class="social-icon__link" href="https://wa.me/918957818597?text=Hey%20%F0%9F%91%8B%2C%20how%20can%20I%20help%20you%3F">
<ion-icon name="logo-whatsapp"></ion-icon>
</a></li>

</ul>
<ul class="menu">
<li class="menu__item"><a class="menu__link" href="#">Home</a></li>
Expand All @@ -129,10 +142,12 @@
</ul>
<p>Dev Profiles &copy; <span id="dates"></span> | All Rights Reserved</p>
</footer>
<!-- Back to Top Button -->
<button id="backToTopBtn" title="Go to top">
<i class="fa-solid fa-arrow-up"></i>
</button>

<script type="module" src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js"></script>
<script src="script.js"></script>
</body>

</html>
</html>
Loading

0 comments on commit 0500aa8

Please sign in to comment.