Skip to content
OverviewSolutions
16
Comments
199
yishak abrham
@yishak621

All 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
  • yishak abrham•2,150
    @yishak621

    Its simple you have block elements , card-img and card-overlay ..so you align the card overlay div above the card-img by using position absolute (we can also use psudoelements before and after) but in these case lets learn about absolute position ....so the normal state of the image overlay wil be opacity=0 and when we hover on the card img the image overlay will be opacity=1 ...thats the hole logic in these project .....

    Focus on these position->absolute Background color and img in the card-overlay

  • yishak abrham•2,150
    @yishak621

    To master react u must design these type of easy projects by pure JavaScript ....so try these challenge by JavaScript and you will redesign it by any framework u like ....

  • yishak abrham•2,150
    @yishak621

    To compile sass/scss u can use simply a Visual studio code extension Live Sass Compiler which runs automatically after u save a scss file ....

    Marked as helpful
  • yishak abrham•2,150
    @yishak621

    I use samp element inside button which will hold the text of btn learn and i add psudo elements in the button to add a color background for the button

                <button class="btn btn-learn"><samp> learn more</samp></button>

    in the css

    .btn-learn { 
   padding: 0.2rem 0.5rem; 
   border-radius: 15px; 
   z-index: 1; 
   background-color: transparent; 
   text-transform: uppercase; 
   position: relative !important; 
   overflow: hidden !important; 
 } 
  
 .btn-learn::after { 
   content: ""; 
   position: absolute; 
   left: 0; 
   top: 0; 
   height: 230%; 
   width: 100%; 
   background-color: hsl(51deg, 100%, 49%); 
   transition: 0.5s; 
   transform: translate(0%, 25%); /*translate x and y*/ 
   opacity: 0.4; 
   z-index: -1; 
 } 
  
 .btn-learn:hover::after { 
   transform: translate(0%, 20%); 
   opacity: 1; 
 } 
  
 .btn-learn samp { 
   position: relative; 
   font-weight: 900; 
   font-family: "Fraunces", serif; 
   letter-spacing: 0.05em; 
   font-size: 0.8rem; 
 }

    i added a hover effect which makes it cool ...u can checkout my solution to see the output

    Marked as helpful
  • yishak abrham•2,150
    @yishak621

    Since the target of these platform is to practice every aspect of front end dev environment i try to implement any new ways in every projects even if it is small like these or big like e commerce ...so use scss/sass and any css naming conventions to practice

    Marked as helpful
  • yishak abrham•2,150
    @yishak621

    Add svg backgrounds as a psudoelements

    /*psuedo elments*/ 
 .container:before, 
 .container:after { 
   position: absolute; 
   content: ''; 
   width: 100vw; 
   height: 100vh; 
   background-size: auto; 
   transform: translate(-50%, -50%); /*to the left and top*/ 
  
   z-index: -1; 
 } 
 /*adding the top svg before the container*/ 
 .container:before { 
   top: 0; 
   left: 0; 
   background: url('/images/bg-pattern-top.svg') no-repeat bottom right; /*to expand to bottom and right*/ 
 } 
 /*adding the bottom svg after the container*/ 
 .container:after { 
   top: 100%; 
   left: 100%; 
   background: url('./images/bg-pattern-bottom.svg') no-repeat top left; /*to expand to top and left*/ 
 }
    Marked as helpful
  • yishak abrham•2,150
    @yishak621

    9/10 the card should be at the center of the screen use flex or grid to center

    /*main container*/ 
 .center { 
   display: flex; 
   justify-content: center; 
   align-items: center; 
   height: 100vh; 
   background: var(--color-second); 
 }
    Marked as helpful
  • yishak abrham•2,150
    @yishak621

    Did u use pixel perfect extension ?

  • yishak abrham•2,150
    @yishak621

    Good job buddy

  • yishak abrham•2,150
    @yishak621

    Its great the layouts and everything but when we come to the validation error messages there is a little bug to fix ....for the card number and month inputs ,when the user enters invalid input the text must refer what type of mistake happen by a user eg. invalid month input or 'format should be like these '...for example i use moment js library to validate the month and year so the error message will be changed according to error type

    //individual validation for month and year using moment.js 
 function Validate(input, type, format) { 
   return input.addEventListener('input', () => { 
     if (moment(input.value, `${format}`, true).isValid()) { 
       hideErrorText(dateErrorMessage); 
       return true; 
     } else { 
       dateErrorMessage.textContent = `the ${type} format should be like these 05`; 
       dateErrorMessage.classList.add('show'); 
     } 
   }); 
 } 
  
 Validate(monthInput, 'Month', 'MM'); 
 Validate(yearInput, 'Year', 'YY');
    Marked as helpful
  • yishak abrham•2,150
    @yishak621

    It is not responsive for small screens

  • yishak abrham•2,150
    @yishak621

    Everything is awesome the only basic thing missed out is the border countries should be a clickable button and when u click it it should take u that specific country page

    Marked as helpful