cover

varyandis · Oct 16, 2023 · 1e4533c · 1e4533c
1 parent a92c71b
commit 1e4533c
Show file tree

Hide file tree

Showing 2 changed files with 116 additions and 5 deletions.
diff --git a/index.html b/index.html
@@ -13,9 +13,7 @@
     <header class="header">
       <nav class="header__menu">
         <ul class="header__links-list">
-          <li
-            class="header__links-list-item header__links-list-item_no-bullit "
-          >
+          <li class="header__links-list-item header__links-list-item_no-bullit">
             <a class="header__link_active" href="#0">главная</a>
           </li>
           <li class="header__links-list-item">
@@ -46,7 +44,29 @@
       </address>
     </header>
     <main>
-      <section class="cover">123</section>
+      <section class="cover">
+        <div class="overlay"></div>
+        <h1 class="cover__title">
+          <p>
+          <span class="aligned-text">о</span>
+          <span class="aligned-text letter-spacing-extended">но</span>
+        </p>   
+        <p class="aligned-text_center">
+          <span class="aligned-text">те</span>
+          <span class="aligned-text letter-spacing-extended">бе</span>
+        </p>
+        <p class="aligned-text_right">
+          <span class="aligned-text letter-spacing-extended">н</span>
+          <span class="aligned-text">ад</span>
+          <span class="aligned-text no-letter-spacing">о</span></p>
+        </h1>
+        <h2 class="cover__description">
+          <p class="cover__description-text">
+            Аукцион вещей, в которые никто не верил
+          </p>
+          <p class="bet-button">Сделать ставку</p>
+        </h2>
+      </section>
       <section class="lots">123</section>
       <section class="about">123</section>
     </main>

diff --git a/styles/style.css b/styles/style.css
@@ -64,9 +64,100 @@
 .cover {
   border: 1px solid #000000;
   padding: 165px 50px 50px;
-  background: #dacfcf;
+  background-image: url(../images/cover.jpg);
+  background-position: center;
+  background-size: cover;
+  position: relative;
+  z-index: 0;
+}
+
+.overlay {
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0 0 0 / 0.6);
+  z-index: 0;
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  z-index: -1;
+}
+
+.cover__title {
+  color: #fff;
+  font-family: Raleway;
+  font-size: 0;
+  font-style: normal;
+  font-weight: 700;
+  text-transform: uppercase;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
 }
 
+.aligned-text {
+  letter-spacing: 30px;
+  font-size: 100px;
+}
+
+.letter-spacing-extended {
+  letter-spacing: 60px;
+  font-size: 100px;
+  line-height: 100%;
+}
+
+.aligned-text_center {
+  text-align: center;
+  line-height: 100%;
+}
+
+.aligned-text_right {
+  text-align: right;
+  line-height: 100%;
+}
+
+.no-letter-spacing {
+  letter-spacing: 0;
+}
+
+.cover__description  {
+display: flex;
+justify-content: end;
+margin-top: 135px;
+}
+
+.cover__description-text {
+  color: #FFF;
+text-align: center;
+font-family: Raleway;
+font-size: 22px;
+font-style: normal;
+font-weight: 400;
+line-height: 28px; /* 127.273% */
+text-transform: uppercase;
+align-self: center;
+word-spacing: 18px;
+}
+
+.bet-button {
+  margin-left: 78px;
+  padding: 12px 32px;
+  color: #FFF;
+  background: transparent;
+
+text-align: center;
+font-family: Raleway;
+font-size: 22px;
+font-style: normal;
+font-weight: 400;
+line-height: normal;
+text-transform: uppercase;
+border: 1px solid #FFF;
+}
+
+
+
+
+
 .lots {
   border: 1px solid #000000;
   padding: 180px 50px 181px;