
Foued
@Foued80All comments
- @kristynavulcova@Foued80
Very nice well done :D
- @jibreel1@Foued80
Hi, Jibreel great work for this challenge
there is an issue with " + " it calls a function that increment "counter" that's ok but it is not supposed to show the quantity on the cart bdge (top right screen) untill you hit the "add to cart" button.
- @paulaxisabel@Foued80
Great job Isabel, the animations are great!
- @Holat@Foued80
hi, geat work.
on desktop view when hovering over navbar links i can see the border-bottom shifting due to the boxsizing property, you can fix this by adding margin-bottom:-3.5px;
header .logo .menu ul a:hover { color: #1d2025; text-decoration: none; font-weight: 700; border-bottom: 3.5px solid #ff7d1a; margin-bottom:-3.5px; }
and to prevent the links to shift right when hover over due to the font weight change, try to change opacity or color unstead.
cheers
Marked as helpful - @kraken-afk@Foued80
hi, great job, on desktop view you forgot the thumbnails (design/desktop-design-lightbox.jpg).
- @CharlesCypher@Foued80
hi, CorizCoder
Goodjob, i had the same trouble with the sidebar dropdown menu specialy the padding and margins to hide the submenu;
check my css only solution for this challenge no single line of javascript was needed, i used input:checkbox with css ~ sibling
your sidebar is missing a backdrop to the left, and for the best practice i suggest checking bootstrap's code for navbars and dropdown menu for inspiration
cheers.
Marked as helpful - @DavidXploidz@Foued80
hello, great work, the sub menus do not collapse after they are displayed
- @codeguy9@Foued80
hi,
Here a fix for the the reviews section
.flex-machine { display: flex; align-items: center; }
align-items:center will stop the avatar from stretching
can you tell me how you made the paragraph to shrink and grow with the viewport, i dont see clamp or font-size relative to viewport anywhere in your css :s i may learn something here :O
- @Menna-Rashad@Foued80
hi,
-
the desktop view needs a container with a max-width of 1440px
-
hovering over the nav links shift the content try to force border to 0 on the li's
-
try the aspect-ration preperty to set the corect width/height of background images
-
don't use duplicate IDs check your solution report and fix the problems
Marked as helpful -
- @heritio@Foued80
Hi Heritier,
Be aware that the css is processed from top to bottom, at the begening of the file you put :
body> margin: 9vh auto; and then @media body> width: 95%;
for mobile view, you should override the rules if you want something different and remove duplicates @medias if you wan't it to stay as it is .
cheers
Marked as helpful - @A-amon@Foued80
Hi Amon, realy cool animations there !
- @odpinerosh@Foued80
Hi Oscar, well done,
-Not sure if an email like this example@exampl.c is a valid email ( .c) need at least 2 chars according to Domain Naming Conventions. -The background pattern isn't well scaled nor well positionned
cheers.
Marked as helpful - @keshavavarma@Foued80
Hello, use th background-size to scale up or down with VH or VW units.
- @DavidMaillard@Foued80
Good job, i personaly used background images, your design miss the mobileview.
Marked as helpful - @Foued80@Foued80
Thank you for the feedback, here what i fixed :
- Mobile display down to 320px.
- LABEL html validation issue:
<li> <input type="checkbox" id="toggle1" /> <label for="toggle1">How many team members can I invite?</label> <img class="arrow" src="images/icon-arrow-down.svg" alt="" /> <div class="card_faq_a"> You can invite up to 2 additional users on the Free plan. There is no limit on team members for the Premium plan. </div> </li>
- Lowered transition to 0.5s;
On desktop view :
- Added shadow to the box and fixed the positioning;
- Reduced font-size, paddings and margins to fix the accordion display when fully expanded;
- Added hover effect on questions (color, cursor)
- @carlwicker@Foued80
svg top and bottom took me 70% of the developemen't time, i'm not sure if i got it right :/