team-member.html 24 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>Team Member Profile - Meet Our Experts | ITAgency</title>
  7. <meta name="description" content="Explore the professional background, skills, and projects of our team members at ITAgency. Learn more about the people powering your digital solutions.">
  8. <!-- Favicon -->
  9. <link rel="icon" type="image/x-icon" href="assets/images/ico-01.png">
  10. <!-- CSS Files -->
  11. <link rel="stylesheet" href="assets/css/aos.css">
  12. <link rel="stylesheet" href="assets/css/universal-slider.css">
  13. <link rel="stylesheet" href="assets/css/auto-progress-bar.css">
  14. <!-- General CSS files -->
  15. <link rel="stylesheet" href="assets/css/globals.css">
  16. <link rel="stylesheet" href="assets/css/style.css">
  17. </head>
  18. <body class="body-1">
  19. <!-- Tech Page Loader -->
  20. <div id="page-loader" class="page-loader">
  21. <div class="loader-container">
  22. <div class="loader-content">
  23. <!-- Advanced Tech Spinner Only -->
  24. <div class="loader-spinner">
  25. <div class="spinner-ring">
  26. <div></div>
  27. </div>
  28. </div>
  29. <!-- Advanced Progress Bar -->
  30. <div class="loader-progress">
  31. <div class="progress-bar"></div>
  32. </div>
  33. </div>
  34. </div>
  35. </div>
  36. <!-- Header -->
  37. <header class="header">
  38. <div class="container d-flex-between">
  39. <!-- Logo -->
  40. <div class="logo position-relative">
  41. <img class="image" src="assets/images/logo-transparent-01.png" alt="Logo">
  42. <a class="overlay-link" href="index.html"></a>
  43. </div>
  44. <!-- Navigation -->
  45. <nav class="navbar" id="navbar">
  46. <ul class="nav-menu">
  47. <li class="dropdown">
  48. <a class="dropdown-toggle" data-dropdown="home-dropdown">Home</a>
  49. <ul class="dropdown-menu" id="home-dropdown">
  50. <li><a href="index.html" class="dropdown-item">Home 1</a></li>
  51. <li><a href="heroedge.html" class="dropdown-item">Hero Edge</a></li>
  52. <li><a href="home-page-2.html" class="dropdown-item">Home 2</a></li>
  53. <li><a href="home-page-3.html" class="dropdown-item">Home 3</a></li>
  54. <li><a href="home-page-4.html" class="dropdown-item">Home 4</a></li>
  55. </ul>
  56. </li>
  57. <li><a href="about-us.html" class="nav-link">About Us</a></li>
  58. <li><a href="services.html" class="nav-link">Services</a></li>
  59. <li><a href="portfolio.html" class="nav-link">Portfolio</a></li>
  60. <li class="dropdown">
  61. <a class="dropdown-toggle" data-dropdown="blog-dropdown">Blog</a>
  62. <ul class="dropdown-menu" id="blog-dropdown">
  63. <li><a href="blog-column-1.html" class="dropdown-item">Blog Column 1</a></li>
  64. <li><a href="blog-column-2.html" class="dropdown-item">Blog Column 2</a></li>
  65. <li><a href="blog-column-3.html" class="dropdown-item">Blog Column 3</a></li>
  66. <li><a href="article.html" class="dropdown-item">Blog Detail Page</a></li>
  67. </ul>
  68. </li>
  69. <li class="dropdown">
  70. <a class="dropdown-toggle" data-dropdown="pages-dropdown">Pages</a>
  71. <ul class="dropdown-menu" id="pages-dropdown">
  72. <li><a href="process.html" class="dropdown-item">Process</a></li>
  73. <li><a href="pricing.html" class="dropdown-item">Pricing</a></li>
  74. <li><a href="team.html" class="dropdown-item">Team</a></li>
  75. <li><a href="team-member.html" class="dropdown-item">Team Member</a></li>
  76. <li><a href="faqs.html" class="dropdown-item">FAQs</a></li>
  77. <li><a href="terms-conditions.html" class="dropdown-item">Terms & Conditions</a></li>
  78. <li><a href="privacy-policy.html" class="dropdown-item">Privacy Policy</a></li>
  79. <li><a href="service-cards-grid.html" class="dropdown-item">Service Cards Grid</a></li>
  80. <li><a href="buttons.html" class="dropdown-item">Buttons</a></li>
  81. <li><a href="typography.html" class="dropdown-item">Fonts</a></li>
  82. </ul>
  83. </li>
  84. <li><a href="contact-us.html" class="nav-link">Contact Us</a></li>
  85. </ul>
  86. </nav>
  87. <!-- Get Quotes Button -->
  88. <div class="actions d-flex-center">
  89. <a pages/contact-us.html class="btn btn-get-quotes">Get Quotes</a>
  90. <div class="theme-switcher">
  91. <button id="theme-toggle" class="theme-toggle-btn" aria-label="Toggle dark mode">
  92. <svg id="theme-toggle-light-icon" class="sun-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2.25a.75.75 0 01.75.75v2.25a.75.75 0 01-1.5 0V3a.75.75 0 01.75-.75zM7.5 12a4.5 4.5 0 119 0 4.5 4.5 0 01-9 0zM18.894 6.106a.75.75 0 00-1.06-1.06l-1.591 1.59a.75.75 0 101.06 1.061l1.591-1.59zM21.75 12a.75.75 0 01-.75.75h-2.25a.75.75 0 010-1.5H21a.75.75 0 01.75.75zM17.894 17.894a.75.75 0 001.06-1.06l-1.59-1.591a.75.75 0 10-1.061 1.06l1.59 1.591zM12 18a.75.75 0 01.75.75v2.25a.75.75 0 01-1.5 0v-2.25A.75.75 0 0112 18zM7.894 17.894a.75.75 0 00-1.06-1.06l-1.591 1.59a.75.75 0 101.06 1.061l1.591-1.59zM4.5 12a.75.75 0 01-.75.75H1.5a.75.75 0 010-1.5h2.25a.75.75 0 01.75.75zM6.106 6.106a.75.75 0 001.06-1.06l-1.59-1.591a.75.75 0 00-1.061 1.06l1.59 1.591z"/></svg>
  93. <svg id="theme-toggle-dark-icon" class="moon-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path fill-rule="evenodd" d="M9.528 1.718a.75.75 0 01.162.819A8.97 8.97 0 009 6a9 9 0 009 9 8.97 8.97 0 004.463-.69a.75.75 0 01.981.981A10.501 10.501 0 0118 19.5a10.5 10.5 0 01-10.5-10.5 10.5 10.5 0 011.718-5.528.75.75 0 01.81-.162z" clip-rule="evenodd" /></svg>
  94. </button>
  95. </div>
  96. </div>
  97. <!-- Mobile Menu Toggle -->
  98. <button class="mobile-menu-toggle" id="mobile-menu-toggle">
  99. <span class="hamburger-line"></span>
  100. <span class="hamburger-line"></span>
  101. <span class="hamburger-line"></span>
  102. </button>
  103. </div>
  104. </header>
  105. <!-- Page Header Section -->
  106. <section class="page-header">
  107. <div class="page-header-bg">
  108. <!-- Animated particles/dots background -->
  109. <div class="particles-container">
  110. <div class="particle"></div>
  111. <div class="particle"></div>
  112. <div class="particle"></div>
  113. <div class="particle"></div>
  114. <div class="particle"></div>
  115. <div class="particle"></div>
  116. <div class="particle"></div>
  117. <div class="particle"></div>
  118. <div class="particle"></div>
  119. <div class="particle"></div>
  120. <div class="particle"></div>
  121. <div class="particle"></div>
  122. </div>
  123. <!-- Geometric patterns overlay -->
  124. <div class="geometric-overlay">
  125. <div class="geometric-shape shape-1"></div>
  126. <div class="geometric-shape shape-2"></div>
  127. <div class="geometric-shape shape-3"></div>
  128. <div class="geometric-shape shape-4"></div>
  129. </div>
  130. <!-- Digital grid pattern -->
  131. <div class="digital-grid"></div>
  132. </div>
  133. <div class="page-header-content">
  134. <div>
  135. <div class="breadcrumb"
  136. data-aos="fade-down"
  137. data-aos-duration="600"
  138. data-aos-delay="0">
  139. <a href="/" class="breadcrumb-link">Home</a>
  140. <span class="breadcrumb-separator">
  141. <svg viewBox="0 0 24 24">
  142. <path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/>
  143. </svg>
  144. </span>
  145. <span class="breadcrumb-current">Team Member</span>
  146. </div>
  147. <h1 class="page-title"
  148. data-aos="fade-up"
  149. data-aos-duration="600"
  150. data-aos-delay="100">Team Member</h1>
  151. <p class="page-description"
  152. data-aos="fade-up"
  153. data-aos-duration="600"
  154. data-aos-delay="200">Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem similique doloremque molestiae quae.</p>
  155. </div>
  156. </div>
  157. <!-- Floating elements -->
  158. <div class="floating-elements">
  159. <div class="floating-circle floating-circle-1"></div>
  160. <div class="floating-circle floating-circle-2"></div>
  161. <div class="floating-circle floating-circle-3"></div>
  162. </div>
  163. </section>
  164. <!-- Main 1 -->
  165. <div class="main d-flex-center pt-8 pb-8">
  166. <!-- Main Content -->
  167. <div class="container main-content">
  168. <section class="member-profile-page container">
  169. <div class="section-header text-center pb-5" data-aos="fade-down">
  170. <h2 class="heading-lg">Professional Profile</h2>
  171. </div>
  172. <!-- Left Info Column -->
  173. <aside class="member-aside">
  174. <div class="image-wrapper">
  175. <img src="assets/images/team/emmarodriguez.png" alt="Emma Rodriguez">
  176. </div>
  177. <h2 class="member-name">Emma Rodriguez</h2>
  178. <p class="member-role">UI/UX Designer</p>
  179. <!-- Social Media Links -->
  180. <div class="social-links">
  181. <a href="javascript:void(0)" class="social-link icon-transition sm">
  182. <svg><use xlink:href="#twitter-x"></use></svg>
  183. </a>
  184. <a href="javascript:void(0)" class="social-link icon-transition sm">
  185. <svg><use xlink:href="#facebook"></use></svg>
  186. </a>
  187. <a href="javascript:void(0)" class="social-link icon-transition sm">
  188. <svg><use xlink:href="#linkedin"></use></svg>
  189. </a>
  190. <a href="javascript:void(0)" class="social-link icon-transition sm">
  191. <svg><use xlink:href="#instagram"></use></svg>
  192. </a>
  193. </div>
  194. </aside>
  195. <!-- Main Content -->
  196. <section class="member-main-content">
  197. <!-- Biography -->
  198. <div class="biography">
  199. <h3>Biography Overview.</h3>
  200. <p>
  201. Emma is a creative UI/UX Designer with a keen eye for detail and a deep understanding of user-centric design. She has worked on numerous web and mobile applications, focusing on intuitive interfaces and engaging experiences.
  202. </p>
  203. <p>
  204. With over 6 years of experience, Emma has helped multiple startups and companies improve their digital products through usability testing, responsive design, and design system development.
  205. </p>
  206. </div>
  207. <!-- Skills -->
  208. <div class="skills">
  209. <h3>My Skills</h3>
  210. <div class="about-progress">
  211. <div class="custom-progress" data-progress
  212. data-label="UI Design"
  213. data-percentage="90"
  214. data-color="var(--color-primary)"
  215. data-bg="var(--color-text-primary)"
  216. data-text-color="var(--color-text-primary)">
  217. </div>
  218. <div class="custom-progress" data-progress
  219. data-label="UX Research"
  220. data-percentage="85"
  221. data-color="var(--color-primary)"
  222. data-bg="var(--color-text-primary)"
  223. data-text-color="var(--color-text-primary)">
  224. </div>
  225. <div class="custom-progress" data-progress
  226. data-label="Design Systems"
  227. data-percentage="80"
  228. data-color="var(--color-primary)"
  229. data-bg="var(--color-text-primary)"
  230. data-text-color="var(--color-text-primary)">
  231. </div>
  232. <div class="custom-progress" data-progress
  233. data-label="Figma / Adobe XD"
  234. data-percentage="95"
  235. data-color="var(--color-primary)"
  236. data-bg="var(--color-text-primary)"
  237. data-text-color="var(--color-text-primary)">
  238. </div>
  239. </div>
  240. </div>
  241. <!-- Specialties -->
  242. <div class="specialties">
  243. <h3>Work & Specialty Fields</h3>
  244. <ul class="specialty-list">
  245. <li>Wireframing & Prototyping</li>
  246. <li>Usability Testing</li>
  247. <li>Design Thinking</li>
  248. <li>Mobile App Design</li>
  249. <li>Accessibility Design</li>
  250. <li>Responsive Web Design</li>
  251. </ul>
  252. </div>
  253. </section>
  254. </section>
  255. </div>
  256. </div>
  257. <!-- Footer -->
  258. <footer class="footer pb-5">
  259. <div class="footer-main">
  260. <div class="container">
  261. <div class="footer-content">
  262. <!-- Company Info -->
  263. <div class="footer-section footer-about"
  264. data-aos="fade-up"
  265. data-aos-delay="100">
  266. <div class="footer-logo">
  267. <img class="image" src="assets/images/logo-transparent-01.png" alt="ITAgency Logo">
  268. </div>
  269. <p class="footer-description">
  270. Empowering businesses with smart, innovative tech solutions.
  271. We craft high-impact web development, mobile apps, and digital
  272. services that fuel your growth and success.
  273. </p>
  274. <div class="footer-social">
  275. <span class="social-label">Follow Us</span>
  276. <div class="social-links">
  277. <a href="javascript:void(0)" class="social-link icon-transition"
  278. data-aos="zoom-in"
  279. data-aos-delay="200">
  280. <svg><use xlink:href="#twitter-x"></use></svg>
  281. </a>
  282. <a href="javascript:void(0)" class="social-link icon-transition"
  283. data-aos="zoom-in"
  284. data-aos-delay="250">
  285. <svg><use xlink:href="#facebook"></use></svg>
  286. </a>
  287. <a href="javascript:void(0)" class="social-link icon-transition"
  288. data-aos="zoom-in"
  289. data-aos-delay="300">
  290. <svg><use xlink:href="#linkedin"></use></svg>
  291. </a>
  292. <a href="javascript:void(0)" class="social-link icon-transition"
  293. data-aos="zoom-in"
  294. data-aos-delay="350">
  295. <svg><use xlink:href="#instagram"></use></svg>
  296. </a>
  297. </div>
  298. </div>
  299. </div>
  300. <!-- Navigation Links -->
  301. <div class="footer-section footer-links"
  302. data-aos="fade-up"
  303. data-aos-delay="200">
  304. <h4 class="footer-title">Navigation</h4>
  305. <ul class="footer-menu">
  306. <li><a href="index.html" class="footer-link">Home</a></li>
  307. <li><a href="about-us.html" class="footer-link">About Us</a></li>
  308. <li><a href="services.html" class="footer-link">Services</a></li>
  309. <li><a href="portfolio.html" class="footer-link">Portfolio</a></li>
  310. <li><a href="team.html" class="footer-link">Team</a></li>
  311. <li><a href="pricing.html" class="footer-link">Pricing</a></li>
  312. <li><a href="blog-column-2.html" class="footer-link">Blog</a></li>
  313. <li><a href="privacy-policy.html" class="footer-link">Privacy Policy</a></li>
  314. <li><a href="terms-conditions.html" class="footer-link">Terms of Service</a></li>
  315. </ul>
  316. </div>
  317. <!-- Services -->
  318. <div class="footer-section footer-services"
  319. data-aos="fade-up"
  320. data-aos-delay="300">
  321. <h4 class="footer-title">Our Services</h4>
  322. <ul class="footer-menu">
  323. <li><a href="javascript:void(0)" class="footer-link">Web Development</a></li>
  324. <li><a href="javascript:void(0)" class="footer-link">Mobile App Development</a></li>
  325. <li><a href="javascript:void(0)" class="footer-link">Cloud Solutions</a></li>
  326. <li><a href="javascript:void(0)" class="footer-link">Digital Marketing</a></li>
  327. <li><a href="javascript:void(0)" class="footer-link">UI/UX Design</a></li>
  328. <li><a href="javascript:void(0)" class="footer-link">Data Analytics</a></li>
  329. <li><a href="javascript:void(0)" class="footer-link">Cybersecurity</a></li>
  330. <li><a href="javascript:void(0)" class="footer-link">IT Consulting</a></li>
  331. </ul>
  332. </div>
  333. <!-- Contact Info -->
  334. <div class="footer-section footer-contact"
  335. data-aos="fade-up"
  336. data-aos-delay="400">
  337. <h4 class="footer-title">Contact Info</h4>
  338. <div class="footer-contact-info">
  339. <div class="contact-item">
  340. <div class="contact-icon">
  341. <svg><use xlink:href="#map-marker-1"></use></svg>
  342. </div>
  343. <div class="contact-text">
  344. <span class="contact-label">Address</span>
  345. <span class="contact-value">789 Innovation Avenue, Future Town, FT 67890</span>
  346. </div>
  347. </div>
  348. <div class="contact-item">
  349. <div class="contact-icon">
  350. <svg><use xlink:href="#phone"></use></svg>
  351. </div>
  352. <div class="contact-text">
  353. <span class="contact-label">Phone</span>
  354. <span class="contact-value">+1 (800) 987-6543</span>
  355. </div>
  356. </div>
  357. <div class="contact-item">
  358. <div class="contact-icon">
  359. <svg><use xlink:href="#envelope-1"></use></svg>
  360. </div>
  361. <div class="contact-text">
  362. <span class="contact-label">Email</span>
  363. <span class="contact-value">hello@itagency.com</span>
  364. </div>
  365. </div>
  366. <div class="contact-item">
  367. <div class="contact-icon">
  368. <svg><use xlink:href="#alarm-1"></use></svg>
  369. </div>
  370. <div class="contact-text">
  371. <span class="contact-label">Business Hours</span>
  372. <span class="contact-value">Mon - Fri: 9:00 AM - 6:00 PM</span>
  373. </div>
  374. </div>
  375. </div>
  376. </div>
  377. <!-- Newsletter -->
  378. <div class="footer-section footer-newsletter"
  379. data-aos="fade-up"
  380. data-aos-delay="500">
  381. <h4 class="footer-title">Newsletter</h4>
  382. <p class="newsletter-description">
  383. Subscribe to our newsletter for the latest tech insights and updates.
  384. </p>
  385. <form class="newsletter-form" id="newsletterForm">
  386. <div class="newsletter-input-group">
  387. <input type="email"
  388. class="newsletter-input"
  389. placeholder="Enter your email address"
  390. required>
  391. <button type="submit" class="newsletter-btn">
  392. <svg><use xlink:href="#arrow-right"></use></svg>
  393. </button>
  394. </div>
  395. <label class="newsletter-checkbox">
  396. <input name="newsletter-agreement" type="checkbox">
  397. <span class="checkmark"></span>
  398. <span class="checkbox-text">I agree to the <a href="privacy-policy.html">Privacy Policy</a></span>
  399. </label>
  400. </form>
  401. <!-- Copyright -->
  402. <div class="footer-copyright"
  403. data-aos="fade-up"
  404. data-aos-delay="500">
  405. <p>© 2026 <a target="_blank" href="https://www.mobanwang.com/" title="网站模板">网站模板</a></p>
  406. </div>
  407. </div>
  408. </div>
  409. </div>
  410. </div>
  411. </footer>
  412. <!-- Scroll to Top Button -->
  413. <button class="scroll-to-top" id="scrollToTop" aria-label="Scroll to top">
  414. <svg viewBox="0 0 24 24">
  415. <path d="M7 14l5-5 5 5z"/>
  416. </svg>
  417. </button>
  418. <!-- JavaScript -->
  419. <script src="assets/lib/aos/aos.js"></script>
  420. <script src="assets/js/auto-progress-bar.js"></script>
  421. <script src="assets/js/custom-isotope.js"></script>
  422. <script src="assets/js/universal-slider.js"></script>
  423. <script src="assets/js/main-01.js"></script>
  424. </body>
  425. </html>