All comments

Dan Bennett• 60
@inkfromblood
Submitted almost 2 years ago
What I found difficult: Figuring out how to fit the QR code into the container .div effectively. Turned out to be as simple as setting the width to 100%.

What I'm unsure of: That this approach was the most efficient way of achieving this. When to use px or when the rem.

I edited the footer links to have a hover state of white, but wanted to change the visited color from purple to blue, however when I changed the visited state it removed the hover state. I'm unsure of how to make this happen.
QR code component solution
2
Mo• 840
@MohamedAridah
Posted almost 2 years ago
Hello @inkfromblood, congratulation on submitting your first solution🎉👏.

Yes giving the QR code image max-width: 100% is totally right since this will make the image to take the full width and never overflow it.

I have also some notes for you:

use font-family: 'Outfit', sans-serif globally instead of redeclare every time:

body { font-family: 'Outfit', sans-serif; }

instead of using <h2> heading level for the text you can just use <p> element since this text is not a heading. This will fix your Accessibility Issues

use <footer> instead of .attribution div it's more HTML Semantic. Also This will fix your Accessibility Issues

This challenge Doesn't has nay links so you can Remove styles of the <a> tag since it's useless.

you can see My solution for this challenge it may be helpful for you..!

I hope this wasn't too long for you, hoping also it was useful😍.

Goodbye and have a nice day.

Keep coding🚀
Marked as helpful
0
Moruf Lawal• 10
@MorufLawal
Submitted almost 2 years ago
i find it difficult creating the hover effect on the image
responsive landing page using CSS Flex
2
Mo• 840
@MohamedAridah
Posted almost 2 years ago
Hello @MorufLawal, congratulation on submitting your first solution🎉👏.

I have some notes for you:

for the hover effect, put the image with .eqn class inside div with .image-wrapper class for example and follow these styles:

.image-wrapper::after{ content: url(./images/icon-view.svg); position: absolute; background-color: rgb(0 255 247 / 45%); width: 100%; height: 100%; opacity: 0; top: 0; left: 0; display: flex; align-items: center; justify-content: center; cursor: pointer; border-radius: 1rem; overflow: hidden; transition: .3s ease; }

.image-wrapper:hover::after { opacity : 1; }

i used div to wrap the image and do the hover effect since <img> alone doesn't work with ::after pseudo element.

instead of using <hr> tag you can use border-top or border-bottom depending on the div you will use it. Also this is more Semantic

for .Bottom give it text-align: start to be like the design also give space between the avater image and the text.

use <a> element instead of span for author name. It's more Semantic and on click this name this may lead to another page.

you can see My solution for this challenge it may be helpful for you..!

I hope this wasn't too long for you, hoping also it was useful😍.

Goodbye and have a nice day.

Keep coding🚀
0
Sultan Hafizh Alexander• 30
@shalexandeer
Submitted almost 2 years ago
how to add button shadows in proceed payments?
order-summary-component-main
2
Mo• 840
@MohamedAridah
Posted almost 2 years ago
Hello ,

for .parent you need to add background-color property to to add background for the element and make it like the design.

for .parent there is no need to use fixed height. height: 560px.

for .parent to make the waves illustration looks closer to the design you can change background-size property to 100% instead of cover. or you can remove background-size property at all. you cab read about background-size from Here.

So after all this changes to the .parent it's styles will be like this:

