Skip to content
OverviewSolutions
16
Comments
199

yishak abrham

@yishak621Ethiopia2,150 points

Holla everyone , I'm Yishak Abrham from Ethiopia i'm addicted to frontend designs! Contact me using github👉#https://github.com/yishak621/interactive-rating-card Netlify👉#https://app.netlify.com/sites/dropdownnew/overview Gmail👉#yishakabrham621@gmail.com

I’m currently learning...

React and node.js

Latest solutions

View more solutions

Latest comments

  • yishak abrham•2,150
    @yishak621

    The svg background image should be dragged upward ....use background-position-y property

  • yishak abrham•2,150
    @yishak621

    By the way i have a question ...how did u manage the card number space after 4 digits each time ...i couldn't figure out how to do that

  • yishak abrham•2,150
    @yishak621

    Why don't u use maxlength attribute in the input

                    <label for="cvc">cvc</label> 
                 <input 
                   id="input-cvc" 
                   type="tel" 
                   placeholder="e.g 123" 
                   required="required" 
                   maxlength="3" 
                 />
  • yishak abrham•2,150
    @yishak621

    good job bro ...but One basic thing 1-the svg background must be dragged upward so use a background-position-y property For example -for large screens

    @media screen and (min-width: 800px) { 
   .center { 
     display: flex; 
     justify-items: center; 
     background: url(./images/pattern-background-desktop.svg) no-repeat top; 
     background-size: contain; 
     background-position-y: -30%;
    Marked as helpful
  • yishak abrham•2,150
    @yishak621

    good job bro ...but Two basic things 1-the svg background must be dragged upward so use a background-position-y property For example -for large screens

    @media screen and (min-width: 800px) { 
   .center { 
     display: flex; 
     justify-items: center; 
     background: url(./images/pattern-background-desktop.svg) no-repeat top; 
     background-size: contain; 
     background-position-y: -30%;

    2-the background-color should also applied to fill the rest space so use a background-color property for the body or wrapper div

    body { 
   font-family: 'Red Hat Display', sans-serif; 
   margin: 0; 
   background-color: hsl(225, 100%, 94%); 
 }
    Marked as helpful
  • yishak abrham•2,150
    @yishak621

    good job bro ...but Two basic things 1-the svg background must be dragged upward so use a background-position-y property For example -for large screens

    @media screen and (min-width: 800px) { 
   .center { 
     display: flex; 
     justify-items: center; 
     background: url(./images/pattern-background-desktop.svg) no-repeat top; 
     background-size: contain; 
     background-position-y: -30%;

    2-the background-color should also applied to fill the rest space so use a background-color property for the body or wrapper div

    body { 
   font-family: 'Red Hat Display', sans-serif; 
   margin: 0; 
   background-color: hsl(225, 100%, 94%); 
 }
    Marked as helpful
View more comments