diff --git a/images/Card_3D designer-1.png b/images/Card_3D designer-1.png new file mode 100644 index 0000000..bda8127 Binary files /dev/null and b/images/Card_3D designer-1.png differ diff --git a/images/Card_3D designer.png b/images/Card_3D designer.png new file mode 100644 index 0000000..2ebbe20 Binary files /dev/null and b/images/Card_3D designer.png differ diff --git a/images/Gradient-1.png b/images/Gradient-1.png new file mode 100644 index 0000000..6d0a7b4 Binary files /dev/null and b/images/Gradient-1.png differ diff --git a/images/Gradient-2.png b/images/Gradient-2.png new file mode 100644 index 0000000..e0fbf21 Binary files /dev/null and b/images/Gradient-2.png differ diff --git a/images/Gradient.png b/images/Gradient.png new file mode 100644 index 0000000..3a83dad Binary files /dev/null and b/images/Gradient.png differ diff --git a/images/Group.png b/images/Group.png new file mode 100644 index 0000000..82eb376 Binary files /dev/null and b/images/Group.png differ diff --git a/images/Portfolio-1.png b/images/Portfolio-1.png new file mode 100644 index 0000000..c853887 Binary files /dev/null and b/images/Portfolio-1.png differ diff --git a/images/Portfolio-2.png b/images/Portfolio-2.png new file mode 100644 index 0000000..6c07823 Binary files /dev/null and b/images/Portfolio-2.png differ diff --git a/images/Portfolio.png b/images/Portfolio.png new file mode 100644 index 0000000..e27a4d1 Binary files /dev/null and b/images/Portfolio.png differ diff --git a/images/Rectangle 27.png b/images/Rectangle 27.png new file mode 100644 index 0000000..373018b Binary files /dev/null and b/images/Rectangle 27.png differ diff --git a/images/Screenshot 2022-09-30 at 10.49 1-1.png b/images/Screenshot 2022-09-30 at 10.49 1-1.png new file mode 100644 index 0000000..6c07823 Binary files /dev/null and b/images/Screenshot 2022-09-30 at 10.49 1-1.png differ diff --git a/images/Screenshot 2022-09-30 at 10.49 1-2.png b/images/Screenshot 2022-09-30 at 10.49 1-2.png new file mode 100644 index 0000000..6c07823 Binary files /dev/null and b/images/Screenshot 2022-09-30 at 10.49 1-2.png differ diff --git a/images/Screenshot 2022-09-30 at 10.49 1.png b/images/Screenshot 2022-09-30 at 10.49 1.png new file mode 100644 index 0000000..6c07823 Binary files /dev/null and b/images/Screenshot 2022-09-30 at 10.49 1.png differ diff --git a/images/Screenshot 2022-09-30 at 10.49 3-1.png b/images/Screenshot 2022-09-30 at 10.49 3-1.png new file mode 100644 index 0000000..3ec9f5b Binary files /dev/null and b/images/Screenshot 2022-09-30 at 10.49 3-1.png differ diff --git a/images/Screenshot 2022-09-30 at 10.49 3-2.png b/images/Screenshot 2022-09-30 at 10.49 3-2.png new file mode 100644 index 0000000..7003e97 Binary files /dev/null and b/images/Screenshot 2022-09-30 at 10.49 3-2.png differ diff --git a/images/Screenshot 2022-09-30 at 10.49 3.png b/images/Screenshot 2022-09-30 at 10.49 3.png new file mode 100644 index 0000000..3ec9f5b Binary files /dev/null and b/images/Screenshot 2022-09-30 at 10.49 3.png differ diff --git a/images/akar-icons_pinterest-fill.png b/images/akar-icons_pinterest-fill.png new file mode 100644 index 0000000..5f0a535 Binary files /dev/null and b/images/akar-icons_pinterest-fill.png differ diff --git a/images/cenetr.png b/images/cenetr.png new file mode 100644 index 0000000..3957bde Binary files /dev/null and b/images/cenetr.png differ diff --git a/images/iMac - 5.png b/images/iMac - 5.png new file mode 100644 index 0000000..d589f7d Binary files /dev/null and b/images/iMac - 5.png differ diff --git a/images/image 2.png b/images/image 2.png new file mode 100644 index 0000000..3d4e05e Binary files /dev/null and b/images/image 2.png differ diff --git a/images/img.jpg b/images/img.jpg new file mode 100644 index 0000000..9a6f139 Binary files /dev/null and b/images/img.jpg differ diff --git a/images/img1.png b/images/img1.png new file mode 100644 index 0000000..64abe5f Binary files /dev/null and b/images/img1.png differ diff --git a/images/img_blog1.png b/images/img_blog1.png new file mode 100644 index 0000000..6d00023 Binary files /dev/null and b/images/img_blog1.png differ diff --git a/images/img_blog2.png b/images/img_blog2.png new file mode 100644 index 0000000..7bc683c Binary files /dev/null and b/images/img_blog2.png differ diff --git a/images/img_blog3.png b/images/img_blog3.png new file mode 100644 index 0000000..4dc5e77 Binary files /dev/null and b/images/img_blog3.png differ diff --git a/images/img_blog4.png b/images/img_blog4.png new file mode 100644 index 0000000..531009d Binary files /dev/null and b/images/img_blog4.png differ diff --git a/images/img_blog5.png b/images/img_blog5.png new file mode 100644 index 0000000..a143969 Binary files /dev/null and b/images/img_blog5.png differ diff --git a/images/img_blog6.png b/images/img_blog6.png new file mode 100644 index 0000000..8bb0024 Binary files /dev/null and b/images/img_blog6.png differ diff --git a/images/img_center bottom rigth.png b/images/img_center bottom rigth.png new file mode 100644 index 0000000..3bafcfa Binary files /dev/null and b/images/img_center bottom rigth.png differ diff --git a/images/img_center bottom.png b/images/img_center bottom.png new file mode 100644 index 0000000..b673a13 Binary files /dev/null and b/images/img_center bottom.png differ diff --git a/images/img_home.svg b/images/img_home.svg new file mode 100644 index 0000000..73a02ca --- /dev/null +++ b/images/img_home.svg @@ -0,0 +1,162 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/images/img_icon.png b/images/img_icon.png new file mode 100644 index 0000000..37c6d45 Binary files /dev/null and b/images/img_icon.png differ diff --git a/images/img_icon2.png b/images/img_icon2.png new file mode 100644 index 0000000..e8cbf73 Binary files /dev/null and b/images/img_icon2.png differ diff --git a/images/img_icon3.png b/images/img_icon3.png new file mode 100644 index 0000000..365cb1e Binary files /dev/null and b/images/img_icon3.png differ diff --git a/images/img_left bottom.png b/images/img_left bottom.png new file mode 100644 index 0000000..24b053d Binary files /dev/null and b/images/img_left bottom.png differ diff --git a/images/img_left rigth.png b/images/img_left rigth.png new file mode 100644 index 0000000..6dc5370 Binary files /dev/null and b/images/img_left rigth.png differ diff --git a/images/img_left top.png b/images/img_left top.png new file mode 100644 index 0000000..e87245f Binary files /dev/null and b/images/img_left top.png differ diff --git a/images/img_left topl.png b/images/img_left topl.png new file mode 100644 index 0000000..d858f7a Binary files /dev/null and b/images/img_left topl.png differ diff --git a/images/img_review.png b/images/img_review.png new file mode 100644 index 0000000..8ab4d18 Binary files /dev/null and b/images/img_review.png differ diff --git a/images/img_rigth top.png b/images/img_rigth top.png new file mode 100644 index 0000000..b403289 Binary files /dev/null and b/images/img_rigth top.png differ diff --git a/images/img_rigth top2.png b/images/img_rigth top2.png new file mode 100644 index 0000000..4cea70b Binary files /dev/null and b/images/img_rigth top2.png differ diff --git a/images/port.jpg b/images/port.jpg new file mode 100644 index 0000000..c5032f5 Binary files /dev/null and b/images/port.jpg differ diff --git a/images/portfolio.jpg b/images/portfolio.jpg new file mode 100644 index 0000000..f6a7982 Binary files /dev/null and b/images/portfolio.jpg differ diff --git a/images/yasmin.jpg b/images/yasmin.jpg new file mode 100644 index 0000000..038aab4 Binary files /dev/null and b/images/yasmin.jpg differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..b1ae1d4 --- /dev/null +++ b/index.html @@ -0,0 +1,511 @@ + + + + + + Yasmin Portfolio + + + + + + + + + + + + + +
+
+
+

