Содержание:
1. Введение.
2. Задачи.
3. Верстка шапки сайта и баннера.
4. Верстка основного блока.
5. Верстка подвала(footer).
6. Вывод.
7. Список используемых источников
2
Введение:
Я недаром выбрала свою специальность, а именно, Информационные системы
и программирование, так как считаю её актуальной в настоящее время и к тому
же полезной. Целью производственной практики стала вёрстка собственного
дизайна сайта. Актуальность работы состоит в том, что ни для кого не секрет:
технический прогресс не стоит на месте. Глобальная сеть интернет связывает
миллионы людей на планете, и каждый нуждается в необходимой для него
услуге. И именно сайты стали лицом на рынке труда сети интернет. Что
намного упрощает задачу поиска услуг. И я в моей работе хотела бы достичь
цели и выполнить поставленные задачи, и в дальнейшем освоении моей
профессии внести свой вклад в создании полезных сайтов. Главной целью этой
работы являлась верстка собственного дизайна сайта.
3
Задачи:
Во втором задании нужно сверстать сайт, в точности, как на макете, созданный
нами еще в первом задании.
Общие требования при верстке:
o Отображение сайта на 1360px;
o Навигационная панель;
o Анимация (Hover не считается);
o Блок с рекламой;
o Возможность поставить;
o Кнопка «Смотреть трейлер»;
o Подвал сайта.
4
1)Верстка шапки сайта и баннера.
В шапке сайта я создала блок добавив в него логотип и ссылки, а также кнопку
и прописала css.
<div class="header">
<div class="content">
<div class="menu">
<div class="logo"><a href="#"><img
src="img/FilmPro.png"></a></div>
<div class="nav">
<a href="#">Новинки</a>
<a href="#">Фильмы</a>
<a href="#">Сериалы</a>
<a href="#">Мультфильмы</a>
<a href="#">TV</a>
</div>
<div class="account">
<a href="#"><img src="img/Search.png"></a>
<a href="#"><img src="img/Notifications.png"></a>
<a href="#"><img src="img/unsplash_3TLl_97HNJo.png"></a>
</div>
</div>
</div>
5
В баннере я вставила название сериала, краткое описание и две кнопки
“Смотреть” и “Трейлер”, а также прописала css.
<div class="main">
<div class="content">
<div class="section">
<h1>ЭЙФОРИЯ</h1>
<p>После рехаба бунтарка Ру заново привыкает к школьной
жизни. Самая откровенная подростковая драма десятилетия</p>
<div class="buttons">
<a class="see" href="#">Смотреть</a>
<a class="flare-button" href="#">Трейлер</a>
</div>
</div>
</div>
</div>
6
2)Верстка основного блока.
В основном блоке я создала секции “Новинки”, “Фильмы”, “Сериалы”,
“Мультфильмы”, “TV”. Вставила картинки, подписала названия и добавила
анимации.
<div class="new">
<a href="#">Новинки <p>&rsaquo;</p></a>
<div class="section-new">
<div class="card-new">
<ul class="hover-effect-scale">
<li>
<img src="img/Mask group.png">
<div>
<a href="#"><img title="Смотреть" src="img/Union.png"></a>
</div>
</li>
</ul>
<div class="section-text">
<h6>Красавица и дракон <p>2021</p></h6>
<p class="p">Ryu to Sobakasu no Hime</p>
<div class="rating-area">
<input type="radio" id="star-10" name="rating" value="10">
<label for="star-10" title="Оценка «10»"></label>
<input type="radio" id="star-9" name="rating" value="9">
<label for="star-9" title="Оценка «9»"></label>
<input type="radio" id="star-8" name="rating" value="8">
7
<label for="star-8" title="Оценка «8»"></label>
<input type="radio" id="star-7" name="rating" value="7">
<label for="star-7" title="Оценка «7»"></label>
<input type="radio" id="star-6" name="rating" value="6">
<label for="star-6" title="Оценка «6»"></label>
<input type="radio" id="star-5" name="rating" value="5">
<label for="star-5" title="Оценка «5»"></label>
<input type="radio" id="star-4" name="rating" value="4">
<label for="star-4" title="Оценка «4»"></label>
<input type="radio" id="star-3" name="rating" value="3">
<label for="star-3" title="Оценка «3»"></label>
<input type="radio" id="star-2" name="rating" value="2">
<label for="star-2" title="Оценка «2»"></label>
<input type="radio" id="star-1" name="rating" value="1">
<label for="star-1" title="Оценка «1»"></label>
</div>
</div>
</div>
<div class="movies">
<a href="#">Фильмы <p>&rsaquo;</p></a>
</div>
<div class="serials">
<a href="#">Сериалы <p>&rsaquo;</p></a>
</div>
<div class="cartoons">
8
<a href="#">Мультфильмы <p>&rsaquo;</p></a>
</div>
<div class="tv">
<a href="#">TV <p>&rsaquo;</p></a>
</div>
9
3)Верстка подвала(footer).
Я создала блок footer, затем вставила иконки и добавила текст. Прописала css.
<footer class="footer">
<div class="nav">
<a href="#">Главная страница</a>
<a href="#">Аккаунт</a>
<a href="#">Подписка</a>
<a href="#">О нас</a>
</div>
<p>© 2022 FilmPro. 18+</p>
<div class="social">
<a href="#"><img src="img/Instagram.png"></a>
<a href="#"><img src="img/Telegram App.png"></a>
<a href="#"><img src="img/VK Circled.png"></a>
<a href="#"><img src="img/YouTube.png"></a>
</div>
</footer>
10
Вывод
Данная производственная практика является хорошим практическим опытом
для дальнейшей самостоятельной деятельности. За время прохождения
практики, я узнала и научилась много новому. Так же закрепила свои
теоретические знания.
11
Список используемых источников
1. Личный код (PhpStorm).
12