Mo

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🚀

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🚀

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🚀

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🚀

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🚀