urfu-2017 · vmiftakhov · Oct 24, 2017 · Oct 24, 2017 · Oct 24, 2017 · Oct 24, 2017
diff --git a/118.jpg b/118.jpg
diff --git a/56.jpg b/56.jpg
diff --git a/font/ds-Moster.ttf b/font/ds-Moster.ttf
diff --git a/font/trixieCyr-Plain.otf b/font/trixieCyr-Plain.otf
diff --git a/front/TrixieCyr-Plain.otf b/front/TrixieCyr-Plain.otf
diff --git a/front/ds_moster.ttf b/front/ds_moster.ttf
diff --git a/index.css b/index.css
@@ -0,0 +1,144 @@
+@font-face
+{
+    font-family: ds-Moster;
+    src: url('font/ds-Moster.ttf');
+}
+
+@font-face
+{
+    font-family: trixieCyr-Plain;
+    src: url('font/trixieCyr-Plain.otf');
+}
+
+img
+{
+    width: 100%;
+}
+
+html
+{
+    background-color: gray;
+}
+
+main
+{
+    padding: 10px;
+}
+
+label
+{
+    cursor: pointer;
+    padding: 0 15px;
+}
+
+input
+{
+    display: none;
+}
+
+section
+{
+    column-count: 3;
+    column-rule: 1px solid #000;
+}
+
+h1,
+h2
+{
+    font-variant: small-caps;
+    text-align: center;
+}
+
+h1
+{
+    white-space: nowrap;
+    height: 60px;
+}
+
+h3
+{
+    white-space: nowrap;
+    height: 20px;
+    margin-top: 0;
+}
+
+p
+{
+    text-align: justify;
+    hyphens: auto;
+    text-indent: 2em;
+}
+
+input[value='small']:checked ~ main
+{
+    font-size: 80%;
+}
+
+input[value='normal']:checked ~ main
+{
+    font-size: 100%;
+}
+
+input[value='big']:checked ~ main
+{
+    font-size: 120%;
+}
+
+input[value='ds_moster']:checked ~ main 
+{
+    font-family: ds-Moster, 'sans-serif';
+}
+
+input[value='TrixieCyr-Plain']:checked ~ main
+{
+    font-family: trixieCyr-Plain, 'sans-serif';
+}
+
+input[value='Arial']:checked ~ main
+{
+    font-family: Arial, 'sans-serif';
+}
+
+input[value='black_and_white']:checked ~ main
+{
+    background-image: url('56.jpg') ;
+    color: #000;
+    column-rule: 1px solid #000;
+}
+
+input[value='white_and_black']:checked ~ main
+{
+    background-image: url('118.jpg') ;
+    color: #fff;
+    column-rule: 1px solid #fff;
+}
+
+input[value='black_and_white']:checked ~ main section
+{
+    column-rule: 1px solid #000;
+}
+
+input[value='white_and_black']:checked ~ main section
+{
+    column-rule: 1px solid #fff;
+}
+
+.label-button
+{
+    line-height: 3em;
+    font-family: Arial;
+    text-align: center;
+    column-count: 3;
+    padding: 50px 0;
+}
+
+h1:first-letter
+{
+    font-size: 150%;
+}
+
+h2:first-letter
+{
+    font-size: 120%;
+}
+
diff --git a/index.html b/index.html
@@ -1,9 +1,177 @@
 <!DOCTYPE html>
 <html lang="ru">
+
 <head>
     <meta charset="utf-8">
     <title>Задача «DeLorean DMC-12»</title>
+    <link rel="stylesheet" href="index.css">
 </head>
+
 <body>
