html content + the first step of cssd

index.html

@@ -13,100 +13,122 @@
     <header class="header section">
       <nav class="header_menu">
         <ul class="header_links nav_links">
-          <li></li>
-          <li></li>
-          <li></li>
+          <li>главная</li>
+          <li>посмотреть лоты</li>
+          <li>об аукционе</li>
         </ul>
       </nav>
-      <a href="" class="header_logo">
-        <img 
-          src="" 
-          alt="" 
+      <a href="/" class="header_logo">
+        <img
+          src="/images/logo-black.svg"
+          alt="Оно тебе надо"
           class="header_image" />
       </a>
       <ul class="contacts">
-        <li class="contacts-element"></li>
-        <li class="contacts-element"></li>
-        <li class="contacts-element"></li>
+        <li class="contacts-element">+9 999 555 5555</li>
+        <li class="contacts-element">
+          <a href="mailto:[email protected]">[email protected]</a>
+        </li>
+        <li class="contacts-element">наб. Принсенграхт 263-265, Амстердам</li>
       </ul>
     </header>
     <main class="content">
       <section class="art section">
         <h1 class="art_title">
-          <span class="art_span"></span>
-          <span class="art_span text-center"></span>
-          <span class="art_span text-right"></span>
+          <span class="art_span">оно</span>
+          <span class="art_span text-center">тебе</span>
+          <span class="art_span text-right">надо</span>
         </h1>
-        <p class="art_description"></p>
-        <button class="art_button"></button>
+        <p class="art_description">Аукцион    вещей,    в    которые    никто    не     верил</p>
+        <button class="art_button">Сделать ставку</button>
       </section>
       <section class="lots section light_section">
-        <h2 class="lots_title"></h2>
+        <h2 class="lots_title">Лоты</h2>
         <ul class="lots_list">
           <li>
             <div class="lots_card">
-              <h3 class="lots_card-title"></h3>
-              <p class="lots_card-text"></p>
+              <h3 class="lots_card-title">Фильм режиссёра, который  бросил киношколу</h3>
+              <p class="lots_card-text">Не просто бросил, а ушёл с первой лекции. Какой была бы ваша ставка, если бы вы не знали, что режиссёр — Пол Томас Андерсон?</p>
             </div>
           </li>
           <li>
             <div class="lots_card">
-              <h3 class="lots_card-title"></h3>
-              <p class="lots_card-text"></p>
+              <h3 class="lots_card-title">Книга, где описан один скучный день из жизни рекламного агента</h3>
+              <p class="lots_card-text">Объёмом почти в тысячу страниц. Иногда без знаков препинания и с переходами на древнеанглийский. В ней одновременно рассказывается о 16 июня 1904 года и об истории литературы, начиная с античных времён. И это всё накладывается на эпическую поэму Гомера. Сколько бы вы поставили на «Улисса» Джеймса Джойса?</p>
             </div>
           </li>
           <li>
             <div class="lots_card">
-              <h3 class="lots_card-title"></h3>
-              <p class="lots_card-text"></p>
+              <h3 class="lots_card-title">Картина, которую повторит даже 5-летний сын маминой подруги</h3>
+              <p class="lots_card-text">Ну действительно, там линия, тут кружочек, а здесь и вовсе что-то похожее на инфузорию-туфельку. Никаких полей, лесов, котиков… Сколько бы вы на такое поставили, если бы не знали, что это — одна из революционных работ Кандинского?</p>
             </div>
           </li>
         </ul>
-        <button class="lots_button"></button>
+        <button class="lots_button">посмотреть больше</button>
       </section>
       <section class="about section light_section">
         <div class="logo_circle">
-          <img 
-            src="" 
-            alt=""
+          <img
+            src="/images/logo-white.svg"
+            alt="Оно тебе надо"
             class=""
             >
         </div>
         <div class="about_description">
           <h3 class="about_title">
-
+            Об аукционе
           </h3>
           <p class="about_paragraph">
-
+            Здесь вы не встретите очередное пафосное собрание невероятно дорогого антиквариата. Наши лоты вообще не должны были попасть ни на один аукцион. Потому что кому нужен дневник девочки-подростка или картина, которую может нарисовать даже ребёнок? Кому нужны все эти странные вещи, созданные любителями?
           </p>
           <p class="about_paragraph">
-
+            Слишком сложные или, наоборот, слишком простые. Опережающие своё время. В пух и прах растерзанные критиками. Непринятые и непонятые. Когда-то они казались просто неудачными. Но, несмотря на критику, кажущуюся простоту или сложность, сейчас без этих лотов невозможно представить современную культуру. Когда в эти вещи не верил никто, продолжали верить их создатели. И сейчас эти лоты стали культовыми.
           </p>
         </div>
       </section>
     </main>
     <footer class="footer section">
       <ul class="contacts">
-        <li class="contacts-element"></li>
-        <li class="contacts-element"></li>
-        <li class="contacts-element"></li>
+        <li class="contacts-element">+9 999 555 5555</li>
+        <li class="contacts-element">[email protected]</li>
+        <li class="contacts-element">
+          <a href="mailto:[email protected]">[email protected]</a>
+        </li>
       </ul>
       <nav class="footer_menu">
         <ul class="footer_links nav_links">
-          <li></li>
-          <li></li>
-          <li></li>
+          <li>главная</li>
+          <li>посмотреть лоты</li>
+          <li>об аукционе</li>
         </ul>
       </nav>
       <ul class="footer_social">
         <li>
-          <a href="#"></a>
+          <a href="#">
+            <img
+              src="/images/yt.svg"
+              alt=""
+              class=""
+            >
+          </a>
         </li>
         <li>
-          <a href="#"></a>
+          <a href="#">
+            <img
+              src="/images/vk.svg"
+              alt=""
+              class=""
+            >
+          </a>
         </li>
         <li>
-          <a href="#"></a>
+          <a href="#">
+            <img
+              src="/images/pinterest.svg"
+              alt=""
+              class=""
+            >
+          </a>
         </li>
       </ul>
     </footer>

styles/style.css

@@ -1 +1,27 @@
-/* место для вашего кода */
+body {
+  margin: 0;
+  font-family: Raleway, sans-serif, Arial;
+  font-weight: 400;
+  background-color: #fff;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+ul,
+ol,
+blockquote {
+  margin: 0;
+  padding: 0;
+}
+
+.section {
+  box-sizing: border-box;
+  width: 100%;
+  max-width: 1440px;
+  margin: auto;
+}