-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
130 lines (123 loc) · 5.86 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Портфолио</title>
<link rel="stylesheet" href="styles.css">
<script src="script.js"></script>
</head>
<body>
<!-- Шапка -->
<header class="header">
<h1>Портфолио</h1>
<nav>
<ul>
<li><a href="#about">Обо мне</a></li>
<li><a href="#skills">Мои навыки</a></li>
<li><a href="#petProjects">Мои пет-проекты</a></li>
<li><a href="#diary">Дневник программиста</a></li>
<li><a href="#contact">Контакты</a></li>
</ul>
</nav>
</header>
<!-- Основной контент -->
<main>
<!-- О себе -->
<section id="about">
<h2>Обо мне</h2>
<img src="avatar.jpg" alt="Аватар">
<p>Я молодой и амбициозный web-разработчик, специализирующийся на создании современных и интерактивных
веб-приложений.</p>
<p>Люблю изучать новые технологии и всегда стараюсь быть в курсе последних тенденций в мире программирования.</p>
</section>
<!-- Мои навыки -->
<section id="skills">
<h2>Мои навыки</h2>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>React</li>
<li>Vue.js</li>
<li>Node.js</li>
<li>Express.js</li>
<li>MongoDB</li>
<li>MySQL</li>
</ul>
</section>
<!-- Пет-проекты -->
<section id="petProjects">
<h2>Мои пет-проекты</h2>
<article>
<h3>Проект 1</h3>
<img src="petProject1.jpg" alt="Фото пет-проекта 1">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante
dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris.
Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla.</p>
<a href="https://example.com/petProject1">Узнать больше</a>
</article>
<article>
<h3>Проект 2</h3>
<img src="petProject2.jpg" alt="Фото пет-проекта 2">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante
dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris.
Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla.</p>
<a href="https://example.com/petProject2">Узнать больше</a>
</article>
<article>
<h3>Проект 3</h3>
<img src="petProject3.jpg" alt="Фото пет-проекта 3">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante
dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris.
Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla.</p>
<a href="https://example.com/petProject3">Узнать больше</a>
</article>
</section>
<!-- Дневник программиста -->
<section id="diary">
<h2>Дневник программиста</h2>
<article>
<h3>Запись 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante
dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris.
Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla.</p>
<a href="https://example.com/diaryEntry1">Читать далее</a>
</article>
<article>
<h3>Запись 2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante
dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris.
Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla.</p>
<a href="https://example.com/diaryEntry2">Читать далее</a>
</article>
<article>
<h3>Запись 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante
dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris.
Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla.</p>
<a href="https://example.com/diaryEntry3">Читать далее</a>
</article>
</section>
<!-- Проекты -->
<section id="projects">
<h2>Проекты</h2>
<article>
<h3>Проект 1</h3>
<img src="project1.jpg" alt="Фото проекта 1">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante
dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris.
Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla.</p>
<a href="https://example.com/project1">Узнать больше</a>
</article>
<article>
<h3>Проект 2</h3>
<img src="project2.jpg" alt="Фото проекта 2">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante
dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris.
Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla.</p>
<a href="https://example.com/project2">Узнать больше</a>
</article>
<article>
<h3>Проект 3</h3>
<img src="project3.jpg" alt="Фото