@ochifeogeSubmitted 7 days ago
P
Nadji CHABANE
@CHBNDJAll comments
- @CHBNDJPosted 5 days ago
Nice overall great jobs however you should try something like that for the bar below the links nav in your header and footer .navlinks ul { width: 380px; height: 25px; display: flex; align-items: center; flex-direction: row; gap: 32px; list-style-type: none; }
.navlinks ul li a { position: relative; text-decoration: none; color: white; font-family: "Alata", sans-serif; font-size: 15px; line-height: 25px; font-weight: 400; }
.navlinks ul li a::before { content: ''; position: absolute; width: 0; height: 2px; background-color: white; top: 30px; left: 10.75px; transition: width 0.3s ease-in-out; }
.navlinks ul li a:hover::before { width: 24px; }
Keep building :)
0 - @ManojSinghDashauniSubmitted 15 days ago@CHBNDJPosted 13 days ago
Hi nice design job just i can give you some tips for the background-color on th img when the hover is used thats what ive done .img-logo { width: auto; height: 302px; border-radius: 8px; display: flex; align-items: center; justify-content: center; cursor: pointer; position: relative; overflow: hidden;
}
.img-logo img { width: 100%; height: 302px; border-radius: 8px; display: block; }
.img-logo::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #00FFF8; opacity: 0; border-radius: 8px; transition: opacity 0.3s ease; }
.img-logo::before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 48px; height: 48px; background-image: url('data:image/svg+xml;utf8,<svg width="48" height="48" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="M0 0h48v48H0z"/><path d="M24 9C14 9 5.46 15.22 2 24c3.46 8.78 12 15 22 15 10.01 0 18.54-6.22 22-15-3.46-8.78-11.99-15-22-15Zm0 25c-5.52 0-10-4.48-10-10s4.48-10 10-10 10 4.48 10 10-4.48 10-10 10Zm0-16c-3.31 0-6 2.69-6 6s2.69 6 6 6 6-2.69 6-6-2.69-6-6-6Z" fill="%23FFF" fill-rule="nonzero"/></g></svg>'); opacity: 0; transition: opacity 0.3s ease; }
.img-logo:hover::after { opacity: 0.5; }
.img-logo:hover::before { opacity: 1; }
0 - @aouintihouariSubmitted about 2 months ago@CHBNDJPosted 13 days ago
Nice job overall congrats i see no big improvment to do on this project the most important things are all here nice job !!!
0 - @JJorgeMS13Submitted about 1 month agoWhat are you most proud of, and what would you do differently next time?
Me encanto poder aplicar la metodologia BEM para poder mejorar mi codigo CSS
What challenges did you encounter, and how did you overcome them?ninguno
What specific areas of your project would you like help with?Me gustaría que me ayuden como puedo crear un codigo mas limpio
- @JJorgeMS13Submitted about 1 month agoWhat are you most proud of, and what would you do differently next time?
Me encanto poder crear ya mas algo mas elaborado, la proxima vez planearia mas el desarrollo antes de empezarlo.
What challenges did you encounter, and how did you overcome them?mi reto mas grande fue hacer las pantallas position: absolute y que pudiera acomodar los componentes del Slider.
What specific areas of your project would you like help with?Me encantaría que me ayuden a mejorar mi estructura HTML ya que tengo cosas repetidas como el slider.
@CHBNDJPosted about 1 month agotoo much things that are missing my friend i mean you did well overall but compare to the design is not the same check yours a links in the header try to test the ::before element to them to put the orange line in the horizontal line. I can go on and on but its just the design. The main things about this project is well done. Good job my friend :)
0 - @TCO932Submitted 2 months ago@CHBNDJPosted 2 months ago
Nice project overall but try in the desktop version to put a margin between the header and your main. Also regarding your mobile version you can try to put a transition for your toggle menu and also try to make it appear for the right instead from the left. Here what ive done
nav { width: 65%; height: 100vh; position: absolute; top: 0; right: 0; display: flex; justify-content: center; align-items: center; background-color: #FFFDFA; margin-right: -100%; transition: margin-right .5s ease; z-index: 1000; }
nav.open-menu { margin-right: 0; } by default the nav menu is in margin right -100% when i click to the icon menu the nav come until the margin-right is 0. Cheers. :)0 - @AZZAM-KSubmitted 2 months ago@CHBNDJPosted 2 months ago
try to increasse the width of your main container and i couldnt see the error message when i write nothing to the inputs
0 - @MsadafKSubmitted 2 months ago@CHBNDJPosted 2 months ago
nice work overall maybe try with a reduce width but the main point and problem have been resolved congrats :)
0 - @MsadafKSubmitted 2 months ago@CHBNDJPosted 2 months ago
change the color of your submit add padding to your button number and reduce the gap between your buttons. Maybe you can try at least thats what ive done to click outside of the modal and it will bring us back to the the intro choices. great work :)
0 - @sikulamartinSubmitted 3 months ago@CHBNDJPosted 2 months ago
nice job congrats i try your code and i didnt see the response i give you seems to have forgot the focus on your response thats the only big think you forget in my view. :)
0 - @medic-codeSubmitted 5 months agoWhat are you most proud of, and what would you do differently next time?
Proud to complete my first intermediate project. The javascript was pretty interesting to get into and lots of different aspects to consider. I'm not sure there is much I'd do too differently, i decided to do the JS first which helped. There was a bit of changing of html and js after styling though, not too sure if that could've been helped.
What challenges did you encounter, and how did you overcome them?Not too much challenges really, had a bit of trouble getting the custom input radiobox to style, and spent quite a bit of time trying to get the differences in sizes between tablet and mobile set up.
What specific areas of your project would you like help with?HTML Semantnics
CSS methodology and approach
JS syntax and conciseness.
@CHBNDJPosted 5 months agohi nice job overall just take a look at your slider the green color should not be there when there is no number at the character length try someting like that slider.addEventListener('input', (e) => { myValue.textContent = e.target.value;
let mouse = slider.value; let color = `linear-gradient(90deg, rgba(164, 255, 175) ${mouse*5}%, rgb(24, 23, 31) ${mouse*5}%)`; slider.style.background = color;}); play with the linear gradient in your css with 50% of green and 50% of black then do the JS above.
good luck :)
0 - @AntonvasilacheSubmitted 5 months agoWhat are you most proud of, and what would you do differently next time?
- JavaScript part was pretty easy, despite handling multiple inputs of different types
- Managed to implement a bit of reusability in the code
- Would probably think more about form validation to make sure it's properly covered
- Some of the input styles were challenging, but nothing a few more divs can't fix
- Naming the CSS classes due to how deep the HTML tree became - I used some element selectors to cover for that
There is probably a better way of storing the state, I tried to use an object, but didn't do much with it in the end.
@CHBNDJPosted 5 months agonice work overall just check the width and the height of your elements and the position of them also + the splitter
1
