Kawsar Ahmed Fahad

@faha1999

All comments

Andres•110
@AndresJurado117Submitted about 2 years ago
Single Price Grid Component Zach Class with adjustments.
2
Kawsar Ahmed Fahad•2,660
@faha1999Posted about 2 years ago
Hello, Andres Congratulations on finishing this project. It's lovely and great on the whole! Just a little tip:

You might want to use semantic tags like the <main> to wrap your code, instead of div. like

<main id="card"> </main>

This would help improve accessibility.

add favicon <link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">

add the below styles to the body. It will center everything

body { justify-content: center; align-items: center; display: flex; min-height: 100vh; flex-direction: column; /* padding: 20px; */ }

remove margin: auto; in the #card

use modern CSS reset https://piccalil.li/blog/a-modern-css-reset/

Instead of using px, use relative units like rem or em to get better performance when the information on your page needs to be resized for multiple screens and devices. REM and EM apply to all sizes, not just font-size. You can code your entire page in px and then, at the very end, use the VsCode plugin px to rem to perform the automatic conversion px to rem

I hope it will work. Happy coding.
Marked as helpful
1
Stanley•20
@dadsec-devSubmitted about 2 years ago
Frontend Mentor - Product preview card component
2
Kawsar Ahmed Fahad•2,660
@faha1999Posted about 2 years ago
Hello, Stanley Congratulations on finishing this project. It's lovely and great on the whole! Just a little tip:

You might want to use semantic tags like the <main> to wrap your code, instead of div. like

<main class="container"></main> <footer class="attribution"></footer>

This would help improve accessibility.

add the below styles to the body. It will center everything

body { justify-content: center; align-items: center; display: flex; min-height: 100vh; flex-direction: column; }

Add the below styles to the .container

.container{ max-width: 40rem; /* margin: 7rem 15rem 9rem 15rem; */ /* border: 1px solid hsl(30, 38%, 92%); */ }

Remove all margin

Fixed the media issue.

Instead of using px, use relative units like rem or em to get better performance when the information on your page needs to be resized for multiple screens and devices. REM and EM apply to all sizes, not just font-size. You can code your entire page in px and then, at the very end, use the VsCode plugin px to rem to perform the automatic conversion px to rem

This is my solution of this challenge live, repo

I hope it will work. Happy coding.
Marked as helpful
0
Danii•30
@iDylaanSubmitted about 2 years ago
Responsive Product Previewer Card
2
Kawsar Ahmed Fahad•2,660
@faha1999Posted about 2 years ago
Hello, Danii Congratulations on finishing this project. It's lovely and great on the whole! Just a little tip:

add the below styles to the body. It will center everything

body { justify-content: center; align-items: center; display: flex; min-height: 100vh; flex-direction: column; }

@media (min-width: 768px){} not min-width: 1440px this will be more responsive.

for HTML Validation error follow this URL https://rocketvalidator.com/html-validation/section-lacks-heading-consider-using-h2-h6-elements-to-add-identifying-headings-to-all-sections

Instead of using px, use relative units like rem or em to get better performance when the information on your page needs to be resized for multiple screens and devices. REM and EM apply to all sizes, not just font-size. You can code your entire page in px and then, at the very end, use the VsCode plugin px to rem to perform the automatic conversion px to rem

This is my solution of this challenge live, repo

I hope it will work. Happy coding.
0
Mustafa Anandwala•30
@Mussu007Submitted about 2 years ago
Product-review-card
2
Kawsar Ahmed Fahad•2,660
@faha1999Posted about 2 years ago
Hello, Mustafa Anandwala Congratulations on finishing this project. It's lovely and great on the whole! Just a little tip:

You might want to use semantic tags like the <main> to wrap your code, instead of div. like

<main class="container"> </main>

This would help improve accessibility.

add align-items: center; to the body

remove margin from the .container

Instead of using px, use relative units like rem or em to get better performance when the information on your page needs to be resized for multiple screens and devices. REM and EM apply to all sizes, not just font-size. You can code your entire page in px and then, at the very end, use the VsCode plugin px to rem to perform the automatic conversion px to rem

This is my solution of this challenge live, repo

I hope it will work. Happy coding.
Marked as helpful
1
Ikenna Oguejiofor•540
@ikennarichardSubmitted about 2 years ago
Hello, please what's the better way of setting up this project, useful tips to help me improve. Thanks a lot !
CSS grid, Flexbox, responsive
2
Kawsar Ahmed Fahad•2,660
@faha1999Posted about 2 years ago
Hello, Ikenna Oguejiofor Congratulations on finishing this project. It's lovely and great on the whole! Just a little tip:

You might want to use semantic tags like the <main> to wrap your code, instead of div. like

<main class="container"> </main>

add alt="image-product-desktop" attribute in img

This would help improve accessibility.

add the below styles to the body. It will center everything

body { justify-content: center; align-items: center; display: flex; min-height: 100vh; flex-direction: column; }

remove the below styles from .container & .wrapper

.container{ /* width: 50vw; */ /* display: flex; */ } .wrapper{ /*left: 50%;*/ background: white; } @media (max-width: 550px) .wrapper { /*margin-top: 20px; */ /* margin-left: 20px; */ /*left: 50%;*/ } .product-details { width: fit-content; } }

Fixed the other HTML Validation error from the report.

Instead of using px, use relative units like rem or em to get better performance when the information on your page needs to be resized for multiple screens and devices. REM and EM apply to all sizes, not just font-size. You can code your entire page in px and then, at the very end, use the VsCode plugin px to rem to perform the automatic conversion px to rem

This is my solution of this challenge live, repo

I hope it will work. Happy coding.
Marked as helpful
0
khaleelulah•350
@khaleelulahSubmitted about 2 years ago
nft preveiw card component using css flexbox
1
Kawsar Ahmed Fahad•2,660
@faha1999Posted about 2 years ago
Hello, khaleelulah Congratulations on finishing this project. It's lovely and great on the whole! Just a little tip:

You might want to use semantic tags like the <main> to wrap your code, instead of div. like

<main class="main-container"> </main>

This would help improve accessibility.

active-state of img

<a class="image" href="#"> <img src="./assets/images/image-equilibrium.jpg" alt="Equilibrium image" /> </a>

hover effect

.image { position: relative; display: block; height: 320px; overflow: hidden; border-radius: .7rem; } .image::before { content: ''; position: absolute; top: 0; left: 0; z-index: 100; width: 100%; height: 100%; opacity: 0; transform: scale(0); background-color: transparentize(hsl(178, 100%, 50%), 0.5); transition: transform 0.4s ease-in-out, opacity 0.3s; } .image:hover::before { opacity: 1; transform: scale(1); } .image::after { content: url(../../images/icon-view.svg); position: absolute; top: 0; left: 0; z-index: 100; width: 100%; height: 100%; opacity: 0; transition: opacity 0.2s ease-in 0.1s; display: flex; justify-content: center; align-items: center; } .image:hover::after { opacity: 1; }

for HTML validation error of img please visit below links

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img, https://www.w3schools.com/tags/att_img_width.asp

fix the other Accessibility issue from the report.

Instead of using px, use relative units like rem or em to get better performance when the information on your page needs to be resized for multiple screens and devices. REM and EM apply to all sizes, not just font-size. You can code your entire page in px and then, at the very end, use the VsCode plugin px to rem to perform the automatic conversion px to rem

this is my solution of this challenge live,repo

I hope it will work. Happy coding.
Marked as helpful
0
Gustavo de Assis G. Reis•90
@gustavoagoncalvesSubmitted about 2 years ago
Hello guys!

Here's my solutions for this nft challenge. I used sass on this one and did not upload the css file this time so I can see if it will work in someone else's computer. I just tested on mine's and worked perfectly. So, just download the repo and run the sass in your machine and it'll generate the css file so you can see the final result. Thanks everyone \m/
NFT card using HTML, SASS and flexbox.
3
Kawsar Ahmed Fahad•2,660
@faha1999Posted about 2 years ago
Hello, Gustavo de Assis G. Reis Congratulations on finishing this project. It's lovely and great on the whole! Just a little tip:

You might want to use semantic tags like the <main> to wrap your code, instead of div. like

<main class="container"> </main>

To fix the level-one heading Accessibility issue follow

This would help improve accessibility.

add the below styles to the body. It will center everything

