Технологии рекламы и сетевая культура. Практическое задание №1. Текстовый лендинг
Для создания текстового лендинга вам потребуется три иллюстрации и три абзаца текста, описывающие ваш проект.
Подготовительный этап:
Авторизуйтесь на blogger.com
В левом вертикальном сайдбаре выберите тема - soho - применить.
Затем выберите сообщения - написать.
В горизонтальном меню создания сообщения переключитесь с режима верстки (карандаш) в режим HTML (<>)
1. Загрузите все три иллюстрации в репозиторий и скопируйте их ссылки вида raw.githubusercontent.com либо скопируйте прямые ссылки с того ресурса, откуда вы взяли иллюстрации.
Стили:
2. Откройте Notepad++ и в новой вкладке выберите Language-C-CSS, после чего последовательно копируйте весь код далее (обозначен желтым). Либо копируйте его в любой текстовый редактор.
3. Встраивание шрифтов:
@import url(https://fonts.googleapis.com/css?family=Oswald:300,400,700);
@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600,700,900,200italic,300italic,400italic,600italic,700italic,900italic);
4. Общие размеры страницы и лендинга:
html, body {
font-family: 'Open Sans', sans-serif;
height: 100%;
margin: 0;
background-color: white;
}
.box {
width: 80%;
position: absolute;
margin: auto;
overflow: auto;
}
5. Размер основного блока лендинга:
#main {
width: 100%;
padding: 0;
position: relative;
}
6. Отступы и стили заголовков:
.content-asset p {
margin: 0 auto;
}
.breadcrumb {
display: none;
}
.margin-top-10 {
padding-top: 10px;
}
.margin-bot-10 {
padding-bottom: 10px;
}
#landing h1 {
font-family: 'Oswald', sans-serif;
font-size: 24px;
font-weight: 400;
text-transform: uppercase;
color: black;
padding: 0;
margin: 0;
}
#landing h2 {
font-family: 'Oswald', sans-serif;
font-size: 70px;
letter-spacing: 10px;
text-align: center;
color: white;
font-weight: 400;
text-transform: uppercase;
z-index: 10;
opacity: .9;
}
#landing h3 {
font-family: 'Oswald', sans-serif;
font-size: 14px;
line-height: 0;
font-weight: 400;
letter-spacing: 8px;
text-transform: uppercase;
color: black;
}
#landing p {
font-family: 'Source Sans Pro', sans-serif;
font-weight: 400;
font-size: 14px;
line-height: 24px;
color: black;
}
.first-character {
font-weight: 400;
float: left;
font-size: 84px;
line-height: 64px;
padding-top: 4px;
padding-right: 8px;
padding-left: 3px;
font-family: 'Source Sans Pro', sans-serif;
}
7. Цвета и шрифты стартовых букв (первой, второй и третьей):
.fl {
color: #008000;
font-family: "Roboto", sans-serif;
}
.sl {
color: #ffd700;
font-family: "Roboto", sans-serif;
}
.tl {
color: #dc143c;
font-family: "Roboto", sans-serif;
}
8. Заголовки и блоки текста:
#landing .title {
background: white;
padding: 60px;
margin: 0 auto;
text-align: center;
}
#landing .title h1 {
font-size: 35px;
letter-spacing: 8px;
}
#landing .block {
background: white;
padding: 6px;
width: 820px;
margin: 0 auto;
text-align: justify;
}
#landing .block-gray {
background: #f2f2f2;
padding: 6px;
}
#landing .section-overlay-mask {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: black;
opacity: 0.70;
}
9. Расположение иллюстраций в лендинге и ссылки на них:
#landing .parallax-one {
padding-top: 200px;
padding-bottom: 200px;
overflow: hidden;
position: relative;
width: 100%;
background-image: url("ссылка на первое фото");
background-attachment: fixed;
background-size: cover;
-moz-background-size: cover;
-webkit-background-size: cover;
background-repeat: no-repeat;
background-position: top center;
}
#landing .parallax-two {
padding-top: 200px;
padding-bottom: 200px;
overflow: hidden;
position: relative;
width: 100%;
background-image: url("ссылка на второе фото");
background-attachment: fixed;
background-size: cover;
-moz-background-size: cover;
-webkit-background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
#landing .parallax-three {
padding-top: 200px;
padding-bottom: 200px;
overflow: hidden;
position: relative;
width: 100%;
background-image: url("ссылка на третье фото");
background-attachment: fixed;
background-size: cover;
-moz-background-size: cover;
-webkit-background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
10. Цветные разделители в абзацах:
#landing .line-break {
background: linear-gradient(60deg, #008000, #ffd700, #dc143c);
width: 100%;
margin: 0 auto;
}
#landing .line-break2 {
background: linear-gradient(60deg, #ffd700, #008000, #dc143c);
width: 100%;
margin: 0 auto;
}
#landing .line-break3 {
background: linear-gradient(60deg, #dc143c, #008000, #ffd700);
width: 100%;
margin: 0 auto;
}
11. Параметры адаптивной верстки:
@media screen and (max-width: 959px) and (min-width: 768px) {
#landing .block {
padding: 40px;
width: 620px;
}
}
@media screen and (max-width: 767px) {
#landing .block {
padding: 30px;
width: 420px;
}
#landing h2 {
font-size: 30px;
}
#landing .block {
padding: 30px;
}
#landing .parallax-one, #flat .parallax-two, #flat .parallax-three {
padding-top: 100px;
padding-bottom: 100px;
}
}
@media screen and (max-width: 479px) {
#landing .block {
padding: 30px 15px;
width: 290px;
}
}
12. Скопируйте код
HTML:
14. В вашем блоге укажите стартовые параметры разметки:
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Landing</title>
15. Укажите вашу ссылку на CSS:
<style>вставьте сюда скопированный код стилей</style>
16. Укажите закрывающий тег:
</head>
17. Откройте основное тело лендинга и укажите в соответствующих полях ваш текст:
<body>
<div class="box">
<div id="landing">
<section>
<div class="title">
<h3>Заголовок 1</h3>
<h1>Главный заголовок</h1>
<h3>Заголовок 2</h3>
</div>
</section>
18. Теперь фото с абзацами:
<section>
<div class="parallax-one">
<h2>Текст на фото</h2>
</div>
</section>
<section>
<div class="block">
<p><span class="first-character fl">Э</span>то первый абзац текста.
</p>
<p class="line-break margin-top-10"></p>
<p class="margin-top-10">Это его продолжение после разделителя.
</p>
</div>
</section>
19. Второе фото и текст:
<section>
<div class="parallax-two">
<h2>Второй заголовок на фото</h2>
</div>
</section>
<section>
<div class="block">
<p><span class="first-character sl">Э</span>то второй абзац</p>
<p class="line-break2 margin-top-10"></p>
<p class="margin-top-10">И текст после разделителя</p>
</div>
</section>
20. Третий блок:
<section>
<div class="parallax-three">
<h2>Заголовок на третьем фото</h2>
</div>
</section>
<section>
<div class="block">
<p><span class="first-character tl">Э</span>то третий абзац</p>
<p class="line-break3 margin-top-10"></p>
<p class="margin-top-10">И его продолжение.</p>
</div>
</section>
</div>
</div>
21. Закрываете оставшиеся теги:
</body>
</html>
22. Публикуете сообщение у себя в блоге. Далее - по пиктограмме (глаз) ссылку на страницу, где оно опубликовано.
Если все верно, то ваш лендинг будет выглядеть примерно так: https://konoplevtech3.blogspot.com/2023/10/landing-page.html
Комментарии