Skip to content

Commit

Permalink
Added Contact Us page detailing (#572)
Browse files Browse the repository at this point in the history
  • Loading branch information
@DiwareNamrata23
DiwareNamrata23 authored Jun 14, 2024
1 parent 94ce46a commit 349381b
Show file tree
Hide file tree
Showing 2 changed files with 347 additions and 5 deletions.
3 changes: 2 additions & 1 deletion Html-Files/Css-Files/styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -147,7 +147,7 @@ section::before {
padding: 70px 50px;
padding-left: 250px;
margin-left: 150px;
width: calc(100% - 150px);
width: calc(100% - 300px);
height: 100%;
background: #fff;
box-shadow: 0 50px 50px rgba(0,0,0,0.25);
Expand Down Expand Up @@ -227,6 +227,7 @@ section::before {
border: none;
max-width: 150px;
padding: 12px;
margin-left: 170px;
}

.container .contactForm .formBox .inputBox input[type="submit"]:hover {
Expand Down
349 changes: 345 additions & 4 deletions Html-Files/contact.html
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<!doctype html>
<!-- <!doctype html>
<html>
<head>
<meta charset="utf-8">
Expand Down Expand Up @@ -58,7 +58,7 @@ <h2>Contact Info</h2>
</li>
<li>
<span><img src="images/mail.png"></span>
<!-- <span>[email protected]</span> -->
<span><a href = "mailto: [email protected]">[email protected]</a></span>
</li>
<li>
Expand All @@ -77,7 +77,7 @@ <h2>Contact Info</h2>
</ul>
</div>
<div class="contactForm">
<div class="contactForm" style="margin-left: 350px;">
<h2>RapiDoc Query</h2>
<div class="formBox">
<div class="inputBox w50">
Expand Down Expand Up @@ -111,4 +111,345 @@ <h2>RapiDoc Query</h2>
</section>
</body>
</html>
</html> -->
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contact Us</title>
<link rel="shortcut icon" type="image/jpg" href="images/news2.png"/>
<style>
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@900&display=swap');
</style>
<link rel="stylesheet" href="Css-Files/styles.css">
</head>
<body>
<header class="header_container">
<div class="img">
<img id="rd-logo" style="width: 90px; height: auto;" src="/images/rd.png">
</div>
<div class="text" style="margin-left: -33rem;">
<h1 class="logo me-auto"><a style="text-decoration: none; color: #55a5ea;" href="index.html">RapiDoc</a></h1>
</div>
<nav class="nav_menu">
<ul class="nav_link">
<li><a href="../index.html">Home</a></li>
<li><a href="../index.html">About</a></li>
<li><a href="/Html-Files/news.html">News</a></li>
<li><a href="../index.html">Services</a></li>
<li><a href="../index.html">Patient Portal</a></li>
<li><a href="../index.html">Doctor</a></li>
<li><a href="#">Contact us</a></li>
</ul>
</nav>
</header>
<section>
<div class="container">
<div class="contactInfo">
<div>
<h2>Contact Info</h2>
<ul class="info">
<li>
<span><img src="images/location.png"></span>
<span>IGDTUW, Delhi</span>
</li>
<li>
<span><img src="images/mail.png"></span>
<span><a href="mailto: [email protected]">[email protected]</a></span>
</li>
<li>
<span><img src="images/call.png"></span>
<span>+91 1234567890</span>
</li>
</ul>
</div>
<ul class="sci">
<li><a href="https://www.facebook.com"><img src="images/1.png"></a></li>
<li><a href="https://www.instagram.com"><img src="images/3.png"></a></li>
<li class="social-icon"><a href="https://www.twitter.com"><img src="images/x-twitter.svg"></a></li>
<li><a href="https://www.linkedin.com"><img src="images/5.png"></a></li>
</ul>
</div>
<div class="contactForm">
<h2>RapiDoc Query</h2>
<div class="formBox">
<div class="inputBox w50">
<input type="text" name="first_name" required>
<span>First Name</span>
</div>
<div class="inputBox w50">
<input type="text" name="last_name" required>
<span>Last Name</span>
</div>
<div class="inputBox w50">
<input type="email" name="email" required>
<span>Email Address</span>
</div>
<div class="inputBox w50">
<input type="text" name="mobile" required>
<span>Mobile Number</span>
</div>
<div class="inputBox w100">
<textarea name="message" required></textarea>
<span>Write your message here...</span>
</div>
<div class="inputBox w100">
<input type="submit" value="Send">
</div>
</div>
</div>
</div>
</section>
<style>
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700;800;900&display=swap');

* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}

section {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #095a55;
position: relative;
}

section::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 50%;
height: 100%;
background: #4bb6b7;
}

.nav_link {
list-style: none;
}

.nav_link li {
padding: 5px 20px;
display: inline-block;
color: white;
}

.nav_link li a {
transition: all 0.3s ease 0s;
color: white;
text-decoration: none;
}

.nav_link li a:hover {
color: #55a5ea;
text-decoration: underline 2.5px rgb(3, 3, 94);
}

.header_container {
background-color: #022a2d;
opacity: 0.9;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
height: 60px;
width: 100%;
padding: 0 20px;
}

.container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
width: 0%;
margin: 0 auto;
/* background: #fff; */
border-radius: 20px;
/* box-shadow: 0 20px 25px rgba(0,0,0,0.15); */
}

