@deepika9107
Latest solutions
Recipe page with semantic HTML
#accessibilitySubmitted 3 months agoHow is my semantic HTML/accessibility?
Latest comments
- @savvystrider
If you're using SVG code in your HTML, you can change the
fillorstrokecolor directly in the markup or through CSS. If you're importing the SVG as a file, you can open up the code in any text editor and change thestrokeand/orfillcolorsMarked as helpful - @Richardesan@savvystrider
The page looks great and the responsiveness functions well. The only thing I noticed is that the font is not displaying. Looks like the import is commented out in your
index.cssfile:/* @import url('https://fonts.google.com/specimen/Epilogue'); */ @font-face { font-family: "Epilogue"; src: local ("Epilogue") url(../fonts/Epilogue/Epilogue-Italic-VariableFont_wght.ttf) format("truetype"); } - @ScytheProduction@savvystrider
The easiest way I've learned to properly center an element like this is to apply the following styles to the
bodyelement:display: grid;min-height: 100vh;place-items: center;Marked as helpful - @Sbeveandbeyond@savvystrider
Looks great! The only thing I would recommend is adding some transitions to the hover effects/active states.
- @Eze-Alarcon@savvystrider
Wow, looks amazing! I noticed a few minor issues with the modal:
- clicking anywhere inside the modal closes the modal
- scrolling up and down with the modal open causes the background to scroll up/down
- @therapy181@savvystrider
Your project looks great! To get your background images to appear, you will have to make a minor modification to your CSS:
.circle-backgroundand.circle-background2need a period added inside the parentheses for theurlbackground-image: url('./images/bg-pattern-bottom.svg')instead ofbackground-image: url('/images/bg-pattern-bottom.svg').
