Практическое занятие

Задание 1

Создадим простую веб-страницу, на которой разместим небольшой текст и стилизованную кнопку, примерно как на образце. Кнопка имеет цвет фона, совпадающий с цветом текста страницы, а цвет теста, совпадающий с цветом фона страницы.


Напишем html-код.

<!doctype html>
<html>
<head>
<title>Цветовые схемы</title>
<style>
body {
  background-color: #ff5952;
}
p {
   margin: 300px 0 50px 100px;
   color: white;
   font-size: 50pt;
   font-family: Arial;
}
  #кнопка {
    margin: 0 0 0 100px;
    padding: 20px;
    background-color: white;
    font-size: 12pt;
    color: #ff5952;
}
  a:link, a:visited {
    color: #ff5952;
}
</style>
</head>
<body>
    <p>Здравствуйте, мы Одопод -<br>
       агенство цифрового дизайна.
    </p>
   <a href="#"  id="кнопка">
       Что мы делаем &rarr;
    </a>
</body>
</html>


Скопируйте код в редактор и поэкспериментируйте со значениями стилей.


Задание 2

Создадим страницу с контрастной кнопкой по образцу. Подберем цвета с помощью соответствующей цветовой схемы. В футере разместим ссылки на социальные сети. В верхней части страницы поставим ссылку с буквицей.


Напишем html-код.

<!doctype html>
<html>
<head>
<title>Цветовые схемы</title>
<style>
body {
  background-color: #00418c;
}
h1 {
   margin: 100px 100px 50px 100px;
   color: white;
   font-size: 50pt;
   font-family: Arial;
   text-align: center;
}
  #кнопка {
    padding: 25px;
    background-color: #ff8900;
    font-size: 12pt;
    color: white;
    font-family: Arial;
}
  a:link, a:visited {
    color: white;
    text-align: center;
    text-decoration: none;
}
#h {
    font-size: 20pt;
    color: white;
    font-family: Arial; 
    margin-top: 0;
}
#буквица {
    color: #EBB86A;
}
footer {
    font-size: 15pt;
    font-family: Arial; 
    margin-top: 400px;
    text-align: center;
}
footer a:link, a:visited {
    color:#598CC6;
    padding: 0 30px;  
}
</style>
</head>
<body>
    <h4 id="h"><span id="буквица">a</span>hrefs</h4>
    <h1>Инструменты для увеличения поискового трафика,
        исследования конкурентов<br> и мониторинга своей ниши
    </h1>
    <div style="text-align: center;">
    <a href="#" id="кнопка">
       Начни с пробного периода в 7 дней
    </a>
    </div>
    <footer>
      <a href="#">facebook</a>
      <a href="#">ВКонтакте</a>
      <a href="#">Инстаграмм</a>
      <a href="#">
      <img src="social-1834013_640.png" style="width: 40px; vertical-align: bottom;">
         Твиттер</a>
      <a href="#">Блоггер</a>
    </footer>
</body>
</html>

Скопируйте код в редактор и поэкспериментируйте со значениями стилей.

Последнее изменение: Суббота, 21 марта 2020, 11:51