Skip to content
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

Contact us #131

Closed
wants to merge 3 commits into from
+747 −0
Closed

Contact us #131

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
bd8e71c
Added Contact us page
AbhineshJha Jan 14, 2024
b8dabe2
Added Navbar
AbhineshJha Jan 16, 2024
a84821c
Merge branch 'main' into ContactUs
AbhineshJha Jan 16, 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
154 changes: 154 additions & 0 deletions Pages/Contact-Us/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,154 @@

<!DOCTYPE html>
<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" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css">
<link rel="icon" type="image/x-icon" href="../../assets/logo.png">
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="media-query.css">

</head>
<body>

<!-- social media section -->

<div class="mf-social-side-list">
<ul>
<li>
<a href="https://www.facebook.com" target="_blank"><i class="fab fa-facebook-f"></i></a>
</li>
<li>
<a href="https://www.instagram.com" target="_blank"><i class="fab fa-instagram"></i></a>
</li>
<li>
<a href="https://www.youtube.com" target="_blank"><i class="fab fa-youtube"></i></a>
</li>
<li>
<a href="https://www.linkedin.com" target="_blank"><i class="fab fa-linkedin-in"></i></a>
</li>
<li>
<a href="https://www.twitter.com" target="_blank">
<img src="assets/twitterLogo.jpg" alt="Twitter Logo" id="tw-logo" style="
border-radius: 50%;
width: full;
">
</a>
</li>
</ul>
</div>

<!-- nav bar -->
<nav>
<div class="container main-nav flex">
<a href="./index.html" class="company-logo">

</a>
<div class="nav-links" id="nav-links">
<ul class="nav-menu">
<li style="padding-right: 200px;"><img src="/Virtuo-Learn/assets/asset 41.png" alt="company logo" width="250px"></li>
<li><a href="index.html" class="hover-link">Home</a></li>
<li><a href="./Pages/About-Us/index.html" class="hover-link">About Us</a></li>
<li><a href="./Pages/Simulation/index.html" class="hover-link">Simulations</a></li>
<li><a href="./Pages/3D-Visualizations/index.html" class="hover-link">3D Visualisations</a></li>
<li><a href="./Pages/Quizes/index.html" class="hover-link">Quizzes</a></li>
<li><a href="./Pages/Videos/index.html" class="hover-link">Videos</a></li>
<li><a href="./Pages/Doubt Engine/index.html" class="hover-link">Doubt Engine</a></li>
</ul>
</div>
<div class="hamburger">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</div>
</div>
</nav>


<section id="section-wrapper">
<div class="box-wrapper">
<div class="info-wrap">
<h2 class="info-title">Contact Information</h2>
<h3 class="info-sub-title">
Fill up the form and our Team will get back to you within 24 hours
</h3>
<ul class="info-details">
<li>
<i class="fas fa-paper-plane"></i>
<span>Email:</span>
<a href="[email protected]"> [email protected]</a>
</li>
<li>
<i class="fas fa-globe"></i>
<span>Website:</span>
<a href="https://virtuo-learn.vercel.app/">virtuo-learn.vercel.app</a>
</li>
</ul>
<ul class="social-icons">
<li>
<a href="#"><i class="fab fa-facebook"></i></a>
</li>
<li>
<a href="#"><i class="fab fa-twitter"></i></a>
</li>
<li>
<a href="https://www.linkedin.com/in/jayesh-batra-in/"><i class="fab fa-linkedin-in"></i></a>
</li>
</ul>
</div>
<div class="form-wrap">
<form name="Virtuo Contact" autocomplete="off" netlify>
<h2 class="form-title">Send us a message :)</h2>
<div class="form-fields">
<div class="form-group">
<input type="text" class="fname" name="name" placeholder="Name" required>
</div>
<div class="form-group">
<input type="email" class="email" name="email" placeholder="Email" required>
</div>
<div class="form-group">
<textarea name="message" placeholder="Your Message" required></textarea>
</div>
</div>
<button type="submit" class="submit-button">Send Message</button>
</form>
</div>
</div>
</section>

<footer class="footer">
<div class="footer-content">

<div class="app-info">
<div class="company-logo footer-logo"><a href="index.html">
<img src="/Virtuo-Learn/assets/asset 41.png" alt="company logo">
</a>
</div>
<p>We specialize in delivering an enriching learning experience through a combination of simulations, 3D visualizations, customized quizzes, and videos to immerse learners in real-world scenarios, fostering a dynamic and engaging educational journey.</p>

</div>

<div class="useful-links">
<div class="links-title"><span class="links-title-span">Useful Links</span></div>
<ul>

<li><a href="/Virtuo-Learn/Pages/Simulation/index.html">Stimulations</a></li>
<li><a href="/Virtuo-Learn/index.html">Home</a></li>
<li><a href="/Virtuo-Learn/Pages/3D-Visualizations/index.html">3D Visualisations</a></li>
<li><a href="/Virtuo-Learn/Pages/About-Us/index.html">About Us</a></li>
<li><a href="/Virtuo-Learn/Pages/Quizes/index.html">Quizzes</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="/Virtuo-Learn/Pages/Videos/index.html">Videos</a></li>
<li><a href="/Virtuo-Learn/Pages/Doubt Engine/index.html">Help</a></li>
</ul>
</div>
</div>
<div class="copyright">
<h3>Copyright &copy; 2024 Virtuo Learn | All rights reserved | Developed By <a href="https://github.com/JAYESHBATRA">Jayesh Batra</a></h3>
</div>
</footer>

</body>
</html>
94 changes: 94 additions & 0 deletions Pages/Contact-Us/media-query.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,94 @@
@media screen and (max-width: 1030px) {

h3 {
font-size: 1.2rem;
}

.main-nav {
overflow: initial;
}

.hamburger{
display: block;
}

.hamburger.active .bar:nth-child(2){
opacity: 0;
}
.hamburger.active .bar:nth-child(1){
transform: translateY(8px) rotate(45deg);
}
.hamburger.active .bar:nth-child(3){
transform: translateY(-8px) rotate(-45deg);
}

.nav-menu{
position: absolute;
top: -1000px;
left: 0;
gap: 0;
flex-direction: column;
width: 100%;
text-align: center;
transition: 0.3s;
z-index: 1;
/* background-color: aqua; */
/* max-height: 10vh; */
margin-top: 50px;
padding: 0;

background: rgba(236, 235, 255, 0.2);
/* border-radius: 16px; */
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(3.3px);
-webkit-backdrop-filter: blur(3.3px);
border: 1px solid rgba(236, 235, 255, 0.3);

}
.hover-link{
margin: 16px 0;
}
.nav-menu.active{
top: 13%;
}

.company-logo{
min-width: 200px;
}
}

@media only screen and (max-width: 767px) {
.box-wrapper {
width: 100%;
}

.info-wrap,
.form-wrap {
width: 100%;
height: inherit;
float: none;
}

.info-wrap {
border-radius: 30px 30px 0px 0px;
}

.form-wrap {
border-radius: 0px 0px 30px 30px;
}

.form-group {
width: 100%;
float: none;
margin: 25px 0px;
}

.form-fields .form-group:last-child,
.submit-button {
width: 100%;
}

.submit-button {
margin: 10px 0px;
}
}
Loading