Compare commits
4 Commits
d0a0fcceb4
...
d88eab95d2
| Author | SHA1 | Date | |
|---|---|---|---|
| d88eab95d2 | |||
| 2985df3d43 | |||
| e6f4178346 | |||
| c6762deb08 |
@@ -2,7 +2,7 @@
|
|||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-lg-6 col-12">
|
<div class="col-lg-6 col-12">
|
||||||
<img src="images/DreamShaper_v7_A_group_of_people_from_different_backgrounds_an_2.jpg" class="about-image img-fluid" alt="" />
|
<img src="images/DreamShaper_v7_A_group_of_people_from_different_backgrounds_an_2.jpg" class="about-image img-fluid object-fit-cover" alt="" />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="col-lg-6 col-12 mt-5 mt-lg-0">
|
<div class="col-lg-6 col-12 mt-5 mt-lg-0">
|
||||||
|
|||||||
@@ -10,7 +10,7 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="row justify-content-center">
|
<div class="row justify-content-center">
|
||||||
<div class="col-lg-10 col-md-12 col-12">
|
<div class="col-lg-12 col-md-12 col-12">
|
||||||
<div class="contact-wrapper">
|
<div class="contact-wrapper">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<!-- Contact Info Cards -->
|
<!-- Contact Info Cards -->
|
||||||
@@ -57,7 +57,7 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Company Ad -->
|
<!-- Company Ad -->
|
||||||
<div class="tech-masters-ad">
|
<!-- <div class="tech-masters-ad">
|
||||||
<div class="ad-content">
|
<div class="ad-content">
|
||||||
<div class="ad-icon">
|
<div class="ad-icon">
|
||||||
<i class="bi bi-cpu"></i>
|
<i class="bi bi-cpu"></i>
|
||||||
@@ -66,14 +66,14 @@
|
|||||||
<p>Your Trusted Partner in Digital Innovation</p>
|
<p>Your Trusted Partner in Digital Innovation</p>
|
||||||
<a href="#" class="ad-link">Learn More <i class="bi bi-arrow-right"></i></a>
|
<a href="#" class="ad-link">Learn More <i class="bi bi-arrow-right"></i></a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div> -->
|
||||||
|
|
||||||
<div class="contact-social">
|
<div class="contact-social">
|
||||||
<h4>Follow Me</h4>
|
<h4>Follow Me</h4>
|
||||||
<div class="social-icon">
|
<div class="social-icon">
|
||||||
<ul class="list-inline">
|
<ul class="list-inline">
|
||||||
<li class="list-inline-item">
|
<li class="list-inline-item">
|
||||||
<a href="#" class="social-icon-link">
|
<a href="https://www.linkedin.com/in/mohammed-al-yaseen-79b056161/" class="social-icon-link" target="_blank">
|
||||||
<i class="bi bi-linkedin"></i>
|
<i class="bi bi-linkedin"></i>
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
@@ -82,11 +82,6 @@
|
|||||||
<i class="bi bi-github"></i>
|
<i class="bi bi-github"></i>
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<li class="list-inline-item">
|
|
||||||
<a href="#" class="social-icon-link">
|
|
||||||
<i class="bi bi-twitter"></i>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -58,7 +58,7 @@
|
|||||||
<div class="col-lg-6 col-12 mt-5 mt-lg-0">
|
<div class="col-lg-6 col-12 mt-5 mt-lg-0">
|
||||||
<div class="about-thumb">
|
<div class="about-thumb">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-lg-6 col-6 featured-border-bottom py-3">
|
<div class="col-lg-6 col-6 featured-border-bottom pb-4">
|
||||||
<div class="featured-item">
|
<div class="featured-item">
|
||||||
<strong class="featured-numbers">15+</strong>
|
<strong class="featured-numbers">15+</strong>
|
||||||
<p class="featured-text">Years of Experience</p>
|
<p class="featured-text">Years of Experience</p>
|
||||||
@@ -68,7 +68,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="col-lg-6 col-6 featured-border-start featured-border-bottom ps-5 py-3">
|
<div class="col-lg-6 col-6 featured-border-start featured-border-bottom pb-4">
|
||||||
<div class="featured-item">
|
<div class="featured-item">
|
||||||
<strong class="featured-numbers">5+</strong>
|
<strong class="featured-numbers">5+</strong>
|
||||||
<p class="featured-text">Happy Customers</p>
|
<p class="featured-text">Happy Customers</p>
|
||||||
@@ -88,7 +88,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="col-lg-6 col-6 featured-border-start ps-5 pt-4">
|
<div class="col-lg-6 col-6 featured-border-start pt-4">
|
||||||
<div class="featured-item">
|
<div class="featured-item">
|
||||||
<strong class="featured-numbers">7+</strong>
|
<strong class="featured-numbers">7+</strong>
|
||||||
<p class="featured-text">Digital Awards</p>
|
<p class="featured-text">Digital Awards</p>
|
||||||
|
|||||||
@@ -1,14 +1,94 @@
|
|||||||
<footer class="site-footer">
|
<footer class="site-footer">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-lg-12 col-12">
|
<!-- Footer Brand & Description -->
|
||||||
<div class="copyright-text-wrap">
|
<div class="col-lg-4 col-md-6 col-12 mb-4 mb-lg-0">
|
||||||
<p class="mb-0">
|
<div class="footer-brand">
|
||||||
<span class="copyright-text">Copyright © 2026 <a href="#">Tuhama Qlyshi</a>. All rights reserved.</span>
|
<h3 class="footer-brand-name">Tuhama Qlyshi</h3>
|
||||||
<span class="copyright-text">Design: <a href="https://templatemo.com" target="_blank">TemplateMo</a></span>
|
<p class="footer-description">
|
||||||
|
Senior Frontend Developer passionate about building exceptional user experiences
|
||||||
|
and scalable web applications.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- Quick Links -->
|
||||||
|
<div class="col-lg-2 col-md-6 col-12 mb-4 mb-lg-0">
|
||||||
|
<h4 class="footer-heading">Quick Links</h4>
|
||||||
|
<ul class="footer-menu">
|
||||||
|
<li class="footer-menu-item">
|
||||||
|
<a href="#section_1" class="footer-menu-link click-scroll">Home</a>
|
||||||
|
</li>
|
||||||
|
<li class="footer-menu-item">
|
||||||
|
<a href="#section_2" class="footer-menu-link click-scroll">About</a>
|
||||||
|
</li>
|
||||||
|
<li class="footer-menu-item">
|
||||||
|
<a href="#section_3" class="footer-menu-link click-scroll">Services</a>
|
||||||
|
</li>
|
||||||
|
<li class="footer-menu-item">
|
||||||
|
<a href="#section_4" class="footer-menu-link click-scroll">Projects</a>
|
||||||
|
</li>
|
||||||
|
<li class="footer-menu-item">
|
||||||
|
<a href="#section_5" class="footer-menu-link click-scroll">Contact</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Contact Info -->
|
||||||
|
<div class="col-lg-3 col-md-6 col-12 mb-4 mb-lg-0">
|
||||||
|
<h4 class="footer-heading">Get In Touch</h4>
|
||||||
|
<ul class="footer-contact">
|
||||||
|
<li class="footer-contact-item">
|
||||||
|
<i class="bi bi-envelope-fill"></i>
|
||||||
|
<a href="mailto:tuhama.gh.qlyshi@gmail.com">tuhama.gh.qlyshi@gmail.com</a>
|
||||||
|
</li>
|
||||||
|
<li class="footer-contact-item">
|
||||||
|
<i class="bi bi-telephone-fill"></i>
|
||||||
|
<a href="tel:+963-966-381-266">+963-966-381-266</a>
|
||||||
|
</li>
|
||||||
|
<li class="footer-contact-item">
|
||||||
|
<i class="bi bi-geo-alt-fill"></i>
|
||||||
|
<span>Damascus, Syria</span>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Social Media -->
|
||||||
|
<div class="col-lg-3 col-md-6 col-12">
|
||||||
|
<h4 class="footer-heading">Follow Me</h4>
|
||||||
|
<div class="footer-social">
|
||||||
|
<ul class="social-icon">
|
||||||
|
<li class="social-icon-item">
|
||||||
|
<a href="https://www.linkedin.com/in/tuhama-qlyshi-6016b1161/"
|
||||||
|
class="social-icon-link"
|
||||||
|
target="_blank"
|
||||||
|
aria-label="LinkedIn">
|
||||||
|
<i class="bi bi-linkedin"></i>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li class="social-icon-item">
|
||||||
|
<a href="https://github.com/tuhama-qlyshi"
|
||||||
|
class="social-icon-link"
|
||||||
|
target="_blank"
|
||||||
|
aria-label="GitHub">
|
||||||
|
<i class="bi bi-github"></i>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li class="social-icon-item">
|
||||||
|
<a href="https://www.facebook.com/tuhama.qlyshi"
|
||||||
|
class="social-icon-link"
|
||||||
|
target="_blank"
|
||||||
|
aria-label="Facebook">
|
||||||
|
<i class="bi bi-facebook"></i>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Copyright -->
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
@@ -20,7 +20,7 @@
|
|||||||
<span class="navbar-toggler-icon"></span>
|
<span class="navbar-toggler-icon"></span>
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
<a href="index.html" class="navbar-brand mx-auto mx-lg-0">First</a>
|
<a href="index.html" class="navbar-brand mx-auto mx-lg-0">M</a>
|
||||||
|
|
||||||
<div class="d-flex align-items-center d-lg-none">
|
<div class="d-flex align-items-center d-lg-none">
|
||||||
<i class="navbar-icon bi-telephone-plus me-3"></i>
|
<i class="navbar-icon bi-telephone-plus me-3"></i>
|
||||||
|
|||||||
@@ -1,11 +1,13 @@
|
|||||||
<section class="hero d-flex justify-content-center align-items-center" id="section_1">
|
<section class="hero d-flex justify-content-center align-items-center" id="section_1">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-lg-7 col-12">
|
<div class="col-lg-12 col-12">
|
||||||
<div class="hero-text">
|
<div class="hero-text">
|
||||||
<div class="hero-title-wrap d-flex align-items-center mb-4">
|
<div class="hero-title-wrap d-flex align-items-center mb-4">
|
||||||
<img src="images/happy-bearded-young-man.jpg" class="avatar-image avatar-image-large img-fluid" alt="" />
|
<div class="hero-image-wrapper position-relative me-4">
|
||||||
<h5 class="hero-title ms-3 mb-0">Hello friend!</h5>
|
<img src="images/happy-bearded-young-man.jpg" class="hero-image img-fluid object-fit-cover" alt="" />
|
||||||
|
</div>
|
||||||
|
<h5 class="hero-title mb-0">Hello friend!</h5>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h2 class="mb-4">Senior Frontend Developer with 15+ years of experience</h2>
|
<h2 class="mb-4">Senior Frontend Developer with 15+ years of experience</h2>
|
||||||
@@ -14,14 +16,10 @@
|
|||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="col-lg-5 col-12 position-relative">
|
|
||||||
<img src="images/National Geographic on Instagram Photo by Stephe.jpg" class="hero-image img-fluid" alt="" />
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
|
||||||
<path fill="#535da1" fill-opacity="1" d="M0,160L24,160C48,160,96,160,144,138.7C192,117,240,75,288,64C336,53,384,75,432,106.7C480,139,528,181,576,208C624,235,672,245,720,240C768,235,816,213,864,186.7C912,160,960,128,1008,133.3C1056,139,1104,181,1152,202.7C1200,224,1248,224,1296,197.3C1344,171,1392,117,1416,90.7L1440,64L1440,0L1416,0C1392,0,1344,0,1296,0C1248,0,1200,0,1152,0C1104,0,1056,0,1008,0C960,0,912,0,864,0C816,0,768,0,720,0C672,0,624,0,576,0C528,0,480,0,432,0C384,0,336,0,288,0C240,0,192,0,144,0C96,0,48,0,24,0L0,0Z"></path>
|
<path fill="#6c757d" fill-opacity="1" d="M0,160L24,160C48,160,96,160,144,138.7C192,117,240,75,288,64C336,53,384,75,432,106.7C480,139,528,181,576,208C624,235,672,245,720,240C768,235,816,213,864,186.7C912,160,960,128,1008,133.3C1056,139,1104,181,1152,202.7C1200,224,1248,224,1296,197.3C1344,171,1392,117,1416,90.7L1440,64L1440,0L1416,0C1392,0,1344,0,1296,0C1248,0,1200,0,1152,0C1104,0,1056,0,1008,0C960,0,912,0,864,0C816,0,768,0,720,0C672,0,624,0,576,0C528,0,480,0,432,0C384,0,336,0,288,0C240,0,192,0,144,0C96,0,48,0,24,0L0,0Z"></path>
|
||||||
</svg>
|
</svg>
|
||||||
</section>
|
</section>
|
||||||
@@ -11,13 +11,13 @@ https://templatemo.com/tm-578-first-portfolio
|
|||||||
-----------------------------------------*/
|
-----------------------------------------*/
|
||||||
:root {
|
:root {
|
||||||
--white-color: #ffffff;
|
--white-color: #ffffff;
|
||||||
--primary-color: #ff69b4; /* Hot pink */
|
--primary-color: #6c757d;
|
||||||
--secondary-color: #ffb6c1; /* Light pink */
|
--secondary-color: #14b789;
|
||||||
--section-bg-color: #fff5f7; /* Very light pink */
|
--section-bg-color: #f9f9f9;
|
||||||
--dark-color: #4a4a4a; /* Softer dark color */
|
--dark-color: #000000;
|
||||||
--p-color: #666666;
|
--p-color: #717275;
|
||||||
--border-color: #ffd1dc; /* Light pink border */
|
--border-color: #e9eaeb;
|
||||||
--featured-border-color: #ff69b4;
|
--featured-border-color: #727aab;
|
||||||
|
|
||||||
--body-font-family: "DM Sans", sans-serif;
|
--body-font-family: "DM Sans", sans-serif;
|
||||||
|
|
||||||
@@ -316,7 +316,7 @@ strong {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.navbar.scrolled {
|
.navbar.scrolled {
|
||||||
background: rgba(83, 93, 161, 0.95);
|
background: var(--primary-color);
|
||||||
backdrop-filter: blur(10px);
|
backdrop-filter: blur(10px);
|
||||||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
||||||
padding: 10px 0;
|
padding: 10px 0;
|
||||||
@@ -517,12 +517,34 @@ strong {
|
|||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.hero-image-wrapper {
|
||||||
|
position: relative;
|
||||||
|
width: 340px;
|
||||||
|
height: 340px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-image-wrapper .hero-image {
|
||||||
|
position: relative !important;
|
||||||
|
top: auto !important;
|
||||||
|
right: auto !important;
|
||||||
|
left: auto !important;
|
||||||
|
width: 100% !important;
|
||||||
|
height: 100% !important;
|
||||||
|
object-fit: cover;
|
||||||
|
border-radius: 50%;
|
||||||
|
border: 3px solid var(--white-color);
|
||||||
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||||||
|
z-index: auto !important;
|
||||||
|
margin: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
.hero-image {
|
.hero-image {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
z-index: 22;
|
z-index: 22;
|
||||||
top: -44px;
|
top: -44px;
|
||||||
width: 340px;
|
width: 340px;
|
||||||
height: 340px;
|
height: 340px !important;
|
||||||
right: 67px;
|
right: 67px;
|
||||||
border-radius: 100%;
|
border-radius: 100%;
|
||||||
border: 5px solid #FFF;
|
border: 5px solid #FFF;
|
||||||
@@ -552,6 +574,12 @@ strong {
|
|||||||
/*---------------------------------------
|
/*---------------------------------------
|
||||||
ABOUT
|
ABOUT
|
||||||
-----------------------------------------*/
|
-----------------------------------------*/
|
||||||
|
|
||||||
|
.object-fit-cover {
|
||||||
|
object-fit: cover;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
.profile-thumb {
|
.profile-thumb {
|
||||||
background: var(--white-color);
|
background: var(--white-color);
|
||||||
border-radius: 15px;
|
border-radius: 15px;
|
||||||
@@ -560,11 +588,6 @@ strong {
|
|||||||
transition: all 0.3s ease;
|
transition: all 0.3s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
.profile-thumb:hover {
|
|
||||||
transform: translateY(-5px);
|
|
||||||
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
|
|
||||||
}
|
|
||||||
|
|
||||||
.profile-title {
|
.profile-title {
|
||||||
margin-bottom: 25px;
|
margin-bottom: 25px;
|
||||||
padding-bottom: 15px;
|
padding-bottom: 15px;
|
||||||
@@ -700,11 +723,11 @@ strong {
|
|||||||
box-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
|
box-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
|
||||||
}
|
}
|
||||||
|
|
||||||
.about-image:hover {
|
/* .about-image:hover {
|
||||||
transform: scale(1.05);
|
transform: scale(1.05);
|
||||||
filter: brightness(1.3) contrast(1.2) saturate(1.2);
|
filter: brightness(1.3) contrast(1.2) saturate(1.2);
|
||||||
box-shadow: 0 0 30px rgba(255, 255, 255, 0.4);
|
box-shadow: 0 0 30px rgba(255, 255, 255, 0.4);
|
||||||
}
|
} */
|
||||||
|
|
||||||
.about-thumb {
|
.about-thumb {
|
||||||
padding-right: 20px;
|
padding-right: 20px;
|
||||||
@@ -748,10 +771,6 @@ strong {
|
|||||||
transition: all ease 0.2s;
|
transition: all ease 0.2s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.clients-image:hover {
|
|
||||||
transform: scale(1.3);
|
|
||||||
}
|
|
||||||
|
|
||||||
/*---------------------------------------
|
/*---------------------------------------
|
||||||
SERVICES
|
SERVICES
|
||||||
-----------------------------------------*/
|
-----------------------------------------*/
|
||||||
@@ -1050,10 +1069,10 @@ strong {
|
|||||||
transition: all 0.3s ease;
|
transition: all 0.3s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
.contact-info-card:hover {
|
/* .contact-info-card:hover {
|
||||||
transform: translateX(10px);
|
transform: translateX(10px);
|
||||||
background: rgba(255, 255, 255, 0.15);
|
background: rgba(255, 255, 255, 0.15);
|
||||||
}
|
} */
|
||||||
|
|
||||||
.contact-info-icon {
|
.contact-info-icon {
|
||||||
width: 50px;
|
width: 50px;
|
||||||
@@ -1077,6 +1096,7 @@ strong {
|
|||||||
|
|
||||||
.contact-info-content {
|
.contact-info-content {
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
.contact-info-content h4 {
|
.contact-info-content h4 {
|
||||||
@@ -1278,10 +1298,26 @@ strong {
|
|||||||
SITE FOOTER
|
SITE FOOTER
|
||||||
-----------------------------------------*/
|
-----------------------------------------*/
|
||||||
.site-footer {
|
.site-footer {
|
||||||
|
background: linear-gradient(135deg, rgba(83, 93, 161, 0.05) 0%, rgba(20, 183, 137, 0.05) 100%);
|
||||||
border-top: 1px solid var(--border-color);
|
border-top: 1px solid var(--border-color);
|
||||||
padding-top: 50px;
|
padding-top: 60px;
|
||||||
padding-bottom: 50px;
|
padding-bottom: 30px;
|
||||||
text-align: center;
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.site-footer::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 1px;
|
||||||
|
background: linear-gradient(90deg,
|
||||||
|
transparent 0%,
|
||||||
|
rgba(20, 183, 137, 0.3) 50%,
|
||||||
|
transparent 100%
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
.site-footer-title {
|
.site-footer-title {
|
||||||
@@ -1290,52 +1326,324 @@ strong {
|
|||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
}
|
}
|
||||||
|
|
||||||
.copyright-text-wrap p,
|
/* Footer Brand */
|
||||||
.copyright-text {
|
.footer-brand {
|
||||||
font-size: var(--copyright-font-size);
|
margin-bottom: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.copyright-text {
|
.footer-brand-name {
|
||||||
border-right: 1px solid var(--border-color);
|
font-size: 24px;
|
||||||
padding-right: 25px;
|
font-weight: 700;
|
||||||
margin-right: 20px;
|
color: var(--dark-color);
|
||||||
|
margin-bottom: 12px;
|
||||||
|
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
background-clip: text;
|
||||||
}
|
}
|
||||||
|
|
||||||
.copyright-text-wrap a {
|
.footer-description {
|
||||||
font-weight: var(--font-weight-bold);
|
font-size: 14px;
|
||||||
|
line-height: 1.7;
|
||||||
|
color: var(--p-color);
|
||||||
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Footer Headings */
|
||||||
|
.footer-heading {
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--dark-color);
|
||||||
|
margin-bottom: 20px;
|
||||||
|
position: relative;
|
||||||
|
padding-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-heading::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 40px;
|
||||||
|
height: 3px;
|
||||||
|
background: linear-gradient(90deg, var(--secondary-color), var(--primary-color));
|
||||||
|
border-radius: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Footer Menu */
|
||||||
.footer-menu {
|
.footer-menu {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
list-style: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.footer-menu-item {
|
.footer-menu-item {
|
||||||
list-style: none;
|
list-style: none;
|
||||||
display: inline-block;
|
display: block;
|
||||||
vertical-align: top;
|
margin-bottom: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.footer-menu-link {
|
.footer-menu-link {
|
||||||
border: 1px solid var(--border-color);
|
font-size: 14px;
|
||||||
border-radius: var(--border-radius-medium);
|
font-weight: 500;
|
||||||
font-size: var(--copyright-font-size);
|
color: var(--p-color);
|
||||||
font-weight: var(--font-weight-medium);
|
text-decoration: none;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
vertical-align: top;
|
transition: all 0.3s ease;
|
||||||
text-align: center;
|
position: relative;
|
||||||
margin-right: 10px;
|
padding-left: 0;
|
||||||
margin-bottom: 10px;
|
}
|
||||||
padding: 6px 14px;
|
|
||||||
min-width: 70px;
|
.footer-menu-link::before {
|
||||||
transition: transform 0.3s ease, color 0.3s ease;
|
content: '→';
|
||||||
|
position: absolute;
|
||||||
|
left: -20px;
|
||||||
|
opacity: 0;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
color: var(--secondary-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.footer-menu-link:hover {
|
.footer-menu-link:hover {
|
||||||
background: var(--secondary-color);
|
color: var(--secondary-color);
|
||||||
|
padding-left: 20px;
|
||||||
|
transform: translateX(5px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-menu-link:hover::before {
|
||||||
|
opacity: 1;
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Footer Contact */
|
||||||
|
.footer-contact {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-contact-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-start;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
font-size: 14px;
|
||||||
|
color: var(--p-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-contact-item i {
|
||||||
|
color: var(--secondary-color);
|
||||||
|
font-size: 18px;
|
||||||
|
margin-right: 12px;
|
||||||
|
margin-top: 2px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-contact-item a {
|
||||||
|
color: var(--p-color);
|
||||||
|
text-decoration: none;
|
||||||
|
transition: color 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-contact-item a:hover {
|
||||||
|
color: var(--secondary-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-contact-item span {
|
||||||
|
color: var(--p-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Footer Social */
|
||||||
|
.footer-social {
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-social .social-icon {
|
||||||
|
display: flex;
|
||||||
|
gap: 12px;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-social .social-icon-item {
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-social .social-icon-link {
|
||||||
|
width: 45px;
|
||||||
|
height: 45px;
|
||||||
|
line-height: 45px;
|
||||||
|
text-align: center;
|
||||||
|
border: 2px solid var(--border-color);
|
||||||
|
border-radius: 50%;
|
||||||
|
color: var(--p-color);
|
||||||
|
background: var(--white-color);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
|
text-decoration: none;
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-social .social-icon-link:hover {
|
||||||
|
background: linear-gradient(135deg, var(--secondary-color), var(--primary-color));
|
||||||
border-color: transparent;
|
border-color: transparent;
|
||||||
color: var(--white-color);
|
color: var(--white-color);
|
||||||
transform: translateY(-3px);
|
transform: translateY(-5px) scale(1.1);
|
||||||
|
box-shadow: 0 8px 20px rgba(20, 183, 137, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Copyright */
|
||||||
|
.copyright-text-wrap {
|
||||||
|
margin-top: 40px;
|
||||||
|
padding-top: 30px;
|
||||||
|
border-top: 1px solid var(--border-color);
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.copyright-text-wrap p,
|
||||||
|
.copyright-text {
|
||||||
|
font-size: 14px;
|
||||||
|
color: var(--p-color);
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.copyright-text {
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.copyright-text-wrap a {
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--primary-color);
|
||||||
|
text-decoration: none;
|
||||||
|
transition: color 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.copyright-text-wrap a:hover {
|
||||||
|
color: var(--secondary-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Footer Responsive Styles */
|
||||||
|
@media (max-width: 991px) {
|
||||||
|
.site-footer {
|
||||||
|
padding-top: 50px;
|
||||||
|
padding-bottom: 25px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-brand {
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-heading {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-heading::after {
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-menu {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-menu-item {
|
||||||
|
display: inline-block;
|
||||||
|
margin: 0 8px 10px 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-menu-link {
|
||||||
|
padding: 8px 16px;
|
||||||
|
border: 1px solid var(--border-color);
|
||||||
|
border-radius: 20px;
|
||||||
|
background: var(--white-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-menu-link::before {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-menu-link:hover {
|
||||||
|
padding-left: 16px;
|
||||||
|
transform: none;
|
||||||
|
background: var(--secondary-color);
|
||||||
|
color: var(--white-color);
|
||||||
|
border-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-contact {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-contact-item {
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-social {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-social .social-icon {
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 767px) {
|
||||||
|
.site-footer {
|
||||||
|
padding-top: 40px;
|
||||||
|
padding-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-brand-name {
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-description {
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-heading {
|
||||||
|
font-size: 16px;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-menu-item {
|
||||||
|
display: block;
|
||||||
|
margin: 0 0 8px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-menu-link {
|
||||||
|
width: 100%;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-contact-item {
|
||||||
|
font-size: 13px;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-contact-item i {
|
||||||
|
font-size: 16px;
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-social .social-icon-link {
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
line-height: 40px;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.copyright-text-wrap {
|
||||||
|
margin-top: 30px;
|
||||||
|
padding-top: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.copyright-text {
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/*---------------------------------------
|
/*---------------------------------------
|
||||||
@@ -1747,9 +2055,9 @@ strong {
|
|||||||
transition: transform 0.3s ease;
|
transition: transform 0.3s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
.about-image:hover {
|
/* .about-image:hover {
|
||||||
transform: scale(1.05);
|
transform: scale(1.05);
|
||||||
}
|
} */
|
||||||
|
|
||||||
/* Enhance projects section */
|
/* Enhance projects section */
|
||||||
.projects-thumb {
|
.projects-thumb {
|
||||||
@@ -1805,7 +2113,7 @@ html {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.navbar.scrolled {
|
.navbar.scrolled {
|
||||||
background-color: rgba(83, 93, 161, 0.95);
|
background-color: var(--primary-color);
|
||||||
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
|
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
16
index.html
16
index.html
@@ -32,7 +32,7 @@
|
|||||||
|
|
||||||
<!-- About Section -->
|
<!-- About Section -->
|
||||||
<section id="about"></section>
|
<section id="about"></section>
|
||||||
<aside class="about-ad">
|
<!-- <aside class="about-ad">
|
||||||
<div class="horizontal-ad-banner">
|
<div class="horizontal-ad-banner">
|
||||||
<div class="ad-content">
|
<div class="ad-content">
|
||||||
<div class="ad-icon">
|
<div class="ad-icon">
|
||||||
@@ -47,11 +47,11 @@
|
|||||||
></a>
|
></a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</aside>
|
</aside> -->
|
||||||
|
|
||||||
<!-- Featured Section -->
|
<!-- Featured Section -->
|
||||||
<section id="featured"></section>
|
<section id="featured"></section>
|
||||||
<aside class="featured-ad">
|
<!-- <aside class="featured-ad">
|
||||||
<div class="feature-ad-banner">
|
<div class="feature-ad-banner">
|
||||||
<div class="ad-content">
|
<div class="ad-content">
|
||||||
<div class="ad-icon">
|
<div class="ad-icon">
|
||||||
@@ -64,11 +64,11 @@
|
|||||||
></a>
|
></a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</aside>
|
</aside> -->
|
||||||
|
|
||||||
<!-- Projects Section -->
|
<!-- Projects Section -->
|
||||||
<section id="projects"></section>
|
<section id="projects"></section>
|
||||||
<aside class="projects-ad">
|
<!-- <aside class="projects-ad">
|
||||||
<div class="horizontal-ad-banner">
|
<div class="horizontal-ad-banner">
|
||||||
<div class="ad-content">
|
<div class="ad-content">
|
||||||
<div class="ad-icon">
|
<div class="ad-icon">
|
||||||
@@ -83,11 +83,11 @@
|
|||||||
></a>
|
></a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</aside>
|
</aside> -->
|
||||||
|
|
||||||
<!-- Services Section -->
|
<!-- Services Section -->
|
||||||
<section id="services"></section>
|
<section id="services"></section>
|
||||||
<aside class="services-ad">
|
<!-- <aside class="services-ad">
|
||||||
<div class="feature-ad-banner">
|
<div class="feature-ad-banner">
|
||||||
<div class="ad-content">
|
<div class="ad-content">
|
||||||
<div class="ad-icon">
|
<div class="ad-icon">
|
||||||
@@ -100,7 +100,7 @@
|
|||||||
></a>
|
></a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</aside>
|
</aside> -->
|
||||||
|
|
||||||
<!-- Contact Section -->
|
<!-- Contact Section -->
|
||||||
<section id="contact"></section>
|
<section id="contact"></section>
|
||||||
|
|||||||
Reference in New Issue
Block a user