Skip to content
OverviewSolutions
7
Comments
4
JEVN-MVRC
@Jean-Marc18

All comments

  • JEVN-MVRC•160
    @Jean-Marc18Posted over 1 year ago

    Hello Enis67 👋. Congratulations on successfully completing the challenge! 🎉 I have other recommendations regarding your code that I believe will be of great interest to you.

    For HTML :

    i've added '<main>'

    <main>
      <div class="main-body">
        <img src="/images/image-qr-code.png" alt="image-qr-code" />
        <div class="main-text first-main">
          <b>Improve your front-end skills by building projects</b>
        </div>
        <div class="main-text second-main">
          Scan the QR code to visit Frontend Mentor and take your coding skills
          to the next level
        </div>
      </div>
</main>

    For CSS :

    main {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 252px;
}

.main-body {
    padding-top: 55px;
    background-color: hsl(0, 0%, 100%);
    border-radius: 15px;
    position: relative;
    width: 15rem;
    height: 20rem;
}
    0
  • Enis67•140
    @Enis67Submitted over 1 year ago

    I couldn't do the hover effect, tried really my best. Please, help me. Further need more advice and tips with coding skills.

    using CSS Flex tried my best

    1
    JEVN-MVRC•160
    @Jean-Marc18Posted over 1 year ago

    Hello Enis67 👋. Congratulations on successfully completing the challenge! 🎉 I have other recommendations regarding your code that I believe will be of great interest to you.

    Try to do that :

    HTML :

    <div class="hiding">
    <img src="images/image-equilibrium.jpg" alt="image-equilibrium">
    <div class="background">
      <img class="hide" src="images/icon-view.svg" alt="icon-view">
    </div>
  </div>

    CSS :

    .hiding{
	position: relative;
	border-radius: 0.8rem;
}
.background{
	position: absolute;
	height: 99%;
	width: 100%;
	top: 0;
	background: hsla(178.1, 100%, 50%, 0.47);
	border-radius: 0.8rem;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity : 0;
}
.background:hover{
	opacity: 1;
}
.hide {
  /*All removed*/
}

    I have'nt tested before sent you.

    0
  • Cesjhoan Feliu•190
    @CesjhoanFeliuSubmitted over 1 year ago

    Hi, I had problems mostly with the hover positioning as I am not used to position relative and absolute.

    If you could help me by telling me better ways to have done the hover I would be totally grateful, nice day!

    Eth card with HTML AND CSS vanilla

    1
    JEVN-MVRC•160
    @Jean-Marc18Posted over 1 year ago

    Hello Cesjhoan Feliu 👋. Congratulations on successfully completing the challenge! 🎉 I have other recommendations regarding your code that I believe will be of great interest to you.

    HTML 🏷️: to get a better result you can do this (I deleted the picture tag) :

     <div class="content-img">
   <img src="./images/image-equilibrium.jpg" alt="">
   <div class="hover">
      <img src="./images/icon-view.svg" alt="">
    </div>
 </div>

    CSS 🎨:

    .content-img{
  position : relative;
}
.hover {
  display: flex;
  align-items: center;
  justify-content: center;
  bottom: 3px;
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 10px;
  opacity: 0;
}
.hover:hover {
  opacity: 1;
  cursor: pointer;
  background-color: var(--Hover);
  visibility: visible;
}
    Marked as helpful
    1
  • JEVN-MVRC•160
    @Jean-Marc18Posted over 1 year ago

    You could use for a better overview and for more similarity with the challenge :

    .big-white-box { height: 29rem; }

    instead of :

    .big-white-box { height: 75vh; }

    and also for the button :

    button:hover, button:focus { background: linear-gradient(180deg, hsl(252, 100%, 67%), hsl(241, 81%, 54%)); }

    Marked as helpful
    1