.contactInfo {
flex-basis: 30%;
background: #095a55;
padding: 40px;
border-radius: 20px;
box-shadow: 0 20px 25px rgba(0,0,0,0.15);
color: #fff;
}

.contactInfo h2 {
font-size: 24px;
margin-bottom: 20px;
}

.contactInfo ul.info {
list-style: none;
}

.contactInfo ul.info li {
display: flex;
align-items: center;
margin-bottom: 10px;
}

.contactInfo ul.info li span {
margin-right: 10px;
}

.contactInfo ul.info li span img {
width: 20px;
height: 20px;
filter: invert(1);
}

.contactInfo ul.sci {
display: flex;
justify-content: flex-start;
}

.contactInfo ul.sci li {
list-style: none;
margin-right: 15px;
}

.contactInfo ul.sci li a img {
width: 25px;
height: 25px;
filter: invert(1);
}

.contactForm {
flex-basis: 65%;
padding: 40px;
margin-left: 20px;
background: #fff;
border-radius: 20px;
box-shadow: 0 20px 25px rgba(0,0,0,0.15);
}

.contactForm h2 {
font-size: 24px;
margin-bottom: 20px;
color: #0f3959;
}

.formBox {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}

.formBox .inputBox {
position: relative;
margin-bottom: 30px;
}

.formBox .inputBox.w50 {
flex-basis: 48%;
}

.formBox .inputBox.w100 {
flex-basis: 100%;
}

.formBox .inputBox input,
.formBox .inputBox textarea {
width: 100%;
padding: 5px 0;
font-size: 16px;
font-weight: 300;
color: #333;
border: none;
border-bottom: 1px solid #777;
outline: none;
}

.formBox .inputBox textarea {
resize: none;
height: 120px;
}

.formBox .inputBox span {
position: absolute;
left: 0;
padding: 5px 0;
pointer-events: none;
font-size: 16px;
font-weight: 300;
transition: 0.3s;
}

.formBox .inputBox input:focus ~ span,
.formBox .inputBox input:valid ~ span,
.formBox .inputBox textarea:focus ~ span,
.formBox .inputBox textarea:valid ~ span {
transform: translateY(-20px);
font-size: 12px;
color: #095a55;
font-weight: 500;
}

.formBox .inputBox input[type="submit"] {
cursor: pointer;
background: #095a55;
color: #fff;
border: none;
border-radius: 20px;
max-width: 150px;
padding: 10px;
}

.formBox .inputBox input[type="submit"]:hover {
background: #0d9480;
}

@media (max-width: 991px) {
section {
padding: 20px;
}

.container {
flex-direction: column;
}

.contactInfo,
.contactForm {
flex-basis: 100%;
margin: 0 0 20px;
}

.contactForm {
margin-left: 0;
}

.formBox .inputBox.w50 {
flex-basis: 100%;
}
}

@media (max-width: 600px) {
.formBox .inputBox input,
.formBox .inputBox textarea {
font-size: 14px;
}

.formBox .inputBox span {
font-size: 14px;
}
}
</style>
</body>
</html>

0 comments on commit 349381b

Please sign in to comment.