All solutions

Where have you been all that Times ?

Well trying to catch fishes, i have a bad sensation like someone might want to fool me. Need a Calculator, to see how well can i sell theses fishes.

Funny! this scene ya! it's me that are going to fool you man! You're not aware of how bad i look for it. hihi , joking.

Good Sunday to all my Fellow.

Fishes on the net

I have given this shot, i don't know if it would be goods to You, but have a look .

I made this calculator using bunch properties in state constructor component of react, indulge, indulge me if this method is of one brillant, i'm newer and i have to set some understanding.

For the rest this project was amazing i learned a lot. And what i want is to know if it is some better way, method to organize data past in react see under my README.md to find what i learned.

This project is one of great to test skills on Javascript proud to have challenged it, even if i felt very overwhelmed and want to give up when facing issue with result doesn't giving what expected, in the last moment ready to abandon i finally try something that has unlocked the situation. Never give up until you have tried all the solutions even the one who seems to you crazy.Sure, you will be surprise...

Once Again all to you Dude, and teams .

Good Beginning of the Week!

My Time

Long time ago I dream to be a like star in the sky m how beautiful it was that nightmare...huh that dream ! of course, but the time is so harsh that it's kind of fully horror surrounding me . But let us this pop harsh movie away life still need to enforce us to the goodness. That's why happy New Year to all members of the community..

Foods in the kettle This web static pages is not a one of this big design considered you know, but some kind of friendly view that i aim to offer to everyone . It's my first time with react and i got troubling time that issue :

digital envelope routines::unsupported

i finally find out that it has be one that has facing many users on react , angular with nodejs 17,

i have tried many solutions and advise but the one working at the end was to ** update** react-script --version in the root file package.json by running the Terminal command : npm install --save react-scripts@latest in vscode under the directory of my react app folder. It's has updated my react-script --version 2.0.4 to the version --5.0.1

that works well to establish a gh-pages branch on github repository and allow with that the website in github pages to be well viewed .

Hope you will enjoy it. Thanks Dude !

This project is one good recalling ability of understanding and practice layout from css .

This sharp ability by increasing disposal skills. And also demands to prepare about how to manage and store data.

But i hit a stone, this for a times now: How to succeed to make a shadowed body spreading under the hamburger menu when trigerred and such a way that it may looks good.

Method selected

I use body:before but i don't get the result expected. That means an expanded shadowed body going all over the body:before till the end of the webpage design

if someone has advices, i will be thankful for his recommendations .

Hope A nice Day to all and Thanks Dude!

when you hit a stone you need to ask yourself in which matter you are made...

This project bring a lot to handles with the interactives section having to be design. I come to the fact that a box with position:absolute cannot allow properties of z-index like is floating.

Bring up to Light

How to achieve a design lightbox/actives states lightbox that pop up like in the spec with a shadowed body. Have tried with body:before but seems is not the solution.

Thanks Dude!

fylo landing page is one perfect project to test yours skill in CSS Grid.

It's like swimming on real in one of your favourite beach.

However, my attention get redirected in one other place.

Can't we just for fews times laying looking at the sea

trouble water

i see the icon quote image disappearing when perfoming the responsive design of the Desktop either or not i'm giving specific width or height to it. Don't know why ? Definitively need a feed concerning the fact.

I also use a script source from fontawasome.com to display brand companies logo : facebook, twitter and instagram but without a valuable results . Wondering if it because of the usage to free kit code. IF someone have an explanation , please it will be worth for me to have an idea.

Thanks Dude!

some kinds of javascript snippet codes written allows to play with the three cards of our projects. But still mind if there is a way to made it appears smoothly either with the icon button left : < or the icon button right : >

Frame wood to settle how to make the displaying of each cards appearing smoothly, quite using Javascript without no library.? An idea ?

Thanks Dude !

Got some trouble with the proper position display of image inside his container, whenever resizing the page.

Seasoning for Food How to handle image properly with grid-templates-areas in order to achieve a good responsiveness

Thanks dude!

have an issue when trying to implement transition between the three showcase page, for a smooth appearing or disappearing of these pages when gaming with display property

i have tried javascript syntax as well as css for transition property but it didn't work. Then i clear these ones. i used pseudo selectors to style the shadowing effect of the main page when appearing either the modal-default-page or the thankfullness-page

missing key how can i setttle this matter to make the design perform with transition property

Thanks dude!

crossing the design of the input:range i didn_t figure out hoq to add the image icon-slider over the slider thumb. I used the suit selector before but it didn't work here is the snippets code:

#rate_views{
  -webkit-appearance: none;
  outline: none;
  border: none;
  background: var(--range-bg);
  color: var(--range-color);
  width: 80%;
  height: 7px;
  border-radius: 24px;
  
}

