@hyunnies95
Submitted
Hello! I used Vue to build this website. I'll be glad to get some advices about my code and components
Looking to hire developers?
@Nick331102
@Leonard-O
Submitted
I had problems with making the grid responsive, I actually didn't do it correctly. I will appreciate anyone's opinions so that I can improve on it. Thank you.
@Nick331102
Posted
nice work. kevin powell did a recent segment about grid using this project as an example if you are looking for more clarity.
https://www.youtube.com/watch?v=rg7Fvvl3taU&t=1438s
I would play with your media query a bit so it breaks earlier, maybe around 800-850px.
Marked as helpful
@danM51
Submitted
Hey, this project was a game changer! Helped my CSS Grid game to the roof, I learned how grid-template-areas can be useful for minimalist designs.
however I still have trouble with screen size responsiveness, I'd like to know how you all approach responsive design (tips, tricks etc...).
thanks for any advice in advance!
@Nick331102
Posted
nice work. kevin powell did a recent segment about grid using this project as an example if you are looking for more clarity.
https://www.youtube.com/watch?v=rg7Fvvl3taU&t=1438s
setting a max-width om your main container would make it responsive, and then you can utilize media queries and change your grid template areas as needed.
Marked as helpful
@DavidMaillard
Submitted
Hi,
Feedback are very welcome !
🤘
@Nick331102
Posted
If you have a free moment would you be able to look at my solution for this challenge? I haven't been able to get the error messages to show using JS for the form validation.
Thank You
@madhusudanbabar
Submitted
how can i blend the violet color with that background?
@Nick331102
Posted
This is the easiest way I have found for the overlay, but there are other ways try using an inset box shadow box-shadow: inset 0 0 0 1000px rgba(109, 54, 199, 0.596); you can adjust the color.
Marked as helpful
@Shyam101
Submitted
How can I create semi transparent background over image? Couldn't figure it out
@Nick331102
Posted
This is the easiest way I have found for the overlay, but there are other ways try using an inset box shadow box-shadow: inset 0 0 0 1000px rgba(109, 54, 199, 0.596); you can adjust the color.
@somecallmejosh
Submitted
Absolutely did not need to use Ruby on Rails for this single pager, but I wanted a chance to see how easy it was to use Tailwind with the 7.0 release. OMG, getting Tailwind working was effortless compared to older versions of Rails. Also wanted an opportunity to tinker with Alpine. Again, I didn't need the library, and wouldn't have used it on a production site. But, the beauty of these FEM projects is that I get to tinker with whatever tools I want. :-)
@Nick331102
Posted
nice job. Looks great
@smhmurat
Submitted
I completed the task as mobile and desktop task. In general, I think I am successful. However, I couldn't do what I wanted to apply a filter to the photo. The feedback you gave me about the mistakes I made in the code I wrote is very important to me. Thank you...
@Nick331102
Posted
This is the easiest way I have found for the overlay, but there are other ways try using an inset box shadow box-shadow: inset 0 0 0 1000px rgba(109, 54, 199, 0.596); you can adjust the color.
@outerpreneur
Submitted
Hi! In this exercise, I have struggled to do the pink overlay in the picture. I have tried in different ways, none of them worked.
I also struggled to have both sections (columns) with the same width.
I also don't know how to shrink the three columns with stats, a bit more narrow and contained.
If you have any suggestions, I will be happy to know them.
@Nick331102
Posted
This is the easiest way I have found for the overlay, but there are other ways try using an inset box shadow box-shadow: inset 0 0 0 1000px rgba(109, 54, 199, 0.596); you can adjust the color.
you can utilize media queries to make your card more responsive, so I would research them.
if you want the columns to be the same width you can display: grid on the container and set grid-template-columns: repeat(2, 1fr)
Marked as helpful
@jchapar
Submitted
Hello Everyone, Would love to get some feedback on this challenge. This was my first challenge that I've done where I also had the Figma files as reference and feel very confident with what I was able to produce. There are a few styling mistakes that I know are still needed (padding, margins) to make it look a bit better but I wanted to submit and get any other feedback I could. Thanks!
@Nick331102
Posted
Nice work overall. You may want to wrap everything in a main and set a max-width, as I viewed your project in a widescreen monitor and would look better with a max width. You could also add a hover state to the request access button. As you mentioned, the margin and padding need to be fixed for the text. The project does look pretty good on mobile though. The success message for the email validation doesn't seem to work. You could reference my project if you would like.
well done
Marked as helpful
Practicing some grid and try to understand it.
@Nick331102
Posted
nice work. kevin powell did a recent segment about grid using this project as an example if you are looking for more clarity.
https://www.youtube.com/watch?v=rg7Fvvl3taU&t=1438s
@tomsky90
Submitted
Hi Guys. Just finished this challenge. I have to say it was quite hard. I had to look for a lot of stuff, but i think I got it to a point where it is working. If you got a spare minute let me know what you think any feedback will be appreciated.
@Nick331102
Posted
Very nice. This is quite a large project, looks great
@wcgordon1
Submitted
The css was a little tricky for the music icon / Annual Plan / $59.99/year.
Initially, I was going to use CSS grid but quickly found this to not be a good solution. placed the elements in a div and used Flex instead. doh!
Overall, not very difficult. Nice to code without a tutorial and figure it out on my own. I start General Assembly Code bootcamp on 11/29/21.
@Nick331102
Posted
Nice work. Good luck in your bootcamp
Marked as helpful
@hamidousow
Submitted
I didn't understand how to change the value when the checkbox is checked, any help will be a pleasure
@Nick331102
Posted
If the you look at the JS in my pricing.js file for the photosnap project it would be helpful to you and give an idea about how to toggle the value.
https://github.com/Nick331102/Photosnap
Marked as helpful
@nashee
Submitted
Hey i have just completed this challenge please give me your feedback
@Nick331102
Posted
thank you
@ArturdaSilvaRezende
Submitted
ReactJ daily practice =)
@Nick331102
Posted
thank you
@nashee
Submitted
Hey i have just completed this challenge please give me your feedback
@Nick331102
Posted
how do you add a dark overlay to the body when the hamburger menu is clicked?
Marked as helpful
@nkhatri7
Submitted
My first time using SCSS and functional components in React, how did I go? Please be as harsh as you can.
@Nick331102
Posted
how do you add a dark overlay to the body when the hamburger menu is clicked?
@ArturdaSilvaRezende
Submitted
ReactJ daily practice =)
@Nick331102
Posted
Nice work. How do you get the body to have a dark overlay when the hamburger menu is clicked?
@DavidMaillard
Submitted
Hi,
Feedback are very welcome !
🤘
@Nick331102
Posted
Nice work. How do you get the body to have a dark overlay when the hamburger menu is clicked?
@Shangsit
Submitted
I had to face a lot of problems in handling that image. Can you please suggest me an easy way of applying that color filter to the image? and also an easy way to make that image responsive.
@Nick331102
Posted
This is the easiest way I have found for the overlay.....
try using an inset box shadow
box-shadow: inset 0 0 0 1000px rgba(109, 54, 199, 0.596);
you can adjust the color.
@ttoomas
Submitted
I have finally completed this project. His work was fun! I have practiced everything I can. I'm most proud of the Jquery code, which allowed me to create beautiful animations on all pages by clicking on the buttons. Creating this site was simple compared to other frontent-mentor challenge, as everyone has access to figma files.
Finally, I have one question for you. For example, how can I create an animation for a mobile device on the "technology" page, in which the image would go from its position to the right away from the page without moving the page on the mobile? overflow: hidden
does not help.
Thank you all for any advice
@Nick331102
Posted
very cool. Nice job