hero edits

ElizabethBil · Oct 4, 2023 · 5634fba · 5634fba
1 parent 875fddc
commit 5634fba
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 26 deletions.
diff --git a/src/css/hero.css b/src/css/hero.css
@@ -1,4 +1,4 @@
-@media screen and (max-width: 374px) {
+
   .hero-icon-img {
     display: none;
   }
@@ -18,8 +18,32 @@
   .hero-title-span {
     color: var(--white, #ecd979);
   }
+
+.hero-button {
+border: none;
+display: flex;
+justify-content: center;
+align-items: center;
+min-width: 145px;
+height: 49px;
+padding: 14px 36px;
+border-radius: 15px;
+border: 1px solid rgba(252, 249, 249, 0.10);
+background-color: transparent;
+outline: transparent;
+font-size: 14px;
+font-weight: 600;
+letter-spacing: -0.04em;
+text-transform: uppercase;
+margin-left: auto;
+margin-right: auto;
+color: var(--white, #FCF9F9);
+transition: border-color 250ms cubic-bezier(0.4, 0, 0.2, 1);
+}
 
-  .hero-button {
+
+
+  /* .hero-button {
     display: inline-flex;
     height: 49px;
     width: auto;
@@ -33,7 +57,7 @@
     background-color: transparent;
     margin-bottom: 20px;
     margin-left: 70px;
-  }
+  } */
 
   .hero-btn-text {
     color: var(--white, #fcf9f9);
@@ -46,11 +70,6 @@
     text-transform: uppercase;
   }
 
-  .hero-svg {
-    width: 26px;
-    height: 10px;
-  }
-
   .hero-img {
     margin-top: 20px;
     border-radius: 4px;
@@ -60,7 +79,7 @@
     border-radius: 4px;
     background: url(/src/img/hero/girl.jpg), lightgray 50% / cover no-repeat;
   }
-}
+
 
 @media screen and (min-width: 375px) {
   .hero-icon-img {
@@ -112,11 +131,6 @@
     text-transform: uppercase;
   }
 
-  .hero-svg {
-    width: 26px;
-    height: 10px;
-  }
-
   .hero-img {
     margin-top: 20px;
     border-radius: 4px;

diff --git a/src/partials/hero.html b/src/partials/hero.html
@@ -6,7 +6,7 @@ <h1 class="hero-title">
     </h1>
     <button class="hero-button">
       <p class="hero-btn-text">Order</p>
-      <svg class="hero-svg">
+      <svg class="hero-svg" width="26px" height="13px">
         <use class="hero-send-arrow" href="./img/icons.svg#icon-arrow"></use>
       </svg>
     </button>
@@ -24,15 +24,14 @@ <h1 class="hero-title">
       class="hero-img"
     />
   </div>
-  <div class="hero-icon-img">
-    <svg class="hero-svg-star" width="52" height="51">
-      <use class="hero-star" href="./img/icons.svg#icon-star"></use>
-    </svg>
-    <p class="hero-star-text">all embroidery is made by hand</p>
-    <img
-      class="hero-elipse"
-      src="./img/hero/veshyv.png"
-      alt="elipse-vyshyvanka"
-    />
-  </div>
+
+  <svg class="hero-svg-star" width="52" height="51">
+    <use class="hero-star" href="./img/icons.svg#icon-star"></use>
+  </svg>
+  <p class="hero-star-text">all embroidery is made by hand</p>
+  <img
+    class="hero-elipse"
+    src="./img/hero/veshyv.png"
+    alt="elipse-vyshyvanka"
+  />
 </section>