Kawsar Ahmed Fahad

@faha1999

All comments

Andres• 70
@XJuanRocksX
Submitted over 1 year ago
Single Price Grid Component Zach Class with adjustments.
2
Kawsar Ahmed Fahad• 2,680
@faha1999
Posted over 1 year 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-dev
Submitted over 1 year ago
Frontend Mentor - Product preview card component
#accessibility
2
Kawsar Ahmed Fahad• 2,680
@faha1999
Posted over 1 year 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
@iDylaan
Submitted over 1 year ago
Responsive Product Previewer Card
2
Kawsar Ahmed Fahad• 2,680
@faha1999
Posted over 1 year 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
@Mussu007
Submitted over 1 year ago
Product-review-card
2
Kawsar Ahmed Fahad• 2,680
@faha1999
Posted over 1 year 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• 520
@ikennarichard
Submitted over 1 year 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,680
@faha1999
Posted over 1 year 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
@khaleelulah
Submitted over 1 year ago
nft preveiw card component using css flexbox
1
Kawsar Ahmed Fahad• 2,680
@faha1999
Posted over 1 year 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
@gustavoagoncalves
Submitted over 1 year 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.
#sass/scss
3
Kawsar Ahmed Fahad• 2,680
@faha1999
Posted over 1 year 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
@atmcmustafa
Submitted over 1 year ago
Responsive Product Card Project with Tailwindcss
#tailwind-css
3
Kawsar Ahmed Fahad• 2,680
@faha1999
Posted over 1 year 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
@pereira1185
Submitted over 1 year ago
My difficutl was how to put the great opacity value in the "icon-view.svg".
NFT preview card component
#bootstrap
3
Kawsar Ahmed Fahad• 2,680
@faha1999
Posted over 1 year 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

@HamidAliZain

Submitted over 1 year ago

NFT Card Component Using Tailwind

#tailwind-css

Kawsar Ahmed Fahad• 2,680

@faha1999

Posted over 1 year 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
@Arturo9314
Submitted over 1 year 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
#sass/scss
1
Kawsar Ahmed Fahad• 2,680
@faha1999
Posted over 1 year 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-ayo

Submitted over 1 year 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,680

@faha1999

Posted over 1 year 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

Wagner Nazario• 20
@wagnernazarios
Submitted over 1 year ago
I can't done totally because I lost me when trying using :hover in the image. But I think better using blur and with it, I got a result seem.
NFT Card
#sass/scss
2
Kawsar Ahmed Fahad• 2,680
@faha1999
Posted over 1 year ago
Hello, Wagner Nazario 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="card"></main> <footer class="attribution"></footer>

This would help improve accessibility.

active-state of h3 & p span

