Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

All comments

  • JEVN-MVRC• 160

    @Jean-Marc18

    Posted

    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

    @Enis67

    Submitted

    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-Marc18

    Posted

    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• 170

    @CesjhoanFeliu

    Submitted

    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-Marc18

    Posted

    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-Marc18

    Posted

    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