Слайд 2Мой сайт посвящен теме искусственного интеллекта в играх.
![Мой сайт посвящен теме искусственного интеллекта в играх.](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/839467/slide-1.jpg)
Слайд 3Сначала создал файлы формата html и css. Затем сразу начал работу в
![Сначала создал файлы формата html и css. Затем сразу начал работу в html](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/839467/slide-2.jpg)
html
Слайд 4Сначала обработал картинку для шапки в Photoshop
![Сначала обработал картинку для шапки в Photoshop](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/839467/slide-3.jpg)
Слайд 5Загрузил главный фон и фон для шапки. Затем отодвинул все ссылки в
![Загрузил главный фон и фон для шапки. Затем отодвинул все ссылки в](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/839467/slide-4.jpg)
шапке на 50px друг от друга
Слайд 6В целом шапка была готова, но чего-то все-равно не хватало. Я добавил
![В целом шапка была готова, но чего-то все-равно не хватало. Я добавил](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/839467/slide-5.jpg)
рамку желтого цвета с помощью свойства border. И вот теперь шапка была готова.
Слайд 7Но всё ещё не было никакой информации. Всё последующее время я потратил
![Но всё ещё не было никакой информации. Всё последующее время я потратил](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/839467/slide-6.jpg)
на поиск и добавление информации.
Слайд 8Файлы css я пока почти не трогал, только прописал нижнюю рамку для
![Файлы css я пока почти не трогал, только прописал нижнюю рамку для](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/839467/slide-7.jpg)
шапки. Вот и закончил я добавление информации.
Слайд 9Прописал для каждого своего абзаца теги div и задал им классы. Тут
![Прописал для каждого своего абзаца теги div и задал им классы. Тут](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/839467/slide-8.jpg)
началась работа в css. Это было сложно, но интересно.
Слайд 10Задал каждому своему классу рамку сверху снизу, закруглил их с помощью border-radius
![Задал каждому своему классу рамку сверху снизу, закруглил их с помощью border-radius](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/839467/slide-9.jpg)
на 30px и сделал их голубого цвета
Слайд 11Потом с помощью width ограничил текст на 764px. И поставил margin 0
![Потом с помощью width ограничил текст на 764px. И поставил margin 0](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/839467/slide-10.jpg)
auto, чтобы при уменьшении или увеличении разрешения экрана, все содержимое выравнивалось по центру.