diff --git a/components/about.html b/components/about.html index 6c3d130..2c2a439 100644 --- a/components/about.html +++ b/components/about.html @@ -2,7 +2,7 @@
- +
diff --git a/components/contact.html b/components/contact.html index 412d8be..1714565 100644 --- a/components/contact.html +++ b/components/contact.html @@ -10,7 +10,7 @@
-
+
@@ -57,7 +57,7 @@
-
+

Follow Me

diff --git a/components/featured.html b/components/featured.html index a4ddfd8..a45afe4 100644 --- a/components/featured.html +++ b/components/featured.html @@ -58,7 +58,7 @@
-
+
15+

Years of Experience

@@ -68,7 +68,7 @@
-
+
5+

Happy Customers

@@ -88,7 +88,7 @@
-
+
7+

Digital Awards

diff --git a/components/footer.html b/components/footer.html index 4262ad5..46582ae 100644 --- a/components/footer.html +++ b/components/footer.html @@ -1,14 +1,94 @@ \ No newline at end of file diff --git a/components/header.html b/components/header.html index a9caf7d..fb8e247 100644 --- a/components/header.html +++ b/components/header.html @@ -20,7 +20,7 @@ - First + M
diff --git a/components/hero.html b/components/hero.html index 484fef4..589bfb5 100644 --- a/components/hero.html +++ b/components/hero.html @@ -1,11 +1,13 @@
-
+
- -
Hello friend!
+
+ +
+
Hello friend!

Senior Frontend Developer with 15+ years of experience

@@ -14,14 +16,10 @@

- -
- -
- +
\ No newline at end of file diff --git a/css/templatemo-first-portfolio-style.css b/css/templatemo-first-portfolio-style.css index 3b19d85..20f935c 100644 --- a/css/templatemo-first-portfolio-style.css +++ b/css/templatemo-first-portfolio-style.css @@ -11,13 +11,13 @@ https://templatemo.com/tm-578-first-portfolio -----------------------------------------*/ :root { --white-color: #ffffff; - --primary-color: #ff69b4; /* Hot pink */ - --secondary-color: #ffb6c1; /* Light pink */ - --section-bg-color: #fff5f7; /* Very light pink */ - --dark-color: #4a4a4a; /* Softer dark color */ - --p-color: #666666; - --border-color: #ffd1dc; /* Light pink border */ - --featured-border-color: #ff69b4; + --primary-color: #6c757d; + --secondary-color: #14b789; + --section-bg-color: #f9f9f9; + --dark-color: #000000; + --p-color: #717275; + --border-color: #e9eaeb; + --featured-border-color: #727aab; --body-font-family: "DM Sans", sans-serif; @@ -316,7 +316,7 @@ strong { } .navbar.scrolled { - background: rgba(83, 93, 161, 0.95); + background: var(--primary-color); backdrop-filter: blur(10px); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); padding: 10px 0; @@ -517,12 +517,34 @@ strong { 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 { position: absolute; z-index: 22; top: -44px; width: 340px; - height: 340px; + height: 340px !important; right: 67px; border-radius: 100%; border: 5px solid #FFF; @@ -552,6 +574,12 @@ strong { /*--------------------------------------- ABOUT -----------------------------------------*/ + +.object-fit-cover { + object-fit: cover; + height: 100%; +} + .profile-thumb { background: var(--white-color); border-radius: 15px; @@ -560,11 +588,6 @@ strong { transition: all 0.3s ease; } -.profile-thumb:hover { - transform: translateY(-5px); - box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15); -} - .profile-title { margin-bottom: 25px; padding-bottom: 15px; @@ -700,11 +723,11 @@ strong { box-shadow: 0 0 20px rgba(255, 255, 255, 0.3); } -.about-image:hover { +/* .about-image:hover { transform: scale(1.05); filter: brightness(1.3) contrast(1.2) saturate(1.2); box-shadow: 0 0 30px rgba(255, 255, 255, 0.4); -} +} */ .about-thumb { padding-right: 20px; @@ -748,10 +771,6 @@ strong { transition: all ease 0.2s; } -.clients-image:hover { - transform: scale(1.3); -} - /*--------------------------------------- SERVICES -----------------------------------------*/ @@ -1050,10 +1069,10 @@ strong { transition: all 0.3s ease; } -.contact-info-card:hover { +/* .contact-info-card:hover { transform: translateX(10px); background: rgba(255, 255, 255, 0.15); -} +} */ .contact-info-icon { width: 50px; @@ -1077,6 +1096,7 @@ strong { .contact-info-content { flex-grow: 1; + overflow: hidden; } .contact-info-content h4 { @@ -1278,10 +1298,26 @@ strong { 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); - padding-top: 50px; - padding-bottom: 50px; - text-align: center; + padding-top: 60px; + padding-bottom: 30px; + 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 { @@ -1290,52 +1326,324 @@ strong { text-transform: uppercase; } -.copyright-text-wrap p, -.copyright-text { - font-size: var(--copyright-font-size); +/* Footer Brand */ +.footer-brand { + margin-bottom: 20px; } -.copyright-text { - border-right: 1px solid var(--border-color); - padding-right: 25px; - margin-right: 20px; +.footer-brand-name { + font-size: 24px; + font-weight: 700; + 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 { - font-weight: var(--font-weight-bold); +.footer-description { + 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 { margin: 0; padding: 0; + list-style: none; } .footer-menu-item { list-style: none; - display: inline-block; - vertical-align: top; + display: block; + margin-bottom: 10px; } .footer-menu-link { - border: 1px solid var(--border-color); - border-radius: var(--border-radius-medium); - font-size: var(--copyright-font-size); - font-weight: var(--font-weight-medium); + font-size: 14px; + font-weight: 500; + color: var(--p-color); + text-decoration: none; display: inline-block; - vertical-align: top; - text-align: center; - margin-right: 10px; - margin-bottom: 10px; - padding: 6px 14px; - min-width: 70px; - transition: transform 0.3s ease, color 0.3s ease; + transition: all 0.3s ease; + position: relative; + padding-left: 0; +} + +.footer-menu-link::before { + content: '→'; + position: absolute; + left: -20px; + opacity: 0; + transition: all 0.3s ease; + color: var(--secondary-color); } .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; 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; } -.about-image:hover { +/* .about-image:hover { transform: scale(1.05); -} +} */ /* Enhance projects section */ .projects-thumb { @@ -1805,7 +2113,7 @@ html { } .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); } diff --git a/index.html b/index.html index d48ec2d..adeadf5 100644 --- a/index.html +++ b/index.html @@ -32,7 +32,7 @@
-