body { justify-content: center; align-items: center; display: flex; min-height: 100vh; flex-direction: column; // margin: 60px auto; }

add the active-state of img

<a class="nft-card-image" href="#"> <img class="ethereum" src="./images/image-equilibrium.jpg" alt="NFT Equilibrium" /> </a>

hover effect

.ethereum { position: relative; display: block; height: 320px; overflow: hidden; border-radius: $br-10; &::before { content: ''; position: absolute; top: 0; left: 0; z-index: 100; width: 100%; height: 100%; opacity: 0; transform: scale(0); background-color: transparentize($cyan, 0.5); transition: transform 0.4s ease-in-out, opacity 0.3s; } &:hover::before { opacity: 1; transform: scale(1); } &::after { content: url(../images/icon-view.svg); position: absolute; top: 0; left: 0; z-index: 100; width: 100%; height: 100%; opacity: 0; transition: opacity 0.2s ease-in 0.1s; display: flex; justify-content: center; align-items: center; } &:hover::after { opacity: 1; } }

Instead of using px, use relative units like rem or em to get better performance when the information on your page needs to be resized for multiple screens and devices. REM and EM apply to all sizes, not just font-size. You can code your entire page in px and then, at the very end, use the VsCode plugin px to rem to perform the automatic conversion px to rem

this is my solution of this challenge live,repo

I hope it will work. Happy coding.
Marked as helpful
0
Mustafa Atmaca•610
@atmcmustafaSubmitted about 2 years ago
Responsive Product Card Project with Tailwindcss
3
Kawsar Ahmed Fahad•2,660
@faha1999Posted about 2 years ago
Hello, Mustafa Atmaca Congratulations on finishing this project. It's lovely and great on the whole! Just a little tip:

remove all margin & padding from main & container. And add min-height: 100vh. It will center everything.

In mobile devices, the product image should be <img src="images/image-product-mobile.jpg" alt="image" class="rounded-lg w-full h-1/2">

Instead of using px, use relative units like rem or em to get better performance when the information on your page needs to be resized for multiple screens and devices. REM and EM apply to all sizes, not just font-size. You can code your entire page in px and then, at the very end, use the VsCode plugin px to rem to perform the automatic conversion px to rem

I hope it will work. Happy coding.
Marked as helpful
0
Marco Pereira•50
@pereira1185Submitted about 2 years ago
My difficutl was how to put the great opacity value in the "icon-view.svg".
NFT preview card component
3
Kawsar Ahmed Fahad•2,660
@faha1999Posted about 2 years ago
Hello, Marco Pereira Congratulations on finishing this project. It's lovely and great on the whole! Just a little tip:

You might want to use semantic tags like the <main> to wrap your code, instead of div. like

<main class="container-fluid main-container d-flex justify-content-center"> </main>

This would help improve accessibility.

.card-box padding should be 1rem

Instead of using px, use relative units like rem or em to get better performance when the information on your page needs to be resized for multiple screens and devices. REM and EM apply to all sizes, not just font-size. You can code your entire page in px and then, at the very end, use the VsCode plugin px to rem to perform the automatic conversion px to rem

I hope it will work. Happy coding.
Marked as helpful
0

Hamid Ali•180

@HamidAliZainSubmitted about 2 years ago

NFT Card Component Using Tailwind

Kawsar Ahmed Fahad•2,660

@faha1999Posted about 2 years ago

Hello, Hamid Ali Congratulations on finishing this project. It's lovely and great on the whole! Just a little tip:

add favicon <link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
active-state of img

<div class="item flex flex-col items-center">
      <a class="hover-effect" href="#">
        <span class="hover-effect-container">
          <span class="hover-effect-icon ">
            <span class="top-icon">
              <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 576 512" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg">
                <path d="M572.52 241.4C518.29 135.59 410.93 64 288 64S57.68 135.64 3.48 241.41a32.35 32.35 0 0 0 0 29.19C57.71 376.41 165.07 448 288 448s230.32-71.64 284.52-177.41a32.35 32.35 0 0 0 0-29.19zM288 400a144 144 0 1 1 144-144 143.93 143.93 0 0 1-144 144zm0-240a95.31 95.31 0 0 0-25.31 3.79 47.85 47.85 0 0 1-66.9 66.9A95.78 95.78 0 1 0 288 160z">
                </path>
              </svg>
            </span>
          </span>
        </span>
        <div class="p-2">
          <div class="ethereum-logo">
               <img src="./images/image-equilibrium.jpg" alt="equlibrium" class="w-4/5 border-solid rounded-xl my-6">
         </div>
        </div>
      </a>
    </div>

hover effect

.item {
    overflow: hidden;
    position: relative;
}


.hover-effect {
    display: block; 
    overflow: hidden;
    position: relative;
}

.hover-effect:before {
    background-color: rgba(44,45,48,0);
    content: "";
    position: absolute;
    height: 100%;
    left: 0;
    top: 0;
    width: 100%;
}


.hover-effect-container {
    left: 50%;
    position: absolute;
    top: -1.25rem;
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    transition: .4s;
}

.hover-effect-icon {
    color: #fff;
    display: inline-block;
    font-size: .75rem;
    text-align: center;
}

active-state of h3 & p span

h1:hover, p sapn:hover{
    cursor: pointer;
    color: #25e6eb;;
}

a small transition will be more attractive.

this is my solution of this challenge live,repo

I hope it will work. Happy coding.

Arturo Torres Flores•320
@Arturo9314Submitted about 2 years ago
Hola, hice esta tarjeta utilizando bootstrap y sass, queria poner en práctica el uso de landmarks de HTML5, pero quizá me falta entender mejor la distribución de cada elemento. Cualquier comentario es bienvenido, gracias por ver 😁
NFT card using SASS
1
Kawsar Ahmed Fahad•2,660
@faha1999Posted about 2 years ago
Hello, Arturo Torres Flores Congratulations on finishing this project. It's lovely and great on the whole! Just a little tip:

add style inside of head. Just like below.

<head> </head>

add favicon <link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">

remove margin: 8% from main & add min-height:100vh

Instead of using px, use relative units like rem or em to get better performance when the information on your page needs to be resized for multiple screens and devices. REM and EM apply to all sizes, not just font-size. You can code your entire page in px and then, at the very end, use the VsCode plugin px to rem to perform the automatic conversion px to rem

I hope it will work. Happy coding.
Marked as helpful
0

Farouk Mustapha•230

@Farouk-ayoSubmitted about 2 years ago

Pls how do you implement the changing of imageColor on hover? And if any other suggestion , pls feel free to state them.

Html css

Kawsar Ahmed Fahad•2,660

@faha1999Posted about 2 years ago

Hello, Mustapha Farouk Congratulations on finishing this project. It's lovely and great on the whole! Just a little tip:

You might want to use semantic tags like the <main> to wrap your code, instead of section. like

<main class="body"></main>

This would help improve accessibility.

in the body box-shadow is box-shadow: #0c1627 0px 14px 28px, #0c1627 0px 10px 10px;
active-state of img

<div class="item">
      <a class="hover-effect" href="#">
       <span class="hover-effect-container">
          <span class="hover-effect-icon ">
            <span class="top-icon">
              <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 576 512" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg">
                <path d="M572.52 241.4C518.29 135.59 410.93 64 288 64S57.68 135.64 3.48 241.41a32.35 32.35 0 0 0 0 29.19C57.71 376.41 165.07 448 288 448s230.32-71.64 284.52-177.41a32.35 32.35 0 0 0 0-29.19zM288 400a144 144 0 1 1 144-144 143.93 143.93 0 0 1-144 144zm0-240a95.31 95.31 0 0 0-25.31 3.79 47.85 47.85 0 0 1-66.9 66.9A95.78 95.78 0 1 0 288 160z">
                </path>
              </svg>
            </span>
          </span>
        </span>
        <div class="p-2">
          <div class="ethereum-logo">
                <img class="equiLImg" src="images/image-equilibrium.jpg" alt="equilibrium">
         </div>
        </div>
      </a>
    </div>

hover effect

.item {
    overflow: hidden;
    position: relative;
}


.hover-effect {
    display: block; 
    overflow: hidden;
    position: relative;
}

.hover-effect:before {
    background-color: rgba(44,45,48,0);
    content: "";
    position: absolute;
    height: 100%;
    left: 0;
    top: 0;
    width: 100%;
}


.hover-effect-container {
    left: 50%;
    position: absolute;
    top: -1.25rem;
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    transition: .4s;
}

.hover-effect-icon {
    color: #fff;
    display: inline-block;
    font-size: .75rem;
    text-align: center;
}

active-state of h3 & p span

.title:hover, .h3:hover{
    cursor: pointer;
    color: #25e6eb;;
}

a small transition will be more attractive.

Instead of using px, use relative units like rem or em to get better performance when the information on your page needs to be resized for multiple screens and devices. REM and EM apply to all sizes, not just font-size. You can code your entire page in px and then, at the very end, use the VsCode plugin px to rem to perform the automatic conversion px to rem
this is my solution of this challenge live,repo

I hope it will work. Happy coding.

Marked as helpful

Kawsar Ahmed Fahad

All comments

Single Price Grid Component Zach Class with adjustments.

Frontend Mentor - Product preview card component

Responsive Product Previewer Card

Product-review-card

CSS grid, Flexbox, responsive

nft preveiw card component using css flexbox

NFT card using HTML, SASS and flexbox.

Responsive Product Card Project with Tailwindcss

NFT preview card component

NFT Card Component Using Tailwind

NFT card using SASS

Html css