#rate_views::-webkit-slider-thumb{
  position: relative;
  top: 0;
  left: 0;
  -webkit-appearance: none;
  outline: none;
  border: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--range-color);
  cursor: pointer;
  box-shadow: 2px 3px 14px 0 var(--range-color);
}

#rate_views::-webkit-slider-thumb::before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 26px;
  height: 26px;
  background: url('../images/icon-slider.svg') no-repeat center center/cover ;
  background-repeat: no-repeat;
  background-position: center/cover;
}

seasoning needed

how to manage to make appear the background image icon-slider over the slider thumbs

Thanks Guys!

In this project, i styled the Tip calculator to perform a calculation after having entered firstly the amount of Bill and selected the interest hike(select Percentage) secondly. The results obtained are correct whatever number of people i entered thirdly in the field matching.

But When a new calculation considering the same amount of Bill but a new Select Tip Percentage choosed , the result obtained is wrong. Because it is taking in account the previous select Tip rather than the new, to perform the desired calculation.

let's see the flow:

1/ 1st Move inputNumberBill(Yes) ------> selecTipChoosed(Yes) ------> inputNumberPeopleWhatever(Yes) ------> Result : **correct**

1/ 2nd Move peviousInputNumberBill(Yes) ------> newSelecTipChoosed(Yes) ------> inputNumberPeopleWhatever(Yes) ------> Result : **Wrong** <here is the issue faced>

Food in kettle

i want to improve the workflow of my tip calculator in a way that it could perform the second Move getting through the **right result** ( not to burnt foods)

Thanks you Guys ./

I found the Project interesting to review skill particularly on webpage's layout.

Through it, i stumble across the fact that, the hamburger menu have to be designed necessarily with javascript.

But few things, till tease my curiosity after the whole wrapped project we are about to close.

hopeful star

Is it barely possible to make hovered animation with pictures floating out their original location ?

And if so, with which tools /frameworks could it be done ?

Thanks Guys !

When using my style i wanted first to use grid-tempaltes-areas , but i didn't get how to match the css style writed along the design with the expected design asked.

--> Then i switch to grid-templates-columns and grid templates-areas

melting with some :

sinews of war

When is it great to use the former or the latter type to implement Grid Tool ?

How to implement this project with:the css property grid-templates-areas especially when applying grid flow to the main section that part in 05 articles ?

Thanks Guys !

i have difficulties deal with ** svg files images size** in this solution using css flexbox. Especially in sections ** for_future** and **free_open **. I don't figure out how to match size of svg files on theses sections like given in the specs.

I looked through articles based on responsiveness of svg image even like it is assumed to be easy to implement i don't fare well with these one in this first project. To link svg images to my html code i used <img tag>

Here is some snippets code of mine in css, willing to size svg file :

*** for future section***
.for_future .row .future_image {
  position: relative;
  margin-top: 2rem;
  display: flex;
  flex-direction: row;
  flex-basis: 50%;
  left: 3.2rem;
  width:1400px;
  height: 750px;
  overflow: hidden;
}
.for_future .row .future_image .fut_img{
  position: absolute;
  width:100%;
  height: 100%;
  object-fit: cover;
  overflow: hidden;
  z-index: +2;
}

*** free open section***

.free_open .row .future_image {
  position: relative;
  margin-top: 6rem;
  display: flex;
  flex-direction: row;
  flex-basis: 100%;
  right: 15rem;
  width:1400px;
  height: 700px;
  overflow: hidden;
  z-index: +2;
}
.free_open .row .future_image .fut_img{
  position: absolute;
  width:100%;
  height: 100%;
  object-fit: cover;
  overflow: hidden;
  z-index: +2;
}

***mobile screen width: 375px***

.for_future .row .future_image {
    flex-basis: 100%;
    width:100%;
    height: 100%;
    left: 0rem;
    overflow: hidden; 
  } 

  .for_future .row .future_image .fut_img{
    width:50%;
    height: 10%;
    overflow: hidden;
   
    object-fit: cover;
  }

.free_open .row .future_image {
      top: 1rem;
      left: -14rem;
      width: 800px;
      height: 100px;
      transform: scale(0.8);
    }
    .free_open .row .future_image .fut_img{
      position: absolute;
      width:75%;
      height: 60%;
      object-fit: cover;
      overflow: hidden;
      z-index: +2;
    }

I also saw some kind of curves lines surrounding the phone image in the section entitled State of the art Infrastructure , doesn't found how to make same curves lines with differents colors background like that.

Is it a product design effect built with Figma or Notion ?. And how to do it ?That are my queries.