https://pastein.ru/t/-Aq
Загрузка данных
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Портфолио Студента | Главная</title>
</head>
<body>
<header>
<div class="logo">
<a href="#"><strong>МОЙ_ЛОГОТИП</strong></a>
</div>
<nav>
<ul>
<li><a href="#hero">Главная</a></li>
<li><a href="#about">О себе</a></li>
<li><a href="#skills">Навыки</a></li>
<li><a href="#portfolio">Мои работы</a></li>
<li><a href="#footer">Контакты</a></li>
</ul>
</nav>
</header>
<main>
<section id="hero">
<h1>Привет! Я начинающий веб-разработчик</h1>
<p>Добро пожаловать на мой сайт-портфолио, созданный в рамках практических занятий.</p>
<img src="placeholder-hero.jpg" alt="Мое фото или баннер">
</section>
<hr>
<section id="about">
<h2>О себе и о проекте</h2>
<p>Здесь вы можете найти сборник моих лучших работ за 2 семестр. Этот сайт спроектирован как живое портфолио для демонстрации навыков верстки и программирования.</p>
</section>
<hr>
<section id="skills">
<h2>Мои навыки</h2>
<div class="skills-container">
<article class="skill-card">
<img src="html-icon.png" alt="HTML5">
<h3>Валидный HTML5</h3>
<p>Создание четкой, семантической и доступной структуры для веб-страниц.</p>
</article>
<article class="skill-card">
<img src="css-icon.png" alt="CSS3">
<h3>Стилизация CSS3</h3>
<p>Работа с цветом, сетками и адаптивным дизайном под любые экраны.</p>
</article>
<article class="skill-card">
<img src="dev-icon.png" alt="Разработка">
<h3>Проектирование</h3>
<p>Умение анализировать бриф, строить логическую структуру сайтов и интерфейсов.</p>
</article>
</div>
</section>
<hr>
<section id="portfolio">
<h2>Мое портфолио (Выполненные работы)</h2>
<h3>Практические работы</h3>
<div class="portfolio-grid">
<article class="portfolio-item">
<h4>Практические работы № 1, 2, 3, 4, 5, 6</h4>
<p>Базовые основы и первые шаги в веб-разработке.</p>
<a href="practicals/part1.html" target="_blank">Смотреть работу</a>
</article>
<article class="portfolio-item">
<h4>Практические работы № 10-11</h4>
<p>Работа с комплексными структурами и таблицами.</p>
<a href="practicals/part2.html" target="_blank">Смотреть работу</a>
</article>
<article class="portfolio-item">
<h4>Практические работы № 12-13</h4>
<p>Продвинутая разметка и семантика.</p>
<a href="practicals/part3.html" target="_blank">Смотреть работу</a>
</article>
<article class="portfolio-item">
<h4>Практические работы № 17-18</h4>
<p>Финальные штрихи, валидация и оптимизация каркаса.</p>
<a href="practicals/part4.html" target="_blank">Смотреть работу</a>
</article>
</div>
<h3>Материалы лекций (2 семестр)</h3>
<ul>
<li><a href="lectures/lec1.html">Лекция 1</a></li>
<li><a href="lectures/lec2.html">Лекция 2</a></li>
<li><a href="lectures/lec3.html">Лекция 3</a></li>
<li><a href="lectures/lec5.html">Лекция 5</a></li>
<li><a href="lectures/lec7.html">Лекция 7</a></li>
</ul>
<h3>Лабораторные работы</h3>
<div class="labs-list">
<div class="lab-item">
<h4>Лабораторная работа №5</h4>
<a href="labs/lab5.html">Открыть проект</a>
</div>
<div class="lab-item">
<h4>Лабораторная работа №6</h4>
<a href="labs/lab6.html">Открыть проект</a>
</div>
<div class="lab-item">
<h4>Лабораторная работа №7</h4>
<a href="labs/lab7.html">Открыть проект</a>
</div>
</div>
</section>
</main>
<footer id="footer">
<p>© 2026. Все права защищены. Выполнил студент (ИЗМЕНИТЬ: Твое Имя/Фамилию).</p>
<div class="social-links">
<h4>Связаться со мной:</h4>
<ul>
<li><a href="#" target="_blank">Telegram</a></li>
<li><a href="#" target="_blank">VK</a></li>
<li><a href="#" target="_blank">GitHub</a></li>
</ul>
</div>
</footer>
</body>
</html>
