My-NotFirst-HTML-Project/index.html at main · Andrew-Sor/My-NotFirst-HTML-Project · GitHub

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
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
<!DOCTYPE html>
<html>
    <head>
        <title>Моя не первая веб-страница</title>
        <style>
            @font-face {
                font-family: San-Francisco;
                src: url(assets/SFProText-Regular.ttf);
                font-weight: normal;
            }

            @font-face {
                font-family: San-Francisco;
                src: url(assets/SFProText-Bold.ttf);
                font-weight: bold;
            }

            @keyframes intro {
                0% {
                    transform: translateY(200px);
                    backdrop-filter: blur(0px);
                    background: #12121200;
                }
                100% {
                    transform: translateY(0px);
                    backdrop-filter: blur(20px);
                    background: #121212aa;
                }
            }

            @keyframes fade {
                0% {
                    opacity: 0;
                }
                100% {
                    opacity: 1;
                }
            }

            @keyframes head {
                0% {
                    transform: translateY(200px);
                    opacity: 0;
                }
                100% {
                    transform: translateY(0px);
                    opacity: 1;
                }
            }

            body {
                font-family: 'San-Francisco'; /* Изменение шрифта на San Francisco */
                background-color: #121212; /* Светло-серый фоновый цвет */
                margin: 25px; /* Отступ от краёв страницы */
                padding: 0px; /* Удаление лишних отступов */
                font-size: 14pt; /* Изменение размера шрифта */
                background: #000;
            }

            body::before {
                content: ''; /* Необходимо */
                position: fixed; /* Фиксированное положение */
                width: 100%; /* Ширина во всё окно */
                background: url(https://i.ibb.co/4nMkjqJg/Vk.png); /* Фоновое изображение */
                background-size: cover; /* Фон заполняет окно */
                background-position: 50%; /* Центрирование фона */
                height: 100%; /* Высота во всё окно */
                background-attachment: fixed; /* Фон без прокрутки */
                z-index: -1; /* Фон позади всех элементов */
                top: 0px; /* Исправляем съехавший фон */
                left: 0px; /* Исправляем съехавший фон */
                animation-name: fade; /* Анимация появления */
                animation-duration: 0.7s; /* Длительность анимации */
                animation-fill-mode: backwards;
            }

            h1 {
                color: #ccc; /* Изменяем цвет заголовка */
                text-align: center; /* Выравнивание заголовка по центру */
                font-weight: bold; /* Жирный заголовок */
                text-shadow: 0px 0px 15px #000; /* Тень заголовка */
                margin-top: 300px; /* Отступ сверу */
                margin-bottom: 200px; /* Отступ снизу */
                font-size: 36pt; /* Размер шрифта */
                animation-name: head; /* Анимация появления */
                animation-duration: 0.7s; /* Длительность анимации */
                animation-fill-mode: backwards;
                transition-duration: 0.5s; /* Плавные изменения */
            }

            p {
                color: #ccc; /* Изменяем цвет абзацев */
                line-height: 1.6; /* Увеличение межстрочного интервала */
                text-align: justify; /* Выравнивание по ширине */
                margin: 20px; /* Отступы */
                animation-name: fade; /* Анимация появления */
                animation-duration: 0.7s; /* Длительность анимации */
                animation-fill-mode: backwards;
                transition-duration: 0.5s; /* Плавные изменения */
            }

            div.ps {
                background: #121212aa; /* Изменяем цвет фона */
                padding: 1px 0px; /* Исправление внутренних отступов */
                backdrop-filter: blur(20px); /* Размытие фона */
                border-radius: 25px; /* Скругление краёв */
                box-shadow: 0px 0px 20px #000c; /* Тень от блока */
                animation-name: intro; /* Анимация появления */
                animation-duration: 0.7s; /* Длительность анимации */
                animation-fill-mode: backwards;
                width: 85%; /* Изменение ширины */
                margin: 0px auto 100px auto; /* Внешние отступы */
                transition-duration: 0.5s; /* Плавные изменения */
            }

            #name {
                background: none; /* Удаление фона */
                border: solid 0px #12121200; /* Удаление обводки */
                font-size: 36pt; /* Изменение размера шрифта */
                font-weight: bold; /* Жирный шрифт */
                text-shadow: 0px 0px 15px #000; /* Тень от текста */
                animation-name: fade; /* Анимация появления */
                animation-duration: 0.7s; /* Длительность анимации */
                animation-fill-mode: backwards;
                text-align: center; /* Центрирование текста */
                outline: none; /* Удаление обводки */
                width: 70%; /* Изменение ширины */
                border-radius: 25px; /* Скругление краёв */
                transition-duration: 0.2s; /* Плавные изменения */
            }

            #name:focus {
                border: solid 5px #121212aa; /* Добавление обводки */
                transition-duration: 0.2s; /* Плавные изменения */
            }
        </style>
        <script>
            window.onload = function() {
                document.getElementById('name').addEventListener("focusout", function() {
                    if (document.getElementById('name').value.endsWith(",")) {
                        document.getElementById('text').innerHTML = "добро пожаловать на мою страницу!";
                    } else {
                        if (document.getElementById('name').value == "") {
                            document.getElementById('text').innerHTML = "Добро пожаловать на мою страницу!";
                        } else {
                            document.getElementById('name').value = document.getElementById('name').value + ",";
                            document.getElementById('text').innerHTML = "добро пожаловать на мою страницу!";
                        };
                    };
                });
            }
        </script>
    </head>
    <body>
        <!--Сдать работу-->
        <h1 id="h"><input type="text" id="name"><br><span id="text">Добро пожаловать на мою страницу!</span></h1>
        <div class="ps">
            <p>Это моя не первая веб-страница. Я учусь в колледже. Эта страница создана в рамках прохождения заданий по информатике.</p>
            <p>HTML позволяет создавать структуру веб-страницы.</p>
            <p>С помощью разных тегов можно добавлять заголовки, параграфы, ссылки, изображения и многое другое.</p>
            <p>CSS позволяет изменять внешний вид элементов.</p>
            <p>Но на самом деле он умеет гораздо больше, если знать множество различных приёмов!</p>
            <p>А благодаря JavaScript можно сделать сайт более динамичным и реализовать взаимодействие пользователя с ним.</p>
            <p>Я уже знаю HTML и CSS достаточно хорошо. А JS только учу. Мне предстоит научится самому главному и интересному в создании сайтов!</p>
            <p></p>
            <p>Я также создаю игру на Unreal Engine 5. Можете заглянуть <a href="https://andrew-sor.github.io/projectd">на её сайт</a>!</p>
        </div>
        <p>Создано Яндекс, © {неизвестный год}</p>
        <p>Изменено и доработано Andrew_Sor, © 2025 г.</p>
    </body>
</html>