Latest solutions
Comment Section with Nx Angular, Tailwind
#angular#tailwind-css#typescriptSubmitted about 2 years agoResponsive ecommerce with Vue, Tailwind, Scss, Pinia, Vue Router
#pinia#sass/scss#tailwind-css#vue#typescriptSubmitted over 2 years agoInvoice App using Vue.js, Typescript, Tailwind and Vuelidate
#tailwind-css#vite#vue#typescriptSubmitted over 2 years agoDevjobs App with Angular, Typescript, SCSS and Tailwind
#angular#sass/scss#typescript#tailwind-cssSubmitted about 3 years ago
Latest comments
- @faruking@CodeVee
@faruking Good job. Few pointers
-
Clicking the sun and moon icons break the applications.
-
The App is not responsive on Tablet and Mobile.
-
- @pvl-ao@CodeVee
Hi Pavlo. Fantastic job on this task. I also use rem for my responsiveness. I think it's good and less confusing than em. Few Suggestions
-
Wrap your code with a
main
tag to fix the landmark accessibility issue. -
Consider using a different element than the
ul
or use border-top and border-bottom for yourli
with padding rather thanhr
.
I hope you find this helpful
Marked as helpful -
- @nobody1234455@CodeVee
Hi THIH_NEZZY, Great job on this task. Few Suggestions
- Wrap your code with a
main
tag to remove the accessibility errors
<main> <div class="card"> ... </div> </main>
- Remove the images from the span in the
price-time
div and place them side by side with the span
<div class="price-time"> <div class="price"> <img src="./images/icon-ethereum.svg" alt="eth" /> <span>0.041 ETH</span> </div> <div class="time"> <img src="./images/icon-clock.svg" alt="clock" /> <span>3 days left</span> </div> </div>
Also update the CSS to look like
.price-time { display: flex; justify-content: space-between; margin: 7% auto 0 7%; } .price,time { display: flex; align-items: center; } .price,time > img { margin-right: 5px; } .price>span { color: var(--cyan); } .time>span { color: var(--soft-blue); }
-
I would recommend you research the use of padding and apply it to the parent
card
rather than using margin on child elements. -
To overlay properly would then be easier with absolute positioning and flexbox.
I hope you find this useful
- Wrap your code with a
- @Plut0r@CodeVee
Hi Ogunola, Great Job completing this task. Few Suggestions:
-
Wrap your code with the
main
tag like<main> your code here </main>
-
Set the border and outline to none to remove the white and additional colors from your buttons
button { border: none; outline: none; }
- For Screens below 375px, I would suggest you don't worry about it.
I hope you find this helpful
Marked as helpful -
- @Kehinde13@CodeVee
@Kehinde13 Hi Kehinde Balogun, Great job completing this assignment. Few Suggestions :
-
Wrap your code with a
main
tag. -
Replace your
h4
with ah1
. -
Try and center your button
-
- @deksa89@CodeVee
@deksa89 Hi Dean Hudek, Great Job completing this assignment. Few Suggestions
-
Change the price heading to
h2
rather thanh3
to clear the accessibility issue. -
For the hover state. Remove the blue image and set the background of
.inner-photo
to cyan00FFF7
. Use flex to center both horizontally and vertically the eye SVG.
-