Hello, I'm Yasmin

+

Front-End Developer | UI/UX Designer

+ + Download CV +
+
+ Phone Image +
+
+
+ +
+
+
+ Yasmin Ahmed +
+ + + +
+

Yasmin Ahmed

+
+
+

About Me

+

+ I'm Yasmin Ahmed, 21 years old. I am currently studying Computer + Science and Artificial Intelligence. I specialize in Front-End + Development and UI/UX design. +

+

+ I'm passionate about creating web experiences that are user-friendly + and visually appealing. Currently, I'm working on developing my + skills in React and JavaScript. +

+
+
+
+
+
+

+ My Services +

+
+ +
+
+

FRONT-END DEVELOPMENT

+

+ Specializing in building responsive, interactive, and + user-friendly web interfaces using HTML, CSS, and JavaScript. +

+
+
+

UI/UX DESIGN

+

+ Designing intuitive and engaging user experiences with a focus + on usability and accessibility. +

+
+
+

WEB DESIGN

+

+ Creating visually appealing and functional web designs tailored + to client needs and modern design trends. +

+
+
+
+ Portfolio Image +
+ + +
+
+

WEB DEVELOPMENT

+

+ Developing full-stack web applications using modern frameworks + like React, Node.js, and Express. +

+
+
+

RESPONSIVE DESIGN

