Skip to content
OverviewSolutions
10
Comments
37

Mo

@MohamedAridah840 points

I don't know what to write actually..! but i started my coding journey by chance in 2020 just to spend time and it turned out that coding makes my happy..!. So that's why i am here, WHY not.!👍

I’m currently learning...

Javascript, Turn designs to real code for more practice.

Latest solutions

View more solutions

Latest comments

  • Mo•840
    @MohamedAridah

    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
  • Mo•840
    @MohamedAridah

    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🚀

  • Mo•840
    @MohamedAridah

    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🚀

  • Mo•840
    @MohamedAridah

    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
  • Mo•840
    @MohamedAridah

    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
  • Mo•840
    @MohamedAridah

    @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
View more comments