.card-title:hover, .card-title a:hover{ cursor: pointer; color: #25e6eb;; }

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
Jesús Yanser• 70
@jyvega
Submitted over 1 year ago
Responsive page using Angular Framework
#typescript#angular
1
Kawsar Ahmed Fahad• 2,680
@faha1999
Posted over 1 year ago
Hello, Jesús Yanser Congratulations on finishing this project. It's lovely and great on the whole! Just a little tip:

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

add the below styles to the main

main{ background-blend-mode: exclusion; align-items: center; /* padding-top: 150px; */ /* padding-bottom: 150px;*/ }

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

fixed the other HTML Accessibility issues from the report.

this is my solution for this challenge live,repo. I complete this challenge based on scss.

I hope it will work. Happy coding.
Marked as helpful
1
Nicolas Gomez• 40
@gmznico
Submitted over 1 year ago
NFT preview card
#cube-css
1
Kawsar Ahmed Fahad• 2,680
@faha1999
Posted over 1 year ago
Hello, Nicolas Gomez Congratulations on finishing this project. It's lovely and great on the whole! Just a little tip:

add the below styles to the .container

.container{ background: #0d192b; background-blend-mode: exclusion; min-height: 100vh; display: flex; justify-content: center; align-items: center; /*margin: 14rem auto 0.5rem; */ /* width: 75rem;*/ }

remove ``height: 20rem;from the.section2`

this is my solution of this challenge live,repo

I hope it will work. Happy coding.
1
Kahoe Andre• 40
@kahoeandre
Submitted over 1 year ago
Treinando Html e CSS
nft-card
1
Kawsar Ahmed Fahad• 2,680
@faha1999
Posted over 1 year ago
Hello, Kahoe Andre Congratulations on finishing this project. It's lovely and great on the whole! Just a little tip:

add <html lang="en"> not lang="pt-br"

add below styles to the main

main{ background: #0d192b; background-blend-mode: exclusion; min-height: 100vh; display: flex; justify-content: center; align-items: center; }

add alt="icon" attribute in img . This would help improve accessibility.

Bad value images\image-avatar.png for attribute src on element img: Backslash (\) used as path segment delimiter.

remove all margin from the .container. It's not needed anymore.

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

Sarah Grimm• 50

@sarahagrimm

Submitted over 1 year ago

NFT Preview Card Component Using Bootstrap

#bootstrap

Kawsar Ahmed Fahad• 2,680

@faha1999

Posted over 1 year ago

Hello, Sarah Grimm 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="card"></main>

This would help improve accessibility.

active-state of img

<div class="item">
      <a class="hover-effect" data-overlay="rgba(52,58,64,.6)" target="_blank" rel="noreferrer"><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="" class="card-img-top">
         </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, h2 a:hover{
    cursor: pointer;
    color: #25e6eb;;
}

a small transition will be more attractive.

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
this is my solution of this challenge live,repo

I hope it will work. Happy coding.

Nacho Hotz• 30
@NachoHotz
Submitted over 1 year ago
Frontend Mentor Nft-Card
1
Kawsar Ahmed Fahad• 2,680
@faha1999
Posted over 1 year ago
Hello, Nacho Hotz 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 .container

.container{ background: #0d192b; background-blend-mode: exclusion; min-height: 100vh; /* margin-top: 2rem; */ }

remove margin-bottom: 20px; from .card-body

Instead of using px, use relative units like rem or em to perform better 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
David• 80
@DavetOluwapelumi
Submitted over 1 year ago
Responsive landing page using CSS grid
#axios#backbone#bootstrap#cube-css#bem
1
Kawsar Ahmed Fahad• 2,680
@faha1999
Posted over 1 year ago
Hello, David 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="grid-container"></main>

This would help improve accessibility.

do not put anchor tag inside button read more

update background: #e0e8ff url(../../images/pattern-background-desktop.svg) no-repeat center -20%/contain; in the body

Instead of using px, use relative units like rem or em to perform better 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
Gelcimar Moraes• 150
@GelcimarMoraes
Submitted over 1 year ago
NFT preview card component
1
Kawsar Ahmed Fahad• 2,680
@faha1999
Posted over 1 year ago
Hello, Gelcimar Moraes Congratulations on finishing this project. It's lovely and great on the whole! Just a little tip:

remove margin: 0 auto; 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
Andrés• 130
@AnsAjxup
Submitted over 1 year ago
qr component using html and css
2
Kawsar Ahmed Fahad• 2,680
@faha1999
Posted over 1 year ago
Hello, Andrés 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="card"></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; }

remove margin: 50px auto; from the .card

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 for this project live, repo

I hope it will work. Happy coding.
1
Ansh• 20
@anshmart
Submitted over 1 year ago
nft-preview-card
1
Kawsar Ahmed Fahad• 2,680
@faha1999
Posted over 1 year ago
Hello, Ansh 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.

remove margin & padding from the body

add the below code to the .container. It will center everything

body { justify-content: center; align-items: center; display: flex; min-height: 100vh; /* padding: 0 1em; */ /* max-width: 700px; */ /* margin-top: 5rem; */ /* margin-left: auto; */ /* margin-right: auto; */ /* margin-bottom: auto; */ }

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

active-state of h3 & p span

.equi:hover, .name: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

fixed the other HTML validation error form the report.

this is my solution of this challenge live,repo

I hope it will work. Happy coding.
Marked as helpful
0
Mariana Arias• 10
@mariasmoUN
Submitted over 1 year ago
Product Preview Card
1
Kawsar Ahmed Fahad• 2,680
@faha1999
Posted over 1 year ago
Hello, Mariana Arias 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">

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

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

remove margin-top: 7%; from .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

I hope it will work. Happy coding.
0
Jose Rodriguez (Mikey)• 160
@MikeyRG127
Submitted over 1 year ago
I feel so good for having created my own little website just with the knowledge I acquired in just a few days. I don't know if I'm doing everything well but, I'm here to learn more every single day.
CSS GRID
3
Kawsar Ahmed Fahad• 2,680
@faha1999
Posted over 1 year ago
Hello, Jose Rodriguez (Mikey) 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="product-container"> </main>

This would help improve accessibility.

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; /* padding-top: 110px;*/ background-color: hsl(30, 38%, 92%); }

media issue

@media only screen and (max-width: 430px){ .product-container { max-width: 350px; } .image-container { border-radius: 10px 0px 0px 10px; background: url(images/image-product-mobile.jpg); } }

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

This is my solution of this challenge live, repo

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

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

NFT Card

Responsive page using Angular Framework

NFT preview card

nft-card

NFT Preview Card Component Using Bootstrap

Frontend Mentor Nft-Card

Responsive landing page using CSS grid

NFT preview card component

qr component using html and css

nft-preview-card

Product Preview Card

CSS GRID