Responsive Space Tourism website using ReactJS

Community feedback

• 

  P

  Fluffy Kas•7,715

  @FluffyKasPosted about 1 year ago

  This looks really awesome! May I ask, how you the light mode images were made?

  2

  ---

  

  Salah Najem•350

  @Salah1221Posted about 1 year ago

  @FluffyKas Thanks, for the crew members images I used the image tracing feature in adobe illustrator, and for the rest (background images and other assets) I used the pen and curvature tools where I placed the original image then drew over it using pen/curvature tool, then removed the original image and finally filled the resulted svg with light colors

  2

  

  P

  Fluffy Kas•7,715

  @FluffyKasPosted about 1 year ago

  @Salah1221 Never knew this existed, thanks! Obviously you put a lot of extra time in an already complex challenge, it's very cool 👏

  1
• 

  Souleymane Sy•980

  @SouleymaneSy7Posted about 1 year ago

  This is a great work! 👍👏

  1
• 

  Uniquegf•0

  @UniquegfPosted about 1 year ago

  Nice job 👏!! I really love the animation you used for the bugger menu ,may I ask , how did you do your bugger menu animation 😀?

  1

  ---

  

  Salah Najem•350

  @Salah1221Posted about 1 year ago

  @Uniquegf I made a custom svg that includes the burger menu icon and the x icon and are connected with a path. Then I added the stroke-dasharray css property to the svg's #top and #bottom paths to display only the burger icon (the #middle path is already the same length), then when you click on the icon, I added an offset using stroke-dashoffset css property to the top and bottom paths so they start at the start of the x icon and I changed the stroke-dasharray so that the paths matches the length of the x icon (for the middle path I added transform: scaleX(0) when clicked).

  (Try removing all the stroke-dasharray and stroke-dashoffset properties in the css to see how the svg looks like)

  You can check out this codepen (this is where I got the idea of the burger icon from) and experiment with it to fully understand how it is done

  1

  

  Uniquegf•0

  @UniquegfPosted about 1 year ago

  @Salah1221 thanks bro

  1

  

  Salah Najem•350

  @Salah1221Posted about 1 year ago

  @Uniquegf You're welcome

  0