API tools faq
paste
Advertisement
dsgregfdhgfhjufdgh

Untitled

dsgregfdhgfhjufdgh
May 4th, 2025
172
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 51.73 KB | None | 0 0
raw download clone embed print report
  1. > Generate a beautiful website for Steve's pc repair using a single html script. /
  2. I'll create a beautiful and functional website for Steve's PC Repair using a single HTML file with embedded CSS and JavaScript.
  3.  
  4. ```html
  5. <!DOCTYPE html>
  6. <html lang="en">
  7. <head>
  8. <meta charset="UTF-8">
  9. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  10. <title>Steve's PC Repair</title>
  11. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  12. <style>
  13. :root {
  14. --primary: #3498db;
  15. --secondary: #2c3e50;
  16. --accent: #e74c3c;
  17. --light: #ecf0f1;
  18. --dark: #2c3e50;
  19. --success: #2ecc71;
  20. }
  21.  
  22. * {
  23. margin: 0;
  24. padding: 0;
  25. box-sizing: border-box;
  26. font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  27. }
  28.  
  29. body {
  30. background-color: #f5f7fa;
  31. color: var(--dark);
  32. line-height: 1.6;
  33. }
  34.  
  35. .container {
  36. max-width: 1200px;
  37. margin: 0 auto;
  38. padding: 0 20px;
  39. }
  40.  
  41. /* Header Styles */
  42. header {
  43. background-color: var(--secondary);
  44. color: white;
  45. padding: 20px 0;
  46. position: sticky;
  47. top: 0;
  48. z-index: 100;
  49. box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  50. }
  51.  
  52. .header-content {
  53. display: flex;
  54. justify-content: space-between;
  55. align-items: center;
  56. }
  57.  
  58. .logo {
  59. display: flex;
  60. align-items: center;
  61. gap: 10px;
  62. font-size: 1.5rem;
  63. font-weight: bold;
  64. }
  65.  
  66. .logo i {
  67. color: var(--primary);
  68. }
  69.  
  70. nav ul {
  71. display: flex;
  72. list-style: none;
  73. gap: 30px;
  74. }
  75.  
  76. nav a {
  77. color: white;
  78. text-decoration: none;
  79. font-weight: 500;
  80. transition: color 0.3s;
  81. position: relative;
  82. }
  83.  
  84. nav a:hover {
  85. color: var(--primary);
  86. }
  87.  
  88. nav a::after {
  89. content: '';
  90. position: absolute;
  91. width: 0;
  92. height: 2px;
  93. bottom: -5px;
  94. left: 0;
  95. background-color: var(--primary);
  96. transition: width 0.3s;
  97. }
  98.  
  99. nav a:hover::after {
  100. width: 100%;
  101. }
  102.  
  103. .mobile-menu-btn {
  104. display: none;
  105. background: none;
  106. border: none;
  107. color: white;
  108. font-size: 1.5rem;
  109. cursor: pointer;
  110. }
  111.  
  112. /* Hero Section */
  113. .hero {
  114. background: linear-gradient(135deg, var(--secondary), var(--primary));
  115. color: white;
  116. padding: 100px 0;
  117. text-align: center;
  118. }
  119.  
  120. .hero-content {
  121. max-width: 800px;
  122. margin: 0 auto;
  123. }
  124.  
  125. .hero h1 {
  126. font-size: 3rem;
  127. margin-bottom: 20px;
  128. animation: fadeInUp 1s ease-out;
  129. }
  130.  
  131. .hero p {
  132. font-size: 1.2rem;
  133. margin-bottom: 30px;
  134. animation: fadeInUp 1s ease-out 0.2s forwards;
  135. opacity: 0;
  136. }
  137.  
  138. .btn {
  139. display: inline-block;
  140. background-color: var(--accent);
  141. color: white;
  142. padding: 12px 30px;
  143. border-radius: 50px;
  144. text-decoration: none;
  145. font-weight: bold;
  146. transition: all 0.3s;
  147. border: none;
  148. cursor: pointer;
  149. animation: fadeInUp 1s ease-out 0.4s forwards;
  150. opacity: 0;
  151. }
  152.  
  153. .btn:hover {
  154. background-color: #c0392b;
  155. transform: translateY(-3px);
  156. box-shadow: 0 10px 20px rgba(0,0,0,0.1);
  157. }
  158.  
  159. .btn-outline {
  160. background-color: transparent;
  161. border: 2px solid white;
  162. margin-left: 15px;
  163. animation: fadeInUp 1s ease-out 0.6s forwards;
  164. opacity: 0;
  165. }
  166.  
  167. .btn-outline:hover {
  168. background-color: white;
  169. color: var(--secondary);
  170. }
  171.  
  172. /* Services Section */
  173. .services {
  174. padding: 80px 0;
  175. }
  176.  
  177. .section-title {
  178. text-align: center;
  179. margin-bottom: 50px;
  180. }
  181.  
  182. .section-title h2 {
  183. font-size: 2.5rem;
  184. color: var(--secondary);
  185. position: relative;
  186. display: inline-block;
  187. padding-bottom: 15px;
  188. }
  189.  
  190. .section-title h2::after {
  191. content: '';
  192. position: absolute;
  193. width: 70px;
  194. height: 3px;
  195. background-color: var(--primary);
  196. bottom: 0;
  197. left: 50%;
  198. transform: translateX(-50%);
  199. }
  200.  
  201. .services-grid {
  202. display: grid;
  203. grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  204. gap: 30px;
  205. margin-top: 40px;
  206. }
  207.  
  208. .service-card {
  209. background-color: white;
  210. border-radius: 10px;
  211. padding: 30px;
  212. text-align: center;
  213. box-shadow: 0 5px 15px rgba(0,0,0,0.05);
  214. transition: transform 0.3s, box-shadow 0.3s;
  215. }
  216.  
  217. .service-card:hover {
  218. transform: translateY(-10px);
  219. box-shadow: 0 15px 30px rgba(0,0,0,0.1);
  220. }
  221.  
  222. .service-icon {
  223. width: 70px;
  224. height: 70px;
  225. background-color: var(--light);
  226. border-radius: 50%;
  227. display: flex;
  228. align-items: center;
  229. justify-content: center;
  230. margin: 0 auto 20px;
  231. font-size: 1.8rem;
  232. color: var(--primary);
  233. }
  234.  
  235. .service-card h3 {
  236. margin-bottom: 15px;
  237. color: var(--secondary);
  238. }
  239.  
  240. .service-card p {
  241. color: #666;
  242. margin-bottom: 20px;
  243. }
  244.  
  245. /* About Section */
  246. .about {
  247. padding: 80px 0;
  248. background-color: #f9f9f9;
  249. }
  250.  
  251. .about-content {
  252. display: flex;
  253. align-items: center;
  254. gap: 50px;
  255. margin-top: 40px;
  256. }
  257.  
  258. .about-text {
  259. flex: 1;
  260. }
  261.  
  262. .about-text h2 {
  263. font-size: 2.2rem;
  264. margin-bottom: 20px;
  265. color: var(--secondary);
  266. }
  267.  
  268. .about-text p {
  269. margin-bottom: 20px;
  270. color: #555;
  271. }
  272.  
  273. .about-image {
  274. flex: 1;
  275. border-radius: 10px;
  276. overflow: hidden;
  277. box-shadow: 0 10px 30px rgba(0,0,0,0.1);
  278. }
  279.  
  280. .about-image img {
  281. width: 100%;
  282. height: auto;
  283. display: block;
  284. }
  285.  
  286. /* Testimonials Section */
  287. .testimonials {
  288. padding: 80px 0;
  289. }
  290.  
  291. .testimonial-slider {
  292. max-width: 800px;
  293. margin: 0 auto;
  294. position: relative;
  295. }
  296.  
  297. .testimonial {
  298. background-color: white;
  299. border-radius: 10px;
  300. padding: 30px;
  301. box-shadow: 0 5px 15px rgba(0,0,0,0.05);
  302. margin: 20px;
  303. text-align: center;
  304. }
  305.  
  306. .testimonial-content {
  307. font-style: italic;
  308. margin-bottom: 20px;
  309. color: #555;
  310. }
  311.  
  312. .testimonial-author {
  313. display: flex;
  314. align-items: center;
  315. justify-content: center;
  316. gap: 15px;
  317. }
  318.  
  319. .author-avatar {
  320. width: 60px;
  321. height: 60px;
  322. border-radius: 50%;
  323. overflow: hidden;
  324. }
  325.  
  326. .author-avatar img {
  327. width: 100%;
  328. height: 100%;
  329. object-fit: cover;
  330. }
  331.  
  332. .author-info h4 {
  333. margin-bottom: 5px;
  334. color: var(--secondary);
  335. }
  336.  
  337. .author-info p {
  338. color: #777;
  339. font-size: 0.9rem;
  340. }
  341.  
  342. .slider-controls {
  343. display: flex;
  344. justify-content: center;
  345. margin-top: 30px;
  346. gap: 15px;
  347. }
  348.  
  349. .slider-btn {
  350. background-color: var(--light);
  351. border: none;
  352. width: 40px;
  353. height: 40px;
  354. border-radius: 50%;
  355. display: flex;
  356. align-items: center;
  357. justify-content: center;
  358. cursor: pointer;
  359. transition: all 0.3s;
  360. color: var(--dark);
  361. }
  362.  
  363. .slider-btn:hover {
  364. background-color: var(--primary);
  365. color: white;
  366. }
  367.  
  368. .testimonial-indicators {
  369. display: flex;
  370. justify-content: center;
  371. margin-top: 20px;
  372. gap: 10px;
  373. }
  374.  
  375. .indicator {
  376. width: 10px;
  377. height: 10px;
  378. border-radius: 50%;
  379. background-color: #ddd;
  380. cursor: pointer;
  381. transition: all 0.3s;
  382. }
  383.  
  384. .indicator.active {
  385. background-color: var(--primary);
  386. width: 30px;
  387. border-radius: 5px;
  388. }
  389.  
  390. /* Contact Section */
  391. .contact {
  392. padding: 80px 0;
  393. }
  394.  
  395. .contact-container {
  396. display: grid;
  397. grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  398. gap: 40px;
  399. margin-top: 40px;
  400. }
  401.  
  402. .contact-info {
  403. background-color: white;
  404. border-radius: 10px;
  405. padding: 30px;
  406. box-shadow: 0 5px 15px rgba(0,0,0,0.05);
  407. }
  408.  
  409. .contact-info h3 {
  410. font-size: 1.5rem;
  411. margin-bottom: 20px;
  412. color: var(--secondary);
  413. }
  414.  
  415. .contact-item {
  416. display: flex;
  417. align-items: flex-start;
  418. margin-bottom: 20px;
  419. }
  420.  
  421. .contact-icon {
  422. width: 40px;
  423. height: 40px;
  424. background-color: var(--light);
  425. border-radius: 50%;
  426. display: flex;
  427. align-items: center;
  428. justify-content: center;
  429. margin-right: 15px;
  430. color: var(--primary);
  431. flex-shrink: 0;
  432. }
  433.  
  434. .contact-details h4 {
  435. margin-bottom: 5px;
  436. color: var(--secondary);
  437. }
  438.  
  439. .contact-details p, .contact-details a {
  440. color: #666;
  441. text-decoration: none;
  442. transition: color 0.3s;
  443. }
  444.  
  445. .contact-details a:hover {
  446. color: var(--primary);
  447. }
  448.  
  449. .business-hours {
  450. margin-top: 30px;
  451. }
  452.  
  453. .business-hours h4 {
  454. margin-bottom: 15px;
  455. color: var(--secondary);
  456. }
  457.  
  458. .hours-list {
  459. list-style: none;
  460. }
  461.  
  462. .hours-list li {
  463. display: flex;
  464. justify-content: space-between;
  465. padding: 8px 0;
  466. border-bottom: 1px dashed #eee;
  467. }
  468.  
  469. .hours-list li:last-child {
  470. border-bottom: none;
  471. }
  472.  
  473. .contact-form {
  474. background-color: white;
  475. border-radius: 10px;
  476. padding: 30px;
  477. box-shadow: 0 5px 15px rgba(0,0,0,0.05);
  478. }
  479.  
  480. .contact-form h3 {
  481. font-size: 1.5rem;
  482. margin-bottom: 20px;
  483. color: var(--secondary);
  484. }
  485.  
  486. .form-group {
  487. margin-bottom: 20px;
  488. }
  489.  
  490. .form-group label {
  491. display: block;
  492. margin-bottom: 8px;
  493. color: var(--secondary);
  494. font-weight: 500;
  495. }
  496.  
  497. .form-control {
  498. width: 100%;
  499. padding: 12px 15px;
  500. border: 1px solid #ddd;
  501. border-radius: 5px;
  502. font-size: 1rem;
  503. transition: border-color 0.3s;
  504. }
  505.  
  506. .form-control:focus {
  507. border-color: var(--primary);
  508. outline: none;
  509. }
  510.  
  511. textarea.form-control {
  512. min-height: 150px;
  513. resize: vertical;
  514. }
  515.  
  516. /* Footer */
  517. footer {
  518. background-color: var(--secondary);
  519. color: white;
  520. padding: 60px 0 20px;
  521. }
  522.  
  523. .footer-content {
  524. display: grid;
  525. grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  526. gap: 40px;
  527. margin-bottom: 40px;
  528. }
  529.  
  530. .footer-column h3 {
  531. font-size: 1.3rem;
  532. margin-bottom: 20px;
  533. position: relative;
  534. padding-bottom: 10px;
  535. }
  536.  
  537. .footer-column h3::after {
  538. content: '';
  539. position: absolute;
  540. width: 40px;
  541. height: 2px;
  542. background-color: var(--primary);
  543. bottom: 0;
  544. left: 0;
  545. }
  546.  
  547. .footer-column p {
  548. margin-bottom: 15px;
  549. color: #ccc;
  550. line-height: 1.8;
  551. }
  552.  
  553. .footer-links {
  554. list-style: none;
  555. }
  556.  
  557. .footer-links li {
  558. margin-bottom: 12px;
  559. }
  560.  
  561. .footer-links a {
  562. color: #ccc;
  563. text-decoration: none;
  564. transition: color 0.3s;
  565. display: flex;
  566. align-items: center;
  567. gap: 8px;
  568. }
  569.  
  570. .footer-links a:hover {
  571. color: var(--primary);
  572. }
  573.  
  574. .social-links {
  575. display: flex;
  576. gap: 15px;
  577. margin-top: 20px;
  578. }
  579.  
  580. .social-links a {
  581. display: flex;
  582. align-items: center;
  583. justify-content: center;
  584. width: 40px;
  585. height: 40px;
  586. background-color: rgba(255,255,255,0.1);
  587. border-radius: 50%;
  588. color: white;
  589. transition: all 0.3s;
  590. }
  591.  
  592. .social-links a:hover {
  593. background-color: var(--primary);
  594. transform: translateY(-3px);
  595. }
  596.  
  597. .footer-bottom {
  598. border-top: 1px solid rgba(255,255,255,0.1);
  599. padding-top: 20px;
  600. text-align: center;
  601. color: #aaa;
  602. font-size: 0.9rem;
  603. }
  604.  
  605. /* Modal */
  606. .modal {
  607. display: none;
  608. position: fixed;
  609. top: 0;
  610. left: 0;
  611. width: 100%;
  612. height: 100%;
  613. background-color: rgba(0,0,0,0.5);
  614. z-index: 1000;
  615. justify-content: center;
  616. align-items: center;
  617. }
  618.  
  619. .modal-content {
  620. background-color: white;
  621. border-radius: 10px;
  622. max-width: 500px;
  623. width: 90%;
  624. padding: 30px;
  625. position: relative;
  626. animation: modalFadeIn 0.3s;
  627. }
  628.  
  629. .close-modal {
  630. position: absolute;
  631. top: 15px;
  632. right: 15px;
  633. font-size: 1.5rem;
  634. background: none;
  635. border: none;
  636. cursor: pointer;
  637. color: #777;
  638. transition: color 0.3s;
  639. }
  640.  
  641. .close-modal:hover {
  642. color: var(--accent);
  643. }
  644.  
  645. .modal-content h3 {
  646. margin-bottom: 20px;
  647. color: var(--secondary);
  648. }
  649.  
  650. .success-message {
  651. display: none;
  652. background-color: var(--success);
  653. color: white;
  654. padding: 15px;
  655. border-radius: 5px;
  656. margin-bottom: 20px;
  657. text-align: center;
  658. }
  659.  
  660. /* Animations */
  661. @keyframes fadeInUp {
  662. from {
  663. opacity: 0;
  664. transform: translateY(20px);
  665. }
  666. to {
  667. opacity: 1;
  668. transform: translateY(0);
  669. }
  670. }
  671.  
  672. @keyframes modalFadeIn {
  673. from {
  674. opacity: 0;
  675. transform: translateY(-50px);
  676. }
  677. to {
  678. opacity: 1;
  679. transform: translateY(0);
  680. }
  681. }
  682.  
  683. /* Responsive Styles */
  684. @media (max-width: 992px) {
  685. .about-content {
  686. flex-direction: column;
  687. }
  688.  
  689. .about-image {
  690. margin-top: 30px;
  691. }
  692. }
  693.  
  694. @media (max-width: 768px) {
  695. .header-content {
  696. flex-direction: column;
  697. gap: 20px;
  698. }
  699.  
  700. nav ul {
  701. flex-direction: column;
  702. align-items: center;
  703. gap: 15px;
  704. margin-top: 15px;
  705. }
  706.  
  707. .mobile-menu-btn {
  708. display: block;
  709. }
  710.  
  711. .hero h1 {
  712. font-size: 2.5rem;
  713. }
  714.  
  715. .btn {
  716. padding: 12px 25px;
  717. }
  718.  
  719. .services-grid {
  720. grid-template-columns: 1fr;
  721. }
  722.  
  723. .section-title h2 {
  724. font-size: 2rem;
  725. }
  726. }
  727.  
  728. @media (max-width: 576px) {
  729. .hero h1 {
  730. font-size: 2rem;
  731. }
  732.  
  733. .btn {
  734. display: block;
  735. width: 100%;
  736. margin-bottom: 15px;
  737. }
  738.  
  739. .btn-outline {
  740. margin-left: 0;
  741. }
  742.  
  743. .contact-container {
  744. grid-template-columns: 1fr;
  745. }
  746.  
  747. .footer-content {
  748. grid-template-columns: 1fr;
  749. }
  750. }
  751. </style>
  752. </head>
  753. <body>
  754. <!-- Header -->
  755. <header>
  756. <div class="container header-content">
  757. <div class="logo">
  758. <i class="fas fa-laptop-medical"></i>
  759. <span>Steve's PC Repair</span>
  760. </div>
  761. <button class="mobile-menu-btn">
  762. <i class="fas fa-bars"></i>
  763. </button>
  764. <nav>
  765. <ul>
  766. <li><a href="#home">Home</a></li>
  767. <li><a href="#services">Services</a></li>
  768. <li><a href="#about">About</a></li>
  769. <li><a href="#testimonials">Testimonials</a></li>
  770. <li><a href="#contact">Contact</a></li>
  771. </ul>
  772. </nav>
  773. </div>
  774. </header>
  775.  
  776. <!-- Hero Section -->
  777. <section class="hero" id="home">
  778. <div class="container hero-content">
  779. <h1>Expert PC Repair Services</h1>
  780. <p>Fast, reliable and affordable solutions for all your computer needs. From hardware repair to software optimization, we've got you covered.</p>
  781. <a href="#services" class="btn">Our Services</a>
  782. <a href="#contact" class="btn btn-outline">Get a Quote</a>
  783. </div>
  784. </section>
  785.  
  786. <!-- Services Section -->
  787. <section class="services" id="services">
  788. <div class="container">
  789. <div class="section-title">
  790. <h2>Our Services</h2>
  791. </div>
  792. <div class="services-grid">
  793. <div class="service-card">
  794. <div class="service-icon">
  795. <i class="fas fa-laptop"></i>
  796. </div>
  797. <h3>Computer Repair</h3>
  798. <p>Hardware and software troubleshooting, virus removal, and system optimization for all types of computers.</p>
  799. <button class="btn" onclick="showServiceDetails('Computer Repair')">Learn More</button>
  800. </div>
  801. <div class="service-card">
  802. <div class="service-icon">
  803. <i class="fas fa-mobile-alt"></i>
  804. </div>
  805. <h3>Device Repair</h3>
  806. <p>Smartphone, tablet, and laptop repair services with genuine parts and warranty on all repairs.</p>
  807. <button class="btn" onclick="showServiceDetails('Device Repair')">Learn More</button>
  808. </div>
  809. <div class="service-card">
  810. <div class="service-icon">
  811. <i class="fas fa-network-wired"></i>
  812. </div>
  813. <h3>Network Setup</h3>
  814. <p>Professional network installation, configuration, and troubleshooting for homes and businesses.</p>
  815. <button class="btn" onclick="showServiceDetails('Network Setup')">Learn More</button>
  816. </div>
  817. <div class="service-card">
  818. <div class="service-icon">
  819. <i class="fas fa-shield-alt"></i>
  820. </div>
  821. <h3>Security Services</h3>
  822. <p>Comprehensive security solutions including virus removal, firewall setup, and data protection.</p>
  823. <button class="btn" onclick="showServiceDetails('Security Services')">Learn More</button>
  824. </div>
  825. <div class="service-card">
  826. <div class="service-icon">
  827. <i class="fas fa-database"></i>
  828. </div>
  829. <h3>Data Recovery</h3>
  830. <p>Recover lost or deleted files from hard drives, SSDs, USB drives, and memory cards.</p>
  831. <button class="btn" onclick="showServiceDetails('Data Recovery')">Learn More</button>
  832. </div>
  833. <div class="service-card">
  834. <div class="service-icon">
  835. <i class="fas fa-cloud"></i>
  836. </div>
  837. <h3>Cloud Services</h3>
  838. <p>Setup and management of cloud storage solutions for personal and business use.</p>
  839. <button class="btn" onclick="showServiceDetails('Cloud Services')">Learn More</button>
  840. </div>
  841. </div>
  842. </div>
  843. </section>
  844.  
  845. <!-- About Section -->
  846. <section class="about" id="about">
  847. <div class="container">
  848. <div class="section-title">
  849. <h2>About Us</h2>
  850. </div>
  851. <div class="about-content">
  852. <div class="about-text">
  853. <h2>Who We Are</h2>
  854. <p>Steve's PC Repair has been serving the community since 2010, providing high-quality computer repair and technology services. With over 15 years of experience in the industry, our founder Steve Johnson has built a reputation for excellence and reliability.</p>
  855. <p>We believe in providing honest, transparent service with no hidden fees. Our technicians are certified professionals who stay up-to-date with the latest technology trends and repair techniques.</p>
  856. <p>Whether you're a home user, small business, or large corporation, we have the expertise and resources to meet your technology needs. Our goal is to provide solutions that save you time, money, and frustration.</p>
  857. <button class="btn" onclick="showTeamModal()">Meet Our Team</button>
  858. </div>
  859. <div class="about-image">
  860. <img src="https://picsum.photos/seed/stevespcrepair/600/400.jpg" alt="Steve's PC Repair Shop">
  861. </div>
  862. </div>
  863. </div>
  864. </section>
  865.  
  866. <!-- Testimonials Section -->
  867. <section class="testimonials" id="testimonials">
  868. <div class="container">
  869. <div class="section-title">
  870. <h2>What Our Clients Say</h2>
  871. </div>
  872. <div class="testimonial-slider">
  873. <div class="testimonial" id="testimonial1">
  874. <div class="testimonial-content">
  875. <p>"My computer was completely unresponsive and I had important work files I couldn't afford to lose. Steve's PC Repair not only fixed my computer but also recovered all my data. They were professional, efficient, and very reasonably priced. I highly recommend their services!"</p>
  876. </div>
  877. <div class="testimonial-author">
  878. <div class="author-avatar">
  879. <img src="https://picsum.photos/seed/client1/60/60.jpg" alt="Client 1">
  880. </div>
  881. <div class="author-info">
  882. <h4>Sarah Thompson</h4>
  883. <p>Marketing Director</p>
  884. </div>
  885. </div>
  886. </div>
  887. <div class="testimonial" id="testimonial2" style="display: none;">
  888. <div class="testimonial-content">
  889. <p>"I've been taking my devices to Steve for years. He's honest, knowledgeable, and always takes the time to explain what's wrong and what needs to be done. I trust him with all my technology needs, from my work laptop to my personal phone."</p>
  890. </div>
  891. <div class="testimonial-author">
  892. <div class="author-avatar">
  893. <img src="https://picsum.photos/seed/client2/60/60.jpg" alt="Client 2">
  894. </div>
  895. <div class="author-info">
  896. <h4>Michael Rodriguez</h4>
  897. <p>Small Business Owner</p>
  898. </div>
  899. </div>
  900. </div>
  901. <div class="testimonial" id="testimonial3" style="display: none;">
  902. <div class="testimonial-content">
  903. <p>"Our company's network was down and we were losing thousands of dollars in productivity. Steve's team had us back up and running within hours. Their expertise in network troubleshooting saved us from a major disaster. We now have them on retainer for all our IT needs."</p>
  904. </div>
  905. <div class="testimonial-author">
  906. <div class="author-avatar">
  907. <img src="https://picsum.photos/seed/client3/60/60.jpg" alt="Client 3">
  908. </div>
  909. <div class="author-info">
  910. <h4>David Chen</h4>
  911. <p>IT Manager</p>
  912. </div>
  913. </div>
  914. </div>
  915. <div class="slider-controls">
  916. <button class="slider-btn prev-btn">
  917. <i class="fas fa-chevron-left"></i>
  918. </button>
  919. <button class="slider-btn next-btn">
  920. <i class="fas fa-chevron-right"></i>
  921. </button>
  922. </div>
  923. <div class="testimonial-indicators">
  924. <div class="indicator active" data-index="0"></div>
  925. <div class="indicator" data-index="1"></div>
  926. <div class="indicator" data-index="2"></div>
  927. </div>
  928. </div>
  929. </div>
  930. </section>
  931.  
  932. <!-- Contact Section -->
  933. <section class="contact" id="contact">
  934. <div class="container">
  935. <div class="section-title">
  936. <h2>Contact Us</h2>
  937. </div>
  938. <div class="contact-container">
  939. <div class="contact-info">
  940. <h3>Get in Touch</h3>
  941. <div class="contact-item">
  942. <div class="contact-icon">
  943. <i class="fas fa-map-marker-alt"></i>
  944. </div>
  945. <div class="contact-details">
  946. <h4>Address</h4>
  947. <p>123 Tech Street, Digital City, CA 94103</p>
  948. </div>
  949. </div>
  950. <div class="contact-item">
  951. <div class="contact-icon">
  952. <i class="fas fa-phone-alt"></i>
  953. </div>
  954. <div class="contact-details">
  955. <h4>Phone</h4>
  956. <a href="tel:+15551234567">(555) 123-4567</a>
  957. </div>
  958. </div>
  959. <div class="contact-item">
  960. <div class="contact-icon">
  961. <i class="fas fa-envelope"></i>
  962. </div>
  963. <div class="contact-details">
  964. <h4>Email</h4>
  965. <a href="mailto:[email protected]">[email protected]</a>
  966. </div>
  967. </div>
  968. <div class="business-hours">
  969. <h4>Business Hours</h4>
  970. <ul class="hours-list">
  971. <li><span>Monday - Friday</span> <span>9:00 AM - 6:00 PM</span></li>
  972. <li><span>Saturday</span> <span>10:00 AM - 4:00 PM</span></li>
  973. <li><span>Sunday</span> <span>Closed</span></li>
  974. </ul>
  975. </div>
  976. </div>
  977. <div class="contact-form">
  978. <h3>Send Us a Message</h3>
  979. <div class="success-message" id="formSuccess">
  980. Thank you for your message! We'll get back to you as soon as possible.
  981. </div>
  982. <form id="contactForm">
  983. <div class="form-group">
  984. <label for="name">Your Name</label>
  985. <input type="text" id="name" class="form-control" required>
  986. </div>
  987. <div class="form-group">
  988. <label for="email">Email Address</label>
  989. <input type="email" id="email" class="form-control" required>
  990. </div>
  991. <div class="form-group">
  992. <label for="phone">Phone Number</label>
  993. <input type="tel" id="phone" class="form-control">
  994. </div>
  995. <div class="form-group">
  996. <label for="service">Service Needed</label>
  997. <select id="service" class="form-control">
  998. <option value="">Select a service</option>
  999. <option value="Computer Repair">Computer Repair</option>
  1000. <option value="Device Repair">Device Repair</option>
  1001. <option value="Network Setup">Network Setup</option>
  1002. <option value="Security Services">Security Services</option>
  1003. <option value="Data Recovery">Data Recovery</option>
  1004. <option value="Cloud Services">Cloud Services</option>
  1005. <option value="Other">Other</option>
  1006. </select>
  1007. </div>
  1008. <div class="form-group">
  1009. <label for="message">Your Message</label>
  1010. <textarea id="message" class="form-control" required></textarea>
  1011. </div>
  1012. <button type="submit" class="btn">Send Message</button>
  1013. </form>
  1014. </div>
  1015. </div>
  1016. </div>
  1017. </section>
  1018.  
  1019. <!-- Footer -->
  1020. <footer>
  1021. <div class="container">
  1022. <div class="footer-content">
  1023. <div class="footer-column">
  1024. <h3>About Steve's PC Repair</h3>
  1025. <p>Providing expert computer repair and technology services since 2010. We're committed to delivering high-quality solutions at affordable prices.</p>
  1026. <div class="social-links">
  1027. <a href="#"><i class="fab fa-facebook-f"></i></a>
  1028. <a href="#"><i class="fab fa-twitter"></i></a>
  1029. <a href="#"><i class="fab fa-instagram"></i></a>
  1030. <a href="#"><i class="fab fa-linkedin-in"></i></a>
  1031. </div>
  1032. </div>
  1033. <div class="footer-column">
  1034. <h3>Quick Links</h3>
  1035. <ul class="footer-links">
  1036. <li><a href="#home"><i class="fas fa-chevron-right"></i> Home</a></li>
  1037. <li><a href="#services"><i class="fas fa-chevron-right"></i> Services</a></li>
  1038. <li><a href="#about"><i class="fas fa-chevron-right"></i> About Us</a></li>
  1039. <li><a href="#testimonials"><i class="fas fa-chevron-right"></i> Testimonials</a></li>
  1040. <li><a href="#contact"><i class="fas fa-chevron-right"></i> Contact</a></li>
  1041. </ul>
  1042. </div>
  1043. <div class="footer-column">
  1044. <h3>Services</h3>
  1045. <ul class="footer-links">
  1046. <li><a href="#"><i class="fas fa-chevron-right"></i> Computer Repair</a></li>
  1047. <li><a href="#"><i class="fas fa-chevron-right"></i> Device Repair</a></li>
  1048. <li><a href="#"><i class="fas fa-chevron-right"></i> Network Setup</a></li>
  1049. <li><a href="#"><i class="fas fa-chevron-right"></i> Security Services</a></li>
  1050. <li><a href="#"><i class="fas fa-chevron-right"></i> Data Recovery</a></li>
  1051. <li><a href="#"><i class="fas fa-chevron-right"></i> Cloud Services</a></li>
  1052. </ul>
  1053. </div>
  1054. <div class="footer-column">
  1055. <h3>Contact Info</h3>
  1056. <ul class="footer-links">
  1057. <li><a href="tel:+15551234567"><i class="fas fa-phone-alt"></i> (555) 123-4567</a></li>
  1058. <li><a href="mailto:[email protected]"><i class="fas fa-envelope"></i> [email protected]</a></li>
  1059. <li><a href="#"><i class="fas fa-map-marker-alt"></i> 123 Tech Street, Digital City</a></li>
  1060. </ul>
  1061. </div>
  1062. </div>
  1063. <div class="footer-bottom">
  1064. <p>&copy; 2023 Steve's PC Repair. All Rights Reserved.</p>
  1065. </div>
  1066. </div>
  1067. </footer>
  1068.  
  1069. <!-- Service Details Modal -->
  1070. <div class="modal" id="serviceModal">
  1071. <div class="modal-content">
  1072. <button class="close-modal">&times;</button>
  1073. <h3 id="modalTitle"></h3>
  1074. <div id="modalContent"></div>
  1075. </div>
  1076. </div>
  1077.  
  1078. <!-- Team Modal -->
  1079. <div class="modal" id="teamModal">
  1080. <div class="modal-content">
  1081. <button class="close-modal">&times;</button>
  1082. <h3>Meet Our Team</h3>
  1083. <div class="success-message" style="display: block;">
  1084. We're a dedicated team of technology professionals committed to providing the best service to our clients.
  1085. </div>
  1086. <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 20px;">
  1087. <div style="text-align: center;">
  1088. <div style="width: 120px; height: 120px; border-radius: 50%; overflow: hidden; margin: 0 auto 15px;">
  1089. <img src="https://picsum.photos/seed/steve/120/120.jpg" alt="Steve Johnson" style="width: 100%; height: 100%; object-fit: cover;">
  1090. </div>
  1091. <h4 style="margin-bottom: 5px;">Steve Johnson</h4>
  1092. <p style="color: #666; margin-bottom: 15px;">Founder & Lead Technician</p>
  1093. <p style="font-size: 0.9rem; color: #555;">15 years of experience in computer repair and IT support.</p>
  1094. </div>
  1095. <div style="text-align: center;">
  1096. <div style="width: 120px; height: 120px; border-radius: 50%; overflow: hidden; margin: 0 auto 15px;">
  1097. <img src="https://picsum.photos/seed/jessica/120/120.jpg" alt="Jessica Williams" style="width: 100%; height: 100%; object-fit: cover;">
  1098. </div>
  1099. <h4 style="margin-bottom: 5px;">Jessica Williams</h4>
  1100. <p style="color: #666; margin-bottom: 15px;">Senior Technician</p>
  1101. <p style="font-size: 0.9rem; color: #555;">Specializes in hardware repair and data recovery.</p>
  1102. </div>
  1103. <div style="text-align: center;">
  1104. <div style="width: 120px; height: 120px; border-radius: 50%; overflow: hidden; margin: 0 auto 15px;">
  1105. <img src="https://picsum.photos/seed/david/120/120.jpg" alt="David Chen" style="width: 100%; height: 100%; object-fit: cover;">
  1106. </div>
  1107. <h4 style="margin-bottom: 5px;">David Chen</h4>
  1108. <p style="color: #666; margin-bottom: 15px;">Network Specialist</p>
  1109. <p style="font-size: 0.9rem; color: #555;">Expert in network setup, security, and maintenance.</p>
  1110. </div>
  1111. <div style="text-align: center;">
  1112. <div style="width: 120px; height: 120px; border-radius: 50%; overflow: hidden; margin: 0 auto 15px;">
  1113. <img src="https://picsum.photos/seed/emily/120/120.jpg" alt="Emily Rodriguez" style="width: 100%; height: 100%; object-fit: cover;">
  1114. </div>
  1115. <h4 style="margin-bottom: 5px;">Emily Rodriguez</h4>
  1116. <p style="color: #666; margin-bottom: 15px;">Customer Service</p>
  1117. <p style="font-size: 0.9rem; color: #555;">Handles client communication and scheduling.</p>
  1118. </div>
  1119. </div>
  1120. </div>
  1121. </div>
  1122.  
  1123. <script>
  1124. // Service details content
  1125. const serviceDetails = {
  1126. 'Computer Repair': {
  1127. content: `
  1128. <p>Our comprehensive computer repair services include:</p>
  1129. <ul style="margin-left: 20px; margin-bottom: 20px;">
  1130. <li>Hardware diagnosis and repair</li>
  1131. <li>Software troubleshooting</li>
  1132. <li>Operating system installation and updates</li>
  1133. <li>Performance optimization</li>
  1134. <li>Memory and storage upgrades</li>
  1135. <li>Peripheral installation and configuration</li>
  1136. </ul>
  1137. <p>We work with all major brands including Dell, HP, Lenovo, Apple, and more. Whether you're experiencing slow performance, hardware failure, or software issues, our technicians have the expertise to diagnose and fix the problem efficiently.</p>
  1138. <p style="margin-top: 20px; font-weight: bold;">Average turnaround time: 24-48 hours</p>
  1139. `
  1140. },
  1141. 'Device Repair': {
  1142. content: `
  1143. <p>Our device repair services include:</p>
  1144. <ul style="margin-left: 20px; margin-bottom: 20px;">
  1145. <li>Laptop screen and keyboard replacement</li>
  1146. <li>Smartphone and tablet screen repairs</li>
  1147. <li>Battery replacements</li>
  1148. <li>Charger and port repairs</li>
  1149. <li>Water damage recovery</li>
  1150. <li>General device maintenance</li>
  1151. </ul>
  1152. <p>We use genuine parts for all repairs and offer a warranty on our work. Our technicians are trained to handle delicate electronic components with care and precision.</p>
  1153. <p style="margin-top: 20px; font-weight: bold;">Average turnaround time: 24-72 hours</p>
  1154. `
  1155. },
  1156. 'Network Setup': {
  1157. content: `
  1158. <p>Our network setup services include:</p>
  1159. <ul style="margin-left: 20px; margin-bottom: 20px;">
  1160. <li>Home and business network installation</li>
  1161. <li>Wireless network configuration</li>
  1162. <li>Router and modem setup</li>
  1163. <li>Network security implementation</li>
  1164. <li>Network troubleshooting and optimization</li>
  1165. <li>Device connectivity issues</li>
  1166. </ul>
  1167. <p>Whether you need a simple home network or a complex business infrastructure, our network specialists can design and implement a solution that meets your specific needs. We ensure secure, reliable, and high-performance networks.</p>
  1168. <p style="margin-top: 20px; font-weight: bold;">Service includes 30 days of remote support</p>
  1169. `
  1170. },
  1171. 'Security Services': {
  1172. content: `
  1173. <p>Our security services include:</p>
  1174. <ul style="margin-left: 20px; margin-bottom: 20px;">
  1175. <li>Comprehensive virus and malware removal</li>
  1176. <li>Antivirus and security software installation</li>
  1177. <li>Firewall setup and configuration</li>
  1178. <li>Security assessments and audits</li>
  1179. <li>Data protection solutions</li>
  1180. <li>Identity theft prevention</li>
  1181. </ul>
  1182. <p>We help protect your digital assets from threats with our proactive security services. Our technicians stay updated on the latest security threats and solutions to keep your systems safe.</p>
  1183. <p style="margin-top: 20px; font-weight: bold;">Includes 6 months of security monitoring</p>
  1184. `
  1185. },
  1186. 'Data Recovery': {
  1187. content: `
  1188. <p>Our data recovery services include:</p>
  1189. <ul style="margin-left: 20px; margin-bottom: 20px;">
  1190. <li>Hard drive and SSD data recovery</li>
  1191. <li>RAID array recovery</li>
  1192. <li>USB drive and memory card recovery</li>
  1193. <li>Deleted file restoration</li>
  1194. <li>Corrupted data recovery</li>
  1195. <li>Forensic data recovery</li>
  1196. </ul>
  1197. <p>We use state-of-the-art tools and techniques to recover lost data from damaged or malfunctioning storage devices. Our data recovery specialists work in a clean environment to maximize the chances of successful recovery.</p>
  1198. <p style="margin-top: 20px; font-weight: bold;">Free evaluation with no recovery, no fee policy</p>
  1199. `
  1200. },
  1201. 'Cloud Services': {
  1202. content: `
  1203. <p>Our cloud services include:</p>
  1204. <ul style="margin-left: 20px; margin-bottom: 20px;">
  1205. <li>Cloud storage setup and management</li>
  1206. <li>Cloud migration services</li>
  1207. <li>Cloud security implementation</li>
  1208. <li>Cloud-based software configuration</li>
  1209. <li>Remote backup solutions</li>
  1210. <li>Cloud training and support</li>
  1211. </ul>
  1212. <p>We help individuals and businesses leverage the power of cloud technology for better data management, accessibility, and security. Our cloud specialists ensure seamless integration and optimal performance.</p>
  1213. <p style="margin-top: 20px; font-weight: bold;">Includes 3 months of cloud management</p>
  1214. `
  1215. }
  1216. };
  1217.  
  1218. // Show service details in modal
  1219. function showServiceDetails(service) {
  1220. const modal = document.getElementById('serviceModal');
  1221. const modalTitle = document.getElementById('modalTitle');
  1222. const modalContent = document.getElementById('modalContent');
  1223.  
  1224. modalTitle.textContent = service;
  1225. modalContent.innerHTML = serviceDetails[service].content || 'Details about this service will be available soon.';
  1226.  
  1227. modal.style.display = 'flex';
  1228. }
  1229.  
  1230. // Show team modal
  1231. function showTeamModal() {
  1232. const modal = document.getElementById('teamModal');
  1233. modal.style.display = 'flex';
  1234. }
  1235.  
  1236. // Close modals
  1237. document.querySelectorAll('.close-modal').forEach(button => {
  1238. button.addEventListener('click', function() {
  1239. this.closest('.modal').style.display = 'none';
  1240. });
  1241. });
  1242.  
  1243. // Close modal when clicking outside
  1244. window.addEventListener('click', function(event) {
  1245. if (event.target.classList.contains('modal')) {
  1246. event.target.style.display = 'none';
  1247. }
  1248. });
  1249.  
  1250. // Testimonial slider
  1251. let currentTestimonial = 0;
  1252. const testimonials = [
  1253. document.getElementById('testimonial1'),
  1254. document.getElementById('testimonial2'),
  1255. document.getElementById('testimonial3')
  1256. ];
  1257. const indicators = document.querySelectorAll('.indicator');
  1258. const prevBtn = document.querySelector('.prev-btn');
  1259. const nextBtn = document.querySelector('.next-btn');
  1260.  
  1261. function showTestimonial(index) {
  1262. testimonials.forEach(testimonial => testimonial.style.display = 'none');
  1263. testimonials[index].style.display = 'block';
  1264.  
  1265. indicators.forEach(indicator => indicator.classList.remove('active'));
  1266. indicators[index].classList.add('active');
  1267.  
  1268. currentTestimonial = index;
  1269. }
  1270.  
  1271. prevBtn.addEventListener('click', function() {
  1272. let newIndex = currentTestimonial - 1;
  1273. if (newIndex < 0) newIndex = testimonials.length - 1;
  1274. showTestimonial(newIndex);
  1275. });
  1276.  
  1277. nextBtn.addEventListener('click', function() {
  1278. let newIndex = currentTestimonial + 1;
  1279. if (newIndex >= testimonials.length) newIndex = 0;
  1280. showTestimonial(newIndex);
  1281. });
  1282.  
  1283. indicators.forEach((indicator, index) => {
  1284. indicator.addEventListener('click', function() {
  1285. showTestimonial(index);
  1286. });
  1287. });
  1288.  
  1289. // Auto-rotate testimonials
  1290. setInterval(function() {
  1291. let newIndex = currentTestimonial + 1;
  1292. if (newIndex >= testimonials.length) newIndex = 0;
  1293. showTestimonial(newIndex);
  1294. }, 8000);
  1295.  
  1296. // Form submission
  1297. document.getElementById('contactForm').addEventListener('submit', function(e) {
  1298. e.preventDefault();
  1299.  
  1300. // In a real application, you would send the form data to a server here
  1301. // For this example, we'll just show the success message
  1302.  
  1303. const formSuccess = document.getElementById('formSuccess');
  1304. formSuccess.style.display = 'block';
  1305.  
  1306. // Reset form
  1307. this.reset();
  1308.  
  1309. // Hide success message after 5 seconds
  1310. setTimeout(function() {
  1311. formSuccess.style.display = 'none';
  1312. }, 5000);
  1313. });
  1314.  
  1315. // Smooth scrolling for navigation links
  1316. document.querySelectorAll('a[href^="#"]').forEach(anchor => {
  1317. anchor.addEventListener('click', function(e) {
  1318. e.preventDefault();
  1319.  
  1320. const targetId = this.getAttribute('href');
  1321. if (targetId === '#') return;
  1322.  
  1323. const targetElement = document.querySelector(targetId);
  1324. if (targetElement) {
  1325. window.scrollTo({
  1326. top: targetElement.offsetTop - 70,
  1327. behavior: 'smooth'
  1328. });
  1329. }
  1330. });
  1331. });
  1332.  
  1333. // Mobile menu toggle
  1334. const mobileMenuBtn = document.querySelector('.mobile-menu-btn');
  1335. const nav = document.querySelector('nav ul');
  1336.  
  1337. mobileMenuBtn.addEventListener('click', function() {
  1338. nav.style.display = nav.style.display === 'flex' ? 'none' : 'flex';
  1339. this.innerHTML = nav.style.display === 'flex' ? '<i class="fas fa-times"></i>' : '<i class="fas fa-bars"></i>';
  1340. });
  1341.  
  1342. // Close mobile menu when clicking outside
  1343. window.addEventListener('click', function(e) {
  1344. if (window.innerWidth <= 768 &&
  1345. nav.style.display === 'flex' &&
  1346. !nav.contains(e.target) &&
  1347. !mobileMenuBtn.contains(e.target) &&
  1348. !document.querySelector('.header-content').contains(e.target)) {
  1349. nav.style.display = 'none';
  1350. mobileMenuBtn.innerHTML = '<i class="fas fa-bars"></i>';
  1351. }
  1352. });
  1353.  
  1354. // Initialize the page
  1355. document.addEventListener('DOMContentLoaded', function() {
  1356. // Show the first testimonial
  1357. showTestimonial(0);
  1358.  
  1359. // Add animation to sections when they come into view
  1360. const sections = document.querySelectorAll('section');
  1361.  
  1362. const observer = new IntersectionObserver((entries) => {
  1363. entries.forEach(entry => {
  1364. if (entry.isIntersecting) {
  1365. entry.target.style.opacity = '1';
  1366. entry.target.style.transform = 'translateY(0)';
  1367. }
  1368. });
  1369. }, { threshold: 0.1 });
  1370.  
  1371. sections.forEach(section => {
  1372. section.style.opacity = '0';
  1373. section.style.transform = 'translateY(30px)';
  1374. section.style.transition = 'opacity 0.8s, transform 0.8s';
  1375. observer.observe(section);
  1376. });
  1377. });
  1378. </script>
  1379. </body>
  1380. </html>
  1381. ```
  1382.  
  1383. This website for Steve's PC Repair includes:
  1384.  
  1385. 1. **Modern Design Elements**:
  1386. - Clean, professional layout with a color scheme suitable for a tech repair business
  1387. - Responsive design that works on all device sizes
  1388. - Smooth animations and transitions for a polished user experience
  1389.  
  1390. 2. **Key Sections**:
  1391. - Hero section with call-to-action buttons
  1392. - Services section with detailed service cards
  1393. - About section with company information
  1394. - Testimonials section with a functional slider
  1395. - Contact section with contact information and a functional form
  1396. - Comprehensive footer with multiple navigation options
  1397.  
  1398. 3. **Interactive Features**:
  1399. - Modal windows for service details and team information
  1400. - Working testimonial slider with navigation controls
  1401. - Form validation and submission feedback
  1402. - Smooth scrolling navigation
  1403. - Mobile-responsive menu
  1404.  
  1405. 4. **Technical Features**:
  1406. - Embedded CSS and JavaScript in a single HTML file
  1407. - Responsive design using CSS Grid and Flexbox
  1408. - Modern CSS features like variables, transitions, and animations
  1409. - Intersection Observer API for scroll animations
  1410.  
  1411. The website is completely self-contained and ready to use. You can customize the content, colors, and images to match Steve's PC Repair's specific brand identity.
  1412.  
  1413. >
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!