Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Log in with GitHub
OverviewSolutions16Comments200

All comments

  • yishak abrham• 2,150

    @yishak621

    Posted

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

    0
  • Catalin Banici• 260

    @CatalinBanici

    Submitted

    Hello!

    Please leave a feedback, what can I improve?

    I tried making a minimum of digits required for each number input with the .min() yup method, but it didn't work out very well, it was a bit buggy, if you know a better solution please let me know.

    Thanks!

    Interactive Card Details Form with React, Formik and Yup

    #react

    2

    yishak abrham• 2,150

    @yishak621

    Posted

    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

    0
  • Catalin Banici• 260

    @CatalinBanici

    Submitted

    Hello!

    Please leave a feedback, what can I improve?

    I tried making a minimum of digits required for each number input with the .min() yup method, but it didn't work out very well, it was a bit buggy, if you know a better solution please let me know.

    Thanks!

    Interactive Card Details Form with React, Formik and Yup

    #react

    2

    yishak abrham• 2,150

    @yishak621

    Posted

    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" 
                 />
    0
  • yishak abrham• 2,150

    @yishak621

    Posted

    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

    0
  • João Paulo Coimbra• 50

    @joaopaulo-web

    Submitted

    English Version:

    Hi! Here's another solution to another challenge.

    This was really cool to do, because I was able to manipulate the divs a lot and I got a result that was very close to what was proposed.

    Any suggestion, feel free to leave it below, it will be a pleasure to read!

    Versão Português:

    Olá! Aqui vai mais uma solução para mais um desafio.

    Esse foi bem legal de fazer, por que consegui manipular bastante as divs e cosnegui um resultado bem aproximado do que foi proposto.

    Qualquer sugestão, sintam-se a vontade em deixar ai embaixo, será um prazer ler!

    My solution to the Order Summary Component Main

    1

    yishak abrham• 2,150

    @yishak621

    Posted

    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

    1
  • yishak abrham• 2,150

    @yishak621

    Posted

    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

    0
  • luisoliverosrdn• 70

    @luisoliverosrdn

    Submitted

    Hello everyone!

    This is my solution for the challenge, I felt that I did a good job. The hardest part for me was to do the hover effect with the eye icon. I found a solution on Youtube which I used. In that video they applied the :hover selector on the father element instead of the element I wanted to apply it to. It worked perfectly but I don't know why it works that way.

    This is the HTML:

           <div class="card-img">
          <img
            src="./nft-preview-card-component-main/images/image-equilibrium.jpg"
          />
        
        <div class="img-overlay">
          <img
            src="./nft-preview-card-component-main/images/icon-view.svg"
            alt=""
          />
        </div>
        </div>

    And the CSS:

    .img-overlay{
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: hsla(178, 100%, 50%, 0.5);
  opacity: 0;
}

