index.html 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198
  1. <!DOCTYPE html>
  2. <html lang="ru">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>Рауф - Программист</title>
  7. <link rel="stylesheet" href="style.css">
  8. </head>
  9. <body>
  10. <header>
  11. <nav>
  12. <ul>
  13. <li><a href="#">Главная</a></li>
  14. <li><a href="#">Обо мне</a></li>
  15. <li><a href="#">Услуги</a></li>
  16. <li><a href="#">Портфолио</a></li>
  17. <li><a href="#">Отзывы</a></li>
  18. <li><a href="#">Блог</a></li>
  19. <li><a href="#">Контакты</a></li>
  20. </ul>
  21. </nav>
  22. </header>
  23. <main>
  24. <section class="hero">
  25. <h1>Рауф - Программист</h1>
  26. <p>Студент 2 курса колледжа информационных технологий, предлагающий широкий спектр услуг в области программирования и консультирования.</p>
  27. <a href="#" class="cta">Связаться со мной</a>
  28. </section>
  29. <section class="about">
  30. <h2>Обо мне</h2>
  31. <div class="about-content">
  32. <div class="about-text">
  33. <p>Меня зовут Рауф, и я являюсь студентом 2 курса колледжа информационных технологий. Я предлагаю широкий спектр услуг, включающих настройку и доработку различных конфигураций 1С, разработку отчетов, обработок и интеграций, а также создание приложений для автоматизации бизнес-процессов на C# и веб-приложений на заказ.</p>
  34. <p>Кроме того, я обладаю опытом работы с базами данных MySQL, включая проектирование, оптимизацию запросов и написание хранимых процедур. Я также могу предоставить консультации по эффективной работе с MySQL, от установки СУБД до решения конкретных задач с данными.</p>
  35. <p>За время учебы в колледже я успел поработать над несколькими интересными проектами, которые позволили мне приобрести ценный опыт. Я постоянно стремлюсь к саморазвитию и совершенствованию своих навыков, чтобы предоставлять качественные услуги своим клиентам.</p>
  36. </div>
  37. <div class="about-image">
  38. <img src="rauf.jpg" alt="Рауф, программист">
  39. </div>
  40. </div>
  41. </section>
  42. <section class="services">
  43. <h2>Мои услуги</h2>
  44. <div class="services-list">
  45. <div class="service-item">
  46. <h3>1С</h3>
  47. <p>Настройка и доработка различных конфигураций 1С, разработка отчетов, обработок и интеграций.</p>
  48. <a href="#" class="service-link">Подробнее</a>
  49. </div>
  50. <div class="service-item">
  51. <h3>C#</h3>
  52. <p>Создание desktop и web приложений для автоматизации бизнес-процессов.</p>
  53. <a href="#" class="service-link">Подробнее</a>
  54. </div>
  55. <div class="service-item">
  56. <h3>MySQL</h3>
  57. <p>Консультирование по эффективной работе с базами данных, от установки СУБД до решения конкретных задач.</p>
  58. <a href="#" class="service-link">Подробнее</a>
  59. </div>
  60. </div>
  61. </section>
  62. <section class="portfolio">
  63. <h2>Мое портфолио</h2>
  64. <div class="portfolio-items">
  65. <div class="portfolio-item">
  66. <img src="project1.jpg" alt="Проект 1">
  67. <h3>Проект 1</h3>
  68. <p>Описание проекта 1</p>
  69. <a href="#" class="portfolio-link">Подробнее</a>
  70. </div>
  71. <div class="portfolio-item">
  72. <img src="project2.jpg" alt="Проект 2">
  73. <h3>Проект 2</h3>
  74. <p>Описание проекта 2</p>
  75. <a href="#" class="portfolio-link">Подробнее</a>
  76. </div>
  77. <div class="portfolio-item">
  78. <img src="project3.jpg" alt="Проект 3">
  79. <h3>Проект 3</h3>
  80. <p>Описание проекта 3</p>
  81. <a href="#" class="portfolio-link">Подробнее</a>
  82. </div>
  83. </div>
  84. </section>
  85. <section class="testimonials">
  86. <h2>Отзывы</h2>
  87. <div class="testimonial-items">
  88. <div class="testimonial-item">
  89. <div class="testimonial-image">
  90. <img src="client1.jpg" alt="Клиент 1">
  91. </div>
  92. <div class="testimonial-content">
  93. <h3>Клиент 1</h3>
  94. <p>"Рауф выполнил все работы качественно и в срок. Я очень доволен результатом и рекомендую его как надежного специалиста."</p>
  95. </div>
  96. </div>
  97. <div class="testimonial-item">
  98. <div class="testimonial-image">
  99. <img src="client2.jpg" alt="Клиент 2">
  100. </div>
  101. <div class="testimonial-content">
  102. <h3>Клиент 2</h3>
  103. <p>"Рауф показал себя как компетентный и ответственный программист. Он быстро разобрался в нашей задаче и предложил эффективное решение."</p>
  104. </div>
  105. </div>
  106. <div class="testimonial-item">
  107. <div class="testimonial-image">
  108. <img src="client3.jpg" alt="Клиент 3">
  109. </div>
  110. <div class="testimonial-content">
  111. <h3>Клиент 3</h3>
  112. <p>"Я работаю с Рауфом уже несколько лет и всегда остаюсь доволен его работой. Он профессионал своего дела и отличный специалист."</p>
  113. </div>
  114. </div>
  115. </div>
  116. </section>
  117. <section class="blog">
  118. <h2>Статьи в моем блоге</h2>
  119. <div class="blog-posts">
  120. <div class="blog-post">
  121. <img src="blog-post1.jpg" alt="Блог-пост 1">
  122. <h3>Как оптимизировать базу данных 1С</h3>
  123. <p>В этой статье я поделюсь некоторыми практическими советами по оптимизации производительности баз данных в 1С...</p>
  124. <a href="#" class="blog-link">Читать далее</a>
  125. </div>
  126. <div class="blog-post">
  127. <img src="blog-post2.jpg" alt="Блог-пост 2">
  128. <h3>Обзор популярных фреймворков C#</h3>
  129. <p>Рассмотрим наиболее популярные фреймворки для C#, их особенности и области применения...</p>
  130. <a href="#" class="blog-link">Читать далее</a>
  131. </div>
  132. <div class="blog-post">
  133. <img src="blog-post3.jpg" alt="Блог-пост 3">
  134. <h3>Разработка интеграций 1С с внешними системами</h3>
  135. <p>В этой статье мы обсудим различные способы интеграции 1С с другими программными продуктами...</p>
  136. <a href="#" class="blog-link">Читать далее</a>
  137. </div>
  138. </div>
  139. </section>
  140. <section class="contact">
  141. <h2>Связаться со мной</h2>
  142. <form>
  143. <label for="name">Имя:</label>
  144. <input type="text" id="name" name="name" required>
  145. <label for="email">Email:</label>
  146. <input type="email" id="email" name="email" required>
  147. <label for="message">Сообщение:</label>
  148. <textarea id="message" name="message" required></textarea>
  149. <button type="submit">Отправить</button>
  150. </form>
  151. </section>
  152. </main>
  153. <footer>
  154. <div class="footer-content">
  155. <div class="footer-about">
  156. <h3>Рауф - Программист</h3>
  157. <p>Студент 2 курса колледжа информационных технологий, предлагающий широкий спектр услуг в области программирования и консультирования.</p>
  158. </div>
  159. <div class="footer-links">
  160. <h3>Быстрые ссылки</h3>
  161. <ul>
  162. <li><a href="#">Главная</a></li>
  163. <li><a href="#">Обо мне</a></li>
  164. <li><a href="#">Услуги</a></li>
  165. <li><a href="#">Портфолио</a></li>
  166. <li><a href="#">Отзывы</a></li>
  167. <li><a href="#">Блог</a></li>
  168. <li><a href="#">Контакты</a></li>
  169. </ul>
  170. </div>
  171. <div class="footer-contact">
  172. <h3>Контакты</h3>
  173. <ul>
  174. <li>Email: rauf@example.com</li>
  175. <li>Телефон: +7 (123) 456-78-90</li>
  176. <li>Адрес: Россия, г. Москва, ул. Пушкина, д. 10</li>
  177. </ul>
  178. </div>
  179. </div>
  180. <div class="footer-copyright">
  181. <p>&copy; 2024 Рауф - Программист. Все права защищены.</p>
  182. </div>
  183. </footer>
  184. <script src="script.js"></script>
  185. </body>
  186. </html>