updating background

OlamideMustapha · Jan 25, 2021 · ae40e7e · ae40e7e · vercel · Jan 25, 2021
1 parent 26b9c6a
commit ae40e7e
Show file tree

Hide file tree

Showing 5 changed files with 111 additions and 26 deletions.
diff --git a/index.html b/index.html
@@ -31,10 +31,19 @@ <h1>
     </div>
   </main>
   <footer class="footer">
-
+    <div class="footer__social-icons">
+      <!-- FaceBook Icon -->
+      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path fill="#8385A9" d="M22.675 0H1.325C.593 0 0 .593 0 1.325v21.351C0 23.407.593 24 1.325 24H12.82v-9.294H9.692v-3.622h3.128V8.413c0-3.1 1.893-4.788 4.659-4.788 1.325 0 2.463.099 2.795.143v3.24l-1.918.001c-1.504 0-1.795.715-1.795 1.763v2.313h3.587l-.467 3.622h-3.12V24h6.116c.73 0 1.323-.593 1.323-1.325V1.325C24 .593 23.407 0 22.675 0z"/></svg>
+
+      <!-- Pinteres Icon -->
+      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path fill="#8385A9" d="M12 0C5.373 0 0 5.372 0 12c0 5.084 3.163 9.426 7.627 11.174-.105-.949-.2-2.405.042-3.441.218-.937 1.407-5.965 1.407-5.965s-.359-.719-.359-1.782c0-1.668.967-2.914 2.171-2.914 1.023 0 1.518.769 1.518 1.69 0 1.029-.655 2.568-.994 3.995-.283 1.194.599 2.169 1.777 2.169 2.133 0 3.772-2.249 3.772-5.495 0-2.873-2.064-4.882-5.012-4.882-3.414 0-5.418 2.561-5.418 5.207 0 1.031.397 2.138.893 2.738a.36.36 0 01.083.345l-.333 1.36c-.053.22-.174.267-.402.161-1.499-.698-2.436-2.889-2.436-4.649 0-3.785 2.75-7.262 7.929-7.262 4.163 0 7.398 2.967 7.398 6.931 0 4.136-2.607 7.464-6.227 7.464-1.216 0-2.359-.631-2.75-1.378l-.748 2.853c-.271 1.043-1.002 2.35-1.492 3.146C9.57 23.812 10.763 24 12 24c6.627 0 12-5.373 12-12 0-6.628-5.373-12-12-12z"/></svg>
+
+      <!-- Instagram Icon -->
+      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path fill="#8385A9" d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z"/></svg>
+    </div>
     <div class="attribution">
       Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. 
-      Coded by <a href="#">Your Name Here</a>.
+      Coded by <a href="#">Akinkunmi Mustapha</a>.
     </div>
 
   </footer>

diff --git a/src/styles/css/style.css b/src/styles/css/style.css
diff --git a/src/styles/css/style.css.map b/src/styles/css/style.css.map
diff --git a/src/styles/sass/partials/_flip_card.sass b/src/styles/sass/partials/_flip_card.sass
@@ -23,7 +23,7 @@ $card_bg_dark: $darkDesaturatedBlue // #22223a
 
 
 $dot_bg: #1a1a24
-$dot_posY: 45%
+$dot_posY: 37%
 $dot_posX: -4px
 
 
@@ -45,12 +45,15 @@ $dot_posX: -4px
   &:not(:last-child)
     margin: 0px 20px 0px 0px
   @include flip-size
+  height: 0.72em * 2.9
+
 
 
   > div
     position: relative
     display: inline-block
     overflow: hidden
+    height: 0.72em * 2.3
 
   &__dot
     position: absolute
@@ -80,16 +83,17 @@ $dot_posX: -4px
     line-height: 0.95
 
   &__name
-    font-size: .8vw
-    @include breakpoint-down (small)
-      font-size: 8px
+    // font-size: .8vw
+    font-size: 7px
+    @include breakpoint-up (medium)
+      font-size: 9px
     @include breakpoint-up (xlarge)
-      font-size: .6vw
+      font-size: 11px
 
     font-weight: 600
     letter-spacing: .3em
     text-transform: uppercase
-    padding-top: 10px
+    // padding-top: 5px
     color: $grayishBlue
 
 .card
@@ -116,8 +120,8 @@ $dot_posX: -4px
     left: 0
     filter: brightness(100%)
     background: $card_bg_light
-    border-radius: 0 0 4px 4px
-    // box-shadow: 0rem 0.7rem #1a1a24
+    border-radius: 0 0 5px 5px
+    box-shadow: .5px 7px #191924
     pointer-events: none
     overflow: hidden
 

diff --git a/src/styles/sass/partials/_main.sass b/src/styles/sass/partials/_main.sass
@@ -1,5 +1,5 @@
-$footer_h: 20%
-$main_h: 80%
+$footer_h: 30%
+$main_h: 70%
 
 html
   &, & *
@@ -12,8 +12,7 @@ body
   font-size: 14px
   font-weight: 700
   @include flex-column (space-between, center)
-  background-image:  linear-gradient(180deg, #191A24 17%, #1e1f29 51%,#191a24db 101%, #fb6087 10%)
-  background-color: $softRed
+  background-image: linear-gradient(180deg, #191A24 17%, #1e1f29 51%, #2b212d 83%)
   height: 100vh
 
   .main 
@@ -28,6 +27,8 @@ body
 
     &__header
       padding-top: 0px
+      @include breakpoint-down (small)
+        max-width: 350px
       h1
         font-size: 18px
         @include breakpoint-up(medium)
@@ -39,13 +40,40 @@ body
 
 
   .footer
+    @include flex-column (flex-end, center)
     background-image: url("../../../images/pattern-hills.svg")
     // background-position: bottom center
+
+    @include breakpoint-down(small)
+      background-repeat: no-repeat
+      background-size: cover
+      background-position: -796px 0px
+
     background-repeat: no-repeat
+    background-position: center bottom
     background-size: 100%
     width: 100vw
     height: $footer_h
 
+    &__social-icons
+      @include flex-row (space-between, center)
+      margin: 30px
+      width: 130px
+      svg path
+        transition: all 1s ease-in-out
+      svg:hover path
+        fill: $softRed
+    .attribution
+      opacity: 0.3
+      color: $softRed
+      font-weight: 100
+      transition: all 1s ease-in-out
+      a
+        color: inherit
+      &:hover
+        opacity: 1
+
+
 
 .container
   padding: 25px