+

+ Ensuring websites and applications are optimized for all screen + sizes, from mobile to desktop. +

+
+
+

FRONT-END FRAMEWORKS

+

+ Building dynamic web apps with front-end frameworks like + React.js, Vue.js, and Angular. +

+
+
+
+
+
+
+

+ Designes +

+
+ +
+
+
+ img1 +
+
+ img2 + img3 +
+
+
+ img4 +
+
+ + +
+
+ img5 +
+
+ img6 + img7 +
+
+ + +
+
+ img8 + img9 +
+
+ img10 +
+
+
+ +
+
+
+ +
+
Blog
+
+ +
+ Image 1 + Image 2 + Image 3 + Image 4 + Image 5 + Image 6 +
+
+
+
+
+

+ Get in Touch +

+
+ +
+
+
+
+ + +
+
+ + +
+
+
+ + +
+
+ + +
+ +
+
+ + +
+
+

CONTACT INFO

+

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. + Recusandae, libero beatae omnis atque expedita perferendis + officia magnam praesentium vitae ex facere dolore architecto + possimus dolorem dolorum eos. Rem, aliquam placeat. +

+ +
+ + Address: +

El-Wasta Beni Suef.

+
+ +
+ + Email: + YasminAhmed@gmail.com +
+ +
+ + Phone: +

+2001123456982

+
+ +
+ + Skype: + Yasmin.skype +
+
+
+
+
+
+ +
+
+

Testimonial

+
+ +
+
+

This is a template Figma file, turned into code using Anima. Learn more at AnimaApp.com

+
+
+ User +
+ ★ ★ ★ ★ ★ +
+
+
+
Gemma Nolen
+

Google

+
+
+ +
+
+

This is a template Figma file, turned into code using Anima. Learn more at AnimaApp.com

+
+
+ User +
+ ★ ★ ★ ★ ★ +
+
+
+
Gemma Nolen
+

Google

+
+
+ +
+
+

This is a template Figma file, turned into code using Anima. Learn more at AnimaApp.com

+
+
+ User +
+ ★ ★ ★ ★ ★ +
+
+
+
Gemma Nolen
+

Google

+
+
+ +
+
+

This is a template Figma file, turned into code using Anima. Learn more at AnimaApp.com

+
+
+ User +
+ ★ ★ ★ ★ ★ +
+
+
+
Gemma Nolen
+

Google

+
+
+ +
+
+

This is a template Figma file, turned into code using Anima. Learn more at AnimaApp.com

+
+
+ User +
+ ★ ★ ★ ★ ★ +
+
+
+
Gemma Nolen
+

Google

+
+
+ +
+
+

This is a template Figma file, turned into code using Anima. Learn more at AnimaApp.com

+
+
+ User +
+ ★ ★ ★ ★ ★ +
+
+
+
Gemma Nolen
+

Google