.card-img:hover .img-overlay{
  opacity: 1;
  cursor: pointer;
  transition: all ease-in-out 0.3s;
}

    Anyway, Happy coding! :)

    NFT Card Preview using Flexbox

    1

    yishak abrham• 2,150

    @yishak621

    Posted

    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

    0
  • yishak abrham• 2,150

    @yishak621

    Posted

    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 ....

    0
  • Shannon Mettry• 30

    @ShannonIanthe

    Submitted

    What did you find difficult while building the project? This was my first time working with SASS. SASS is amazing to work with as it makes your css easier to write. It lets you use variables, mathematical operations, mixins, loops, functions, imports, and other interesting functionalities that make writing CSS much more powerful.

    However, compiling the scss to css and running it with npm was quite difficult. Sometimes, I would try to run my build and there are problems with the script. There are still a couple things I would love to fix but right now the build is not running for reasons I have not found the answer to.

    Which areas of your code are you unsure of? Compiling the SASS to CSS, is the hardest thing for me. It works the first time I run it but when I try to run and compile it again, I can not longer do it.

    SunnySide Agency | SASS Project

    #sass/scss

    1

    yishak abrham• 2,150

    @yishak621

    Posted

    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

    0
  • Efobi Francis• 270

    @Efobi-Francis

    Submitted

    The part i found difficult during the project was when i tried to make the Learn More button. i had to apply three different technique during the process of finding a solution, it was challenging enough, but i'm glad i was able to fix it.

    Responsive Landing Page using Tailwind

    #tailwind-css

    2

    yishak abrham• 2,150

    @yishak621

    Posted

    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

    0
  • yishak abrham• 2,150

    @yishak621

    Posted

    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

    2
  • Hugo Almeida• 730

    @almeida883

    Submitted

    I need your help! I can't finish the exercise, the background doesn't stay static and I can't put an internal shadow on the blue patterned image at the top, can you help me? Grateful!

    Profile card component

    1

    yishak abrham• 2,150

    @yishak621

    Posted

    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

    1
  • yishak abrham• 2,150

    @yishak621

    Posted

    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

    0
  • Melvin Aguilar 🧑🏻‍💻• 61,460

    @MelvinAguilar

    Submitted

    Hi there 👋, I’m Melvin and this is my solution for this challenge. 🚀

    Help:

    • Any resource or suggestion on how to create or improve the accessibility of a switcher theme component is welcome; although this is the code for my component, I will be grateful for any suggestions.

    I added:

    • 🌔 Light and Dark mode
    • 🔧 Using localStorage to save theme preferences

    Built With:

    • React-JS
    • TailwindCSS
    • Yarn - Vite - Prettier

    Any suggestions on how I can improve and reduce unnecessary code are appreciated!

    Thank you. 😊✌️

    Intro section with dropdown navigation (React + Tailwind + Dark mode)

    #accessibility#react#tailwind-css

    11

    yishak abrham• 2,150

    @yishak621

    Posted

    Did u use pixel perfect extension ?

    0
  • Aldo Adabunu• 290

    @KwakuAldo

    Submitted

    This took me an awful lot of time to complete. But I had a lot of fun completing it(somehow)

    I would like to make the delete option in the cart functional so that it clears the content and displays the "Cart is empty" message.

    Also, the style for the cart content doesn't load properly, for example, if you open the cart when it is empty and proceed to load it up afterward, the elements tend to follow the empty cart styling, same with when you clear the cart and its supposed to be empty, both styles show at the same time.

    Lastly, the lightbox overlay, the bottoms, and the thumbnails are absolutely positioned, on screens larger than laptops, and the buttons tend to move out of position, I tried using media queries to fix this, but then it affects the layout on laptop screens.

    This project greatly helped me with my Javascript journey, I learned a lot and I look forward to learning more, so any feedback on how to improve my code is warmly welcome.

    Responsive e-commerce page with Tailwindcss and JavaScript

    #tailwind-css

    1

    yishak abrham• 2,150

    @yishak621

    Posted

    Good job buddy

    1
  • yishak abrham• 2,150

    @yishak621

    Posted

    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

    0
  • yishak abrham• 2,150

    @yishak621

    Posted

    It is not responsive for small screens

    0
  • HTLA• 110

    @HTLA380

    Submitted

    I am excited to submit my solution to the Country API Project on Frontend Mentor. I put a lot of hard work and effort into this project, and I am proud of the end result. I hope you will take the time to explore my website and see the dedication and effort I put into this project. I understand that no project is perfect and there may be some bugs or areas for improvement. If you come across any issues while exploring my website, please don't hesitate to let me know

    REST Countries API with color theme switcher

    #bootstrap

    1

    yishak abrham• 2,150

    @yishak621

    Posted

    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

    1
  • Muhammad Naufal Farras• 270

    @naufalf25

    Submitted

    Hello Frontend Mentor Community. This is my solutions for REST Countries API With Color Theme Switcher

    This project is build using HTML, JavaScript and helping for styling using TailwindCSS Framework. All data for countries list is from REST Countries API.

    This solutions has some features

    • Responsive design for all devices 📱💻
    • Can search country by name using search box 🔍
    • Can filtering country by their region ✨
    • There are two mode styling, light and dark mode 🌙🌞

    If you have suggestions for my solutions, you can just comment it below! 😄

    Countries list app using REST Countries API

    #tailwind-css

    1

    yishak abrham• 2,150

    @yishak621

    Posted

    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

    1
  • yishak abrham• 2,150

    @yishak621

    Posted

    It is not responsive for small screens

    0
  • Alvin• 140

    @alvyynm

    Submitted

    It was both fun and challenging to work on this project. It pushed me as far as API consumption is concerned. However, my biggest issue with the project is the number of API calls. Currently, the app is making 4 API calls (when you first load the site, when you click on a country and when you click on a border country). How can I optimize the site to reduce the number of API calls? I think my approach is not good in the case of a large number of concurrent users.

    REST Countries API site with React, React-router and Tailwind

    #react#react-router#tailwind-css#axios

    2

    yishak abrham• 2,150

    @yishak621

    Posted

    The border countries must be in there common name according to the design ...so u have one API call left

    0
  • yishak abrham• 2,150

    @yishak621

    Posted

    As always its great....i just wanna ask how did u cut the edges of small cards to the outer (i tried Border radius ) but it cut to the inside

    0
  • Smile1337• 130

    @Ismail1802

    Submitted

    feel free to comment and like tugay helped me

    Countries-api

    #fetch#react#react-router

    1

    yishak abrham• 2,150

    @yishak621

    Posted

    Good work but also the border countries must be clickable button and when they clicked they should take the user to that specific country page

    0
  • Priscila PC• 60

    @pripc

    Submitted

    Hi everyone! Here is my solution for this challenge! 1)I'd like to know how to achieve the correct design of the "contact" button. 2) I also would like to know how to insert that line below the "Learn more" button.

    Desktop version Sunnyside Agency Landing Page Main

    2

    yishak abrham• 2,150

    @yishak621

    Posted

    Check my solution for these project ...it will help u for the buttons specially

    1