Skip to content
OverviewSolutions
23
Comments
8
Rodrigo Vergara
@UnTalPeluca

All comments

  • Rodrigo Vergara•680
    @UnTalPelucaPosted 8 months ago

    The app works perfectly, congratulations! Adding some feedback when copying, such as a notification or message next to the password, would be a great enhancement. Otherwise, the user might not be sure if the copy operation worked; making it clear would provide a better user experience.

    Marked as helpful
    0
  • Rodrigo Vergara•680
    @UnTalPelucaPosted over 2 years ago

    Your solution is really good. I notice than when hover the image you can notice that it has an empty space at the bottom, you can fix it by adding

    display:block

    to the product image.

    Keep up the good work, you'll do very well. You can contact me on discord if you need any help Peluca#7132

    Marked as helpful
    1
  • Harsh Kumar•1,390
    @thisisharsh7Submitted over 2 years ago

    While building the project I found some problem on using border and box-shadow property in CSS and also I was unable to align the svg on the center when we hover on the card image (image overlay).

    NFT-preview-card-component

    2
    Rodrigo Vergara•680
    @UnTalPelucaPosted over 2 years ago

    For the box-shadow, not having the pro version, there's nothing wrong with looking at someone else's example and grabbing the properties with the element inspector.

    https://html-css-js.com/css/generator/box-shadow/

    Is a good tool to make box-shadows in an interactive way

    try

    box-shadow: 0 25px 50px 0 rgb(0 0 0 / 10%)
    Marked as helpful
    1
  • Harsh Kumar•1,390
    @thisisharsh7Submitted over 2 years ago

    While building the project I found some problem on using border and box-shadow property in CSS and also I was unable to align the svg on the center when we hover on the card image (image overlay).

    NFT-preview-card-component

    2
    Rodrigo Vergara•680
    @UnTalPelucaPosted over 2 years ago

    Hi harsh! At first css can be overwhelming, in almost all the projects that you will have to do there will be more than one solution for the same problem, as someone who started as a beginner very recently I recommend you save certain tricks that you will reuse in the future, like this one that I like a lot.

    I invite you to try this solution, remove #card-img:hover from your css and let's try an alternative.

    I saw that you used position:absolute in the footer and that's why I wanted to give you this example so you can see that many things can be done with this property. An element with position:absolute can be positioned anywhere, if I put top:0 it would be positioned at the top of the site, but something curious would happen if you wrap the footer in a div and give this div the position:relative property , your footer would no longer be at the top of the page, it would be at the top of the div. In this example I use the ::before pseudoelement to create an element the same size as the product image on hover. You can copy and paste, and you will see that it works perfectly.

    #card-img {
  cursor: pointer;
  position: relative;
}
#card-img:hover::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border-radius: 8px;
  background-color: rgba(0, 255, 255, 0.5);
  background-image: url("/images/icon-view.svg");
  background-repeat: no-repeat;
  background-position: center;
}

    I was also descriptive with the background properties so you could go through them one by one, but these can be shortened with

      background: no-repeat rgba(0, 255, 255, 0.5) url("/images/icon-view.svg") center;

    There are many more ways to solve it, I invite you to contact me on discord if you need help at any time Peluca#7132

    Marked as helpful
    1
  • Dia•50
    @DiaKartiSubmitted over 2 years ago

    This challenge went surprisingly smooth (except the picture overlay that overflows on the bottom a bit and I have no idea how to fix it), I was planning to use media queries but after using the clamp function I figured I didn't need to. As always feedback and suggestions are welcome !

    Responsive NFT preview card without using media queries

    1
    Rodrigo Vergara•680
    @UnTalPelucaPosted over 2 years ago

    Divs use extra empty space at the bottom when they have an image inside, you can fix this by adding the "display: block" property to the image.

    Marked as helpful
    1
  • sujit•50
    @SujitAdrojaSubmitted over 2 years ago

    I thik putting eye icon over image is littele difficult.Still it is not working as shown in challange .

    flex box

    4
    Rodrigo Vergara•680
    @UnTalPelucaPosted over 2 years ago

    For the eye icon you could wrap .main-img and .icon in a div. To this new div give it a "position: relative" and for the .icon give it a "position: absolute" and "top:0". You can remove the translate and left. "Absolute" elements take as reference the position of the closest "relative" parent element. By giving it top:0 it will position itself at the top of the div that wraps the image.

    Marked as helpful
    1
  • Rodrigo Vergara•680
    @UnTalPelucaPosted almost 3 years ago

    Hi, I've been reading your code and it's very clean, I'm sure you'll do well in the future when you use tools like scss. In these cases I like to use ::before and ::after, to do so you have to wrap your img.card-image in a div, because these pseudo-elements don't work in imgs. Here is an example where I use ::before to create an element that is the same size as the image, has two backgrounds, and uses ::hover to make it visible.

    .card-image-wrapper {
	cursor: pointer;
	position: relative;
	border-radius: 1rem; /* with this we don't have to specify */
	overflow: hidden; /* the border radius on each element.*/
}

.card-image-wrapper::before {
	content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    transition: opacity 0.4s ease-in;
	background: url(./images/icon-view.svg) no-repeat center, rgba(0,255,255, 0.5);
	opacity: 0;
}

.card-image-wrapper:hover::before {
	opacity: 1;
}

.card-image {
	width: 100%;
	display: block; /* When an image is inside a div,
	the div use an extra empty space at the bottom,
	this solves it */
}
    Marked as helpful
    2
  • Sergio Pinzón•85
    @sergiopin22Submitted almost 3 years ago

    Use Html and css only with flexbox, I still don't understand the part of the responsive design well, I would like your brothers to give me feedback :)

    Html and Css xd

    2
    Rodrigo Vergara•680
    @UnTalPelucaPosted almost 3 years ago

    As a suggestion, in order not to have to use margin above and below, a max-width so that it is separated from the borders. In .card you can use the css property "box-sizing: border-box" and give it a "padding: 25px", with border-box, padding does not enlarge our elements, but pushes them inwards, you will see that it will be a lot easier and faster to make your components with this. In the paragraph "Our Equilibrium collection ..." you can use "line-height: 24px" or something like that to give a bigger space between lines and finally for the white border that separates the information of the card with the creator you can use RGBA colors, these colors are very useful because you can change the opacity ("border-bottom: 1px solid rgba (0, 0, 0, 0.1)" for example) With this tool you can test https://rgbacolorpicker.com.

    esp :D

    Como sugerencia, para no tener que usar margin arriba y abajo, un max-width para que esté separado de los bordes. En .card puedes usar las propiedad de css "box-sizing: border-box" y darle un "padding: 25px", con border-box, el padding no agranda nuestros elementos, sino que los empuja hacia adentro, verás que será mucho mas facil y rapido hacer tus componentes con esto. En el parrafo "Our Equilibrium collection..." puedes usar "line-height: 24px" o algo asi para darle un espacio mas grande entre lineas y por ultimo para el border blanco quue separa la informacion de la tarjeta con el creador puedes utilizar colores RGBA, estos colores son muy utiles porque puedes cambiar la opacidad ("border-bottom: 1px solid rgba(0, 0, 0, 0.1)" por ejemplo) Con esta herramienta puedes testear https://rgbacolorpicker.com.

    Marked as helpful
    0