+
+
+ +
+
+
+ + + + + + + + + + diff --git a/script.js b/script.js new file mode 100644 index 0000000..0238288 --- /dev/null +++ b/script.js @@ -0,0 +1,44 @@ +const body = document.body; +const toggleThemeBtn = document.getElementById('toggle-theme'); +const themeIcon = toggleThemeBtn.querySelector('i'); + +toggleThemeBtn.addEventListener('click', () => { +const currentTheme = body.getAttribute('data-theme'); +if (currentTheme === 'dark') { + body.setAttribute('data-theme', 'light'); + toggleThemeBtn.classList.replace('btn-outline-light', 'btn-outline-dark'); + themeIcon.classList.replace('bi-moon-fill', 'bi-sun-fill'); + toggleThemeBtn.innerHTML = ' Light Mode'; +} else { + body.setAttribute('data-theme', 'dark'); + toggleThemeBtn.classList.replace('btn-outline-dark', 'btn-outline-light'); + themeIcon.classList.replace('bi-sun-fill', 'bi-moon-fill'); + toggleThemeBtn.innerHTML = ' Dark Mode'; +} +}); + +// Add hover effects to service boxes +document.querySelectorAll('.service-box').forEach((box) => { + box.addEventListener('mouseover', () => { + box.style.transform = 'scale(1.05)'; + }); + box.addEventListener('mouseout', () => { + box.style.transform = 'scale(1)'; + }); +}); + + +const toggleButton = document.getElementById("toggle-mode"); +const contactSection = document.getElementById("contact"); + +toggleButton.addEventListener("click", () => { + // Toggle the "dark-mode" class + contactSection.classList.toggle("dark-mode"); + + // Update the button text + if (contactSection.classList.contains("dark-mode")) { + toggleButton.textContent = "Switch to Light Mode"; + } else { + toggleButton.textContent = "Switch to Dark Mode"; + } +}); diff --git a/style.css b/style.css new file mode 100644 index 0000000..31c4f4b --- /dev/null +++ b/style.css @@ -0,0 +1,649 @@ +* { + padding: 0; + box-sizing: border-box !important; + margin: 0; +} +.container { + width: 100%; + margin: 0 auto; + padding: 0 15px; +} + +body { + background-color: #1a1a2e; + color: #f5f5f5; + font-family: "Arial", sans-serif; + margin: 0; + overflow: hidden; + overflow: auto; +} +html, +body { + height: 100%; +} +.navbar { + background-color: #1a1a2e !important; + border-bottom: 1px solid #ddd; + color: #000; +} +.hero { + display: flex; + align-items: center; + justify-content: space-between; + padding: 50px 20px; + gap: 20px; +} +.hero h1 { + font-size: 3rem; + font-weight: bold; +} +.social-icons a { + font-size: 1.5rem; + margin-right: 15px; + color: #f5f5f5; +} +.social-icons a:hover { + color: #f39c12; +} +.btn-cv { + background-color: #f39c12; + color: #fff; + font-weight: bold; + padding: 10px 20px; + border-radius: 5px; +} +.btn-cv:hover { + background-color: #e67e22; +} +.phone-img { + max-width: 250px; + border-radius: 10px; + transition: transform 0.35 ease; +} +.phone-img:hover { + transform: scale(1.05); +} +[data-theme="light"] { + background-color: #f8f9fa; + color: #000; +} +[data-theme="light"] .hero h1 { + color: #000; +} + +[data-theme="light"] .social-icons a { + color: #000; +} +[data-theme="light"] .social-icons a:hover { + color: #f39c12; +} +[data-theme="light"] .btn-cv { + background-color: #007bff; +} +[data-theme="light"] .btn-cv:hover { + background-color: #0056b3; +} +[data-theme="light"] .navbar { + background-color: #f8f9fa !important; + border-bottom: 1px solid #ddd; + color: #000; +} + +[data-theme="light"] .navbar .nav-link, +[data-theme="light"] .navbar-brand { + color: #000 !important; +} + +[data-theme="light"] .navbar .nav-link:hover { + color: #007bff; +} + +[data-theme="light"] .navbar-toggler-icon { + background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(0,0,0,0.5)' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); +} +[data-theme="light"] .service-box { + background-color: #fff; + color: #000; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); +} +[data-theme="light"] .service-box h3 { + color: #f39c12; +} +[data-theme="light"] .service-box p { + color: #333; +} +[data-theme="light"] img.img-fluid { + border-radius: 20px; +} +[data-theme="light"] .about { + background-color: #f8f9fa; + color: #000; +} + +[data-theme="light"] .about h2 { + color: #f39c12; +} + +[data-theme="light"] .img_icons .img_icon1, +[data-theme="light"] .img_icons .img_icon2, +[data-theme="light"] .img_icons .img_icon3 { + background-color: #ffffff; +} +[data-theme="light"] .projects-section, +[data-theme="light"] .blog-section, +[data-theme="light"] #contact { + background-color: #f8f9fa; + color: #000; +} + +[data-theme="light"] .projects-section h2, +[data-theme="light"] .blog-section h2, +[data-theme="light"] #contact h2 { + color: #333; +} + +[data-theme="light"] .project-card, +[data-theme="light"] #blog-section, +[data-theme="light"] #contact .form-control { + background-color: #f8f9fa; + color: #000; +} + +[data-theme="light"] .project-card:hover, +[data-theme="light"] .blog-card:hover { + background-color: #e9ecef; +} + +[data-theme="light"] #contact .form-control:focus { + border-color: #007bff; +} + +[data-theme="light"] #contact .btn-warning { + background-color: #007bff; + color: #fff; +} + +[data-theme="light"] #contact .btn-warning:hover { + background-color: #0056b3; +} +[data-theme="light"] h2 span:first-child { + color: #000; +} + +[data-theme="light"] h2 { + color: #000; +} +.about { + padding: 0; + box-sizing: border-box; + position: relative; + width: 100%; + margin: 0 auto; + box-sizing: border-box; +} + +.about .row { + align-items: center; +} + +.about h2 { + font-size: 2.5rem; + margin-bottom: 20px; +} + +.about p { + font-size: 1.2rem; + line-height: 1.6; + margin-bottom: 20px; +} + +.about-img { + max-width: 45%; + border-radius: 300px; + position: relative; +} + +.img_icons { + position: absolute; + gap: 5px; + left: 12%; + transform: translate(-50%, -50%); + display: flex; + z-index: 1; +} + +.img_icon1, +.img_icon2, +.img_icon3 { + max-width: 30px; + height: auto; + border-radius: 50%; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); + background-color: #fff; + margin-top: 2px; +} +.name { + position: relative; + font-size: 1.5rem; + font-weight: bold; + text-align: left; + left: 45px; + margin-top: 30px; +} +h2 { + font-size: 2.5rem; +} +h2 span { + color: #f39c12; +} +.service-box { + background-color: #2e2e3e; + border-radius: 10px; + transition: transform 0.3s ease; +} +.service-box :hover { + transform: scale(1.05); +} +.service-box h3 { + margin-bottom: 10px; +} +.service-box p { + font-size: 0.9rem; + color: #ccc; +} +img.img-fluid { + max-width: 80%; + height: 600px; + border-radius: 20px; +} + +.parent { + display: flex; + flex-wrap: wrap; +} +.left_content { + display: flex; + flex-direction: column; +} + +.left_top_rigth { + display: flex; + flex-direction: column; +} + +.left_top_left img { + height: 343px; +} + +.left_top_rigth img { + width: 100px; + height: 60%; +} + +.left_bottom img { + width: 375px; +} + +.center_content { + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: flex-start; + text-align: center; +} + +.center_top img { + width: 278px; + height: auto; +} + +.center_bottom { + display: flex; + width: fit-content; +} + +.center_bottom img { + height: auto; + width: 140px; +} + +.rigth_content { + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: flex-start; + margin-left:-91px; +} + +.rigth_top { + display: flex; + +} + +.rigth_top img { + width: 48%; + +} + +.rigth_bottom img { + width: 357px; + height:68%; +} + +#blog-section { + position: relative; + background-color: #1a1a2e; + margin: 0 auto; + padding: 20px; + border-radius: 10px; +} +.blog-title { + display: flex; + align-items: center; +} +.rectangle { + background-color: #000; + width: 150px; + height: 250px; + border-radius: 4px; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3); + position: absolute; + top: -95px; + left: 50%; + transform: translateX(-50%); + z-index: 1; +} +.blog-title .circle { + background-color: #ff6a00; + color: #fff; + font-size: 20px; + font-weight: bold; + text-align: center; + border-radius: 50%; + width: 70px; + height: 70px; + display: flex; + justify-content: center; + align-items: center; + position: absolute; + left: 50%; + top: -50%; + transform: translateX(-50%); + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3); + z-index: 2; +} + +.image-container { + display: grid; + grid-template-columns: 1fr 1fr 1fr; + grid-template-rows: 1fr 1fr; + gap: 10px; + width: 300px; + transform: rotate(45deg); + position: relative; + top: 0.1px; + left: 50%; + transform: translateX(-50%) rotate(45deg); + z-index: 3; + margin-bottom: 0 auto; +} + +.img-item { + width: 100px; + height: 100px; + object-fit: cover; + border-radius: 8px; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3); + transition: transform 0.3s ease; +} + +.img-item:hover { + transform: scale(1.1); +} + +.top-left { + grid-column: 3; + grid-row: 0; +} + +.top-center { + grid-column: 2; + grid-row: 2; +} + +.top-right { + grid-column: 3; + grid-row: 1; +} + +.bottom-left { + grid-column: 1; + grid-row: 3; +} + +.bottom-center { + grid-column: 2; + grid-row: 3; +} + +.bottom-right { + grid-column: 3; + grid-row: 2; +} +#contact { + background-color: #1a1a2e; + color: #000; + padding: 50px 0; + display: flex; + width: 100%; + padding-top: 20px; + margin: 0 auto; + width: 60%; +} +.form { + width: 90%; + display: block; + justify-content: flex-start; + padding: 20px; +} + +#contact .form-label { + font-weight: bold; + color: #ffc107; +} + +#contact .form-control { + border: 1px solid #ccc; + border-radius: 25px; + padding: 10px; + transition: border-color 0.3s ease, box-shadow 0.3s ease; + background-color: #6e6565; + color: #ffc107; +} + +#contact .form-control:focus { + border-color: #ffc107; + box-shadow: 0 0 5px rgba(255, 193, 7, 0.5); +} + +#contact .btn-warning { + background-color: #ffc107; + color: #fff; + border: none; + padding: 10px 20px; + border-radius: 5px; + transition: background-color 0.3s ease; +} + +#contact .btn-warning:hover { + background-color: #e0a800; +} +.info_form { + display: block; + justify-content: flex-start; + height: 390px; + background: linear-gradient(to left,#b87c4c,#e2b659); + border-radius: 30px; + color: #fff; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); + width: 100%; + height: 500px; + padding-left: 5px; +} +.info_form a { + color: #fff; +} +.contact-item { + display: flex; + align-items: center; + margin-bottom: 15px; +} + +.contact-item i { + font-size: 1.5rem; +} + +.contact-item p, +.contact-item a { + margin: 0; +} +.testimonial-card { + border: 1px solid #ccc; + border-radius: 10px; + padding: 20px; + text-align: center; + background-color: #ccc; +} +.testimonial-card img { + width: 50px; + height: 50px; + border-radius: 50%; + object-fit: cover; + +} +.testimonial-card .stars { + color: gold; + font-size: 20px; +} +footer { + background-color: #222; + color: #ddd; + padding: 20px 0; +} +footer a { + color: #ddd; + text-decoration: none; +} +footer a:hover { + text-decoration: underline; +} +@media (max-width: 1200px) { + .project-box { + grid-template-columns: 1fr 1fr 1fr; + } + + .left_top img, + .left_bottom img, + .bottom img, + .center_top img, + .center_bottom img, + .rigth_top img, + .rigth_bottom img { + width: 100%; + height: auto; + } + .services img{ + display: none; + } +} +@media (max-width: 768px) { + .phone-img { + padding-top: 20px; + margin-top: 10%; + display: flex; + } + .about-img { + max-width: 50%; + height: auto; + margin-left: 10px; + } + .about h2, + p { + margin-left: 10px; + } + .img_icons { + left: 25%; + gap: 5px; + } + img.img-fluid { + max-width: 90%; + } + + .services { + margin-bottom: 20px; + margin-top: 10px; + } + .services img{ + display: none; + } + .phone-img { + padding-top: 20px; + margin-top: 10%; + display: flex; + } + .left_top img, + .left_bottom img, + .bottom img, + .center_top img, + .center_bottom img, + .rigth_top img, + .rigth_bottom img { + width: 100%; + height: auto; + } + + .left_bottom img { + margin-top: 0; + } + + .bottom { + margin-top: 20px; + } + + .project-box { + display: flex; + flex-direction: column; + } + + .center_bottom { + display: block; + } + + .rigth_top { + display: block; + } + } + +@media (max-width: 480px) { + .project-box { + margin: 10px; + } + + .left_top img { + width: 80%; + } + + .left_bottom img, + .center_top img, + .rigth_bottom img { + width: 100%; + } + + .rigth_top img { + width: 100%; + margin-left: 0; + } + .services img{ + display: none; + } +}