color with popup intigrate

This commit is contained in:
sujan 2024-09-01 14:04:37 +05:45
parent 63eff0bd2e
commit c4c8493d33
3 changed files with 166 additions and 17 deletions

Binary file not shown.

Before

Width:  |  Height:  |  Size: 566 KiB

After

Width:  |  Height:  |  Size: 550 KiB

View File

@ -229,11 +229,11 @@ img {
}
/*** back to top **/
.back-to-top {
background-color: ;
background-color: #ff670a;
width: 45px;
height: 45px;
line-height: 45px;
border: 2px solid #0BA08A;
border: 2px solid #ffebd3;
border-radius: 45px;
text-align: center;
display: none;
@ -251,7 +251,7 @@ img {
}
}
.back-to-top:hover {
background-color: #0BA08A;
background-color: #ffb46d;
}
.back-to-top i {
font-size: 18px;
@ -3905,7 +3905,7 @@ img {
height: 100%;
z-index: -11;
content: "";
background: linear-gradient(270deg, rgba(2, 59, 68, 0.91) 5.16%, #991b4e 36.3%, #801b44 57.47%);
background: linear-gradient(270deg, rgb(182 27 92) 5.16%, #b61b5c 36.3%, #b61b5c 57.47%);
}
.wpo-site-footer .bg-image, .wpo-site-footer-s2 .bg-image, .wpo-site-footer-s3 .bg-image {
position: absolute;
@ -5497,7 +5497,7 @@ img {
top: 0;
height: 100%;
width: 60%;
background: #991b4e;
background: #b61b5c;
z-index: -1;
}
@media (max-width: 991px) {
@ -6010,7 +6010,7 @@ img {
content: "";
height: 100%;
width: 30%;
background: #991b4e;
background: #b61b5c;
z-index: -1;
}
@media (max-width: 991px) {
@ -6501,11 +6501,13 @@ img {
display: flex;
align-items: center;
border-radius: 47.5px;
background: rgba(255, 255, 255, 0.05);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(5px);
backdrop-filter: blur(5px);
color: #FF7236;
padding: 15px 40px 15px 30px;
background: rgba(255, 255, 255, 0.2);
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
/* border: 1px solid rgba(255, 255, 255, 0.3);*/
}
@media (max-width: 575px) {
.wpo-cta-section .cta-wrapr .contact-info .item, .wpo-cta-section-s2 .cta-wrapr .contact-info .item, .wpo-cta-section-s3 .cta-wrapr .contact-info .item {
@ -7028,7 +7030,7 @@ img {
height: 100%;
border: 0;
outline: 0;
/* filter: grayscale(100%);*/
/* filter: grayscale(100%);*/
}
.wpo-map-section h2.hidden {
display: none;
@ -7420,7 +7422,7 @@ img {
}
.wpo-funfact-section-s2 .wraper, .wpo-funfact-section-s3 .wraper {
border-radius: 8px;
background: #991b4e;
background: #c51f63;
box-shadow: 0px 0px 19px 0px rgba(0, 0, 0, 0.05);
}
@media (max-width: 991px) {
@ -14374,7 +14376,7 @@ img {
} /*# sourceMappingURL=style.css.map */
/*extra css*/
.apply-btn {
background: #991b4e;
background: #b61b5c;
color: #fff;
display: inline-block;
padding: 21px 45px;
@ -14477,7 +14479,7 @@ img {
.submit-btn {
margin-top: 24px;
width: 100%;
background: #991b4e;
background: #b61b5c;
border-radius: 8px;
border: 0;
padding: 19px 0;
@ -14490,4 +14492,74 @@ img {
.location-gap {
padding: 50px 0px;
}
/*popup css*/
.popup-link {
display: flex;
flex-wrap: wrap;
}
.popup-link a {
background: #333;
color: #fff;
padding: 10px 30px;
border-radius: 5px;
font-size: 17px;
cursor: pointer;
margin: 20px;
text-decoration: none;
}
.popup-container {
visibility: hidden;
opacity: 0;
transition: all 0.3s ease-in-out;
transform: scale(1.3);
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(21, 17, 17, 0.61);
display: flex;
align-items: center;
}
.popup-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 50%;
}
.popup-content p {
font-size: 17px;
padding: 10px;
line-height: 20px;
}
.popup-content a.close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
background: none;
padding: 0;
margin: 0;
text-decoration: none;
}
.popup-content a.close:hover {
color: #333;
}
.popup-content span:hover, .popup-content span:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
.popup-container:target {
visibility: visible;
opacity: 1;
transform: scale(1);
}
.popup-container h3 {
margin: 10px;
}
/*End popup styles*/
/*popup css End*/
/*extra css*/

View File

@ -15,18 +15,92 @@
<div class="cta-wrapr">
<div class="wpo-section-title">
<h3>Secure Your Future Today</h3>
<a href="contact.html" class="apply-btn">Apply Now</a> </div>
<a href="#popup" class="apply-btn">Apply Now</a>
<!--pop up div-->
<div class="popup-link"> </div>
<!--popup1-->
<div id="popup" class="popup-container">
<div class="popup-content"> <a href="#" class="close">&times;</a>
<h3>Popup 1</h3>
<div class="quote-form">
<div class="title">
<h3>Reach Out for Assistance</h3>
</div>
<form id="quoteForm">
<div class="row">
<div class="item col-lg-6 col-12">
<label>Personal Information</label>
<input class="form-control" type="text" name="name" id="name" placeholder="Full Name">
</div>
<div class="item col-lg-6 col-12">
<label>Study Destination</label>
<select name="city" id="city" class="form-control">
<option value="">Select Country</option>
<option value="city1">Australia</option>
<option value="city2">USA</option>
<option value="city3">UK</option>
<option value="city4">Canada</option>
<option value="city5">New Zealand</option>
</select>
</div>
<div class="item col-lg-6 col-12">
<label>Email Address</label>
<input class="form-control" type="email" name="email" id="email" placeholder="Email">
</div>
<div class="item col-lg-6 col-12">
<label>Contact Number</label>
<input class="form-control" type="text" name="phone" id="phone" placeholder="Phone">
</div>
<div class="item col-lg-6 col-12">
<label>Office Location</label>
<select name="type" id="type" class="form-control">
<option value="">Select Location</option>
<option value="type1">Putalisadak Office</option>
<option value="type2">Baneshwor Office</option>
<option value="type3">Pokhara Office</option>
<option value="type4">Kumaripati Office</option>
<option value="type5">Chitwan Office</option>
<option value="type6">Butwal Office</option>
<option value="type7">Biratnagar Office</option>
<option value="type8">Access Canada Office</option>
<option value="type9">Access New Zealand Office</option>
</select>
</div>
<div class="item col-lg-6 col-12">
<label>Counseling Options</label>
<select name="incoter" id="incoter" class="form-control">
<option value="">Select Options</option>
<option value="incoter1">In-Person / Visit Office Location</option>
<option value="incoter2">Online / Distance Counselling</option>
</select>
</div>
<div class="item col-lg-12 col-12">
<label>Enquiry Details</label>
<textarea name="message" class="form-control field-message" placeholder="Enquiry Message"></textarea>
</div>
<div class="item col-12">
<input class="submit-btn" type="submit" value="Submit">
</div>
</div>
</form>
</div>
</div>
</div>
<!--pop up div End-->
</div>
<div class="contact-info">
<div class="item">
<div class="icon"> <i class="flaticon-phone-call"></i> </div>
<div class="text"> <span>Call For Inquiry</span>
<p>+236 (456) 896 22</p>
<p>+977-9801570070</p>
</div>
</div>
<div class="item">
<div class="icon"> <i class="flaticon-email"></i> </div>
<div class="text"> <span>Send Us Email</span>
<p>contact@logistika.com</p>
<p>info@accessnepal.net</p>
</div>
</div>
</div>
@ -161,5 +235,8 @@
<script src="assets/js/jquery-plugin-collection.js"></script>
<!-- Custom script for this template -->
<script src="assets/js/script.js"></script>
<!--PopUp JS-->
<!--PopUp JS End-->
</body><!-- Mirrored from wpocean.com/html/tf/logistika/index-2.html by HTTrack Website Copier/3.x [XR&CO'2014], Thu, 29 Aug 2024 05:23:16 GMT -->
</html><!-- Footer Section End-->