API tools faq
paste
Advertisement
dsgregfdhgfhjufdgh

glm 4

dsgregfdhgfhjufdgh
May 4th, 2025
55
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 47.73 KB | None | 0 0
raw download clone embed print report
  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>Steve's PC Repair</title>
  7. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  8. <style>
  9. :root {
  10. --primary: #2563eb;
  11. --primary-dark: #1d4ed8;
  12. --secondary: #10b981;
  13. --dark: #1e293b;
  14. --light: #f8fafc;
  15. --gray: #64748b;
  16. --gray-light: #e2e8f0;
  17. }
  18.  
  19. * {
  20. margin: 0;
  21. padding: 0;
  22. box-sizing: border-box;
  23. font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  24. }
  25.  
  26. body {
  27. background-color: var(--light);
  28. color: var(--dark);
  29. line-height: 1.6;
  30. }
  31.  
  32. .container {
  33. width: 100%;
  34. max-width: 1200px;
  35. margin: 0 auto;
  36. padding: 0 20px;
  37. }
  38.  
  39. /* Header Styles */
  40. header {
  41. background-color: white;
  42. box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  43. position: fixed;
  44. width: 100%;
  45. top: 0;
  46. z-index: 1000;
  47. }
  48.  
  49. .header-container {
  50. display: flex;
  51. justify-content: space-between;
  52. align-items: center;
  53. padding: 15px 0;
  54. }
  55.  
  56. .logo {
  57. display: flex;
  58. align-items: center;
  59. gap: 10px;
  60. text-decoration: none;
  61. color: var(--dark);
  62. }
  63.  
  64. .logo i {
  65. font-size: 24px;
  66. color: var(--primary);
  67. }
  68.  
  69. .logo h1 {
  70. font-size: 24px;
  71. font-weight: 700;
  72. }
  73.  
  74. nav ul {
  75. display: flex;
  76. list-style: none;
  77. gap: 30px;
  78. }
  79.  
  80. nav a {
  81. text-decoration: none;
  82. color: var(--dark);
  83. font-weight: 500;
  84. transition: color 0.3s;
  85. position: relative;
  86. }
  87.  
  88. nav a:hover {
  89. color: var(--primary);
  90. }
  91.  
  92. nav a::after {
  93. content: '';
  94. position: absolute;
  95. width: 0;
  96. height: 2px;
  97. bottom: -5px;
  98. left: 0;
  99. background-color: var(--primary);
  100. transition: width 0.3s;
  101. }
  102.  
  103. nav a:hover::after {
  104. width: 100%;
  105. }
  106.  
  107. .mobile-menu-btn {
  108. display: none;
  109. background: none;
  110. border: none;
  111. font-size: 24px;
  112. cursor: pointer;
  113. color: var(--dark);
  114. }
  115.  
  116. /* Hero Section */
  117. .hero {
  118. background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('https://picsum.photos/seed/pcrepair/1600/800.jpg');
  119. background-size: cover;
  120. background-position: center;
  121. height: 100vh;
  122. display: flex;
  123. align-items: center;
  124. color: white;
  125. padding-top: 80px;
  126. }
  127.  
  128. .hero-content {
  129. max-width: 600px;
  130. }
  131.  
  132. .hero h2 {
  133. font-size: 48px;
  134. margin-bottom: 20px;
  135. line-height: 1.2;
  136. }
  137.  
  138. .hero p {
  139. font-size: 18px;
  140. margin-bottom: 30px;
  141. }
  142.  
  143. .btn {
  144. display: inline-block;
  145. background-color: var(--primary);
  146. color: white;
  147. padding: 12px 30px;
  148. border-radius: 5px;
  149. text-decoration: none;
  150. font-weight: 600;
  151. transition: all 0.3s;
  152. border: none;
  153. cursor: pointer;
  154. }
  155.  
  156. .btn:hover {
  157. background-color: var(--primary-dark);
  158. transform: translateY(-3px);
  159. box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
  160. }
  161.  
  162. .btn-secondary {
  163. background-color: transparent;
  164. border: 2px solid white;
  165. margin-left: 15px;
  166. }
  167.  
  168. .btn-secondary:hover {
  169. background-color: white;
  170. color: var(--dark);
  171. }
  172.  
  173. /* Services Section */
  174. .services {
  175. padding: 100px 0;
  176. }
  177.  
  178. .section-header {
  179. text-align: center;
  180. margin-bottom: 60px;
  181. }
  182.  
  183. .section-header h2 {
  184. font-size: 36px;
  185. color: var(--dark);
  186. position: relative;
  187. display: inline-block;
  188. margin-bottom: 15px;
  189. }
  190.  
  191. .section-header h2::after {
  192. content: '';
  193. position: absolute;
  194. width: 60px;
  195. height: 3px;
  196. background-color: var(--primary);
  197. bottom: -10px;
  198. left: 50%;
  199. transform: translateX(-50%);
  200. }
  201.  
  202. .section-header p {
  203. color: var(--gray);
  204. font-size: 18px;
  205. max-width: 700px;
  206. margin: 0 auto;
  207. }
  208.  
  209. .services-grid {
  210. display: grid;
  211. grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  212. gap: 30px;
  213. }
  214.  
  215. .service-card {
  216. background-color: white;
  217. border-radius: 10px;
  218. overflow: hidden;
  219. box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
  220. transition: transform 0.3s, box-shadow 0.3s;
  221. }
  222.  
  223. .service-card:hover {
  224. transform: translateY(-10px);
  225. box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
  226. }
  227.  
  228. .service-img {
  229. height: 200px;
  230. overflow: hidden;
  231. }
  232.  
  233. .service-img img {
  234. width: 100%;
  235. height: 100%;
  236. object-fit: cover;
  237. transition: transform 0.5s;
  238. }
  239.  
  240. .service-card:hover .service-img img {
  241. transform: scale(1.1);
  242. }
  243.  
  244. .service-content {
  245. padding: 25px;
  246. }
  247.  
  248. .service-content h3 {
  249. font-size: 22px;
  250. margin-bottom: 15px;
  251. color: var(--dark);
  252. }
  253.  
  254. .service-content p {
  255. color: var(--gray);
  256. margin-bottom: 20px;
  257. }
  258.  
  259. .service-icon {
  260. display: inline-flex;
  261. align-items: center;
  262. color: var(--primary);
  263. font-size: 18px;
  264. margin-right: 5px;
  265. }
  266.  
  267. .service-price {
  268. font-weight: 700;
  269. color: var(--primary);
  270. font-size: 20px;
  271. }
  272.  
  273. /* About Section */
  274. .about {
  275. padding: 100px 0;
  276. background-color: #f1f5f9;
  277. }
  278.  
  279. .about-content {
  280. display: grid;
  281. grid-template-columns: 1fr 1fr;
  282. gap: 50px;
  283. align-items: center;
  284. }
  285.  
  286. .about-img {
  287. border-radius: 10px;
  288. overflow: hidden;
  289. box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  290. }
  291.  
  292. .about-img img {
  293. width: 100%;
  294. height: auto;
  295. display: block;
  296. }
  297.  
  298. .about-text h2 {
  299. font-size: 36px;
  300. margin-bottom: 20px;
  301. }
  302.  
  303. .about-text p {
  304. margin-bottom: 20px;
  305. color: var(--gray);
  306. }
  307.  
  308. .about-text ul {
  309. margin-bottom: 25px;
  310. }
  311.  
  312. .about-text li {
  313. margin-bottom: 10px;
  314. color: var(--gray);
  315. }
  316.  
  317. .about-text li i {
  318. color: var(--primary);
  319. margin-right: 10px;
  320. }
  321.  
  322. /* Testimonials Section */
  323. .testimonials {
  324. padding: 100px 0;
  325. }
  326.  
  327. .testimonial-slider {
  328. max-width: 800px;
  329. margin: 0 auto;
  330. position: relative;
  331. overflow: hidden;
  332. }
  333.  
  334. .testimonial-track {
  335. display: flex;
  336. transition: transform 0.5s ease;
  337. }
  338.  
  339. .testimonial-slide {
  340. min-width: 100%;
  341. padding: 30px;
  342. }
  343.  
  344. .testimonial-card {
  345. background-color: white;
  346. border-radius: 10px;
  347. padding: 40px;
  348. box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
  349. }
  350.  
  351. .testimonial-header {
  352. display: flex;
  353. align-items: center;
  354. margin-bottom: 25px;
  355. }
  356.  
  357. .testimonial-avatar {
  358. width: 60px;
  359. height: 60px;
  360. border-radius: 50%;
  361. overflow: hidden;
  362. margin-right: 15px;
  363. }
  364.  
  365. .testimonial-avatar img {
  366. width: 100%;
  367. height: 100%;
  368. object-fit: cover;
  369. }
  370.  
  371. .testimonial-author h4 {
  372. font-size: 18px;
  373. margin-bottom: 5px;
  374. }
  375.  
  376. .testimonial-author p {
  377. color: var(--gray);
  378. font-size: 14px;
  379. }
  380.  
  381. .testimonial-content {
  382. position: relative;
  383. margin-bottom: 20px;
  384. }
  385.  
  386. .testimonial-content::before {
  387. content: '"';
  388. font-size: 80px;
  389. position: absolute;
  390. top: -40px;
  391. left: -15px;
  392. color: var(--gray-light);
  393. font-family: Georgia, serif;
  394. }
  395.  
  396. .testimonial-rating {
  397. color: #fbbf24;
  398. }
  399.  
  400. .slider-controls {
  401. display: flex;
  402. justify-content: center;
  403. margin-top: 30px;
  404. gap: 15px;
  405. }
  406.  
  407. .slider-btn {
  408. width: 40px;
  409. height: 40px;
  410. border-radius: 50%;
  411. background-color: white;
  412. border: 1px solid var(--gray-light);
  413. display: flex;
  414. align-items: center;
  415. justify-content: center;
  416. cursor: pointer;
  417. transition: all 0.3s;
  418. }
  419.  
  420. .slider-btn:hover {
  421. background-color: var(--primary);
  422. color: white;
  423. border-color: var(--primary);
  424. }
  425.  
  426. .slider-dots {
  427. display: flex;
  428. justify-content: center;
  429. margin-top: 20px;
  430. gap: 8px;
  431. }
  432.  
  433. .slider-dot {
  434. width: 10px;
  435. height: 10px;
  436. border-radius: 50%;
  437. background-color: var(--gray-light);
  438. cursor: pointer;
  439. transition: background-color 0.3s;
  440. }
  441.  
  442. .slider-dot.active {
  443. background-color: var(--primary);
  444. }
  445.  
  446. /* Contact Section */
  447. .contact {
  448. padding: 100px 0;
  449. background-color: #f1f5f9;
  450. }
  451.  
  452. .contact-content {
  453. display: grid;
  454. grid-template-columns: 1fr 1fr;
  455. gap: 50px;
  456. }
  457.  
  458. .contact-info h2 {
  459. font-size: 36px;
  460. margin-bottom: 25px;
  461. }
  462.  
  463. .contact-info p {
  464. color: var(--gray);
  465. margin-bottom: 30px;
  466. }
  467.  
  468. .contact-details {
  469. margin-bottom: 30px;
  470. }
  471.  
  472. .contact-item {
  473. display: flex;
  474. align-items: flex-start;
  475. margin-bottom: 20px;
  476. }
  477.  
  478. .contact-icon {
  479. width: 50px;
  480. height: 50px;
  481. background-color: var(--primary);
  482. border-radius: 50%;
  483. display: flex;
  484. align-items: center;
  485. justify-content: center;
  486. color: white;
  487. font-size: 20px;
  488. margin-right: 15px;
  489. flex-shrink: 0;
  490. }
  491.  
  492. .contact-text h4 {
  493. font-size: 18px;
  494. margin-bottom: 5px;
  495. }
  496.  
  497. .contact-text p, .contact-text a {
  498. color: var(--gray);
  499. text-decoration: none;
  500. transition: color 0.3s;
  501. }
  502.  
  503. .contact-text a:hover {
  504. color: var(--primary);
  505. }
  506.  
  507. .business-hours {
  508. margin-top: 30px;
  509. background-color: white;
  510. padding: 25px;
  511. border-radius: 10px;
  512. box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
  513. }
  514.  
  515. .business-hours h4 {
  516. font-size: 18px;
  517. margin-bottom: 15px;
  518. color: var(--dark);
  519. }
  520.  
  521. .hours-list {
  522. list-style: none;
  523. }
  524.  
  525. .hours-list li {
  526. display: flex;
  527. justify-content: space-between;
  528. padding: 8px 0;
  529. border-bottom: 1px solid var(--gray-light);
  530. }
  531.  
  532. .hours-list li:last-child {
  533. border-bottom: none;
  534. }
  535.  
  536. .hours-list span:first-child {
  537. color: var(--dark);
  538. }
  539.  
  540. .hours-list span:last-child {
  541. color: var(--gray);
  542. }
  543.  
  544. .contact-form {
  545. background-color: white;
  546. padding: 40px;
  547. border-radius: 10px;
  548. box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
  549. }
  550.  
  551. .form-group {
  552. margin-bottom: 20px;
  553. }
  554.  
  555. .form-group label {
  556. display: block;
  557. margin-bottom: 8px;
  558. font-weight: 500;
  559. color: var(--dark);
  560. }
  561.  
  562. .form-control {
  563. width: 100%;
  564. padding: 12px 15px;
  565. border: 1px solid var(--gray-light);
  566. border-radius: 5px;
  567. font-size: 16px;
  568. transition: border-color 0.3s;
  569. }
  570.  
  571. .form-control:focus {
  572. outline: none;
  573. border-color: var(--primary);
  574. }
  575.  
  576. textarea.form-control {
  577. min-height: 150px;
  578. resize: vertical;
  579. }
  580.  
  581. /* Footer */
  582. footer {
  583. background-color: var(--dark);
  584. color: white;
  585. padding: 70px 0 20px;
  586. }
  587.  
  588. .footer-content {
  589. display: grid;
  590. grid-template-columns: 2fr 1fr 1fr 1fr;
  591. gap: 30px;
  592. margin-bottom: 50px;
  593. }
  594.  
  595. .footer-logo {
  596. margin-bottom: 20px;
  597. }
  598.  
  599. .footer-logo h2 {
  600. font-size: 24px;
  601. display: flex;
  602. align-items: center;
  603. gap: 10px;
  604. }
  605.  
  606. .footer-logo i {
  607. color: var(--primary);
  608. }
  609.  
  610. .footer-about p {
  611. color: #cbd5e1;
  612. margin-bottom: 25px;
  613. }
  614.  
  615. .social-links {
  616. display: flex;
  617. gap: 15px;
  618. }
  619.  
  620. .social-link {
  621. width: 40px;
  622. height: 40px;
  623. border-radius: 50%;
  624. background-color: rgba(255, 255, 255, 0.1);
  625. display: flex;
  626. align-items: center;
  627. justify-content: center;
  628. color: white;
  629. text-decoration: none;
  630. transition: background-color 0.3s;
  631. }
  632.  
  633. .social-link:hover {
  634. background-color: var(--primary);
  635. }
  636.  
  637. .footer-links h3, .footer-contact h3 {
  638. font-size: 18px;
  639. margin-bottom: 25px;
  640. position: relative;
  641. padding-bottom: 10px;
  642. }
  643.  
  644. .footer-links h3::after, .footer-contact h3::after {
  645. content: '';
  646. position: absolute;
  647. width: 40px;
  648. height: 3px;
  649. background-color: var(--primary);
  650. bottom: 0;
  651. left: 0;
  652. }
  653.  
  654. .footer-links ul {
  655. list-style: none;
  656. }
  657.  
  658. .footer-links li {
  659. margin-bottom: 15px;
  660. }
  661.  
  662. .footer-links a {
  663. color: #cbd5e1;
  664. text-decoration: none;
  665. transition: color 0.3s;
  666. display: flex;
  667. align-items: center;
  668. }
  669.  
  670. .footer-links a i {
  671. margin-right: 10px;
  672. color: var(--primary);
  673. }
  674.  
  675. .footer-links a:hover {
  676. color: white;
  677. }
  678.  
  679. .footer-contact-item {
  680. display: flex;
  681. align-items: flex-start;
  682. margin-bottom: 20px;
  683. }
  684.  
  685. .footer-contact-icon {
  686. width: 40px;
  687. height: 40px;
  688. background-color: rgba(255, 255, 255, 0.1);
  689. border-radius: 50%;
  690. display: flex;
  691. align-items: center;
  692. justify-content: center;
  693. color: white;
  694. font-size: 18px;
  695. margin-right: 15px;
  696. flex-shrink: 0;
  697. }
  698.  
  699. .footer-contact-text a {
  700. color: #cbd5e1;
  701. text-decoration: none;
  702. transition: color 0.3s;
  703. }
  704.  
  705. .footer-contact-text a:hover {
  706. color: white;
  707. }
  708.  
  709. .footer-bottom {
  710. border-top: 1px solid rgba(255, 255, 255, 0.1);
  711. padding-top: 20px;
  712. text-align: center;
  713. color: #94a3b8;
  714. font-size: 14px;
  715. }
  716.  
  717. /* Modal */
  718. .modal {
  719. display: none;
  720. position: fixed;
  721. top: 0;
  722. left: 0;
  723. width: 100%;
  724. height: 100%;
  725. background-color: rgba(0, 0, 0, 0.7);
  726. z-index: 2000;
  727. align-items: center;
  728. justify-content: center;
  729. }
  730.  
  731. .modal-content {
  732. background-color: white;
  733. border-radius: 10px;
  734. max-width: 500px;
  735. width: 90%;
  736. padding: 30px;
  737. position: relative;
  738. animation: modalFadeIn 0.3s;
  739. }
  740.  
  741. @keyframes modalFadeIn {
  742. from {
  743. opacity: 0;
  744. transform: translateY(-50px);
  745. }
  746. to {
  747. opacity: 1;
  748. transform: translateY(0);
  749. }
  750. }
  751.  
  752. .modal-close {
  753. position: absolute;
  754. top: 15px;
  755. right: 15px;
  756. background: none;
  757. border: none;
  758. font-size: 24px;
  759. cursor: pointer;
  760. color: var(--gray);
  761. transition: color 0.3s;
  762. }
  763.  
  764. .modal-close:hover {
  765. color: var(--dark);
  766. }
  767.  
  768. .modal-header {
  769. margin-bottom: 20px;
  770. }
  771.  
  772. .modal-body {
  773. margin-bottom: 25px;
  774. }
  775.  
  776. .modal-footer {
  777. display: flex;
  778. justify-content: flex-end;
  779. }
  780.  
  781. /* Toast Notification */
  782. .toast {
  783. position: fixed;
  784. bottom: 30px;
  785. right: 30px;
  786. background-color: white;
  787. color: var(--dark);
  788. padding: 15px 25px;
  789. border-radius: 5px;
  790. box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
  791. display: flex;
  792. align-items: center;
  793. z-index: 2000;
  794. transform: translateY(100px);
  795. opacity: 0;
  796. transition: all 0.3s;
  797. }
  798.  
  799. .toast.show {
  800. transform: translateY(0);
  801. opacity: 1;
  802. }
  803.  
  804. .toast-icon {
  805. margin-right: 15px;
  806. font-size: 20px;
  807. color: var(--secondary);
  808. }
  809.  
  810. .toast-message {
  811. font-weight: 500;
  812. }
  813.  
  814. /* Responsive Styles */
  815. @media (max-width: 992px) {
  816. .about-content, .contact-content {
  817. grid-template-columns: 1fr;
  818. }
  819.  
  820. .footer-content {
  821. grid-template-columns: 1fr 1fr 1fr;
  822. }
  823.  
  824. .hero h2 {
  825. font-size: 42px;
  826. }
  827. }
  828.  
  829. @media (max-width: 768px) {
  830. .mobile-menu-btn {
  831. display: block;
  832. }
  833.  
  834. nav {
  835. position: fixed;
  836. top: 80px;
  837. left: 0;
  838. width: 100%;
  839. background-color: white;
  840. box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
  841. padding: 20px 0;
  842. transform: translateY(-150%);
  843. transition: transform 0.3s;
  844. z-index: 900;
  845. }
  846.  
  847. nav.active {
  848. transform: translateY(0);
  849. }
  850.  
  851. nav ul {
  852. flex-direction: column;
  853. gap: 15px;
  854. padding: 0 20px;
  855. }
  856.  
  857. .hero h2 {
  858. font-size: 36px;
  859. }
  860.  
  861. .section-header h2 {
  862. font-size: 30px;
  863. }
  864.  
  865. .footer-content {
  866. grid-template-columns: 1fr 1fr;
  867. }
  868.  
  869. .testimonials .section-header {
  870. text-align: center;
  871. }
  872. }
  873.  
  874. @media (max-width: 576px) {
  875. .footer-content {
  876. grid-template-columns: 1fr;
  877. }
  878.  
  879. .hero h2 {
  880. font-size: 30px;
  881. }
  882.  
  883. .btn {
  884. display: block;
  885. width: 100%;
  886. text-align: center;
  887. margin-bottom: 15px;
  888. }
  889.  
  890. .btn-secondary {
  891. margin-left: 0;
  892. }
  893. }
  894. </style>
  895. </head>
  896. <body>
  897. <!-- Header -->
  898. <header>
  899. <div class="container header-container">
  900. <a href="#" class="logo">
  901. <i class="fas fa-laptop-medical"></i>
  902. <h1>Steve's PC Repair</h1>
  903. </a>
  904.  
  905. <button class="mobile-menu-btn" id="mobileMenuBtn">
  906. <i class="fas fa-bars"></i>
  907. </button>
  908.  
  909. <nav id="mainNav">
  910. <ul>
  911. <li><a href="#home">Home</a></li>
  912. <li><a href="#services">Services</a></li>
  913. <li><a href="#about">About</a></li>
  914. <li><a href="#testimonials">Testimonials</a></li>
  915. <li><a href="#contact">Contact</a></li>
  916. </ul>
  917. </nav>
  918. </div>
  919. </header>
  920.  
  921. <!-- Hero Section -->
  922. <section class="hero" id="home">
  923. <div class="container">
  924. <div class="hero-content">
  925. <h2>Expert PC Repair Services for All Your Needs</h2>
  926. <p>Steve's PC Repair provides professional and reliable computer repair services to keep your technology running smoothly. From hardware repairs to software troubleshooting, we've got you covered.</p>
  927. <a href="#services" class="btn">Our Services</a>
  928. <a href="#contact" class="btn btn-secondary">Get a Quote</a>
  929. </div>
  930. </div>
  931. </section>
  932.  
  933. <!-- Services Section -->
  934. <section class="services" id="services">
  935. <div class="container">
  936. <div class="section-header">
  937. <h2>Our Services</h2>
  938. <p>Steve's PC Repair offers a wide range of services to keep your computers and devices running at their best.</p>
  939. </div>
  940.  
  941. <div class="services-grid">
  942. <div class="service-card">
  943. <div class="service-img">
  944. <img src="https://picsum.photos/seed/laptoprepair/600/400.jpg" alt="Laptop Repair">
  945. </div>
  946. <div class="service-content">
  947. <h3>Laptop Repair</h3>
  948. <p>From screen replacements to motherboard repairs, we can fix all laptop issues.</p>
  949. <div class="service-price">$79 - $299</div>
  950. </div>
  951. </div>
  952.  
  953. <div class="service-card">
  954. <div class="service-img">
  955. <img src="https://picsum.photos/seed/desktoprepair/600/400.jpg" alt="Desktop Repair">
  956. </div>
  957. <div class="service-content">
  958. <h3>Desktop Repair</h3>
  959. <p>Comprehensive desktop computer repair and optimization services.</p>
  960. <div class="service-price">$59 - $249</div>
  961. </div>
  962. </div>
  963.  
  964. <div class="service-card">
  965. <div class="service-img">
  966. <img src="https://picsum.photos/seed/virusremoval/600/400.jpg" alt="Virus Removal">
  967. </div>
  968. <div class="service-content">
  969. <h3>Virus & Malware Removal</h3>
  970. <p>Complete virus and malware removal to protect your data and privacy.</p>
  971. <div class="service-price">$89 - $149</div>
  972. </div>
  973. </div>
  974.  
  975. <div class="service-card">
  976. <div class="service-img">
  977. <img src="https://picsum.photos/seed/datarecovery/600/400.jpg" alt="Data Recovery">
  978. </div>
  979. <div class="service-content">
  980. <h3>Data Recovery</h3>
  981. <p>Recover lost or deleted files from hard drives, SSDs, and memory cards.</p>
  982. <div class="service-price">$99 - $399</div>
  983. </div>
  984. </div>
  985.  
  986. <div class="service-card">
  987. <div class="service-img">
  988. <img src="https://picsum.photos/seed/networksetup/600/400.jpg" alt="Network Setup">
  989. </div>
  990. <div class="service-content">
  991. <h3>Network Setup & Security</h3>
  992. <p>Professional network installation, configuration, and security services.</p>
  993. <div class="service-price">$129 - $399</div>
  994. </div>
  995. </div>
  996.  
  997. <div class="service-card">
  998. <div class="service-img">
  999. <img src="https://picsum.photos/seed/computerupgrade/600/400.jpg" alt="Computer Upgrade">
  1000. </div>
  1001. <div class="service-content">
  1002. <h3>Computer Upgrade</h3>
  1003. <p>Upgrade your computer's components to improve performance and longevity.</p>
  1004. <div class="service-price">$99 - $599</div>
  1005. </div>
  1006. </div>
  1007. </div>
  1008. </div>
  1009. </section>
  1010.  
  1011. <!-- About Section -->
  1012. <section class="about" id="about">
  1013. <div class="container">
  1014. <div class="about-content">
  1015. <div class="about-img">
  1016. <img src="https://picsum.photos/seed/stevepc/800/600.jpg" alt="Steve's PC Repair Shop">
  1017. </div>
  1018.  
  1019. <div class="about-text">
  1020. <h2>About Steve's PC Repair</h2>
  1021. <p>Founded in 2010, Steve's PC Repair has been serving the community with honest, reliable, and professional computer repair services. With over 15 years of experience in the IT field, Steve brings a wealth of knowledge and expertise to every repair job.</p>
  1022.  
  1023. <ul>
  1024. <li><i class="fas fa-check-circle"></i> Certified technicians with industry recognized qualifications</li>
  1025. <li><i class="fas fa-check-circle"></i> Over 15 years of experience in computer repair and IT support</li>
  1026. <li><i class="fas fa-check-circle"></i> Same-day service for urgent repairs</li>
  1027. <li><i class="fas fa-check-circle"></i> Free diagnostics and transparent pricing</li>
  1028. <li><i class="fas fa-check-circle"></i> Satisfaction guaranteed on all services</li>
  1029. </ul>
  1030.  
  1031. <p>At Steve's PC Repair, we believe in providing exceptional customer service and honest solutions. We take the time to explain the problem and recommend the best course of action, ensuring you understand every step of the process.</p>
  1032.  
  1033. <a href="#contact" class="btn">Contact Us</a>
  1034. </div>
  1035. </div>
  1036. </div>
  1037. </section>
  1038.  
  1039. <!-- Testimonials Section -->
  1040. <section class="testimonials" id="testimonials">
  1041. <div class="container">
  1042. <div class="section-header">
  1043. <h2>What Our Clients Say</h2>
  1044. <p>Read what our satisfied customers have to say about their experience with Steve's PC Repair.</p>
  1045. </div>
  1046.  
  1047. <div class="testimonial-slider">
  1048. <div class="testimonial-track" id="testimonialTrack">
  1049. <div class="testimonial-slide">
  1050. <div class="testimonial-card">
  1051. <div class="testimonial-header">
  1052. <div class="testimonial-avatar">
  1053. <img src="https://picsum.photos/seed/client1/200/200.jpg" alt="Client Avatar">
  1054. </div>
  1055. <div class="testimonial-author">
  1056. <h4>Sarah Johnson</h4>
  1057. <p>Small Business Owner</p>
  1058. </div>
  1059. </div>
  1060. <div class="testimonial-content">
  1061. <p>Steve's PC Repair saved my business when our entire network went down. They were able to diagnose and fix the issue within hours, and their pricing was reasonable. I couldn't be happier with their service!</p>
  1062. </div>
  1063. <div class="testimonial-rating">
  1064. <i class="fas fa-star"></i>
  1065. <i class="fas fa-star"></i>
  1066. <i class="fas fa-star"></i>
  1067. <i class="fas fa-star"></i>
  1068. <i class="fas fa-star"></i>
  1069. </div>
  1070. </div>
  1071. </div>
  1072.  
  1073. <div class="testimonial-slide">
  1074. <div class="testimonial-card">
  1075. <div class="testimonial-header">
  1076. <div class="testimonial-avatar">
  1077. <img src="https://picsum.photos/seed/client2/200/200.jpg" alt="Client Avatar">
  1078. </div>
  1079. <div class="testimonial-author">
  1080. <h4>Michael Thompson</h4>
  1081. <p>Student</p>
  1082. </div>
  1083. </div>
  1084. <div class="testimonial-content">
  1085. <p>My laptop crashed right before finals, and I was desperate. Steve not only fixed it quickly but also taught me how to prevent similar issues in the future. His expertise and patience are truly appreciated.</p>
  1086. </div>
  1087. <div class="testimonial-rating">
  1088. <i class="fas fa-star"></i>
  1089. <i class="fas fa-star"></i>
  1090. <i class="fas fa-star"></i>
  1091. <i class="fas fa-star"></i>
  1092. <i class="fas fa-star"></i>
  1093. </div>
  1094. </div>
  1095. </div>
  1096.  
  1097. <div class="testimonial-slide">
  1098. <div class="testimonial-card">
  1099. <div class="testimonial-header">
  1100. <div class="testimonial-avatar">
  1101. <img src="https://picsum.photos/seed/client3/200/200.jpg" alt="Client Avatar">
  1102. </div>
  1103. <div class="testimonial-author">
  1104. <h4>Emily Rodriguez</h4>
  1105. <p>Home User</p>
  1106. </div>
  1107. </div>
  1108. <div class="testimonial-content">
  1109. <p>I had a virus that several other tech services couldn't remove. Steve's PC Repair not only eliminated the virus but also secured my system to prevent future attacks. His prices were fair, and his service was exceptional.</p>
  1110. </div>
  1111. <div class="testimonial-rating">
  1112. <i class="fas fa-star"></i>
  1113. <i class="fas fa-star"></i>
  1114. <i class="fas fa-star"></i>
  1115. <i class="fas fa-star"></i>
  1116. <i class="fas fa-star-half-alt"></i>
  1117. </div>
  1118. </div>
  1119. </div>
  1120. </div>
  1121.  
  1122. <div class="slider-controls">
  1123. <button class="slider-btn" id="prevBtn">
  1124. <i class="fas fa-chevron-left"></i>
  1125. </button>
  1126. <button class="slider-btn" id="nextBtn">
  1127. <i class="fas fa-chevron-right"></i>
  1128. </button>
  1129. </div>
  1130.  
  1131. <div class="slider-dots" id="sliderDots">
  1132. <span class="slider-dot active" data-index="0"></span>
  1133. <span class="slider-dot" data-index="1"></span>
  1134. <span class="slider-dot" data-index="2"></span>
  1135. </div>
  1136. </div>
  1137. </div>
  1138. </section>
  1139.  
  1140. <!-- Contact Section -->
  1141. <section class="contact" id="contact">
  1142. <div class="container">
  1143. <div class="section-header">
  1144. <h2>Get In Touch</h2>
  1145. <p>Have a question or need to schedule a repair? Contact us today!</p>
  1146. </div>
  1147.  
  1148. <div class="contact-content">
  1149. <div class="contact-info">
  1150. <h2>Visit Us or Call Us</h2>
  1151. <p>We're here to help with all your computer repair needs. You can visit our shop, call us, or send us a message through the contact form.</p>
  1152.  
  1153. <div class="contact-details">
  1154. <div class="contact-item">
  1155. <div class="contact-icon">
  1156. <i class="fas fa-map-marker-alt"></i>
  1157. </div>
  1158. <div class="contact-text">
  1159. <h4>Our Location</h4>
  1160. <p>123 Tech Street, Digital City, CA 94103</p>
  1161. </div>
  1162. </div>
  1163.  
  1164. <div class="contact-item">
  1165. <div class="contact-icon">
  1166. <i class="fas fa-phone-alt"></i>
  1167. </div>
  1168. <div class="contact-text">
  1169. <h4>Phone</h4>
  1170. <a href="tel:+15551234567">(555) 123-4567</a>
  1171. </div>
  1172. </div>
  1173.  
  1174. <div class="contact-item">
  1175. <div class="contact-icon">
  1176. <i class="fas fa-envelope"></i>
  1177. </div>
  1178. <div class="contact-text">
  1179. <h4>Email</h4>
  1180. <a href="mailto:[email protected]">[email protected]</a>
  1181. </div>
  1182. </div>
  1183. </div>
  1184.  
  1185. <div class="business-hours">
  1186. <h4>Business Hours</h4>
  1187. <ul class="hours-list">
  1188. <li>
  1189. <span>Monday</span>
  1190. <span>9:00 AM - 6:00 PM</span>
  1191. </li>
  1192. <li>
  1193. <span>Tuesday</span>
  1194. <span>9:00 AM - 6:00 PM</span>
  1195. </li>
  1196. <li>
  1197. <span>Wednesday</span>
  1198. <span>9:00 AM - 6:00 PM</span>
  1199. </li>
  1200. <li>
  1201. <span>Thursday</span>
  1202. <span>9:00 AM - 6:00 PM</span>
  1203. </li>
  1204. <li>
  1205. <span>Friday</span>
  1206. <span>9:00 AM - 5:00 PM</span>
  1207. </li>
  1208. <li>
  1209. <span>Saturday</span>
  1210. <span>10:00 AM - 4:00 PM</span>
  1211. </li>
  1212. <li>
  1213. <span>Sunday</span>
  1214. <span>Closed</span>
  1215. </li>
  1216. </ul>
  1217. </div>
  1218. </div>
  1219.  
  1220. <div class="contact-form">
  1221. <form id="contactForm">
  1222. <div class="form-group">
  1223. <label for="name">Your Name</label>
  1224. <input type="text" id="name" class="form-control" required>
  1225. </div>
  1226.  
  1227. <div class="form-group">
  1228. <label for="email">Email Address</label>
  1229. <input type="email" id="email" class="form-control" required>
  1230. </div>
  1231.  
  1232. <div class="form-group">
  1233. <label for="phone">Phone Number</label>
  1234. <input type="tel" id="phone" class="form-control">
  1235. </div>
  1236.  
  1237. <div class="form-group">
  1238. <label for="service">Service Needed</label>
  1239. <select id="service" class="form-control" required>
  1240. <option value="">Select a service</option>
  1241. <option value="laptop-repair">Laptop Repair</option>
  1242. <option value="desktop-repair">Desktop Repair</option>
  1243. <option value="virus-removal">Virus & Malware Removal</option>
  1244. <option value="data-recovery">Data Recovery</option>
  1245. <option value="network-setup">Network Setup & Security</option>
  1246. <option value="computer-upgrade">Computer Upgrade</option>
  1247. <option value="other">Other</option>
  1248. </select>
  1249. </div>
  1250.  
  1251. <div class="form-group">
  1252. <label for="message">Your Message</label>
  1253. <textarea id="message" class="form-control" rows="5" required></textarea>
  1254. </div>
  1255.  
  1256. <button type="submit" class="btn">Send Message</button>
  1257. </form>
  1258. </div>
  1259. </div>
  1260. </div>
  1261. </section>
  1262.  
  1263. <!-- Footer -->
  1264. <footer>
  1265. <div class="container">
  1266. <div class="footer-content">
  1267. <div class="footer-about">
  1268. <div class="footer-logo">
  1269. <h2>
  1270. <i class="fas fa-laptop-medical"></i>
  1271. Steve's PC Repair
  1272. </h2>
  1273. </div>
  1274. <p>Providing expert computer repair and IT services since 2010. Our mission is to deliver reliable, affordable, and professional computer repair services to our community.</p>
  1275. <div class="social-links">
  1276. <a href="#" class="social-link">
  1277. <i class="fab fa-facebook-f"></i>
  1278. </a>
  1279. <a href="#" class="social-link">
  1280. <i class="fab fa-twitter"></i>
  1281. </a>
  1282. <a href="#" class="social-link">
  1283. <i class="fab fa-instagram"></i>
  1284. </a>
  1285. <a href="#" class="social-link">
  1286. <i class="fab fa-youtube"></i>
  1287. </a>
  1288. </div>
  1289. </div>
  1290.  
  1291. <div class="footer-links">
  1292. <h3>Quick Links</h3>
  1293. <ul>
  1294. <li><a href="#home"><i class="fas fa-chevron-right"></i> Home</a></li>
  1295. <li><a href="#services"><i class="fas fa-chevron-right"></i> Services</a></li>
  1296. <li><a href="#about"><i class="fas fa-chevron-right"></i> About Us</a></li>
  1297. <li><a href="#testimonials"><i class="fas fa-chevron-right"></i> Testimonials</a></li>
  1298. <li><a href="#contact"><i class="fas fa-chevron-right"></i> Contact</a></li>
  1299. </ul>
  1300. </div>
  1301.  
  1302. <div class="footer-links">
  1303. <h3>Services</h3>
  1304. <ul>
  1305. <li><a href="#"><i class="fas fa-chevron-right"></i> Laptop Repair</a></li>
  1306. <li><a href="#"><i class="fas fa-chevron-right"></i> Desktop Repair</a></li>
  1307. <li><a href="#"><i class="fas fa-chevron-right"></i> Virus & Malware Removal</a></li>
  1308. <li><a href="#"><i class="fas fa-chevron-right"></i> Data Recovery</a></li>
  1309. <li><a href="#"><i class="fas fa-chevron-right"></i> Network Setup</a></li>
  1310. <li><a href="#"><i class="fas fa-chevron-right"></i> Computer Upgrade</a></li>
  1311. </ul>
  1312. </div>
  1313.  
  1314. <div class="footer-contact">
  1315. <h3>Contact Us</h3>
  1316. <div class="footer-contact-item">
  1317. <div class="footer-contact-icon">
  1318. <i class="fas fa-map-marker-alt"></i>
  1319. </div>
  1320. <div class="footer-contact-text">
  1321. <a href="#">123 Tech Street, Digital City, CA 94103</a>
  1322. </div>
  1323. </div>
  1324.  
  1325. <div class="footer-contact-item">
  1326. <div class="footer-contact-icon">
  1327. <i class="fas fa-phone-alt"></i>
  1328. </div>
  1329. <div class="footer-contact-text">
  1330. <a href="tel:+15551234567">(555) 123-4567</a>
  1331. </div>
  1332. </div>
  1333.  
  1334. <div class="footer-contact-item">
  1335. <div class="footer-contact-icon">
  1336. <i class="fas fa-envelope"></i>
  1337. </div>
  1338. <div class="footer-contact-text">
  1339. <a href="mailto:[email protected]">[email protected]</a>
  1340. </div>
  1341. </div>
  1342. </div>
  1343. </div>
  1344.  
  1345. <div class="footer-bottom">
  1346. <p>&copy; 2023 Steve's PC Repair. All Rights Reserved.</p>
  1347. </div>
  1348. </div>
  1349. </footer>
  1350.  
  1351. <!-- Toast Notification -->
  1352. <div class="toast" id="toast">
  1353. <div class="toast-icon">
  1354. <i class="fas fa-check-circle"></i>
  1355. </div>
  1356. <div class="toast-message">Message sent successfully!</div>
  1357. </div>
  1358.  
  1359. <script>
  1360. // Mobile Menu Toggle
  1361. const mobileMenuBtn = document.getElementById('mobileMenuBtn');
  1362. const mainNav = document.getElementById('mainNav');
  1363.  
  1364. mobileMenuBtn.addEventListener('click', () => {
  1365. mainNav.classList.toggle('active');
  1366. mobileMenuBtn.innerHTML = mainNav.classList.contains('active')
  1367. ? '<i class="fas fa-times"></i>'
  1368. : '<i class="fas fa-bars"></i>';
  1369. });
  1370.  
  1371. // Smooth Scrolling for Anchor Links
  1372. document.querySelectorAll('a[href^="#"]').forEach(anchor => {
  1373. anchor.addEventListener('click', function (e) {
  1374. e.preventDefault();
  1375.  
  1376. const targetId = this.getAttribute('href');
  1377. if (targetId === '#') return;
  1378.  
  1379. const targetElement = document.querySelector(targetId);
  1380. if (targetElement) {
  1381. window.scrollTo({
  1382. top: targetElement.offsetTop - 80,
  1383. behavior: 'smooth'
  1384. });
  1385.  
  1386. // Close mobile menu if open
  1387. if (mainNav.classList.contains('active')) {
  1388. mainNav.classList.remove('active');
  1389. mobileMenuBtn.innerHTML = '<i class="fas fa-bars"></i>';
  1390. }
  1391. }
  1392. });
  1393. });
  1394.  
  1395. // Testimonial Slider
  1396. const testimonialTrack = document.getElementById('testimonialTrack');
  1397. const prevBtn = document.getElementById('prevBtn');
  1398. const nextBtn = document.getElementById('nextBtn');
  1399. const sliderDots = document.getElementById('sliderDots');
  1400. let currentIndex = 0;
  1401. const slideCount = document.querySelectorAll('.testimonial-slide').length;
  1402.  
  1403. function updateSlider() {
  1404. testimonialTrack.style.transform = `translateX(-${currentIndex * 100}%)`;
  1405.  
  1406. // Update dots
  1407. document.querySelectorAll('.slider-dot').forEach((dot, index) => {
  1408. dot.classList.toggle('active', index === currentIndex);
  1409. });
  1410. }
  1411.  
  1412. prevBtn.addEventListener('click', () => {
  1413. currentIndex = (currentIndex - 1 + slideCount) % slideCount;
  1414. updateSlider();
  1415. });
  1416.  
  1417. nextBtn.addEventListener('click', () => {
  1418. currentIndex = (currentIndex + 1) % slideCount;
  1419. updateSlider();
  1420. });
  1421.  
  1422. // Dot navigation
  1423. sliderDots.addEventListener('click', (e) => {
  1424. if (e.target.classList.contains('slider-dot')) {
  1425. currentIndex = parseInt(e.target.dataset.index);
  1426. updateSlider();
  1427. }
  1428. });
  1429.  
  1430. // Auto slide every 5 seconds
  1431. setInterval(() => {
  1432. currentIndex = (currentIndex + 1) % slideCount;
  1433. updateSlider();
  1434. }, 5000);
  1435.  
  1436. // Contact Form Submission
  1437. const contactForm = document.getElementById('contactForm');
  1438. const toast = document.getElementById('toast');
  1439.  
  1440. contactForm.addEventListener('submit', function(e) {
  1441. e.preventDefault();
  1442.  
  1443. // In a real application, you would send the form data to a server here
  1444. // For this demo, we'll just show a success message
  1445.  
  1446. // Create a FormData object to collect form data
  1447. const formData = new FormData(this);
  1448.  
  1449. // Log form data to console (for demo purposes)
  1450. for (let [name, value] of formData) {
  1451. console.log(`${name}: ${value}`);
  1452. }
  1453.  
  1454. // Reset the form
  1455. contactForm.reset();
  1456.  
  1457. // Show success toast
  1458. toast.classList.add('show');
  1459.  
  1460. // Hide toast after 3 seconds
  1461. setTimeout(() => {
  1462. toast.classList.remove('show');
  1463. }, 3000);
  1464. });
  1465. </script>
  1466. </body>
  1467. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!