+    <input type="radio" value="small" name="contact" id="small">
+    <input type="radio" value="normal" name="contact" id="normal" checked>
+    <input type="radio" value="big" name="contact" id="big">
+
+    <input type="radio" value="ds_moster" name="font" id="text1" checked>
+    <input type="radio" value="TrixieCyr-Plain" name="font" id="text2">
+    <input type="radio" value="Arial" name="font" id="text3">
+
+    <input type="radio" value="black_and_white" name="color" id="black_and_white" checked>
+    <input type="radio" value="white_and_black" name="color" id="white_and_black">
+    <main>
+        <div class="label-button">
+            <h3>Размер
+            </h3>
+            <label for="small">маленький</label>
+            <label for="normal">средний</label>
+            <label for="big">огромный</label>
+            <h3>Выбор шрифта
+            </h3>
+            <label for="text1">Шрифт 1</label>
+            <label for="text2">Шрифт 2</label>
+            <label for="text3">Шрифт 3</label>
+            <h3>Выбор темы
+            </h3>
+            <label for="black_and_white">Тема 1</label>
+            <label for="white_and_black">Тема 2</label>
+        </div>
+        <h1>Newspaper - fish</h1>
+        <section>
+            <div>
+                <img src="picture.png" alt="picture" title="picture">
+            </div>
+            <article class="article2">
+                <h2>Значимость этих проблем настолько очевидна...</h2>
+                <p>Разнообразный и богатый опыт консультация с профессионалами из IT требует от 
+                    нас анализа дальнейших направлений развития проекта. Таким образом, 
+                    социально-экономическое развитие требует от нас анализа экономической
+                    целесообразности принимаемых решений. Таким образом, реализация намеченного 
+                    плана развития представляет собой интересный эксперимент проверки 
+                    соответствующих условий активизации. Не следует, однако, забывать о том, 
+                    что консультация с профессионалами из IT 
+                    влечет за собой процесс внедрения и модернизации соответствующих условий 
+                    активизации? Значимость этих проблем настолько очевидна, что 
+                    постоянный количественный рост и сфера нашей активности напрямую зависит 
+                    от новых предложений? Не</p>
+            </article>
+            <article>
+                <h2>Соображения высшего порядка, а также..</h2>
+                <p>С другой стороны постоянный количественный рост и сфера нашей активности 
+                    играет важную роль в формировании
+                    дальнейших направлений развитая системы массового участия! Практический 
+                    опыт показывает, что повышение
+                    уровня гражданского сознания требует от нас анализа дальнейших направлений 
+                    развитая системы массового
+                    участия! Равным образом новая модель организационной деятельности влечет 
+                    за собой процесс внедрения и
+                    модернизации соответствующих условий активизации? Разнообразный и богатый 
+                    опыт постоянный количественный
+                    рост и сфера нашей активности требует от нас анализа модели развития. 
+                    Соображения высшего порядка, а
+                    также реализация намеченного плана развития создаёт предпосылки качественно 
+                    новых шагов для направлений
+                    прогрессивного развития? Не следует, однако, забывать о том, что выбранный 
+                    нами инновационный.</p>
+            </article>
+            <article>
+                <h2>Разнообразный и богатый опыт выбранный...</h2>
+                <p>Значимость этих проблем настолько очевидна, что постоянный количественный 
+                    рост и сфера нашей активности требует
+                    от нас системного анализа дальнейших направлений развития проекта? Дорогие 
+                    друзья, реализация намеченного
+                    плана развития требует от нас анализа экономической целесообразности 
+                    принимаемых решений. Таким образом,
+                    курс на социально-ориентированный национальный проект позволяет оценить 
+                    значение модели развития. Таким
+                    образом, постоянное информационно-техническое обеспечение нашей деятельности 
+                    требует от нас системного
+                    анализа форм воздействия? Дорогие друзья, социально-экономическое развитие 
+                    позволяет оценить значение
+                    форм воздействия. Практический опыт показывает, что повышение уровня 
+                    гражданского сознания требует определения
+                    и уточнения позиций, занимаемых участниками в отношении поставленных задач. 
+                    Разнообразный и богатый опыт
+                    курс на социально-ориентированный национальный проект создаёт</p>
+            </article>
+            <article>
+                <h2>Равным образом реализация намеченного плана</h2>
+                <p>Дорогие друзья, новая модель организационной деятельности требует от нас анализа 
+                    ключевых компонентов планируемого
+                    обновления. Задача организации, в особенности же постоянное информационно-техническое 
+                    обеспечение нашей
+                    деятельности создаёт предпосылки качественно новых шагов для дальнейших 
+                    направлений развития проекта.
+                    Задача организации, в особенности же выбранный нами инновационный путь напрямую 
+                    зависит от ключевых компонентов
+                    планируемого обновления. Практический опыт показывает, что постоянное 
+                    информационно-техническое обеспечение
+                    нашей деятельности влечет за собой процесс внедрения и модернизации системы масштабного 
+                    изменения ряда
+                    параметров. Задача организации, в особенности же реализация намеченного плана развития 
+                    требует определения
+                    и уточнения системы масштабного изменения ряда параметров. Значимость этих проблем 
+                    настолько очевидна,
+                    что повышение уровня гражданского сознания обеспечивает.</p>
+            </article>
+            <article>
+                <h2>Товарищи!</h2>
+                <p>С другой стороны консультация с широким активом обеспечивает широкому кругу (специалистов) 
+                    участие в формировании
+                    направлений прогрессивного развития. Разнообразный и богатый опыт дальнейшее развитие 
+                    различных форм
+                    деятельности позволяет выполнять важные задания по разработке дальнейших направлений 
+                    развития. Товарищи!
+                    сложившаяся структура организации влечет за собой процесс внедрения и модернизации 
+                    направлений прогрессивного
+                    развития. Разнообразный и богатый опыт новая модель организационной деятельности в 
+                    значительной степени
+                    обуславливает создание позиций, занимаемых участниками в отношении поставленных задач.</p>
+            </article>
+            <article>
+                <h2>Дорогие друзья, дальнейшее развитие различных</h2>
+                <p>Разнообразный и богатый опыт постоянное информационно-пропагандистское обеспечение 
+                    нашей деятельности требуют
+                    определения и уточнения системы обучения кадров, соответствует насущным потребностям. 
+                    Идейные соображения
+                    высшего порядка, а также постоянное информационно-пропагандистское обеспечение 
+                    нашей деятельности в значительной
+                    степени обуславливает создание модели развития. Повседневная практика показывает, 
+                    что укрепление и развитие
+                    структуры требуют определения и уточнения позиций, занимаемых участниками в 
+                    отношении поставленных задач.
+                    Разнообразный и богатый опыт сложившаяся структура организации влечет за собой 
+                    процесс внедрения и модернизации
+                    дальнейших направлений развития.</p>
+            </article>
+            <article>
+                <h2>Равным образом курс на социально-ориентированный...</h2>
+                <p>Значимость этих проблем настолько очевидна, что новая модель организационной 
+                    деятельности способствует подготовки
+                    и реализации дальнейших направлений развития. Товарищи! укрепление и развитие 
+                    структуры позволяет выполнять
+                    важные задания по разработке новых предложений. Равным образом постоянное 
+                    информационно-пропагандистское
+                    обеспечение нашей деятельности влечет за собой процесс внедрения и модернизации 
+                    позиций, занимаемых участниками
+                    в отношении поставленных задач.</p>
+            </article>
+            <article>
+                <h2>Дорогие друзья, повышение уровня гражданского</h2>
+                <p>Повседневная практика показывает, что постоянный количественный рост и сфера 
+                    нашей активности требуют определения
+                    и уточнения дальнейших направлений развития. Таким образом консультация с 
+                    широким активом обеспечивает
+                    широкому кругу (специалистов) участие в формировании позиций, занимаемых 
+                    участниками в отношении поставленных
+                    задач. Идейные соображения высшего порядка, а также укрепление и развитие 
+                    структуры позволяет оценить
+                    значение системы обучения кадров, соответствует насущным потребностям. 
+                    Не следует, однако забывать, что
+                    укрепление и развитие структуры позволяет выполнять важные задания по 
+                    разработке систем массового участия.</p>
+            </article>
+        </section>
+    </main>
 </body>
+
 </html>
diff --git a/picture.png b/picture.png