@MOSCOW2022Submitted about 2 years ago
First time working on a junior project !
Added a costume icon:
- when you open the mobile menu you see it to close it again. -any feedback is welcome!
happy coding guys!
ERIGO Chigozie Nicholas
@nick335All comments
- @nick335Posted about 2 years ago
Hello, Moscow's
great work on the project, for your social icons instead of using SVG images you should try fontAwesome, Font Awesome Is a Web font used by websites designer & developers for icons instead of traditional old image icons. It's flexible in terms of coloring, sizing & stacking on top of other background styles using plain CSS. You can use it by referencing the CSS files in your website and keeping the fonts folder that comes with it besides the CSS file of FontAwesome. it,s very easy and simple to use.
for implementing font awesome with React you can check out this article
for implementing on hover state in tailwind CSS, you should try this
className = 'hover:text-white-100 'Hope this was helpful
Happy Coding
Marked as helpful0 - @RobertoBaiochiSubmitted about 2 years ago
Hi! Here is my solution to the challenge, I used some ReactJS Hooks. If anyone has any suggestions for organizing components, stylesheets, or even for the construction itself, any help is welcome!
@nick335Posted about 2 years agoHello RobertoBaiochi,
Nice work with the challenge, for your social icons instead of using SVG images you should try fontAwesome, Font Awesome Is a Web font used by websites designer & developers for icons instead of traditional old image icons. It's flexible in terms of coloring, sizing & stacking on top of other background styles using plain CSS. You can use it by referencing the CSS files in your website and keeping the fonts folder that comes with it besides the CSS file of FontAwesome. it,s very easy and simple to use.
Hope this was helpful
Happy Coding
1 - @ShinjiX-WebSubmitted about 2 years ago@nick335Posted about 2 years ago
Hello, Nate Pañares
Nice work with the challenge, for accurate sizing of the background image you can do this:
// normally you do this background-size : cover 'or' contain; background-position: center 'or' Top 'or' Left 'or' Bottom 'or' Right; //but to accurately position it you can try this!! background-size: 300px 100px; 'which is the width and height'; background-position: top 100px right 100px; //the same can done for the bottom and the lefthope this was helpful
Happy Coding.
Marked as helpful1 - @monsdaSubmitted about 2 years ago
I not sure others see the card in center or not because I use every way to centered it, but it is not working.
@nick335Posted about 2 years agoHello, DASHDASH’S
Great work on the challenge, to center the div you need to do:
//remove the width and position styling in the body //from this body { background-color: hsl(30, 38%, 92%); width: 1440px; position: absolute; top: 20%; left: 35%; } // to this body { background-color: hsl(30, 38%, 92%); } // after that you can position the container in 2 ways // 1, directly positioning the container by adding this line of code to the container class .container { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } // 2, wrapping the container in a div then styling the div, let's say we wrap it in a div we give a class name of center then we can style it like this .center{ width: 100vw; // i.e width is equal to the width of the screen height: 100vh; // 1.e height is equal to the height of the screen display: flex; align-items: center; justify-content: center; }Hope this was helpful.
Happy Coding!!
Marked as helpful0 - @nyrellclSubmitted about 2 years ago
Been meaning to finally finish this project. It served as great practice for creating landing pages. The desktop and mobile version for the footer was a bit frustrating to get right since most of the elements were designed and placed in very different orientations. But I was able to get it right eventually!
I also decided to use swiper.js for the slider feature for efficiency, though I would go back and implement the slider via vanilla JS just for practice and to get comfortable with JS even more.
When reviewing my code, I REALLy appreciate any suggestions on how to make it better, concise, and easy to read.
As always, any feedback is greatly appreciated. Thanks!
@nick335Posted about 2 years agoHello NYRELL LEONOR’S,
Great Job with the challenge! noticed you didn't implement the background images if you had issues with it, this is how you resolve it:
// normally you do this background-size : cover 'or' contain; background-position: center 'or' Top 'or' Left 'or' Bottom 'or' Right; //but to accurately position it you can try this!! background-size: 300px 100px; 'which is the width and height'; background-position: top 100px right 100px; //the same can done for the bottom and the leftHope this was helpful,
Happy Coding
Marked as helpful0 - @Shady-OmarSubmitted about 2 years ago
Any feedback or suggestion would be appreciated.
@nick335Posted about 2 years agoHello SHADY OMAR’S,
Nice work with the challenge, for your social icons instead of using SVG images you should try fontAwesome, Font Awesome Is a Webfont used by websites designer & developers for icons instead of traditional old image icons. It's flexible in terms of coloring, sizing & stacking on top of other background styles using plain CSS. You can use it by referencing the CSS files in your website and keeping the fonts folder that comes with it besides the CSS file of FontAwesome. it,s very easy and simple to use.
Hope this was helpful
Happy Coding
0 - @nivanovic7Submitted about 2 years ago
Hey, im begginer web debeloper and this is my first solution submited.
Not sure how to add these background images to make them the same as in design photos :( . Also, can someone check this slider(How would you do it, and is this ok?). I would really like if someone would check my code and write some review or suggesiton! Thank you all :D !
@nick335Posted about 2 years agoHello, NIKOLA’S
Nice work with the challenge, for accurate sizing of the background image you can do this:
// normally you do this background-size : cover 'or' contain; background-position: center 'or' Top 'or' Left 'or' Bottom 'or' Right; //but to accurately position it you can try this!! background-size: 300px 100px; 'which is the width and height'; background-position: top 100px right 100px; //the same can done for the bottom and the leftHope this was helpful!
Happy Coding!!
Marked as helpful0 - @tomifuchiSubmitted about 2 years ago
Thank you for checking out my attempt !
How do you make the icon have white overlay on them with the exact same shape as them ?
@nick335Posted about 2 years agoHello, TOMIFUCHI’S
Great job with the challenge, instead of using SVG images, you should try FontAwesome, Font Awesome Is a Webfont used by websites designer & developers for icons instead of traditional old image icons. It's flexible in terms of coloring, sizing & stacking on top of other background styles using plain CSS. You can use it by referencing the CSS files on your website and keeping the fonts folder that comes with it besides the CSS file of FontAwesome.
Hope this was helpful!
Happy Coding!
Marked as helpful0 - @Alex-KorirSubmitted about 2 years ago
Feel free to check my solution. I am also open to any feedback.
@nick335Posted about 2 years agoHello, ALEX
Great job with the challenge, for your social icons instead of working with SVG images, you should use an icon library like fontawesome super easy and fast to use, with this you will be able to effect its on-hover state.
in section two, I noticed they were spaces between each row, to get rid of this you should change the height value ` //from
height: 255vh;
//to
height: fit-content or 100%; `
the same should be done to other sections where you gave a fixed height, to reduce the spacing or excessive length of the section.
hope this was helpful!
Happy Coding!!!
0 - @FayssalGSubmitted about 2 years ago
This one was a little tricky it took me longer than I expected, the tricky part was positioning the background pattern on the top right and making it responsive I used ::after to do it I wonder if there is a better way
@nick335Posted about 2 years agoHello, FAYSSALG’S
Great job with the challenge, for the accurate positioning of the background image, you can use the 'background-position' attribute in your style sheet like this:
`background-position: top 400px left 500px;
// you can play with the values to get your desired positioning and also the position, you can use the bottom and right`.
Hope this was helpful!!
Happy Coding!!.
Marked as helpful1 - @Djarma12Submitted about 2 years ago
I had problems regarding the positioning of background images, when working in responsive. This is the first challenge I've done, I don't have much experience with this platform and connecting to git... I tried to do the best I could :)
I will appear any suggestions on how to solve this.
Any suggestions is highly welcome!
@nick335Posted about 2 years agoHello, Dusan
Great work with the challenge, you didn't mention specifically the section you had issues with the background image. but generally speaking, if you are trying to precisely position a background image you can use the 'background-position' attribute in your style sheet like this:
background-position: top 400px left 500px; // you can play with the values to get your desired positioning and also the position, you can use the bottom and right.Hope this was helpful!!Happy Coding!!.
Marked as helpful0 - @livinglifemeaningSubmitted about 2 years ago
Ugly desktop carousel until I can figure out something nicer, which I plan to do today.
Edit: I did make a carousel that works the way I want it to, and felt clever that my idea actually worked the way it wanted to, but I know it's a clunky solution and want to learn a better way.
@nick335Posted about 2 years agoHello, Asha
Great work with the challenge, if you are still looking for a better solution for the carousel, you can check out this Article super easy and helpful.
Happy Coding!!!
1
