Skip to content
Snippets Groups Projects
Commit dafcc868 authored by Raghav's avatar Raghav
Browse files

Contact page Created

parents
Branches master
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
contact-assets/call-icon.svg 0 → 100644
+ 2
− 0
View file @ dafcc868
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#BD4C31"><path d="M798-120q-125 0-247-54.5T329-329Q229-429 174.5-551T120-798q0-18 12-30t30-12h162q14 0 25 9.5t13 22.5l26 140q2 16-1 27t-11 19l-97 98q20 37 47.5 71.5T387-386q31 31 65 57.5t72 48.5l94-94q9-9 23.5-13.5T670-390l138 28q14 4 23 14.5t9 23.5v162q0 18-12 30t-30 12ZM241-600l66-66-17-94h-89q5 41 14 81t26 79Zm358 358q39 17 79.5 27t81.5 13v-88l-94-19-67 67ZM241-600Zm358 358Z"/></svg>
\ No newline at end of file
contact-assets/contact-info-cover.png 0 → 100644
+ 0
− 0
View file @ dafcc868
contact-assets/contact-info-cover.png

140 KiB

contact-assets/location-icon.svg 0 → 100644
+ 2
− 0
View file @ dafcc868
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#BD4C31"><path d="M480-480q33 0 56.5-23.5T560-560q0-33-23.5-56.5T480-640q-33 0-56.5 23.5T400-560q0 33 23.5 56.5T480-480Zm0 294q122-112 181-203.5T720-552q0-109-69.5-178.5T480-800q-101 0-170.5 69.5T240-552q0 71 59 162.5T480-186Zm0 106Q319-217 239.5-334.5T160-552q0-150 96.5-239T480-880q127 0 223.5 89T800-552q0 100-79.5 217.5T480-80Zm0-480Z"/></svg>
\ No newline at end of file
contact-assets/mail-icon.svg 0 → 100644
+ 2
− 0
View file @ dafcc868
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#BD4C31"><path d="M160-160q-33 0-56.5-23.5T80-240v-480q0-33 23.5-56.5T160-800h640q33 0 56.5 23.5T880-720v480q0 33-23.5 56.5T800-160H160Zm320-280L160-640v400h640v-400L480-440Zm0-80 320-200H160l320 200ZM160-640v-80 480-400Z"/></svg>
\ No newline at end of file
index.html 0 → 100644
+ 271
− 0
View file @ dafcc868
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Bootstrap demo</title>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
crossorigin="anonymous"
/>
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&icon_names=call"
/>
<style>
body {
background-color: rgb(232, 235, 237);
}
/* position for heading */
.position {
position: relative;
top: 40px; /* Moves down */
}
.position-main {
position: relative;
top: 90px;
border-radius: 8px;
}
.custom-container {
max-width: 1100px;
box-shadow: 0 0 20px rgba(255, 255, 255, 0.28), 0 0 20px rgba(68, 68, 68, 0.477) ;
}
.custom-div {
border-radius: 8px;
margin: 5px;
}
.input-custom {
border-style: none;
border-bottom-style: solid;
}
input[type="text"]:focus {
border-bottom-style: solid;
border-bottom-color: rebeccapurple;
outline: none;
}
.form-label {
display: block;
}
.custom-row {
margin-top: 20px;
}
.custom-btn {
font-size: 13px;
width: 150px;
height: 45px;
border-radius: 8px;
background-color:rebeccapurple;
border-color: rebeccapurple;
}
.custom-btn:hover{
background-color: #BD4C31;
border-color: #BD4C31;
}
.custom-col-1 {
background-image: url("contact-assets/contact-info-cover.png");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
padding: 20px;
}
.custom-font-color {
color: white;
}
.custom-font {
font-size: 12px;
}
img {
height: 20px;
float: left;
}
.custom-info {
margin-top: 60px;
font-size: 13px;
}
span {
margin-left: 10px;
}
.custom-check:checked{
background-color: rebeccapurple;
border-color: rebeccapurple;
}
</style>
</head>
<body>
<!-- Heading container -->
<div class="container position">
<h1 class="text-center fw-bolder" style="color: rgb(53, 45, 60);">Contact Us</h1>
<p class="text-center text-body-secondary">
Any questions or remarks? Write us a message!
</p>
</div>
<!-- Main content -->
<div
class="container-sm custom-container position-main"
style="background-color: rgb(255, 255, 255)"
>
<!-- contact info -->
<div class="row custom-row">
<div class="col-md-4 custom-div custom-col-1">
<div class="row">
<h4 class="fw-semibold custom-font-color">Contact Information</h4>
<p class="custom-font-color custom-font">
Fill up the form and our Team will get back to you within 24
hours.
</p>
</div>
<div class="custom-info">
<div class="row">
<p class="custom-font-color">
<span class="align-bottom"
><img src="contact-assets/call-icon.svg" />+91
9566 7439 91</span
>
</p>
</div>
<div class="row">
<p class="custom-font-color">
<span class="align-bottom"
><img
src="contact-assets/mail-icon.svg"
/>raghavsmart1213@gmail.com</span
>
</p>
</div>
<div class="row">
<p class="custom-font-color">
<span class="align-bottom"
><img
src="contact-assets/location-icon.svg"
/>484, Hari Ohm Street, Vellore-9</span
>
</p>
</div>
</div>
</div>
<!-- form column -->
<div class="col custom-div">
<div class="row">
<div class="col custom-div">
<label class="form-label" for="firstname">First Name</label>
<input
type="text"
id="firstname"
class="input-custom"
placeholder="First name"
aria-label="First name"
/>
</div>
<div class="col custom-div">
<label class="form-label" for="lastname">Last Name</label>
<input
type="text"
class="input-custom"
id="lastname"
placeholder="Last name"
aria-label="Last name"
/>
</div>
</div>
<div class="row custom-row">
<div class="col custom-div">
<label class="form-label" for="floatingInput">Email</label>
<input
type="text"
class="input-custom"
id="floatingInput"
placeholder="example@gmail.com"
aria-label="Email address"
/>
</div>
<div class="col custom-div">
<label class="form-label" for="phone">Phone Number</label>
<input
type="text"
class="input-custom"
id="phone"
placeholder="Phone number"
aria-label="Phone number"
/>
</div>
</div>
<div class="row custom-row">
<p class="fw-semibold">What type of website do you need?</p>
<div class="col">
<input
class="form-check-input custom-check"
type="checkbox"
value=""
id="web-design"
/>
<label class="form-check-label" for="web-design">
Web Design
</label>
</div>
<div class="col-4">
<input
class="form-check-input custom-check"
type="checkbox"
value=""
id="web-devlop"
/>
<label class="form-check-label" for="web-devlop">
Web Development
</label>
</div>
<div class="col">
<input
class="form-check-input custom-check"
type="checkbox"
value=""
id="logo-design"
/>
<label class="form-check-label" for="logo-design">
Logo Design
</label>
</div>
<div class="col">
<input
class="form-check-input custom-check"
type="checkbox"
value=""
id="others"
/>
<label class="form-check-label" for="others"> Others </label>
</div>
</div>
<div class="row custom-row">
<label
for="exampleFormControlTextarea1"
class="form-label fw-semibold"
>Message</label
>
<textarea
class="form-control"
id="exampleFormControlTextarea1"
rows="3"
></textarea>
</div>
<div class="row custom-row">
<div class="col-md-4">
<button type="button" class="btn btn-primary btn-lg custom-btn">
Send Message
</button>
</div>
</div>
</div>
</div>
</div>
<!-- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script> -->
</body>
</html>
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment