Skip to content

Commit

Permalink
Merge pull request #1227 from zalabhavy/contact
Browse files Browse the repository at this point in the history 
Added style in contact form and get touch cards also add hover effects in scrollbar thumb
  • Loading branch information
@sunny0625
sunny0625 authored Jul 2, 2024
2 parents 3767386 + 6ff6d02 commit 8a3504a
Show file tree
Hide file tree
Showing 2 changed files with 188 additions and 131 deletions.
153 changes: 124 additions & 29 deletions Css-files/content.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -317,7 +317,56 @@ body {
align-items: center;
box-shadow: 5px 5px 25px rgba(0, 0, 0, 0.1);
}
.single-contact {
display: flex;
align-items: center; /* Center items vertically */
margin-bottom: 20px;
padding: 15px;
background-color: #fff;
border-radius: 20px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
transition: transform 0.4s, box-shadow 0.4s, background-color 0.4s;
}

.single-contact:hover {
transform: scale(1.03);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
cursor: pointer;
}

.single-contact .icon {
width: 55px;
height: 55px;
margin-right: 1px;
border-radius: 50%;
background-color: #dc3545;
display: flex;
justify-content: center;
align-items: center;
margin-right: 15px;
}

.single-contact .icon i {
font-size: 1.8rem;
color: #fff;
}

.single-contact .contact-info {
flex: 1;
text-align: left;
}

.single-contact h5 {
font-size: 1.2rem;
font-weight: bold;
margin-bottom: 0.5rem;
}

.single-contact p {
margin-bottom: 0;
}


.contact-wrapper .title{
font-weight: 700;
}
Expand Down Expand Up @@ -369,24 +418,58 @@ body {
background: rgba(208, 50, 50, 0.9);
}



















.contact-form-wrapper {
background-color: #f0f0f0;
padding: 30px 0;
}

.contact-form-wrapper .form {
background-color: #fff;
padding: 30px;
border-radius: 20px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.contact-form-wrapper .form .form-group {
margin-bottom: 20px;
}

.contact-form-wrapper .form .form-group input[type="text"],
.contact-form-wrapper .form .form-group input[type="email"],
.contact-form-wrapper .form .form-group textarea {
width: 100%;
padding: 15px;
border-radius: 30px;
border: 1px solid #ced4da;
transition: border-color 0.3s;
}

.contact-form-wrapper .form .form-group input[type="text"]:focus,
.contact-form-wrapper .form .form-group input[type="email"]:focus,
.contact-form-wrapper .form .form-group textarea:focus {
border-color: #dc3545;
}

.contact-form-wrapper .form .form-group textarea {
resize: vertical;
}

.contact-form-wrapper .form .btn-primary {
width: 100%;
}

.thumbnail {
display: flex;
justify-content: center;
}

.thumbnail img {
max-width: 100%;
height: auto;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}


.head_container_service {
height: 500px;
Expand Down Expand Up @@ -757,24 +840,36 @@ td {
margin-left: 100px;
} */

/* Scrollbar track */
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.6);
background-image: linear-gradient(to top, rgb(246, 10, 10) , rgb(248, 145, 49), rgb(236, 239, 56));
background-image: linear-gradient(to top, rgb(246, 10, 10), rgb(248, 145, 49), rgb(236, 239, 56));
}

/* Scrollbar */
::-webkit-scrollbar {
width:12px;

width: 12px;
}

/* Scrollbar thumb */
::-webkit-scrollbar-thumb {
background-color: #ff0707;
border-radius: 10px;
border:.3px solid white;
background-image: -webkit-linear-gradient(90deg,
rgb(20, 21, 12) 0%,
rgb(0, 0, 0) 25%,
transparent 100%,
rgb(247, 4, 4) 75%,
transparent)
}
border: 0.3px solid white;
background-image: -webkit-linear-gradient(
90deg,
rgb(20, 21, 12) 0%,
rgb(0, 0, 0) 25%,
transparent 100%,
rgb(247, 4, 4) 75%,
transparent
);
transition: background-color 0.3s;
}

/* Scrollbar thumb hover effect */
::-webkit-scrollbar-thumb:hover {
background-color: #dc3545;
cursor: pointer;
}

166 changes: 64 additions & 102 deletions Html-files/contact.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -130,119 +130,81 @@ <h1 class="m-0">CONTACT US</h1>

<section class="contact-wrapper">
<div class="container py-5">
<h1>GET IN TOUCH</h1>
<p class="text">
If you have any questions, feel free to reach out to us through the
following channels:
</p>
<div class="row g-4 align-items-stretch">
<div class="col-lg-4">
<div class="single-contact d-flex">
<div class="icon">
<i
class="fa-solid fa-location-dot"
style="top: 13px; left: 15px"
></i>
</div>
<div class="contact-info my-auto">
<h5 class="title">Location</h5>
<p>123 Food Street, Culinary City, 56789</p>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="single-contact d-flex">
<div class="icon">
<i
class="fa-solid fa-phone-volume"
style="top: 13px; left: 13px"
></i>
</div>
<div class="contact-info my-auto">
<h5 class="title">Call Now</h5>
<p>+88-7010-7010 <br />+61 934-759-8561</p>
<h1>GET IN TOUCH</h1>
<p class="text">
If you have any questions, feel free to reach out to us through the
following channels:
</p>
<div class="row g-4 align-items-stretch">
<div class="col-lg-4">
<div class="single-contact d-flex">
<div class="icon">
<i class="fa-solid fa-location-dot" style="top: 13px; left: 15px"></i>
</div>
<div class="contact-info my-auto">
<h5 class="title">Location</h5>
<p>123 Food Street, Culinary City, 56789</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="single-contact d-flex">
<div class="icon">
<i
class="fa-solid fa-envelope"
style="top: 13px; left: 13px"
></i>
<div class="col-lg-4">
<div class="single-contact d-flex">
<div class="icon">
<i class="fa-solid fa-phone-volume" style="top: 13px; left: 13px"></i>
</div>
<div class="contact-info my-auto">
<h5 class="title">Call Now</h5>
<p>+88-7010-7010 <br />+61 934-759-8561</p>
</div>
</div>
</div>
<div class="contact-info my-auto">
<h5 class="title">Email</h5>
<p>
[email protected]<br />[email protected]
</p>
<div class="col-lg-4">
<div class="single-contact d-flex">
<div class="icon">
<i class="fa-solid fa-envelope" style="top: 13px; left: 13px"></i>
</div>
<div class="contact-info my-auto">
<h5 class="title">Email</h5>
<p>[email protected]<br />[email protected]</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</section>

<section class="contact-form-wrapper pt-3 pb-5">
<section class="contact-form-wrapper pt-3 pb-5">
<div class="container">
<div class="row align-items-center justify-content-between g-4">
<div class="col-md-6">
<div class="thumbnail d-flex justify-content-center">
<img
src="../Images/contact_page/contact.png"
class="img-fluid"
alt=""
/>
</div>
</div>
<div class="col-md-6 col-lg-6">
<form class="form text-center" id="contactForm">
<div class="form-group row">
<div class="col-6 mb-3">
<input
type="text"
class="form-control"
id="first-name"
placeholder="First Name"
/>
</div>
<div class="col-6 mb-3">
<input
type="text"
class="form-control"
id="last-name"
placeholder="Last Name"
required
/>
</div>
<div class="row align-items-center justify-content-between g-4">
<div class="col-md-6">
<div class="thumbnail d-flex justify-content-center">
<img src="../Images/contact_page/contact.png" class="img-fluid" alt="" />
</div>
</div>
<div class="form-group">
<div class="mb-3">
<input
type="email"
class="form-control"
id="email"
placeholder="Email"
required
/>
</div>
<div class="mb-3">
<textarea
class="form-control"
id="message"
rows="3"
placeholder="Message"
required
></textarea>
</div>
<div class="col-md-6 col-lg-6">
<form class="form text-center" id="contactForm">
<div class="form-group row">
<div class="col-6 mb-3">
<input type="text" class="form-control" id="first-name" placeholder="First Name" />
</div>
<div class="col-6 mb-3">
<input type="text" class="form-control" id="last-name" placeholder="Last Name" required />
</div>
</div>
<div class="form-group">
<div class="mb-3">
<input type="email" class="form-control" id="email" placeholder="Email" required />
</div>
<div class="mb-3">
<textarea class="form-control" id="message" rows="3" placeholder="Message" required></textarea>
</div>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
<button type="submit" class="btn btn-danger">Submit</button>
</form>
</div>
</div>
</div>
</section>
</section>

<!-- footer -->
<footer>
Expand Down

0 comments on commit 8a3504a

Please sign in to comment.