Latest solutions
- Submitted almost 3 years ago
E-commerce product page solution using Vanilla JavaScript & SCSS
#sass/scss- HTML
- CSS
- JS
- Submitted almost 3 years ago
REST Countries API with color theme switcher using Vanilla JavaScript
#fetch#sass/scss- HTML
- CSS
- JS
- API
Latest comments
- @inkfrombloodSubmitted almost 3 years ago@MohamedAridahPosted almost 3 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 helpful0 - use
- @MorufLawalSubmitted almost 3 years ago@MohamedAridahPosted almost 3 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 useborder-top
orborder-bottom
depending on the div you will use it. Also this is more Semantic -
for
.Bottom
give ittext-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 moreSemantic
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 - for the hover effect, put the image with
- @shalexandeerSubmitted almost 3 years ago@MohamedAridahPosted almost 3 years ago
Hello ,
-
for
.parent
you need to addbackground-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 changebackground-size
property to 100% instead of cover. or you can removebackground-size
property at all. you cab read aboutbackground-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 removemargin-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 removeheight: 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 usingmargin-left
ormargin-right
to center the content . You can just usemargin: auto
. -
use
font-family
globally in thebody
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@12KentosSubmitted almost 3 years ago@MohamedAridahPosted almost 3 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 usingheight: 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 thepadding
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 helpful1 -
- @tbrownleeSubmitted almost 3 years ago@MohamedAridahPosted almost 3 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 sodisplay: flex
will do nothing. -
instead of giving
width
property to the.text
or the<img>
you can just let them take100%
of the width and usepadding
property to control and give the outer space around the.container
. -
it's better to use
rem
units forfont-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 helpful1 -
- @tbrownleeSubmitted almost 3 years ago@MohamedAridahPosted almost 3 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 helpful1 - Yes, you can change the icon size by using