.parent { display: grid; place-items: center; min-height: 100vh; background: #e0e8ff url(../images/pattern-background-desktop.svg) no-repeat; }

for .container you can remove margin-top property if you want the card to be perfectly centered.

Don't use fixed height let content itself determine it's height. so you can remove height: 335px for .card-content div

for card-title instead of using <h2> heading level use <h1> heading level instead. This will fix your Accessibility issues as well.

when you use width: 80% instead of using margin-left or margin-right to center the content . You can just use margin: auto.

use font-family globally in the body for example instead of redeclare it for each element

.pay and .cancel have common styles so you can combine them in one class and add it to them instead of redeclare it again.

for your question you can see My solution for this challenge it may be helpful for you..!

I hope this wasn't too long for you, hoping also it was useful😍.

Goodbye and have a nice day.

Keep coding🚀
0
P
Kent O'Sullivan• 1,870
@12Kentos
Submitted almost 2 years ago
The way I have the code written, when the Eye is hovered, the teal background stops showing, I wasn't able to figure out a good way to fix this. Any tips would be appreciated.

Thanks!
More practice with Figma
2
Mo• 840
@MohamedAridah
Posted almost 2 years ago
Hello @12Kentos, Good job it's almost identical to the design👍👏

However i have some notes for you:

use min-height: 100vh for the body instead of using height: 100vh. This will allow your content to take more vertical height if content needed to. So user can see all the content.

instead of using these styles for .eth-cube-img

.eth-cube-img { width: 30.02rem; height: 30.02rem; border-radius: 0.8rem; }

you can just give the <img> the full width and the padding of .eth-card-container will make sure that there are space around the image. So your styles for .eth-cube-img could be:

.eth-cube-img { width: 100%; border-radius: 0.8rem; }

for the hover effect you can Delete .eth-eye-img img tag and .eth-img-container styles and try pseudo elements like ::after or ::before like:

.eth-img-container::after{ content: url(./images/icon-view.svg); position: absolute; background-color: rgb(0 255 247 / 45%); width: 100%; height: 100%; opacity: 0; top: 0; left: 0; display: flex; align-items: center; justify-content: center; cursor: pointer; border-radius: 1rem; overflow: hidden; transition: .3s ease; }

.eth-img-container:hover::after { opacity : 1; }

instead of using <p> element for .eth-title you can use <h1> because this is a a heading.

use <a> element instead of span for .eth-auth-name. It's more Semantic and on click this name this may lead to another page.

you can see My solution for this challenge it may be helpful for you..!

I hope this wasn't too long for you, hoping also it was useful😍.

Goodbye and have a nice day.

Keep coding🚀
Marked as helpful
1
tbrownlee• 350
@tbrownlee
Submitted almost 2 years ago
Was using em in the media query the best solution to change the font-size?
Basic HTML and CSS (with Flexbox)
1
Mo• 840
@MohamedAridah
Posted almost 2 years ago
Hello @tbrownlee, you did Great for this challenge, it's also Responsive so good job.👏👍

your styles to .main is extra and has no purpose. So Remove it.

using flex with the <img> is also can be Removed. the <img> element isn't parent for an any element so display: flex will do nothing.

instead of giving width property to the .text or the <img> you can just let them take 100% of the width and use padding property to control and give the outer space around the .container.

it's better to use rem units for font-size and somethings like that. em is relative to the font-size of its direct or nearest parent . rem is relative to the HTML (root) font-size. Read this Article for better understanding.

you can see My solution for this challenge it may be helpful for you..!

I hope this wasn't too long for you, hoping also it was useful😍.

Goodbye and have a nice day.

Keep coding🚀
Marked as helpful
1
tbrownlee• 350
@tbrownlee
Submitted almost 2 years ago
Is there a better way to size the icons rather than manually selecting a height and width in pixels?

Is there a better way to shrink the elements for the desktop view rather than manually changing the font/ height and width of each one?
Mobile-first solution using Flexbox
2
Mo• 840
@MohamedAridah
Posted almost 2 years ago
@tbrownlee I'm glad this was useful for you🌹👍. you can read more about pseudo elements from Here.

Yes, you can change the icon size by using background-size property.

.interactive::after { background-size: 55px; /* you can use percentage % as well */ }

You can read more about it from Here.

Keep Coding🚀
Marked as helpful
1
Kratos012• 90
@Kratos012
Submitted almost 2 years ago
Feedback plz!!! NB: My css is messy. Was tired working on this. Just wanted to hit my daily goals.
single-price-grid-component Using Grid
#accessibility
2
Mo• 840
@MohamedAridah
Posted almost 2 years ago
Hello @Kratos012, you did very Good job for this challenge it's also Responsive so Well done👏👍.

however i have some notes for you:

Please Recheck your solution background colors and make it like the design.

To insure .heade will take the full width you can use:

.header{ grid-column: 1/-1; }

your current way is totally right

you should use <h1> heading level once in the page. So instead of using <h1> tag inside .subscribtion div you can use <h3>. because the main heading of this div is <h2> and you should use heading levels by orders like: using <h1> then <h2> then <h3> and so on. This is Useful for SEO

For p element inside .whyus div. Try use ul element (unordered list) will be much better and this is More Html Semantic

<ul> <li>Tutorials by industry experts </li> <li>Peer & expert code review </li> <li>Coding exercises</li> <li>Access to our GitHub repos</li> <li>Community forum </li> <li>Flashcard decks </li> <li>ew videos every week</li> </ul>

Your CSS code is Good ,but your styles for <h1>, <h2>, <p> and <a> are set Globally . I've just wanted to draw your attention to this

I hope this wasn't too long for you, hoping also it was useful😍.

Goodbye and have a nice day.

Keep coding🚀
Marked as helpful
0
tbrownlee• 350
@tbrownlee
Submitted almost 2 years ago
Is there a better way to size the icons rather than manually selecting a height and width in pixels?

Is there a better way to shrink the elements for the desktop view rather than manually changing the font/ height and width of each one?
Mobile-first solution using Flexbox
2
Mo• 840
@MohamedAridah
Posted almost 2 years ago
Hello @tbrownlee, you did Good job. and Your solution is Also Responsive.👍👏 it seems quite small to me but its ok.

I have some notes for you:

inside .interactive div instead of using .interactive-overlay and .interactive-icon. You can use pseudo element instead Your way is totally right but you can try the following:

.interactive::after{ content: url(./images/icon-view.svg); position: absolute; background-color: rgb(0 255 247 / 45%); width: 100%; height: 100%; opacity: 0; top: 0; left: 0; display: flex; align-items: center; justify-content: center; cursor: pointer; border-radius: 1rem; overflow: hidden; transition: .3s ease; }

.interactive:hover::after{ opacity: 1; }

instead of using <hr> tag you can use border-top or border-bottom depending on the div you will use it. Also this is more Semantic

use <a> element instead of span for author name. It's more Semantic and on click this name this may lead to another page.

you can see My solution for this challenge it may be helpful for you..!

I hope this wasn't too long for you, hoping also it was useful😍.

Goodbye and have a nice day.

Keep coding🚀
Marked as helpful
1
gurpreet• 280
@justcoder42022
Submitted almost 2 years ago
good and first time on project CSS positioning experience
NFT preview card component by Gurpreet Singh Kalyan
1
Mo• 840
@MohamedAridah
Posted almost 2 years ago
Hello @justcoder42022, impressive.! your solution layout is very good and almost similar to the design.

However i have some notes for you:

instead of using display property to control showing and hiding of the icon on the image on hover. You can use for example opacity. This will allow you to use transition property with it and hover will be much smoother. Since display doesn't work with transition.

.main-image-section::after { left : 0; /* to indicate starting point horizontally */ opacity: 0; /* use opacity instead of display */ transition : opacity 200ms linear; }

.main-image-section:hover::after { opacity: 1; cursor : pointer; /* better than the default and design did that too */ }

For .main-image-section::after you can use background property shorthand like:

.main-image-section::after { background: hsla(178, 100%, 50%, .6) url("images/icon-view.svg") no-repeat center; }

For .main-image-section::after instead of using height: calc(100% - 4px). You can just give the <img> display : block property and everything will work fine.

.main-image-section::after { height: 100%; }

.main-img { display: block; }

instead of using strong element inside .avtar-containter div. You can use <a> element. It's more **Semantic ** and on click this name this may lead to another page. Also don't forget to add transition for it on hover.

using:

li { list-style: none; }

this way means you want to use it Globally. If so, it's better to put it at the beginning of the code. Optional and Your way is totally right

you can see My solution for this challenge it may be helpful for you..!

I hope this wasn't too long for you, hoping also it was useful😍.

Goodbye and have a nice day.

Keep coding🚀
Marked as helpful
1
robinjmm• 390
@robinjmm
Submitted almost 2 years ago
Any feedback on how I can improve my code?
NFT Card Component Solution
#sass/scss
2
Mo• 840
@MohamedAridah
Posted almost 2 years ago
Hello @robinjmm,

I have some notes for you:

use <a> element instead of span for .nft-card__creator-name. It's more Semantic and on click this name this may lead to another page.

you can just use <img> instead of .nft-card__eth::before and .nft-card__timer::before. the current way is totally right.

instead using both ::after and ::before pseudo elements you can use one of them as the styles below and everything will work fine:

.nft-card__bg-layer::after { content: url(./images/icon-view.svg); position: absolute; background-color: rgb(0 255 247 / 45%); width: 100%; height: 100%; opacity: 0; top: 0; left: 0; display: flex; align-items: center; justify-content: center; cursor: pointer; border-radius: 1rem; overflow: hidden; transition: .3s ease; }

.nft-card__bg-layer:hover::after { opacity: 1; }

use transition property for smoother hover effect for both .nft-card__heading and .nft-card__creator-name

you can see My solution for this challenge it may be helpful for you..!

I hope this wasn't too long for you, hoping also it was useful😍.

Goodbye and have a nice day.

Keep coding🚀
Marked as helpful
1
Milos Djordjevic• 990
@milosshomy
Submitted almost 2 years ago
Any feedback?
QR Code using html css
1
Mo• 840
@MohamedAridah
Posted almost 2 years ago
Hello @milosshomy,

I have some notes for you:

don't use height for .card this causes big space in the bottom of your card. let content inside the card take the suitable spaces like padding and margin instead.

when you remove height for the .card div you will need to add padding-bottom for the .card-content div

remove margin-bottom for the image. you can use it for .card-image div itself.

For Accessibility issues:

wrap .card div inside <main> tag.

use <h1> heading level instead of using <h3> heading level.

you can see My solution for this challenge it may be helpful for you..!

I hope this wasn't too long for you, hoping also it was useful😍.

Goodbye and have a nice day.

Keep coding🚀
Marked as helpful
0
Khalil Nazari• 220
@khalilnazari
Submitted almost 2 years ago
Dear members,

another challenge is resolved. Please share your idea if any improvement is needed.

Cheers!
QR code card component
1
Mo• 840
@MohamedAridah
Posted almost 2 years ago
Hello @khalilnazari, your solution is very impressive, and your code is clean enough.

the only note for you is to use min-height: 100vh for the body instead of using height: 100vh. This will allow your content to take more vertical height if content needed to. So user can see all the content.

you can set text-align directly to .card .card__body div instead of h1 and p. because they both share the same value. The current solution is totally fine and right

For Accessibility issues

you can just put .container div inside <main> tag. This should fix your accessibility issues.

I hope this wasn't too long for you, hoping also it was useful😍.

Goodbye and have a nice day.

Keep coding🚀
Marked as helpful
0
sanket kumar• 300
@sanketcharanpahadi
Submitted almost 2 years ago
Any suggestions or improvements are welcomed.
Advice generator app with html, css and js
#fetch
2
Mo• 840
@MohamedAridah
Posted almost 2 years ago
Hello @sanketcharanpahadi, you solution is looking very good.👍👏

I have some feedback for you:

you can run getQuote() function when page loads for getting new advice every time.

window.addEventListener('load', getQuote);

you can use button instead of .expand div. It will be more Semantic.

<button class="expand flex"> <img src="images/icon-dice.svg" alt=""> </button>

just add this property to the .expand

.expand { all: unset }

I hope this wasn't too long for you, hoping also it was useful😍.

Goodbye and have a nice day.

Keep coding🚀
Marked as helpful
1
gurpreet• 280
@justcoder42022
Submitted almost 2 years ago
always welcome feedback for improvement.
Order summary component only css html
1
Mo• 840
@MohamedAridah
Posted almost 2 years ago
Hello @justcoder42022, you did good job for this challenge.

However i have some notes:

change height: 100vh of the body to be min-height: 100vh. this will allow content to take more height of the body if it needs to.

use transition property for smoother hover effect.

use overflow: hidden for .wrapper. by doing this you don't need to set border-radius for the image.

there is extra space on the top and bottom of the main element. try to know it's source and remove it.

you can see My solution for this challenge it may be helpful for you..!

I hope this wasn't too long for you, hoping also it was useful😍.

Goodbye and have a nice day.

Keep coding🚀
Marked as helpful
1
DefinitelyObsessed• 440
@DefinitelyObsessed
Submitted about 2 years ago
Feedback welcome.
NFT preview card component #2
1
Mo• 840
@MohamedAridah
Posted almost 2 years ago
Hello @DefinitelyObsessed, your layout looks great ,but you need some improvements like:

use transition for smoother hover effect.

you have problem with the image border-radius is not applied correctly.

instead of using padding for each element separately. just give it to the .parent-block and it will works fine

I strongly recommend you to take a look for My solution for this challenge to see HTML structure and how to deal with the image.

I hope this wasn't too long for you, hoping also it was useful😍.

Goodbye and have a nice day.

Keep coding🚀
Marked as helpful
1
DefinitelyObsessed• 440
@DefinitelyObsessed
Submitted about 2 years ago
Feedback welcome.
Order summary component #3
1
Mo• 840
@MohamedAridah
Posted almost 2 years ago
Hello @DefinitelyObsessed, very good job there. your solution is almost identical to the design.

However i have some notes for you:

There is other way to center .parent-card instead of position. like setting display: flex or even display: grid to the body element. Your way is totally right

body { display: flex; justify-content: center' align-items: center }

body { display: grid; place-items: center }

in the body styles you can use background property shortcut. like:

body { background: hsl(225, 100%, 94%) url("./images/pattern-background-desktop.svg") no-repeat; }

To be more HTML Semantic you can use <a> element for pay cancel order below. because this action may lead to an other page to continue the process.

For Accessibility issues

use main element instead of .parent-card div.

change <h2> heading level to be <h1> heading level. this should fix your accessibility issues.

you can see My Solution for this challenge it may be helpful for you.

I hope this wasn't too long for you, hoping also it was useful😍.

Goodbye and have a nice day.

Keep coding🚀
Marked as helpful
1
DefinitelyObsessed• 440
@DefinitelyObsessed
Submitted about 2 years ago
Feedback welcome .
3-column preview card component #5
3
Mo• 840
@MohamedAridah
Posted almost 2 years ago
Hello @DefinitelyObsessed , Great job for this challenge.

I have some notes for you:

As LiBee mentioned above the card not centered. This problem cause horizontal overflow for small screens.

Add transition property for <button> elements on hover for smoother effect on hover on it

you can leave card's image alt attribute Empty. Because these icons not necessary it's just for decoration. And this one of the cases leaving alt attribute empty is a good practice.

instead of redeclaring font-family for each element individually. You can set it to the body globally.

body { font-family: "Big Shoulders Display", sans-serif; }

I hope this wasn't too long for you, hoping also it was useful😍.

Goodbye and have a nice day.

Keep coding🚀
Marked as helpful
1
Richard• 60
@detomdev
Submitted about 2 years ago
There is something going on with the attribution when in the desktop orientation. Other than that I was happy with how this turned out.
Responsive 3-column preview challenge solution
2
Mo• 840
@MohamedAridah
Posted almost 2 years ago
Hello there, Richard! 👋. Good job.

you can do simple improvements for this challenge:

instead of using border-radius separately for .sedans and .luxury divs and change them again by mediaquery. You can set border-radius just for the .container and everything will work fine.

.container { border-radius: 10px; overflow: hidden; /* to crop radius perfectly */ }

For active state for button elements. you can change cursor of the mouse to pointer to inform user this is clickable

button:hover{ cursor: pointer; }

To be more HTML Semantic you can use <footer> element instead of .attribution div.

I hope this wasn't too long for you, hoping also it was useful😍.

Goodbye and have a nice day.

Keep coding🚀
Marked as helpful
0
rai-biraj• 360
@birajrai100
Submitted almost 2 years ago
welcome to all kind of correction and suggestions
single-price-component using grid layout
1
Mo• 840
@MohamedAridah
Posted almost 2 years ago
Hello @RaiPrayash, you did a Great job.👏🎉 and your solution looks similar to the design. But unfortunately it's Not Responsive. and i have some notes for you:

To center your .container element you can add these styles to the body:

.body{ display: grid; place-items: center; min-height: 100vh }

instead of set border-radius property separately for .box-1 , .box-2 and .box-3. You can just add it for the .container itself

.container{ border-radius: 10px; overflow: hidden; /* to crop radius perfectly */ }

when using font-weight property don't use units. ex:

The wrong way

.element { font-weight: 700px; }

The right way

.element { font-weight: 700; }

row-gap property for .box-1 , .box-2 and .box-3 elements are quite big. Try to reduce it

add active state for button element on hover. it will be nice:

.box-2 button { transition: 200ms linear; /* to make hover effect smoother */ }

.box-2 button:hover { background-color: hsl(71deg 73% 65% / 96%); cursor: pointer; }

For p element inside .box-3 p div. Try use ul element (unordered list) will be much better and this is More Html Semantic

<ul> <li>Tutorials by industry experts </li> <li>Peer & expert code review </li> <li>Coding exercises</li> <li>Access to our GitHub repos</li> <li>Community forum </li> <li>Flashcard decks </li> <li>ew videos every week</li> </ul>

Try to make your solution Responsive

I hope this wasn't too long for you, hoping also it was useful😍.

Goodbye and have a nice day.

Keep coding🚀
Marked as helpful
2
SmritiP• 20
@Smritipradhan01
Submitted almost 2 years ago
Hey everybody, please review and provide your feedback on the accessibility, responsiveness or the structure of the code overall. Thanks!
Mobile-first solution using Flexbox
1
Mo• 840
@MohamedAridah
Posted almost 2 years ago
Hello @Smritipradhan01, You did a good job for this challenge🎉👏👍.

There are my notes for your project:

From the first look it was obvious that box-shadow was too much. So try reduce it little bit.

.card-container { box-shadow: 1px 5px 15px 2px rgb(20 37 61 / 30%); /* Always with box-shadow use alpha channel with low opacity */ }

use transition property for .card_attribution span for smoother color shifting.

You solution is Responsive and this is good.

HTML Structure

instead of the the current html structure. you can use more simple one:

the card consists of 3 main <div>s

<div> for the card image

<div>for the card details

<div> for details text

<div> for the statistics below it

<div>for the card footer

you can get rid of .card_img-overlay-container and use pseudo elements like ::after or ::before for the .card-image-container. ex:

.card_img-container::after { content: url(./images/icon-view.svg); position: absolute; background-color: var(--cyan-overlay); width: 100%; height: 100%; opacity: 0; top: 0; left: 0; display: flex; align-items: center; justify-content: center; cursor: pointer; border-radius: 1rem; overflow: hidden; transition: .3s ease; }

.card_img-container:hover::after { opacity: 1; }

instead of using <hr> element as border between divs you cab use border-top or border-bottom properties depending on the suitable situation.

you can see My solution for this challenge it may be useful for you.!

I hope this wasn't too long for you, hoping also it was useful😍.

Goodbye and have a nice day.

Keep coding🚀
0
Abdulkerim Awad• 120
@AbdulkerimAwad
Submitted almost 2 years ago
The header part was the hardest because I was confused about putting it in the container or not and using the positioning or not, whatever was a great challenge.
EasyBank responsive website using bootstrap5 and scss
#bootstrap#sass/scss#jquery
2
Mo• 840
@MohamedAridah
Posted almost 2 years ago
Hello @AbdulkerimAwad, Yo did good job for this challenge🎉👍. Your website is Responsive and that's really cool.

However i have some notes for you:

Don't use compiled css files for learning purpose projects. it will be impossible to read your code form style.css file.

css nesting rules are so long. and this will make browser take time to render it. example for what i mean:

html body .main-container header .next-generation button

it could be shortened to

.main-container header .next-generation button

try use transition property specially for .next-generation button and footer links.

change .card-title color property of the articles on hover

I hope this wasn't too long for you, hoping also it was useful😍.

Goodbye and have a nice day.

Keep coding🚀
Marked as helpful
1
Florencio Britez• 170
@britez13
Submitted almost 2 years ago
I really appreciate any sugestion or feedback!
NFT Card Component
#bem
1
Mo• 840
@MohamedAridah
Posted almost 2 years ago
Hello @britez13, You did a Great job for this challenge. your solution is almost identical to the design, also your HTML structure is very good made.

For more improvements you can do the following:

You can make hover effect of the image more smoother by using transition property.

instead using both ::after and ::before pseudo elements you can use one of them as the styles below and everything will work fine:

.card__figure::after { content: url(./images/icon-view.svg); position: absolute; background-color: var(--cyan-color); width: 100%; height: 100%; opacity: 0; top: 0; left: 0; display: flex; align-items: center; justify-content: center; cursor: pointer; border-radius: 1rem; overflow: hidden; transition: .3s ease; }

.card__figure:hover::after { opacity: 1; }

the active state of the design requires changing the color property of <h1>` and author in the footer elements

.card__title, card__author-link { transition: 0.3s linear; /* don't forget transition */ }

.card__title:hover, card__author-link:hover { color: var(--cyan-color); }

you can see My solution for this challenge it may be useful for you.!

I hope this wasn't too long for you, hoping also it was useful😍.

Goodbye and have a nice day.

Keep coding🚀
Marked as helpful
3
Thomas Sorensen• 10
@tommysoren
Submitted almost 2 years ago
I found centering difficult but figured it out eventually with help on here. I'm unsure of my accessibility and responsiveness!
QR Code
2
Mo• 840
@MohamedAridah
Posted almost 2 years ago
Hello @tommysoren, congratulation on submitting your first solution🎉👏. And Because it's the first solution. you need a lot of improvements to make the solution look similar to the design here are some:

It seems you forget to load Google Font. Add this link to you <head> tag in the index.html page. and set body font-family property to be Outfit

<head> <link rel="preconnect" href="https://fonts.googleapis.com" /> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@400;700&display=swap" rel="stylesheet" /> </head>

body { font-family: 'Outfit', sans-serif; }

Use wrappers. the idea of using wrappers is to group similar and related elements together. instead of

<img> <h2 class="bold"></h2> <p class="regular"></p>

you can use

<div class="box-image"></div> <div class="box-text"></div>

this will give you more control on styling instead of dealing with 3 elements individually you will deal with 2. This will be very useful when dealing with big websites.

instead of this css big rest styles you used. You can use this simple rest style:

* { padding: 0; margin: 0; box-sizing: border-box; }

I hope this wasn't too long for you, hoping also it was useful😍.

Goodbye and have a nice day.

Keep coding🚀
Marked as helpful
0
Rowen• 60
@RowenTey
Submitted almost 2 years ago
I had a little trouble getting the hover effect for the image to work, gotta read up more on pseudo-elements! Feel free to leave any feedback, thanks and cheers!
NFT Preview Card Component using CSS Flexbox
1
Mo• 840
@MohamedAridah
Posted almost 2 years ago
Hello @RowenTey, you did a good job here👍👏. ,but i have some notes for you:

When you use transition. Use it for the element itself not the element on :hover effect on it. ex:

The wrong way

.element:hover{ transition: opacity 200ms linear; }

The right way

.element { transition: opacity 200ms linear; }

One pseudo-element can do the hover effect fine weather ::after or ::before. ex:

.card .img-wrapper::after { content: url(./images/icon-view.svg); position: absolute; background-color: /* Cyan color here... */; width: 100%; height: 100%; opacity: 0; top: 0; left: 0; display: flex; align-items: center; justify-content: center; transition: .3s ease; }

by using the styles above you can remove .card .img-wrapper::before styles safely.

you can see My solution for this challenge it may be useful for you.!

I hope this wasn't too long for you, hoping also it was useful😍.

Goodbye and have a nice day.

Keep coding🚀
Marked as helpful
1

Mo

All comments

QR code component solution

responsive landing page using CSS Flex

order-summary-component-main

More practice with Figma

Basic HTML and CSS (with Flexbox)

Mobile-first solution using Flexbox

single-price-grid-component Using Grid

Mobile-first solution using Flexbox

NFT preview card component by Gurpreet Singh Kalyan

NFT Card Component Solution

QR Code using html css

QR code card component

Advice generator app with html, css and js

Order summary component only css html

NFT preview card component #2

Order summary component #3

3-column preview card component #5

Responsive 3-column preview challenge solution

single-price-component using grid layout

Mobile-first solution using Flexbox

EasyBank responsive website using bootstrap5 and scss

NFT Card Component

QR Code

NFT Preview Card Component using CSS Flexbox