yishak abrham

@yishak621

All comments

Steven•40
@steven-leonSubmitted almost 2 years ago
order-summary-component-main
1
yishak abrham•2,150
@yishak621Posted almost 2 years ago
The svg background image should be dragged upward ....use background-position-y property
0
Catalin Banici•260
@CatalinBaniciSubmitted almost 2 years ago
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
2
yishak abrham•2,150
@yishak621Posted almost 2 years ago
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

@CatalinBaniciSubmitted almost 2 years ago

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

yishak abrham•2,150

@yishak621Posted almost 2 years ago

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" 
                 />

Freshuuu1218•720

@Freshuuu1218Submitted almost 2 years ago

Order summary component

yishak abrham•2,150

@yishak621Posted almost 2 years ago

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

João Paulo Coimbra•50

@joaopaulo-webSubmitted almost 2 years ago

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

yishak abrham•2,150

@yishak621Posted almost 2 years ago

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

Nathan Turkson•120

@nathan-codesSubmitted almost 2 years ago

I would appreciate some feedback on best practices for css styling and semantic html.

What didn't I do right? What can I improve? Thanks a lot in advance.

Mobile first Order summary challenge complete

yishak abrham•2,150

@yishak621Posted almost 2 years ago

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

luisoliverosrdn•70
@luisoliverosrdnSubmitted almost 2 years ago
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
@yishak621Posted almost 2 years ago
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
ADERINWALE BASIT•70
@DevBasitoSubmitted almost 2 years ago
i found state management difficult which led me right into redux-toolkits den
Product Page and Cart using react and redux-toolkit
2
yishak abrham•2,150
@yishak621Posted almost 2 years ago
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•40
@ShannonIantheSubmitted almost 2 years ago
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
1
yishak abrham•2,150
@yishak621Posted almost 2 years ago
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•320

@Efobi-FrancisSubmitted almost 2 years ago

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

yishak abrham•2,150

@yishak621Posted almost 2 years ago

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

Krzysztof Rozbicki•370
@KrzysztofRozbickiSubmitted almost 2 years ago
Do you think it is a good practice to use SCSS and BEM even for such small projects?
Responsive product page using CSS Flexbox
1
yishak abrham•2,150
@yishak621Posted almost 2 years ago
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

@almeida883Submitted almost 2 years ago

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

yishak abrham•2,150

@yishak621Posted almost 2 years ago

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

All comments

order-summary-component-main

Interactive Card Details Form with React, Formik and Yup

Interactive Card Details Form with React, Formik and Yup

Order summary component

My solution to the Order Summary Component Main

Mobile first Order summary challenge complete

NFT Card Preview using Flexbox

Product Page and Cart using react and redux-toolkit

SunnySide Agency | SASS Project

Responsive Landing Page using Tailwind

Responsive product page using CSS Flexbox

Profile card component